Adding overview/leader schedule pages state to url search params for deep linking

Author: atsai-jumptrading

package-lock.json

@@ -21,7 +21,8 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.3",
     "@react-spring/web": "^9.7.4",
-    "@tanstack/react-router": "^1.58.9",
+    "@tanstack/react-router": "^1.114.25",
+    "@tanstack/zod-adapter": "^1.114.23",
     "@types/byte-size": "^8.1.2",
     "@types/hammerjs": "^2.0.46",
     "@types/lodash": "^4.17.9",
@@ -50,8 +51,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
-    "@tanstack/router-devtools": "^1.58.9",
-    "@tanstack/router-vite-plugin": "^1.58.4",
+    "@tanstack/router-devtools": "^1.114.25",
+    "@tanstack/router-vite-plugin": "^1.114.25",
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -63,8 +64,8 @@
     "eslint-plugin-react-refresh": "^0.4.12",
     "optionator": "^0.9.4",
     "rollup-plugin-license": "^3.5.3",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.7.0",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.1",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.4.8",
     "vite-plugin-checker": "^0.8.0"

package.json

@@ -4,28 +4,11 @@ import { createRouter, RouterProvider } from "@tanstack/react-router";
 import "./app.css";
 import { routeTree } from "./routeTree.gen";
 import { ConnectionProvider } from "./api/ws/ConnectionContext";
-import { getDefaultStore, useSetAtom } from "jotai";
-import { containerElAtom, slotOverrideAtom } from "./atoms";
-import { selectedSlotStrAtom } from "./features/Overview/SlotPerformance/atoms";
-import {
-  searchLeaderSlotsAtom,
-  SearchType,
-  searchTypeAtom,
-} from "./features/LeaderSchedule/atoms";
-
-const store = getDefaultStore();
+import { useSetAtom } from "jotai";
+import { containerElAtom } from "./atoms";
 
 const router = createRouter({ routeTree });
 
-router.subscribe("onBeforeLoad", (_) => {
-  store.set(slotOverrideAtom, undefined);
-
-  store.set(selectedSlotStrAtom, undefined);
-
-  store.set(searchTypeAtom, SearchType.Text);
-  store.set(searchLeaderSlotsAtom, undefined);
-});
-
 // Register the router instance for type safety
 declare module "@tanstack/react-router" {
   interface Register {

src/App.tsx

@@ -40,19 +40,6 @@ export const epochAtom = atom(
   (get, set, epoch: Epoch) => {
     set(_epochsAtom, (draft) => {
       draft.push(epoch);
-      // if (draft.length > 2) {
-      //   const removed = draft.splice(0, draft.length - 2);
-      //   for (const removedEpoch of removed) {
-      //     for (
-      //       let i = removedEpoch.start_slot;
-      //       i <= removedEpoch.end_slot;
-      //       i++
-      //     ) {
-      //       set(deleteSlotStatusAtom, i);
-      //       set(deleteSlotResponseAtom, i);
-      //     }
-      //   }
-      // }
     });
   }
 );
@@ -207,7 +194,6 @@ export const deleteSlotResponseBoundsAtom = atom(null, (get, set) => {
           (numberVal < cacheSlotMin || numberVal > cacheSlotMax)
         ) {
           delete draft[numberVal];
-          // set(deleteHasQueryedAtom, numberVal);
         }
       }
     });

src/atoms.ts

@@ -15,7 +15,7 @@ export function getClusterColor(cluster?: Cluster) {
     case "pythtest":
       return "#E71C88";
     case "unknown":
-    default:
+    case undefined:
       return "#898989";
   }
 }

src/features/Header/util.ts

@@ -8,14 +8,9 @@ import {
   Reset,
   Tooltip,
 } from "@radix-ui/themes";
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import {
-  setSearchLeaderSlotsAtom,
-  SearchType,
-  searchTypeAtom,
-  searchLeaderSlotsAtom,
-} from "./atoms";
-import { useMount, useUnmount } from "react-use";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { setSearchLeaderSlotsAtom, searchLeaderSlotsAtom } from "./atoms";
+import { useMount } from "react-use";
 import {
   currentLeaderSlotAtom,
   leaderSlotsAtom,
@@ -26,32 +21,45 @@ import { useDebouncedCallback } from "use-debounce";
 import NextSlotStatus from "../Overview/SlotPerformance/NextSlotStatus";
 import styles from "./search.module.css";
 import { skippedSlotsAtom } from "../../api/atoms";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import * as Toggle from "@radix-ui/react-toggle";
+import { SearchTypeEnum } from "../../routes/leaderSchedule";
+import {
+  useSearchTextSearchParam,
+  useSearchTypeSearchParam,
+} from "./useSearchParams";
 
 const isVisibleAtom = atom((get) => !!get(currentLeaderSlotAtom));
 
 export default function Search() {
   const isVisible = useAtomValue(isVisibleAtom);
   const setSearch = useSetAtom(setSearchLeaderSlotsAtom);
-  const [localSearch, setLocalSearch] = useState("");
 
-  const setSearchType = useSetAtom(searchTypeAtom);
   const setSlotOverride = useSetAtom(slotOverrideAtom);
 
+  const { searchType } = useSearchTypeSearchParam();
+  const { searchText, setSearchText } = useSearchTextSearchParam();
+  const [localValue, setLocalValue] = useState(searchText);
+
   const debouncedSetSearch = useDebouncedCallback((value: string) => {
     setSearch(value);
-  }, 1000);
+    setSearchText(value);
+  }, 1_000);
+
+  if (!debouncedSetSearch.isPending() && localValue !== searchText) {
+    setLocalValue(searchText);
+  }
 
   const reset = () => {
-    setLocalSearch("");
+    setSearchText("");
     setSlotOverride(undefined);
     setSearch("");
   };
 
