Adding overview CU Progression graph

Author: atsai-jumptrading

package-lock.json

@@ -16,8 +16,8 @@
     "@ag-grid-community/react": "^32.2.0",
     "@ag-grid-community/styles": "^32.2.0",
     "@fontsource/inter-tight": "^5.1.0",
-    "@nivo/core": "^0.87.0",
-    "@nivo/pie": "^0.87.0",
+    "@nivo/core": "^0.88.0",
+    "@nivo/pie": "^0.88.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.3",
     "@react-spring/web": "^9.7.4",
@@ -43,6 +43,8 @@
     "react-intersection-observer": "^9.13.1",
     "react-use": "^17.5.1",
     "react-virtualized-auto-sizer": "^1.0.24",
+    "recharts": "^2.15.1",
+    "simplify-js": "^1.2.4",
     "use-debounce": "^10.0.3",
     "zod": "^3.23.8"
   },

package.json

@@ -206,6 +206,15 @@ export const startupProgressSchema = z.object({
   waiting_for_supermajority_stake_percent: z.number().nullable(),
 });
 
+export const computeUnitsSchema = z.object({
+  max_compute_units: z.number(),
+  start_timestamp_nanos: z.coerce.bigint(),
+  target_end_timestamp_nanos: z.coerce.bigint(),
+  compute_unit_timestamps_nanos: z.coerce.bigint().array(),
+  compute_units_deltas: z.number().array(),
+  active_bank_count: z.number().array(),
+});
+
 export const slotLevelSchema = z.enum([
   "incomplete",
   "completed",
@@ -415,9 +424,10 @@ const tsTileTimersSchema = z.object({
 
 export const slotResponseSchema = z.object({
   publish: slotPublishSchema,
-  waterfall: txnWaterfallSchema.nullable(),
-  tile_primary_metric: tilePrimaryMetricSchema.nullable(),
+  waterfall: txnWaterfallSchema.nullable().optional(),
+  tile_primary_metric: tilePrimaryMetricSchema.nullable().optional(),
   tile_timers: tsTileTimersSchema.array().nullable().optional(),
+  compute_units: computeUnitsSchema.nullable().optional(),
 });
 
 export const slotSkippedHistorySchema = z.number().array();

src/api/entities.ts

@@ -36,6 +36,7 @@ import {
   versionSchema,
   voteDistanceSchema,
   voteStateSchema,
+  computeUnitsSchema,
 } from "./entities";
 
 export type Version = z.infer<typeof versionSchema>;
@@ -110,9 +111,11 @@ export interface Peer extends z.infer<typeof peerUpdateSchema> {
 
 export type PeerRemove = z.infer<typeof peerRemoveSchema>;
 
+export type ComputeUnits = z.infer<typeof computeUnitsSchema>;
+
 export type SlotPublish = z.infer<typeof slotPublishSchema>;
 
-export type SlotReponse = z.infer<typeof slotResponseSchema>;
+export type SlotResponse = z.infer<typeof slotResponseSchema>;
 
 export type SkippedSlots = z.infer<typeof slotSkippedHistorySchema>;
 

src/api/types.ts

@@ -44,6 +44,7 @@ import {
   EstimatedTps,
   LiveTilePrimaryMetric,
   LiveTxnWaterfall,
+  SlotResponse,
 } from "./types";
 import { useThrottledCallback } from "use-debounce";
 import { useInterval } from "react-use";
@@ -128,6 +129,29 @@ export function useSetAtomWsData() {
 
   const setBlockEngine = useSetAtom(blockEngineAtom);
 
+  const handleSlotUpdate = (value: SlotResponse) => {
+    setSlotStatus(value.publish.slot, value.publish.level);
+
+    if (value.publish.mine) {
+      if (value.publish.skipped) {
+        setSkippedSlots((prev) =>
+          [
+            ...(prev ?? []).filter((slot) => slot !== value.publish.slot),
+            value.publish.slot,
+          ].sort()
+        );
+      } else {
+        setSkippedSlots((prev) => {
+          if (prev?.some((slot) => slot === value.publish.slot)) {
+            return prev?.filter((slot) => slot !== value.publish.slot);
+          } else {
+            return prev;
+          }
+        });
+      }
+    }
+  };
+
   useServerMessages((msg) => {
     try {
       const { topic } = topicSchema.parse(msg);
@@ -231,31 +255,8 @@ export function useSetAtomWsData() {
           case "update":
           case "query": {
             if (value) {
-              setSlotStatus(value.publish.slot, value.publish.level);
               setSlotResponse(value);
-
-              if (value.publish.mine) {
-                if (value.publish.skipped) {
-                  setSkippedSlots((prev) =>
-                    [
-                      ...(prev ?? []).filter(
-                        (slot) => slot !== value.publish.slot
-                      ),
-                      value.publish.slot,
-                    ].sort()
-                  );
-                } else {
-                  setSkippedSlots((prev) => {
-                    if (prev?.some((slot) => slot === value.publish.slot)) {
-                      return prev?.filter(
-                        (slot) => slot !== value.publish.slot
-                      );
-                    } else {
-                      return prev;
-                    }
-                  });
-                }
-              }
+              handleSlotUpdate(value);
             }
             break;
           }

src/api/useSetAtomWsData.ts

@@ -15,17 +15,7 @@
   /* headder height + epoch bar height + 10 padding top/bottom */
   --header-height: 121px;
 
-  /* --display-p3: blue;
-  --gray-12: blue; */
-  /* color(display-p3 0.93 0.933 0.94) */
-
-  /* --color-background: var(--gray-4); */
-  /* background: blue; */
-  /* background: #070B14; */
-  /* --color-overlay: var(--black-a6);
-    --color-panel-solid: white;
-    --color-panel-translucent: rgba(255, 255, 255, 0.7);
-    --color-surface: rgba(255, 255, 255, 0.85); */
+  font-variant-numeric: tabular-nums;
 }
 
 .rt-TooltipContent {

src/app.css

@@ -13,7 +13,7 @@ import {
   PeerRemove,
   SkipRate,
   SlotLevel,
-  SlotReponse,
+  SlotResponse,
 } from "./api/types";
 import { merge } from "lodash";
 import { getLeaderSlots, getStake } from "./utils";
@@ -153,34 +153,26 @@ export const deleteSlotStatusBoundsAtom = atom(null, (get, set) => {
   }
 });
 
-const hasQueryedAtom = atomWithImmer<Record<number, boolean>>({});
+const slotResponseAtom = atomWithImmer<Record<number, SlotResponse>>({});
 
-export const getHasQueryedAtom = (slot?: number) =>
-  atom((get) => (slot !== undefined ? !!get(hasQueryedAtom)[slot] : false));
-
-export const setHasQueryedAtom = atom(null, (_, set, slot: number) => {
-  set(hasQueryedAtom, (draft) => {
-    draft[slot] = true;
-  });
-});
-
-export const deleteHasQueryedAtom = atom(null, (get, set, slot: number) => {
-  set(hasQueryedAtom, (draft) => {
-    delete draft[slot];
-  });
-});
-
-const slotResponseAtom = atomWithImmer<Record<number, SlotReponse>>({});
+export const getSlotPublishAtom = (slot?: number) =>
+  atom((get) =>
+    slot !== undefined ? get(slotResponseAtom)[slot]?.publish : undefined
+  );
 
 export const getSlotResponseAtom = (slot?: number) =>
   atom((get) => (slot !== undefined ? get(slotResponseAtom)[slot] : undefined));
 
 export const setSlotResponseAtom = atom(
   null,
-  (_, set, response: SlotReponse) => {
+  (_, set, response: SlotResponse) => {
     const slot = response.publish.slot;
     set(slotResponseAtom, (draft) => {
+      response.compute_units ??= draft[slot]?.compute_units;
+      response.tile_primary_metric ??= draft[slot]?.tile_primary_metric;
       response.tile_timers ??= draft[slot]?.tile_timers;
+      response.waterfall ??= draft[slot]?.waterfall;
+
       draft[slot] = response;
     });
   }
@@ -215,7 +207,7 @@ export const deleteSlotResponseBoundsAtom = atom(null, (get, set) => {
           (numberVal < cacheSlotMin || numberVal > cacheSlotMax)
         ) {
           delete draft[numberVal];
-          set(deleteHasQueryedAtom, numberVal);
+          // set(deleteHasQueryedAtom, numberVal);
         }
       }
     });
@@ -224,10 +216,10 @@ export const deleteSlotResponseBoundsAtom = atom(null, (get, set) => {
 
 export const firstProcessedSlotAtom = atom((get) => {
   const startupProgress = get(startupProgressAtom);
-  if(!(startupProgress?.downloading_incremental_snapshot_slot)) return;
+  if (!startupProgress?.downloading_incremental_snapshot_slot) return;
 
-  return startupProgress.downloading_incremental_snapshot_slot + 1; 
-})
+  return startupProgress.downloading_incremental_snapshot_slot + 1;
+});
 
 const _currentSlotAtom = atom<number | undefined>(undefined);
 export const currentSlotAtom = atom(

src/atoms.ts

@@ -21,7 +21,6 @@ import {
   epochAtom,
   firstProcessedSlotAtom,
 } from "../../atoms";
-import { startupProgressAtom } from "../../api/atoms";
 import { useInterval, useMeasure } from "react-use";
 import { Epoch } from "../../api/types";
 

src/features/EpochBar/EpochSlider.tsx

@@ -14,13 +14,13 @@ import { useAtomValue } from "jotai";
 import PeerIcon from "../../../components/PeerIcon";
 import { identityKeyAtom } from "../../../api/atoms";
 import styles from "./cardValidatorSummary.module.css";
-import useSlotQuery from "../../../hooks/useSlotQuery";
 import { useHarmonicIntervalFn, useMedia, useUpdate } from "react-use";
 import { Peer } from "../../../api/types";
 import { peerStatsAtom } from "../../../atoms";
 import { formatNumber } from "../../../numUtils";
 import clsx from "clsx";
 import ArrowDropdown from "../../../components/ArrowDropdown";
+import { useSlotQueryPublish } from "../../../hooks/useSlotQuery";
 
 interface CardValidatorSummaryProps {
   slot: number;
@@ -191,18 +191,18 @@ function ValidatorInfo({ peer }: ValidatorInfoProps) {
 }
 
 function TimeAgo({ slot, showTime }: CardValidatorSummaryProps) {
-  const query = useSlotQuery(slot);
+  const query = useSlotQueryPublish(slot);
   const update = useUpdate();
 
   useHarmonicIntervalFn(update, 1_000);
 
   const slotDateTime = useMemo(() => {
-    if (!query.slotResponse?.publish.completed_time_nanos) return;
+    if (!query.publish?.completed_time_nanos) return;
 
     return DateTime.fromMillis(
-      Math.trunc(query.slotResponse.publish.completed_time_nanos / 1_000_000)
+      Math.trunc(query.publish?.completed_time_nanos / 1_000_000)
     );
-  }, [query.slotResponse]);
+  }, [query.publish]);
 
   const getDiffDuration = () => {
     if (!showTime || !slotDateTime) return;

src/features/LeaderSchedule/Slots/CardValidatorSummary.tsx

@@ -5,12 +5,12 @@ import SlotCardGrid from "./SlotCardGrid";
 import CardValidatorSummary, {
   CardValidatorSummaryMobile,
 } from "./CardValidatorSummary";
-import useSlotQuery from "../../../hooks/useSlotQuery";
 import { identityKeyAtom } from "../../../api/atoms";
 import { useAtomValue } from "jotai";
 import { usePubKey } from "../../../hooks/usePubKey";
 import { useMedia } from "react-use";
 import clsx from "clsx";
+import { useSlotQueryPublish } from "../../../hooks/useSlotQuery";
 
 interface PastSlotCardProps {
   slot: number;
@@ -21,15 +21,15 @@ export function PastSlotCard({ slot }: PastSlotCardProps) {
   const pubkey = usePubKey(slot);
   const isLeader = myPubkey === pubkey;
 
-  const response = useSlotQuery(slot);
-  const response1 = useSlotQuery(slot + 1);
-  const response2 = useSlotQuery(slot + 3);
-  const response3 = useSlotQuery(slot + 3);
+  const query = useSlotQueryPublish(slot);
+  const query1 = useSlotQueryPublish(slot + 1);
+  const query2 = useSlotQueryPublish(slot + 2);
+  const query3 = useSlotQueryPublish(slot + 3);
   const isSkipped =
-    response.slotResponse?.publish.skipped ||
-    response1.slotResponse?.publish.skipped ||
-    response2.slotResponse?.publish.skipped ||
-    response3.slotResponse?.publish.skipped;
+    query.publish?.skipped ||
+    query1.publish?.skipped ||
+    query2.publish?.skipped ||
+    query3.publish?.skipped;
 
   const isWideScreen = useMedia("(min-width: 900px)");