feat: WebGL shreds chart

Author: asuzuki-jumptrading

package-lock.json

@@ -50,6 +50,7 @@
     "react-use": "^17.5.1",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-virtuoso": "^4.13.0",
+    "three": "0.184.0",
     "uplot": "^1.6.32",
     "use-debounce": "^10.0.3",
     "zod": "^4.1.13"
@@ -68,6 +69,7 @@
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
+    "@types/three": "^0.184.0",
     "@vitejs/plugin-react": "^4.3.1",
     "baseline-browser-mapping": "^2.10.29",
     "eslint": "^9.11.1",

package.json

@@ -971,6 +971,10 @@ export enum ShredEvent {
   shred_published = 6,
 }
 
+export const SHRED_EVENT_TYPES_COUNT = Object.values(ShredEvent).filter(
+  (v) => typeof v === "number",
+).length;
+
 export const liveShredsSchema = z.object({
   reference_slot: z.number(),
   reference_ts: z.coerce.bigint(),

src/api/entities.ts

@@ -38,7 +38,10 @@ import {
   deleteSupermajorityDeltaEntriesAtom,
   resetSupermajorityAtom,
 } from "../atoms";
-import { shredsAtoms } from "../features/Overview/ShredsProgression/atoms";
+import {
+  shredsAtoms,
+  setDirtySlotOnSkippedChangeAtom,
+} from "../features/Overview/ShredsProgression/atoms";
 import { xRangeMs } from "./worker/cache/shreds/shredsCalc";
 import { rateLiveWaterfallAtom } from "../features/Overview/SlotPerformance/atoms";
 import {
@@ -343,6 +346,9 @@ function useUpdateAtoms() {
 
   const addSkippedClusterSlots = useSetAtom(addSkippedClusterSlotsAtom);
   const deleteSkippedClusterSlot = useSetAtom(deleteSkippedClusterSlotAtom);
+  const setDirtySlotOnSkippedChange = useSetAtom(
+    setDirtySlotOnSkippedChangeAtom,
+  );
 
   const addLateVoteSlots = useSetAtom(addLateVoteSlotAtom);
   const deleteLateVoteSlot = useSetAtom(deleteLateVoteSlotAtom);
@@ -353,10 +359,13 @@ function useUpdateAtoms() {
     (value: SlotResponse) => {
       setSlotStatus(value.publish.slot, value.publish.level);
 
+      const slot = value.publish.slot;
+      setDirtySlotOnSkippedChange(slot, value.publish.skipped);
+
       if (value.publish.skipped) {
-        addSkippedClusterSlots([value.publish.slot]);
+        addSkippedClusterSlots([slot]);
       } else {
-        deleteSkippedClusterSlot(value.publish.slot);
+        deleteSkippedClusterSlot(slot);
       }
 
       if (value.publish.level === "rooted") {
@@ -391,6 +400,7 @@ function useUpdateAtoms() {
       addSkippedClusterSlots,
       deleteLateVoteSlot,
       deleteSkippedClusterSlot,
+      setDirtySlotOnSkippedChange,
       setSkippedSlots,
       setSlotStatus,
     ],