3298759472

Build Type

push

github

Committed by GitHub

Commit Message

Replace fuzzy matching with exact substring matching for finding matching frames (#407)

Run Details

1077 of 2683 branches covered (40.14%)

Branch coverage included in aggregate %.

11 of 15 new or added lines in 2 files covered. (73.33%)

1 existing line in 1 file now uncovered.

2504 of 5875 relevant lines covered (42.62%)

6518.77 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/views/sandwich-view.tsx

import {Frame} from '../lib/profile'
import {StyleSheet, css} from 'aphrodite'
import {ProfileTableViewContainer} from './profile-table-view'
import {h, JSX, createContext} from 'preact'
import {memo} from 'preact/compat'
import {useCallback, useMemo, useContext} from 'preact/hooks'
import {commonStyle, Sizes, FontSize} from './style'
import {InvertedCallerFlamegraphView} from './inverted-caller-flamegraph-view'
import {CalleeFlamegraphView} from './callee-flamegraph-view'
import {SandwichSearchView} from './sandwich-search-view'
import {ActiveProfileState} from '../app-state/active-profile-state'
import {sortBy} from '../lib/utils'
import {ProfileSearchContext} from './search-view'
import {Theme, useTheme, withTheme} from './themes/theme'
import {SortField, SortDirection, profileGroupAtom, tableSortMethodAtom} from '../app-state'
import {useAtom} from '../lib/atom'
import {StatelessComponent} from '../lib/preact-helpers'

interface SandwichViewProps {
  selectedFrame: Frame | null
  profileIndex: number
  theme: Theme
  activeProfileState: ActiveProfileState
  setSelectedFrame: (selectedFrame: Frame | null) => void
  glCanvas: HTMLCanvasElement
}

class SandwichView extends StatelessComponent<SandwichViewProps> {
  private setSelectedFrame = (selectedFrame: Frame | null) => {
    this.props.setSelectedFrame(selectedFrame)
  }

  onWindowKeyPress = (ev: KeyboardEvent) => {
    if (ev.key === 'Escape') {
      this.setSelectedFrame(null)
    }
  }

  componentDidMount() {
    window.addEventListener('keydown', this.onWindowKeyPress)
  }
  componentWillUnmount() {
    window.removeEventListener('keydown', this.onWindowKeyPress)
  }

  render() {
    const style = getStyle(this.props.theme)

    const {selectedFrame} = this.props
    let flamegraphViews: JSX.Element | null = null

    if (selectedFrame) {
      flamegraphViews = (
        <div className={css(commonStyle.fillY, style.callersAndCallees, commonStyle.vbox)}>
          <div className={css(commonStyle.hbox, style.panZoomViewWraper)}>
            <div className={css(style.flamechartLabelParent)}>
              <div className={css(style.flamechartLabel)}>Callers</div>
            </div>
            <InvertedCallerFlamegraphView
              glCanvas={this.props.glCanvas}
              activeProfileState={this.props.activeProfileState}
            />
          </div>
          <div className={css(style.divider)} />
          <div className={css(commonStyle.hbox, style.panZoomViewWraper)}>
            <div className={css(style.flamechartLabelParent, style.flamechartLabelParentBottom)}>
              <div className={css(style.flamechartLabel, style.flamechartLabelBottom)}>Callees</div>
            </div>
            <CalleeFlamegraphView
              glCanvas={this.props.glCanvas}
              activeProfileState={this.props.activeProfileState}
            />
          </div>
        </div>
      )
    }

    return (
      <div className={css(commonStyle.hbox, commonStyle.fillY)}>
        <div className={css(style.tableView)}>
          <ProfileTableViewContainer activeProfileState={this.props.activeProfileState} />
          <SandwichSearchView />
        </div>
        {flamegraphViews}
      </div>
    )
  }
}

const getStyle = withTheme(theme =>
  StyleSheet.create({
    tableView: {
      position: 'relative',
      flex: 1,
    },
    panZoomViewWraper: {
      flex: 1,
    },
    flamechartLabelParent: {
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-end',
      alignItems: 'flex-start',
      fontSize: FontSize.TITLE,
      width: FontSize.TITLE * 1.2,
      borderRight: `1px solid ${theme.fgSecondaryColor}`,
    },
    flamechartLabelParentBottom: {
      justifyContent: 'flex-start',
    },
    flamechartLabel: {
      transform: 'rotate(-90deg)',
      transformOrigin: '50% 50% 0',
      width: FontSize.TITLE * 1.2,
      flexShrink: 1,
    },
    flamechartLabelBottom: {
      transform: 'rotate(-90deg)',
      display: 'flex',
      justifyContent: 'flex-end',
    },
    callersAndCallees: {
      flex: 1,
      borderLeft: `${Sizes.SEPARATOR_HEIGHT}px solid ${theme.fgSecondaryColor}`,
    },
    divider: {
      height: 2,
      background: theme.fgSecondaryColor,
    },
  }),
)

interface SandwichViewContainerProps {
  activeProfileState: ActiveProfileState
  glCanvas: HTMLCanvasElement
}

interface SandwichViewContextData {
  rowList: Frame[]
  selectedFrame: Frame | null
  setSelectedFrame: (frame: Frame | null) => void
  getIndexForFrame: (frame: Frame) => number | null
  getSearchMatchForFrame: (frame: Frame) => [number, number][] | null
}

export const SandwichViewContext = createContext<SandwichViewContextData | null>(null)

export const SandwichViewContainer = memo((ownProps: SandwichViewContainerProps) => {
  const {activeProfileState, glCanvas} = ownProps
  const {sandwichViewState, index} = activeProfileState
  const {callerCallee} = sandwichViewState

  const theme = useTheme()
  const setSelectedFrame = useCallback((selectedFrame: Frame | null) => {
    profileGroupAtom.setSelectedFrame(selectedFrame)
  }, [])

  const profile = activeProfileState.profile
  const tableSortMethod = useAtom(tableSortMethodAtom)
  const profileSearchResults = useContext(ProfileSearchContext)

  const selectedFrame = callerCallee ? callerCallee.selectedFrame : null

  const rowList: Frame[] = useMemo(() => {
    const rowList: Frame[] = []

    profile.forEachFrame(frame => {
      if (profileSearchResults && !profileSearchResults.getMatchForFrame(frame)) {
        return
      }
      rowList.push(frame)
    })

    switch (tableSortMethod.field) {
      case SortField.SYMBOL_NAME: {
        sortBy(rowList, f => f.name.toLowerCase())
        break
      }
      case SortField.SELF: {
        sortBy(rowList, f => f.getSelfWeight())
        break
      }
      case SortField.TOTAL: {
        sortBy(rowList, f => f.getTotalWeight())
        break
      }
    }
    if (tableSortMethod.direction === SortDirection.DESCENDING) {
      rowList.reverse()
    }

    return rowList
  }, [profile, profileSearchResults, tableSortMethod])

  const getIndexForFrame: (frame: Frame) => number | null = useMemo(() => {
    const indexByFrame = new Map<Frame, number>()
    for (let i = 0; i < rowList.length; i++) {
      indexByFrame.set(rowList[i], i)
    }
    return (frame: Frame) => {
      const index = indexByFrame.get(frame)
      return index == null ? null : index
    }
  }, [rowList])

  const getSearchMatchForFrame: (frame: Frame) => [number, number][] | null = useMemo(() => {
    return (frame: Frame) => {
      if (profileSearchResults == null) return null
      return profileSearchResults.getMatchForFrame(frame)
    }
  }, [profileSearchResults])

  const contextData: SandwichViewContextData = {
    rowList,
    selectedFrame,
    setSelectedFrame,
    getIndexForFrame,
    getSearchMatchForFrame,
  }

  return (
    <SandwichViewContext.Provider value={contextData}>
      <SandwichView
        theme={theme}
        activeProfileState={activeProfileState}
        glCanvas={glCanvas}
        setSelectedFrame={setSelectedFrame}
        selectedFrame={selectedFrame}
        profileIndex={index}
      />
    </SandwichViewContext.Provider>
  )
})

1	import {Frame} from '../lib/profile'
2	import {StyleSheet, css} from 'aphrodite'	×
3	import {ProfileTableViewContainer} from './profile-table-view'	×
4	import {h, JSX, createContext} from 'preact'	×
5	import {memo} from 'preact/compat'	×
6	import {useCallback, useMemo, useContext} from 'preact/hooks'	×
7	import {commonStyle, Sizes, FontSize} from './style'	×
8	import {InvertedCallerFlamegraphView} from './inverted-caller-flamegraph-view'	×
9	import {CalleeFlamegraphView} from './callee-flamegraph-view'	×
10	import {SandwichSearchView} from './sandwich-search-view'	×
11	import {ActiveProfileState} from '../app-state/active-profile-state'
12	import {sortBy} from '../lib/utils'	×
13	import {ProfileSearchContext} from './search-view'	×
UNCOV 14	import {Theme, useTheme, withTheme} from './themes/theme'	×
15	import {SortField, SortDirection, profileGroupAtom, tableSortMethodAtom} from '../app-state'	×
16	import {useAtom} from '../lib/atom'	×
17	import {StatelessComponent} from '../lib/preact-helpers'	×
18
19	interface SandwichViewProps {
20	selectedFrame: Frame \| null
21	profileIndex: number
22	theme: Theme
23	activeProfileState: ActiveProfileState
24	setSelectedFrame: (selectedFrame: Frame \| null) => void
25	glCanvas: HTMLCanvasElement
26	}
27
28	class SandwichView extends StatelessComponent<SandwichViewProps> {
29	private setSelectedFrame = (selectedFrame: Frame \| null) => {	×
30	this.props.setSelectedFrame(selectedFrame)	×
31	}
32
33	onWindowKeyPress = (ev: KeyboardEvent) => {	×
34	if (ev.key === 'Escape') {	×
35	this.setSelectedFrame(null)	×
36	}
37	}
38
39	componentDidMount() {
40	window.addEventListener('keydown', this.onWindowKeyPress)	×
41	}
42	componentWillUnmount() {
43	window.removeEventListener('keydown', this.onWindowKeyPress)	×
44	}
45
46	render() {
47	const style = getStyle(this.props.theme)	×
48
49	const {selectedFrame} = this.props	×
50	let flamegraphViews: JSX.Element \| null = null	×
51
52	if (selectedFrame) {	×
53	flamegraphViews = (	×
54	<div className={css(commonStyle.fillY, style.callersAndCallees, commonStyle.vbox)}>
55	<div className={css(commonStyle.hbox, style.panZoomViewWraper)}>
56	<div className={css(style.flamechartLabelParent)}>
57	<div className={css(style.flamechartLabel)}>Callers</div>
58	</div>
59	<InvertedCallerFlamegraphView
60	glCanvas={this.props.glCanvas}
61	activeProfileState={this.props.activeProfileState}
62	/>
63	</div>
64	<div className={css(style.divider)} />
65	<div className={css(commonStyle.hbox, style.panZoomViewWraper)}>
66	<div className={css(style.flamechartLabelParent, style.flamechartLabelParentBottom)}>
67	<div className={css(style.flamechartLabel, style.flamechartLabelBottom)}>Callees</div>
68	</div>
69	<CalleeFlamegraphView
70	glCanvas={this.props.glCanvas}
71	activeProfileState={this.props.activeProfileState}
72	/>
73	</div>
74	</div>
75	)
76	}
77
78	return (	×
79	<div className={css(commonStyle.hbox, commonStyle.fillY)}>
80	<div className={css(style.tableView)}>
81	<ProfileTableViewContainer activeProfileState={this.props.activeProfileState} />
82	<SandwichSearchView />
83	</div>
84	{flamegraphViews}
85	</div>
86	)
87	}
88	}
89
90	const getStyle = withTheme(theme =>	×
91	StyleSheet.create({	×
92	tableView: {
93	position: 'relative',
94	flex: 1,
95	},
96	panZoomViewWraper: {
97	flex: 1,
98	},
99	flamechartLabelParent: {
100	display: 'flex',
101	flexDirection: 'column',
102	justifyContent: 'flex-end',
103	alignItems: 'flex-start',
104	fontSize: FontSize.TITLE,
105	width: FontSize.TITLE * 1.2,
106	borderRight: `1px solid ${theme.fgSecondaryColor}`,
107	},
108	flamechartLabelParentBottom: {
109	justifyContent: 'flex-start',
110	},
111	flamechartLabel: {
112	transform: 'rotate(-90deg)',
113	transformOrigin: '50% 50% 0',
114	width: FontSize.TITLE * 1.2,
115	flexShrink: 1,
116	},
117	flamechartLabelBottom: {
118	transform: 'rotate(-90deg)',
119	display: 'flex',
120	justifyContent: 'flex-end',
121	},
122	callersAndCallees: {
123	flex: 1,
124	borderLeft: `${Sizes.SEPARATOR_HEIGHT}px solid ${theme.fgSecondaryColor}`,
125	},
126	divider: {
127	height: 2,
128	background: theme.fgSecondaryColor,
129	},
130	}),
131	)
132
133	interface SandwichViewContainerProps {
134	activeProfileState: ActiveProfileState
135	glCanvas: HTMLCanvasElement
136	}
137
138	interface SandwichViewContextData {
139	rowList: Frame[]
140	selectedFrame: Frame \| null
141	setSelectedFrame: (frame: Frame \| null) => void
142	getIndexForFrame: (frame: Frame) => number \| null
143	getSearchMatchForFrame: (frame: Frame) => [number, number][] \| null
144	}
145
146	export const SandwichViewContext = createContext<SandwichViewContextData \| null>(null)	×
147
148	export const SandwichViewContainer = memo((ownProps: SandwichViewContainerProps) => {	×
149	const {activeProfileState, glCanvas} = ownProps	×
150	const {sandwichViewState, index} = activeProfileState	×
151	const {callerCallee} = sandwichViewState	×
152
153	const theme = useTheme()	×
154	const setSelectedFrame = useCallback((selectedFrame: Frame \| null) => {	×
155	profileGroupAtom.setSelectedFrame(selectedFrame)	×
156	}, [])
157
158	const profile = activeProfileState.profile	×
159	const tableSortMethod = useAtom(tableSortMethodAtom)	×
160	const profileSearchResults = useContext(ProfileSearchContext)	×
161
162	const selectedFrame = callerCallee ? callerCallee.selectedFrame : null	×
163
164	const rowList: Frame[] = useMemo(() => {	×
165	const rowList: Frame[] = []	×
166
167	profile.forEachFrame(frame => {	×
168	if (profileSearchResults && !profileSearchResults.getMatchForFrame(frame)) {	×
169	return	×
170	}
171	rowList.push(frame)	×
172	})
173
174	switch (tableSortMethod.field) {	×
175	case SortField.SYMBOL_NAME: {	×
176	sortBy(rowList, f => f.name.toLowerCase())	×
177	break	×
178	}
179	case SortField.SELF: {
180	sortBy(rowList, f => f.getSelfWeight())	×
181	break	×
182	}
183	case SortField.TOTAL: {
184	sortBy(rowList, f => f.getTotalWeight())	×
185	break	×
186	}
187	}
188	if (tableSortMethod.direction === SortDirection.DESCENDING) {	×
189	rowList.reverse()	×
190	}
191
192	return rowList	×
193	}, [profile, profileSearchResults, tableSortMethod])
194
195	const getIndexForFrame: (frame: Frame) => number \| null = useMemo(() => {	×
196	const indexByFrame = new Map<Frame, number>()	×
197	for (let i = 0; i < rowList.length; i++) {	×
198	indexByFrame.set(rowList[i], i)	×
199	}
200	return (frame: Frame) => {	×
201	const index = indexByFrame.get(frame)	×
202	return index == null ? null : index	×
203	}
204	}, [rowList])
205
NEW 206	const getSearchMatchForFrame: (frame: Frame) => [number, number][] \| null = useMemo(() => {	×
207	return (frame: Frame) => {	×
208	if (profileSearchResults == null) return null	×
209	return profileSearchResults.getMatchForFrame(frame)	×
210	}
211	}, [profileSearchResults])
212
213	const contextData: SandwichViewContextData = {	×
214	rowList,
215	selectedFrame,
216	setSelectedFrame,
217	getIndexForFrame,
218	getSearchMatchForFrame,
219	}
220
221	return (	×
222	<SandwichViewContext.Provider value={contextData}>
223	<SandwichView
224	theme={theme}
225	activeProfileState={activeProfileState}
226	glCanvas={glCanvas}
227	setSelectedFrame={setSelectedFrame}
228	selectedFrame={selectedFrame}
229	profileIndex={index}
230	/>
231	</SandwichViewContext.Provider>
232	)
233	})

jlfwong / speedscope / 3298759472

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous