partially wire up controls to pad state

noahm · noahm · commit 3f871502deaa · 2025-03-13T19:01:06.000-07:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,6 @@
   "typescript.preferences.preferTypeOnlyAutoImports": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": "explicit"
-  }
+  },
+  "editor.defaultFormatter": "biomejs.biome"
 }
diff --git a/ui/common/panel-meters.module.css b/ui/common/panel-meters.module.css
@@ -21,4 +21,4 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: 32px;
-}
+}
diff --git a/ui/common/panel-meters.tsx b/ui/common/panel-meters.tsx
@@ -1,54 +1,61 @@
+import { useState, useCallback } from "react";
+import { useAtomValue } from "jotai";
 
-import { useState, useCallback } from "react"
-import { SensorMeterInput } from "./sensor-meter-input"
-import { ToggleSwitch } from "./toggle-switch"
+import { useTestData } from "../stage/hooks";
+import { selectedStage$, selectedPanelIdx$ } from "../state";
+import { SensorMeterInput } from "./sensor-meter-input";
+import { ToggleSwitch } from "./toggle-switch";
 import classes from "./panel-meters.module.css";
 
 export function PanelMeters() {
+  const stage = useAtomValue(selectedStage$);
+  const panelIdx = useAtomValue(selectedPanelIdx$);
+  const testData = useTestData(stage);
+  const panelData = panelIdx === undefined ? null : testData?.panels[panelIdx];
   const [sensors, setSensors] = useState([
-    { id: 1, value: 50, activationThreshold: 70, releaseThreshold: 30 },
-    { id: 2, value: 30, activationThreshold: 60, releaseThreshold: 20 },
-    { id: 3, value: 70, activationThreshold: 80, releaseThreshold: 40 },
-    { id: 4, value: 40, activationThreshold: 75, releaseThreshold: 25 },
-  ])
+    { id: 1, activationThreshold: 70, releaseThreshold: 30 },
+    { id: 2, activationThreshold: 60, releaseThreshold: 20 },
+    { id: 3, activationThreshold: 80, releaseThreshold: 40 },
+    { id: 4, activationThreshold: 75, releaseThreshold: 25 },
+  ]);
 
-  const [isLocked, setIsLocked] = useState(false)
+  const [isLocked, setIsLocked] = useState(false);
 
   const updateSensorThreshold = useCallback(
     (id: number, type: "activation" | "release", value: number) => {
       setSensors((prevSensors) => {
         const updatedSensors = prevSensors.map((sensor) =>
           sensor.id === id ? { ...sensor, [`${type}Threshold`]: value } : sensor,
-        )
+        );
 
         if (isLocked) {
           // If locked, update all sensors with the same threshold
           return updatedSensors.map((sensor) => ({
             ...sensor,
             [`${type}Threshold`]: value,
-          }))
+          }));
         }
 
-        return updatedSensors
-      })
+        return updatedSensors;
+      });
     },
     [isLocked],
-  )
+  );
 
   const toggleLock = () => {
-    setIsLocked((prev) => !prev)
+    setIsLocked((prev) => !prev);
     if (!isLocked) {
       // When locking, set all thresholds to the values of the first sensor
-      const { activationThreshold, releaseThreshold } = sensors[0]
+      const { activationThreshold, releaseThreshold } = sensors[0];
       setSensors((prevSensors) =>
         prevSensors.map((sensor) => ({
           ...sensor,
           activationThreshold,
           releaseThreshold,
         })),
-      )
+      );
     }
-  }
+  };
 
   return (
     <div className={classes.panelWrapper}>
@@ -60,7 +67,7 @@ export function PanelMeters() {
         {sensors.map((sensor, index) => (
           <SensorMeterInput
             key={sensor.id}
-            value={sensor.value}
+            value={panelData?.sensor_level[index]}
             id={sensor.id}
             activationThreshold={sensor.activationThreshold}
             releaseThreshold={sensor.releaseThreshold}
@@ -71,6 +78,5 @@ export function PanelMeters() {
         ))}
       </div>
     </div>
-  )
+  );
 }
