Add multi-target highlighting and tour UI

haoruizhou · haoruizhou · commit 1c480d747646 · 2026-02-06T15:02:19.000-05:00
Switch accumulator highlighting from a single target to a list (SingleHighlightTarget[]), updating AccumulatorContext and consumers (CellGrid, ThermistorBar, MasterAlertPanel) to handle multiple simultaneous highlights and preserve auto-clear behavior. MasterAlertPanel now supports clicking the CELL Δ stat to highlight both min/max cells, StatCard and ModuleCard accept optional id props, and highlight checks use array.some. UI tweaks: refactor bottom banner layout and z-index, disable chart line animations in ChargingCurve, and add a TourGuide with predefined steps plus floating tour buttons and element ids in Accumulator and Dashboard for guided onboarding. Also includes minor formatting/structure cleanups in Dashboard and other components.
diff --git a/pecan/src/components/Banners.tsx b/pecan/src/components/Banners.tsx
@@ -66,17 +66,16 @@ function DefaultBanner({ open, onClose, onOpenSettings }: Readonly<InputProps>)
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 flex flex-row w-full bg-dropdown-menu-bg justify-between items-center box-border px-4 py-3 shadow-lg border-t border-gray-600">
-      <div className="w-[10%]"></div>
-      <div className="flex-1 flex justify-center items-center gap-2">
+    <div className="fixed bottom-0 left-0 right-0 z-30 flex flex-row w-full bg-dropdown-menu-bg justify-center items-center box-border px-4 py-3 shadow-lg border-t border-gray-600 gap-8">
+      <div className="flex items-center gap-2">
         <span className="text-white text-[14pt] font-semibold text-center whitespace-nowrap overflow-hidden text-ellipsis">
           Using preconfigured DBC file.
           <span className="text-gray-300 ml-2 font-normal">
             (Dismissing in {timeLeft}s)
           </span>
         </span>
       </div>
-      <div className="flex flex-row items-center justify-end gap-4 pe-4 shrink-0">
+      <div className="flex flex-row items-center gap-4 shrink-0">
         <button
           onClick={handleOpenSettings}
           className="bg-banner-button hover:bg-banner-button-hover px-4 py-2 cursor-pointer text-center text-[12pt] font-semibold text-white rounded-md transition-colors shadow-sm whitespace-nowrap"
diff --git a/pecan/src/components/accumulator/AccumulatorContext.tsx b/pecan/src/components/accumulator/AccumulatorContext.tsx
@@ -8,40 +8,43 @@
 import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
 import type { ModuleId } from './AccumulatorTypes';
 
