Naive pass at commit durationfiltering
Brian Vaughn committed
Mar 13, 2019 at 17:00 UTC
210c2371cf20b17e5c25267f375abdb9ec6172c2
5 files changed
+101
-45
src/devtools/views/Profiler/FilterModal.js
+17
-16
@@ -1,7 +1,8 @@
1
// @flow
2
3
-import React, { useCallback, useEffect, useRef } from 'react';
4
-import { useLocalStorage, useModalDismissSignal } from '../hooks';
3
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
4
+import { useModalDismissSignal } from '../hooks';
5
+import { ProfilerContext } from './ProfilerContext';
6
7
import styles from './FilterModal.css';
8
@@ -10,33 +11,33 @@ type Props = {|
11
|};
12
13
export default function FilterModal({ dismissModal }: Props) {
13
- const [isEnabled, setIsEnabled] = useLocalStorage<boolean>(
14
- 'minCommitDurationFilterEnabled',
15
- false
16
- );
17
- const [value, setValue] = useLocalStorage<number>(
18
- 'minCommitDurationFilter',
19
- 0
20
- );
14
+ const {
15
+ isMinCommitDurationEnabled,
16
+ minCommitDuration,
17
+ setMinCommitDuration,
18
+ setIsMinCommitDurationEnabled,
19
+ } = useContext(ProfilerContext);
20
21
const handleNumberChange = useCallback(
22
({ currentTarget }) => {
23
const newValue = parseInt(currentTarget.value, 10);
25
- setValue(Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue);
24
+ setMinCommitDuration(
25
+ Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
26
+ );
27
},
27
- [setValue]
28
+ [setMinCommitDuration]
29
);
30
31
const handleEnabledChange = useCallback(
32
({ currentTarget }) => {
32
- setIsEnabled(currentTarget.checked);
33
+ setIsMinCommitDurationEnabled(currentTarget.checked);
34
if (currentTarget.checked) {
35
if (inputRef.current !== null) {
36
inputRef.current.focus();
37
}
38
}
39
},
39
- [setIsEnabled]
40
+ [setIsMinCommitDurationEnabled]
41
);
42
43
const inputRef = useRef<HTMLInputElement | null>(null);
@@ -55,7 +56,7 @@ export default function FilterModal({ dismissModal }: Props) {
56
<div className={styles.Modal} ref={modalRef}>
57
<label>
58
<input
58
- checked={isEnabled}
59
+ checked={isMinCommitDurationEnabled}
60
onChange={handleEnabledChange}
61
type="checkbox"
62
/>{' '}
@@ -66,7 +67,7 @@ export default function FilterModal({ dismissModal }: Props) {
67
onChange={handleNumberChange}
68
ref={inputRef}
69
type="number"
69
- value={value}
70
+ value={minCommitDuration}
71
/>{' '}
72
(ms)
73
</div>
src/devtools/views/Profiler/ProfilerContext.js
+22
@@ -10,15 +10,20 @@ import React, {
10
import { useSubscription } from '../hooks';
11
import { TreeContext } from 'src/devtools/views/Elements/TreeContext';
12
import { StoreContext } from '../context';
13
+import { useLocalStorage } from '../hooks';
14
import Store from '../../store';
15
16
type Context = {|
17
commitIndex: number,
18
hasProfilingData: boolean,
19
+ isMinCommitDurationEnabled: boolean,
20
isProfiling: boolean,
21
+ minCommitDuration: number,
22
rendererID: number | null,
23
rootID: number | null,
24
setCommitIndex: (value: number) => void,
25
+ setMinCommitDuration: (value: number) => void,
26
+ setIsMinCommitDurationEnabled: (value: boolean) => void,
27
startProfiling(value: boolean): void,
28
stopProfiling(value: boolean): void,
29
|};
@@ -94,13 +99,26 @@ function ProfilerContextController({ children }: Props) {
99
setCommitIndex(0);
100
}
101
102
+ const [
103
+ isMinCommitDurationEnabled,
104
+ setIsMinCommitDurationEnabled,
105
+ ] = useLocalStorage<boolean>('isMinCommitDurationEnabled', false);
106
+ const [minCommitDuration, setMinCommitDuration] = useLocalStorage<number>(
107
+ 'minCommitDuration',
108
+ 0
109
+ );
110
+
111
const value = useMemo(
112
() => ({
113
commitIndex,
114
hasProfilingData,
115
+ isMinCommitDurationEnabled,
116
isProfiling,
117
+ minCommitDuration,
118
rendererID,
119
rootID,
120
+ setMinCommitDuration,
121
+ setIsMinCommitDurationEnabled,
122
setCommitIndex,
123
startProfiling,
124
stopProfiling,
@@ -108,9 +126,13 @@ function ProfilerContextController({ children }: Props) {
126
[
127
commitIndex,
128
hasProfilingData,
129
+ isMinCommitDurationEnabled,
130
isProfiling,
131
+ minCommitDuration,
132
rendererID,
133
rootID,
134
+ setMinCommitDuration,
135
+ setIsMinCommitDurationEnabled,
136
setCommitIndex,
137
startProfiling,
138
stopProfiling,
src/devtools/views/Profiler/SnapshotCommitList.js
+6
-7
@@ -12,8 +12,6 @@ import { FixedSizeList } from 'react-window';
12
import SnapshotCommitListItem from './SnapshotCommitListItem';
13
import { minBarWidth } from './constants';
14
15
-import type { ProfilingSummary } from './types';
16
-
15
export type ItemData = {|
16
commitDurations: Array<number>,
17
commitTimes: Array<number>,
@@ -24,7 +22,8 @@ export type ItemData = {|
22
|};
23
24
type Props = {|
27
- profilingSummary: ProfilingSummary,
25
+ commitDurations: Array<number>,
26
+ commitTimes: Array<number>,
27
selectedCommitIndex: number,
28
setCommitIndex: (index: number) => void,
29
viewNextCommit: () => void,
@@ -41,7 +40,8 @@ export default function SnapshotCommitList(props: Props) {
40
41
type ListProps = {|
42
height: number,
44
- profilingSummary: ProfilingSummary,
43
+ commitDurations: Array<number>,
44
+ commitTimes: Array<number>,
45
selectedCommitIndex: number,
46
setCommitIndex: (index: number) => void,
47
viewNextCommit: () => void,
@@ -51,7 +51,8 @@ type ListProps = {|
51
52
function List({
53
height,
54
- profilingSummary,
54
+ commitDurations,
55
+ commitTimes,
56
selectedCommitIndex,
57
setCommitIndex,
58
viewNextCommit,
@@ -86,8 +87,6 @@ function List({
87
};
88
}, [handleMouseUp]);
89
89
- const { commitDurations, commitTimes } = profilingSummary;
90
-
90
const itemSize = useMemo(
91
() => Math.max(minBarWidth, width / commitDurations.length),
92
[commitDurations, width]
src/devtools/views/Profiler/SnapshotSelector.css
+8
@@ -29,3 +29,11 @@
29
white-space: nowrap;
30
font-family: var(--font-family-monospace);
31
}
32
+
33
+.NoCommits {
34
+ height: 100%;
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ color: var(--color-dim);
39
+}
src/devtools/views/Profiler/SnapshotSelector.js
+48
-22
@@ -21,26 +21,47 @@ export default function SnapshotSelectorSuspense(_: Props) {
21
22
function SnapshotSelector(_: Props) {
23
const { profilingCache } = useContext(StoreContext);
24
- const { commitIndex, rendererID, rootID, setCommitIndex } = useContext(
25
- ProfilerContext
26
- );
24
+ const {
25
+ commitIndex,
26
+ isMinCommitDurationEnabled,
27
+ minCommitDuration,
28
+ rendererID,
29
+ rootID,
30
+ setCommitIndex,
31
+ } = useContext(ProfilerContext);
32
33
if (rendererID === null || rootID === null) {
34
return null;
35
}
36
32
- // TODO (profiling) Parse the summary into something easier for the views to work with
33
- const profilingSummary = profilingCache.ProfilingSummary.read({
34
- rendererID: ((rendererID: any): number),
35
- rootID: ((rootID: any): number),
36
- });
37
-
38
- const numCommits = profilingSummary.commitDurations.length;
37
+ const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
38
+ {
39
+ rendererID: ((rendererID: any): number),
40
+ rootID: ((rootID: any): number),
41
+ }
42
+ );
43
40
- if (numCommits === 0) {
41
- return null;
44
+ // TODO (profiling) This is not sufficient; index here doesn't map to a meaningful index in the profiling data.
45
+ let filteredCommitDurations = commitDurations;
46
+ let filteredCommitTimes = commitTimes;
47
+ if (isMinCommitDurationEnabled) {
48
+ filteredCommitDurations = [];
49
+ filteredCommitTimes = [];
50
+ for (let i = 0; i < commitDurations.length; i++) {
51
+ if (commitDurations[i] >= minCommitDuration) {
52
+ filteredCommitDurations.push(commitDurations[i]);
53
+ filteredCommitTimes.push(commitTimes[i]);
54
+ }
55
+ }
56
}
57
58
+ const numCommits = filteredCommitDurations.length;
59
+ const currentCommitNumber = `${
60
+ numCommits > 0 ? commitIndex + 1 : '-'
61
+ }`.padStart(`${numCommits}`.length, '0');
62
+
63
+ // TODO (profiler) We need to guard commit index and share filterd statuses in a better way.
64
+
65
const viewNextCommit = () => {
66
setCommitIndex(Math.min(commitIndex + 1, numCommits - 1));
67
};
@@ -53,24 +74,29 @@ function SnapshotSelector(_: Props) {
74
<div className={styles.VRule} />
75
<div className={styles.SnapshotSelector}>
76
<span className={styles.Number}>
56
- {`${commitIndex + 1}`.padStart(`${numCommits}`.length, '0')} /{' '}
57
- {numCommits}
77
+ {currentCommitNumber} / {numCommits}
78
</span>
79
<Button
80
className={styles.Button}
61
- disabled={commitIndex <= 0}
81
+ disabled={numCommits === 0 || commitIndex <= 0}
82
onClick={viewPrevCommit}
83
>
84
<ButtonIcon type="previous" />
85
</Button>
86
<div className={styles.Commits}>
67
- <SnapshotCommitList
68
- profilingSummary={profilingSummary}
69
- selectedCommitIndex={commitIndex}
70
- setCommitIndex={setCommitIndex}
71
- viewNextCommit={viewNextCommit}
72
- viewPrevCommit={viewPrevCommit}
73
- />
87
+ {numCommits > 0 && (
88
+ <SnapshotCommitList
89
+ commitDurations={filteredCommitDurations}
90
+ commitTimes={filteredCommitTimes}
91
+ selectedCommitIndex={commitIndex}
92
+ setCommitIndex={setCommitIndex}
93
+ viewNextCommit={viewNextCommit}
94
+ viewPrevCommit={viewPrevCommit}
95
+ />
96
+ )}
97
+ {numCommits === 0 && (
98
+ <div className={styles.NoCommits}>No commits</div>
99
+ )}
100
</div>
101
<Button
102
className={styles.Button}