From 9443f5e59812607dc3e1c83e73c9eb2b05cffe66 Mon Sep 17 00:00:00 2001
From: Etienne Chassaing <60154720+cetiennec@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:31:34 +0200
Subject: [PATCH] feat: puts back the MV0i readings and remove recording button
 from monitor pages

---
 static/monitor.html | 484 ++++++++++++++++++--------------------------
 1 file changed, 202 insertions(+), 282 deletions(-)
diff --git a/static/monitor.html b/static/monitor.html
index 3542673..d44f83f 100644
--- a/static/monitor.html
+++ b/static/monitor.html
@@ -1,309 +1,229 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Live Monitoring Dashboard</title>
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 20px;
-        }
-        .plot-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 20px;
-        }
-        .large-plot {
-            width: 45%;
-            height: 300px;
-        }
-        .small-plot {
-            width: 30%;
-            height: 250px;
-        }
-        h1 {
-            text-align: center;
-        }
-        #recordButton {
-            background-color: #ff4444;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            font-size: 16px;
-            cursor: pointer;
-            border-radius: 5px;
-            margin: 10px;
-        }
-        .status-container {
-            background-color: #f0f0f0;
-            padding: 10px;
-            border-radius: 5px;
-            margin: 10px auto;
-            text-align: center;
-            font-size: 18px;
-        }
-    </style>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Live Monitoring Dashboard</title>
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+    }
+    .plot-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 20px;
+    }
+    .large-plot {
+      width: 45%;
+      height: 300px;
+    }
+    .small-plot {
+      width: 30%;
+      height: 250px;
+    }
+    h1 {
+      text-align: center;
+    }
+    .status-container {
+      background-color: #f0f0f0;
+      padding: 10px;
+      border-radius: 5px;
+      margin: 10px auto;
+      text-align: center;
+      font-size: 18px;
+    }
+  </style>
 </head>
 <body>
-    <h1 id="pageTitle">Live Monitoring Dashboard</h1>
-    <div class="status-container">
-        <p>Current Status: <span id="currentStatus">Loading...</span></p>
-    </div>
-    <button id="recordButton" onclick="toggleRecording()">Record</button>
-    <div class="plot-container">
-        <div id="flow-plot-1" class="large-plot"></div>
-        <div id="pressure-plot-1" class="large-plot"></div>
-        <div id="flow-plot-2" class="large-plot"></div>
-        <div id="pressure-plot-2" class="large-plot"></div>
-        <div id="MV02_sp-plot" class="small-plot"></div>
-        <div id="MV03_sp-plot" class="small-plot"></div>
-        <div id="MV04_sp-05-plot" class="small-plot"></div>
-        <div id="MV06_sp-plot" class="small-plot"></div>
-        <div id="MV07_sp-plot" class="small-plot"></div>
-        <div id="MV08_sp-plot" class="small-plot"></div>
-    </div>
+  <h1 id="pageTitle">Live Monitoring Dashboard</h1>
+  <div class="status-container">
+    <p>Current Status: <span id="currentStatus">Loading...</span></p>
+  </div>
+
+  <div class="plot-container">
+    <div id="flow-plot-1" class="large-plot"></div>
+    <div id="pressure-plot-1" class="large-plot"></div>
+    <div id="flow-plot-2" class="large-plot"></div>
+    <div id="pressure-plot-2" class="large-plot"></div>
+    <div id="MV02_sp-plot" class="small-plot"></div>
+    <div id="MV03_sp-plot" class="small-plot"></div>
+    <div id="MV04_sp-05-plot" class="small-plot"></div>
+    <div id="MV06_sp-plot" class="small-plot"></div>
+    <div id="MV07_sp-plot" class="small-plot"></div>
+    <div id="MV08_sp-plot" class="small-plot"></div>
+  </div>
+
 <script>
