Add draggable per-cell plot and cell click wiring

Author: haoruizhou

pecan/src/components/DraggablePlot.tsx

@@ -0,0 +1,92 @@
+import { useState, useRef, useEffect } from 'react';
+import PlotManager, { type PlotSignal } from './PlotManager';
+import { GripHorizontal } from 'lucide-react';
+
+interface DraggablePlotProps {
+    isOpen: boolean;
+    onClose: () => void;
+    signalInfo: PlotSignal | null;
+}
+
+export default function DraggablePlot({ isOpen, onClose, signalInfo }: DraggablePlotProps) {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const isDragging = useRef(false);
+    const dragStart = useRef({ x: 0, y: 0 });
+    const windowRef = useRef<HTMLDivElement>(null);
+
+    // Reset position when opened with new signal? 
+    // Maybe keep position persistence? Let's keep persistence for now.
+
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isDragging.current) return;
+
+            const dx = e.clientX - dragStart.current.x;
+            const dy = e.clientY - dragStart.current.y;
+
+            // Calculate new position
+            // Since we are applying transform translate relative to bottom-right,
+            // positive X moves right, positive Y moves down.
+            // But dragging "left" means negative delta.
+
+            // Actually, let's track absolute translation.
+            setPosition(prev => ({
+                x: prev.x + dx,
+                y: prev.y + dy
+            }));
+
+            dragStart.current = { x: e.clientX, y: e.clientY };
+        };
+
+        const handleMouseUp = () => {
+            isDragging.current = false;
+        };
+
+        if (isOpen) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isOpen]);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        isDragging.current = true;
+        dragStart.current = { x: e.clientX, y: e.clientY };
+        e.preventDefault(); // Prevent text selection
+    };
+
+    if (!isOpen || !signalInfo) return null;
+
+    return (
+        <div
+            ref={windowRef}
+            className="fixed bottom-4 right-4 z-50 flex flex-col bg-data-module-bg rounded-lg shadow-2xl border border-gray-700 w-[600px] overflow-hidden"
+            style={{
+                transform: `translate(${position.x}px, ${position.y}px)`,
+                // Ensure it doesn't go off screen too much? simpler to just let user move it.
+            }}
+        >
+            {/* Drag Handle */}
+            <div
+                className="bg-gray-800 p-1 cursor-grab active:cursor-grabbing flex justify-center items-center hover:bg-gray-700 transition-colors"
+                onMouseDown={handleMouseDown}
+            >
+                <GripHorizontal size={16} className="text-gray-400" />
+            </div>
+
+            <div className="p-1">
+                <PlotManager
+                    plotId="Cell Plot"
+                    signals={[signalInfo]}
+                    timeWindowMs={30000}
+                    onRemoveSignal={onClose}
+                    onClosePlot={onClose}
+                />
+            </div>
+        </div>
+    );
+}

pecan/src/components/accumulator/CellGrid.tsx

