pr feedback

Author: atsai-jumptrading

src/features/Overview/LiveNetworkMetrics/index.tsx

@@ -124,7 +124,7 @@ function TableRow({
       <Table.Cell className={styles.chart}>
         <TileSparkLine
           value={Math.min(1, emaValue / maxValue)}
-          includeBg={false}
+          background="#0000001F"
           windowMs={60_000}
           height={chartHeight}
           updateIntervalMs={500}

src/features/Overview/LiveTileMetrics/index.tsx

@@ -225,7 +225,7 @@ const MUtilization = memo(function Utilization({ idx }: UtilizationProps) {
       <Table.Cell className={styles.noPadding}>
         <TileSparkLine
           value={avgValue}
-          includeBg={false}
+          background="#0000001F"
           windowMs={60_000}
           height={chartHeight}
           updateIntervalMs={updateIntervalMs}

src/features/Overview/SlotPerformance/useTileSparkline.ts

@@ -74,17 +74,12 @@ interface PointSample {
   ts: number;
 }
 
-let tickMs = 150;
+const defaultTickMs = 150;
 /** How many ticks of extra buffer data is drawn for the transform to slide over */
 const tickBufferCount = 3;
 
-const clock = clockSub(tickMs);
-
-function setTickMs(newTickMs?: number) {
-  if (newTickMs === undefined) return;
-  tickMs = newTickMs;
-  clock.startChartClock(newTickMs);
-}
+const clocks = new Map<number, ReturnType<typeof clockSub>>();
+clocks.set(defaultTickMs, clockSub(defaultTickMs));
 
 function setDataWindow(
   data: (PointSample | undefined)[],
@@ -122,14 +117,12 @@ export function useScaledDataPoints({
   width: _width,
   updateIntervalMs,
   stopShifting,
-  tickMs: _tickMs,
+  tickMs = defaultTickMs,
 }: UseScaledDataPointsProps) {
   const [scaledDataPoints, setScaledDataPoints] = useState<
     { x: number; y: number }[]
   >([]);
 
-  useEffect(() => setTickMs(_tickMs), [_tickMs]);
-
   const { pxPerTick, width, windowMs } = useMemo(() => {
     let windowMs = _windowMs;
     let width = _width;
@@ -144,7 +137,7 @@ export function useScaledDataPoints({
       width,
       windowMs,
     };
-  }, [_width, _windowMs, queryBusy]);
+  }, [_width, _windowMs, queryBusy, tickMs]);
 
   const busyDataRef = useRef([
     { value: undefined, ts: performance.now() - windowMs },
@@ -222,13 +215,19 @@ export function useScaledDataPoints({
     }
     // live
     else {
-      const unsub = clock.subscribeClock((tEnd) => {
-        tick(busyDataRef.current, tEnd);
-      });
+      if (!clocks.has(tickMs)) {
+        clocks.set(tickMs, clockSub(tickMs));
+      }
+      const clock = clocks.get(tickMs);
+      if (clock) {
+        const unsub = clock.subscribeClock((tEnd) => {
+          tick(busyDataRef.current, tEnd);
+        });
 
-      return unsub;
+        return unsub;
+      }
     }
-  }, [height, queryBusy, width, windowMs]);
+  }, [height, queryBusy, tickMs, width, windowMs]);
 
   return {
     scaledDataPoints,