-    // Extract PU number from URL
-    const urlParams = new URLSearchParams(window.location.search);
-    const puNumber = urlParams.get('pu_number') || '1'; // Default to PU 1 if not specified
-    document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`;
+  const urlParams = new URLSearchParams(window.location.search);
+  const puNumber = urlParams.get('pu_number') || '1';
+  document.getElementById('pageTitle').textContent = `Live Monitoring Dashboard - PU ${puNumber}`;
 
-    let isRecording = false;
-    let recordedData = [];
-    let recordingInterval;
-    let csvFileName = '';
+  const maxPoints = 100;
 
-    async function toggleRecording() {
-        const recordButton = document.getElementById('recordButton');
-        if (!isRecording) {
-            isRecording = true;
-            recordButton.style.backgroundColor = '#ff0000';
-            recordButton.textContent = 'Stop Recording';
-            recordedData = [];
-            csvFileName = `monitoring_data_PU${puNumber}_${new Date().toISOString().replace(/[:.]/g, '-')}.csv`;
-            startRecording();
-        } else {
-            isRecording = false;
-            recordButton.style.backgroundColor = '#ff4444';
-            recordButton.textContent = 'Record';
-            stopRecording();
-        }
+  async function updatePlots() {
+    try {
+      const response = await fetch('/monitor');
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+      const allData = await response.json();
+      const puData = allData[`PU_${puNumber}`];
+      const SkidData = allData[`PatientSkid`];
+      const t = new Date(puData.timestamp);
+
+      Plotly.extendTraces('flow-plot-1', {
+        x: [[t], [t]],
+        y: [[puData.Qperm], [puData.Qdilute]]
+      }, [0, 1], maxPoints);
+
+      Plotly.extendTraces('flow-plot-2', {
+        x: [[t], [t], [t], [t]],
+        y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]]
+      }, [0, 1, 2, 3], maxPoints);
+
+      Plotly.extendTraces('pressure-plot-1', {
+        x: [[t], [t]],
+        y: [[puData.Pro], [puData.Pretentate]]
+      }, [0, 1], maxPoints);
+
+      Plotly.extendTraces('pressure-plot-2', {
+        x: [[t]],
+        y: [[puData.Pdilute]]
+      }, [0], maxPoints);
+
+      Plotly.extendTraces('MV02_sp-plot', {
+        x: [[t], [t]],
+        y: [[puData.MV02_sp], [puData.MV02]]
+      }, [0, 1], maxPoints);
+
+      Plotly.extendTraces('MV03_sp-plot', {
+        x: [[t], [t]],
+        y: [[puData.MV03_sp], [puData.MV03]]
+      }, [0, 1], maxPoints);
+
+      Plotly.extendTraces('MV04_sp-05-plot', {
+        x: [[t], [t], [t], [t]],
+        y: [[puData.MV04_sp], [puData.MV04], [puData.MV05_sp], [puData.MV05]]
+      }, [0, 1, 2, 3], maxPoints);
+
+      Plotly.extendTraces('MV06_sp-plot', {
+        x: [[t], [t]],
+        y: [[puData.MV06_sp], [puData.MV06]]
+      }, [0, 1], maxPoints);
+
+      Plotly.extendTraces('MV07_sp-plot', {
+        x: [[t], [t]],
+        y: [[puData.MV07_sp], [puData.MV07]]
+      }, [0, 1], maxPoints);
+
+      Plotly.extendTraces('MV08_sp-plot', {
+        x: [[t], [t]],
+        y: [[puData.MV08_sp], [puData.MV08]]
+      }, [0, 1], maxPoints);
+    } catch (e) {
+      console.error("Error updating plots:", e);
     }
+  }
 
-    function startRecording() {
-        recordingInterval = setInterval(async () => {
-            const response = await fetch('/monitor');
-            if (!response.ok) {
-                console.error(`HTTP error! status: ${response.status}`);
-                return;
-            }
-            const allData = await response.json();
-            const puData = allData[`PU_${puNumber}`];
-            const SkidData = allData[`PatientSkid`];
-            recordedData.push({
-                timestamp: new Date().toISOString(),
-                Qperm: puData.Qperm,
-                Qdilute: puData.Qdilute,
-                Qdrain: puData.Qdrain,
-                Qrecirc: puData.Qrecirc,
-                QdrainEDI: puData.QdrainEDI,
-                Pro: puData.Pro,
-                Pdilute: puData.Pdilute,
-                Pretentate: puData.Pretentate,
-                MV02_sp: puData.MV02_sp,
-                MV03_sp: puData.MV03_sp,
-                MV04_sp: puData.MV04_sp,
-                MV05_sp: puData.MV05_sp,
-                MV06_sp: puData.MV06_sp,
-                MV07_sp: puData.MV07_sp,
-                MV08_sp: puData.MV08_sp,
-                QSkid: SkidData.QSkid,
-            });
-        }, 100);
+  async function fetchPUStatus() {
+    try {
+      const res = await fetch("/api/pu_status");
+      const data = await res.json();
+      const status = data[`PU${puNumber}`] || "Unknown";
+      document.getElementById("currentStatus").textContent = status;
+    } catch (e) {
+      console.error("Error fetching PU status:", e);
+      document.getElementById("currentStatus").textContent = "Error fetching status";
     }
+  }
 
-    async function stopRecording() {
-        clearInterval(recordingInterval);
-        if (recordedData.length > 0) {
-            const csvContent = "data:text/csv;charset=utf-8," +
-                "Timestamp,Qperm,Qdilute,Qdrain,Qrecirc,QdrainEDI,Pro,Pdilute,Pretentate,MV02_sp,MV03_sp,MV04_sp,MV05_sp,MV06_sp,MV07_sp,MV08_sp,QSkid\n" +
-                recordedData.map(row =>
-                    `${row.timestamp},${row.Qperm},${row.Qdilute},${row.Qdrain},${row.Qrecirc},${row.QdrainEDI},${row.Pro},${row.Pdilute},${row.Pretentate},${row.MV02_sp},${row.MV03_sp},${row.MV04_sp},${row.MV05_sp},${row.MV06_sp},${row.MV07_sp},${row.MV08_sp},${row.QSkid}`
-                ).join("\n");
-            const encodedUri = encodeURI(csvContent);
-            const link = document.createElement("a");
-            link.setAttribute("href", encodedUri);
-            link.setAttribute("download", csvFileName);
-            document.body.appendChild(link);
-            link.click();
-        }
-    }
+  function initPlots() {
+    const time0 = [new Date()];
 
-    window.onbeforeunload = function() {
-        if (isRecording) {
-            stopRecording();
-        }
-    };
+    Plotly.newPlot('flow-plot-1', [
+      { x: time0, y: [0], name: 'Qperm', mode: 'lines' },
+      { x: time0, y: [0], name: 'Qdilute', mode: 'lines' }
+    ], {
+      title: 'Qperm and Qdilute',
+      xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
+    });
 
-    const maxPoints = 100;
+    Plotly.newPlot('flow-plot-2', [
+      { x: time0, y: [0], name: 'Qdrain', mode: 'lines' },
+      { x: time0, y: [0], name: 'Qrecirc', mode: 'lines' },
+      { x: time0, y: [0], name: 'QSkid', mode: 'lines' },
+      { x: time0, y: [0], name: 'QdrainEDI', mode: 'lines' }
+    ], {
+      title: 'Other Flows', xaxis: { type: 'date' }, yaxis: { title: 'Flow (L/h)' }
+    });
 
-    function getLastMinuteRange() {
-        const now = new Date();
-        const oneMinuteAgo = new Date(now.getTime() - 60 * 1000);
-        return [oneMinuteAgo, now];
-    }
+    Plotly.newPlot('pressure-plot-1', [
+      { x: time0, y: [0], name: 'Pro', mode: 'lines' },
+      { x: time0, y: [0], name: 'Pretentate', mode: 'lines' }
+    ], {
+      title: 'Pressures 1', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
+    });
 
-    async function updatePlots() {
-        try {
-            const response = await fetch('/monitor');
-            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-            const allData = await response.json();
-            const puData = allData[`PU_${puNumber}`];
-            const SkidData = allData[`PatientSkid`];
+    Plotly.newPlot('pressure-plot-2', [
+      { x: time0, y: [0], name: 'Pdilute', mode: 'lines' }
+    ], {
+      title: 'Pdilute Pressure', xaxis: { type: 'date' }, yaxis: { title: 'Pressure (bar)' }
+    });
 
-            const timestamp = new Date(puData.timestamp);
-            Plotly.extendTraces('flow-plot-1', {
-                x: [[timestamp], [timestamp]],
-                y: [[puData.Qperm], [puData.Qdilute]]
-            }, [0, 1], maxPoints);
+    Plotly.newPlot('MV02_sp-plot', [
+      { x: time0, y: [0], name: 'MV02_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV02', mode: 'lines' }
+    ], {
+      title: 'MV02: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+    });
 
-            Plotly.extendTraces('flow-plot-2', {
-                x: [[timestamp], [timestamp], [timestamp], [timestamp]],
-                y: [[puData.Qdrain], [puData.Qrecirc], [SkidData.QSkid], [puData.QdrainEDI]]
-            }, [0, 1, 2, 3], maxPoints);
+    Plotly.newPlot('MV03_sp-plot', [
+      { x: time0, y: [0], name: 'MV03_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV03', mode: 'lines' }
+    ], {
+      title: 'MV03: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+    });
 
-            Plotly.extendTraces('pressure-plot-1', {
-                x: [[timestamp], [timestamp]],
-                y: [[puData.Pro], [puData.Pretentate]]
-            }, [0, 1], maxPoints);
+    Plotly.newPlot('MV04_sp-05-plot', [
+      { x: time0, y: [0], name: 'MV04_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV04', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV05_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV05', mode: 'lines' }
+    ], {
+      title: 'MV04 & MV05: Setpoints and Actuals', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+    });
 
-            Plotly.extendTraces('pressure-plot-2', {
-                x: [[timestamp]],
-                y: [[puData.Pdilute]]
-            }, [0], maxPoints);
+    Plotly.newPlot('MV06_sp-plot', [
+      { x: time0, y: [0], name: 'MV06_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV06', mode: 'lines' }
+    ], {
+      title: 'MV06: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+    });
 
-            Plotly.extendTraces('MV02_sp-plot', { x: [[timestamp]], y: [[puData.MV02_sp]] }, [0], maxPoints);
-            Plotly.extendTraces('MV03_sp-plot', { x: [[timestamp]], y: [[puData.MV03_sp]] }, [0], maxPoints);
-            Plotly.extendTraces('MV04_sp-05-plot', {
-                x: [[timestamp], [timestamp]],
-                y: [[puData.MV04_sp], [puData.MV05_sp]]
-            }, [0, 1], maxPoints);
-            Plotly.extendTraces('MV06_sp-plot', { x: [[timestamp]], y: [[puData.MV06_sp]] }, [0], maxPoints);
-            Plotly.extendTraces('MV07_sp-plot', { x: [[timestamp]], y: [[puData.MV07_sp]] }, [0], maxPoints);
-            Plotly.extendTraces('MV08_sp-plot', { x: [[timestamp]], y: [[puData.MV08_sp]] }, [0], maxPoints);
+    Plotly.newPlot('MV07_sp-plot', [
+      { x: time0, y: [0], name: 'MV07_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV07', mode: 'lines' }
+    ], {
+      title: 'MV07: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+    });
 
-            const range = getLastMinuteRange();
-            const plotIds = ['flow-plot-1', 'flow-plot-2', 'pressure-plot-1', 'pressure-plot-2', 'MV02_sp-plot', 'MV03_sp-plot', 'MV04_sp-05-plot', 'MV06_sp-plot', 'MV07_sp-plot', 'MV08_sp-plot'];
-            // plotIds.forEach(id => {
-            //     Plotly.relayout(id, { 'xaxis.range': range });
-            // });
-        } catch (error) {
-            console.error("Error updating plots:", error);
-        }
-    }
+    Plotly.newPlot('MV08_sp-plot', [
+      { x: time0, y: [0], name: 'MV08_sp', mode: 'lines' },
+      { x: time0, y: [0], name: 'MV08', mode: 'lines' }
+    ], {
+      title: 'MV08: Setpoint vs Actual', xaxis: { type: 'date' }, yaxis: { range: [0, 100] }
+    });
 
-    async function fetchPUStatus() {
-        try {
-            const response = await fetch("/api/pu_status");
-            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
-            const data = await response.json();
-            const status = data[`PU${puNumber}`] || "Unknown";
-            document.getElementById("currentStatus").textContent = status;
-        } catch (error) {
-            console.error("Error fetching PU status:", error);
-            document.getElementById("currentStatus").textContent = "Error fetching status";
-        }
-    }
+    setInterval(updatePlots, 500);
+  }
 
-    function initPlots() {
-        const time0 = [new Date()];
-
-        Plotly.newPlot('flow-plot-1', [
-            { x: time0, y: [0], name: 'Qperm', mode: 'lines', line: { color: 'blue' } },
-            { x: time0, y: [0], name: 'Qdilute', mode: 'lines', line: { color: 'green' } }
-        ], {
-            title: 'Qperm and Qdilute Flow Rates Over Time',
-            xaxis: { title: 'Time', type: 'date' },
-            yaxis: { title: 'Flow (L/h)' }
-        });
-
-        Plotly.newPlot('flow-plot-2', [
-            { x: time0, y: [0], name: 'Qdrain', mode: 'lines', line: { color: 'red' } },
-            { x: time0, y: [0], name: 'Qrecirc', mode: 'lines', line: { color: 'orange' } },
-            { x: time0, y: [0], name: 'QSkid', mode: 'lines', line: { color: 'green' } },
-            { x: time0, y: [0], name: 'QdrainEDI', mode: 'lines', line: { color: 'blue' } }
-        ], {
-            title: 'Qdrain, Qrecirc, Qskid and QdrainEDI Flow Rates Over Time',
-            xaxis: { title: 'Time', type: 'date' },
-            yaxis: { title: 'Flow (L/h)' }
-        });
-
-        Plotly.newPlot('pressure-plot-1', [
-            { x: time0, y: [0], name: 'Pro', mode: 'lines', line: { color: 'purple' } },
-            { x: time0, y: [0], name: 'Pretentate', mode: 'lines', line: { color: 'gray' } }
-        ], {
-            title: 'Pro and Pretentate Pressure Over Time',
-            xaxis: { title: 'Time', type: 'date' },
-            yaxis: { title: 'Pressure (bar)' }
-        });
-
-        Plotly.newPlot('pressure-plot-2', [
-            { x: time0, y: [0], name: 'Pdilute', mode: 'lines', line: { color: 'teal' } }
-        ], {
-            title: 'Pdilute Pressure Over Time',
-            xaxis: { title: 'Time', type: 'date' },
-            yaxis: { title: 'Pressure (bar)' }
-        });
-
-        Plotly.newPlot('MV02_sp-plot', [{
-            x: time0, y: [0], name: 'MV02_sp', mode: 'lines'
-        }], {
-            title: 'MV02_sp (%)', yaxis: {  }, xaxis: { type: 'date' }
-        });
-
-        Plotly.newPlot('MV03_sp-plot', [{
-            x: time0, y: [0], name: 'MV03_sp', mode: 'lines'
-        }], {
-            title: 'MV03_sp (%)', yaxis: { }, xaxis: { type: 'date' }
-        });
-
-        Plotly.newPlot('MV04_sp-05-plot', [
-            { x: time0, y: [0], name: 'MV04_sp', mode: 'lines' },
-            { x: time0, y: [0], name: 'MV05_sp', mode: 'lines' }
-        ], {
-            title: 'MV04_sp + MV05_sp (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
-        });
-
-        Plotly.newPlot('MV06_sp-plot', [{
-            x: time0, y: [0], name: 'MV06_sp', mode: 'lines'
-        }], {
-            title: 'MV06_sp (%)', yaxis: { }, xaxis: { type: 'date' }
-        });
-
-        Plotly.newPlot('MV07_sp-plot', [{
-            x: time0, y: [0], name: 'MV07_sp', mode: 'lines'
-        }], {
-            title: 'MV07_sp (%)', yaxis: { }, xaxis: { type: 'date' }
-        });
-
-        Plotly.newPlot('MV08_sp-plot', [{
-            x: time0, y: [0], name: 'MV08_sp', mode: 'lines'
-        }], {
-            title: 'MV08_sp (%)', yaxis: { range: [0, 100] }, xaxis: { type: 'date' }
-        });
-
-        setInterval(updatePlots, 500);
-    }
-
-    window.onload = function() {
-        initPlots();
-        fetchPUStatus();
-        setInterval(fetchPUStatus, 5000); // Update status every 5 seconds
-    };
+  window.onload = function() {
+    initPlots();
+    fetchPUStatus();
+    setInterval(fetchPUStatus, 5000);
+  };
 </script>
 </body>
 </html>