@@ -19,6 +19,7 @@ import {
 
 interface CellGridProps {
     moduleId: ModuleId;
+    onCellClick?: (moduleId: ModuleId, cellIndex: number) => void;
 }
 
 interface CellStats {
@@ -28,10 +29,11 @@ interface CellStats {
 }
 
 // Individual cell component with 1s throttled updates and highlight support
-function Cell({ moduleId, cellIndex, stats }: {
+function Cell({ moduleId, cellIndex, stats, onClick }: {
     moduleId: ModuleId;
     cellIndex: number;
     stats: CellStats;
+    onClick?: () => void;
 }) {
     const { highlightTarget } = useAccumulatorContext();
     const cellRef = useRef<HTMLDivElement>(null);
@@ -77,10 +79,11 @@ function Cell({ moduleId, cellIndex, stats }: {
             className={`
         relative flex items-center justify-center
         rounded-sm text-xs font-mono font-semibold
-        cursor-default transition-all duration-300
-        ${isHighlighted ? 'z-10 shadow-lg scale-105' : ''}
+        cursor-pointer transition-all duration-300
+        ${isHighlighted ? 'z-10 shadow-lg scale-105' : 'hover:scale-105 hover:z-10 hover:shadow-md'}
         ${!isHighlighted && isCritical ? 'animate-alert-pulse' : !isHighlighted && isWarning ? 'animate-warning-pulse' : ''}
       `}
+            onClick={onClick}
             style={{
                 backgroundColor: isHighlighted ? '#ffffff' : bgColor,
                 color: isHighlighted ? '#000000' : '#ffffff'
@@ -154,7 +157,7 @@ function useCellStats(moduleId: ModuleId): Map<number, CellStats> {
     return cellStats;
 }
 
-export default function CellGrid({ moduleId }: CellGridProps) {
+export default function CellGrid({ moduleId, onCellClick }: CellGridProps) {
     const cellIndices = useMemo(() =>
         Array.from({ length: CELLS_PER_MODULE }, (_, i) => i + 1),
         []
@@ -170,6 +173,7 @@ export default function CellGrid({ moduleId }: CellGridProps) {
                     moduleId={moduleId}
                     cellIndex={cellIndex}
                     stats={cellStats.get(cellIndex) || { current: null, min: null, max: null }}
+                    onClick={() => onCellClick?.(moduleId, cellIndex)}
                 />
             ))}
         </div>

pecan/src/components/accumulator/ModuleCard.tsx

@@ -24,6 +24,7 @@ import {
 interface ModuleCardProps {
     moduleId: ModuleId;
     initialOpen?: boolean;
+    onCellClick?: (moduleId: ModuleId, cellIndex: number) => void;
 }
 
 interface ModuleStats {
@@ -122,7 +123,7 @@ function useModuleStats(moduleId: ModuleId): ModuleStats {
     return stats;
 }
 
-export default function ModuleCard({ moduleId, initialOpen = false }: ModuleCardProps) {
+export default function ModuleCard({ moduleId, initialOpen = false, onCellClick }: ModuleCardProps) {
     const [isOpen, setIsOpen] = useState(initialOpen);
     const { voltageStats, tempStats, alertLevel } = useModuleStats(moduleId);
 
@@ -195,7 +196,7 @@ export default function ModuleCard({ moduleId, initialOpen = false }: ModuleCard
                                 {/* Cell voltage grid */}
                                 <div>
                                     <h4 className="text-xs text-white mb-1 font-semibold">Cell Voltages</h4>
-                                    <CellGrid moduleId={moduleId} />
+                                    <CellGrid moduleId={moduleId} onCellClick={onCellClick} />
                                 </div>
 
                                 {/* Thermistor bar */}

pecan/src/pages/Accumulator.tsx

@@ -12,12 +12,35 @@ import {
   ChargingCurve,
   MODULE_IDS,
   AccumulatorProvider,
+  getCellSignalInfo,
+  type ModuleId,
 } from '../components/accumulator';
+import DraggablePlot from '../components/DraggablePlot';
+import { type PlotSignal } from '../components/PlotManager';
+import { dataStore } from '../lib/DataStore';
 
 export default function Accumulator() {
   // Time window for charging curve (5 minutes default)
   const [chartTimeWindow, setChartTimeWindow] = useState(300000);
 
+  // Plot modal state
+  const [plotSignal, setPlotSignal] = useState<PlotSignal | null>(null);
+
+  const handleCellClick = (moduleId: ModuleId, cellIndex: number) => {
+    const { msgId, signalName } = getCellSignalInfo(moduleId, cellIndex);
+
+    // Try to get friendly message name from store, or construct one
+    const latest = dataStore.getLatest(msgId);
+    const messageName = latest?.messageName || `Module ${moduleId} Voltage`;
+
+    setPlotSignal({
+      msgID: msgId,
+      signalName: signalName,
+      messageName: messageName,
+      unit: 'V'
+    });
+  };
+
   return (
     <AccumulatorProvider>
       <div className="h-full overflow-y-auto bg-sidebar">
@@ -63,6 +86,7 @@ export default function Accumulator() {
                 key={moduleId}
                 moduleId={moduleId}
                 initialOpen={true}
+                onCellClick={handleCellClick}
               />
             ))}
           </div>
@@ -75,6 +99,13 @@ export default function Accumulator() {
             </p>
           </div>
         </div>
+
+        {/* Cell Plot Window (Draggable) */}
+        <DraggablePlot
+          isOpen={!!plotSignal}
+          onClose={() => setPlotSignal(null)}
+          signalInfo={plotSignal}
+        />
       </div>
     </AccumulatorProvider>
   );