Skip to content

Commit 30fd5e2

Browse files
jordalgojordalgo
committed
Minor refactor to move handlers lower
Many of these don't have to be at the App level and instead can be part of the MainContent component.`
1 parent 9a7cb49 commit 30fd5e2

File tree

2 files changed

+277
-310
lines changed

2 files changed

+277
-310
lines changed

‎src/App.tsx‎

Lines changed: 4 additions & 288 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,11 @@ import {
66
VerifierLogState,
77
processRawLines,
88
getEmptyVerifierState,
9-
getMemSlotDependencies,
109
} from "./analyzer";
1110

1211
import {
1312
fetchLogFromUrl,
14-
getVisibleLogLineRange,
1513
scrollToCLine,
16-
siblingInsLine,
1714
getVisibleLogLines,
1815
getVisibleCLines,
1916
} from "./utils";
@@ -71,39 +68,23 @@ const ContentRaw = ({
7168
loadError,
7269
visualLogState,
7370
selectedState,
71+
setSelectedState,
7472
handlePaste,
75-
handleMainContentClick,
76-
handleCLinesClick,
77-
handleLogLinesClick,
7873
handleLogLinesOver,
7974
handleLogLinesOut,
80-
handleStateRowClick,
8175
handleFullLogToggle,
82-
onGotoStart,
83-
onGotoEnd,
8476
logListRef,
85-
visualLogStart,
86-
visualLogEnd,
87-
onLogRowsRendered,
8877
testListHeight,
8978
}: {
9079
loadError: string | null;
9180
visualLogState: VisualLogState;
9281
selectedState: LogLineState;
82+
setSelectedState: (value: React.SetStateAction<LogLineState>) => void;
9383
handlePaste: (event: React.ClipboardEvent) => void;
94-
handleMainContentClick: (event: React.MouseEvent<HTMLDivElement>) => void;
95-
handleCLinesClick: (event: React.MouseEvent<HTMLDivElement>) => void;
96-
handleLogLinesClick: (event: React.MouseEvent<HTMLDivElement>) => void;
9784
handleLogLinesOver: (event: React.MouseEvent<HTMLDivElement>) => void;
9885
handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
99-
handleStateRowClick: (event: React.MouseEvent<HTMLDivElement>) => void;
10086
handleFullLogToggle: () => void;
101-
onGotoStart: () => void;
102-
onGotoEnd: () => void;
10387
logListRef: RefObject<ListImperativeAPI | null>;
104-
visualLogStart: number;
105-
visualLogEnd: number;
106-
onLogRowsRendered: (start: number, end: number) => void;
10788
testListHeight: number | undefined;
10889
}) => {
10990
if (loadError) {
@@ -113,19 +94,11 @@ const ContentRaw = ({
11394
<MainContent
11495
visualLogState={visualLogState}
11596
selectedState={selectedState}
116-
handleCLinesClick={handleCLinesClick}
117-
handleMainContentClick={handleMainContentClick}
118-
handleLogLinesClick={handleLogLinesClick}
97+
setSelectedState={setSelectedState}
11998
handleLogLinesOver={handleLogLinesOver}
12099
handleLogLinesOut={handleLogLinesOut}
121-
handleStateRowClick={handleStateRowClick}
122100
handleFullLogToggle={handleFullLogToggle}
123-
onGotoStart={onGotoStart}
124-
onGotoEnd={onGotoEnd}
125101
logListRef={logListRef}
126-
visualLogStart={visualLogStart}
127-
visualLogEnd={visualLogEnd}
128-
onLogRowsRendered={onLogRowsRendered}
129102
testListHeight={testListHeight}
130103
/>
131104
);
@@ -157,13 +130,6 @@ function App({ testListHeight }: { testListHeight?: number }) {
157130
);
158131
const [loadError, setLoadError] = useState<string | null>(null);
159132
const [isLoading, setIsLoading] = useState<boolean>(false);
160-
const [visualIndexRange, setVisualIndexRange] = useState<{
161-
visualLogStart: number;
162-
visualLogEnd: number;
163-
}>({ visualLogStart: 0, visualLogEnd: 0 });
164-
const onLogRowsRendered = useCallback((start: number, end: number) => {
165-
setVisualIndexRange({ visualLogStart: start, visualLogEnd: end });
166-
}, []);
167133

168134
const fileInputRef = useRef<HTMLInputElement>(null);
169135
const logListRef = useListRef(null);
@@ -210,31 +176,6 @@ function App({ testListHeight }: { testListHeight?: number }) {
210176
[logLines, cLineIdToVisualIdx],
211177
);
212178

213-
const onGotoStart = useCallback(() => {
214-
if (logLines.length === 0) {
215-
return;
216-
}
217-
const lineId = logLines[0].idx;
218-
const clineId =
219-
verifierLogState.cSourceMap.logLineToCLine.get(lineId) || "";
220-
setSelectedAndScroll(lineId, "", 0, cLineIdToVisualIdx.get(clineId) || 0);
221-
}, [logLines, verifierLogState]);
222-
223-
function onGotoEnd() {
224-
if (logLines.length === 0) {
225-
return;
226-
}
227-
const lineId = logLines[logLines.length - 1].idx;
228-
const clineId =
229-
verifierLogState.cSourceMap.logLineToCLine.get(lineId) || "";
230-
setSelectedAndScroll(
231-
lineId,
232-
"",
233-
logLines.length - 1,
234-
cLineIdToVisualIdx.get(clineId) || 0,
235-
);
236-
}
237-
238179
const onClear = useCallback(() => {
239180
setVisualLogState(getEmptyVisualLogState());
240181
setSelectedState({ line: 0, memSlotId: "", cLine: "" });
@@ -259,108 +200,6 @@ function App({ testListHeight }: { testListHeight?: number }) {
259200
});
260201
}, [verifierLogState]);
261202

262-
useEffect(() => {
263-
const handleKeyDown = (e: KeyboardEvent) => {
264-
let delta = 0;
265-
let areCLinesInFocus = selectedState.cLine !== "";
266-
let min = 0;
267-
let max = 0;
268-
269-
if (areCLinesInFocus) {
270-
const range = getVisibleLogLineRange(cLines.length);
271-
min = range.min;
272-
max = range.max;
273-
} else {
274-
min = visualIndexRange.visualLogStart;
275-
max = visualIndexRange.visualLogEnd;
276-
}
277-
let page = max - min + 1;
278-
switch (e.key) {
279-
case "ArrowDown":
280-
case "j":
281-
delta = 1;
282-
break;
283-
case "ArrowUp":
284-
case "k":
285-
delta = -1;
286-
break;
287-
case "PageDown":
288-
delta = page;
289-
break;
290-
case "PageUp":
291-
delta = -page;
292-
break;
293-
case "Home":
294-
onGotoStart();
295-
return;
296-
case "End":
297-
onGotoEnd();
298-
return;
299-
case "Escape":
300-
setSelectedState({ line: 0, memSlotId: "", cLine: "" });
301-
break;
302-
default:
303-
return;
304-
}
305-
e.preventDefault();
306-
if (areCLinesInFocus) {
307-
const currentVisibleIdx =
308-
cLineIdToVisualIdx.get(selectedState.cLine) || 0;
309-
let nextVisibleIdx = currentVisibleIdx + delta;
310-
if (cLines[nextVisibleIdx] === "") {
311-
nextVisibleIdx += delta;
312-
}
313-
const logLines = verifierLogState.cSourceMap.cLineToLogLines.get(
314-
selectedState.cLine,
315-
);
316-
let logLineId = 0;
317-
if (logLines && logLines.size > 0) {
318-
[logLineId] = logLines;
319-
}
320-
const visualLogLineIdx = logLineIdxToVisualIdx.get(logLineId);
321-
setSelectedAndScroll(
322-
logLineId,
323-
cLines[nextVisibleIdx],
324-
visualLogLineIdx === undefined ? -1 : visualLogLineIdx,
325-
nextVisibleIdx,
326-
);
327-
} else {
328-
const currInsVisualIdx =
329-
logLineIdxToVisualIdx.get(selectedState.line) || 0;
330-
let nextInsVisualIdx = siblingInsLine(
331-
logLines,
332-
currInsVisualIdx,
333-
delta,
334-
);
335-
const logLineId = logLines[nextInsVisualIdx].idx;
336-
const cLineId =
337-
verifierLogState.cSourceMap.logLineToCLine.get(logLineId) || "";
338-
const visualCLineIdx = cLineIdToVisualIdx.get(cLineId);
339-
setSelectedAndScroll(
340-
logLineId,
341-
"",
342-
nextInsVisualIdx,
343-
visualCLineIdx === undefined ? -1 : visualCLineIdx,
344-
);
345-
}
346-
};
347-
348-
document.addEventListener("keydown", handleKeyDown);
349-
350-
return () => {
351-
document.removeEventListener("keydown", handleKeyDown);
352-
};
353-
}, [
354-
logLines,
355-
cLines,
356-
cLineIdToVisualIdx,
357-
selectedState,
358-
verifierLogState,
359-
logLineIdxToVisualIdx,
360-
onGotoStart,
361-
onGotoEnd,
362-
]);
363-
364203
// When a new log is loaded go to the last instruction
365204
useEffect(() => {
366205
const visualIdx = logLineIdxToVisualIdx.get(verifierLogState.lastInsIdx);
@@ -484,121 +323,6 @@ function App({ testListHeight }: { testListHeight?: number }) {
484323
};
485324
}, [verifierLogState, selectedState]);
486325

487-
const handleMainContentClick = useCallback(() => {
488-
setSelectedState((prevSelected) => {
489-
return { ...prevSelected, memSlotId: "" };
490-
});
491-
}, []);
492-
493-
const handleCLinesClick = useCallback(
494-
(e: React.MouseEvent<HTMLDivElement>) => {
495-
const target = e.target as HTMLElement;
496-
const cline = target.closest(".c-source-line");
497-
let clineId = "";
498-
if (cline) {
499-
clineId = cline.getAttribute("data-id") || "";
500-
}
501-
const logLines = verifierLogState.cSourceMap.cLineToLogLines.get(clineId);
502-
if (logLines && logLines.size > 0) {
503-
const [firstItem] = logLines;
504-
setSelectedAndScroll(
505-
firstItem,
506-
clineId,
507-
logLineIdxToVisualIdx.get(firstItem) || 0,
508-
-1,
509-
);
510-
} else {
511-
setSelectedState({ line: 0, memSlotId: "", cLine: clineId });
512-
}
513-
},
514-
[verifierLogState, logLineIdxToVisualIdx, cLineIdToVisualIdx],
515-
);
516-
517-
const handleStateRowClick = useCallback(
518-
(e: React.MouseEvent<HTMLDivElement>) => {
519-
const target = e.target as HTMLElement;
520-
const memSlot = target.closest(".state-row");
521-
if (!memSlot) {
522-
return;
523-
}
524-
let memSlotId = memSlot.getAttribute("data-id") || "";
525-
e.stopPropagation();
526-
527-
setSelectedState((prevSelectedState) => {
528-
let shouldScrollLogLines = true;
529-
530-
const parsedLine = verifierLogState.lines[selectedLine];
531-
if (parsedLine.type == ParsedLineType.INSTRUCTION) {
532-
const bpfIns = parsedLine.bpfIns;
533-
if (
534-
bpfIns.reads.includes(memSlotId) ||
535-
bpfIns.writes.includes(memSlotId)
536-
) {
537-
// the selected log line has the selectedMemSlotId
538-
// no need to scroll the panel
539-
shouldScrollLogLines = false;
540-
}
541-
}
542-
543-
if (shouldScrollLogLines) {
544-
const deps = getMemSlotDependencies(
545-
verifierLogState,
546-
selectedLine,
547-
memSlotId,
548-
);
549-
const arr = Array.from(deps);
550-
arr.sort((a, b) => a - b);
551-
const maxIdx = arr[arr.length - 1];
552-
const visualIdx = logLineIdxToVisualIdx.get(maxIdx);
553-
if (visualIdx !== undefined) {
554-
scrollToLogLine(visualIdx);
555-
}
556-
}
557-
558-
return {
559-
...prevSelectedState,
560-
memSlotId,
561-
};
562-
});
563-
},
564-
[verifierLogState, logLineIdxToVisualIdx, selectedLine],
565-
);
566-
567-
const handleLogLinesClick = useCallback(
568-
(e: React.MouseEvent<HTMLDivElement>) => {
569-
const target = e.target as HTMLElement;
570-
const memSlot = target.closest(".mem-slot");
571-
let memSlotId = "";
572-
if (memSlot) {
573-
memSlotId = memSlot.getAttribute("data-id") || "";
574-
// only stop bubbling if we clicked on a mem slot
575-
e.stopPropagation();
576-
}
577-
578-
const clickedLine = target.closest(".log-line");
579-
if (clickedLine) {
580-
const lineId = parseInt(
581-
clickedLine.getAttribute("line-index") || "0",
582-
10,
583-
);
584-
const parsedLine = verifierLogState.lines[lineId];
585-
const clineId =
586-
parsedLine.type == ParsedLineType.C_SOURCE
587-
? parsedLine.id
588-
: verifierLogState.cSourceMap.logLineToCLine.get(lineId) || "";
589-
const visualCLineIdx = cLineIdToVisualIdx.get(clineId);
590-
setSelectedAndScroll(
591-
lineId,
592-
"",
593-
-1,
594-
visualCLineIdx === undefined ? -1 : visualCLineIdx,
595-
memSlotId,
596-
);
597-
}
598-
},
599-
[logLines, verifierLogState, cLineIdToVisualIdx],
600-
);
601-
602326
const handleLogLinesOver = useCallback(
603327
(e: React.MouseEvent<HTMLDivElement>) => {
604328
const hoveredElement = e.target as HTMLElement;
@@ -699,20 +423,12 @@ function App({ testListHeight }: { testListHeight?: number }) {
699423
loadError={loadError}
700424
visualLogState={visualLogState}
701425
selectedState={selectedState}
426+
setSelectedState={setSelectedState}
702427
handlePaste={handlePaste}
703-
handleMainContentClick={handleMainContentClick}
704-
handleCLinesClick={handleCLinesClick}
705-
handleLogLinesClick={handleLogLinesClick}
706428
handleLogLinesOver={handleLogLinesOver}
707429
handleLogLinesOut={handleLogLinesOut}
708-
handleStateRowClick={handleStateRowClick}
709430
handleFullLogToggle={handleFullLogToggle}
710-
onGotoStart={onGotoStart}
711-
onGotoEnd={onGotoEnd}
712431
logListRef={logListRef}
713-
visualLogStart={visualIndexRange.visualLogStart}
714-
visualLogEnd={visualIndexRange.visualLogEnd}
715-
onLogRowsRendered={onLogRowsRendered}
716432
testListHeight={testListHeight}
717433
/>
718434
<div id="hint">

0 commit comments

Comments
 (0)