-
diff --git a/ui/common/sensor-meter-input.tsx b/ui/common/sensor-meter-input.tsx
@@ -8,15 +8,11 @@ function clamp(value: number, min: number, max: number) {
 
 interface SensorProps {
   id: number;
-  value: number;
+  value?: number | undefined;
   activationThreshold: number;
   releaseThreshold: number;
   maxValue: number;
-  updateThreshold?: (
-    id: number,
-    type: "activation" | "release",
-    value: number,
-  ) => void;
+  updateThreshold?: (id: number, type: "activation" | "release", value: number) => void;
   showControls?: boolean;
 }
 
@@ -46,13 +42,11 @@ export function SensorMeterInput({
   updateThreshold,
   showControls,
 }: SensorProps) {
-  const valuePct = 100 * value / maxValue;
-  const releaseThresholdPct = 100 * releaseThreshold / maxValue;
-  const activationThresholdPct = 100 * activationThreshold / maxValue;
-  const [currentDraggingHandle, setIsDragging] = useState<"activation" | "release" | null>(
-    null,
-  );
-  const isActive = useSensorActive(value, activationThreshold, releaseThreshold);
+  const valuePct = (100 * (value || 0)) / maxValue;
+  const releaseThresholdPct = (100 * releaseThreshold) / maxValue;
+  const activationThresholdPct = (100 * activationThreshold) / maxValue;
+  const [currentDraggingHandle, setIsDragging] = useState<"activation" | "release" | null>(null);
+  const isActive = useSensorActive(value || 0, activationThreshold, releaseThreshold);
 
   const handleMouseDown = (type: "activation" | "release") => {
     setIsDragging(type);
@@ -73,7 +67,7 @@ export function SensorMeterInput({
 
       updateThreshold?.(id, currentDraggingHandle, Math.round(percentage));
     },
-    [id, currentDraggingHandle, updateThreshold],
+    [id, currentDraggingHandle, updateThreshold, maxValue],
   );
 
   return (
@@ -100,40 +94,24 @@ export function SensorMeterInput({
             onMouseUp={handleMouseUp}
             onMouseLeave={handleMouseUp}
           >
-            <div
-              className={classes.dragHandleContainer}
-              style={{ bottom: `calc(${activationThresholdPct}% - 8px)` }}
-            >
+            <div className={classes.dragHandleContainer} style={{ bottom: `calc(${activationThresholdPct}% - 8px)` }}>
               <div
                 className={classNames(classes.dragHandle, classes.atkColorBg)}
                 onMouseDown={() => handleMouseDown("activation")}
               />
-              <span
-                className={classNames(classes.handleLabel, classes.atkColorFg)}
-              >
-                {activationThreshold}
-              </span>
+              <span className={classNames(classes.handleLabel, classes.atkColorFg)}>{activationThreshold}</span>
             </div>
-            <div
-              className={classes.dragHandleContainer}
-              style={{ bottom: `calc(${releaseThresholdPct}% - 8px)` }}
-            >
+            <div className={classes.dragHandleContainer} style={{ bottom: `calc(${releaseThresholdPct}% - 8px)` }}>
               <div
                 className={classNames(classes.dragHandle, classes.rlsColorBg)}
                 onMouseDown={() => handleMouseDown("release")}
               />
-              <span
-                className={classNames(classes.handleLabel, classes.rlsColorFg)}
-              >
-                {releaseThreshold}
-              </span>
+              <span className={classNames(classes.handleLabel, classes.rlsColorFg)}>{releaseThreshold}</span>
             </div>
           </div>
         )}
       </div>
-      <div className={classes.bottomLabel}>
-        <p>Value: {value}</p>
-      </div>
+      <div className={classes.bottomLabel}>{value === undefined ? null : <p>Value: {value}</p>}</div>
     </div>
   );
 }
diff --git a/ui/common/toggle-switch.tsx b/ui/common/toggle-switch.tsx
@@ -2,22 +2,20 @@ import classNames from "classnames";
 import classes from "./toggle-switch.module.css";
 
 interface ToggleProps {
-  isOn: boolean
-  onToggle: () => void
-  label: string
+  isOn: boolean;
+  onToggle: () => void;
+  label: string;
 }
 
 export function ToggleSwitch({ isOn, onToggle, label }: ToggleProps) {
   return (
     <label className={classes.wrapper}>
       <div className={classes.inputParent}>
         <input type="checkbox" className={classes.screenReaderOnly} checked={isOn} onChange={onToggle} />
-        <div className={classNames(classes.background, { [classes.bgOn]: isOn })}></div>
-        <div
-          className={classNames(classes.handle, { [classes.handleOn]: isOn })}
-        ></div>
+        <div className={classNames(classes.background, { [classes.bgOn]: isOn })} />
+        <div className={classNames(classes.handle, { [classes.handleOn]: isOn })} />
       </div>
       <div className={classes.labelText}>{label}</div>
     </label>
-  )
+  );
 }
diff --git a/ui/stage/fsr-panel.tsx b/ui/stage/fsr-panel.tsx
@@ -1,21 +1,34 @@
 import cn from "classnames";
 import { FsrSensor, type SMXPanelTestData } from "../../sdk";
+import { useCallback } from "react";
+import { selectedPanelIdx$, selectedStageSerial$ } from "../state";
+import { useAtomValue } from "jotai";
 
 interface EnabledProps {
   testData: SMXPanelTestData | undefined;
   active: boolean | undefined;
   disabled: boolean | undefined;
+  index: number;
+  stageSerial: string;
+  onClick(index: number): void;
 }
 
-export function FsrPanel({ testData, active, disabled }: EnabledProps) {
+export function FsrPanel({ testData, active, disabled, index, onClick, stageSerial }: EnabledProps) {
+  const handleClick = useCallback(() => onClick(index), [index, onClick]);
+  const selectedPanelIdx = useAtomValue(selectedPanelIdx$);
+  const selectedStageSerial = useAtomValue(selectedStageSerial$);
   if (disabled) {
-    return <div className={cn("panel", {})} />;
+    return <div className={cn("panel disabled", {})} />;
   }
+  const selected = stageSerial === selectedStageSerial && selectedPanelIdx === index;
   return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: not doing a11y right now :/
     <div
+      onClick={handleClick}
       className={cn("panel", {
         commErr: testData && !testData.have_data_from_panel,
         active: active,
+        selected,
       })}
     >
       <Fsr
diff --git a/ui/stage/load-cell-panel.tsx b/ui/stage/load-cell-panel.tsx
@@ -1,21 +1,34 @@
 import cn from "classnames";
 import type { SMXPanelTestData } from "../../sdk";
+import { useCallback } from "react";
+import { useAtomValue } from "jotai";
+import { selectedPanelIdx$, selectedStageSerial$ } from "../state";
 
 interface EnabledProps {
   testData: SMXPanelTestData | undefined;
   active: boolean | undefined;
   disabled: boolean | undefined;
+  index: number;
+  stageSerial: string;
+  onClick(index: number): void;
 }
 
-export function LoadCellPanel({ testData, active, disabled }: EnabledProps) {
+export function LoadCellPanel({ testData, active, disabled, onClick, index, stageSerial }: EnabledProps) {
+  const handleClick = useCallback(() => onClick(index), [index, onClick]);
+  const selectedPanelIdx = useAtomValue(selectedPanelIdx$);
+  const selectedStageSerial = useAtomValue(selectedStageSerial$);
   if (disabled) {
-    return <div className={cn("panel", {})} />;
+    return <div className={cn("panel disabled", {})} />;
   }
+  const selected = stageSerial === selectedStageSerial && selectedPanelIdx === index;
   return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: not doing a11y right now :/
     <div
+      onClick={handleClick}
       className={cn("panel", {
         commErr: testData && !testData.have_data_from_panel,
         active: active,
+        selected,
       })}
     >
       {/* TODO: load cells don't have inherent placement, so this UI layout should become more ambiguous soon */}
diff --git a/ui/stage/stage-test.tsx b/ui/stage/stage-test.tsx
@@ -1,11 +1,13 @@
 import cn from "classnames";
-import { useAtomValue, type Atom } from "jotai";
+import { useAtomValue, type Atom, useSetAtom } from "jotai";
 import type React from "react";
 import { FsrPanel } from "./fsr-panel";
 import type { SMXStage } from "../../sdk/";
 import { timez } from "./util";
 import { LoadCellPanel } from "./load-cell-panel";
 import { useTestData, useInputState, useConfig } from "./hooks";
+import { selectedPanelIdx$, selectedStageSerial$ } from "../state";
+import { useCallback } from "react";
 
 export function StageTest({
   stageAtom,
@@ -16,6 +18,15 @@ export function StageTest({
   const testData = useTestData(stage);
   const inputState = useInputState(stage);
   const config = useConfig(stage);
+  const setSelectedPanelIdx = useSetAtom(selectedPanelIdx$);
+  const setSelectedStateSerial = useSetAtom(selectedStageSerial$);
+  const handleSelectPanel = useCallback(
+    (panelIdx: number) => {
+      setSelectedPanelIdx(panelIdx);
+      setSelectedStateSerial(stage?.info?.serial);
+    },
+    [setSelectedPanelIdx, setSelectedStateSerial, stage],
+  );
 
   let panels: React.ReactNode;
   if (stage?.config?.flags.PlatformFlags_FSR) {
@@ -24,16 +35,22 @@ export function StageTest({
         disabled={config?.enabledSensors[idx].every((enabled) => !enabled)}
         active={inputState?.[idx]}
         key={idx}
+        index={idx}
         testData={testData?.panels[idx]}
+        onClick={handleSelectPanel}
+        stageSerial={stage?.info?.serial || ""}
       />
     ));
   } else {
     panels = timez(9, (idx) => (
       <LoadCellPanel
-        disabled={config?.enabledSensors[idx].every((enabled) => !enabled)}
+        disabled={!config || config?.enabledSensors[idx].every((enabled) => !enabled)}
         active={inputState?.[idx]}
         key={idx}
+        index={idx}
         testData={testData?.panels[idx]}
+        onClick={handleSelectPanel}
+        stageSerial={stage?.info?.serial || ""}
       />
     ));
   }
diff --git a/ui/state.ts b/ui/state.ts
@@ -18,6 +18,8 @@ export const selectedStage$ = atom<SMXStage | undefined>((get) => {
   return stages[serial];
 });
 
+export const selectedPanelIdx$ = atom<number | undefined>();
+
 export const displayTestData$ = atom<"" | "raw" | "calibrated" | "noise" | "tare">("");
 
 export const statusText$ = atom(
diff --git a/ui/styles.css b/ui/styles.css
@@ -292,11 +292,7 @@ footer {
   bottom: 0em;
   padding: 1em 0;
   width: 100%;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0),
-    #ffffff 2em
-  );
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 2em);
 }
 
 button,
@@ -374,6 +370,12 @@ button:focus {
   outline: 2px solid #ddd;
   position: relative;
 }
+.panel.selected {
+  outline-color: var(--color-green-900);
+}
+.panel:not(.disabled) {
+  cursor: pointer;
+}
 .panel.active {
   background-color: #00ff00;
 }

Original file line number	Diff line number	Diff line change
`@@ -11,5 +11,6 @@`
`11`	`11`	`"typescript.preferences.preferTypeOnlyAutoImports": true,`
`12`	`12`	`"editor.codeActionsOnSave": {`
`13`	`13`	`"source.fixAll": "explicit"`
`14`		`- }`
	`14`	`+ },`
	`15`	`+ "editor.defaultFormatter": "biomejs.biome"`
`15`	`16`	`}`