feat: WebGL shreds chart

Author: asuzuki-jumptrading

src/api/entities.ts

@@ -945,6 +945,16 @@ export enum ShredEvent {
   shred_published = 6,
 }
 
+export const MAX_SHRED_EVENT_IDX = Object.values(ShredEvent).reduce(
+  (acc, v) => {
+    if (typeof v === "number" && v > acc) {
+      return v;
+    }
+    return acc;
+  },
+  -Infinity,
+);
+
 export const liveShredsSchema = z.object({
   reference_slot: z.number(),
   reference_ts: z.coerce.bigint(),

src/features/Overview/ShredsProgression/WebGl/Chart.tsx

@@ -0,0 +1,133 @@
+import { useLayoutEffect, useRef } from "react";
+
+import { useMeasure, useRafLoop } from "react-use";
+import { Box, Flex } from "@radix-ui/themes";
+import type { FlexProps } from "@radix-ui/themes";
+import { useShredsChartScale } from "../useShredsChartScale";
+import { useSetAtom } from "jotai";
+import { minDirtySlotByChartAtom } from "../atoms";
+import type { RendererObj, TsRange } from "./chartUtils";
+import { setUpRenderer, draw } from "./chartUtils";
+import ShredsSlotLabels from "../ShredsSlotLabels";
+import { MChartAxes, xAxisHeight } from "./ChartAxes";
+import { createLabelsState, type LabelsState } from "../utils";
+
+const REDRAW_INTERVAL_MS = 15;
+
+type FlexPropsSubset = Pick<FlexProps, "height" | "minHeight" | "flexGrow">;
+
+interface ShredsChartProps {
+  chartId: string;
+}
+export default function ShredsChart({
+  chartId,
+  ...flexProps
+}: ShredsChartProps & FlexPropsSubset) {
+  const setMinDirtySlotByChart = useSetAtom(minDirtySlotByChartAtom);
+
+  const prevTimeDiffsRef = useRef<number[]>([]);
+  const lastRedrawRef = useRef(0);
+  const [measureRef, { width, height: fullHeight }] =
+    useMeasure<HTMLDivElement>();
+  const height = fullHeight - xAxisHeight;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const rendererRef = useRef<RendererObj | undefined>();
+  const visibleTsRangeRef = useRef<TsRange | undefined>();
+  const labelsRef = useRef<{
+    prevLabels: LabelsState;
+    tempNewLabels: LabelsState;
+  }>({
+    prevLabels: createLabelsState(),
+    tempNewLabels: createLabelsState(),
+  });
+
+  const scale = useShredsChartScale();
+
+  useLayoutEffect(() => {
+    // setup dirty slot tracking
+    setMinDirtySlotByChart((prev) => {
+      // trigger draw of every slot
+      prev.set(chartId, -Infinity);
+      return prev;
+    });
+
+    return () => {
+      setMinDirtySlotByChart((prev) => {
+        prev.delete(chartId);
+        return prev;
+      });
+
+      // dispose of WebGL resources
+      const obj = rendererRef.current;
+      if (!obj) return;
+
+      obj.renderer.dispose();
+      for (const slotMesh of obj.meshes.values()) {
+        slotMesh.mesh.geometry.dispose();
+      }
+      for (const slotMesh of obj.availableMeshes) {
+        slotMesh.mesh.geometry.dispose();
+      }
+      rendererRef.current = undefined;
+    };
+  }, [chartId, setMinDirtySlotByChart]);
+
+  // handle chart resize
+  useLayoutEffect(() => {
+    if (!rendererRef.current) return;
+    const { renderer } = rendererRef.current;
+    renderer.setSize(width, height);
+    draw(
+      chartId,
+      prevTimeDiffsRef,
+      rendererRef.current,
+      visibleTsRangeRef,
+      labelsRef,
+      scale,
+      true /* force redraw */,
+      [0, width],
+    );
+  }, [scale, width, height, chartId]);
+
+  useRafLoop(function drawShredsLoop(time: number) {
+    if (
+      lastRedrawRef.current == null ||
+      time - lastRedrawRef.current >= REDRAW_INTERVAL_MS
+    ) {
+      lastRedrawRef.current = time;
+      if (!rendererRef.current) {
+        const result = setUpRenderer(width, height);
+        if (!result) return;
+        rendererRef.current = result;
+        containerRef.current?.replaceChildren(result.renderer.domElement);
+      } else {
+        draw(
+          chartId,
+          prevTimeDiffsRef,
+          rendererRef.current,
+          visibleTsRangeRef,
+          labelsRef,
+          scale,
+          false,
+          [0, width],
+        );
+      }
+    }
+  });
+
+  return (
+    <Flex direction="column" gap="2px" {...flexProps}>
+      <ShredsSlotLabels />
+      <Box flexGrow="1" minHeight="0" position="relative" ref={measureRef}>
+        <MChartAxes
+          chartId={`${chartId}-axes`}
+          scale={scale}
+          containerWidth={width}
+          containerHeight={fullHeight + 1}
+        />
+        <Box ref={containerRef} position="relative" style={{ zIndex: 1 }} />
+      </Box>
+    </Flex>
+  );
+}

src/features/Overview/ShredsProgression/WebGl/ChartAxes.tsx

@@ -0,0 +1,126 @@
+import { Box } from "@radix-ui/themes";
+import { xRangeMs } from "../../../../api/worker/cache/shreds/shredsCalc";
+import { useRef, useCallback, useMemo, useEffect, memo } from "react";
+import type { AlignedData } from "uplot";
+import {
+  chartAxisColor,
+  gridLineColor,
+  gridTicksColor,
+} from "../../../../colors";
+import UplotReact from "../../../../uplotReact/UplotReact";
+import { shredsXScaleKey } from "../shredsProgressionPlugin";
+import { getXIncrs, chartXPadding } from "../utils";
+
+export const xAxisHeight = 30;
+
+interface ChartAxesProps {
+  chartId: string;
+  scale: number;
+  containerWidth: number;
+  containerHeight: number;
+}
+
+export const MChartAxes = memo(function ChartAxes({
+  chartId,
+  scale,
+  containerWidth,
+  containerHeight,
+}: ChartAxesProps) {
+  const width = containerWidth + 2 * chartXPadding;
+  const uplotRef = useRef<uPlot>();
+
+  const handleCreate = useCallback((u: uPlot) => {
+    uplotRef.current = u;
+  }, []);
+
+  const [chartData, xIncrs] = useMemo(() => {
+    return [
+      [[Math.trunc(scale * -xRangeMs), 0], new Array(2)] satisfies AlignedData,
+      getXIncrs(scale),
+    ];
+  }, [scale]);
+
+  useEffect(() => {
+    if (!uplotRef.current) return;
+    uplotRef.current.axes[0].incrs = () => xIncrs;
+    uplotRef.current.setData(chartData, true);
+  }, [chartData, xIncrs]);
+
+  const options = useMemo<uPlot.Options>(() => {
+    return {
+      padding: [0, chartXPadding, 0, chartXPadding],
+      width: 0,
+      height: 0,
+      scales: {
+        [shredsXScaleKey]: { time: false },
+        y: {
+          time: false,
+          range: [0, 1],
+        },
+      },
+      series: [{ scale: shredsXScaleKey }, {}],
+      cursor: {
+        show: false,
+        drag: {
+          // disable zoom
+          [shredsXScaleKey]: false,
+          y: false,
+        },
+      },
+      legend: { show: false },
+      axes: [
+        {
+          scale: shredsXScaleKey,
+          incrs: xIncrs,
+          size: xAxisHeight,
+          ticks: {
+            opacity: 0.2,
+            stroke: chartAxisColor,
+            size: 5,
+            width: 1 / devicePixelRatio,
+          },
+          values: (_, ticks) =>
+            // special label for right-most tick
+            ticks.map((val) =>
+              val === 0 ? "now" : `${(val / 1_000).toFixed(1)}s`,
+            ),
+          grid: {
+            stroke: gridLineColor,
+            width: 1 / devicePixelRatio,
+          },
+          stroke: gridTicksColor,
+        },
+        {
+          size: 0,
+          grid: {
+            filter: () => [0],
+            stroke: gridTicksColor,
+            width: 1,
+          },
+        },
+      ],
+    };
+  }, [xIncrs]);
+
+  options.width = width;
+  options.height = containerHeight;
+
+  return (
+    <Box
+      position="absolute"
+      left={`-${chartXPadding}px`}
+      right={`-${chartXPadding}px`}
+      top="0"
+      bottom="0"
+      style={{ zIndex: 0 }}
+    >
+      <UplotReact
+        id={chartId}
+        options={options}
+        data={chartData}
+        onCreate={handleCreate}
+        setSizeDebounceMs={0}
+      />
+    </Box>
+  );
+});