-export type HighlightTarget = {
+export type SingleHighlightTarget = {
     moduleId: ModuleId;
     type: 'cell' | 'thermistor';
     index: number;
-} | null;
+};
+
+export type HighlightTarget = SingleHighlightTarget | SingleHighlightTarget[] | null;
 
 interface AccumulatorContextType {
-    highlightTarget: HighlightTarget;
+    highlightTargets: SingleHighlightTarget[];
     setHighlightTarget: (target: HighlightTarget) => void;
     clearHighlight: () => void;
 }
 
 const AccumulatorContext = createContext<AccumulatorContextType | null>(null);
 
 export function AccumulatorProvider({ children }: { children: ReactNode }) {
-    const [highlightTarget, setHighlightTargetState] = useState<HighlightTarget>(null);
+    const [highlightTargets, setHighlightTargets] = useState<SingleHighlightTarget[]>([]);
 
     const setHighlightTarget = useCallback((target: HighlightTarget) => {
-        setHighlightTargetState(target);
+        const targets = Array.isArray(target) ? target : target ? [target] : [];
+        setHighlightTargets(targets);
 
         // Auto-clear highlight after 2 seconds (after blink animation)
         if (target) {
             setTimeout(() => {
-                setHighlightTargetState(null);
+                setHighlightTargets([]);
             }, 2000);
         }
     }, []);
 
     const clearHighlight = useCallback(() => {
-        setHighlightTargetState(null);
+        setHighlightTargets([]);
     }, []);
 
     return (
-        <AccumulatorContext.Provider value={{ highlightTarget, setHighlightTarget, clearHighlight }}>
+        <AccumulatorContext.Provider value={{ highlightTargets, setHighlightTarget, clearHighlight }}>
             {children}
         </AccumulatorContext.Provider>
     );
diff --git a/pecan/src/components/accumulator/CellGrid.tsx b/pecan/src/components/accumulator/CellGrid.tsx
@@ -35,7 +35,7 @@ function Cell({ moduleId, cellIndex, stats, onClick }: {
     stats: CellStats;
     onClick?: () => void;
 }) {
-    const { highlightTarget } = useAccumulatorContext();
+    const { highlightTargets } = useAccumulatorContext();
     const cellRef = useRef<HTMLDivElement>(null);
     const { signalName } = getCellSignalInfo(moduleId, cellIndex);
 
@@ -53,9 +53,9 @@ function Cell({ moduleId, cellIndex, stats, onClick }: {
     );
 
     // Check if this cell is highlighted
-    const isHighlighted = highlightTarget?.type === 'cell' &&
-        highlightTarget?.moduleId === moduleId &&
-        highlightTarget?.index === cellIndex;
+    const isHighlighted = highlightTargets.some(t =>
+        t.type === 'cell' && t.moduleId === moduleId && t.index === cellIndex
+    );
 
     // Scroll into view when highlighted
     useEffect(() => {
diff --git a/pecan/src/components/accumulator/ChargingCurve.tsx b/pecan/src/components/accumulator/ChargingCurve.tsx
@@ -194,6 +194,7 @@ export default function ChargingCurve({
                         strokeWidth={2}
                         dot={false}
                         connectNulls
+                        isAnimationActive={false}
                     />
                     <Line
                         yAxisId="temp"
@@ -203,6 +204,7 @@ export default function ChargingCurve({
                         strokeWidth={2}
                         dot={false}
                         connectNulls
+                        isAnimationActive={false}
                     />
                 </LineChart>
             </ResponsiveContainer>
diff --git a/pecan/src/components/accumulator/MasterAlertPanel.tsx b/pecan/src/components/accumulator/MasterAlertPanel.tsx
@@ -335,14 +335,16 @@ export default function MasterAlertPanel() {
             ? '#f97316' : '#22c55e';
 
     // Stat card component for mobile-friendly touch targets
-    const StatCard = ({ label, value, sublabel, color, onClick }: {
+    const StatCard = ({ label, value, sublabel, color, onClick, id }: {
         label: string;
         value: string;
         sublabel?: string;
         color: string;
         onClick?: () => void;
+        id?: string;
     }) => (
         <button
+            id={id}
             onClick={onClick}
             disabled={!onClick}
             className={`
@@ -360,9 +362,10 @@ export default function MasterAlertPanel() {
         </button>
     );
 
-    const handleCellClick = (stat: { moduleId: ModuleId; index: number } | null) => {
-        if (stat) {
-            setHighlightTarget({ moduleId: stat.moduleId, index: stat.index, type: 'cell' });
+    const handleCellClick = (stats: { moduleId: ModuleId; index: number }[] | { moduleId: ModuleId; index: number } | null) => {
+        if (stats) {
+            const targets = Array.isArray(stats) ? stats : [stats];
+            setHighlightTarget(targets.map(s => ({ moduleId: s.moduleId, index: s.index, type: 'cell' })));
         }
     };
 
@@ -392,13 +395,14 @@ export default function MasterAlertPanel() {
 
                 {/* Cell Delta */}
                 <StatCard
+                    id="accu-delta-stat"
                     label="CELL Δ"
                     value={packStats.cellDelta !== null ? `${(packStats.cellDelta * 1000).toFixed(0)}mV` : '--'}
                     sublabel={packStats.minVoltage && packStats.maxVoltage
                         ? `${packStats.minVoltage.label}↔${packStats.maxVoltage.label}`
                         : undefined}
                     color={deltaColor}
-                    onClick={() => handleCellClick(packStats.minVoltage)}
+                    onClick={() => handleCellClick([packStats.minVoltage, packStats.maxVoltage].filter((x): x is NonNullable<typeof x> => x !== null))}
                 />
 
                 {/* Average Voltage */}
diff --git a/pecan/src/components/accumulator/ModuleCard.tsx b/pecan/src/components/accumulator/ModuleCard.tsx
@@ -25,6 +25,7 @@ interface ModuleCardProps {
     moduleId: ModuleId;
     initialOpen?: boolean;
     onCellClick?: (moduleId: ModuleId, cellIndex: number) => void;
+    id?: string;
 }
 
 interface ModuleStats {
@@ -123,7 +124,7 @@ function useModuleStats(moduleId: ModuleId): ModuleStats {
     return stats;
 }
 
-export default function ModuleCard({ moduleId, initialOpen = false, onCellClick }: ModuleCardProps) {
+export default function ModuleCard({ moduleId, initialOpen = false, onCellClick, id }: ModuleCardProps) {
     const [isOpen, setIsOpen] = useState(initialOpen);
     const { voltageStats, tempStats, alertLevel } = useModuleStats(moduleId);
 
@@ -132,6 +133,7 @@ export default function ModuleCard({ moduleId, initialOpen = false, onCellClick
 
     return (
         <div
+            id={id}
             className={`
         bg-data-module-bg rounded-lg overflow-hidden
         border-2 transition-all duration-300
diff --git a/pecan/src/components/accumulator/ThermistorBar.tsx b/pecan/src/components/accumulator/ThermistorBar.tsx
@@ -34,17 +34,17 @@ function ThermistorSegment({ moduleId, thermistorIndex, temp }: {
     thermistorIndex: number;
     temp: number | null;
 }) {
-    const { highlightTarget } = useAccumulatorContext();
+    const { highlightTargets } = useAccumulatorContext();
     const { signalName } = getThermistorSignalInfo(moduleId, thermistorIndex);
 
     const bgColor = getTemperatureColor(temp);
     const isCritical = temp !== null && temp >= ALERT_THRESHOLDS.overTemp.critical;
     const isWarning = temp !== null && temp >= ALERT_THRESHOLDS.overTemp.warning;
 
     // Check if this thermistor is highlighted
-    const isHighlighted = highlightTarget?.type === 'thermistor' &&
-        highlightTarget?.moduleId === moduleId &&
-        highlightTarget?.index === thermistorIndex;
+    const isHighlighted = highlightTargets.some(t =>
+        t.type === 'thermistor' && t.moduleId === moduleId && t.index === thermistorIndex
+    );
 
     return (
         <div
diff --git a/pecan/src/pages/Accumulator.tsx b/pecan/src/pages/Accumulator.tsx
@@ -18,6 +18,28 @@ import {
 import DraggablePlot from '../components/DraggablePlot';
 import { type PlotSignal } from '../components/PlotManager';
 import { dataStore } from '../lib/DataStore';
+import TourGuide, { type TourStep } from '../components/TourGuide';
+
+const TOUR_STEPS: TourStep[] = [
+  {
+    targetId: "accu-module-cards",
+    title: "Module Grid",
+    content: "Cells are clickable! Click any cell to open a detailed voltage plot in a floating window.",
+    position: "right"
+  },
+  {
+    targetId: "accu-chart-window",
+    title: "Charging Curve",
+    content: "This chart shows pack-wide trends. You can adjust the time window using the dropdown in the top right.",
+    position: "left"
+  },
+  {
+    targetId: "accu-delta-stat",
+    title: "Cell Delta",
+    content: "Clicking the Delta stat will highlight the two cells with the largest voltage difference in the grid below.",
+    position: "right"
+  }
+];
 
 export default function Accumulator() {
   // Time window for charging curve (5 minutes default)
@@ -26,6 +48,10 @@ export default function Accumulator() {
   // Plot modal state
   const [plotSignal, setPlotSignal] = useState<PlotSignal | null>(null);
 
+  // Tour state
+  const [tourOpen, setTourOpen] = useState(false);
+  const [currentTourStep, setCurrentTourStep] = useState(0);
+
   const handleCellClick = (moduleId: ModuleId, cellIndex: number) => {
     const { msgId, signalName } = getCellSignalInfo(moduleId, cellIndex);
 
@@ -63,7 +89,10 @@ export default function Accumulator() {
               <ChargingCurve timeWindowMs={chartTimeWindow} />
 
               {/* Time window selector */}
-              <div className="absolute top-3 right-3 flex items-center gap-2">
+              <div
+                id="accu-chart-window"
+                className="absolute top-3 right-3 flex items-center gap-2"
+              >
                 <span className="text-xs text-gray-400">Window:</span>
                 <select
                   value={chartTimeWindow}
@@ -81,9 +110,10 @@ export default function Accumulator() {
 
           {/* Module Cards Grid */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {MODULE_IDS.map((moduleId) => (
+            {MODULE_IDS.map((moduleId, index) => (
               <ModuleCard
                 key={moduleId}
+                id={index === 0 ? "accu-module-cards" : undefined}
                 moduleId={moduleId}
                 initialOpen={true}
                 onCellClick={handleCellClick}
@@ -100,12 +130,30 @@ export default function Accumulator() {
           </div>
         </div>
 
+        {/* Floating Tour Button */}
+        <button
+          onClick={() => setTourOpen(true)}
+          className="fixed bottom-6 right-6 z-40 w-10 h-10 rounded-full bg-blue-600 text-white shadow-lg flex items-center justify-center hover:bg-blue-500 hover:scale-110 transition-all"
+          title="Start Tour"
+          aria-label="Start Tour"
+        >
+          <span className="text-lg font-bold">?</span>
+        </button>
+
         {/* Cell Plot Window (Draggable) */}
         <DraggablePlot
           isOpen={!!plotSignal}
           onClose={() => setPlotSignal(null)}
           signalInfo={plotSignal}
         />
+
+        <TourGuide
+          steps={TOUR_STEPS}
+          isOpen={tourOpen}
+          onClose={() => setTourOpen(false)}
+          currentStepIndex={currentTourStep}
+          onStepChange={setCurrentTourStep}
+        />
       </div>
     </AccumulatorProvider>
   );
diff --git a/pecan/src/pages/Dashboard.tsx b/pecan/src/pages/Dashboard.tsx
