Rename variables for clarity

Better distinguish parsedLine idx from visual idx.
The visual index the line number of the actually
rendered line (e.g. if we're not showing c source
lines in the main log view, then parsed line idx
and visual idx are not equivalent).

Author: jordalgo

src/App.tsx

@@ -33,27 +33,27 @@ function getEmptyVisualLogState(): VisualLogState {
   return {
     verifierLogState: getEmptyVerifierState(),
     logLines: [],
-    logLineIdToIdx: new Map(),
+    logLineIdxToVisualIdx: new Map(),
     cLines: [],
-    cLineIdtoIdx: new Map(),
+    cLineIdToVisualIdx: new Map(),
   };
 }
 
 function getVisualLogState(
   verifierLogState: VerifierLogState,
   fullLogView: boolean,
 ): VisualLogState {
-  const [logLines, logLineIdToIdx] = getVisibleLogLines(
+  const [logLines, logLineIdxToVisualIdx] = getVisibleLogLines(
     verifierLogState,
     fullLogView,
   );
-  const [cLines, cLineIdtoIdx] = getVisibleCLines(verifierLogState);
+  const [cLines, cLineIdToVisualIdx] = getVisibleCLines(verifierLogState);
   return {
     verifierLogState: verifierLogState,
     logLines,
-    logLineIdToIdx,
+    logLineIdxToVisualIdx,
     cLines,
-    cLineIdtoIdx,
+    cLineIdToVisualIdx,
   };
 }
 
@@ -133,12 +133,18 @@ function App() {
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const { verifierLogState, cLines, cLineIdtoIdx, logLines, logLineIdToIdx } =
-    visualLogState;
+  const {
+    verifierLogState,
+    cLines,
+    cLineIdToVisualIdx,
+    logLines,
+    logLineIdxToVisualIdx,
+  } = visualLogState;
 
   const { line: selectedLine, memSlotId: selectedMemSlotId } = selectedState;
-  const selectedLineIdx = logLineIdToIdx.get(selectedLine) || 0;
-  const hoveredLineIdx = logLineIdToIdx.get(hoveredState.line) || 0;
+  const selectedLineVisualIdx = logLineIdxToVisualIdx.get(selectedLine) || 0;
+  const hoveredLineVisualIdx =
+    logLineIdxToVisualIdx.get(hoveredState.line) || 0;
   const selectedCLine = useMemo(() => {
     let clineId = "";
     if (selectedState.cLine) {
@@ -163,15 +169,15 @@ function App() {
     (
       nextInsLineId: number,
       nextCLineId: string,
-      nextInsLineIdx: number,
-      nextCLineIdx: number,
+      nextInsLineVisualIdx: number,
+      nextCLineVisualIdx: number,
       memSlotId: string = "",
     ) => {
-      scrollToLogLine(nextInsLineIdx, logLines.length);
-      scrollToCLine(nextCLineIdx, cLines.length);
+      scrollToLogLine(nextInsLineVisualIdx, logLines.length);
+      scrollToCLine(nextCLineVisualIdx, cLines.length);
       setSelectedState({ line: nextInsLineId, memSlotId, cLine: nextCLineId });
     },
-    [logLines, cLineIdtoIdx],
+    [logLines, cLineIdToVisualIdx],
   );
 
   const onGotoStart = useCallback(() => {
@@ -181,7 +187,7 @@ function App() {
     const lineId = logLines[0].idx;
     const clineId =
       verifierLogState.cSourceMap.logLineToCLine.get(lineId) || "";
-    setSelectedAndScroll(lineId, "", 0, cLineIdtoIdx.get(clineId) || 0);
+    setSelectedAndScroll(lineId, "", 0, cLineIdToVisualIdx.get(clineId) || 0);
   }, [logLines, verifierLogState]);
 
   function onGotoEnd() {
@@ -195,7 +201,7 @@ function App() {
       lineId,
       "",
       logLines.length - 1,
-      cLineIdtoIdx.get(clineId) || 0,
+      cLineIdToVisualIdx.get(clineId) || 0,
     );
   }
 
@@ -210,15 +216,15 @@ function App() {
 
   const onLogToggle = useCallback(() => {
     setfullLogView((prev) => !prev);
-    const [newLogLines, newLogLineIdToIdx] = getVisibleLogLines(
+    const [newLogLines, newLogLineIdToVisualIdx] = getVisibleLogLines(
       verifierLogState,
       !fullLogView,
     );
     setVisualLogState((prev) => {
       return {
         ...prev,
         logLines: newLogLines,
-        logLineIdToIdx: newLogLineIdToIdx,
+        logLineIdxToVisualIdx: newLogLineIdToVisualIdx,
       };
     });
   }, [fullLogView, verifierLogState]);
@@ -260,10 +266,11 @@ function App() {
       }
       e.preventDefault();
       if (areCLinesInFocus) {
-        const currentIdx = cLineIdtoIdx.get(selectedState.cLine) || 0;
-        let nextIdx = currentIdx + delta;
-        if (cLines[nextIdx] === "") {
-          nextIdx += delta;
+        const currentVisibleIdx =
+          cLineIdToVisualIdx.get(selectedState.cLine) || 0;
+        let nextVisibleIdx = currentVisibleIdx + delta;
+        if (cLines[nextVisibleIdx] === "") {
+          nextVisibleIdx += delta;
         }
         const logLines = verifierLogState.cSourceMap.cLineToLogLines.get(
           selectedState.cLine,
@@ -274,21 +281,26 @@ function App() {
         }
         setSelectedAndScroll(
           logLineId,
-          cLines[nextIdx],
-          logLineIdToIdx.get(logLineId) || -1,
-          nextIdx,
+          cLines[nextVisibleIdx],
+          logLineIdxToVisualIdx.get(logLineId) || -1,
+          nextVisibleIdx,
         );
       } else {
-        const currInsIdx = logLineIdToIdx.get(selectedState.line) || 0;
-        let nextInsIdx = siblingInsLine(logLines, currInsIdx, delta);
-        const logLineId = logLines[nextInsIdx].idx;
+        const currInsVisualIdx =
+          logLineIdxToVisualIdx.get(selectedState.line) || 0;
+        let nextInsVisualIdx = siblingInsLine(
+          logLines,
+          currInsVisualIdx,
+          delta,
+        );
+        const logLineId = logLines[nextInsVisualIdx].idx;
         const cLineId =
           verifierLogState.cSourceMap.logLineToCLine.get(logLineId) || "";
         setSelectedAndScroll(
           logLineId,
           "",
-          nextInsIdx,
-          cLineIdtoIdx.get(cLineId) || -1,
+          nextInsVisualIdx,
+          cLineIdToVisualIdx.get(cLineId) || -1,
         );
       }
     };
@@ -301,10 +313,10 @@ function App() {
   }, [
     logLines,
     cLines,
-    cLineIdtoIdx,
+    cLineIdToVisualIdx,
     selectedState,
     verifierLogState,
-    logLineIdToIdx,
+    logLineIdxToVisualIdx,
     onGotoStart,
     onGotoEnd,
   ]);
@@ -417,14 +429,14 @@ function App() {
         setSelectedAndScroll(
           firstItem,
           clineId,
-          logLineIdToIdx.get(firstItem) || 0,
+          logLineIdxToVisualIdx.get(firstItem) || 0,
           -1,
         );
       } else {
         setSelectedState({ line: 0, memSlotId: "", cLine: clineId });
       }
     },
-    [verifierLogState, logLineIdToIdx, cLineIdtoIdx],
+    [verifierLogState, logLineIdxToVisualIdx, cLineIdToVisualIdx],
   );
 
   const handleStateRowClick = useCallback(
@@ -473,12 +485,12 @@ function App() {
           lineId,
           "",
           -1,
-          cLineIdtoIdx.get(clineId) || -1,
+          cLineIdToVisualIdx.get(clineId) || -1,
           memSlotId,
         );
       }
     },
-    [logLines, verifierLogState, cLineIdtoIdx],
+    [logLines, verifierLogState, cLineIdToVisualIdx],
   );
 
   const handleLogLinesOver = useCallback(
@@ -604,12 +616,12 @@ function App() {
         <div id="hint">
           <SelectedLineHint
             selectedLine={selectedLine}
-            selectedLineIdx={selectedLineIdx}
+            visualIdx={selectedLineVisualIdx}
             lines={verifierLogState.lines}
           />
           <HoveredLineHint
             hoveredLine={hoveredState.line}
-            hoveredLineIdx={hoveredLineIdx}
+            visibleIdx={hoveredLineVisualIdx}
             lines={verifierLogState.lines}
           />
         </div>

src/components.tsx

@@ -28,9 +28,9 @@ import BPF_HELPERS_JSON from "./bpf-helpers.json";
 export type VisualLogState = {
   verifierLogState: VerifierLogState;
   cLines: string[];
-  cLineIdtoIdx: Map<string, number>;
+  cLineIdToVisualIdx: Map<string, number>;
   logLines: ParsedLine[];
-  logLineIdToIdx: Map<number, number>;
+  logLineIdxToVisualIdx: Map<number, number>;
 };
 
 export type LogLineState = {
@@ -181,11 +181,11 @@ function ExitInstruction({ frame }: { frame: number }) {
 
 export function HoveredLineHint({
   hoveredLine,
-  hoveredLineIdx,
+  visibleIdx,
   lines,
 }: {
   hoveredLine: number;
-  hoveredLineIdx: number;
+  visibleIdx: number;
   lines: ParsedLine[];
 }) {
   if (lines.length === 0 || hoveredLine < 0) {
@@ -197,7 +197,7 @@ export function HoveredLineHint({
   }
   return (
     <div id="hint-hovered-line" className="hint-line">
-      <span>[hovered raw line] {hoveredLineIdx + 1}:</span>&nbsp;
+      <span>[hovered raw line] {visibleIdx + 1}:</span>&nbsp;
       {lines[hoveredLine].raw}
     </div>
   );
@@ -459,19 +459,19 @@ const RegSpan = ({
 
 export function SelectedLineHint({
   selectedLine,
-  selectedLineIdx,
+  visualIdx,
   lines,
 }: {
   selectedLine: number;
-  selectedLineIdx: number;
+  visualIdx: number;
   lines: ParsedLine[];
 }) {
   if (lines.length === 0) {
     return <></>;
   }
   return (
     <div id="hint-selected-line" className="hint-line">
-      <span>[selected raw line] {selectedLineIdx + 1}:</span>&nbsp;
+      <span>[selected raw line] {visualIdx + 1}:</span>&nbsp;
       {lines[selectedLine].raw}
     </div>
   );
@@ -976,8 +976,13 @@ export function MainContent({
   handleLogLinesOut: (event: React.MouseEvent<HTMLDivElement>) => void;
   handleStateRowClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }) {
-  const { verifierLogState, logLines, logLineIdToIdx, cLines, cLineIdtoIdx } =
-    visualLogState;
+  const {
+    verifierLogState,
+    logLines,
+    logLineIdxToVisualIdx,
+    cLines,
+    cLineIdToVisualIdx,
+  } = visualLogState;
   const memSlotDependencies: number[] = useMemo(() => {
     const lines = verifierLogState.lines;
     if (lines.length === 0) {
@@ -1131,9 +1136,9 @@ export function MainContent({
     }
 
     if (shouldScrollLogLines) {
-      const logLineIdx = logLineIdToIdx.get(maxIdx);
-      if (logLineIdx) {
-        scrollToLogLine(logLineIdx, logLines.length);
+      const visualIdx = logLineIdxToVisualIdx.get(maxIdx);
+      if (visualIdx) {
+        scrollToLogLine(visualIdx, logLines.length);
       }
     }
 
@@ -1198,9 +1203,9 @@ export function MainContent({
 
   const handleStateLogLineClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      const logLineIdx = logLineIdToIdx.get(selectedLine);
-      if (logLineIdx) {
-        scrollToLogLine(logLineIdx, logLines.length);
+      const visualIdx = logLineIdxToVisualIdx.get(selectedLine);
+      if (visualIdx) {
+        scrollToLogLine(visualIdx, logLines.length);
       }
       e.stopPropagation();
     },
@@ -1212,14 +1217,14 @@ export function MainContent({
       const cLineId =
         verifierLogState.cSourceMap.logLineToCLine.get(selectedLine);
       if (cLineId) {
-        const cLineIdx = cLineIdtoIdx.get(cLineId);
+        const cLineIdx = cLineIdToVisualIdx.get(cLineId);
         if (cLineIdx) {
           scrollToCLine(cLineIdx, cLines.length);
         }
       }
       e.stopPropagation();
     },
-    [verifierLogState, cLines, cLineIdtoIdx, selectedCLine],
+    [verifierLogState, cLines, cLineIdToVisualIdx, selectedCLine],
   );
 
   const handleArrowsClick = useCallback(
@@ -1245,12 +1250,12 @@ export function MainContent({
       }
 
       if (depArrow.classList.contains("active-down")) {
-        scrollToLogLine(logLineIdToIdx.get(next) || 0, logLines.length);
+        scrollToLogLine(logLineIdxToVisualIdx.get(next) || 0, logLines.length);
       } else if (depArrow.classList.contains("active-up")) {
-        scrollToLogLine(logLineIdToIdx.get(prev) || 0, logLines.length);
+        scrollToLogLine(logLineIdxToVisualIdx.get(prev) || 0, logLines.length);
       }
     },
-    [logLines, logLineIdToIdx, memSlotDependencies, selectedLine],
+    [logLines, logLineIdxToVisualIdx, memSlotDependencies, selectedLine],
   );
 
   const handleArrowsOver = useCallback(
@@ -1276,8 +1281,8 @@ export function MainContent({
 
       let { min, max } = getVisibleLogLineRange(logLines.length);
       const isVisible = (id: number) => {
-        const idx = logLineIdToIdx.get(id) || 0;
-        return min < idx && idx < max;
+        const visualIdx = logLineIdxToVisualIdx.get(id) || 0;
+        return min < visualIdx && visualIdx < max;
       };
       const setTargetToPrev = () => {
         depArrow.classList.add("active-up");
@@ -1296,14 +1301,14 @@ export function MainContent({
         setTargetToPrev();
       } else {
         const mid = (min + max) / 2;
-        if ((logLineIdToIdx.get(id) || 0) < mid) {
+        if ((logLineIdxToVisualIdx.get(id) || 0) < mid) {
           setTargetToPrev();
         } else {
           setTargetToNext();
         }
       }
     },
-    [logLines, logLineIdToIdx, memSlotDependencies, selectedLine],
+    [logLines, logLineIdxToVisualIdx, memSlotDependencies, selectedLine],
   );
 
   return (