feat: toggle for slot progression chart background

Author: asuzuki-jumptrading

src/features/Overview/SlotPerformance/TransactionBarsCard/ToggleControl.tsx renamed to src/components/ToggleControl.tsx

@@ -0,0 +1,32 @@
+import { useAtom } from "jotai";
+import { showChartBackgroundAtom } from "./atoms";
+import ToggleControl from "../../../../components/ToggleControl";
+import { primaryTextColor } from "../../../../colors";
+
+interface CuChartBackgroundToggleProps {
+  onUplot: (func: (u: uPlot) => void) => void;
+}
+
+export default function CuChartBackgroundToggle({
+  onUplot,
+}: CuChartBackgroundToggleProps) {
+  const [showChartBackground, setShowChartBackground] = useAtom(
+    showChartBackgroundAtom,
+  );
+
+  const onCheckedChange = (checked: boolean) => {
+    setShowChartBackground(checked);
+    onUplot((u) => {
+      u.redraw(false, false);
+    });
+  };
+
+  return (
+    <ToggleControl
+      label="Toggle Background"
+      checked={showChartBackground}
+      onCheckedChange={onCheckedChange}
+      color={primaryTextColor}
+    />
+  );
+}

src/features/Overview/SlotPerformance/TransactionBarsCard/toggleControl.module.css renamed to src/components/toggleControl.module.css

@@ -7,3 +7,4 @@ export const leftAxisSizeAtom = atom(0);
 export const rightAxisSizeAtom = atom(0);
 
 export const isFullXRangeAtom = atom(true);
+export const showChartBackgroundAtom = atom(true);

src/features/Overview/SlotPerformance/ComputeUnitsCard/CuChartRefAreaToggle.tsx

@@ -3,6 +3,10 @@ import type { SlotTransactions } from "../../../../api/types";
 import type { RefObject } from "react";
 import { computeUnitsScaleKey, xScaleKey } from "./consts";
 import { round } from "lodash";
+import { getDefaultStore } from "jotai";
+import { showChartBackgroundAtom } from "./atoms";
+
+const store = getDefaultStore();
 
 interface Point {
   x: number;
@@ -296,6 +300,8 @@ export function cuRefAreaPlugin({
       },
       drawSeries: [
         (u, sid) => {
+          if (!store.get(showChartBackgroundAtom)) return;
+
           // to draw the ref area above bank lines, but below other series
           if (u.series[sid].label !== "Active Bank") return;
 

src/features/Overview/SlotPerformance/ComputeUnitsCard/atoms.ts

@@ -12,6 +12,7 @@ import type uPlot from "uplot";
 import { useCallback, useRef } from "react";
 import { defaultMaxComputeUnits } from "../../../../consts";
 import CuChartInfoIcon from "./CuChartInfoIcon";
+import CuChartBackgroundToggle from "./CuChartRefAreaToggle";
 
 export default function ComputeUnitsCard() {
   const slot = useAtomValue(selectedSlotAtom);
@@ -39,6 +40,7 @@ export default function ComputeUnitsCard() {
           <Flex gap="3">
             <CardHeader text="Slot Progression" />
             <CuChartActions onUplot={onUplot} />
+            <CuChartBackgroundToggle onUplot={onUplot} />
           </Flex>
           <div className={styles.chart}>
             <CuChart

src/features/Overview/SlotPerformance/ComputeUnitsCard/cuRefAreaPlugin.ts

@@ -7,6 +7,7 @@ import { ScheduleStrategyEnum } from "../../../../api/entities";
 import { scheduleStrategyAtom } from "../../../../api/atoms";
 import { iconSize, infoIconId } from "./CuChartInfoIcon";
 import placement from "../../../../uplot/placement";
+import { showChartBackgroundAtom } from "./atoms";
 
 const store = getDefaultStore();
 
@@ -33,6 +34,8 @@ export function startLinePlugin(): uPlot.Plugin {
 
           iconEl.style.display = "none";
 
+          if (!store.get(showChartBackgroundAtom)) return;
+
           const xScale = u.scales[xScaleKey];
           const x = Math.round(u.valToPos(lineNs, xScaleKey, true));
 

src/features/Overview/SlotPerformance/ComputeUnitsCard/index.tsx

@@ -26,8 +26,8 @@ import { useEffect, useMemo, useState } from "react";
 import ToggleGroupControl from "./ToggleGroupControl";
 import { useMeasure, useMedia, useUnmount } from "react-use";
 import { errorCodeMap, FilterEnum, TxnState } from "./consts";
-import ToggleControl from "./ToggleControl";
-import toggleControlStyles from "./toggleControl.module.css";
+import ToggleControl from "../../../../components/ToggleControl";
+import toggleControlStyles from "../../../../components/toggleControl.module.css";
 import styles from "./chartControl.module.css";
 import { txnBarsUplotActionAtom } from "./uplotAtoms";
 import {