Finished iterating on commit selector UI for now
Brian Vaughn committed
Mar 15, 2019 at 11:51 UTC
8a7be78ed734322576923283bcfc71666be2458a
5 files changed
+65
-28
src/devtools/views/Profiler/FilterModal.js
+1
-1
@@ -20,7 +20,7 @@ export default function FilterModal({ dismissModal }: Props) {
20
21
const handleNumberChange = useCallback(
22
({ currentTarget }) => {
23
- const newValue = parseInt(currentTarget.value, 10);
23
+ const newValue = parseFloat(currentTarget.value);
24
setMinCommitDuration(
25
Number.isNaN(newValue) || newValue <= 0 ? 0 : newValue
26
);
src/devtools/views/Profiler/Profiler.js
+1
-1
@@ -70,8 +70,8 @@ function SuspendingProfiler(_: {||}) {
70
const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
71
const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
72
73
- // TODO (profiling) Differentiate between no data and no data for the current root
73
// TODO (profiling) Show selected "tab" view
74
+ // TODO (profiling) Handle cases: no selected commit, no data for root
75
const view = <div>Coming soon...</div>;
76
77
return (
src/devtools/views/Profiler/SnapshotCommitList.js
+24
-18
@@ -19,6 +19,7 @@ export type ItemData = {|
19
isMouseDown: boolean,
20
maxDuration: number,
21
selectedCommitIndex: number | null,
22
+ selectedFilteredCommitIndex: number | null,
23
setSelectedCommitIndex: (index: number) => void,
24
|};
25
@@ -27,6 +28,7 @@ type Props = {|
28
commitTimes: Array<number>,
29
filteredCommitIndices: Array<number>,
30
selectedCommitIndex: number | null,
31
+ selectedFilteredCommitIndex: number | null,
32
setSelectedCommitIndex: (index: number) => void,
33
|};
34
@@ -35,6 +37,7 @@ export default function SnapshotCommitList({
37
commitTimes,
38
filteredCommitIndices,
39
selectedCommitIndex,
40
+ selectedFilteredCommitIndex,
41
setSelectedCommitIndex,
42
}: Props) {
43
return (
@@ -46,6 +49,7 @@ export default function SnapshotCommitList({
49
height={height}
50
filteredCommitIndices={filteredCommitIndices}
51
selectedCommitIndex={selectedCommitIndex}
52
+ selectedFilteredCommitIndex={selectedFilteredCommitIndex}
53
setSelectedCommitIndex={setSelectedCommitIndex}
54
width={width}
55
/>
@@ -60,6 +64,7 @@ type ListProps = {|
64
height: number,
65
filteredCommitIndices: Array<number>,
66
selectedCommitIndex: number | null,
67
+ selectedFilteredCommitIndex: number | null,
68
setSelectedCommitIndex: (index: number) => void,
69
width: number,
70
|};
@@ -70,6 +75,7 @@ function List({
75
commitTimes,
76
height,
77
filteredCommitIndices,
78
+ selectedFilteredCommitIndex,
79
setSelectedCommitIndex,
80
width,
81
}: ListProps) {
@@ -78,13 +84,13 @@ function List({
84
85
// Make sure a newly selected snapshot is fully visible within the list.
86
useEffect(() => {
81
- if (selectedCommitIndex !== prevCommitIndexRef.current) {
82
- prevCommitIndexRef.current = selectedCommitIndex;
83
- if (selectedCommitIndex !== null && listRef.current !== null) {
84
- listRef.current.scrollToItem(selectedCommitIndex);
87
+ if (selectedFilteredCommitIndex !== prevCommitIndexRef.current) {
88
+ prevCommitIndexRef.current = selectedFilteredCommitIndex;
89
+ if (selectedFilteredCommitIndex !== null && listRef.current !== null) {
90
+ listRef.current.scrollToItem(selectedFilteredCommitIndex);
91
}
92
}
87
- }, [listRef, selectedCommitIndex]);
93
+ }, [listRef, selectedFilteredCommitIndex]);
94
95
// When the mouse is down, dragging over a commit should auto-select it.
96
// This provides a nice way for users to swipe across a range of commits to compare them.
@@ -125,6 +131,7 @@ function List({
131
isMouseDown,
132
maxDuration,
133
selectedCommitIndex,
134
+ selectedFilteredCommitIndex,
135
setSelectedCommitIndex,
136
}),
137
[
@@ -134,6 +141,7 @@ function List({
141
isMouseDown,
142
maxDuration,
143
selectedCommitIndex,
144
+ selectedFilteredCommitIndex,
145
setSelectedCommitIndex,
146
]
147
);
@@ -144,19 +152,17 @@ function List({
152
onMouseUp={handleMouseUp}
153
style={{ height, width }}
154
>
147
- {commitDurations.length > 0 && (
148
- <FixedSizeList
149
- direction="horizontal"
150
- height={height}
151
- itemCount={filteredCommitIndices.length}
152
- itemData={itemData}
153
- itemSize={itemSize}
154
- ref={(listRef: any) /* Flow bug? */}
155
- width={width}
156
- >
157
- {SnapshotCommitListItem}
158
- </FixedSizeList>
159
- )}
155
+ <FixedSizeList
156
+ direction="horizontal"
157
+ height={height}
158
+ itemCount={filteredCommitIndices.length}
159
+ itemData={itemData}
160
+ itemSize={itemSize}
161
+ ref={(listRef: any) /* Flow bug? */}
162
+ width={width}
163
+ >
164
+ {SnapshotCommitListItem}
165
+ </FixedSizeList>
166
</div>
167
);
168
}
src/devtools/views/Profiler/SnapshotSelector.css
+1
-1
@@ -4,7 +4,7 @@
4
}
5
6
.Commits {
7
- height: 2.25rem;
7
+ height: 100%;
8
min-width: 30px;
9
margin-left: 0.25rem;
10
overflow: hidden;
src/devtools/views/Profiler/SnapshotSelector.js
+38
-7
@@ -42,9 +42,30 @@ export default function SnapshotSelector(_: Props) {
42
);
43
44
const numCommits = filteredCommitIndices.length;
45
+
46
+ // Map the (unfiltered) selected commit index to an index within the filtered data.
47
+ const selectedFilteredCommitIndex = useMemo(() => {
48
+ if (selectedCommitIndex !== null) {
49
+ for (let i = 0; i < filteredCommitIndices.length; i++) {
50
+ if (filteredCommitIndices[i] === selectedCommitIndex) {
51
+ return i;
52
+ }
53
+ }
54
+ }
55
+ return null;
56
+ }, [filteredCommitIndices, selectedCommitIndex]);
57
+
58
+ if (selectedFilteredCommitIndex === null) {
59
+ if (numCommits > 0) {
60
+ setSelectedCommitIndex(0);
61
+ }
62
+ } else if (selectedFilteredCommitIndex >= numCommits) {
63
+ setSelectedCommitIndex(numCommits === 0 ? null : numCommits - 1);
64
+ }
65
+
66
let currentCommitNumber = '-';
67
if (numCommits > 0) {
47
- currentCommitNumber = `${selectedCommitIndex + 1}`.padStart(
68
+ currentCommitNumber = `${selectedFilteredCommitIndex + 1}`.padStart(
69
`${numCommits}`.length,
70
'0'
71
);
@@ -52,18 +73,26 @@ export default function SnapshotSelector(_: Props) {
73
74
const viewNextCommit = useCallback(() => {
75
const nextCommitIndex = Math.min(
55
- ((selectedCommitIndex: any): number) + 1,
76
+ ((selectedFilteredCommitIndex: any): number) + 1,
77
filteredCommitIndices.length - 1
78
);
79
setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
59
- }, [selectedCommitIndex, filteredCommitIndices, setSelectedCommitIndex]);
80
+ }, [
81
+ selectedFilteredCommitIndex,
82
+ filteredCommitIndices,
83
+ setSelectedCommitIndex,
84
+ ]);
85
const viewPrevCommit = useCallback(() => {
86
const nextCommitIndex = Math.max(
62
- ((selectedCommitIndex: any): number) - 1,
87
+ ((selectedFilteredCommitIndex: any): number) - 1,
88
0
89
);
90
setSelectedCommitIndex(filteredCommitIndices[nextCommitIndex]);
66
- }, [selectedCommitIndex, filteredCommitIndices, setSelectedCommitIndex]);
91
+ }, [
92
+ selectedFilteredCommitIndex,
93
+ filteredCommitIndices,
94
+ setSelectedCommitIndex,
95
+ ]);
96
97
if (rendererID === null || rootID === null) {
98
return null;
@@ -77,7 +106,7 @@ export default function SnapshotSelector(_: Props) {
106
</span>
107
<Button
108
className={styles.Button}
80
- disabled={selectedCommitIndex === 0 || numCommits === 0}
109
+ disabled={selectedFilteredCommitIndex === 0 || numCommits === 0}
110
onClick={viewPrevCommit}
111
>
112
<ButtonIcon type="previous" />
@@ -95,6 +124,7 @@ export default function SnapshotSelector(_: Props) {
124
commitTimes={commitTimes}
125
filteredCommitIndices={filteredCommitIndices}
126
selectedCommitIndex={selectedCommitIndex}
127
+ selectedFilteredCommitIndex={selectedFilteredCommitIndex}
128
setSelectedCommitIndex={setSelectedCommitIndex}
129
/>
130
)}
@@ -103,7 +133,8 @@ export default function SnapshotSelector(_: Props) {
133
<Button
134
className={styles.Button}
135
disabled={
106
- selectedCommitIndex === null || selectedCommitIndex >= numCommits - 1
136
+ selectedFilteredCommitIndex === null ||
137
+ selectedFilteredCommitIndex >= numCommits - 1
138
}
139
onClick={viewNextCommit}
140
>