Add memory infinite scroll (#197)

* Add infinite scroll * add new logs * Auto height and width * Add infinite scroll * Add jump to address * Add loader reverse with offsets * Use proper replace * use tenstack * Use tanstack virtual * Fix scroll to item * Fix scroll issue * Add refresh memory * remove imports * remove styles * Fix start / stop addresses for infinite scroll --------- Co-authored-by: Wojciech Kwiatek <wojtek.kwiatek@gmail.com>
FluffyLabs · Nov 13, 2024 · 5029e60 · 5029e60
1 parent a2313c6
commit 5029e60
Show file tree

Hide file tree

Showing 15 changed files with 610 additions and 353 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@reduxjs/toolkit": "^2.2.8",
+    "@tanstack/react-virtual": "^3.10.9",
     "@typeberry/block": "^0.0.1-1a02906",
     "@typeberry/pvm-debugger-adapter": "0.0.1-566ac09",
     "@typeberry/spectool-wasm": "^0.13.0",
@@ -40,6 +41,7 @@
     "path-browserify": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.13.1",
     "react-katex": "^3.0.1",
     "react-number-format": "^5.4.2",
     "react-redux": "^9.1.2",

diff --git a/src/App.tsx b/src/App.tsx
@@ -123,7 +123,9 @@ const DebuggerContent = () => {
         />
       </div>
 
-      <div className="max-sm:hidden col-span-12 md:col-span-3">{<MemoryPreview />}</div>
+      <div className="max-sm:hidden col-span-12 md:col-span-3">
+        <MemoryPreview />
+      </div>
 
       <div className="max-sm:hidden md:col-span-3 overflow-hidden">
         <KnowledgeBase currentInstruction={clickedInstruction ?? currentInstructionEnriched} />

diff --git a/src/components/DebuggerControlls/index.tsx b/src/components/DebuggerControlls/index.tsx
@@ -79,7 +79,7 @@ export const DebuggerControlls = () => {
       }
     }
 
-    dispatch(refreshPageAllWorkers());
+    await dispatch(refreshPageAllWorkers()).unwrap();
   };
 
   return (

diff --git a/src/components/MemoryPreview/PageMemory.tsx b/src/components/MemoryPreview/PageMemory.tsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ export const DebuggerControlls = () => { @@
           }
         }
-        dispatch(refreshPageAllWorkers());
+        await dispatch(refreshPageAllWorkers()).unwrap();
       };
       return (
@@ Expand Down @@