solved multi dashboard issuse

static/multi_pu_dashboard.html

@@ -78,16 +78,13 @@ const plots = [
   { id: 'Cdilute-plot', quantity: 'Cdilute', title: 'Cdilute per PU' },
 ];
 
+const plotTraceMap = {};  // track trace indices per plot
+
 function initAllPlots() {
   plots.forEach(plot => {
     const data = makeTraces(plot.quantity);
-    const layout = {
+    plotTraceMap[plot.id] = { pu: [0,1,2], extra: {} }; // base 3 PUs
-      title: plot.title,
-      xaxis: { title: 'Time', type: 'date' },
-      yaxis: { title: plot.id.includes('P') ? 'Pressure (bar)' : 'Flow (L/h)' },
-    };
 
-    // Add dynamic reference line placeholder (flat 0 initially)
     if (plot.refKey) {
       data.push({
         x: time0.slice(),
@@ -95,46 +92,35 @@ function initAllPlots() {
         mode: 'lines',
         line: { dash: 'dash', color: 'red' },
         name: `${plot.refKey} (PU2)`,
-        showlegend: true
       });
+      plotTraceMap[plot.id].extra.ref = data.length - 1;
     }
 
-    // Extra traces for Qperm plot
     if (plot.id === 'Qperm-plot') {
-      data.push({
+      data.push({ x: time0.slice(), y: zero.slice(), name: 'QSkid', mode: 'lines' });
-        x: time0.slice(),
+      plotTraceMap[plot.id].extra.qSkid = data.length - 1;
-        y: zero.slice(),
+
-        name: 'QSkid',
+      data.push({ x: time0.slice(), y: zero.slice(), name: 'Qconso', mode: 'lines' });
-        mode: 'lines',
+      plotTraceMap[plot.id].extra.qConso = data.length - 1;
-        line: { color: 'black', width: 2, dash: 'dot' },
-        legendgroup: 'PatientSkid'
-      });
-      data.push({
-        x: time0.slice(),
-        y: zero.slice(),
-        name: 'Qconso',
-        mode: 'lines',
-        line: { color: 'green', width: 2, dash: 'dot' },
-        legendgroup: 'Consumption'
-      });
     }
 
-    // Extra trace for Qdrain plot
     if (plot.id === 'Qdrain-plot') {
-      data.push({
+      data.push({ x: time0.slice(), y: zero.slice(), name: 'QSkid', mode: 'lines' });
-        x: time0.slice(),
+      plotTraceMap[plot.id].extra.qSkid = data.length - 1;
-        y: zero.slice(),
+
-        name: 'Qconso',
+      data.push({ x: time0.slice(), y: zero.slice(), name: 'Qconso', mode: 'lines' });
-        mode: 'lines',
+      plotTraceMap[plot.id].extra.qConso = data.length - 1;
-        line: { color: 'black', width: 2, dash: 'dot' },
-        legendgroup: 'Consumption'
-      });
     }
 
-    Plotly.newPlot(plot.id, data, layout);
+    Plotly.newPlot(plot.id, data, {
+      title: plot.title,
+      xaxis: { type: 'date' },
+      yaxis: { title: plot.id.includes('P') ? 'Pressure (bar)' : 'Flow (L/h)' }
+    });
   });
 }
 
+
 async function updateAllPlots() {
   try {
     const res = await fetch('/monitor');
@@ -161,36 +147,35 @@ async function updateAllPlots() {
       Plotly.extendTraces(plot.id, { x: xUpdates, y: yUpdates }, puList.map((_, i) => i), maxPoints);
 
       // Update PU2 reference line dynamically
+      Plotly.extendTraces(plot.id,
+  { x: xUpdates, y: yUpdates },
+  plotTraceMap[plot.id].pu,
+  maxPoints
+);
+
       if (plot.refKey) {
         const refVal = pu2Data[plot.refKey];
-        const refIndex = puList.length; // because ref trace was pushed last
         Plotly.extendTraces(plot.id,
           { x: [[timestamp]], y: [[refVal ?? null]] },
-          [refIndex],
+          [plotTraceMap[plot.id].extra.ref],
           maxPoints
         );
       }
 
       if (plot.id === 'Qperm-plot') {
+        const qSkid = SkidData["QSkid"];
         const qConso = DSData["Qconso"];
-        const baseIndex = puList.length + (plot.refKey ? 1 : 0);
+        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qSkid ?? null]] }, [plotTraceMap[plot.id].extra.qSkid], maxPoints);
-        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [baseIndex + 1], maxPoints);
+        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [plotTraceMap[plot.id].extra.qConso], maxPoints);
       }
-      // Extend QSkid + Qconso for Qperm
+
       if (plot.id === 'Qdrain-plot') {
         const qSkid = SkidData["QSkid"];
         const qConso = DSData["Qconso"];
-        const baseIndex = puList.length + (plot.refKey ? 1 : 0);
+        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qSkid ?? null]] }, [plotTraceMap[plot.id].extra.qSkid], maxPoints);
-        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qSkid ?? null]] }, [baseIndex], maxPoints);
+        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [plotTraceMap[plot.id].extra.qConso], maxPoints);
-        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [baseIndex + 1], maxPoints);
       }
 
-      // Extend Qconso for Qdrain
-      if (plot.id === 'Qdrain-plot') {
-        const qConso = DSData["Qconso"];
-        const consoIndex = puList.length + (plot.refKey ? 1 : 0);
-        Plotly.extendTraces(plot.id, { x: [[timestamp]], y: [[qConso ?? null]] }, [consoIndex], maxPoints);
-      }
 
       // Sliding window (30s)
       const layoutUpdate = {