-  useMount(reset);
-  useUnmount(() => {
-    setSearchType(SearchType.Text);
+  useMount(() => {
+    if (searchType === SearchTypeEnum.text) {
+      setSearch(searchText);
+    }
   });
 
   if (!isVisible) return;
@@ -64,11 +72,10 @@ export default function Search() {
           variant="soft"
           color="gray"
           onChange={(e) => {
-            setSearchType(SearchType.Text);
-            setLocalSearch(e.currentTarget.value);
+            setLocalValue(e.currentTarget.value);
             debouncedSetSearch(e.currentTarget.value);
           }}
-          value={localSearch}
+          value={localValue}
         >
           <TextField.Slot>
             <MagnifyingGlassIcon
@@ -77,7 +84,7 @@ export default function Search() {
               style={{ color: "#AFB2C2" }}
             />
           </TextField.Slot>
-          {localSearch && (
+          {localValue && (
             <TextField.Slot>
               <IconButton size="1" variant="ghost">
                 <Cross1Icon
@@ -107,16 +114,6 @@ function SkipRate() {
   let value = "-";
 
   if (skipRate !== undefined) {
-    // if (skipRate.slots_processed)
-    //   if (skipRate.slots_processed === 0 || skipRate.slots_skipped === 0) {
-    //     value = "0";
-    //   } else {
-    //     const skipRatePct = skipRate.slots_skipped / skipRate.slots_processed;
-    //     value = (skipRatePct * 100).toLocaleString(undefined, {
-    //       minimumFractionDigits: 0,
-    //       maximumFractionDigits: 2,
-    //     });
-    //   }
     value = (skipRate.skip_rate * 100).toLocaleString(undefined, {
       minimumFractionDigits: 0,
       maximumFractionDigits: 2,
@@ -140,29 +137,41 @@ interface MySlotsProps {
 }
 
 function MySlots({ resetSearchText }: MySlotsProps) {
-  const slots = useAtomValue(leaderSlotsAtom);
+  const leaderSlots = useAtomValue(leaderSlotsAtom);
   const setSearch = useSetAtom(searchLeaderSlotsAtom);
   const setSlotOverride = useSetAtom(slotOverrideAtom);
 
-  const [searchType, setSearchType] = useAtom(searchTypeAtom);
+  const { searchType, setSearchType } = useSearchTypeSearchParam();
+
+  const slotCount = (leaderSlots?.length ?? 0) * 4;
 
-  const slotCount = (slots?.length ?? 0) * 4;
+  const setMySlots = useCallback(() => {
+    setSearch(leaderSlots);
+  }, [setSearch, leaderSlots]);
+
+  useEffect(() => {
+    if (searchType === SearchTypeEnum.mySlots) {
+      setSearch(leaderSlots);
+    }
+    // On mount / data load
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leaderSlots, setSearch]);
 
   const handleClick = () => {
     resetSearchText();
 
     setSlotOverride(undefined);
 
-    if (searchType === SearchType.MySlots) {
-      setSearchType(SearchType.Text);
+    if (searchType === SearchTypeEnum.mySlots) {
+      setSearchType(SearchTypeEnum.text);
     } else {
-      setSearchType(SearchType.MySlots);
-      setSearch(slots);
+      setSearchType(SearchTypeEnum.mySlots);
+      setMySlots();
     }
   };
 
-  const isSelected = searchType === SearchType.MySlots;
-  const isDisabled = !slots?.length;
+  const isSelected = searchType === SearchTypeEnum.mySlots;
+  const isDisabled = !leaderSlots?.length;
 
   return (
     <Tooltip content="Number of slots this validator is leader in the current epoch. Toggle to filter">
@@ -193,26 +202,37 @@ function SkippedSlots({ resetSearchText }: SkippedSlotsProps) {
   const setSearch = useSetAtom(searchLeaderSlotsAtom);
   const setSlotOverride = useSetAtom(slotOverrideAtom);
 
-  const [searchType, setSearchType] = useAtom(searchTypeAtom);
+  const { searchType, setSearchType } = useSearchTypeSearchParam();
 
   const skippedCount = skippedSlots?.length ?? 0;
 
+  const setSkippedSlots = useCallback(() => {
+    const slotStarts = skippedSlots?.map((slot) => slot - (slot % 4));
+    setSearch([...new Set(slotStarts)]);
+  }, [setSearch, skippedSlots]);
+
+  useEffect(() => {
+    if (searchType === SearchTypeEnum.skippedSlots) {
+      setSkippedSlots();
+    }
+    // On mount / data load
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setSkippedSlots]);
+
   const handleClick = () => {
     resetSearchText();
 
     setSlotOverride(undefined);
 
-    if (searchType === SearchType.SkippedSlots) {
-      setSearchType(SearchType.Text);
+    if (searchType === SearchTypeEnum.skippedSlots) {
+      setSearchType(SearchTypeEnum.text);
     } else if (skippedSlots?.length) {
-      setSearchType(SearchType.SkippedSlots);
-
-      const slotStarts = skippedSlots?.map((slot) => slot - (slot % 4));
-      setSearch([...new Set(slotStarts)]);
+      setSearchType(SearchTypeEnum.skippedSlots);
+      setSkippedSlots();
     }
   };
 
-  const isSelected = searchType === SearchType.SkippedSlots;
+  const isSelected = searchType === SearchTypeEnum.skippedSlots;
   const isDisabled = !skippedSlots?.length;
 
   return (
@@ -224,7 +244,7 @@ function SkippedSlots({ resetSearchText }: SkippedSlotsProps) {
             onClick={handleClick}
             aria-label="Toggle skipped slots"
             pressed={isSelected}
-            disabled={isDisabled}
+            disabled={!isSelected && isDisabled}
           >
             <Text className={styles.label}>My Skipped Slots</Text>
             <Text>{skippedCount}</Text>

src/features/LeaderSchedule/Search.tsx

@@ -8,13 +8,6 @@ import {
 import { getLeaderSlots } from "../../utils";
 import { slotsPerLeader } from "../../consts";
 
-export const enum SearchType {
-  MySlots,
-  SkippedSlots,
-  Text,
-}
-
-export const searchTypeAtom = atom<SearchType>(SearchType.Text);
 
 export const searchLeaderSlotsAtom = atom<number[] | undefined>(undefined);
 
@@ -32,8 +25,6 @@ export const setSearchLeaderSlotsAtom = atom(
       return;
     }
 
-    set(searchTypeAtom, SearchType.Text);
-
     const searchSlot = parseInt(searchText, 10);
     if (
       !isNaN(searchSlot) &&

src/features/LeaderSchedule/atoms.ts

@@ -1,10 +1,11 @@
 import { Flex } from "@radix-ui/themes";
 import Slots from "./Slots";
-import { useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
+import { epochAtom, slotOverrideAtom } from "../../atoms";
 import { useMount } from "react-use";
-import { slotOverrideAtom } from "../../atoms";
 
 export function LeaderSchedule() {
+  const epoch = useAtomValue(epochAtom);
   const setSlotOverride = useSetAtom(slotOverrideAtom);
 
   useMount(() => setSlotOverride(undefined));
@@ -15,6 +16,8 @@ export function LeaderSchedule() {
     }
   };
 
+  if (!epoch) return;
+
   return (
     <Flex
       direction="column"

src/features/LeaderSchedule/index.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from "@tanstack/react-router";
+import { Route, SearchType, SearchTypeEnum } from "../../routes/leaderSchedule";
+import { useCallback } from "react";
+
+export function useSearchTypeSearchParam() {
+  const { searchType } = Route.useSearch();
+  const navigate = useNavigate({ from: Route.fullPath });
+
+  const setSearchType = useCallback(
+    (searchType: SearchType) => {
+      void navigate({ search: { searchType }, replace: true });
+    },
+    [navigate]
+  );
+
+  return { searchType, setSearchType };
+}
+
+export function useSearchTextSearchParam() {
+  const { searchText } = Route.useSearch();
+  const navigate = useNavigate({ from: Route.fullPath });
+
+  const setSearchText = useCallback(
+    (searchText: string) => {
+      void navigate({
+        search: { searchText, searchType: SearchTypeEnum.text },
+        replace: true,
+      });
+    },
+    [navigate]
+  );
+
+  return { searchText, setSearchText };
+}