feat: add vertical navigation

Author: amliu-jumptrading

package-lock.json

@@ -23,6 +23,7 @@
     "@ag-grid-community/csv-export": "^32.2.0",
     "@ag-grid-community/react": "^32.2.0",
     "@ag-grid-community/styles": "^32.2.0",
+    "@floating-ui/react": "^0.27.15",
     "@fontsource/inter-tight": "^5.2.5",
     "@fontsource/roboto-mono": "^5.1.0",
     "@nivo/core": "^0.88.0",
@@ -53,6 +54,7 @@
     "react-intersection-observer": "^9.13.1",
     "react-use": "^17.5.1",
     "react-virtualized-auto-sizer": "^1.0.24",
+    "react-virtuoso": "^4.13.0",
     "uplot": "^1.6.32",
     "use-debounce": "^10.0.3",
     "zod": "^3.23.8"

package.json

@@ -35,6 +35,7 @@ export default function App() {
   return (
     <Theme
       className="app"
+      id="app"
       appearance="dark"
       ref={setRefAndColors}
       scaling="90%"

src/App.tsx

@@ -37,7 +37,6 @@ import {
   setSlotStatusAtom,
   updatePeersAtom,
   epochAtom,
-  deleteSlotStatusBoundsAtom,
   deleteSlotResponseBoundsAtom,
   skipRateAtom,
 } from "../atoms";
@@ -312,11 +311,9 @@ export function useSetAtomWsData() {
     }
   });
 
-  const deleteSlotStatusBounds = useSetAtom(deleteSlotStatusBoundsAtom);
   const deleteSlotResponseBounds = useSetAtom(deleteSlotResponseBoundsAtom);
 
   useInterval(() => {
-    deleteSlotStatusBounds();
     deleteSlotResponseBounds();
 
     if (epoch) {

src/api/useSetAtomWsData.ts

@@ -13,10 +13,10 @@
   --green-live: #3cff73;
 
   --header-row-height: 34px;
-  /* headder height + epoch bar height + 10 padding top/bottom */
-  --header-height: 121px;
+  --header-height: 55px;
 
   font-variant-numeric: tabular-nums;
+  overflow: hidden;
 }
 
 .rt-TooltipContent {