Fix C source line scrollTo

Author: jordalgo

src/App.tsx

@@ -9,7 +9,7 @@ import {
 
 import {
   fetchLogFromUrl,
-  getVisibleIdxRange,
+  getVisibleLogLineRange,
   scrollToLogLine,
   scrollToCLine,
   siblingInsLine,
@@ -157,17 +157,10 @@ function App() {
       memSlotId: string = "",
     ) => {
       scrollToLogLine(nextInsLineIdx, logLines.length);
-      const cLinesRange = getVisibleIdxRange(cLines.length);
-      if (
-        (nextCLineIdx < cLinesRange.min + 8 ||
-          nextCLineIdx > cLinesRange.max - 8) &&
-        !(nextCLineIdx < 0 || nextCLineIdx >= cLines.length)
-      ) {
-        scrollToCLine(nextCLineIdx, cLines.length);
-      }
+      scrollToCLine(nextCLineIdx, cLines.length);
       setSelectedState({ line: nextInsLineId, memSlotId, cLine: nextCLineId });
     },
-    [logLines, cLines],
+    [logLines, cLineIdtoIdx],
   );
 
   const onGotoStart = useCallback(() => {
@@ -212,7 +205,7 @@ function App() {
     const handleKeyDown = (e: KeyboardEvent) => {
       let delta = 0;
       let areCLinesInFocus = selectedState.cLine !== "";
-      let { min, max } = getVisibleIdxRange(
+      let { min, max } = getVisibleLogLineRange(
         areCLinesInFocus ? cLines.length : logLines.length,
       );
       let page = max - min + 1;

src/components.tsx

@@ -17,7 +17,7 @@ import { CSourceMap, getMemSlotDependencies } from "./analyzer";
 
 import { BpfState, getBpfState, VerifierLogState } from "./analyzer";
 
-import { getVisibleIdxRange, scrollToLogLine } from "./utils";
+import { getVisibleLogLineRange, scrollToLogLine } from "./utils";
 
 import BPF_HELPERS_JSON from "./bpf-helpers.json";
 
@@ -1207,7 +1207,7 @@ export function MainContent({
         }
       }
 
-      let { min, max } = getVisibleIdxRange(verifierLogState.lines.length);
+      let { min, max } = getVisibleLogLineRange(logLines.length);
       const isVisible = (idx: number) => {
         return min < idx && idx < max;
       };
@@ -1235,7 +1235,7 @@ export function MainContent({
         }
       }
     },
-    [verifierLogState, memSlotDependencies, selectedLine],
+    [logLines, memSlotDependencies, selectedLine],
   );
 
   return (

src/index.css

@@ -85,16 +85,16 @@ h1 {
 
 #c-source-container {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   flex: 1;
   min-width: 0;
   gap: 0;
-  overflow: hidden;
+  overflow: auto;
+  flex-grow: 1;
 }
 
 #c-source-content {
-  overflow-y: scroll;
-  height: 100%;
+  height: fit-content;
 }
 
 .c-source-panel {

src/utils.tsx

@@ -17,32 +17,62 @@ export function normalIdx(idx: number, linesLen: number): number {
   return Math.min(Math.max(0, idx), linesLen - 1);
 }
 
-export function getVisibleIdxRange(linesLen: number): {
+function getVisibleRange(
+  containerEl: HTMLElement,
+  contentEl: HTMLElement,
+  linesLen: number,
+): {
   min: number;
   max: number;
 } {
-  const formattedLogLines = document.getElementById("formatted-log-lines");
-  const logContainer = document.getElementById("log-container");
-  if (!formattedLogLines || !logContainer) {
-    return { min: 0, max: 0 }; // Throw here
-  }
-  const linesRect = formattedLogLines.getBoundingClientRect();
-  const containerRect = logContainer.getBoundingClientRect();
+  const contentRect = contentEl.getBoundingClientRect();
+  const containerRect = containerEl.getBoundingClientRect();
 
-  if (containerRect.height > linesRect.height) {
+  if (containerRect.height > contentRect.height) {
     return { min: 0, max: linesLen - 1 };
   }
 
-  const relativeStart = (containerRect.top - linesRect.top) / linesRect.height;
-  const relativeEnd = relativeStart + containerRect.height / linesRect.height;
+  const relativeStart =
+    (containerRect.top - contentRect.top) / contentRect.height;
+  const relativeEnd = relativeStart + containerRect.height / contentRect.height;
   const min = Math.floor(relativeStart * linesLen);
   const max = Math.ceil(relativeEnd * linesLen);
 
   return { min, max };
 }
 
-function scrollToLine(el: HTMLElement, idx: number, linesLen: number) {
-  const { min, max } = getVisibleIdxRange(linesLen);
+export function getVisibleLogLineRange(linesLen: number): {
+  min: number;
+  max: number;
+} {
+  const formattedLogLines = document.getElementById("formatted-log-lines");
+  const logContainer = document.getElementById("log-container");
+  if (!formattedLogLines || !logContainer) {
+    throw new Error("Missing formattedLogLines or logContainer");
+  }
+  return getVisibleRange(logContainer, formattedLogLines, linesLen);
+}
+
+export function getVisibleCSourceRange(linesLen: number): {
+  min: number;
+  max: number;
+} {
+  const csourceContent = document.getElementById("c-source-content");
+  const csourceContainer = document.getElementById("c-source-container");
+  if (!csourceContent || !csourceContainer) {
+    // Don't throw the container might be collapsed
+    return { min: 0, max: 0 };
+  }
+  return getVisibleRange(csourceContainer, csourceContent, linesLen);
+}
+
+function scrollToLine(
+  el: HTMLElement,
+  idx: number,
+  max: number,
+  min: number,
+  linesLen: number,
+) {
   const page = max - min + 1;
   const relativePosition = normalIdx(idx - page * 0.618, linesLen) / linesLen;
   el.scrollTop = relativePosition * el.scrollHeight;
@@ -53,12 +83,12 @@ export function scrollToLogLine(idx: number, linesLen: number) {
   if (!logContainer) {
     throw new Error("Log line container is not in the DOM");
   }
-  const logRange = getVisibleIdxRange(linesLen);
+  const logRange = getVisibleLogLineRange(linesLen);
   if (
     (idx < logRange.min + 8 || idx > logRange.max - 8) &&
     !(idx < 0 || idx >= linesLen)
   ) {
-    scrollToLine(logContainer, idx, linesLen);
+    scrollToLine(logContainer, idx, logRange.max, logRange.min, linesLen);
   }
 }
 
@@ -68,7 +98,19 @@ export function scrollToCLine(idx: number, linesLen: number) {
     // This won't exist if the container is collapsed
     return;
   }
-  scrollToLine(cSourceContainer, idx, linesLen);
+  const cLinesRange = getVisibleCSourceRange(linesLen);
+  if (
+    (idx < cLinesRange.min + 8 || idx > cLinesRange.max - 8) &&
+    !(idx < 0 || idx >= linesLen)
+  ) {
+    scrollToLine(
+      cSourceContainer,
+      idx,
+      cLinesRange.max,
+      cLinesRange.min,
+      linesLen,
+    );
+  }
 }
 
 export function siblingInsLine(