Dropdown and load spinner (#85)

* When a new log is loaded scroll to last ins

Instead of scrolling and selected the last
line which is usually junk, scroll to the
last ins which is right above the error msg.

* Make a dropdown list of example logs

Load this from a global javascript object
so we can easily change it from a server
env.

Also add a loading spinner when the
user pastes a new log, loads a file,
or loads an example log.

Issue:
- #80

Author: jordalgo

index.html

@@ -9,10 +9,14 @@
       content="Visualizing Linux Kernel BPF verifier log to help BPF programmers with debugging verification failures"
     />
     <meta name="app-input" link=""/>
-    <meta
-      name="app-example-input"
-      link="https://gist.githubusercontent.com/theihor/e0002c119414e6b40e2192bd7ced01b1/raw/866bcc155c2ce848dcd4bc7fd043a97f39a2d370/gistfile1.txt"
-    />
+    <script>
+      globalThis.exampleLinks = [
+          ["Simple Program", "https://gist.githubusercontent.com/theihor/e0002c119414e6b40e2192bd7ced01b1/raw/866bcc155c2ce848dcd4bc7fd043a97f39a2d370/gistfile1.txt"],
+          ["Subprogram Calls", "https://gist.githubusercontent.com/jordalgo/f59c216ba91e269632cc9fdc6fc67be3/raw/d058a99a48450131015608195cc5e33364312492/gistfile1.txt"],
+          ["bpf_for_loop", "https://gist.githubusercontent.com/jordalgo/061d908e411e3477848be5c36c99e596/raw/bb2a35f7d5288472801211f73c95ad6e71c6b808/gistfile1.txt"],
+          ["Long Program", "https://gist.githubusercontent.com/theihor/1bea72b50f6834c00b67a3087304260e/raw/9c0cb831a4924e5f0f63cc1e0d9620aec771d31f/pyperf600-v1.log"],
+        ];
+    </script>
     <link rel="manifest" href="manifest.json" />
     <title>BPF Verifier Visualizer</title>
   </head>

src/App.tsx

@@ -20,12 +20,12 @@ import {
 import {
   VisualLogState,
   LogLineState,
-  Example,
   HoveredLineHint,
   LoadStatus,
   MainContent,
   SelectedLineHint,
   ToolTip,
+  Examples,
 } from "./components";
 import { ParsedLineType } from "./parser";
 
@@ -39,6 +39,14 @@ function getEmptyVisualLogState(): VisualLogState {
   };
 }
 
+function getEmptyLogLineState(): LogLineState {
+  return {
+    memSlotId: "",
+    line: 0,
+    cLine: "",
+  };
+}
+
 function getVisualLogState(
   verifierLogState: VerifierLogState,
   fullLogView: boolean,
@@ -118,18 +126,15 @@ function App() {
   const [visualLogState, setVisualLogState] = useState<VisualLogState>(
     getEmptyVisualLogState(),
   );
-  const [hoveredState, setHoveredState] = useState<LogLineState>({
-    memSlotId: "",
-    line: -1,
-    cLine: "", // unused
-  });
-  const [selectedState, setSelectedState] = useState<LogLineState>({
-    memSlotId: "",
-    line: 0,
-    cLine: "",
-  });
+  const [hoveredState, setHoveredState] = useState<LogLineState>(
+    getEmptyLogLineState(),
+  );
+  const [selectedState, setSelectedState] = useState<LogLineState>(
+    getEmptyLogLineState(),
+  );
   const [loadError, setLoadError] = useState<string | null>(null);
   const [fullLogView, setfullLogView] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -345,16 +350,40 @@ function App() {
     (text: string) => {
       const newVerifierLogState = processRawLines(text.split("\n"));
       setVisualLogState(getVisualLogState(newVerifierLogState, fullLogView));
+      setIsLoading(false);
     },
     [fullLogView],
   );
 
+  const prepareNewLog = useCallback(() => {
+    setSelectedState(getEmptyLogLineState());
+    setIsLoading(true);
+  }, []);
+
   const handlePaste = useCallback(
     (event: React.ClipboardEvent) => {
+      prepareNewLog();
       const pastedText = event.clipboardData.getData("text");
       loadInputText(pastedText);
     },
-    [loadInputText],
+    [loadInputText, prepareNewLog],
+  );
+
+  const handleLoadExample = useCallback(
+    async (exampleLink: string) => {
+      prepareNewLog();
+      try {
+        const response = await fetch(exampleLink);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.text();
+        loadInputText(result);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    },
+    [loadInputText, prepareNewLog],
   );
 
   function getServerInjectedInputLink(): string | null {
@@ -539,6 +568,7 @@ function App() {
 
   const onFileInputChange = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
+      prepareNewLog();
       const files = (e.target as HTMLInputElement).files;
       if (files?.[0]) {
         const fileBlob = files[0];
@@ -565,6 +595,7 @@ function App() {
         }
         const newVerifierLogState = processRawLines(rawLines);
         setVisualLogState(getVisualLogState(newVerifierLogState, fullLogView));
+        setIsLoading(false);
       }
     },
     [],
@@ -606,7 +637,7 @@ function App() {
               ref={fileInputRef}
             />
           </div>
-          <Example />
+          <Examples handleLoadExample={handleLoadExample} />
           <a
             href="https://github.com/theihor/bpfvv/blob/master/HOWTO.md"
             className="howto-link"
@@ -652,6 +683,13 @@ function App() {
             hoveredMemSlotId={hoveredState.memSlotId}
           />
         )}
+      {isLoading && (
+        <div className="loader-container">
+          <div className="loader-content">
+            <div className="loader"></div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/__snapshots__/App.test.tsx.snap

@@ -55,6 +55,21 @@ exports[`App renders the correct starting elements 1`] = `
             type="file"
           />
         </div>
+        <label
+          class="line-nav-item"
+        >
+          Examples:
+        </label>
+        <select
+          class="line-nav-item"
+          id="log-example-dropdown"
+        />
+        <button
+          class="line-nav-item"
+          id="load-example"
+        >
+          Load
+        </button>
         <a
           class="howto-link"
           href="https://github.com/theihor/bpfvv/blob/master/HOWTO.md"
@@ -138,6 +153,21 @@ exports[`App renders the log visualizer when text is pasted 1`] = `
             type="file"
           />
         </div>
+        <label
+          class="line-nav-item"
+        >
+          Examples:
+        </label>
+        <select
+          class="line-nav-item"
+          id="log-example-dropdown"
+        />
+        <button
+          class="line-nav-item"
+          id="load-example"
+        >
+          Load
+        </button>
         <a
           class="howto-link"
           href="https://github.com/theihor/bpfvv/blob/master/HOWTO.md"
@@ -449,7 +479,13 @@ exports[`App renders the log visualizer when text is pasted 1`] = `
           class="hint-line"
           id="hint-hovered-line"
         >
-          <br />
+          <span>
+            [hovered raw line] 
+            1
+            :
+          </span>
+           
+          314: (73) *(u8 *)(r7 +1303) = r1      ; frame1: R1_w=0 R7=map_value(off=0,ks=4,vs=2808,imm=0)
         </div>
       </div>
     </div>
@@ -512,6 +548,21 @@ exports[`App renders the log visualizer when text is pasted 2`] = `
             type="file"
           />
         </div>
+        <label
+          class="line-nav-item"
+        >
+          Examples:
+        </label>
+        <select
+          class="line-nav-item"
+          id="log-example-dropdown"
+        />
+        <button
+          class="line-nav-item"
+          id="load-example"
+        >
+          Load
+        </button>
         <a
           class="howto-link"
           href="https://github.com/theihor/bpfvv/blob/master/HOWTO.md"

src/components.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React, { ChangeEvent, ReactElement } from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   BpfJmpKind,
@@ -156,15 +156,48 @@ function CallHtml({
   }
 }
 
-export function Example() {
-  const url = document
-    .querySelector('meta[name="app-example-input"]')
-    ?.getAttribute("link");
-  if (url) {
+declare global {
+  var exampleLinks: [string, string][];
+}
+
+export function Examples({
+  handleLoadExample,
+}: {
+  handleLoadExample: (exampleLink: string) => Promise<void>;
+}) {
+  const exampleLinks: [string, string][] = globalThis.exampleLinks || [];
+
+  const [selectedOption, setSelectedOption] = useState(exampleLinks.length ? exampleLinks[0][1] : "");
+  const handleChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
+    setSelectedOption(event.target.value);
+  }, []);
+
+  const onLoad = useCallback(() => {
+    handleLoadExample(selectedOption);
+  }, [selectedOption]);
+
+  if (exampleLinks) {
     return (
-      <a id="example-link" href={`${window.location.pathname}?url=${url}`}>
-        Load an example log
-      </a>
+      <>
+        <label className="line-nav-item">Examples:</label>
+        <select
+          id="log-example-dropdown"
+          className="line-nav-item"
+          onChange={handleChange}
+          value={selectedOption}
+        >
+          {exampleLinks.map((pair) => {
+            return (
+              <option key={pair[1]} value={pair[1]}>
+                {pair[0]}
+              </option>
+            );
+          })}
+        </select>
+        <button id="load-example" className="line-nav-item" onClick={onLoad}>
+          Load
+        </button>
+      </>
     );
   } else {
     return <></>;

src/index.css

@@ -486,3 +486,61 @@ h1 {
 .hint-line span {
   font-weight: bold;
 }
+
+/* Loading Spinner */
+.loader-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.loader-content {
+  width: 80px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+}
+
+.loader {
+  aspect-ratio: 1;
+  display: grid;
+  -webkit-mask: conic-gradient(from 15deg, #0003, #000);
+  mask: conic-gradient(from 15deg, #0003, #000);
+  animation: load 1s steps(12) infinite;
+  color: purple;
+  width: 80px;
+}
+
+.loader,
+.loader:before,
+.loader:after {
+  background:
+    radial-gradient(closest-side at 50% 12.5%, currentColor 90%, #0000 98%) 50%
+      0/20% 80% repeat-y,
+    radial-gradient(closest-side at 12.5% 50%, currentColor 90%, #0000 98%) 0
+      50%/80% 20% repeat-x;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  grid-area: 1/1;
+  transform: rotate(30deg);
+}
+
+.loader:after {
+  transform: rotate(60deg);
+}
+
+@keyframes load {
+  from {
+    transform: rotate(0turn);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}

src/utils.tsx

@@ -46,6 +46,9 @@ export function getVisibleLogLineRange(linesLen: number): {
   min: number;
   max: number;
 } {
+  if (linesLen === 0) {
+    return { min: 0, max: 0 };
+  }
   const formattedLogLines = document.getElementById("formatted-log-lines");
   const logContainer = document.getElementById("log-container");
   if (!formattedLogLines || !logContainer) {