From 1bb0c145bca1a0be9c482925a4f0af7e51a2ce41 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Mon, 10 Nov 2025 16:14:35 +0000
Subject: [PATCH 01/36] update

---
 node-red/projects/dashboard/flows.json | 1688 ++++--------------------
 1 file changed, 228 insertions(+), 1460 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index e15e8b231..6cbf85a69 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -127,14 +127,6 @@
         "info": "",
         "env": []
     },
-    {
-        "id": "83b2474231efac73",
-        "type": "tab",
-        "label": "Cron",
-        "disabled": true,
-        "info": "",
-        "env": []
-    },
     {
         "id": "4ed26b8b.253504",
         "type": "subflow",
@@ -222,76 +214,6 @@
         "env": [],
         "color": "#DDAA99"
     },
-    {
-        "id": "910e195536aea223",
-        "type": "group",
-        "z": "83b2474231efac73",
-        "style": {
-            "stroke": "#999999",
-            "stroke-opacity": "1",
-            "fill": "none",
-            "fill-opacity": "1",
-            "label": true,
-            "label-position": "nw",
-            "color": "#a4a4a4"
-        },
-        "nodes": [
-            "a197bfa71c1761b4",
-            "495e1733d60d5651",
-            "0fdba9b9b11427db",
-            "019662c5bf05e430",
-            "8dc5b8c9bfd7cc87",
-            "1c782af30d1ff770",
-            "5f5dec5ac53119ae",
-            "61dde05d9a3f805e",
-            "b17728471bdfc61e",
-            "e4719fcedaa61149",
-            "9301eaa353ece507",
-            "67bcd7bd5a4c38cc",
-            "2a55ae214f1e7273",
-            "8447c9830c3aed1e"
-        ],
-        "x": -6,
-        "y": 19,
-        "w": 1412,
-        "h": 577
-    },
-    {
-        "id": "751429d7682830be",
-        "type": "group",
-        "z": "83b2474231efac73",
-        "style": {
-            "stroke": "#999999",
-            "stroke-opacity": "1",
-            "fill": "none",
-            "fill-opacity": "1",
-            "label": true,
-            "label-position": "nw",
-            "color": "#a4a4a4"
-        },
-        "nodes": [
-            "caf377d323526d14",
-            "316dae6f231575b7",
-            "9e169af039fc8031",
-            "1bc303a19fc9e38b",
-            "ff83a2795f988098",
-            "fd3ae27267703c27",
-            "527165cd7171fe26",
-            "50629a570b41196e",
-            "0aef9a09d59e574c",
-            "a9701575d8df4ce1",
-            "60d1ad2a7e54e60e",
-            "f8df009e737eb044",
-            "e6eb3b16a1d6bf22",
-            "1997fd46811f0331",
-            "5f091b11b5c9fa40",
-            "0650e037776b3d8a"
-        ],
-        "x": 14,
-        "y": 739,
-        "w": 1812,
-        "h": 522
-    },
     {
         "id": "f591255fbfc6c466",
         "type": "group",
@@ -455,7 +377,7 @@
         ],
         "x": 14,
         "y": 659,
-        "w": 552,
+        "w": 372,
         "h": 142
     },
     {
@@ -478,7 +400,7 @@
         ],
         "x": 14,
         "y": 819,
-        "w": 352,
+        "w": 372,
         "h": 142
     },
     {
@@ -499,9 +421,9 @@
             "0d10e66bb2b9d1cc",
             "53516cda8e4f5a3c"
         ],
-        "x": 434,
+        "x": 414,
         "y": 819,
-        "w": 372,
+        "w": 352,
         "h": 142
     },
     {
@@ -550,8 +472,8 @@
             "61ebceb724041fb2"
         ],
         "x": 994,
-        "y": 339,
-        "w": 392,
+        "y": 499,
+        "w": 412,
         "h": 142
     },
     {
@@ -573,7 +495,7 @@
             "7d1f9414be49d7c3"
         ],
         "x": 994,
-        "y": 519,
+        "y": 659,
         "w": 412,
         "h": 142
     },
@@ -593,12 +515,13 @@
         "nodes": [
             "f7c18ab2aa687120",
             "ede7a86fd97b5e1b",
-            "af8ce4702c170449"
+            "af8ce4702c170449",
+            "9249e16ed7ae4929"
         ],
         "x": 14,
         "y": 979,
-        "w": 412,
-        "h": 142
+        "w": 562,
+        "h": 162
     },
     {
         "id": "979647e2e34284fb",
@@ -653,9 +576,9 @@
             "59ec9623add53a47",
             "750a1061c84bdae2"
         ],
-        "x": 874,
-        "y": 759,
-        "w": 332,
+        "x": 994,
+        "y": 819,
+        "w": 412,
         "h": 142
     },
     {
@@ -1002,115 +925,6 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "c8bb5168bda76add",
-        "type": "ui-page",
-        "d": true,
-        "name": "Cron Experiment",
-        "ui": "e6ae26617c24c3ea",
-        "path": "/plots",
-        "icon": "sync",
-        "layout": "grid",
-        "theme": "f7770f0b818c3a67",
-        "breakpoints": [
-            {
-                "name": "Default",
-                "px": "0",
-                "cols": "3"
-            },
-            {
-                "name": "Tablet",
-                "px": "576",
-                "cols": "6"
-            },
-            {
-                "name": "Small Desktop",
-                "px": "768",
-                "cols": "9"
-            },
-            {
-                "name": "Desktop",
-                "px": "1024",
-                "cols": "12"
-            }
-        ],
-        "order": 8,
-        "className": "",
-        "visible": "true",
-        "disabled": "false"
-    },
-    {
-        "id": "4a8738206c62b02e",
-        "type": "ui-group",
-        "name": "Plots",
-        "page": "c8bb5168bda76add",
-        "width": 6,
-        "height": 1,
-        "order": 1,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "7edf5f14f6ca0bdd",
-        "type": "ui-group",
-        "name": "Feed",
-        "page": "c8bb5168bda76add",
-        "width": 6,
-        "height": 1,
-        "order": 2,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "e41267c4a14ba4af",
-        "type": "ui-spacer",
-        "group": "4a8738206c62b02e",
-        "name": "spacer",
-        "tooltip": "",
-        "order": 4,
-        "width": "6",
-        "height": 1,
-        "className": ""
-    },
-    {
-        "id": "9d9ac37fd36c358e",
-        "type": "ui-spacer",
-        "group": "4a8738206c62b02e",
-        "name": "spacer",
-        "tooltip": "",
-        "order": 7,
-        "width": "6",
-        "height": 1,
-        "className": ""
-    },
-    {
-        "id": "db02fe254c34125f",
-        "type": "ui-spacer",
-        "group": "4a8738206c62b02e",
-        "name": "spacer",
-        "tooltip": "",
-        "order": 10,
-        "width": "6",
-        "height": 1,
-        "className": ""
-    },
-    {
-        "id": "ff024f7a460585b4",
-        "type": "ui-spacer",
-        "group": "4a8738206c62b02e",
-        "name": "spacer",
-        "tooltip": "",
-        "order": 1,
-        "width": "6",
-        "height": 1,
-        "className": ""
-    },
     {
         "id": "f22f627015431032",
         "type": "ui-page",
@@ -1375,20 +1189,6 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "518a4242f548c1f2",
-        "type": "ui-group",
-        "name": "links",
-        "page": "f8dd620721c6d70b",
-        "width": "12",
-        "height": 1,
-        "order": 3,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "bcc78241b99ba27f",
         "type": "ui-page",
@@ -2231,9 +2031,9 @@
         "name": "body",
         "order": 1,
         "width": "12",
-        "height": "8",
+        "height": "10",
         "head": "",
-        "format": "<template>\n    <v-container>\n      <v-row>\n        <!-- First Row: Larger cards with icon centered above title -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"preview\"\n            class=\"text-center py-2\"\n            variant=\"flat\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-eye</v-icon>\n            <v-card-title class=\"text-h6\">Launch the Preview</v-card-title>\n            <v-card-text>Access a real-time, high-resolution preview to inspect the contents of your current water sample.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"metadata\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-play-circle</v-icon>\n            <v-card-title class=\"text-h6\">Start Acquisition</v-card-title>\n            <v-card-text>Start a new acquisition process to continuously collect images and metadata from your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"visualization\"\n            target=\"_blank\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-database-search</v-icon>\n            <v-card-title class=\"text-h6\">Explore Your Data</v-card-title>\n            <v-card-text>Open the data explorer to review, categorize, and interpret all previously captured sample information.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Second Row: Standard size cards -->\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"/ps/docs/operation/protocol-v4.pdf\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-book-open-variant</v-icon>\n              Learn the Basics\n            </v-card-title>\n            <v-card-text>Find detailed instructions on using your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"http://pkscope-rich-kettle-10463.local/admin/grafana/d/host-summary/host-summary?orgId=1&from=now-5m&to=now&timezone=browser&var-DS_PROMETHEUS=PBFA97CFB590B2093&var-job=node-exporter&var-node=host.docker.internal:9100&var-diskdevices=%5Ba-z%5D%2B%7Cnvme%5B0-9%5D%2Bn%5B0-9%5D%2B%7Cmmcblk%5B0-9%5D%2B&refresh=5s\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-speedometer</v-icon>\n              Monitoring\n            </v-card-title>\n            <v-card-text>Keep track of system status and performance metrics.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"calibration\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-tune</v-icon>\n              Calibration\n            </v-card-title>\n            <v-card-text>Adjust and verify settings for consistent results.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Third Row: Standard size cards -->\n      <v-row>\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-cube-outline</v-icon>\n              Model of your machine\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.hardware_version }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"3\" v-if=\"msg.payload.machine_info.serial_number\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-barcode-scan</v-icon>\n              Serial number\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.serial_number }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-label-outline</v-icon>\n              Name of your machine\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.machine_name }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-code-tags</v-icon>\n              Software version\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.software_version }}</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n    </v-container>\n</template>\n",
+        "format": "<template>\n    <v-container>\n      <v-row>\n        <!-- First Row: Larger cards with icon centered above title -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"preview\"\n            class=\"text-center py-2\"\n            variant=\"flat\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-eye</v-icon>\n            <v-card-title class=\"text-h6\">Launch the Preview</v-card-title>\n            <v-card-text>Access a real-time, high-resolution preview to inspect the contents of your current water sample.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"metadata\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-play-circle</v-icon>\n            <v-card-title class=\"text-h6\">Start Acquisition</v-card-title>\n            <v-card-text>Start a new acquisition process to continuously collect images and metadata from your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"visualization\"\n            target=\"_blank\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-database-search</v-icon>\n            <v-card-title class=\"text-h6\">Explore Your Data</v-card-title>\n            <v-card-text>Open the data explorer to review, categorize, and interpret all previously captured sample information.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Second Row: Standard size cards -->\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"/ps/docs/operation/protocol-v4.pdf\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-book-open-variant</v-icon>\n              Learn the Basics\n            </v-card-title>\n            <v-card-text>Find detailed instructions on using your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"http://pkscope-rich-kettle-10463.local/admin/grafana/d/host-summary/host-summary?orgId=1&from=now-5m&to=now&timezone=browser&var-DS_PROMETHEUS=PBFA97CFB590B2093&var-job=node-exporter&var-node=host.docker.internal:9100&var-diskdevices=%5Ba-z%5D%2B%7Cnvme%5B0-9%5D%2Bn%5B0-9%5D%2B%7Cmmcblk%5B0-9%5D%2B&refresh=5s\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-speedometer</v-icon>\n              Monitoring\n            </v-card-title>\n            <v-card-text>Keep track of system status and performance metrics.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"calibration\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-tune</v-icon>\n              Calibration\n            </v-card-title>\n            <v-card-text>Adjust and verify settings for consistent results.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Third Row: Standard size cards -->\n      <v-row>\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-cube-outline</v-icon>\n              Model of your machine\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.hardware_version }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"3\" v-if=\"msg.payload.machine_info.serial_number\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-barcode-scan</v-icon>\n              Serial number\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.serial_number }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-label-outline</v-icon>\n              Name of your machine\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.machine_name }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-code-tags</v-icon>\n              Software version\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.software_version }}</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n      \n\n\n      <!-- 4th Row: Standard size cards -->\n\n    <v-row>\n      <!-- Image acquired -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Image acquired</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Object segmented -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Object segmented</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage used inline -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center flex-grow-1 mr-4\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-sd</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium mr-2\">Storage</span>\n            <v-progress-linear\n              :model-value=\"msg.payload.storage_percent_used\"\n              height=\"12\"\n              rounded\n              class=\"flex-grow-1\"\n              :color=\"msg.payload.storage_percent_used > 90 ? 'error'\n                : msg.payload.storage_percent_used > 70 ? 'warning'\n                : 'success'\"\n            ></v-progress-linear>\n          </div>\n          <div class=\"text-h6 font-weight-bold\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n        </v-card>\n      </v-col>\n    </v-row>\n\n\n    </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2314,7 +2114,8 @@
         "y": 40,
         "wires": [
             [
-                "abe86c4e9dedb557"
+                "abe86c4e9dedb557",
+                "605bf275a4d80952"
             ]
         ]
     },
@@ -2390,10 +2191,59 @@
         "y": 140,
         "wires": [
             [
+                "39c370d8a50f3acc",
+                "3580c4605b01c2b0"
+            ]
+        ]
+    },
+    {
+        "id": "3580c4605b01c2b0",
+        "type": "debug",
+        "z": "1b667c6443413ced",
+        "name": "debug 7",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 380,
+        "y": 260,
+        "wires": []
+    },
+    {
+        "id": "605bf275a4d80952",
+        "type": "storage info",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "x": 90,
+        "y": 340,
+        "wires": [
+            [
+                "ecb17cf4ccad8d7b",
                 "39c370d8a50f3acc"
             ]
         ]
     },
+    {
+        "id": "ecb17cf4ccad8d7b",
+        "type": "debug",
+        "z": "1b667c6443413ced",
+        "name": "debug 8",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 360,
+        "y": 400,
+        "wires": []
+    },
     {
         "id": "a57a165cd0ce511b",
         "type": "ui-template",
@@ -2406,7 +2256,7 @@
         "width": "7",
         "height": "18",
         "head": "",
-        "format": "  <iframe \n    src=\"/preview\" \n>\n  </iframe>\n  <style>\n    iframe {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border: none;\n    }\n  </style>",
+        "format": "  <iframe src=\"/preview\" >\n  </iframe>\n  <style>\n    iframe {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border: none;\n    }\n  </style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2762,28 +2612,10 @@
         "y": 320,
         "wires": [
             [
-                "3fa4274844a4e1f8",
                 "f514a138d38d3c61"
             ]
         ]
     },
-    {
-        "id": "3fa4274844a4e1f8",
-        "type": "debug",
-        "z": "ab58b3fd0e6bcd77",
-        "name": "debug 10",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 220,
-        "y": 320,
-        "wires": []
-    },
     {
         "id": "349d0f7644f26a62",
         "type": "ui-template",
@@ -3357,7 +3189,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\"\n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_interframe_volume\"\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_interframe_volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"acq_progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(acq_duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",\n      acq_progression: 0,\n      acq_duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n    };\n  },\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.calibration_sensor_width !== undefined) this.calibration_sensor_width = Number(p.calibration_sensor_width);\n        if (p.calibration_sensor_height !== undefined) this.calibration_sensor_height = Number(p.calibration_sensor_height);\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n          if (s.includes(\"started\") || s.includes(\"running\") || s.includes(\"capturing\")) {\n            this.resetProgress();\n            this.acq_status = \"on\";\n          } else if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\") || s.includes(\"not capturing\")) {\n            this.acq_status = \"off\";\n          }\n        }\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n    resetProgress() { this.acq_progression = 0; this.acq_duration_left = 0; this.lastUpdateTime = Date.now(); },\n    incrementAcqId() { const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\"); this.acq_id = next; this.sendUpdate(); },\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0) / 1000;\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n      this.updateProgress();\n      this.sendUpdate();\n    },\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.acq_progression = Math.min(100, this.acq_progression + (elapsed / this.acq_nb_frame) * 100);\n          this.acq_duration_left = ((100 - this.acq_progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"on\") this.resetProgress();\n      if (value === \"off\") this.incrementAcqId();\n      if (typeof this.send === \"function\") this.send({ topic: \"imager/image\", payload: { status: value } });\n    },\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const html = `\n        <p><b>Volume Imaged</b> represents the total fluid volume optically captured.</p>\n        <hr>\n        <ul>\n          <li><b>Sensor width:</b> ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm</li>\n          <li><b>Sensor height:</b> ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm</li>\n          <li>\n            <b>Flowcell thickness:</b>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n            <a href=\"hardware\" target=\"_blank\" style=\"margin-left:6px;\">\n              If different, modify your check hardware here.\n            </a>\n          </li>\n        </ul>\n\n\n        <p><b>Step-by-step calculation:</b></p>\n        <ol>\n          <li>Area per image = width × height = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} = ${Math.round(area)} µm²</li>\n          <li>Volume per image = area × thickness = ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} = ${Math.round(area * this.acq_flowcell_thickness)} µm³</li>\n          <li>Convert µm³ → mL: divide by 1e12 → ${this.fmt(this.frame_volume_ml)} mL per image</li>\n          <li>Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL = <b>${this.fmt(this.acq_imaged_volume)} mL</b></li>\n        </ol>`;\n      this.openHint(\"Volume Imaged\", html);\n    },\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n    openHint(title, text) { this.hintTitle = title; this.hintText = text; this.hintDialog = true; },\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          acq_progression: this.acq_progression,\n          acq_duration_left: this.acq_duration_left,\n          acq_status: this.acq_status,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\"\n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_interframe_volume\"\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_interframe_volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"acq_progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(acq_duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",\n      acq_progression: 0,\n      acq_duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n    };\n  },\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.calibration_sensor_width !== undefined) this.calibration_sensor_width = Number(p.calibration_sensor_width);\n        if (p.calibration_sensor_height !== undefined) this.calibration_sensor_height = Number(p.calibration_sensor_height);\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n          if (s.includes(\"started\") || s.includes(\"running\") || s.includes(\"capturing\")) {\n            this.resetProgress();\n            this.acq_status = \"on\";\n          } else if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\") || s.includes(\"not capturing\")) {\n            this.acq_status = \"off\";\n          }\n        }\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n    resetProgress() { this.acq_progression = 0; this.acq_duration_left = 0; this.lastUpdateTime = Date.now(); },\n    incrementAcqId() { const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\"); this.acq_id = next; this.sendUpdate(); },\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0) / 1000;\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n      this.updateProgress();\n      this.sendUpdate();\n    },\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.acq_progression = Math.min(100, this.acq_progression + (elapsed / this.acq_nb_frame) * 100);\n          this.acq_duration_left = ((100 - this.acq_progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"on\") this.resetProgress();\n      if (value === \"off\") this.incrementAcqId();\n      if (typeof this.send === \"function\") this.send({ topic: \"imager/image\", payload: { status: value } });\n    },\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n        </p>\n      \n        <v-divider class=\"my-3\"></v-divider>\n      \n        <ul class=\"ml-4\">\n          <li>\n            <strong>Sensor width:</strong>\n            {{ Math.round(calibration_sensor_width) }} px → {{ Math.round(sensor_width_um) }} µm\n          </li>\n          <li>\n            <strong>Sensor height:</strong>\n            {{ Math.round(calibration_sensor_height) }} px → {{ Math.round(sensor_height_um) }} µm\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            {{ Math.round(acq_flowcell_thickness) }} µm\n            <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n              (Check or modify in hardware settings)\n            </a>\n          </li>\n        </ul>\n      \n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n      \n        <ol class=\"ml-4\">\n          <li>\n            Area per image = width × height =\n            {{ Math.round(sensor_width_um) }} × {{ Math.round(sensor_height_um) }} =\n            {{ Math.round(area) }} µm²\n          </li>\n          <li>\n            Volume per image = area × thickness =\n            {{ Math.round(area) }} × {{ Math.round(acq_flowcell_thickness) }} =\n            {{ Math.round(area * acq_flowcell_thickness) }} µm³\n          </li>\n          <li>\n            Convert µm³ → mL: divide by 1e12 →\n            {{ fmt(frame_volume_ml) }} mL per image\n          </li>\n          <li>\n            Total = {{ acq_nb_frame }} × {{ fmt(frame_volume_ml) }} mL =\n            <strong>{{ fmt(acq_imaged_volume) }} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n      this.openHint(\"Volume Imaged\", html);\n    },\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n    openHint(title, text) { this.hintTitle = title; this.hintText = text; this.hintDialog = true; },\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          acq_progression: this.acq_progression,\n          acq_duration_left: this.acq_duration_left,\n          acq_status: this.acq_status,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3546,7 +3378,8 @@
         "y": 200,
         "wires": [
             [
-                "aa6924c7e0aff26c"
+                "aa6924c7e0aff26c",
+                "b373abca8b67ca64"
             ]
         ]
     },
@@ -3711,6 +3544,23 @@
             ]
         ]
     },
+    {
+        "id": "b373abca8b67ca64",
+        "type": "debug",
+        "z": "35d7387466dd0bc0",
+        "name": "debug 11",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 280,
+        "y": 280,
+        "wires": []
+    },
     {
         "id": "250979b4672d81b6",
         "type": "ui-event",
@@ -3772,7 +3622,6 @@
         "wires": [
             [
                 "d4129bf3f5622aa6",
-                "33c0d1b8251b5d00",
                 "921be0438de344ac"
             ]
         ]
@@ -3782,7 +3631,7 @@
         "type": "ui-table",
         "z": "0fd76ac156d78937",
         "group": "bfd4acb7b243514f",
-        "name": "",
+        "name": "List of acq",
         "label": "",
         "order": 2,
         "width": 0,
@@ -3893,7 +3742,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1290,
+        "x": 1510,
         "y": 160,
         "wires": [
             []
@@ -3917,7 +3766,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1300,
+        "x": 1520,
         "y": 40,
         "wires": [
             []
@@ -3930,18 +3779,18 @@
         "group": "bfd4acb7b243514f",
         "page": "",
         "ui": "",
-        "name": "List of Acquisitions",
+        "name": "Dialog",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n    };\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.payload) return;\n        this.payload = msg.payload;\n        this.showDialog = msg.payload.is_segmented === false;\n      },\n    },\n  },\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n          },\n          // 👇 Inject dataset info cleanly under a new key\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.sample_operator,\n            image_acquired_count: this.payload.acq_nb_frame,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
+        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: null, // will be read from payload\n    };\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.payload) return;\n        this.payload = msg.payload;\n        this.showDialog = msg.payload.is_segmented === false;\n\n        // Read process_min_ESD if defined in payload\n        if (typeof msg.payload.process_min_ESD !== \"undefined\") {\n          this.process_min_ESD = msg.payload.process_min_ESD;\n        } else {\n          this.process_min_ESD = 0; // default fallback\n        }\n      },\n    },\n  },\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD, // 👈 taken from payload or user edit\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.sample_operator,\n            image_acquired_count: this.payload.acq_nb_frame,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 690,
+        "x": 850,
         "y": 140,
         "wires": [
             [
@@ -3963,7 +3812,7 @@
         "correl": "",
         "expiry": "",
         "broker": "8dc3722c.06efa8",
-        "x": 990,
+        "x": 1090,
         "y": 140,
         "wires": []
     },
@@ -3984,13 +3833,13 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 850,
+        "x": 970,
         "y": 140,
         "wires": [
             [
                 "4bdd8a4afcdb704b",
-                "33c0d1b8251b5d00",
-                "f8f4b34842d35713"
+                "f8f4b34842d35713",
+                "621e28a4a222b99a"
             ]
         ]
     },
@@ -4007,10 +3856,11 @@
         "rap": false,
         "inputs": 0,
         "x": 100,
-        "y": 200,
+        "y": 260,
         "wires": [
             [
-                "33c0d1b8251b5d00"
+                "33c0d1b8251b5d00",
+                "c601b4ae4a8fc401"
             ]
         ]
     },
@@ -4032,8 +3882,8 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1050,
-        "y": 200,
+        "x": 530,
+        "y": 240,
         "wires": [
             []
         ]
@@ -4061,7 +3911,7 @@
         "wires": [
             [],
             [
-                "26074b8d8ad8abf9"
+                "89d1bfb7839c2077"
             ]
         ]
     },
@@ -4070,15 +3920,15 @@
         "type": "function",
         "z": "0fd76ac156d78937",
         "name": "set seg_params",
-        "func": "if (msg.topic) {\n    global.set(\"seg_project_name\", msg.payload.dataset.project_name);\n    global.set(\"seg_sample_id\", msg.payload.dataset.sample_id);\n    global.set(\"seg_acquisition_id\", msg.payload.dataset.acquisition_id);\n    global.set(\"seg_path\", msg.payload.dataset.path);\n}\nreturn msg;\n",
+        "func": "if (msg.topic) {\n    global.set(\"seg_project_name\", msg.payload.dataset.project_name);\n    global.set(\"seg_sample_id\", msg.payload.dataset.sample_id);\n    global.set(\"seg_acquisition_id\", msg.payload.dataset.acquisition_id);\n    global.set(\"seg_path\", msg.payload.dataset.path);\n    global.set(\"process_min_ESD\", msg.payload.settings.process_min_ESD);\n}\nreturn msg;\n",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 1020,
-        "y": 80,
+        "x": 1120,
+        "y": 100,
         "wires": [
             []
         ]
@@ -4096,7 +3946,7 @@
         "finalize": "",
         "libs": [],
         "x": 120,
-        "y": 260,
+        "y": 200,
         "wires": [
             [
                 "33c0d1b8251b5d00"
@@ -4104,21 +3954,74 @@
         ]
     },
     {
-        "id": "77bb783e65c3ffd6",
-        "type": "ui-event",
-        "z": "14f8c9b5ce1235cc",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 80,
-        "y": 40,
+        "id": "89d1bfb7839c2077",
+        "type": "function",
+        "z": "0fd76ac156d78937",
+        "name": "add process_min_ESD",
+        "func": "// Ensure msg.payload and msg.payload.settings exist\nmsg.payload = msg.payload || {};\n\n// Read the variable from global context\nconst process_min_ESD = global.get(\"process_min_ESD\");\n\n// Add it to the payload settings\nmsg.payload.process_min_ESD = process_min_ESD;\n\n// Return the modified message\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 680,
+        "y": 140,
         "wires": [
             [
-                "55814595d9207e95"
+                "26074b8d8ad8abf9"
             ]
         ]
     },
     {
-        "id": "55814595d9207e95",
+        "id": "c601b4ae4a8fc401",
+        "type": "debug",
+        "z": "0fd76ac156d78937",
+        "name": "debug 5",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 500,
+        "y": 300,
+        "wires": []
+    },
+    {
+        "id": "621e28a4a222b99a",
+        "type": "debug",
+        "z": "0fd76ac156d78937",
+        "name": "debug 6",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1100,
+        "y": 180,
+        "wires": []
+    },
+    {
+        "id": "77bb783e65c3ffd6",
+        "type": "ui-event",
+        "z": "14f8c9b5ce1235cc",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "55814595d9207e95"
+            ]
+        ]
+    },
+    {
+        "id": "55814595d9207e95",
         "type": "switch",
         "z": "14f8c9b5ce1235cc",
         "name": "msg.topic === \"$pageview\"",
@@ -4217,6 +4120,7 @@
         "id": "f530763503fdc7d1",
         "type": "mqtt in",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "name": "",
         "topic": "status/#",
@@ -4238,6 +4142,7 @@
         "id": "e5a0432fc7b35b29",
         "type": "function",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "name": "Count objects segmented",
         "func": "var objectCount = global.get('objectCount') || 0;\n\nif (msg.payload.status === 'Done') {\n    msg.payload.objectCount = objectCount;\n    objectCount=0;\n    }\nelse if (msg.topic === 'status/segmenter/metric') {\n    objectCount++;\n}\n\nglobal.set('objectCount', objectCount);\n\nreturn msg;",
@@ -4259,6 +4164,7 @@
         "id": "ba8045b3448d5bbf",
         "type": "switch",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "name": "msg.payload.metadata.equivalent_diameter is not null",
         "property": "payload.metadata.equivalent_diameter",
@@ -4283,6 +4189,7 @@
         "id": "f0313532a2b77337",
         "type": "switch",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "name": "",
         "property": "topic",
@@ -4302,8 +4209,7 @@
         "wires": [
             [
                 "e5a0432fc7b35b29",
-                "c6c66ebc50dd5d90",
-                "f6c913298cba35ee"
+                "c6c66ebc50dd5d90"
             ]
         ]
     },
@@ -4311,6 +4217,7 @@
         "id": "e045f6939008f23f",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "bdcb68c6cff2da73",
         "name": "",
@@ -4374,6 +4281,7 @@
         "id": "68fe28f50beb2add",
         "type": "function",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "name": "convert px to um",
         "func": "// Conversion factor from pixels to micrometers (µm)\nconst px_to_um = 0.75;\n\n// Convert relevant measurements\nmsg.payload.metadata.equivalent_diameter = Math.round(msg.payload.metadata.equivalent_diameter * px_to_um);\nmsg.payload.metadata.width = Math.round(msg.payload.metadata.width * px_to_um);\nmsg.payload.metadata.height = Math.round(msg.payload.metadata.height * px_to_um);\nmsg.payload.metadata.area = Math.round(msg.payload.metadata.area * (px_to_um ** 2)); // Area is in square units\nmsg.payload.metadata.area_exc = Math.round(msg.payload.metadata.area_exc * (px_to_um ** 2));\nmsg.payload.metadata.convex_area = Math.round(msg.payload.metadata.convex_area * (px_to_um ** 2));\nmsg.payload.metadata.major = Math.round(msg.payload.metadata.major * px_to_um);\nmsg.payload.metadata.minor = Math.round(msg.payload.metadata.minor * px_to_um);\nmsg.payload.metadata.perim = Math.round(msg.payload.metadata[\"perim.\"] * px_to_um); // Ensure proper key reference\nmsg.payload.metadata.bounding_box_area = Math.round(msg.payload.metadata.bounding_box_area * (px_to_um ** 2));\n\nreturn msg;\n",
@@ -4399,6 +4307,7 @@
         "id": "a20376f0ac08af8e",
         "type": "ui-markdown",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "bdcb68c6cff2da73",
         "name": "Histogram of equivalent_diameter",
@@ -4417,6 +4326,7 @@
         "id": "694187e7d85faec3",
         "type": "ui-markdown",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "bdcb68c6cff2da73",
         "name": "elongation vs. area",
@@ -4435,6 +4345,7 @@
         "id": "693e1ad09770bdf5",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "bdcb68c6cff2da73",
         "name": "elongation vs. area",
@@ -4498,6 +4409,7 @@
         "id": "82a3257cd0a3815d",
         "type": "ui-markdown",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "fa6393a7d7e3b7d7",
         "name": "equivalent_diameter vs. MeanValue",
@@ -4516,6 +4428,7 @@
         "id": "44ef242ece9b6b4b",
         "type": "ui-markdown",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "fa6393a7d7e3b7d7",
         "name": "MeanSaturation vs. MeanValue",
@@ -4534,6 +4447,7 @@
         "id": "7433aae2400b7f78",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "fa6393a7d7e3b7d7",
         "name": "equivalent_diameter vs. MeanValue",
@@ -4597,6 +4511,7 @@
         "id": "a90099cfe7a37a37",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "fa6393a7d7e3b7d7",
         "name": "MeanSaturation vs. MeanValue",
@@ -4660,6 +4575,7 @@
         "id": "df0dcb1175b8bd5f",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "group": "ed357f41cdf951bc",
         "name": "x vs. y",
@@ -4719,26 +4635,11 @@
             []
         ]
     },
-    {
-        "id": "bfcd2b12c9c89c15",
-        "type": "debug",
-        "z": "14f8c9b5ce1235cc",
-        "name": "debug 5",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 600,
-        "y": 200,
-        "wires": []
-    },
     {
         "id": "c6c66ebc50dd5d90",
         "type": "switch",
         "z": "14f8c9b5ce1235cc",
+        "d": true,
         "g": "979647e2e34284fb",
         "name": "",
         "property": "payload.status",
@@ -4756,28 +4657,9 @@
         "x": 430,
         "y": 380,
         "wires": [
-            [
-                "bfcd2b12c9c89c15"
-            ]
+            []
         ]
     },
-    {
-        "id": "f6c913298cba35ee",
-        "type": "debug",
-        "z": "14f8c9b5ce1235cc",
-        "name": "debug 8",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "payload",
-        "targetType": "msg",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 380,
-        "y": 180,
-        "wires": []
-    },
     {
         "id": "64c27d4448d8f79f",
         "type": "ui-event",
@@ -5049,30 +4931,6 @@
             []
         ]
     },
-    {
-        "id": "590ff706a46acf3a",
-        "type": "ui-template",
-        "z": "8018bd5586fd4054",
-        "group": "518a4242f548c1f2",
-        "page": "",
-        "ui": "",
-        "name": "links",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<template>\n    <v-row justify=\"center\" class=\"my-2\">\n      <v-chip\n        size=\"small\"\n        color=\"grey-darken-3\"\n        href=\"https://www.figma.com/design/KXH3qkalr7eeFbyGsutZKt/PlanktoScope-Dashboard-v2?node-id=6-2&m=dev&t=Nn2N1o9OJveQCSco-1\"\n        target=\"_blank\"\n        class=\"mx-2\"\n      >\n        <v-icon color=\"primary\" class=\"mr-1\">mdi-image</v-icon>Figma Design\n      </v-chip>\n      <v-chip\n        size=\"small\"\n        color=\"grey-darken-3\"\n        href=\"https://github.com/PlanktoScope/dashboard/issues/new?template=bug_report.md\"\n        target=\"_blank\"\n        class=\"mx-2\"\n      >\n        <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>Report a Bug\n      </v-chip>\n      <v-chip\n        size=\"small\"\n        color=\"grey-darken-3\"\n        href=\"https://github.com/PlanktoScope/dashboard/issues\"\n        target=\"_blank\"\n        class=\"mx-2\"\n      >\n        <v-icon color=\"orange\" class=\"mr-1\">mdi-information-outline</v-icon>Open\n        issues\n      </v-chip>\n      <v-chip\n        size=\"small\"\n        color=\"grey-darken-3\"\n        href=\"https://github.com/PlanktoScope/dashboard\"\n        target=\"_blank\"\n        class=\"mx-2\"\n      >\n        <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>View on GitHub\n      </v-chip>\n    </v-row>\n</template>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 490,
-        "y": 260,
-        "wires": [
-            []
-        ]
-    },
     {
         "id": "062a3af5e12e8445",
         "type": "ui-template",
@@ -5897,8 +5755,7 @@
         "y": 140,
         "wires": [
             [
-                "b4d023d76ef0504c",
-                "c35c707fc4606403"
+                "b4d023d76ef0504c"
             ]
         ]
     },
@@ -5964,45 +5821,10 @@
         "y": 340,
         "wires": [
             [
-                "1bd39bfcfab012fe",
-                "568563f0ea454a6e"
+                "1bd39bfcfab012fe"
             ]
         ]
     },
-    {
-        "id": "568563f0ea454a6e",
-        "type": "debug",
-        "z": "d5b2c64b84f8ed4f",
-        "name": "debug 6",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 340,
-        "y": 340,
-        "wires": []
-    },
-    {
-        "id": "c35c707fc4606403",
-        "type": "debug",
-        "z": "d5b2c64b84f8ed4f",
-        "name": "debug 7",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 880,
-        "y": 200,
-        "wires": []
-    },
     {
         "id": "486bc5c0891a3a15",
         "type": "function",
@@ -6223,7 +6045,7 @@
         "z": "a02961610bc3982a",
         "g": "27e22d982f0bcb2f",
         "name": "",
-        "x": 550,
+        "x": 530,
         "y": 920,
         "wires": [
             []
@@ -6241,7 +6063,7 @@
         "once": false,
         "onceDelay": 0.1,
         "topic": "",
-        "x": 530,
+        "x": 510,
         "y": 860,
         "wires": [
             [
@@ -6355,7 +6177,7 @@
         "g": "3fe3efd04fb1a41a",
         "name": "hostname",
         "info": "",
-        "x": 480,
+        "x": 300,
         "y": 700,
         "wires": []
     },
@@ -6366,7 +6188,7 @@
         "g": "9c49d230dea06fdf",
         "name": "name",
         "info": "",
-        "x": 290,
+        "x": 310,
         "y": 860,
         "wires": []
     },
@@ -6377,7 +6199,7 @@
         "g": "27e22d982f0bcb2f",
         "name": "storage",
         "info": "",
-        "x": 730,
+        "x": 690,
         "y": 860,
         "wires": []
     },
@@ -6496,7 +6318,7 @@
         "g": "dc792afbab434446",
         "name": "",
         "x": 1120,
-        "y": 440,
+        "y": 600,
         "wires": [
             []
         ]
@@ -6514,7 +6336,7 @@
         "onceDelay": 0.1,
         "topic": "",
         "x": 1090,
-        "y": 380,
+        "y": 540,
         "wires": [
             [
                 "61ebceb724041fb2"
@@ -6528,8 +6350,8 @@
         "g": "dc792afbab434446",
         "name": "acquisitions",
         "info": "",
-        "x": 1290,
-        "y": 380,
+        "x": 1310,
+        "y": 540,
         "wires": []
     },
     {
@@ -6545,7 +6367,7 @@
         "onceDelay": 0.1,
         "topic": "",
         "x": 1090,
-        "y": 560,
+        "y": 700,
         "wires": [
             [
                 "7d1f9414be49d7c3"
@@ -6560,7 +6382,7 @@
         "name": "segmentations",
         "info": "",
         "x": 1300,
-        "y": 560,
+        "y": 700,
         "wires": []
     },
     {
@@ -6570,7 +6392,7 @@
         "g": "dc307bb5d26c60f4",
         "name": "",
         "x": 1130,
-        "y": 620,
+        "y": 760,
         "wires": [
             []
         ]
@@ -6584,7 +6406,9 @@
         "x": 150,
         "y": 1080,
         "wires": [
-            []
+            [
+                "9249e16ed7ae4929"
+            ]
         ]
     },
     {
@@ -6614,7 +6438,7 @@
         "g": "855d9ef468b5db0f",
         "name": "machine info",
         "info": "",
-        "x": 330,
+        "x": 290,
         "y": 1020,
         "wires": []
     },
@@ -6630,8 +6454,8 @@
         "once": false,
         "onceDelay": 0.1,
         "topic": "",
-        "x": 970,
-        "y": 800,
+        "x": 1090,
+        "y": 860,
         "wires": [
             [
                 "59ec9623add53a47"
@@ -6644,8 +6468,8 @@
         "z": "a02961610bc3982a",
         "g": "91f8b76bf61fc59c",
         "name": "",
-        "x": 980,
-        "y": 860,
+        "x": 1100,
+        "y": 920,
         "wires": [
             []
         ]
@@ -6657,8 +6481,25 @@
         "g": "91f8b76bf61fc59c",
         "name": "camera",
         "info": "",
-        "x": 1130,
-        "y": 800,
+        "x": 1330,
+        "y": 860,
+        "wires": []
+    },
+    {
+        "id": "9249e16ed7ae4929",
+        "type": "debug",
+        "z": "a02961610bc3982a",
+        "g": "855d9ef468b5db0f",
+        "name": "debug 10",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 470,
+        "y": 1100,
         "wires": []
     },
     {
@@ -7384,1078 +7225,5 @@
         "wires": [
             []
         ]
-    },
-    {
-        "id": "495e1733d60d5651",
-        "type": "switch",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "light",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "actuator/pump",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "imager/image/update_config",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "imager/image/image",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "segmenter/segment",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "restart/hardware_controller",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "restart/segmenter",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "restart/planktoscope",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "purge",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 9,
-        "x": 350,
-        "y": 160,
-        "wires": [
-            [
-                "1c782af30d1ff770",
-                "67bcd7bd5a4c38cc"
-            ],
-            [
-                "1c782af30d1ff770",
-                "67bcd7bd5a4c38cc"
-            ],
-            [
-                "0fdba9b9b11427db"
-            ],
-            [
-                "8dc5b8c9bfd7cc87"
-            ],
-            [
-                "019662c5bf05e430"
-            ],
-            [
-                "5f5dec5ac53119ae"
-            ],
-            [
-                "61dde05d9a3f805e"
-            ],
-            [
-                "2a55ae214f1e7273"
-            ],
-            [
-                "8447c9830c3aed1e"
-            ]
-        ]
-    },
-    {
-        "id": "0fdba9b9b11427db",
-        "type": "function",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "update_config command",
-        "func": "const now = new Date();\n\nmsg.topic = \"imager/image\";\n\nconst pad = (n) => n.toString().padStart(2, '0');\n\nlet formattedDate = `${now.getUTCFullYear()}_${pad(now.getUTCMonth() + 1)}_${pad(now.getUTCDate())}_${pad(now.getUTCHours())}_${pad(now.getUTCMinutes())}_${pad(now.getUTCSeconds())}`;\n\nglobal.set(\"path\", `${now.toISOString().split('T')[0]}/S1/${formattedDate}`);\n\nmsg.payload = {\n    \"action\": \"update_config\",\n    \"config\": {\n        \"sample_project\": \"FairScope_TenEarth\",\n        \"sample_id\": \"S1\",\n        \"sample_operator\": \"Fairscope\",\n        \"sample_instrument\": \"PlanktoScope v2.6\",\n        \"sample_date\": now.toISOString().split('T')[0],\n        \"acq_id\": formattedDate,\n        \"acq_instrument\": \"PlanktoScope v2.6\",\n        \"acq_magnification\": \"1.2\",\n        \"acq_software\": \"PlanktoScope v2024.0.0-alpha.1\",\n        \"acq_resolution\": \"1080p\",\n        \"acq_time_between_frames\": 0.1,\n        \"acq_minimum_mesh\": 20,\n        \"acq_maximum_mesh\": 300,\n        \"acq_min_esd\": 20,\n        \"acq_max_esd\": 300,\n        \"acq_camera_name\": \"HQ Camera\",\n        \"process_pixel\": 0.75,\n        \"acq_local_datetime\": now.toISOString().split('.')[0] + 'Z',\n        \"object_date\": now.toISOString().split('T')[0],\n        \"object_time\": now.toISOString().split('T')[1].split('.')[0] + 'Z',\n        \"object_lat\": 48.587424697483556,\n        \"object_lon\": -3.8382606493497824\n    }\n};\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 630,
-        "y": 180,
-        "wires": [
-            [
-                "1c782af30d1ff770",
-                "67bcd7bd5a4c38cc"
-            ]
-        ]
-    },
-    {
-        "id": "019662c5bf05e430",
-        "type": "function",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "segment command",
-        "func": "msg.payload = {\n  \"action\": \"segment\",\n  \"path\": global.get(\"path\"),\n  \"settings\": {\n    \"force\": false,\n    \"recursive\": true,\n    \"ecotaxa\": true,\n    \"keep\": true\n  }\n}\n\nreturn msg; ",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 610,
-        "y": 260,
-        "wires": [
-            [
-                "1c782af30d1ff770",
-                "67bcd7bd5a4c38cc"
-            ]
-        ]
-    },
-    {
-        "id": "8dc5b8c9bfd7cc87",
-        "type": "function",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "image command",
-        "func": "msg.topic = \"imager/image\"\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 630,
-        "y": 220,
-        "wires": [
-            [
-                "1c782af30d1ff770",
-                "67bcd7bd5a4c38cc"
-            ]
-        ]
-    },
-    {
-        "id": "1c782af30d1ff770",
-        "type": "mqtt out",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "",
-        "topic": "",
-        "qos": "",
-        "retain": "",
-        "respTopic": "",
-        "contentType": "",
-        "userProps": "",
-        "correl": "",
-        "expiry": "",
-        "broker": "8dc3722c.06efa8",
-        "x": 1270,
-        "y": 100,
-        "wires": []
-    },
-    {
-        "id": "caf377d323526d14",
-        "type": "mqtt in",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "name": "",
-        "topic": "status/#",
-        "qos": "0",
-        "datatype": "json",
-        "broker": "8dc3722c.06efa8",
-        "nl": false,
-        "rap": false,
-        "inputs": 0,
-        "x": 100,
-        "y": 800,
-        "wires": [
-            [
-                "ff83a2795f988098"
-            ]
-        ]
-    },
-    {
-        "id": "316dae6f231575b7",
-        "type": "function",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "name": "Count objects segmented",
-        "func": "var objectCount = global.get('objectCount') || 0;\n\nif (msg.payload.status === 'Done') {\n    msg.payload.objectCount = objectCount;\n    objectCount=0;\n    }\nelse if (msg.topic === 'status/segmenter/metric') {\n    objectCount++;\n}\n\nglobal.set('objectCount', objectCount);\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 550,
-        "y": 860,
-        "wires": [
-            [
-                "9e169af039fc8031"
-            ]
-        ]
-    },
-    {
-        "id": "9e169af039fc8031",
-        "type": "switch",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "name": "msg.payload.metadata.equivalent_diameter is not null",
-        "property": "payload.metadata.equivalent_diameter",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "nnull"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 880,
-        "y": 860,
-        "wires": [
-            [
-                "50629a570b41196e"
-            ]
-        ]
-    },
-    {
-        "id": "1bc303a19fc9e38b",
-        "type": "ui-template",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "7edf5f14f6ca0bdd",
-        "page": "",
-        "ui": "",
-        "name": "Stream Pi Camera",
-        "order": 3,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<center>\n  <img src=\"/ps/hal/camera/streams/preview.mjpg\"\n    alt=\"If you see this, there probably is an error either with your camera or with the python service. Please try restarting your machine.\"\n    width=\"100%\" height=\"100%\">\n</center>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 390,
-        "y": 780,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "ff83a2795f988098",
-        "type": "switch",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "name": "",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "status/segmenter/metric",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 350,
-        "y": 860,
-        "wires": [
-            [
-                "316dae6f231575b7"
-            ]
-        ]
-    },
-    {
-        "id": "fd3ae27267703c27",
-        "type": "ui-chart",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "",
-        "label": "Histogram - Equivalent Diameter",
-        "order": 2,
-        "chartType": "histogram",
-        "category": "Equivalent Diameter (μm)",
-        "categoryType": "str",
-        "xAxisLabel": "Equivalent Diameter (μm)",
-        "xAxisProperty": "payload.metadata.equivalent_diameter",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "bins",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "20",
-        "xmax": "100",
-        "yAxisLabel": "Abundance",
-        "yAxisProperty": "payload.metadata.equivalent_diameter",
-        "yAxisPropertyType": "msg",
-        "ymin": "",
-        "ymax": "",
-        "bins": "80",
-        "action": "append",
-        "stackSeries": false,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": 1,
-        "removeOlderUnit": "86400",
-        "removeOlderPoints": "",
-        "colors": [
-            "#00ff04",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 1660,
-        "y": 820,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "5f5dec5ac53119ae",
-        "type": "exec",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "command": "sudo systemctl restart planktoscope-org.controller.service",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Restart hardware controller",
-        "x": 640,
-        "y": 320,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "61dde05d9a3f805e",
-        "type": "exec",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "command": "sudo systemctl restart planktoscope-org.segmenter.service",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Restart segmenter",
-        "x": 610,
-        "y": 380,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "527165cd7171fe26",
-        "type": "ui-template",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "7edf5f14f6ca0bdd",
-        "page": "",
-        "ui": "",
-        "name": "Actions Clock",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<template>\n    <div class=\"clock-container\">\n        <canvas ref=\"clockCanvas\"></canvas>\n        <div class=\"legend\">\n            <div v-for=\"event in events\" :key=\"event.label\" class=\"legend-item\">\n                <span :style=\"{ backgroundColor: event.color }\" class=\"color-box\"></span>\n                {{ event.label }}\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            events: [\n                { start: 35, end: 36, label: \"Pump dead volume\", color: \"rgba(255, 0, 0, 0.3)\" },\n                { start: 36, end: 40, label: \"Acquisition\", color: \"rgba(0, 255, 0, 0.3)\" },\n                { start: 45, end: 8, label: \"Segmentation\", color: \"rgba(0, 0, 255, 0.3)\" },\n                { start: 18, end: 19, label: \"Purge data\", color: \"rgba(255, 0, 0, 0.3)\" },\n                { start: 34, end: 35, label: \"Agitation\", color: \"rgba(255, 255, 0, 0.3)\" },\n                { start: 25, end: 26, label: \"Restart segmenter\", color: \"rgba(255, 0, 255, 0.3)\" },\n                { start: 30, end: 31, label: \"Restart hardware controller\", color: \"rgba(0, 255, 255, 0.3)\" }\n            ],\n            currentMinute: null,\n            clockRadius: 100\n        };\n    },\n    mounted() {\n        this.updateClock();\n        setInterval(this.updateClock, 1000);\n    },\n    methods: {\n        updateClock() {\n            const now = new Date();\n            this.currentMinute = now.getMinutes() + now.getSeconds() / 60;\n            this.drawClock();\n        },\n        drawClock() {\n            const canvas = this.$refs.clockCanvas;\n            const ctx = canvas.getContext(\"2d\");\n            const size = this.clockRadius * 2;\n            canvas.width = size;\n            canvas.height = size;\n            ctx.clearRect(0, 0, size, size);\n            ctx.translate(this.clockRadius, this.clockRadius);\n\n            // Draw circle\n            ctx.beginPath();\n            ctx.arc(0, 0, this.clockRadius, 0, 2 * Math.PI);\n            ctx.stroke();\n\n            // Draw minute marks\n            for (let i = 0; i < 60; i += 10) {\n                const angle = (i / 60) * 2 * Math.PI - Math.PI / 2;\n                const x1 = Math.cos(angle) * (this.clockRadius - 5);\n                const y1 = Math.sin(angle) * (this.clockRadius - 5);\n                const x2 = Math.cos(angle) * (this.clockRadius - 15);\n                const y2 = Math.sin(angle) * (this.clockRadius - 15);\n                ctx.strokeStyle = \"black\";\n                ctx.lineWidth = 2;\n                ctx.beginPath();\n                ctx.moveTo(x1, y1);\n                ctx.lineTo(x2, y2);\n                ctx.stroke();\n            }\n\n            // Draw event periods with colors\n            this.events.forEach(event => {\n                let startAngle = (event.start / 60) * 2 * Math.PI - Math.PI / 2;\n                let endAngle = (event.end / 60) * 2 * Math.PI - Math.PI / 2;\n                ctx.fillStyle = event.color;\n                ctx.beginPath();\n                ctx.moveTo(0, 0);\n                ctx.arc(0, 0, this.clockRadius - 10, startAngle, endAngle);\n                ctx.lineTo(0, 0);\n                ctx.fill();\n            });\n\n            // Draw current time hand\n            const angle = (this.currentMinute / 60) * 2 * Math.PI - Math.PI / 2;\n            const x = Math.cos(angle) * (this.clockRadius - 15);\n            const y = Math.sin(angle) * (this.clockRadius - 15);\n            ctx.strokeStyle = \"black\";\n            ctx.lineWidth = 2;\n            ctx.beginPath();\n            ctx.moveTo(0, 0);\n            ctx.lineTo(x, y);\n            ctx.stroke();\n        }\n    }\n};\n</script>\n\n<style scoped>\n.clock-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\ncanvas {\n    margin-right: 20px;\n}\n\n.legend {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n}\n\n.legend-item {\n    display: flex;\n    align-items: center;\n    margin: 5px 0;\n}\n\n.color-box {\n    width: 15px;\n    height: 15px;\n    margin-right: 5px;\n    border-radius: 3px;\n}\n</style>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 380,
-        "y": 820,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "50629a570b41196e",
-        "type": "function",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "name": "convert px to um",
-        "func": "// Conversion factor from pixels to micrometers (µm)\nconst px_to_um = 0.75;\n\n// Convert relevant measurements\nmsg.payload.metadata.equivalent_diameter = Math.round(msg.payload.metadata.equivalent_diameter * px_to_um);\nmsg.payload.metadata.width = Math.round(msg.payload.metadata.width * px_to_um);\nmsg.payload.metadata.height = Math.round(msg.payload.metadata.height * px_to_um);\nmsg.payload.metadata.area = Math.round(msg.payload.metadata.area * (px_to_um ** 2)); // Area is in square units\nmsg.payload.metadata.area_exc = Math.round(msg.payload.metadata.area_exc * (px_to_um ** 2));\nmsg.payload.metadata.convex_area = Math.round(msg.payload.metadata.convex_area * (px_to_um ** 2));\nmsg.payload.metadata.major = Math.round(msg.payload.metadata.major * px_to_um);\nmsg.payload.metadata.minor = Math.round(msg.payload.metadata.minor * px_to_um);\nmsg.payload.metadata.perim = Math.round(msg.payload.metadata[\"perim.\"] * px_to_um); // Ensure proper key reference\nmsg.payload.metadata.bounding_box_area = Math.round(msg.payload.metadata.bounding_box_area * (px_to_um ** 2));\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 1210,
-        "y": 860,
-        "wires": [
-            [
-                "fd3ae27267703c27",
-                "60d1ad2a7e54e60e",
-                "1997fd46811f0331",
-                "5f091b11b5c9fa40",
-                "0650e037776b3d8a"
-            ]
-        ]
-    },
-    {
-        "id": "0aef9a09d59e574c",
-        "type": "ui-markdown",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "Histogram of equivalent_diameter",
-        "order": 3,
-        "width": "3",
-        "height": "6",
-        "content": "### Distribution of Object Sizes  \nUnderstanding the size distribution of planktonic objects helps identify dominant size classes and detect anomalies. A skewed distribution might indicate specific biological trends, such as a bloom of a particular species or a technical issue in the acquisition process.  \n\n*In the graph:*  \n- A **peak in smaller sizes** suggests dominance of tiny plankton.  \n- A **broad distribution** indicates a mix of various size classes.  \n- A **skewed or bimodal pattern** may reflect biological or technical factors (e.g., species-specific blooms or imaging biases).\n",
-        "className": "",
-        "x": 1660,
-        "y": 860,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "a9701575d8df4ce1",
-        "type": "ui-markdown",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "elongation vs. area",
-        "order": 6,
-        "width": "3",
-        "height": "6",
-        "content": "### Relationship Between Elongation and Object Area  \nThis scatter plot helps assess whether larger objects tend to be more elongated or compact. Certain plankton species have characteristic shapes, and identifying correlations between elongation and area can aid in distinguishing different taxa or understanding morphological variability.  \n\n*In the graph:*  \n- **Top-right**: Large and highly elongated objects (e.g., filamentous plankton).  \n- **Bottom-right**: Small but highly elongated objects (e.g., thin needle-like forms). \n- **Top-left**: Large but compact objects (e.g., rounded or clustered plankton). \n- **Bottom-left**: Small and compact objects (e.g., spherical or short structures).",
-        "className": "",
-        "x": 1610,
-        "y": 960,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "60d1ad2a7e54e60e",
-        "type": "ui-chart",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "elongation vs. area",
-        "label": "elongation vs. area",
-        "order": 5,
-        "chartType": "scatter",
-        "category": "elongation vs. area",
-        "categoryType": "str",
-        "xAxisLabel": "elongation (ratio of major to minor axis)",
-        "xAxisProperty": "payload.metadata.elongation",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "area (μm²)",
-        "yAxisProperty": "payload.metadata.area",
-        "yAxisPropertyType": "msg",
-        "ymin": "300",
-        "ymax": "1500",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#ff0088",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 1610,
-        "y": 920,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "f8df009e737eb044",
-        "type": "ui-markdown",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "equivalent_diameter vs. MeanValue",
-        "order": 9,
-        "width": "3",
-        "height": "6",
-        "content": "### Variation of Mean Brightness with Equivalent Diameter  \nThis graph explores whether larger objects tend to be brighter or darker. This can reveal differences in pigmentation, transparency, or even imaging inconsistencies.  \n\n*In the graph:*   \n- **Top-right**: Large and bright objects.\n- **Top-left**: Small and bright objects.\n- **Bottom-right**: Large and dark objects.\n- **Bottom-left**: Small and dark objects.  ",
-        "className": "",
-        "x": 1660,
-        "y": 1060,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "e6eb3b16a1d6bf22",
-        "type": "ui-markdown",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "MeanSaturation vs. MeanValue",
-        "order": 13,
-        "width": "3",
-        "height": "6",
-        "content": "### Relationship Between Mean Saturation and Mean Brightness\nThis visualization helps understand how color properties vary with brightness. Some plankton groups exhibit distinct coloration, and saturation could be a useful feature for classification. A strong trend might suggest systematic differences in pigmentation or optical properties across plankton groups.\n\n*In the graph:*  \n- **Top-right**: Bright and highly saturated objects (vivid colors).  \n- **Top-left**: Bright but low-saturation objects (pale or near-white).  \n- **Bottom-right**: Dark but highly saturated objects (deep, rich colors).  \n- **Bottom-left**: Dark and low-saturation objects (grayish or faintly colored).",
-        "className": "",
-        "x": 1650,
-        "y": 1160,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "1997fd46811f0331",
-        "type": "ui-chart",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "equivalent_diameter vs. MeanValue",
-        "label": "equivalent_diameter vs. MeanValue",
-        "order": 8,
-        "chartType": "scatter",
-        "category": "equivalent_diameter vs. MeanValue",
-        "categoryType": "str",
-        "xAxisLabel": "Equivalent Diameter (μm)",
-        "xAxisProperty": "payload.metadata.equivalent_diameter",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "MeanValue (0–255, grayscale value)",
-        "yAxisProperty": "payload.metadata.MeanValue",
-        "yAxisPropertyType": "msg",
-        "ymin": "150",
-        "ymax": "255",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#8c00ff",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 1660,
-        "y": 1020,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "5f091b11b5c9fa40",
-        "type": "ui-chart",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "MeanSaturation vs. MeanValue",
-        "label": "MeanSaturation vs. MeanValue",
-        "order": 11,
-        "chartType": "scatter",
-        "category": "MeanSaturation vs. MeanValue",
-        "categoryType": "str",
-        "xAxisLabel": "MeanSaturation (%)",
-        "xAxisProperty": "payload.metadata.MeanSaturation",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "MeanValue (0–255, grayscale value)",
-        "yAxisProperty": "payload.metadata.MeanValue",
-        "yAxisPropertyType": "msg",
-        "ymin": "150",
-        "ymax": "255",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#ff9500",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 1650,
-        "y": 1120,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "b17728471bdfc61e",
-        "type": "ui-template",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "group": "7edf5f14f6ca0bdd",
-        "page": "",
-        "ui": "",
-        "name": "Table",
-        "order": 2,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<table border=\"1\" style=\"width:100%; text-align:center;\">\n    <tr>\n        <th>Topic</th>\n        <th>Action</th>\n        <th>Status</th>\n    </tr>\n    <tr>\n        <td>light</td>\n        <td>{{msg.payload.light.action}}</td>\n        <td>{{msg.payload.light.status}}</td>\n    </tr>\n    <tr>\n        <td>actuator/pump</td>\n        <td>{{msg.payload[\"actuator/pump\"].action}}</td>\n        <td>{{msg.payload[\"actuator/pump\"].status}}</td>\n    </tr>\n    <tr>\n        <td>imager/image</td>\n        <td>{{msg.payload[\"imager/image\"].action}}</td>\n        <td>{{msg.payload[\"imager/image\"].status}}</td>\n    </tr>\n    <tr>\n        <td>segmenter/segment</td>\n        <td>{{msg.payload[\"segmenter/segment\"].action}}</td>\n        <td>{{msg.payload[\"segmenter/segment\"].status}}</td>\n    </tr>\n</table>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1330,
-        "y": 320,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "e4719fcedaa61149",
-        "type": "switch",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "status/light",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "status/pump",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "status/imager",
-                "vt": "str"
-            },
-            {
-                "t": "eq",
-                "v": "status/segmenter",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 4,
-        "x": 770,
-        "y": 540,
-        "wires": [
-            [
-                "67bcd7bd5a4c38cc"
-            ],
-            [
-                "67bcd7bd5a4c38cc"
-            ],
-            [
-                "67bcd7bd5a4c38cc"
-            ],
-            [
-                "67bcd7bd5a4c38cc"
-            ]
-        ]
-    },
-    {
-        "id": "9301eaa353ece507",
-        "type": "mqtt in",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "",
-        "topic": "status/#",
-        "qos": "0",
-        "datatype": "json",
-        "broker": "8dc3722c.06efa8",
-        "nl": false,
-        "rap": false,
-        "inputs": 0,
-        "x": 300,
-        "y": 540,
-        "wires": [
-            [
-                "e4719fcedaa61149"
-            ]
-        ]
-    },
-    {
-        "id": "67bcd7bd5a4c38cc",
-        "type": "function",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "save current actions & status",
-        "func": "// Récupérer les données précédentes stockées dans le flow context\nvar storedData = flow.get(\"deviceData\") || {\n    light: { action: \"\", status: \"\" },\n    \"actuator/pump\": { action: \"\", status: \"\" },\n    \"imager/image\": { action: \"\", status: \"\" },\n    \"segmenter/segment\": { action: \"\", status: \"\" }\n};\n\n// Mettre à jour les valeurs en fonction du topic reçu\nif (msg.topic === \"light\") {\n    storedData.light.action = msg.payload.action;\n} else if (msg.topic === \"status/light\") {\n    storedData.light.status = msg.payload.status;\n} else if (msg.topic === \"actuator/pump\") {\n    storedData[\"actuator/pump\"].action = msg.payload;\n} else if (msg.topic === \"status/pump\") {\n    storedData[\"actuator/pump\"].status = msg.payload.status;\n} else if (msg.topic === \"imager/image\") {\n    storedData[\"imager/image\"].action = msg.payload.action;\n} else if (msg.topic === \"status/imager\") {\n    storedData[\"imager/image\"].status = msg.payload.status;\n} else if (msg.topic === \"segmenter/segment\") {\n    storedData[\"segmenter/segment\"].action = msg.payload.action;\n} else if (msg.topic === \"status/segmenter\") {\n    storedData[\"segmenter/segment\"].status = msg.payload.status;\n}\n\n// Sauvegarder les nouvelles valeurs\nflow.set(\"deviceData\", storedData);\n\n// Attacher les données mises à jour au message\nmsg.payload = storedData;\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 1120,
-        "y": 320,
-        "wires": [
-            [
-                "b17728471bdfc61e"
-            ]
-        ]
-    },
-    {
-        "id": "2a55ae214f1e7273",
-        "type": "exec",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "command": "sudo reboot now",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Restart PlanktoScope",
-        "x": 620,
-        "y": 440,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "0650e037776b3d8a",
-        "type": "ui-chart",
-        "z": "83b2474231efac73",
-        "g": "751429d7682830be",
-        "group": "4a8738206c62b02e",
-        "name": "x vs. y",
-        "label": "x vs. y",
-        "order": 12,
-        "chartType": "scatter",
-        "category": "x vs. y",
-        "categoryType": "str",
-        "xAxisLabel": "x",
-        "xAxisProperty": "payload.metadata.x",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "y",
-        "yAxisProperty": "payload.metadata.y",
-        "yAxisPropertyType": "msg",
-        "ymin": "",
-        "ymax": "",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#2b00ff",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 1570,
-        "y": 1220,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "8447c9830c3aed1e",
-        "type": "exec",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "command": "rm -rf data/img/* data/clean/* data/objects/*",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Purge data",
-        "x": 590,
-        "y": 500,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "a197bfa71c1761b4",
-        "type": "cronplus",
-        "z": "83b2474231efac73",
-        "g": "910e195536aea223",
-        "name": "",
-        "outputField": "payload",
-        "timeZone": "",
-        "storeName": "",
-        "commandResponseMsgOutput": "output1",
-        "defaultLocation": "",
-        "defaultLocationType": "default",
-        "outputs": 1,
-        "options": [
-            {
-                "name": "purge",
-                "topic": "purge",
-                "payloadType": "default",
-                "payload": "",
-                "expressionType": "cron",
-                "expression": "0 18 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "schedule9",
-                "topic": "restart/planktoscope",
-                "payloadType": "default",
-                "payload": "",
-                "expressionType": "cron",
-                "expression": "0 20 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "restart_segmenter",
-                "topic": "restart/segmenter",
-                "payloadType": "default",
-                "payload": "",
-                "expressionType": "cron",
-                "expression": "0 25 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "restart_hardware_controller",
-                "topic": "restart/hardware_controller",
-                "payloadType": "default",
-                "payload": "",
-                "expressionType": "cron",
-                "expression": "0 30 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "light_on",
-                "topic": "light",
-                "payloadType": "json",
-                "payload": "{\"action\": \"on\"}",
-                "expressionType": "cron",
-                "expression": "0 35 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "update_config",
-                "topic": "imager/image/update_config",
-                "payloadType": "default",
-                "payload": "",
-                "expressionType": "cron",
-                "expression": "1 35 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "pump",
-                "topic": "actuator/pump",
-                "payloadType": "json",
-                "payload": "{\"action\": \"move\",\"direction\": \"FORWARD\",\"volume\": 3,\"flowrate\": 30}",
-                "expressionType": "cron",
-                "expression": "2 35 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "image",
-                "topic": "imager/image/image",
-                "payloadType": "json",
-                "payload": "{\"action\": \"image\",\"pump_direction\": \"FORWARD\",\"volume\": 0.008,\"nb_frame\": 200,\"sleep\": 0.1}",
-                "expressionType": "cron",
-                "expression": "0 36 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "light_off",
-                "topic": "light",
-                "payloadType": "json",
-                "payload": "{\"action\": \"off\"}",
-                "expressionType": "cron",
-                "expression": "0 45 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            },
-            {
-                "name": "segment",
-                "topic": "segmenter/segment",
-                "payloadType": "default",
-                "payload": "",
-                "expressionType": "cron",
-                "expression": "1 45 * * * *",
-                "location": "",
-                "offset": "0",
-                "solarType": "all",
-                "solarEvents": "sunrise,sunset"
-            }
-        ],
-        "x": 100,
-        "y": 60,
-        "wires": [
-            []
-        ]
     }
 ]
\ No newline at end of file

From 1e3df1d7a252ba1daa461b81752911106b5d4239 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 13 Nov 2025 14:17:32 +0000
Subject: [PATCH 02/36] update

---
 node-red/projects/dashboard/flows.json | 220 ++++++++++++++++++++-----
 1 file changed, 177 insertions(+), 43 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 940fdb7df..99512df48 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2033,13 +2033,13 @@
         "width": "12",
         "height": "10",
         "head": "",
-        "format": "<template>\n    <v-container>\n      <v-row>\n        <!-- First Row: Larger cards with icon centered above title -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"preview\"\n            class=\"text-center py-2\"\n            variant=\"flat\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-eye</v-icon>\n            <v-card-title class=\"text-h6\">Launch the Preview</v-card-title>\n            <v-card-text>Access a real-time, high-resolution preview to inspect the contents of your current water sample.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"metadata\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-play-circle</v-icon>\n            <v-card-title class=\"text-h6\">Start Acquisition</v-card-title>\n            <v-card-text>Start a new acquisition process to continuously collect images and metadata from your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"visualization\"\n            target=\"_blank\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-database-search</v-icon>\n            <v-card-title class=\"text-h6\">Explore Your Data</v-card-title>\n            <v-card-text>Open the data explorer to review, categorize, and interpret all previously captured sample information.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Second Row: Standard size cards -->\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"/ps/docs/operation/protocol-v4.pdf\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-book-open-variant</v-icon>\n              Learn the Basics\n            </v-card-title>\n            <v-card-text>Find detailed instructions on using your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"http://pkscope-rich-kettle-10463.local/admin/grafana/d/host-summary/host-summary?orgId=1&from=now-5m&to=now&timezone=browser&var-DS_PROMETHEUS=PBFA97CFB590B2093&var-job=node-exporter&var-node=host.docker.internal:9100&var-diskdevices=%5Ba-z%5D%2B%7Cnvme%5B0-9%5D%2Bn%5B0-9%5D%2B%7Cmmcblk%5B0-9%5D%2B&refresh=5s\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-speedometer</v-icon>\n              Monitoring\n            </v-card-title>\n            <v-card-text>Keep track of system status and performance metrics.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"calibration\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-tune</v-icon>\n              Calibration\n            </v-card-title>\n            <v-card-text>Adjust and verify settings for consistent results.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Third Row: Standard size cards -->\n      <v-row>\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-cube-outline</v-icon>\n              Model of your machine\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.hardware_version }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"3\" v-if=\"msg.payload.machine_info.serial_number\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-barcode-scan</v-icon>\n              Serial number\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.serial_number }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-label-outline</v-icon>\n              Name of your machine\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.machine_name }}</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col :cols=\"12\" :md=\"msg.payload.machine_info.serial_number ? 3 : 4\">\n          <v-card variant=\"tonal\">\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-code-tags</v-icon>\n              Software version\n            </v-card-title>\n            <v-card-text>{{ msg.payload.machine_info.software_version }}</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n      \n\n\n      <!-- 4th Row: Standard size cards -->\n\n    <v-row>\n      <!-- Image acquired -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Image acquired</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Object segmented -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Object segmented</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage used inline -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center flex-grow-1 mr-4\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-sd</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium mr-2\">Storage</span>\n            <v-progress-linear\n              :model-value=\"msg.payload.storage_percent_used\"\n              height=\"12\"\n              rounded\n              class=\"flex-grow-1\"\n              :color=\"msg.payload.storage_percent_used > 90 ? 'error'\n                : msg.payload.storage_percent_used > 70 ? 'warning'\n                : 'success'\"\n            ></v-progress-linear>\n          </div>\n          <div class=\"text-h6 font-weight-bold\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n        </v-card>\n      </v-col>\n    </v-row>\n\n\n    </v-container>\n</template>\n",
+        "format": "<template>\n    <v-container>\n\n<v-row>\n  <!-- Model -->\n  <v-col cols=\"12\" md=\"4\">\n    <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n      <div class=\"d-flex align-center\">\n        <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-cube-outline</v-icon>\n        <span class=\"text-subtitle-1 font-weight-medium\">Model</span>\n      </div>\n      <div class=\"font-weight-bold\">\n        {{ msg.payload.hardware_version }}\n      </div>\n    </v-card>\n  </v-col>\n\n  <!-- Name -->\n  <v-col cols=\"12\" md=\"4\">\n    <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n      <div class=\"d-flex align-center\">\n        <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-label-outline</v-icon>\n        <span class=\"text-subtitle-1 font-weight-medium\">Name</span>\n      </div>\n      <div class=\"font-weight-bold\">\n        {{ msg.payload.machine_name }}\n      </div>\n    </v-card>\n  </v-col>\n\n  <!-- Software version -->\n  <v-col cols=\"12\" md=\"4\">\n    <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n      <div class=\"d-flex align-center\">\n        <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-code-tags</v-icon>\n        <span class=\"text-subtitle-1 font-weight-medium\">Software version</span>\n      </div>\n      <div class=\"font-weight-bold\">\n        {{ msg.payload.software_version }}\n      </div>\n    </v-card>\n  </v-col>\n</v-row>\n\n\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"preview\"\n            class=\"text-center py-2\"\n            variant=\"flat\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-eye</v-icon>\n            <v-card-title class=\"text-h6\">Launch the Preview</v-card-title>\n            <v-card-text>Access a real-time, high-resolution preview to inspect the contents of your current water sample.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"metadata\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-play-circle</v-icon>\n            <v-card-title class=\"text-h6\">Start Acquisition</v-card-title>\n            <v-card-text>Start a new acquisition process to continuously collect images and metadata from your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"visualization\"\n            target=\"_blank\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-database-search</v-icon>\n            <v-card-title class=\"text-h6\">Explore Your Data</v-card-title>\n            <v-card-text>Open the data explorer to review, categorize, and interpret all previously captured sample information.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Second Row: Standard size cards -->\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"/ps/docs/operation/protocol-v4.pdf\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-book-open-variant</v-icon>\n              Learn the Basics\n            </v-card-title>\n            <v-card-text>Find detailed instructions on using your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"http://pkscope-rich-kettle-10463.local/admin/grafana/d/host-summary/host-summary?orgId=1&from=now-5m&to=now&timezone=browser&var-DS_PROMETHEUS=PBFA97CFB590B2093&var-job=node-exporter&var-node=host.docker.internal:9100&var-diskdevices=%5Ba-z%5D%2B%7Cnvme%5B0-9%5D%2Bn%5B0-9%5D%2B%7Cmmcblk%5B0-9%5D%2B&refresh=5s\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-speedometer</v-icon>\n              Monitoring\n            </v-card-title>\n            <v-card-text>Keep track of system status and performance metrics.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"calibration\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-tune</v-icon>\n              Calibration\n            </v-card-title>\n            <v-card-text>Adjust and verify settings for consistent results.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n\n\n      <!-- 4th Row: Standard size cards -->\n\n    <v-row>\n      <!-- Image acquired -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Image acquired</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Object segmented -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Object segmented</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage used inline -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n          <div class=\"d-flex align-center flex-grow-1 mr-4\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-sd</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium mr-2\">Storage</span>\n            <v-progress-linear\n              :model-value=\"msg.payload.storage_percent_used\"\n              height=\"12\"\n              rounded\n              class=\"flex-grow-1\"\n              :color=\"msg.payload.storage_percent_used > 90 ? 'error'\n                : msg.payload.storage_percent_used > 70 ? 'warning'\n                : 'success'\"\n            ></v-progress-linear>\n          </div>\n          <div class=\"text-h6 font-weight-bold\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n        </v-card>\n      </v-col>\n    </v-row>\n\n\n    </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 370,
+        "x": 510,
         "y": 180,
         "wires": [
             []
@@ -2063,7 +2063,7 @@
         "resendOnRefresh": true,
         "templateScope": "widget:ui",
         "className": "",
-        "x": 370,
+        "x": 510,
         "y": 220,
         "wires": [
             []
@@ -2087,7 +2087,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 370,
+        "x": 510,
         "y": 140,
         "wires": [
             []
@@ -2115,7 +2115,8 @@
         "wires": [
             [
                 "abe86c4e9dedb557",
-                "605bf275a4d80952"
+                "605bf275a4d80952",
+                "90ba8dbcce201a83"
             ]
         ]
     },
@@ -2187,12 +2188,11 @@
         "type": "get machine info",
         "z": "1b667c6443413ced",
         "name": "",
-        "x": 110,
-        "y": 140,
+        "x": 850,
+        "y": 40,
         "wires": [
             [
-                "39c370d8a50f3acc",
-                "3580c4605b01c2b0"
+                "c06a59555d958a6f"
             ]
         ]
     },
@@ -2209,8 +2209,8 @@
         "targetType": "full",
         "statusVal": "",
         "statusType": "auto",
-        "x": 380,
-        "y": 260,
+        "x": 1160,
+        "y": 160,
         "wires": []
     },
     {
@@ -2218,17 +2218,98 @@
         "type": "storage info",
         "z": "1b667c6443413ced",
         "name": "",
-        "x": 90,
-        "y": 340,
+        "x": 830,
+        "y": 80,
+        "wires": [
+            [
+                "ee16d4c7be3a6e3a"
+            ]
+        ]
+    },
+    {
+        "id": "ee16d4c7be3a6e3a",
+        "type": "function",
+        "z": "1b667c6443413ced",
+        "name": "set storage info",
+        "func": "if (msg.topic) {\n    global.set(\"image_acquired\", msg.payload.image_acquired);\n    global.set(\"object_segmented\", msg.payload.object_segmented);\n    global.set(\"storage_percent_free\", msg.payload.storage_percent_free);\n    global.set(\"storage_percent_used\", msg.payload.storage_percent_used);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1000,
+        "y": 80,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "c06a59555d958a6f",
+        "type": "function",
+        "z": "1b667c6443413ced",
+        "name": "set machine info",
+        "func": "if (msg.topic) {\n    global.set(\"hardware_version\", msg.payload.machine_info.hardware_version);\n    global.set(\"machine_name\", msg.payload.machine_info.machine_name);\n    global.set(\"hostname\", msg.payload.machine_info.hostname);\n    global.set(\"software_version\", msg.payload.machine_info.software_version);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1040,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "90ba8dbcce201a83",
+        "type": "delay",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 180,
+        "y": 140,
+        "wires": [
+            [
+                "74f8dad75cdd3c16"
+            ]
+        ]
+    },
+    {
+        "id": "74f8dad75cdd3c16",
+        "type": "function",
+        "z": "1b667c6443413ced",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 200,
+        "y": 280,
         "wires": [
             [
-                "ecb17cf4ccad8d7b",
-                "39c370d8a50f3acc"
+                "39c370d8a50f3acc",
+                "14e528a100c60603"
             ]
         ]
     },
     {
-        "id": "ecb17cf4ccad8d7b",
+        "id": "14e528a100c60603",
         "type": "debug",
         "z": "1b667c6443413ced",
         "name": "debug 8",
@@ -2236,12 +2317,11 @@
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
+        "complete": "false",
         "statusVal": "",
         "statusType": "auto",
-        "x": 360,
-        "y": 400,
+        "x": 400,
+        "y": 360,
         "wires": []
     },
     {
@@ -2284,7 +2364,8 @@
         "y": 140,
         "wires": [
             [
-                "f514a138d38d3c61"
+                "f514a138d38d3c61",
+                "4f5f150680be40da"
             ]
         ]
     },
@@ -2500,7 +2581,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n        <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        LED Control\n      </v-card-title>\n      <v-card-text>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle\n              variant=\"outlined\"\n              v-model=\"led_state\"\n              color=\"primary\"\n              mandatory\n              divided\n              shaped\n              class=\"d-flex justify-space-between\"\n              @update:model-value=\"on_led_toggle\"\n            >\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n  \n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Focus Control\n      </v-card-title>\n      <v-card-text>\n        <!-- Focus slider -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider\n              v-model.number=\"focus_distance\"\n              :max=\"maxFocus\"\n              :min=\"minFocus\"\n              :step=\"25\"\n              hide-details\n              :thumb-size=\"isTablet ? 12 : 20\"\n              :track-size=\"isTablet ? 2 : 4\"\n            />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field\n              v-model.number=\"focus_distance\"\n              type=\"number\"\n              variant=\"outlined\"\n              hide-details\n              suffix=\"μm\"\n              :density=\"isTablet ? 'comfortable' : 'default'\"\n              :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\"\n              @click:append=\"showInfo('focus_speed')\"\n            />\n          </v-col>\n        </v-row>\n\n        <!-- Presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle\n              variant=\"outlined\"\n              v-model=\"focus_distance_preset\"\n              divided\n              shaped\n              color=\"primary\"\n              class=\"d-flex justify-space-between\"\n              mandatory\n              @update:model-value=\"on_focus_distance_toggle\"\n            >\n              <v-btn\n                v-for=\"value in focus_distance_presets\"\n                :key=\"'distance-' + value\"\n                :value=\"value\"\n                class=\"flex-grow-1\"\n              >\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Focus direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle\n              variant=\"outlined\"\n              v-model=\"focus_direction\"\n              color=\"primary\"\n              mandatory\n              divided\n              shaped\n              class=\"d-flex justify-space-between\"\n              @update:model-value=\"on_focus_direction_change\"\n            >\n              <v-btn class=\"flex-grow-1\" :value=\"'UP'\">UP</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">DOWN</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n  \n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Pump Control\n      </v-card-title>\n      <v-card-text>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider\n              v-model.number=\"pump_flowrate\"\n              :min=\"minFlow\"\n              :max=\"maxFlow\"\n              :step=\"0.2\"\n              hide-details\n              :thumb-size=\"isTablet ? 12 : 20\"\n              :track-size=\"isTablet ? 2 : 4\"\n            />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field\n              v-model.number=\"pump_flowrate\"\n              type=\"number\"\n              variant=\"outlined\"\n              hide-details\n              suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\"\n              :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\"\n              @click:append=\"showInfo('pump_flowrate')\"\n            />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle\n              v-model=\"pump_flowrate_preset\"\n              class=\"d-flex justify-space-between\"\n              color=\"primary\"\n              variant=\"outlined\"\n              divided\n              shaped\n              mandatory\n              @update:model-value=\"onFlowrateToggle\"\n            >\n              <v-btn\n                v-for=\"value in pump_flowrate_presets\"\n                :key=\"'flowrate-' + value\"\n                :value=\"value\"\n                class=\"flex-grow-1\"\n              >\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider\n              v-model.number=\"pump_manual_volume\"\n              :min=\"minFlow\"\n              :max=\"maxFlow\"\n              :step=\"0.2\"\n              hide-details\n              :thumb-size=\"isTablet ? 12 : 20\"\n              :track-size=\"isTablet ? 2 : 4\"\n            />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field\n              v-model.number=\"pump_manual_volume\"\n              type=\"number\"\n              variant=\"outlined\"\n              hide-details\n              suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\"\n              :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\"\n              @click:append=\"showInfo('pump_manual_volume')\"\n            />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle\n              v-model=\"pump_volume_preset\"\n              class=\"d-flex justify-space-between\"\n              variant=\"outlined\"\n              color=\"primary\"\n              divided\n              shaped\n              mandatory\n              @update:model-value=\"onVolumeToggle\"\n            >\n              <v-btn\n                v-for=\"value in pump_volume_presets\"\n                :key=\"'volume-' + value\"\n                :value=\"value\"\n                class=\"flex-grow-1\"\n              >\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle\n              variant=\"outlined\"\n              v-model=\"pump_direction\"\n              color=\"primary\"\n              mandatory\n              divided\n              shaped\n              class=\"d-flex justify-space-between\"\n              @update:model-value=\"on_pump_direction_change\"\n            >\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n\n    \n<!-- CALIBRATION INFO -->\n<v-card variant=\"tonal\">\n  <v-card-title>\n    <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n    Calibration\n  </v-card-title>\n  <v-card-text>\n    Modify your camera settings through the\n    <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n      calibration page\n    </a>.\n    Adjust optical parameters to ensure accurate imaging.\n  </v-card-text>\n</v-card>\n\n\n\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n      led_state: \"off\",\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((val) => val === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((val) => val === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((val) => val === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n  methods: {\n    hydrateFromMsg(m) {\n    const p = m?.payload ?? {};\n\n    // ✅ Handle status messages FIRST so toggle reverts correctly\n    if (m.topic === \"status/pump\" && p.status === \"Done\") {\n    this.pump_direction = \"stop\";\n    return;\n    }\n    if (m.topic === \"status/focus\" && p.status === \"Done\") {\n    this.focus_direction = \"stop\";\n    return;\n    }\n\n    // ✅ Handle LED status message (boot + runtime sync)\n    if (m.topic === \"status/light\" && \"status\" in p) {\n      const s = String(p.status).toLowerCase().trim();\n\n      if ([\"on\", \"true\", \"1\"].includes(s)) {\n        this.led_state = \"on\";\n      } else if ([\"off\", \"false\", \"0\"].includes(s)) {\n        this.led_state = \"off\";\n      } else {\n        this.led_state = \"off\";\n      }\n\n      return;\n    }\n\n\n    // 🔸 Regular actuator/global messages\n    this.pump_flowrate = p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n    this.pump_manual_volume = p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n    if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n    this.pump_direction = p.command;\n    }\n\n    this.focus_distance =\n    typeof p.focus_distance === \"number\" ? p.focus_distance : this.focus_distance;\n\n    if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n    this.focus_direction = p.command;\n    }\n\n    if (typeof p.ledState === \"string\") this.led_state = p.ledState;\n    else if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action))\n    this.led_state = p.action;\n    },\n\n\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dirUpper = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dirUpper,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n    on_focus_distance_toggle(val) { if (val != null) this.focus_distance = val; },\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000, x2 = 1000, y2 = 2000, x3 = 5000, y3 = 5000;\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n      this.send({\n        topic: \"set_global/focus\",\n        payload: { focus_distance: d, focus_speed: speed },\n      });\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input {\n    font-size: 1.3rem !important;\n  }\n  .v-slider {\n    height: 2px !important;\n  }\n}\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        LED Control\n      </v-card-title>\n      <v-card-text>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Focus Control\n      </v-card-title>\n      <v-card-text>\n        <!-- Focus slider -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider v-model.number=\"focus_distance\" :max=\"maxFocus\" :min=\"minFocus\" :step=\"25\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field v-model.number=\"focus_distance\" type=\"number\" variant=\"outlined\" hide-details suffix=\"μm\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('focus_speed')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_distance_preset\" divided shaped color=\"primary\"\n              class=\"d-flex justify-space-between\" mandatory @update:model-value=\"on_focus_distance_toggle\">\n              <v-btn v-for=\"value in focus_distance_presets\" :key=\"'distance-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Focus direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_focus_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'UP'\">UP</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">DOWN</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Pump Control\n      </v-card-title>\n      <v-card-text>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: { msg: { type: Object, default: () => ({}) } },\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n      led_state: \"off\",\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((val) => val === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((val) => val === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((val) => val === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // ✅ Handle status messages\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n        return;\n      }\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n        return;\n      }\n\n      // ✅ Handle LED status (either msg.payload.led_status or status/light)\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n        return;\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n        return;\n      }\n\n      // 🔸 Regular actuator/global messages\n      this.pump_flowrate = p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n      this.pump_manual_volume = p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      this.focus_distance =\n        typeof p.focus_distance === \"number\" ? p.focus_distance : this.focus_distance;\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") this.led_state = p.ledState;\n      else if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action))\n        this.led_state = p.action;\n    },\n\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dirUpper = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dirUpper,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n    on_focus_distance_toggle(val) { if (val != null) this.focus_distance = val; },\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000, x2 = 1000, y2 = 2000, x3 = 5000, y3 = 5000;\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n      this.send({\n        topic: \"set_global/focus\",\n        payload: { focus_distance: d, focus_speed: speed },\n      });\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2582,7 +2663,7 @@
         "id": "1d591029bae11418",
         "type": "function",
         "z": "ab58b3fd0e6bcd77",
-        "name": "set focus settings",
+        "name": "set light settings",
         "func": "if (msg.topic) {\n    global.set(\"led_status\", msg.payload.action);\n\n}\nreturn msg;",
         "outputs": 1,
         "timeout": "",
@@ -2590,7 +2671,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 810,
+        "x": 800,
         "y": 220,
         "wires": [
             []
@@ -2616,6 +2697,22 @@
             ]
         ]
     },
+    {
+        "id": "4f5f150680be40da",
+        "type": "debug",
+        "z": "ab58b3fd0e6bcd77",
+        "name": "debug 12",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 380,
+        "y": 340,
+        "wires": []
+    },
     {
         "id": "349d0f7644f26a62",
         "type": "ui-template",
@@ -3189,13 +3286,13 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\"\n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_interframe_volume\"\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_interframe_volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"acq_progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(acq_duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",\n      acq_progression: 0,\n      acq_duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n    };\n  },\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.calibration_sensor_width !== undefined) this.calibration_sensor_width = Number(p.calibration_sensor_width);\n        if (p.calibration_sensor_height !== undefined) this.calibration_sensor_height = Number(p.calibration_sensor_height);\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n          if (s.includes(\"started\") || s.includes(\"running\") || s.includes(\"capturing\")) {\n            this.resetProgress();\n            this.acq_status = \"on\";\n          } else if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\") || s.includes(\"not capturing\")) {\n            this.acq_status = \"off\";\n          }\n        }\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n    resetProgress() { this.acq_progression = 0; this.acq_duration_left = 0; this.lastUpdateTime = Date.now(); },\n    incrementAcqId() { const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\"); this.acq_id = next; this.sendUpdate(); },\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0) / 1000;\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n      this.updateProgress();\n      this.sendUpdate();\n    },\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.acq_progression = Math.min(100, this.acq_progression + (elapsed / this.acq_nb_frame) * 100);\n          this.acq_duration_left = ((100 - this.acq_progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"on\") this.resetProgress();\n      if (value === \"off\") this.incrementAcqId();\n      if (typeof this.send === \"function\") this.send({ topic: \"imager/image\", payload: { status: value } });\n    },\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n        </p>\n      \n        <v-divider class=\"my-3\"></v-divider>\n      \n        <ul class=\"ml-4\">\n          <li>\n            <strong>Sensor width:</strong>\n            {{ Math.round(calibration_sensor_width) }} px → {{ Math.round(sensor_width_um) }} µm\n          </li>\n          <li>\n            <strong>Sensor height:</strong>\n            {{ Math.round(calibration_sensor_height) }} px → {{ Math.round(sensor_height_um) }} µm\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            {{ Math.round(acq_flowcell_thickness) }} µm\n            <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n              (Check or modify in hardware settings)\n            </a>\n          </li>\n        </ul>\n      \n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n      \n        <ol class=\"ml-4\">\n          <li>\n            Area per image = width × height =\n            {{ Math.round(sensor_width_um) }} × {{ Math.round(sensor_height_um) }} =\n            {{ Math.round(area) }} µm²\n          </li>\n          <li>\n            Volume per image = area × thickness =\n            {{ Math.round(area) }} × {{ Math.round(acq_flowcell_thickness) }} =\n            {{ Math.round(area * acq_flowcell_thickness) }} µm³\n          </li>\n          <li>\n            Convert µm³ → mL: divide by 1e12 →\n            {{ fmt(frame_volume_ml) }} mL per image\n          </li>\n          <li>\n            Total = {{ acq_nb_frame }} × {{ fmt(frame_volume_ml) }} mL =\n            <strong>{{ fmt(acq_imaged_volume) }} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n      this.openHint(\"Volume Imaged\", html);\n    },\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n    openHint(title, text) { this.hintTitle = title; this.hintText = text; this.hintDialog = true; },\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          acq_progression: this.acq_progression,\n          acq_duration_left: this.acq_duration_left,\n          acq_status: this.acq_status,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\"\n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_interframe_volume\"\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_interframe_volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n    };\n  },\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.calibration_sensor_width !== undefined) this.calibration_sensor_width = Number(p.calibration_sensor_width);\n        if (p.calibration_sensor_height !== undefined) this.calibration_sensor_height = Number(p.calibration_sensor_height);\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n          if (s.includes(\"started\") || s.includes(\"running\") || s.includes(\"capturing\")) {\n            this.resetProgress();\n            this.acq_status = \"on\";\n          } else if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\") || s.includes(\"not capturing\")) {\n            this.acq_status = \"off\";\n          }\n        }\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n        this.incrementAcqId();\n          this.resetProgress();\n        }\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n    resetProgress() { this.progression = 0; this.duration_left = 0; this.lastUpdateTime = Date.now(); },\n    incrementAcqId() { const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\"); this.acq_id = next; this.sendUpdate(); },\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0) / 1000;\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n      this.updateProgress();\n      this.sendUpdate();\n    },\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"on\") this.resetProgress();\n      if (value === \"off\") this.incrementAcqId();\n      if (typeof this.send === \"function\") this.send({ topic: \"imager/image\", payload: { status: value } });\n    },\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n        </p>\n      \n        <v-divider class=\"my-3\"></v-divider>\n      \n        <ul class=\"ml-4\">\n          <li>\n            <strong>Sensor width:</strong>\n            {{ Math.round(calibration_sensor_width) }} px → {{ Math.round(sensor_width_um) }} µm\n          </li>\n          <li>\n            <strong>Sensor height:</strong>\n            {{ Math.round(calibration_sensor_height) }} px → {{ Math.round(sensor_height_um) }} µm\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            {{ Math.round(acq_flowcell_thickness) }} µm\n            <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n              (Check or modify in hardware settings)\n            </a>\n          </li>\n        </ul>\n      \n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n      \n        <ol class=\"ml-4\">\n          <li>\n            Area per image = width × height =\n            {{ Math.round(sensor_width_um) }} × {{ Math.round(sensor_height_um) }} =\n            {{ Math.round(area) }} µm²\n          </li>\n          <li>\n            Volume per image = area × thickness =\n            {{ Math.round(area) }} × {{ Math.round(acq_flowcell_thickness) }} =\n            {{ Math.round(area * acq_flowcell_thickness) }} µm³\n          </li>\n          <li>\n            Convert µm³ → mL: divide by 1e12 →\n            {{ fmt(frame_volume_ml) }} mL per image\n          </li>\n          <li>\n            Total = {{ acq_nb_frame }} × {{ fmt(frame_volume_ml) }} mL =\n            <strong>{{ fmt(acq_imaged_volume) }} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n      this.openHint(\"Volume Imaged\", html);\n    },\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n    openHint(title, text) { this.hintTitle = title; this.hintText = text; this.hintDialog = true; },\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          acq_status: this.acq_status,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 410,
+        "x": 370,
         "y": 140,
         "wires": [
             [
@@ -3253,7 +3350,8 @@
         "y": 140,
         "wires": [
             [
-                "f841ebf999dd8cb3"
+                "f841ebf999dd8cb3",
+                "e9760c98e9340f3e"
             ],
             [
                 "09ecc922fe2214a8"
@@ -3515,7 +3613,8 @@
         "y": 280,
         "wires": [
             [
-                "ce5cca3b8fe34379"
+                "ce5cca3b8fe34379",
+                "5090913821c57c81"
             ]
         ]
     },
@@ -3553,12 +3652,46 @@
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
+        "complete": "payload",
+        "targetType": "msg",
         "statusVal": "",
         "statusType": "auto",
-        "x": 280,
-        "y": 280,
+        "x": 520,
+        "y": 340,
+        "wires": []
+    },
+    {
+        "id": "5090913821c57c81",
+        "type": "debug",
+        "z": "35d7387466dd0bc0",
+        "name": "debug 13",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 940,
+        "y": 340,
+        "wires": []
+    },
+    {
+        "id": "e9760c98e9340f3e",
+        "type": "debug",
+        "z": "35d7387466dd0bc0",
+        "name": "debug 14",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 920,
+        "y": 80,
         "wires": []
     },
     {
@@ -3876,7 +4009,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <!-- Dataset Info: shown only when segmentation is currently active -->\n  <v-list\n    density=\"compact\"\n    v-if=\"isSegmenting && segment.dataset.project_name\"\n  >\n    <v-list-item>\n      <v-list-item-title>\n        <b>Project:</b> {{ segment.dataset.project_name }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Sample:</b> {{ segment.dataset.sample_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Acquisition:</b> {{ segment.dataset.acquisition_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Path:</b> {{ segment.dataset.path }}\n      </v-list-item-title>\n    </v-list-item>\n  </v-list>\n\n  <v-divider\n    class=\"my-4\"\n    v-if=\"isSegmenting && segment.dataset.project_name\"\n  ></v-divider>\n\n  <!-- Progress Info -->\n  <div v-if=\"statusText\">\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear\n      :model-value=\"progressPercent\"\n      height=\"10\"\n      color=\"primary\"\n      rounded\n      striped\n    ></v-progress-linear>\n\n    <p class=\"mt-3 mb-0 text-body-2\" v-if=\"currentImage\">\n      Currently segmenting:\n      <strong>{{ currentImage }}</strong>\n    </p>\n  </div>\n\n  <div v-else class=\"text-disabled mt-4\">\n    Awaiting segmentation status...\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n    };\n  },\n  computed: {\n    // Active segmentation means: we have a status and it isn't \"Done\"\n    isSegmenting() {\n      return (\n        this.statusText &&\n        !this.statusText.toLowerCase().includes(\"done\") &&\n        !this.statusText.toLowerCase().includes(\"idle\")\n      );\n    },\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.topic || !msg.payload) return;\n\n        const p = msg.payload;\n\n        // 1️⃣ Load dataset info from message payload if available\n        if (\n          p.seg_project_name ||\n          p.seg_sample_id ||\n          p.seg_acquisition_id ||\n          p.seg_path\n        ) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        // 2️⃣ Capture segmentation progress\n        if (msg.topic === \"status/segmenter\") {\n          this.statusText = p.status || \"\";\n\n          // Detect completion and reset dataset fields\n          if (this.statusText.toLowerCase().includes(\"done\")) {\n            this.segment.dataset = {\n              project_name: \"\",\n              sample_id: \"\",\n              acquisition_id: \"\",\n              path: \"\",\n            };\n            this.currentImage = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n          }\n\n          // Extract current image and progress info\n          const imgMatch = this.statusText.match(/image ([\\w\\-\\_\\.]+),/);\n          this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n          const progressMatch = this.statusText.match(/image (\\d+)\\/(\\d+)/);\n          if (progressMatch) {\n            this.currentIndex = Number(progressMatch[1]);\n            this.totalImages = Number(progressMatch[2]);\n            this.progressPercent = Math.round(\n              (this.currentIndex / this.totalImages) * 100\n            );\n            this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n          }\n        }\n      },\n    },\n  },\n};\n</script>\n\n<style scoped>\n.text-disabled {\n  color: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
+        "format": "<template>\n  <!-- Dataset Info: shown only when segmentation is currently active -->\n  <v-list density=\"compact\" v-if=\"isSegmenting && segment.dataset.project_name\">\n    <v-list-item>\n      <v-list-item-title>\n        <b>Project:</b> {{ segment.dataset.project_name }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Sample:</b> {{ segment.dataset.sample_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Acquisition:</b> {{ segment.dataset.acquisition_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Path:</b> {{ segment.dataset.path }}\n      </v-list-item-title>\n    </v-list-item>\n  </v-list>\n\n  <v-divider class=\"my-4\" v-if=\"isSegmenting && segment.dataset.project_name\"></v-divider>\n\n  <!-- Error Message -->\n  <v-alert v-if=\"errorMessage\" type=\"error\" variant=\"outlined\" border=\"start\" prominent class=\"mb-4\">\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Generic Info / Other Messages -->\n  <v-alert v-else-if=\"infoMessage\" type=\"info\" variant=\"outlined\" border=\"start\" class=\"mb-4\">\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress Info -->\n  <div v-if=\"statusText && !errorMessage\">\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear :model-value=\"progressPercent\" height=\"10\" color=\"primary\" rounded striped></v-progress-linear>\n\n    <p class=\"mt-3 mb-0 text-body-2\" v-if=\"currentImage\">\n      Currently segmenting:\n      <strong>{{ currentImage }}</strong>\n    </p>\n  </div>\n\n  <div v-else-if=\"!errorMessage\" class=\"text-disabled mt-4\">\n    Awaiting segmentation status...\n  </div>\n</template>\n\n<script>\n  export default {\n  props: {\n    msg: Object,\n  },\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n  computed: {\n    // Active segmentation means: we have a status and it isn't \"Done\"\n    isSegmenting() {\n      return (\n        this.statusText &&\n        !this.statusText.toLowerCase().includes(\"done\") &&\n        !this.statusText.toLowerCase().includes(\"idle\") &&\n        !this.errorMessage\n      );\n    },\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.topic || !msg.payload) return;\n\n        const p = msg.payload;\n\n        // Reset message fields\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.statusText = \"\";\n\n        // 1️⃣ Load dataset info from message payload if available\n        if (\n          p.seg_project_name ||\n          p.seg_sample_id ||\n          p.seg_acquisition_id ||\n          p.seg_path\n        ) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        // 2️⃣ Handle status/segmenter messages\n        if (msg.topic === \"status/segmenter\") {\n          const status = p.status || \"\";\n\n          // Detect error messages\n          if (status.toLowerCase().includes(\"exception\")) {\n            this.errorMessage = status;\n            this.statusText = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n            return;\n          }\n\n          // Detect \"done\" or \"idle\"\n          if (status.toLowerCase().includes(\"done\") || status.toLowerCase().includes(\"idle\")) {\n            this.statusText = status;\n            this.segment.dataset = {\n              project_name: \"\",\n              sample_id: \"\",\n              acquisition_id: \"\",\n              path: \"\",\n            };\n            this.currentImage = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n            return;\n          }\n\n          // Handle other status or info messages\n          if (!status.toLowerCase().includes(\"image\")) {\n            this.infoMessage = status;\n            return;\n          }\n\n          // 3️⃣ Extract progress info if available\n          this.statusText = status;\n\n          const imgMatch = this.statusText.match(/image ([\\w\\-\\_\\.]+),/);\n          this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n          const progressMatch = this.statusText.match(/image (\\d+)\\/(\\d+)/);\n          if (progressMatch) {\n            this.currentIndex = Number(progressMatch[1]);\n            this.totalImages = Number(progressMatch[2]);\n            this.progressPercent = Math.round(\n              (this.currentIndex / this.totalImages) * 100\n            );\n            this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n          } else {\n            this.progressPercent = 0;\n            this.progressText = \"\";\n          }\n        }\n      },\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .text-disabled {\n    color: rgba(0, 0, 0, 0.4);\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3982,7 +4115,8 @@
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "false",
+        "complete": "true",
+        "targetType": "full",
         "statusVal": "",
         "statusType": "auto",
         "x": 500,
@@ -6809,15 +6943,15 @@
         "id": "1a7bb2d868fe8707",
         "type": "function",
         "z": "807baf16b84dfb29",
-        "name": "Get min_esd",
-        "func": "msg.payload = global.get(\"min_esd\");\n\nreturn msg;\n",
+        "name": "Get process_min_ESD",
+        "func": "msg.payload = global.get(\"process_min_ESD\");\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 230,
+        "x": 260,
         "y": 140,
         "wires": [
             [
@@ -6831,11 +6965,11 @@
         "z": "807baf16b84dfb29",
         "group": "070185f2b69cf66d",
         "name": "",
-        "label": "min_esd",
+        "label": "process_min_ESD",
         "order": 6,
         "width": 0,
         "height": 0,
-        "topic": "min_esd",
+        "topic": "process_min_ESD",
         "topicType": "str",
         "mode": "number",
         "tooltip": "",
@@ -6850,7 +6984,7 @@
         "icon": "",
         "iconPosition": "left",
         "iconInnerPosition": "inside",
-        "x": 500,
+        "x": 530,
         "y": 140,
         "wires": [
             [
@@ -6862,15 +6996,15 @@
         "id": "aa0070c82f8fe4b6",
         "type": "function",
         "z": "807baf16b84dfb29",
-        "name": "set min_esd",
-        "func": "global.set(\"min_esd\", Number(msg.payload));\n",
+        "name": "set process_min_ESD",
+        "func": "global.set(\"process_min_ESD\", Number(msg.payload));\n",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 750,
+        "x": 780,
         "y": 140,
         "wires": [
             []

From 73e82d80208ccfa04c82cf138099c75077755d48 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Wed, 19 Nov 2025 15:49:06 +0000
Subject: [PATCH 03/36] update

---
 infra/setup.sh                         |  2 +-
 node-red/projects/dashboard/flows.json | 99 +++++++++++---------------
 2 files changed, 42 insertions(+), 59 deletions(-)

diff --git a/infra/setup.sh b/infra/setup.sh
index d65ba4e1e..75ad7964a 100755
--- a/infra/setup.sh
+++ b/infra/setup.sh
@@ -1,6 +1,6 @@
 #!/bin/bash -eux
 
-../os/developer-mode/install-tailsale.sh
+../os/developer-mode/install-tailscale.sh
 
 sudo apt install -y git ssh tmux just
 sudo systemctl enable --now ssh
diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 99512df48..f0e6524a9 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2303,27 +2303,10 @@
         "y": 280,
         "wires": [
             [
-                "39c370d8a50f3acc",
-                "14e528a100c60603"
+                "39c370d8a50f3acc"
             ]
         ]
     },
-    {
-        "id": "14e528a100c60603",
-        "type": "debug",
-        "z": "1b667c6443413ced",
-        "name": "debug 8",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 400,
-        "y": 360,
-        "wires": []
-    },
     {
         "id": "a57a165cd0ce511b",
         "type": "ui-template",
@@ -3836,7 +3819,7 @@
         "mobileBreakpoint": "sm",
         "mobileBreakpointType": "defaults",
         "action": "replace",
-        "x": 370,
+        "x": 330,
         "y": 140,
         "wires": [
             [
@@ -3905,32 +3888,6 @@
             []
         ]
     },
-    {
-        "id": "26074b8d8ad8abf9",
-        "type": "ui-template",
-        "z": "0fd76ac156d78937",
-        "group": "bfd4acb7b243514f",
-        "page": "",
-        "ui": "",
-        "name": "Dialog",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: null, // will be read from payload\n    };\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.payload) return;\n        this.payload = msg.payload;\n        this.showDialog = msg.payload.is_segmented === false;\n\n        // Read process_min_ESD if defined in payload\n        if (typeof msg.payload.process_min_ESD !== \"undefined\") {\n          this.process_min_ESD = msg.payload.process_min_ESD;\n        } else {\n          this.process_min_ESD = 0; // default fallback\n        }\n      },\n    },\n  },\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD, // 👈 taken from payload or user edit\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.sample_operator,\n            image_acquired_count: this.payload.acq_nb_frame,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 850,
-        "y": 140,
-        "wires": [
-            [
-                "24c71b69e60e41bd"
-            ]
-        ]
-    },
     {
         "id": "4bdd8a4afcdb704b",
         "type": "mqtt out",
@@ -3992,8 +3949,7 @@
         "y": 260,
         "wires": [
             [
-                "33c0d1b8251b5d00",
-                "c601b4ae4a8fc401"
+                "33c0d1b8251b5d00"
             ]
         ]
     },
@@ -4091,26 +4047,27 @@
         "type": "function",
         "z": "0fd76ac156d78937",
         "name": "add process_min_ESD",
-        "func": "// Ensure msg.payload and msg.payload.settings exist\nmsg.payload = msg.payload || {};\n\n// Read the variable from global context\nconst process_min_ESD = global.get(\"process_min_ESD\");\n\n// Add it to the payload settings\nmsg.payload.process_min_ESD = process_min_ESD;\n\n// Return the modified message\nreturn msg;\n",
+        "func": "// Ensure msg.payload and msg.payload.settings exist\nmsg.payload = msg.payload || {};\n\n// Read the variable from global context\nconst process_min_ESD = global.get(\"process_min_ESD\");\n\n// Add it to the payload settings\nmsg.payload.process_min_ESD = process_min_ESD;\nmsg.payload.open_dialog = true;\n\n// Return the modified message\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 680,
-        "y": 140,
+        "x": 540,
+        "y": 460,
         "wires": [
             [
+                "7b77659569034650",
                 "26074b8d8ad8abf9"
             ]
         ]
     },
     {
-        "id": "c601b4ae4a8fc401",
+        "id": "621e28a4a222b99a",
         "type": "debug",
         "z": "0fd76ac156d78937",
-        "name": "debug 5",
+        "name": "debug 6",
         "active": true,
         "tosidebar": true,
         "console": false,
@@ -4119,15 +4076,15 @@
         "targetType": "full",
         "statusVal": "",
         "statusType": "auto",
-        "x": 500,
-        "y": 300,
+        "x": 1100,
+        "y": 180,
         "wires": []
     },
     {
-        "id": "621e28a4a222b99a",
+        "id": "7b77659569034650",
         "type": "debug",
         "z": "0fd76ac156d78937",
-        "name": "debug 6",
+        "name": "debug 5",
         "active": true,
         "tosidebar": true,
         "console": false,
@@ -4136,10 +4093,36 @@
         "targetType": "full",
         "statusVal": "",
         "statusType": "auto",
-        "x": 1100,
-        "y": 180,
+        "x": 860,
+        "y": 200,
         "wires": []
     },
+    {
+        "id": "26074b8d8ad8abf9",
+        "type": "ui-template",
+        "z": "0fd76ac156d78937",
+        "group": "bfd4acb7b243514f",
+        "page": "",
+        "ui": "",
+        "name": "Dialog",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  // ⚠️ no props / no lifecycle hooks in ui-template\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: 0,\n      hasSeenFirstMsg: false, // ← ignore the first msg (replayed by Dashboard)\n    };\n  },\n\n  watch: {\n    // `msg` is magically provided by Node-RED ui-template\n    msg: {\n      immediate: true,\n      deep: true,\n      handler(msg) {\n        // Always default to closed unless we *decide* to open\n        this.showDialog = false;\n\n        // First message is usually the \"replayed\" last msg when dashboard loads.\n        // We ignore it completely for popup purposes.\n        if (!this.hasSeenFirstMsg) {\n          this.hasSeenFirstMsg = true;\n\n          // You can still cache payload on first msg if you want:\n          if (msg && msg.payload) {\n            this.payload = msg.payload;\n            this.process_min_ESD =\n              typeof msg.payload.process_min_ESD !== \"undefined\"\n                ? msg.payload.process_min_ESD\n                : 0;\n          }\n          return;\n        }\n\n        // After first msg, handle normally\n        if (!msg || !msg.payload) {\n          return;\n        }\n\n        this.payload = msg.payload;\n\n        // Keep ESD in sync\n        this.process_min_ESD =\n          typeof msg.payload.process_min_ESD !== \"undefined\"\n            ? msg.payload.process_min_ESD\n            : 0;\n\n        // Only open when explicitly requested by the sending flow\n        const shouldOpen =\n          msg.payload.open_dialog === true &&\n          msg.payload.is_segmented === false &&\n          !!msg.payload.path;\n\n        this.showDialog = shouldOpen;\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 750,
+        "y": 140,
+        "wires": [
+            [
+                "24c71b69e60e41bd"
+            ]
+        ]
+    },
     {
         "id": "77bb783e65c3ffd6",
         "type": "ui-event",

From fa0ca2a3e76fcd9d09e885c8a9c386efc2060e9d Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 20 Nov 2025 15:01:36 +0000
Subject: [PATCH 04/36] update

---
 node-red/projects/dashboard/flows.json | 991 +++++++------------------
 1 file changed, 262 insertions(+), 729 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index f0e6524a9..b49566b7e 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -523,41 +523,6 @@
         "w": 562,
         "h": 162
     },
-    {
-        "id": "979647e2e34284fb",
-        "type": "group",
-        "z": "14f8c9b5ce1235cc",
-        "style": {
-            "stroke": "#999999",
-            "stroke-opacity": "1",
-            "fill": "none",
-            "fill-opacity": "1",
-            "label": true,
-            "label-position": "nw",
-            "color": "#a4a4a4"
-        },
-        "nodes": [
-            "f530763503fdc7d1",
-            "e5a0432fc7b35b29",
-            "ba8045b3448d5bbf",
-            "f0313532a2b77337",
-            "e045f6939008f23f",
-            "68fe28f50beb2add",
-            "a20376f0ac08af8e",
-            "694187e7d85faec3",
-            "693e1ad09770bdf5",
-            "82a3257cd0a3815d",
-            "44ef242ece9b6b4b",
-            "7433aae2400b7f78",
-            "a90099cfe7a37a37",
-            "df0dcb1175b8bd5f",
-            "c6c66ebc50dd5d90"
-        ],
-        "x": 14,
-        "y": 279,
-        "w": 1172,
-        "h": 542
-    },
     {
         "id": "91f8b76bf61fc59c",
         "type": "group",
@@ -584,7 +549,7 @@
     {
         "id": "e6ae26617c24c3ea",
         "type": "ui-base",
-        "name": "PlanktoScope GUI v.2",
+        "name": "PlanktoScope",
         "path": "/dashboard",
         "appIcon": "",
         "includeClientData": true,
@@ -593,8 +558,8 @@
             "ui-control"
         ],
         "showPathInSidebar": true,
-        "headerContent": "dashpage",
-        "navigationStyle": "icon",
+        "headerContent": "dashboard",
+        "navigationStyle": "none",
         "titleBarStyle": "fixed",
         "showReconnectNotification": true,
         "notificationDisplayTime": "1",
@@ -735,10 +700,10 @@
         },
         "sizes": {
             "density": "default",
-            "pagePadding": "12px",
-            "groupGap": "11px",
+            "pagePadding": "10px",
+            "groupGap": "10px",
             "groupBorderRadius": "4px",
-            "widgetGap": "13px"
+            "widgetGap": "10px"
         }
     },
     {
@@ -916,9 +881,9 @@
         "type": "ui-group",
         "name": "Table",
         "page": "7a4e042a60b734a6",
-        "width": "8",
+        "width": "12",
         "height": 1,
-        "order": 2,
+        "order": 3,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -956,7 +921,7 @@
                 "cols": "12"
             }
         ],
-        "order": 11,
+        "order": 10,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1006,7 +971,7 @@
                 "cols": "12"
             }
         ],
-        "order": 12,
+        "order": 11,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1056,7 +1021,7 @@
                 "cols": "12"
             }
         ],
-        "order": 13,
+        "order": 12,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1106,7 +1071,7 @@
                 "cols": "12"
             }
         ],
-        "order": 10,
+        "order": 9,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1156,7 +1121,7 @@
                 "cols": "12"
             }
         ],
-        "order": 9,
+        "order": 8,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1212,7 +1177,7 @@
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "6"
             },
             {
                 "name": "Desktop",
@@ -1222,15 +1187,15 @@
         ],
         "order": 2,
         "className": "",
-        "visible": true,
-        "disabled": false
+        "visible": "true",
+        "disabled": "false"
     },
     {
         "id": "58ab4d5e3dd68192",
         "type": "ui-group",
         "name": "Streaming",
         "page": "bcc78241b99ba27f",
-        "width": "7",
+        "width": "6",
         "height": 1,
         "order": 2,
         "showTitle": false,
@@ -1244,7 +1209,7 @@
         "type": "ui-group",
         "name": "Settings",
         "page": "bcc78241b99ba27f",
-        "width": "5",
+        "width": "6",
         "height": 1,
         "order": 3,
         "showTitle": false,
@@ -1276,7 +1241,7 @@
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "6"
             },
             {
                 "name": "Desktop",
@@ -1294,7 +1259,7 @@
         "type": "ui-group",
         "name": "Streaming",
         "page": "5c3e73c675caac42",
-        "width": "7",
+        "width": "6",
         "height": 1,
         "order": 2,
         "showTitle": false,
@@ -1308,10 +1273,10 @@
         "type": "ui-group",
         "name": "Acquisition settings",
         "page": "5c3e73c675caac42",
-        "width": "5",
+        "width": "6",
         "height": 1,
         "order": 3,
-        "showTitle": true,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1353,24 +1318,10 @@
         "visible": "true",
         "disabled": "false"
     },
-    {
-        "id": "713fd4c3b9030f45",
-        "type": "ui-group",
-        "name": "body",
-        "page": "632260133d581caa",
-        "width": "12",
-        "height": "1",
-        "order": 2,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "5d39a98563150f22",
         "type": "ui-group",
-        "name": "header",
+        "name": "body",
         "page": "632260133d581caa",
         "width": "12",
         "height": 1,
@@ -1522,21 +1473,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 5,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "fa6393a7d7e3b7d7",
-        "type": "ui-group",
-        "name": "Plots Left",
-        "page": "d129fac8e7742d5b",
-        "width": 6,
-        "height": 1,
-        "order": 3,
+        "order": 4,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1621,42 +1558,14 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "ed357f41cdf951bc",
-        "type": "ui-group",
-        "name": "x vs y",
-        "page": "d129fac8e7742d5b",
-        "width": "12",
-        "height": 1,
-        "order": 2,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "bdcb68c6cff2da73",
-        "type": "ui-group",
-        "name": "Plot Right",
-        "page": "d129fac8e7742d5b",
-        "width": 6,
-        "height": 1,
-        "order": 4,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "402b3d24c87ab0d2",
         "type": "ui-group",
-        "name": "Group 53",
+        "name": "Informations",
         "page": "7a4e042a60b734a6",
-        "width": "4",
+        "width": "12",
         "height": 1,
-        "order": 3,
+        "order": 2,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1694,7 +1603,7 @@
                 "cols": "12"
             }
         ],
-        "order": 14,
+        "order": 13,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1744,7 +1653,7 @@
                 "cols": "12"
             }
         ],
-        "order": 15,
+        "order": 14,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1763,6 +1672,34 @@
         "disabled": "false",
         "groupType": "default"
     },
+    {
+        "id": "fa6393a7d7e3b7d7",
+        "type": "ui-group",
+        "name": "Plots Left",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 2,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "bdcb68c6cff2da73",
+        "type": "ui-group",
+        "name": "Plot Right",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 3,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
     {
         "id": "82099021.9ceb08",
         "type": "file",
@@ -2021,30 +1958,6 @@
             ]
         ]
     },
-    {
-        "id": "39c370d8a50f3acc",
-        "type": "ui-template",
-        "z": "1b667c6443413ced",
-        "group": "713fd4c3b9030f45",
-        "page": "",
-        "ui": "",
-        "name": "body",
-        "order": 1,
-        "width": "12",
-        "height": "10",
-        "head": "",
-        "format": "<template>\n    <v-container>\n\n<v-row>\n  <!-- Model -->\n  <v-col cols=\"12\" md=\"4\">\n    <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n      <div class=\"d-flex align-center\">\n        <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-cube-outline</v-icon>\n        <span class=\"text-subtitle-1 font-weight-medium\">Model</span>\n      </div>\n      <div class=\"font-weight-bold\">\n        {{ msg.payload.hardware_version }}\n      </div>\n    </v-card>\n  </v-col>\n\n  <!-- Name -->\n  <v-col cols=\"12\" md=\"4\">\n    <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n      <div class=\"d-flex align-center\">\n        <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-label-outline</v-icon>\n        <span class=\"text-subtitle-1 font-weight-medium\">Name</span>\n      </div>\n      <div class=\"font-weight-bold\">\n        {{ msg.payload.machine_name }}\n      </div>\n    </v-card>\n  </v-col>\n\n  <!-- Software version -->\n  <v-col cols=\"12\" md=\"4\">\n    <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n      <div class=\"d-flex align-center\">\n        <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-code-tags</v-icon>\n        <span class=\"text-subtitle-1 font-weight-medium\">Software version</span>\n      </div>\n      <div class=\"font-weight-bold\">\n        {{ msg.payload.software_version }}\n      </div>\n    </v-card>\n  </v-col>\n</v-row>\n\n\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"preview\"\n            class=\"text-center py-2\"\n            variant=\"flat\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-eye</v-icon>\n            <v-card-title class=\"text-h6\">Launch the Preview</v-card-title>\n            <v-card-text>Access a real-time, high-resolution preview to inspect the contents of your current water sample.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"metadata\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-play-circle</v-icon>\n            <v-card-title class=\"text-h6\">Start Acquisition</v-card-title>\n            <v-card-text>Start a new acquisition process to continuously collect images and metadata from your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"visualization\"\n            target=\"_blank\"\n            class=\"text-center py-2\"\n            variant=\"outlined\"\n          >\n            <v-icon size=\"64\" color=\"primary\">mdi-database-search</v-icon>\n            <v-card-title class=\"text-h6\">Explore Your Data</v-card-title>\n            <v-card-text>Open the data explorer to review, categorize, and interpret all previously captured sample information.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- Second Row: Standard size cards -->\n      <v-row>\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"/ps/docs/operation/protocol-v4.pdf\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-book-open-variant</v-icon>\n              Learn the Basics\n            </v-card-title>\n            <v-card-text>Find detailed instructions on using your PlanktoScope.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"http://pkscope-rich-kettle-10463.local/admin/grafana/d/host-summary/host-summary?orgId=1&from=now-5m&to=now&timezone=browser&var-DS_PROMETHEUS=PBFA97CFB590B2093&var-job=node-exporter&var-node=host.docker.internal:9100&var-diskdevices=%5Ba-z%5D%2B%7Cnvme%5B0-9%5D%2Bn%5B0-9%5D%2B%7Cmmcblk%5B0-9%5D%2B&refresh=5s\"\n            target=\"_blank\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-speedometer</v-icon>\n              Monitoring\n            </v-card-title>\n            <v-card-text>Keep track of system status and performance metrics.</v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"4\">\n          <v-card\n            href=\"calibration\"\n            variant=\"outlined\"\n          >\n            <v-card-title>\n              <v-icon class=\"mr-2\" color=\"primary\">mdi-tune</v-icon>\n              Calibration\n            </v-card-title>\n            <v-card-text>Adjust and verify settings for consistent results.</v-card-text>\n          </v-card>\n        </v-col>\n      </v-row>\n\n\n\n      <!-- 4th Row: Standard size cards -->\n\n    <v-row>\n      <!-- Image acquired -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Image acquired</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Object segmented -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium\">Object segmented</span>\n          </div>\n          <div class=\"text-h5 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage used inline -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"pa-3 d-flex align-center justify-space-between\" variant=\"tonal\">\n          <div class=\"d-flex align-center flex-grow-1 mr-4\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-sd</v-icon>\n            <span class=\"text-subtitle-1 font-weight-medium mr-2\">Storage</span>\n            <v-progress-linear\n              :model-value=\"msg.payload.storage_percent_used\"\n              height=\"12\"\n              rounded\n              class=\"flex-grow-1\"\n              :color=\"msg.payload.storage_percent_used > 90 ? 'error'\n                : msg.payload.storage_percent_used > 70 ? 'warning'\n                : 'success'\"\n            ></v-progress-linear>\n          </div>\n          <div class=\"text-h6 font-weight-bold\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n        </v-card>\n      </v-col>\n    </v-row>\n\n\n    </v-container>\n</template>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 510,
-        "y": 180,
-        "wires": [
-            []
-        ]
-    },
     {
         "id": "1cf1b20e425ec126",
         "type": "ui-template",
@@ -2057,38 +1970,14 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container>\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n        <v-col cols=\"12\" md=\"4\">\n          <h4 class=\"font-weight-bold mb-2\">PlanktoScope</h4>\n          <p class=\"mb-3\">\n            Open and Affordable Quantitative Imaging Platform.\n          </p>\n        </v-col>\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.fairscope.com/\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"blue\" class=\"mr-1\">mdi-earth</v-icon>\n            Visit FairScope\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.figma.com/design/KXH3qkalr7eeFbyGsutZKt/PlanktoScope-Dashboard-v2?node-id=6-2&m=dev&t=Nn2N1o9OJveQCSco-1\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-image</v-icon>\n            Figma Design\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"orange\" class=\"mr-1\">mdi-information-outline</v-icon>\n            Open Issues\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-4 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n      <v-col cols=\"12\" md=\"6\">\n        © {{ new Date().getFullYear() }} PlanktoScope — made by \n        <a href=\"https://fairscope.co\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"text-decoration: none; color: inherit;\">\n          FairScope\n        </a>\n      </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
+        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid>\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n        <v-col cols=\"12\" md=\"4\" class=\"d-flex align-baseline\">\n          <v-icon size=\"20\">\n            <svg class=\"v-icon__svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52.916666 52.916666\">\n              <!-- ellipse -->\n              <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" fill=\"#ffffff\" stroke=\"#adadad\"\n                stroke-width=\"0.255058\" stroke-dasharray=\"0.255058 0.510117\" />\n\n              <!-- path -->\n              <path fill=\"primary\" d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,.... z\" />\n            </svg>\n          </v-icon>\n          <h4 class=\"font-weight-bold mb-0\">PlanktoScope</h4>\n          <span class=\"mx-2\" style=\"border-left:1px solid #ccc; height:1em;\"></span>\n          <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n        </v-col>\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"orange\" class=\"mr-1\">mdi-information-outline</v-icon>\n            Open Issues\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "widget:ui",
         "className": "",
         "x": 510,
-        "y": 220,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "cd5cd3a0277b8dba",
-        "type": "ui-template",
-        "z": "1b667c6443413ced",
-        "group": "5d39a98563150f22",
-        "page": "",
-        "ui": "",
-        "name": "header",
-        "order": 1,
-        "width": "12",
-        "height": "6",
-        "head": "",
-        "format": "<template>\n  <v-empty-state\n    headline=\"Welcome on the PlanktoScope GUI,\"\n    icon=\"$vuetify\"\n    title=\"What would you like to do today?\"\n  >\n  </v-empty-state>\n</template>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 510,
-        "y": 140,
+        "y": 440,
         "wires": [
             []
         ]
@@ -2196,23 +2085,6 @@
             ]
         ]
     },
-    {
-        "id": "3580c4605b01c2b0",
-        "type": "debug",
-        "z": "1b667c6443413ced",
-        "name": "debug 7",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1160,
-        "y": 160,
-        "wires": []
-    },
     {
         "id": "605bf275a4d80952",
         "type": "storage info",
@@ -2303,63 +2175,187 @@
         "y": 280,
         "wires": [
             [
-                "39c370d8a50f3acc"
+                "52902327e2363f8b",
+                "cd5cd3a0277b8dba",
+                "0c0eb2a907745142"
             ]
         ]
     },
     {
-        "id": "a57a165cd0ce511b",
+        "id": "52902327e2363f8b",
         "type": "ui-template",
-        "z": "ab58b3fd0e6bcd77",
-        "group": "58ab4d5e3dd68192",
+        "z": "1b667c6443413ced",
+        "group": "",
         "page": "",
-        "ui": "",
-        "name": "Streaming",
-        "order": 1,
-        "width": "7",
-        "height": "18",
+        "ui": "e6ae26617c24c3ea",
+        "name": "toolbar",
+        "order": 2,
+        "width": "12",
+        "height": "6",
         "head": "",
-        "format": "  <iframe src=\"/preview/node-red\" >\n  </iframe>\n  <style>\n    iframe {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border: none;\n    }\n  </style>",
+        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n    const options = { year: \"numeric\", month: \"short\", day: \"2-digit\" };\n    const dateStr = now.toLocaleString(\"en-US\", options).replace(\",\", \"\");\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    el.textContent = `${dateStr} - ${hh}:${mm} (UTC)`;\n}\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n            <i class=\"mdi mdi-home\"></i> Home\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"gallery\">\n            <i class=\"mdi mdi-image-multiple-outline\"></i> Gallery\n        </div>\n\n        <div class=\"menu-item\" data-href=\"export\">\n            <i class=\"mdi mdi-folder-zip-outline\"></i> Export\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-item\" data-href=\"hardware\">\n            <i class=\"mdi mdi-robot-love-outline\"></i> Hardware\n        </div>\n\n        <div class=\"menu-item\" data-href=\"settings\">\n            <i class=\"mdi mdi-cog-outline\"></i> Settings\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
-        "templateScope": "local",
+        "templateScope": "widget:ui",
         "className": "",
-        "x": 1310,
-        "y": 100,
+        "x": 820,
+        "y": 200,
+        "wires": [
+            [
+                "1db1c2e3e19e85ff"
+            ]
+        ]
+    },
+    {
+        "id": "8efc52e6ee9206f6",
+        "type": "poweroff",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "x": 1160,
+        "y": 240,
         "wires": [
             []
         ]
     },
     {
-        "id": "c8de0186a0a927e8",
-        "type": "function",
-        "z": "ab58b3fd0e6bcd77",
-        "name": "Get Global Variables",
-        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 120,
-        "y": 140,
+        "id": "39c7e4b018ce16cb",
+        "type": "reboot",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "x": 1160,
+        "y": 200,
         "wires": [
-            [
-                "f514a138d38d3c61",
-                "4f5f150680be40da"
-            ]
+            []
         ]
     },
     {
-        "id": "927b92eee9edfcbe",
-        "type": "ui-template",
-        "z": "ab58b3fd0e6bcd77",
-        "group": "7572915171e440cd",
-        "page": "",
-        "ui": "",
-        "name": "Navigation Top",
+        "id": "1db1c2e3e19e85ff",
+        "type": "switch",
+        "z": "1b667c6443413ced",
+        "name": "",
+        "property": "payload",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "reboot",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "shutdown",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 970,
+        "y": 200,
+        "wires": [
+            [
+                "39c7e4b018ce16cb"
+            ],
+            [
+                "8efc52e6ee9206f6"
+            ]
+        ]
+    },
+    {
+        "id": "cd5cd3a0277b8dba",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "5d39a98563150f22",
+        "page": "",
+        "ui": "",
+        "name": "body",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-12\">\n      <v-empty-state \n      icon=\"mdi-view-dashboard\"\n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-database-search</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Export your data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"export\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-folder-zip-outline</v-icon>\n          <span class=\"text-h6\">Export your data</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n      <!-- Calibration -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/calibration\"\n          color=\"grey-darken-3\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-tune</v-icon>\n          Run the Calibration\n        </v-btn>\n      </v-col>\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 510,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "0c0eb2a907745142",
+        "type": "debug",
+        "z": "1b667c6443413ced",
+        "name": "debug 15",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 420,
+        "y": 380,
+        "wires": []
+    },
+    {
+        "id": "a57a165cd0ce511b",
+        "type": "ui-template",
+        "z": "ab58b3fd0e6bcd77",
+        "group": "58ab4d5e3dd68192",
+        "page": "",
+        "ui": "",
+        "name": "Streaming",
+        "order": 1,
+        "width": "6",
+        "height": "18",
+        "head": "",
+        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-top: 75%; /* proportion 4:3 */\n    overflow: hidden;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n    margin: 0;\n  }\n</style>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1310,
+        "y": 100,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "c8de0186a0a927e8",
+        "type": "function",
+        "z": "ab58b3fd0e6bcd77",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 120,
+        "y": 140,
+        "wires": [
+            [
+                "f514a138d38d3c61",
+                "4f5f150680be40da"
+            ]
+        ]
+    },
+    {
+        "id": "927b92eee9edfcbe",
+        "type": "ui-template",
+        "z": "ab58b3fd0e6bcd77",
+        "group": "7572915171e440cd",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
         "order": 1,
         "width": 0,
         "height": 0,
@@ -2564,7 +2560,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        LED Control\n      </v-card-title>\n      <v-card-text>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Focus Control\n      </v-card-title>\n      <v-card-text>\n        <!-- Focus slider -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider v-model.number=\"focus_distance\" :max=\"maxFocus\" :min=\"minFocus\" :step=\"25\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field v-model.number=\"focus_distance\" type=\"number\" variant=\"outlined\" hide-details suffix=\"μm\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('focus_speed')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_distance_preset\" divided shaped color=\"primary\"\n              class=\"d-flex justify-space-between\" mandatory @update:model-value=\"on_focus_distance_toggle\">\n              <v-btn v-for=\"value in focus_distance_presets\" :key=\"'distance-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Focus direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_focus_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'UP'\">UP</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">DOWN</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Pump Control\n      </v-card-title>\n      <v-card-text>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 8\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 4\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: { msg: { type: Object, default: () => ({}) } },\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n      led_state: \"off\",\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((val) => val === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((val) => val === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((val) => val === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // ✅ Handle status messages\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n        return;\n      }\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n        return;\n      }\n\n      // ✅ Handle LED status (either msg.payload.led_status or status/light)\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n        return;\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n        return;\n      }\n\n      // 🔸 Regular actuator/global messages\n      this.pump_flowrate = p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n      this.pump_manual_volume = p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      this.focus_distance =\n        typeof p.focus_distance === \"number\" ? p.focus_distance : this.focus_distance;\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") this.led_state = p.ledState;\n      else if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action))\n        this.led_state = p.action;\n    },\n\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dirUpper = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dirUpper,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n    on_focus_distance_toggle(val) { if (val != null) this.focus_distance = val; },\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000, x2 = 1000, y2 = 2000, x3 = 5000, y3 = 5000;\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n      this.send({\n        topic: \"set_global/focus\",\n        payload: { focus_distance: d, focus_speed: speed },\n      });\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        LED Control\n      </v-card-title> \n      <v-divider></v-divider>\n      <v-card-text>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-title>\n    Focus Control\n  </v-card-title>\n  <v-divider></v-divider>\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Pump Control\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3269,7 +3265,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\"\n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_interframe_volume\"\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_interframe_volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n    };\n  },\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n        if (p.acq_id !== undefined) this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        if (p.acq_nb_frame !== undefined) this.acq_nb_frame = Number(p.acq_nb_frame);\n        if (p.acq_interframe_volume !== undefined) this.acq_interframe_volume = Number(p.acq_interframe_volume);\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.calibration_sensor_width !== undefined) this.calibration_sensor_width = Number(p.calibration_sensor_width);\n        if (p.calibration_sensor_height !== undefined) this.calibration_sensor_height = Number(p.calibration_sensor_height);\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n          if (s.includes(\"started\") || s.includes(\"running\") || s.includes(\"capturing\")) {\n            this.resetProgress();\n            this.acq_status = \"on\";\n          } else if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\") || s.includes(\"not capturing\")) {\n            this.acq_status = \"off\";\n          }\n        }\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n        this.incrementAcqId();\n          this.resetProgress();\n        }\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n    resetProgress() { this.progression = 0; this.duration_left = 0; this.lastUpdateTime = Date.now(); },\n    incrementAcqId() { const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\"); this.acq_id = next; this.sendUpdate(); },\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0) / 1000;\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n      this.updateProgress();\n      this.sendUpdate();\n    },\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n      if (value === \"on\") this.resetProgress();\n      if (value === \"off\") this.incrementAcqId();\n      if (typeof this.send === \"function\") this.send({ topic: \"imager/image\", payload: { status: value } });\n    },\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n        </p>\n      \n        <v-divider class=\"my-3\"></v-divider>\n      \n        <ul class=\"ml-4\">\n          <li>\n            <strong>Sensor width:</strong>\n            {{ Math.round(calibration_sensor_width) }} px → {{ Math.round(sensor_width_um) }} µm\n          </li>\n          <li>\n            <strong>Sensor height:</strong>\n            {{ Math.round(calibration_sensor_height) }} px → {{ Math.round(sensor_height_um) }} µm\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            {{ Math.round(acq_flowcell_thickness) }} µm\n            <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n              (Check or modify in hardware settings)\n            </a>\n          </li>\n        </ul>\n      \n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n      \n        <ol class=\"ml-4\">\n          <li>\n            Area per image = width × height =\n            {{ Math.round(sensor_width_um) }} × {{ Math.round(sensor_height_um) }} =\n            {{ Math.round(area) }} µm²\n          </li>\n          <li>\n            Volume per image = area × thickness =\n            {{ Math.round(area) }} × {{ Math.round(acq_flowcell_thickness) }} =\n            {{ Math.round(area * acq_flowcell_thickness) }} µm³\n          </li>\n          <li>\n            Convert µm³ → mL: divide by 1e12 →\n            {{ fmt(frame_volume_ml) }} mL per image\n          </li>\n          <li>\n            Total = {{ acq_nb_frame }} × {{ fmt(frame_volume_ml) }} mL =\n            <strong>{{ fmt(acq_imaged_volume) }} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n      this.openHint(\"Volume Imaged\", html);\n    },\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n    openHint(title, text) { this.hintTitle = title; this.hintText = text; this.hintDialog = true; },\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          acq_status: this.acq_status,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3333,8 +3329,7 @@
         "y": 140,
         "wires": [
             [
-                "f841ebf999dd8cb3",
-                "e9760c98e9340f3e"
+                "f841ebf999dd8cb3"
             ],
             [
                 "09ecc922fe2214a8"
@@ -3346,7 +3341,7 @@
         "type": "function",
         "z": "35d7387466dd0bc0",
         "name": "set acq_params",
-        "func": "if (msg.topic) {\n    global.set(\"acq_id\", msg.payload.acq_id);\n    global.set(\"acq_nb_frame\", msg.payload.acq_nb_frame);\n    global.set(\"acq_interframe_volume\", msg.payload.acq_interframe_volume);\n    global.set(\"acq_imaged_volume\", msg.payload.acq_imaged_volume);\n    global.set(\"acq_pumped_volume\", msg.payload.acq_pumped_volume);\n    global.set(\"acq_comment\", msg.payload.acq_comment);\n    global.set(\"acq_progression\", msg.payload.acq_progression);\n    global.set(\"acq_duration_left\", msg.payload.acq_duration_left);\n    global.set(\"acq_status\", msg.payload.acq_status);\n}\nreturn msg;\n",
+        "func": "if (msg.topic) {\n    global.set(\"acq_id\", msg.payload.acq_id);\n    global.set(\"acq_nb_frame\", msg.payload.acq_nb_frame);\n    global.set(\"acq_interframe_volume\", msg.payload.acq_interframe_volume);\n    global.set(\"acq_imaged_volume\", msg.payload.acq_imaged_volume);\n    global.set(\"acq_pumped_volume\", msg.payload.acq_pumped_volume);\n    global.set(\"acq_comment\", msg.payload.acq_comment);\n    global.set(\"acq_progression\", msg.payload.acq_progression);\n    global.set(\"acq_duration_left\", msg.payload.acq_duration_left);\n    global.set(\"acq_start_timestamp\", msg.payload.acq_start_timestamp);\n    \n}\nreturn msg;\n",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
@@ -3459,8 +3454,7 @@
         "y": 200,
         "wires": [
             [
-                "aa6924c7e0aff26c",
-                "b373abca8b67ca64"
+                "aa6924c7e0aff26c"
             ]
         ]
     },
@@ -3585,7 +3579,7 @@
         "type": "function",
         "z": "35d7387466dd0bc0",
         "name": "start acquisition",
-        "func": "const acq_interframe_volume = global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = global.get(\"acq_nb_frame\") || 0;\n\n\n// Crée le payload final\nmsg.payload = {\n    action: \"image\",\n    pump_direction: \"FORWARD\",\n    volume: acq_interframe_volume/1000,\n    nb_frame: acq_nb_frame,\n    sleep: 0.1\n};\n\nreturn msg;\n",
+        "func": "const acq_interframe_volume = global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = global.get(\"acq_nb_frame\") || 0;\n\n\n// Crée le payload final\nmsg.payload = {\n    action: \"image\",\n    pump_direction: \"FORWARD\",\n    volume: acq_interframe_volume,\n    nb_frame: acq_nb_frame,\n    sleep: 0.1\n};\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -3596,8 +3590,7 @@
         "y": 280,
         "wires": [
             [
-                "ce5cca3b8fe34379",
-                "5090913821c57c81"
+                "ce5cca3b8fe34379"
             ]
         ]
     },
@@ -3626,57 +3619,6 @@
             ]
         ]
     },
-    {
-        "id": "b373abca8b67ca64",
-        "type": "debug",
-        "z": "35d7387466dd0bc0",
-        "name": "debug 11",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "payload",
-        "targetType": "msg",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 520,
-        "y": 340,
-        "wires": []
-    },
-    {
-        "id": "5090913821c57c81",
-        "type": "debug",
-        "z": "35d7387466dd0bc0",
-        "name": "debug 13",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "payload",
-        "targetType": "msg",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 940,
-        "y": 340,
-        "wires": []
-    },
-    {
-        "id": "e9760c98e9340f3e",
-        "type": "debug",
-        "z": "35d7387466dd0bc0",
-        "name": "debug 14",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "payload",
-        "targetType": "msg",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 920,
-        "y": 80,
-        "wires": []
-    },
     {
         "id": "250979b4672d81b6",
         "type": "ui-event",
@@ -3749,10 +3691,10 @@
         "group": "bfd4acb7b243514f",
         "name": "List of acq",
         "label": "",
-        "order": 2,
+        "order": 1,
         "width": 0,
         "height": 0,
-        "maxrows": "10",
+        "maxrows": "100",
         "passthru": false,
         "autocols": false,
         "showSearch": false,
@@ -3928,8 +3870,7 @@
         "wires": [
             [
                 "4bdd8a4afcdb704b",
-                "f8f4b34842d35713",
-                "621e28a4a222b99a"
+                "f8f4b34842d35713"
             ]
         ]
     },
@@ -4054,58 +3995,23 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 540,
-        "y": 460,
+        "x": 680,
+        "y": 140,
         "wires": [
             [
-                "7b77659569034650",
                 "26074b8d8ad8abf9"
             ]
         ]
     },
-    {
-        "id": "621e28a4a222b99a",
-        "type": "debug",
-        "z": "0fd76ac156d78937",
-        "name": "debug 6",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1100,
-        "y": 180,
-        "wires": []
-    },
-    {
-        "id": "7b77659569034650",
-        "type": "debug",
-        "z": "0fd76ac156d78937",
-        "name": "debug 5",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 860,
-        "y": 200,
-        "wires": []
-    },
     {
         "id": "26074b8d8ad8abf9",
         "type": "ui-template",
         "z": "0fd76ac156d78937",
-        "group": "bfd4acb7b243514f",
-        "page": "",
+        "group": "",
+        "page": "7a4e042a60b734a6",
         "ui": "",
         "name": "Dialog",
-        "order": 1,
+        "order": 2,
         "width": 0,
         "height": 0,
         "head": "",
@@ -4113,9 +4019,9 @@
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
-        "templateScope": "local",
+        "templateScope": "widget:page",
         "className": "",
-        "x": 750,
+        "x": 850,
         "y": 140,
         "wires": [
             [
@@ -4234,11 +4140,9 @@
         ]
     },
     {
-        "id": "f530763503fdc7d1",
+        "id": "62f69ab05b710c7c",
         "type": "mqtt in",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
         "name": "",
         "topic": "status/#",
         "qos": "0",
@@ -4247,67 +4151,18 @@
         "nl": false,
         "rap": false,
         "inputs": 0,
-        "x": 100,
-        "y": 320,
-        "wires": [
-            [
-                "f0313532a2b77337"
-            ]
-        ]
-    },
-    {
-        "id": "e5a0432fc7b35b29",
-        "type": "function",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "name": "Count objects segmented",
-        "func": "var objectCount = global.get('objectCount') || 0;\n\nif (msg.payload.status === 'Done') {\n    msg.payload.objectCount = objectCount;\n    objectCount=0;\n    }\nelse if (msg.topic === 'status/segmenter/metric') {\n    objectCount++;\n}\n\nglobal.set('objectCount', objectCount);\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 410,
-        "y": 320,
-        "wires": [
-            [
-                "ba8045b3448d5bbf"
-            ]
-        ]
-    },
-    {
-        "id": "ba8045b3448d5bbf",
-        "type": "switch",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "name": "msg.payload.metadata.equivalent_diameter is not null",
-        "property": "payload.metadata.equivalent_diameter",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "nnull"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 740,
-        "y": 320,
+        "x": 200,
+        "y": 960,
         "wires": [
             [
-                "68fe28f50beb2add"
+                "e2269afad765ca6e"
             ]
         ]
     },
     {
-        "id": "f0313532a2b77337",
+        "id": "e2269afad765ca6e",
         "type": "switch",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
         "name": "",
         "property": "topic",
         "propertyType": "msg",
@@ -4321,21 +4176,19 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 230,
-        "y": 320,
+        "x": 350,
+        "y": 960,
         "wires": [
             [
-                "e5a0432fc7b35b29",
-                "c6c66ebc50dd5d90"
+                "6c0e567b12e22791",
+                "fae799ce36e737e1"
             ]
         ]
     },
     {
-        "id": "e045f6939008f23f",
+        "id": "6c0e567b12e22791",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
         "group": "bdcb68c6cff2da73",
         "name": "",
         "label": "Histogram - Equivalent Diameter",
@@ -4349,14 +4202,14 @@
         "xAxisType": "bins",
         "xAxisFormat": "",
         "xAxisFormatType": "auto",
-        "xmin": "20",
-        "xmax": "100",
+        "xmin": "0",
+        "xmax": "300",
         "yAxisLabel": "Abundance",
         "yAxisProperty": "payload.metadata.equivalent_diameter",
         "yAxisPropertyType": "msg",
         "ymin": "",
         "ymax": "",
-        "bins": "80",
+        "bins": "10",
         "action": "append",
         "stackSeries": false,
         "pointShape": "circle",
@@ -4388,184 +4241,17 @@
         "height": "6",
         "className": "",
         "interpolation": "linear",
-        "x": 1020,
-        "y": 500,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "68fe28f50beb2add",
-        "type": "function",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "name": "convert px to um",
-        "func": "// Conversion factor from pixels to micrometers (µm)\nconst px_to_um = 0.75;\n\n// Convert relevant measurements\nmsg.payload.metadata.equivalent_diameter = Math.round(msg.payload.metadata.equivalent_diameter * px_to_um);\nmsg.payload.metadata.width = Math.round(msg.payload.metadata.width * px_to_um);\nmsg.payload.metadata.height = Math.round(msg.payload.metadata.height * px_to_um);\nmsg.payload.metadata.area = Math.round(msg.payload.metadata.area * (px_to_um ** 2)); // Area is in square units\nmsg.payload.metadata.area_exc = Math.round(msg.payload.metadata.area_exc * (px_to_um ** 2));\nmsg.payload.metadata.convex_area = Math.round(msg.payload.metadata.convex_area * (px_to_um ** 2));\nmsg.payload.metadata.major = Math.round(msg.payload.metadata.major * px_to_um);\nmsg.payload.metadata.minor = Math.round(msg.payload.metadata.minor * px_to_um);\nmsg.payload.metadata.perim = Math.round(msg.payload.metadata[\"perim.\"] * px_to_um); // Ensure proper key reference\nmsg.payload.metadata.bounding_box_area = Math.round(msg.payload.metadata.bounding_box_area * (px_to_um ** 2));\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 150,
-        "y": 520,
-        "wires": [
-            [
-                "e045f6939008f23f",
-                "693e1ad09770bdf5",
-                "7433aae2400b7f78",
-                "a90099cfe7a37a37",
-                "df0dcb1175b8bd5f"
-            ]
-        ]
-    },
-    {
-        "id": "a20376f0ac08af8e",
-        "type": "ui-markdown",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "bdcb68c6cff2da73",
-        "name": "Histogram of equivalent_diameter",
-        "order": 3,
-        "width": "3",
-        "height": "6",
-        "content": "### Distribution of Object Sizes  \nUnderstanding the size distribution of planktonic objects helps identify dominant size classes and detect anomalies. A skewed distribution might indicate specific biological trends, such as a bloom of a particular species or a technical issue in the acquisition process.  \n\n*In the graph:*  \n- A **peak in smaller sizes** suggests dominance of tiny plankton.  \n- A **broad distribution** indicates a mix of various size classes.  \n- A **skewed or bimodal pattern** may reflect biological or technical factors (e.g., species-specific blooms or imaging biases).\n",
-        "className": "",
-        "x": 1020,
-        "y": 540,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "694187e7d85faec3",
-        "type": "ui-markdown",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "bdcb68c6cff2da73",
-        "name": "elongation vs. area",
-        "order": 4,
-        "width": "3",
-        "height": "6",
-        "content": "### Relationship Between Elongation and Object Area  \nThis scatter plot helps assess whether larger objects tend to be more elongated or compact. Certain plankton species have characteristic shapes, and identifying correlations between elongation and area can aid in distinguishing different taxa or understanding morphological variability.  \n\n*In the graph:*  \n- **Top-right**: Large and highly elongated objects (e.g., filamentous plankton).  \n- **Bottom-right**: Small but highly elongated objects (e.g., thin needle-like forms). \n- **Top-left**: Large but compact objects (e.g., rounded or clustered plankton). \n- **Bottom-left**: Small and compact objects (e.g., spherical or short structures).",
-        "className": "",
-        "x": 970,
-        "y": 620,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "693e1ad09770bdf5",
-        "type": "ui-chart",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "bdcb68c6cff2da73",
-        "name": "elongation vs. area",
-        "label": "elongation vs. area",
-        "order": 2,
-        "chartType": "scatter",
-        "category": "elongation vs. area",
-        "categoryType": "str",
-        "xAxisLabel": "elongation (ratio of major to minor axis)",
-        "xAxisProperty": "payload.metadata.elongation",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "area (μm²)",
-        "yAxisProperty": "payload.metadata.area",
-        "yAxisPropertyType": "msg",
-        "ymin": "300",
-        "ymax": "1500",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#ff0088",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 970,
-        "y": 580,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "82a3257cd0a3815d",
-        "type": "ui-markdown",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "fa6393a7d7e3b7d7",
-        "name": "equivalent_diameter vs. MeanValue",
-        "order": 3,
-        "width": "3",
-        "height": "6",
-        "content": "### Variation of Mean Brightness with Equivalent Diameter  \nThis graph explores whether larger objects tend to be brighter or darker. This can reveal differences in pigmentation, transparency, or even imaging inconsistencies.  \n\n*In the graph:*   \n- **Top-right**: Large and bright objects.\n- **Top-left**: Small and bright objects.\n- **Bottom-right**: Large and dark objects.\n- **Bottom-left**: Small and dark objects.  ",
-        "className": "",
-        "x": 560,
-        "y": 700,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "44ef242ece9b6b4b",
-        "type": "ui-markdown",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "fa6393a7d7e3b7d7",
-        "name": "MeanSaturation vs. MeanValue",
-        "order": 4,
-        "width": "3",
-        "height": "6",
-        "content": "### Relationship Between Mean Saturation and Mean Brightness\nThis visualization helps understand how color properties vary with brightness. Some plankton groups exhibit distinct coloration, and saturation could be a useful feature for classification. A strong trend might suggest systematic differences in pigmentation or optical properties across plankton groups.\n\n*In the graph:*  \n- **Top-right**: Bright and highly saturated objects (vivid colors).  \n- **Top-left**: Bright but low-saturation objects (pale or near-white).  \n- **Bottom-right**: Dark but highly saturated objects (deep, rich colors).  \n- **Bottom-left**: Dark and low-saturation objects (grayish or faintly colored).",
-        "className": "",
-        "x": 550,
-        "y": 780,
+        "x": 580,
+        "y": 960,
         "wires": [
             []
         ]
     },
     {
-        "id": "7433aae2400b7f78",
+        "id": "fae799ce36e737e1",
         "type": "ui-chart",
         "z": "14f8c9b5ce1235cc",
         "d": true,
-        "g": "979647e2e34284fb",
         "group": "fa6393a7d7e3b7d7",
         "name": "equivalent_diameter vs. MeanValue",
         "label": "equivalent_diameter vs. MeanValue",
@@ -4574,7 +4260,7 @@
         "category": "equivalent_diameter vs. MeanValue",
         "categoryType": "str",
         "xAxisLabel": "Equivalent Diameter (μm)",
-        "xAxisProperty": "payload.metadata.equivalent_diameter",
+        "xAxisProperty": "payload.metadata.x",
         "xAxisPropertyType": "msg",
         "xAxisType": "linear",
         "xAxisFormat": "",
@@ -4582,7 +4268,7 @@
         "xmin": "0",
         "xmax": "50",
         "yAxisLabel": "MeanValue (0–255, grayscale value)",
-        "yAxisProperty": "payload.metadata.MeanValue",
+        "yAxisProperty": "payload.metadata.y",
         "yAxisPropertyType": "msg",
         "ymin": "150",
         "ymax": "255",
@@ -4618,161 +4304,8 @@
         "height": "6",
         "className": "",
         "interpolation": "linear",
-        "x": 560,
-        "y": 660,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "a90099cfe7a37a37",
-        "type": "ui-chart",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "fa6393a7d7e3b7d7",
-        "name": "MeanSaturation vs. MeanValue",
-        "label": "MeanSaturation vs. MeanValue",
-        "order": 2,
-        "chartType": "scatter",
-        "category": "MeanSaturation vs. MeanValue",
-        "categoryType": "str",
-        "xAxisLabel": "MeanSaturation (%)",
-        "xAxisProperty": "payload.metadata.MeanSaturation",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "MeanValue (0–255, grayscale value)",
-        "yAxisProperty": "payload.metadata.MeanValue",
-        "yAxisPropertyType": "msg",
-        "ymin": "150",
-        "ymax": "255",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#ff9500",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 550,
-        "y": 740,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "df0dcb1175b8bd5f",
-        "type": "ui-chart",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "group": "ed357f41cdf951bc",
-        "name": "x vs. y",
-        "label": "x vs. y",
-        "order": 1,
-        "chartType": "scatter",
-        "category": "x vs. y",
-        "categoryType": "str",
-        "xAxisLabel": "x",
-        "xAxisProperty": "payload.metadata.x",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "y",
-        "yAxisProperty": "payload.metadata.y",
-        "yAxisPropertyType": "msg",
-        "ymin": "",
-        "ymax": "",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#2b00ff",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "6",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 930,
-        "y": 440,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "c6c66ebc50dd5d90",
-        "type": "switch",
-        "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "g": "979647e2e34284fb",
-        "name": "",
-        "property": "payload.status",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "Done",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 430,
-        "y": 380,
+        "x": 580,
+        "y": 1160,
         "wires": [
             []
         ]
@@ -4851,7 +4384,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Visualization\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4875,7 +4408,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Visualization\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -5036,7 +4569,7 @@
         "width": "12",
         "height": "6",
         "head": "",
-        "format": "<template>\n  <v-empty-state\n    headline=\"Calibration steps\"\n    icon=\"$vuetify\"\n    title=\"Follow these steps to ensure optimal image quality and measurement accuracy\"\n  >\n  </v-empty-state>\n</template>\n",
+        "format": "<template>\n  <v-empty-state\n    headline=\"Calibration steps\"\n    icon=\"mdi-crosshairs-gps\"\n    title=\"Follow these steps to ensure optimal image quality and measurement accuracy\"\n  >\n  </v-empty-state>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -5186,7 +4719,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container class=\"pa-4 d-flex flex-wrap justify-center align-start\" style=\"gap:32px;\">\n    <!-- PREVIEW -->\n    <v-card class=\" calibration-container\" style=\"width:1000px;height:750px;position:relative;overflow:hidden\">\n      <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n    </v-card>\n\n    \n    <!-- Control Panel -->\n    <v-card width=\"440\" class=\"px-4\">\n      <v-card-title class=\"text-left text-primary\">\n        White Balance Calibration\n      </v-card-title>\n\n\n\n\n\n      <v-divider class=\"mb-4\"></v-divider>\n\n\n    <!-- Step 1: Refresh -->\n    <section class=\"mb-6\">\n      <h3 class=\"text-subtitle-1 mb-2\">1. Refresh</h3>\n      <p class=\"text-caption mb-3\">\n        Click <b>Refresh the value of the gains</b> to start.\n      </p>\n      <v-btn block color=\"error\" class=\"mb-4\" @click=\"refreshGain\">\n        Refresh\n      </v-btn>\n    </section>\n\n      <v-divider class=\"mb-4\"></v-divider>\n    <!-- Step 2: Pick a pixel -->\n    <section class=\"mb-6\">\n      <h3 class=\"text-subtitle-1 mb-2\">2. Pick a Pixel</h3>\n      <p class=\"text-caption mb-3\">\n        Pick a pixel from the live stream.\n      </p>\n      <div class=\"text-center mb-3\">\n        Pick a pixel from the stream :\n        <input\n          class=\"colorpicker\"\n          type=\"color\"\n          v-model=\"selectedColor\"\n          @input=\"onColorInput\"\n        />\n      </div>\n    </section>\n\n      <v-divider class=\"mb-4\"></v-divider>\n    <!-- Step 3: Apply Suggested Gains -->\n    <section class=\"mb-6\">\n      <h3 class=\"text-subtitle-1 mb-2\">3. Apply Suggested Gains</h3>\n       <v-data-table\n        :items=\"rows\"\n        density=\"comfortable\"\n        hide-default-footer\n        class=\"gain-table mb-6\"\n      >\n\n        <template #item.current=\"{ item }\">\n          <div class=\"text-center font-mono\">{{ item.current }}</div>\n        </template>\n\n        <template #item.suggested=\"{ item }\">\n          <v-text-field\n            v-model.number=\"item.suggested\"\n            type=\"number\"\n            min=\"0\"\n            hide-details\n            density=\"compact\"\n            variant=\"underlined\"\n            class=\"text-primary text-center suggested-input\"\n            @change=\"onManualEdit(item.channel,item.suggested)\"\n          ></v-text-field>\n        </template>\n      </v-data-table>\n      <p class=\"text-caption mb-3\">\n        Click <b>Apply Suggested Gains</b> after selecting your pixel.\n      </p>\n      <v-btn\n        block\n        color=\"primary\"\n        class=\"mt-auto\"\n        :disabled=\"!suggested.red && !suggested.blue\"\n        @click=\"applySuggested\"\n      >\n        Apply Suggested Gains\n      </v-btn>\n    </section>\n\n      <v-divider class=\"mb-4\"></v-divider>\n    <!-- Step 4: Repeat & Monitor Progress -->\n    <section>\n      <h3 class=\"text-subtitle-1 mb-2\">4. Repeat Until Saturation ≈ 0%</h3>\n      <p class=\"text-caption\">\n        Repeat steps 10 times until the saturation value approaches <b>0%</b>.\n        \n      </p>\n\n      <!-- Saturation indicator -->\n      <div class=\"mb-2\"\n        :style=\"{ color: hsl.s < 10 ? 'green' : hsl.s < 30 ? 'orange' : 'red' }\"\n      >\n        Current saturation: <b>{{ hsl.s }} %</b>\n      </div>\n      <!-- Progress feedback -->\n      <div class=\"mb-4 text-center text-caption\">\n        <v-progress-linear\n          :model-value=\"(loopCount / totalLoops) * 100\"\n          color=\"primary\"\n          height=\"40\"\n          class=\"rounded mb-1\"\n        />\n        <div>\n          <template v-if=\"loopCount === 0\">\n            Start calibration — click <b>Refresh</b>.\n          </template>\n          <template v-else-if=\"loopCount < totalLoops\">\n            Iteration {{ loopCount }} / {{ totalLoops }} — sample & apply.\n          </template>\n          <template v-else>\n            ✅ Calibration complete! Saturation should be near <b>0%</b>.\n          </template>\n        </div>\n      </div>\n\n    </section>\n\n    </v-card>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      selectedColor: \"#ffffff\",\n      hsl: { h: 0, s: 0, l: 0 },\n      loopCount: 0,\n      totalLoops: 10,\n      headers: [\n        { text: \"Channel\", value: \"channel\", align: \"start\" },\n        { text: \"Current\", value: \"current\", align: \"center\" },\n        { text: \"Suggested\", value: \"suggested\", align: \"center\" },\n      ],\n    };\n  },\n  computed: {\n    rows() {\n      return [\n        { channel: \"AWRed\", current: this.current.red, suggested: this.suggested.red },\n        { channel: \"AWBlue\", current: this.current.blue, suggested: this.suggested.blue },\n      ];\n    },\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.calibration_wbg_red !== undefined)\n          this.current.red = Number(p.calibration_wbg_red);\n        if (p.calibration_wbg_blue !== undefined)\n          this.current.blue = Number(p.calibration_wbg_blue);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: { white_balance_gain: this.current },\n      });\n    },\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    onColorInput(e) {\n      const hex = e.target.value;\n      this.selectedColor = hex;\n      this.hsl = this.hexToHsl(hex);\n      const { r, g, b } = this.hexToRgb(hex);\n      const redAdj = g - r + this.current.red;\n      const blueAdj = g - b + this.current.blue;\n      this.suggested.red = Math.max(0, Math.min(255, Math.round(redAdj)));\n      this.suggested.blue = Math.max(0, Math.min(255, Math.round(blueAdj)));\n    },\n    onManualEdit(ch, v) {\n      if (ch === \"AWRed\") this.suggested.red = v;\n      if (ch === \"AWBlue\") this.suggested.blue = v;\n    },\n    applySuggested() {\n      if (!this.suggested.red && !this.suggested.blue) return;\n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: parseInt(this.suggested.red, 10),\n            blue: parseInt(this.suggested.blue, 10),\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      this.current = { ...this.suggested };\n      if (this.loopCount < this.totalLoops) this.loopCount++;\n    },\n    hexToRgb(h) {\n      return {\n        r: parseInt(h.substr(1, 2), 16),\n        g: parseInt(h.substr(3, 2), 16),\n        b: parseInt(h.substr(5, 2), 16),\n      };\n    },\n    hexToHsl(hex) {\n      const { r, g, b } = this.hexToRgb(hex);\n      const rn = r / 255, gn = g / 255, bn = b / 255;\n      const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);\n      const l = (max + min) / 2;\n      let h = 0, s = 0;\n      if (max !== min) {\n        const d = max - min;\n        s = d / (1 - Math.abs(2 * l - 1));\n        switch (max) {\n          case rn: h = ((gn - bn) / d) % 6; break;\n          case gn: h = (bn - rn) / d + 2; break;\n          case bn: h = (rn - gn) / d + 4; break;\n        }\n        h *= 60;\n      }\n      return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 1000px; height: 750px; border: none; pointer-events: none; }\n.gain-table { border-radius: 8px; background: #fafafa; border: 1px solid #cfd8dc; }\n.table-header-title { background: #e3f2fd; font-weight: 600; font-size: 15px; }\n.suggested-input { max-width: 80px; margin: auto; }\n.colorpicker { height: 28px; width: 60px; margin-left: 8px; border: 1px solid #999; border-radius: 4px; cursor: pointer; vertical-align: middle; }\n</style>\n",
+        "format": "\n<template>\n  <v-container fluid>\n    <v-row>\n      <!-- PREVIEW : 8 colonnes -->\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n        </v-card>\n      </v-col>\n\n      <!-- CONTROL PANEL : 4 colonnes -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4\">\n          <v-card-title class=\"text-left text-primary\">\n            White Balance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 1 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Refresh</h3>\n            <p class=\"text-caption mb-3\">\n              Click <b>Refresh the value of the gains</b> to start.\n            </p>\n            <v-btn block color=\"error\" class=\"mb-4\" @click=\"refreshGain\">\n              Refresh\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 2 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Pick a Pixel</h3>\n            <p class=\"text-caption mb-3\">Pick a pixel from the live stream.</p>\n\n            <div class=\"text-center mb-3\">\n              Pick a pixel from the stream :\n              <input class=\"colorpicker\" type=\"color\" v-model=\"selectedColor\" @input=\"onColorInput\"/>\n            </div>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 3 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">3. Apply Suggested Gains</h3>\n\n            <v-data-table :items=\"rows\" density=\"comfortable\" hide-default-footer class=\"gain-table mb-6\">\n              <template #item.current=\"{ item }\">\n                <div class=\"text-center font-mono\">{{ item.current }}</div>\n              </template>\n              <template #item.suggested=\"{ item }\">\n                <v-text-field v-model.number=\"item.suggested\" type=\"number\" min=\"0\" hide-details density=\"compact\"\n                  variant=\"underlined\" class=\"text-primary text-center suggested-input\"\n                  @change=\"onManualEdit(item.channel,item.suggested)\" />\n              </template>\n            </v-data-table>\n\n            <p class=\"text-caption mb-3\">\n              Click <b>Apply Suggested Gains</b> after selecting your pixel.\n            </p>\n\n            <v-btn block color=\"primary\" class=\"mt-auto\" :disabled=\"!suggested.red && !suggested.blue\"\n              @click=\"applySuggested\">\n              Apply Suggested Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 4 -->\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">4. Repeat Until Saturation ≈ 0%</h3>\n            <p class=\"text-caption\">\n              Repeat steps 10 times until the saturation value approaches <b>0%</b>.\n            </p>\n\n            <div class=\"mb-2\" :style=\"{ color: hsl.s < 10 ? 'green' : hsl.s < 30 ? 'orange' : 'red' }\">\n              Current saturation: <b>{{ hsl.s }} %</b>\n            </div>\n\n            <div class=\"mb-4 text-center text-caption\">\n              <v-progress-linear :model-value=\"(loopCount / totalLoops) * 100\" color=\"primary\" height=\"40\"\n                class=\"rounded mb-1\" />\n\n              <div>\n                <template v-if=\"loopCount === 0\">\n                  Start calibration — click <b>Refresh</b>.\n                </template>\n                <template v-else-if=\"loopCount < totalLoops\">\n                  Iteration {{ loopCount }} / {{ totalLoops }} — sample & apply.\n                </template>\n                <template v-else>\n                  ✅ Calibration complete! Saturation should be near <b>0%</b>.\n                </template>\n              </div>\n            </div>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      selectedColor: \"#ffffff\",\n      hsl: { h: 0, s: 0, l: 0 },\n      loopCount: 0,\n      totalLoops: 10,\n      headers: [\n        { text: \"Channel\", value: \"channel\", align: \"start\" },\n        { text: \"Current\", value: \"current\", align: \"center\" },\n        { text: \"Suggested\", value: \"suggested\", align: \"center\" },\n      ],\n    };\n  },\n  computed: {\n    rows() {\n      return [\n        { channel: \"AWRed\", current: this.current.red, suggested: this.suggested.red },\n        { channel: \"AWBlue\", current: this.current.blue, suggested: this.suggested.blue },\n      ];\n    },\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.calibration_wbg_red !== undefined)\n          this.current.red = Number(p.calibration_wbg_red);\n        if (p.calibration_wbg_blue !== undefined)\n          this.current.blue = Number(p.calibration_wbg_blue);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: { white_balance_gain: this.current },\n      });\n    },\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    onColorInput(e) {\n      const hex = e.target.value;\n      this.selectedColor = hex;\n      this.hsl = this.hexToHsl(hex);\n      const { r, g, b } = this.hexToRgb(hex);\n      const redAdj = g - r + this.current.red;\n      const blueAdj = g - b + this.current.blue;\n      this.suggested.red = Math.max(0, Math.min(255, Math.round(redAdj)));\n      this.suggested.blue = Math.max(0, Math.min(255, Math.round(blueAdj)));\n    },\n    onManualEdit(ch, v) {\n      if (ch === \"AWRed\") this.suggested.red = v;\n      if (ch === \"AWBlue\") this.suggested.blue = v;\n    },\n    applySuggested() {\n      if (!this.suggested.red && !this.suggested.blue) return;\n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: parseInt(this.suggested.red, 10),\n            blue: parseInt(this.suggested.blue, 10),\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      this.current = { ...this.suggested };\n      if (this.loopCount < this.totalLoops) this.loopCount++;\n    },\n    hexToRgb(h) {\n      return {\n        r: parseInt(h.substr(1, 2), 16),\n        g: parseInt(h.substr(3, 2), 16),\n        b: parseInt(h.substr(5, 2), 16),\n      };\n    },\n    hexToHsl(hex) {\n      const { r, g, b } = this.hexToRgb(hex);\n      const rn = r / 255, gn = g / 255, bn = b / 255;\n      const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);\n      const l = (max + min) / 2;\n      let h = 0, s = 0;\n      if (max !== min) {\n        const d = max - min;\n        s = d / (1 - Math.abs(2 * l - 1));\n        switch (max) {\n          case rn: h = ((gn - bn) / d) % 6; break;\n          case gn: h = (bn - rn) / d + 2; break;\n          case bn: h = (rn - gn) / d + 4; break;\n        }\n        h *= 60;\n      }\n      return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 1000px; height: 750px; border: none; pointer-events: none; }\n.gain-table { border-radius: 8px; background: #fafafa; border: 1px solid #cfd8dc; }\n.table-header-title { background: #e3f2fd; font-weight: 600; font-size: 15px; }\n.suggested-input { max-width: 80px; margin: auto; }\n.colorpicker { height: 28px; width: 60px; margin-left: 8px; border: 1px solid #999; border-radius: 4px; cursor: pointer; vertical-align: middle; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -5586,7 +5119,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container class=\"pa-4 d-flex flex-wrap justify-center align-start\" style=\"gap: 32px;\">\n    <!-- Streaming Preview -->\n    <v-card\n      class=\"calibration-container\"\n      style=\"width:1000px;height:750px;position:relative;overflow:hidden\"\n      @pointermove=\"onPointerMove\"\n      @pointerup=\"stopDrag\"\n      @pointercancel=\"stopDrag\"\n      @pointerleave=\"stopDrag\"\n    >\n      <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n      <svg class=\"overlay-line\">\n        <line\n          :x1=\"markerA.x\"\n          :y1=\"markerA.y\"\n          :x2=\"markerB.x\"\n          :y2=\"markerB.y\"\n          stroke=\"red\"\n          stroke-width=\"2\"\n        />\n      </svg>\n\n      <!-- draggable markers -->\n      <div\n        class=\"marker\"\n        :style=\"{ left: markerA.x + 'px', top: markerA.y + 'px' }\"\n        @pointerdown=\"startDrag('A', $event)\"\n      ></div>\n      <div\n        class=\"marker\"\n        :style=\"{ left: markerB.x + 'px', top: markerB.y + 'px' }\"\n        @pointerdown=\"startDrag('B', $event)\"\n      ></div>\n\n      <!-- floating label -->\n      <div\n        class=\"distance-label\"\n        :style=\"{ left: midPoint.x + 'px', top: midPoint.y - 10 + 'px' }\"\n      >\n        {{ displayLabel }}\n      </div>\n    </v-card>\n\n    <!-- Control Panel -->\n    <v-card width=\"440\" class=\"px-4\">\n      <v-card-title class=\"text-left text-primary\">\n        Pixel Calibration\n      </v-card-title>\n\n      <v-divider class=\"mb-4\"></v-divider>\n\n      <section class=\"mb-6\">\n        <h3 class=\"text-subtitle-1 mb-2\">1. Place a ruler</h3>\n        <p class=\"text-caption mb-3\">\n          Place a ruler 📏 beneath your <b>PlanktoScope</b> and reset the marker.\n        </p>\n        <v-btn color=\"error\" block class=\"mt-3\" @click=\"reset\">\n          Reset the positions of the markers\n        </v-btn>\n      </section>\n\n      <v-divider class=\"mb-4\"></v-divider>\n      <section class=\"mb-2\">\n        <h3 class=\"text-subtitle-1 mb-2\">2. Define the positions</h3>\n        <p class=\"text-caption mb-3\">\n          Drag the red line ends to match a known distance on the ruler.\n        </p>\n\n        <v-text-field\n          v-model=\"pixelDistanceDisplay\"\n          label=\"Measured distance (px)\"\n          variant=\"outlined\"\n          density=\"comfortable\"\n          readonly\n          :style=\"{ pointerEvents: 'none', userSelect: 'none', opacity: 0.7 }\"\n        ></v-text-field>\n      </section>\n\n      <v-divider class=\"mb-4\"></v-divider>\n      <section class=\"mb-2\">\n        <h3 class=\"text-subtitle-1 mb-2\">3. Enter known distance</h3>\n        <p class=\"text-caption mb-3\">\n          Enter the known distance in micrometers (µm).\n        </p>\n        <v-text-field\n          v-model.number=\"knownDistance\"\n          label=\"Known distance (µm)\"\n          type=\"number\"\n          variant=\"outlined\"\n          density=\"comfortable\"\n          class=\"highlight\"\n          @input=\"sendUpdate('calibration/update')\"\n        ></v-text-field>\n      </section>\n\n      <v-divider class=\"mb-4\"></v-divider>\n      <!-- Step 4 with dialog -->\n      <section class=\"mb-6\">\n        <h3 class=\"text-subtitle-1 mb-2\">4. Save your calibration</h3>\n        <p class=\"text-caption mb-3\">\n          Click Save to store your calibration.\n        </p>\n\n        <v-row dense align=\"center\">\n <v-col cols=\"12\">\n  <v-text-field\n    v-model=\"pixelSizeDisplay\"\n    label=\"Real pixel size (µm/pixel)\"\n    readonly\n    variant=\"outlined\"\n    density=\"comfortable\"\n    class=\"highlight\"\n  >\n    <!-- Icône append avec dialogue -->\n    <template #append>\n      <v-icon\n        class=\"cursor-pointer\"\n        color=\"primary\"\n        @click=\"showFormula = true\"\n      >\n        mdi-information\n      </v-icon>\n    </template>\n  </v-text-field>\n\n  <!-- Dialogue explicatif -->\n  <v-dialog v-model=\"showFormula\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"text-h6\">Pixel Size Calculation</v-card-title>\n      <v-card-text class=\"text-body-2\">\n        <div><strong>Formula:</strong></div>\n        <div>pixel_size = known_distance / (measured_distance × scale_factor)</div>\n\n        <div class=\"mt-2\">\n          = {{ knownDistance || '—' }} /\n          ({{ pixelDistanceDisplay || '—' }} ×\n          {{ scaleFactor ? scaleFactor.toFixed(3) : '—' }}) =\n          <strong>{{ pixelSizeDisplay || '—' }} µm/pixel</strong>\n        </div>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <div class=\"text-caption text-grey-darken-1\">\n          <strong>Note:</strong></div>\n          <div>scale_factor = sensor_width / stream_width\n          <br />\n          = {{ sensorWidth || '—' }} / {{ streamWidth || '—' }}\n          = {{ scaleFactor ? scaleFactor.toFixed(3) : '—' }}\n        </div>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"primary\" text @click=\"showFormula = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</v-col>\n\n        </v-row>\n\n        <v-btn\n          color=\"primary\"\n          block\n          class=\"mt-2\"\n          :disabled=\"!pixelSize\"\n          @click=\"saveCalibration\"\n        >\n          Save calibration\n        </v-btn>\n      </section>\n\n    </v-card>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      markerA: { x: 250, y: 375 },\n      markerB: { x: 750, y: 375 },\n      dragging: null,\n      knownDistance: null,\n      pixelDistance: 0,\n      sensorWidth: 4056,\n      streamWidth: 1000,\n      scaleFactor: 4056 / 1000,\n      pixelSize: null,\n      scaleManual: false,\n      showFormula: false, // 🔹 Nouveau : état du dialog\n    };\n  },\n  computed: {\n    midPoint() {\n      return {\n        x: (this.markerA.x + this.markerB.x) / 2,\n        y: (this.markerA.y + this.markerB.y) / 2,\n      };\n    },\n    pixelDistanceDisplay() {\n      return this.pixelDistance > 0 ? this.pixelDistance.toFixed(0) : \"\";\n    },\n    pixelSizeDisplay() {\n      return this.pixelSize ? this.pixelSize.toFixed(2) : \"\";\n    },\n    displayLabel() {\n      if (this.pixelSize)\n        return `${this.pixelSize.toFixed(2)} µm/px`;\n      return `${this.pixelDistance.toFixed(0)} px`;\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.calibration_pixel_size !== undefined) this.pixelSize = Number(p.calibration_pixel_size);\n        if (p.calibration_scale_factor !== undefined) this.scaleFactor = Number(p.calibration_scale_factor);\n        if (p.calibration_sensor_width !== undefined) this.sensorWidth = Number(p.calibration_sensor_width);\n        if (p.calibration_stream_width !== undefined) this.streamWidth = Number(p.calibration_stream_width);\n        if (p.calibration_known_distance !== undefined) this.knownDistance = Number(p.calibration_known_distance);\n        if (p.calibration_measured_distance !== undefined) this.pixelDistance = Number(p.calibration_measured_distance);\n        if (p.calibration_markerA_x !== undefined && p.calibration_markerA_y !== undefined)\n          this.markerA = { x: Number(p.calibration_markerA_x), y: Number(p.calibration_markerA_y) };\n        if (p.calibration_markerB_x !== undefined && p.calibration_markerB_y !== undefined)\n          this.markerB = { x: Number(p.calibration_markerB_x), y: Number(p.calibration_markerB_y) };\n      },\n      deep: true,\n    },\n    knownDistance() { this.autoCalculate(); },\n    scaleFactor() { this.autoCalculate(); },\n  },\n  mounted() {\n    this.updateScaleFactor();\n    this.updateDistance();\n  },\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic,\n          payload: {\n            calibration_pixel_size: this.round(this.pixelSize, 2),\n            calibration_scale_factor: this.round(this.scaleFactor, 3),\n            calibration_sensor_width: Math.round(this.sensorWidth),\n            calibration_stream_width: Math.round(this.streamWidth),\n            calibration_known_distance: this.round(this.knownDistance, 2),\n            calibration_measured_distance: Math.round(this.pixelDistance),\n            calibration_markerA_x: this.round(this.markerA.x, 1),\n            calibration_markerA_y: this.round(this.markerA.y, 1),\n            calibration_markerB_x: this.round(this.markerB.x, 1),\n            calibration_markerB_y: this.round(this.markerB.y, 1),\n            ...extra,\n          },\n        });\n      }\n    },\n    round(value, digits = 2) {\n      if (typeof value !== \"number\" || isNaN(value)) return 0;\n      const factor = 10 ** digits;\n      return Math.round(value * factor) / factor;\n    },\n    startDrag(marker, e) {\n      e.preventDefault();\n      this.dragging = marker;\n      e.target.setPointerCapture(e.pointerId);\n    },\n    onPointerMove(e) {\n      if (!this.dragging) return;\n      const container = this.$el.querySelector(\".calibration-container\");\n      const rect = container.getBoundingClientRect();\n      const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));\n      const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));\n      this[`marker${this.dragging}`] = { x, y };\n      this.updateDistance();\n      this.sendUpdate(\"calibration/live\");\n    },\n    stopDrag() {\n      this.dragging = null;\n    },\n    updateDistance() {\n      const dx = this.markerB.x - this.markerA.x;\n      const dy = this.markerB.y - this.markerA.y;\n      this.pixelDistance = Math.sqrt(dx * dx + dy * dy);\n      this.autoCalculate();\n    },\n    updateScaleFactor() {\n      if (!this.scaleManual && this.sensorWidth > 0 && this.streamWidth > 0) {\n        this.scaleFactor = this.sensorWidth / this.streamWidth;\n        this.autoCalculate();\n      }\n    },\n    manualScaleFactor() {\n      this.scaleManual = true;\n      this.autoCalculate();\n    },\n    autoCalculate() {\n      const { knownDistance, pixelDistance, scaleFactor } = this;\n      if (knownDistance > 0 && pixelDistance > 0 && scaleFactor > 0) {\n        const realDist = pixelDistance * scaleFactor;\n        this.pixelSize = knownDistance / realDist;\n      } else {\n        this.pixelSize = null;\n      }\n    },\n    reset() {\n      this.markerA = { x: 250, y: 375 };\n      this.markerB = { x: 750, y: 375 };\n      this.knownDistance = null;\n      this.pixelDistance = 0;\n      this.pixelSize = null;\n      this.dragging = null;\n      this.scaleManual = false;\n      this.updateScaleFactor();\n      this.updateDistance();\n      this.sendUpdate(\"calibration/reset\");\n    },\n    saveCalibration() {\n      if (this.pixelSize > 0) this.sendUpdate(\"calibration/save\");\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1000px;\n  height: 750px;\n  border: none;\n  pointer-events: none;\n}\n.overlay-line {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.marker {\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  transform: translate(-50%, -50%);\n  cursor: crosshair;\n  touch-action: none;\n}\n.marker::before,\n.marker::after {\n  content: \"\";\n  position: absolute;\n  background: red;\n}\n.marker::before {\n  width: 2px;\n  height: 24px;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n}\n.marker::after {\n  width: 24px;\n  height: 2px;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n.distance-label {\n  position: absolute;\n  color: white;\n  font-size: 16px;\n  background: rgba(0, 0, 0, 0.7);\n  padding: 4px 10px;\n  border-radius: 6px;\n  pointer-events: none;\n  transform: translate(-50%, -50%);\n}\n.highlight input {\n  background-color: #e3f2fd !important;\n  font-weight: 600;\n}\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n\n      <!-- Streaming Preview (colonne 6/12) -->\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:1000px;height:750px;position:relative;overflow:hidden\"\n          @pointermove=\"onPointerMove\"\n          @pointerup=\"stopDrag\"\n          @pointercancel=\"stopDrag\"\n          @pointerleave=\"stopDrag\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <svg class=\"overlay-line\">\n            <line\n              :x1=\"markerA.x\"\n              :y1=\"markerA.y\"\n              :x2=\"markerB.x\"\n              :y2=\"markerB.y\"\n              stroke=\"red\"\n              stroke-width=\"2\"\n            />\n          </svg>\n\n          <!-- draggable markers -->\n          <div\n            class=\"marker\"\n            :style=\"{ left: markerA.x + 'px', top: markerA.y + 'px' }\"\n            @pointerdown=\"startDrag('A', $event)\"\n          ></div>\n\n          <div\n            class=\"marker\"\n            :style=\"{ left: markerB.x + 'px', top: markerB.y + 'px' }\"\n            @pointerdown=\"startDrag('B', $event)\"\n          ></div>\n\n          <!-- floating label -->\n          <div\n            class=\"distance-label\"\n            :style=\"{ left: midPoint.x + 'px', top: midPoint.y - 10 + 'px' }\"\n          >\n            {{ displayLabel }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Control Panel (colonne 6/12) -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4\">\n          <v-card-title class=\"text-left text-primary\">\n            Pixel Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Place a ruler</h3>\n            <p class=\"text-caption mb-3\">\n              Place a ruler 📏 beneath your <b>PlanktoScope</b> and reset the marker.\n            </p>\n            <v-btn color=\"error\" block class=\"mt-3\" @click=\"reset\">\n              Reset the positions of the markers\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-2\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Define the positions</h3>\n            <p class=\"text-caption mb-3\">\n              Drag the red line ends to match a known distance on the ruler.\n            </p>\n\n            <v-text-field\n              v-model=\"pixelDistanceDisplay\"\n              label=\"Measured distance (px)\"\n              variant=\"outlined\"\n              density=\"comfortable\"\n              readonly\n              :style=\"{ pointerEvents: 'none', userSelect: 'none', opacity: 0.7 }\"\n            ></v-text-field>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-2\">\n            <h3 class=\"text-subtitle-1 mb-2\">3. Enter known distance</h3>\n            <p class=\"text-caption mb-3\">\n              Enter the known distance in micrometers (µm).\n            </p>\n\n            <v-text-field\n              v-model.number=\"knownDistance\"\n              label=\"Known distance (µm)\"\n              type=\"number\"\n              variant=\"outlined\"\n              density=\"comfortable\"\n              class=\"highlight\"\n              @input=\"sendUpdate('calibration/update')\"\n            ></v-text-field>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 4 with dialog -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">4. Save your calibration</h3>\n            <p class=\"text-caption mb-3\">Click Save to store your calibration.</p>\n\n            <v-row dense align=\"center\">\n              <v-col cols=\"12\">\n                <v-text-field\n                  v-model=\"pixelSizeDisplay\"\n                  label=\"Real pixel size (µm/pixel)\"\n                  readonly\n                  variant=\"outlined\"\n                  density=\"comfortable\"\n                  class=\"highlight\"\n                >\n                  <template #append>\n                    <v-icon\n                      class=\"cursor-pointer\"\n                      color=\"primary\"\n                      @click=\"showFormula = true\"\n                    >\n                      mdi-information\n                    </v-icon>\n                  </template>\n                </v-text-field>\n\n                <!-- Dialogue -->\n                <v-dialog v-model=\"showFormula\" max-width=\"500\">\n                  <v-card>\n                    <v-card-title class=\"text-h6\">Pixel Size Calculation</v-card-title>\n                    <v-card-text class=\"text-body-2\">\n                      <div><strong>Formula:</strong></div>\n                      <div>\n                        pixel_size = known_distance / (measured_distance × scale_factor)\n                      </div>\n\n                      <div class=\"mt-2\">\n                        = {{ knownDistance || '—' }} /\n                        ({{ pixelDistanceDisplay || '—' }} ×\n                        {{ scaleFactor ? scaleFactor.toFixed(3) : '—' }}) =\n                        <strong>{{ pixelSizeDisplay || '—' }} µm/pixel</strong>\n                      </div>\n\n                      <v-divider class=\"my-3\"></v-divider>\n\n                      <div class=\"text-caption text-grey-darken-1\">\n                        <strong>Note:</strong><br />\n                        scale_factor = sensor_width / stream_width<br />\n                        = {{ sensorWidth || '—' }} / {{ streamWidth || '—' }}<br />\n                        = {{ scaleFactor ? scaleFactor.toFixed(3) : '—' }}\n                      </div>\n                    </v-card-text>\n\n                    <v-card-actions>\n                      <v-spacer></v-spacer>\n                      <v-btn color=\"primary\" text @click=\"showFormula = false\">\n                        Close\n                      </v-btn>\n                    </v-card-actions>\n                  </v-card>\n                </v-dialog>\n              </v-col>\n            </v-row>\n\n            <v-btn\n              color=\"primary\"\n              block\n              class=\"mt-2\"\n              :disabled=\"!pixelSize\"\n              @click=\"saveCalibration\"\n            >\n              Save calibration\n            </v-btn>\n          </section>\n\n        </v-card>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      markerA: { x: 250, y: 375 },\n      markerB: { x: 750, y: 375 },\n      dragging: null,\n      knownDistance: null,\n      pixelDistance: 0,\n      sensorWidth: 4056,\n      streamWidth: 1000,\n      scaleFactor: 4056 / 1000,\n      pixelSize: null,\n      scaleManual: false,\n      showFormula: false, // 🔹 Nouveau : état du dialog\n    };\n  },\n  computed: {\n    midPoint() {\n      return {\n        x: (this.markerA.x + this.markerB.x) / 2,\n        y: (this.markerA.y + this.markerB.y) / 2,\n      };\n    },\n    pixelDistanceDisplay() {\n      return this.pixelDistance > 0 ? this.pixelDistance.toFixed(0) : \"\";\n    },\n    pixelSizeDisplay() {\n      return this.pixelSize ? this.pixelSize.toFixed(2) : \"\";\n    },\n    displayLabel() {\n      if (this.pixelSize)\n        return `${this.pixelSize.toFixed(2)} µm/px`;\n      return `${this.pixelDistance.toFixed(0)} px`;\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.calibration_pixel_size !== undefined) this.pixelSize = Number(p.calibration_pixel_size);\n        if (p.calibration_scale_factor !== undefined) this.scaleFactor = Number(p.calibration_scale_factor);\n        if (p.calibration_sensor_width !== undefined) this.sensorWidth = Number(p.calibration_sensor_width);\n        if (p.calibration_stream_width !== undefined) this.streamWidth = Number(p.calibration_stream_width);\n        if (p.calibration_known_distance !== undefined) this.knownDistance = Number(p.calibration_known_distance);\n        if (p.calibration_measured_distance !== undefined) this.pixelDistance = Number(p.calibration_measured_distance);\n        if (p.calibration_markerA_x !== undefined && p.calibration_markerA_y !== undefined)\n          this.markerA = { x: Number(p.calibration_markerA_x), y: Number(p.calibration_markerA_y) };\n        if (p.calibration_markerB_x !== undefined && p.calibration_markerB_y !== undefined)\n          this.markerB = { x: Number(p.calibration_markerB_x), y: Number(p.calibration_markerB_y) };\n      },\n      deep: true,\n    },\n    knownDistance() { this.autoCalculate(); },\n    scaleFactor() { this.autoCalculate(); },\n  },\n  mounted() {\n    this.updateScaleFactor();\n    this.updateDistance();\n  },\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic,\n          payload: {\n            calibration_pixel_size: this.round(this.pixelSize, 2),\n            calibration_scale_factor: this.round(this.scaleFactor, 3),\n            calibration_sensor_width: Math.round(this.sensorWidth),\n            calibration_stream_width: Math.round(this.streamWidth),\n            calibration_known_distance: this.round(this.knownDistance, 2),\n            calibration_measured_distance: Math.round(this.pixelDistance),\n            calibration_markerA_x: this.round(this.markerA.x, 1),\n            calibration_markerA_y: this.round(this.markerA.y, 1),\n            calibration_markerB_x: this.round(this.markerB.x, 1),\n            calibration_markerB_y: this.round(this.markerB.y, 1),\n            ...extra,\n          },\n        });\n      }\n    },\n    round(value, digits = 2) {\n      if (typeof value !== \"number\" || isNaN(value)) return 0;\n      const factor = 10 ** digits;\n      return Math.round(value * factor) / factor;\n    },\n    startDrag(marker, e) {\n      e.preventDefault();\n      this.dragging = marker;\n      e.target.setPointerCapture(e.pointerId);\n    },\n    onPointerMove(e) {\n      if (!this.dragging) return;\n      const container = this.$el.querySelector(\".calibration-container\");\n      const rect = container.getBoundingClientRect();\n      const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));\n      const y = Math.max(0, Math.min(e.clientY - rect.top, rect.height));\n      this[`marker${this.dragging}`] = { x, y };\n      this.updateDistance();\n      this.sendUpdate(\"calibration/live\");\n    },\n    stopDrag() {\n      this.dragging = null;\n    },\n    updateDistance() {\n      const dx = this.markerB.x - this.markerA.x;\n      const dy = this.markerB.y - this.markerA.y;\n      this.pixelDistance = Math.sqrt(dx * dx + dy * dy);\n      this.autoCalculate();\n    },\n    updateScaleFactor() {\n      if (!this.scaleManual && this.sensorWidth > 0 && this.streamWidth > 0) {\n        this.scaleFactor = this.sensorWidth / this.streamWidth;\n        this.autoCalculate();\n      }\n    },\n    manualScaleFactor() {\n      this.scaleManual = true;\n      this.autoCalculate();\n    },\n    autoCalculate() {\n      const { knownDistance, pixelDistance, scaleFactor } = this;\n      if (knownDistance > 0 && pixelDistance > 0 && scaleFactor > 0) {\n        const realDist = pixelDistance * scaleFactor;\n        this.pixelSize = knownDistance / realDist;\n      } else {\n        this.pixelSize = null;\n      }\n    },\n    reset() {\n      this.markerA = { x: 250, y: 375 };\n      this.markerB = { x: 750, y: 375 };\n      this.knownDistance = null;\n      this.pixelDistance = 0;\n      this.pixelSize = null;\n      this.dragging = null;\n      this.scaleManual = false;\n      this.updateScaleFactor();\n      this.updateDistance();\n      this.sendUpdate(\"calibration/reset\");\n    },\n    saveCalibration() {\n      if (this.pixelSize > 0) this.sendUpdate(\"calibration/save\");\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1000px;\n  height: 750px;\n  border: none;\n  pointer-events: none;\n}\n.overlay-line {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.marker {\n  position: absolute;\n  width: 24px;\n  height: 24px;\n  transform: translate(-50%, -50%);\n  cursor: crosshair;\n  touch-action: none;\n}\n.marker::before,\n.marker::after {\n  content: \"\";\n  position: absolute;\n  background: red;\n}\n.marker::before {\n  width: 2px;\n  height: 24px;\n  left: 50%;\n  top: 0;\n  transform: translateX(-50%);\n}\n.marker::after {\n  width: 24px;\n  height: 2px;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n}\n.distance-label {\n  position: absolute;\n  color: white;\n  font-size: 16px;\n  background: rgba(0, 0, 0, 0.7);\n  padding: 4px 10px;\n  border-radius: 6px;\n  pointer-events: none;\n  transform: translate(-50%, -50%);\n}\n.highlight input {\n  background-color: #e3f2fd !important;\n  font-weight: 600;\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 7efebd5915dbf660f846a21fa2c4d8bcc77db43a Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 20 Nov 2025 16:02:24 +0000
Subject: [PATCH 05/36] update

---
 node-red/projects/dashboard/flows.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index b49566b7e..f17ecce34 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -1970,7 +1970,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid>\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n        <v-col cols=\"12\" md=\"4\" class=\"d-flex align-baseline\">\n          <v-icon size=\"20\">\n            <svg class=\"v-icon__svg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 52.916666 52.916666\">\n              <!-- ellipse -->\n              <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" fill=\"#ffffff\" stroke=\"#adadad\"\n                stroke-width=\"0.255058\" stroke-dasharray=\"0.255058 0.510117\" />\n\n              <!-- path -->\n              <path fill=\"primary\" d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,.... z\" />\n            </svg>\n          </v-icon>\n          <h4 class=\"font-weight-bold mb-0\">PlanktoScope</h4>\n          <span class=\"mx-2\" style=\"border-left:1px solid #ccc; height:1em;\"></span>\n          <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n        </v-col>\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"orange\" class=\"mr-1\">mdi-information-outline</v-icon>\n            Open Issues\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
+        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid>\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n          <v-col cols=\"12\" md=\"4\">\n\n            <v-row no-gutters class=\"align-center\">\n\n              <!-- Colonne logo : largeur fixe -->\n              <v-col class=\"d-flex justify-center pa-0 pr-4\" style=\"width: 40px; max-width: 40px;\">\n                <v-icon size=\"40\">\n                  <svg viewBox=\"0 0 52.916666 52.916666\" width=\"40\" height=\"40\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                      style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                      d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                      fill=\"#674ea7\" />\n                  </svg>\n                </v-icon>\n              </v-col>\n\n              <!-- Colonne texte : occupe tout l'espace restant -->\n              <v-col class=\"d-flex flex-column justify-center\" style=\"flex: 1;\">\n\n                <a href=\"https://www.planktoscope.org\" target=\"_blank\" class=\"text-decoration-none\" style=\"color: inherit;\">\n                  <h4 class=\"font-weight-bold mb-1\">PlanktoScope</h4>\n                </a>\n\n                <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n\n              </v-col>\n\n            </v-row>\n\n          </v-col>\n\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2193,7 +2193,7 @@
         "width": "12",
         "height": "6",
         "head": "",
-        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n    const options = { year: \"numeric\", month: \"short\", day: \"2-digit\" };\n    const dateStr = now.toLocaleString(\"en-US\", options).replace(\",\", \"\");\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    el.textContent = `${dateStr} - ${hh}:${mm} (UTC)`;\n}\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n            <i class=\"mdi mdi-home\"></i> Home\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"gallery\">\n            <i class=\"mdi mdi-image-multiple-outline\"></i> Gallery\n        </div>\n\n        <div class=\"menu-item\" data-href=\"export\">\n            <i class=\"mdi mdi-folder-zip-outline\"></i> Export\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-item\" data-href=\"hardware\">\n            <i class=\"mdi mdi-robot-love-outline\"></i> Hardware\n        </div>\n\n        <div class=\"menu-item\" data-href=\"settings\">\n            <i class=\"mdi mdi-cog-outline\"></i> Settings\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
+        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        margin-right:8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n\n    // English weekday abbreviations\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n\n    // French month abbreviations\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    // Desired format:\n    // \"Thu. 20 nov. 2025 - 15:22 (UTC)\"\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\n\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n                        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                                style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                            <path\n                                d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                                fill=\"#076eca\" />\n                        </svg>\n            \n            <b>Home</b>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"gallery\">\n            <i class=\"mdi mdi-image-multiple-outline\"></i> Gallery\n        </div>\n\n        <div class=\"menu-item\" data-href=\"export\">\n            <i class=\"mdi mdi-folder-zip-outline\"></i> Export\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-item\" data-href=\"hardware\">\n            <i class=\"mdi mdi-robot-love-outline\"></i> Hardware\n        </div>\n\n        <div class=\"menu-item\" data-href=\"settings\">\n            <i class=\"mdi mdi-cog-outline\"></i> Settings\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2274,7 +2274,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-12\">\n      <v-empty-state \n      icon=\"mdi-view-dashboard\"\n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-database-search</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Export your data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"export\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-folder-zip-outline</v-icon>\n          <span class=\"text-h6\">Export your data</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n      <!-- Calibration -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/calibration\"\n          color=\"grey-darken-3\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-tune</v-icon>\n          Run the Calibration\n        </v-btn>\n      </v-col>\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-2\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-database-search</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Export your data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"export\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-folder-zip-outline</v-icon>\n          <span class=\"text-h6\">Export your data</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n      <!-- Calibration -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          color=\"grey-darken-3\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-tune</v-icon>\n          Run the Calibration\n        </v-btn>\n      </v-col>\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From cab29be47f942218132e076f5bebd0add718dda3 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 20 Nov 2025 21:52:55 +0000
Subject: [PATCH 06/36] update

---
 node-red/projects/dashboard/flows.json | 1369 +++---------------------
 1 file changed, 126 insertions(+), 1243 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index f17ecce34..4d36a872a 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -47,14 +47,6 @@
         "info": "",
         "env": []
     },
-    {
-        "id": "2d14eef8a9f51595",
-        "type": "tab",
-        "label": "Export",
-        "disabled": false,
-        "info": "",
-        "env": []
-    },
     {
         "id": "8555b76c53e789e0",
         "type": "tab",
@@ -111,22 +103,6 @@
         "info": "",
         "env": []
     },
-    {
-        "id": "807baf16b84dfb29",
-        "type": "tab",
-        "label": "Settings",
-        "disabled": false,
-        "info": "",
-        "env": []
-    },
-    {
-        "id": "1b99100829ae7f41",
-        "type": "tab",
-        "label": "Hardware",
-        "disabled": false,
-        "info": "",
-        "env": []
-    },
     {
         "id": "4ed26b8b.253504",
         "type": "subflow",
@@ -921,7 +897,7 @@
                 "cols": "12"
             }
         ],
-        "order": 10,
+        "order": 9,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -971,7 +947,7 @@
                 "cols": "12"
             }
         ],
-        "order": 11,
+        "order": 10,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1021,7 +997,7 @@
                 "cols": "12"
             }
         ],
-        "order": 12,
+        "order": 11,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1071,7 +1047,7 @@
                 "cols": "12"
             }
         ],
-        "order": 9,
+        "order": 8,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1121,7 +1097,7 @@
                 "cols": "12"
             }
         ],
-        "order": 8,
+        "order": 7,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1473,70 +1449,6 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 4,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "d9e5a1ba9059ca02",
-        "type": "ui-page",
-        "name": "Export",
-        "ui": "e6ae26617c24c3ea",
-        "path": "/export",
-        "icon": "export",
-        "layout": "grid",
-        "theme": "f7770f0b818c3a67",
-        "breakpoints": [
-            {
-                "name": "Default",
-                "px": "0",
-                "cols": "3"
-            },
-            {
-                "name": "Tablet",
-                "px": "576",
-                "cols": "6"
-            },
-            {
-                "name": "Small Desktop",
-                "px": "768",
-                "cols": "9"
-            },
-            {
-                "name": "Desktop",
-                "px": "1024",
-                "cols": "12"
-            }
-        ],
-        "order": 7,
-        "className": "",
-        "visible": "true",
-        "disabled": "false"
-    },
-    {
-        "id": "1c2cd2bf4d4ab815",
-        "type": "ui-group",
-        "name": "Navigation Top",
-        "page": "d9e5a1ba9059ca02",
-        "width": "12",
-        "height": 1,
-        "order": 1,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "5d3c24612267b256",
-        "type": "ui-group",
-        "name": "Navigation bottom",
-        "page": "d9e5a1ba9059ca02",
-        "width": "12",
-        "height": 1,
         "order": 3,
         "showTitle": false,
         "className": "",
@@ -1544,20 +1456,6 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "d1c2dcd580716d02",
-        "type": "ui-group",
-        "name": "Viewer",
-        "page": "d9e5a1ba9059ca02",
-        "width": "12",
-        "height": 1,
-        "order": 2,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "402b3d24c87ab0d2",
         "type": "ui-group",
@@ -1572,112 +1470,12 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "5447fb7a420dfdc6",
-        "type": "ui-page",
-        "name": "Settings",
-        "ui": "e6ae26617c24c3ea",
-        "path": "/settings",
-        "icon": "cog",
-        "layout": "grid",
-        "theme": "f7770f0b818c3a67",
-        "breakpoints": [
-            {
-                "name": "Default",
-                "px": "0",
-                "cols": "3"
-            },
-            {
-                "name": "Tablet",
-                "px": "576",
-                "cols": "6"
-            },
-            {
-                "name": "Small Desktop",
-                "px": "768",
-                "cols": "9"
-            },
-            {
-                "name": "Desktop",
-                "px": "1024",
-                "cols": "12"
-            }
-        ],
-        "order": 13,
-        "className": "",
-        "visible": "true",
-        "disabled": "false"
-    },
-    {
-        "id": "070185f2b69cf66d",
-        "type": "ui-group",
-        "name": "admin",
-        "page": "5447fb7a420dfdc6",
-        "width": "12",
-        "height": 1,
-        "order": 1,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "e11ae78aee22fab5",
-        "type": "ui-page",
-        "name": "Hardware",
-        "ui": "e6ae26617c24c3ea",
-        "path": "/hardware",
-        "icon": "robot",
-        "layout": "grid",
-        "theme": "f7770f0b818c3a67",
-        "breakpoints": [
-            {
-                "name": "Default",
-                "px": "0",
-                "cols": "3"
-            },
-            {
-                "name": "Tablet",
-                "px": "576",
-                "cols": "6"
-            },
-            {
-                "name": "Small Desktop",
-                "px": "768",
-                "cols": "9"
-            },
-            {
-                "name": "Desktop",
-                "px": "1024",
-                "cols": "12"
-            }
-        ],
-        "order": 14,
-        "className": "",
-        "visible": "true",
-        "disabled": "false"
-    },
-    {
-        "id": "9d212165f2367f01",
-        "type": "ui-group",
-        "name": "Group 51",
-        "page": "e11ae78aee22fab5",
-        "width": 6,
-        "height": 1,
-        "order": 1,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "fa6393a7d7e3b7d7",
         "type": "ui-group",
-        "name": "Plots Left",
+        "name": "Table",
         "page": "d129fac8e7742d5b",
-        "width": 6,
+        "width": "12",
         "height": 1,
         "order": 2,
         "showTitle": false,
@@ -1686,20 +1484,6 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "bdcb68c6cff2da73",
-        "type": "ui-group",
-        "name": "Plot Right",
-        "page": "d129fac8e7742d5b",
-        "width": 6,
-        "height": 1,
-        "order": 3,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "82099021.9ceb08",
         "type": "file",
@@ -2193,7 +1977,7 @@
         "width": "12",
         "height": "6",
         "head": "",
-        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        margin-right:8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n\n    // English weekday abbreviations\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n\n    // French month abbreviations\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    // Desired format:\n    // \"Thu. 20 nov. 2025 - 15:22 (UTC)\"\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\n\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n                        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                                style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                            <path\n                                d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                                fill=\"#076eca\" />\n                        </svg>\n            \n            <b>Home</b>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"gallery\">\n            <i class=\"mdi mdi-image-multiple-outline\"></i> Gallery\n        </div>\n\n        <div class=\"menu-item\" data-href=\"export\">\n            <i class=\"mdi mdi-folder-zip-outline\"></i> Export\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-item\" data-href=\"hardware\">\n            <i class=\"mdi mdi-robot-love-outline\"></i> Hardware\n        </div>\n\n        <div class=\"menu-item\" data-href=\"settings\">\n            <i class=\"mdi mdi-cog-outline\"></i> Settings\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
+        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        margin-right:8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n\n    // English weekday abbreviations\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n\n    // French month abbreviations\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    // Desired format:\n    // \"Thu. 20 nov. 2025 - 15:22 (UTC)\"\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\n\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n                        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                                style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                            <path\n                                d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                                fill=\"#076eca\" />\n                        </svg>\n            \n            <b>Home</b>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"preview\">\n            <i class=\"mdi mdi-eye\"></i> Preview\n        </div>\n\n        <div class=\"menu-item\" data-href=\"visualization\">\n            <i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2274,7 +2058,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-database-search</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Export your data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"export\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-folder-zip-outline</v-icon>\n          <span class=\"text-h6\">Export your data</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n      <!-- Calibration -->\n      <v-col cols=\"12\" md=\"6\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          color=\"grey-darken-3\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-tune</v-icon>\n          Run the Calibration\n        </v-btn>\n      </v-col>\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n      \n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n          <span class=\"text-h6\">Run the Calibration</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"12\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2299,8 +2083,8 @@
         "targetType": "full",
         "statusVal": "",
         "statusType": "auto",
-        "x": 420,
-        "y": 380,
+        "x": 520,
+        "y": 280,
         "wires": []
     },
     {
@@ -3844,7 +3628,7 @@
         "correl": "",
         "expiry": "",
         "broker": "8dc3722c.06efa8",
-        "x": 1090,
+        "x": 1150,
         "y": 140,
         "wires": []
     },
@@ -3865,7 +3649,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 970,
+        "x": 1030,
         "y": 140,
         "wires": [
             [
@@ -3890,7 +3674,8 @@
         "y": 260,
         "wires": [
             [
-                "33c0d1b8251b5d00"
+                "33c0d1b8251b5d00",
+                "eed6aba5c7ab3b6c"
             ]
         ]
     },
@@ -3912,7 +3697,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 530,
+        "x": 610,
         "y": 240,
         "wires": [
             []
@@ -3957,7 +3742,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 1120,
+        "x": 1180,
         "y": 100,
         "wires": [
             []
@@ -3999,12 +3784,29 @@
         "y": 140,
         "wires": [
             [
-                "26074b8d8ad8abf9"
+                "7fde0897e436c334"
             ]
         ]
     },
     {
-        "id": "26074b8d8ad8abf9",
+        "id": "eed6aba5c7ab3b6c",
+        "type": "debug",
+        "z": "0fd76ac156d78937",
+        "name": "debug 5",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 320,
+        "y": 460,
+        "wires": []
+    },
+    {
+        "id": "7fde0897e436c334",
         "type": "ui-template",
         "z": "0fd76ac156d78937",
         "group": "",
@@ -4015,7 +3817,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  // ⚠️ no props / no lifecycle hooks in ui-template\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: 0,\n      hasSeenFirstMsg: false, // ← ignore the first msg (replayed by Dashboard)\n    };\n  },\n\n  watch: {\n    // `msg` is magically provided by Node-RED ui-template\n    msg: {\n      immediate: true,\n      deep: true,\n      handler(msg) {\n        // Always default to closed unless we *decide* to open\n        this.showDialog = false;\n\n        // First message is usually the \"replayed\" last msg when dashboard loads.\n        // We ignore it completely for popup purposes.\n        if (!this.hasSeenFirstMsg) {\n          this.hasSeenFirstMsg = true;\n\n          // You can still cache payload on first msg if you want:\n          if (msg && msg.payload) {\n            this.payload = msg.payload;\n            this.process_min_ESD =\n              typeof msg.payload.process_min_ESD !== \"undefined\"\n                ? msg.payload.process_min_ESD\n                : 0;\n          }\n          return;\n        }\n\n        // After first msg, handle normally\n        if (!msg || !msg.payload) {\n          return;\n        }\n\n        this.payload = msg.payload;\n\n        // Keep ESD in sync\n        this.process_min_ESD =\n          typeof msg.payload.process_min_ESD !== \"undefined\"\n            ? msg.payload.process_min_ESD\n            : 0;\n\n        // Only open when explicitly requested by the sending flow\n        const shouldOpen =\n          msg.payload.open_dialog === true &&\n          msg.payload.is_segmented === false &&\n          !!msg.payload.path;\n\n        this.showDialog = shouldOpen;\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
+        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  // ⚠️ no props / no lifecycle hooks in ui-template\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: 0,\n      hasSeenFirstMsg: false, // ← ignore the first msg (replayed by Dashboard)\n    };\n  },\n\nwatch: {\n  msg: {\n    immediate: true,\n    deep: true,\n    handler(msg) {\n\n      // Always force dialog closed unless explicitly opened\n      this.showDialog = false;\n\n      // Ignore the first replayed message\n      if (!this.hasSeenFirstMsg) {\n        this.hasSeenFirstMsg = true;\n        return;\n      }\n\n      // 🚫 No message or empty payload -> abort immediately\n      if (!msg || !msg.payload || typeof msg.payload !== \"object\") {\n        return;\n      }\n\n      // Now we know there is a real payload\n      this.payload = msg.payload;\n\n      // Sync ESD if provided\n      this.process_min_ESD =\n        typeof msg.payload.process_min_ESD !== \"undefined\"\n          ? msg.payload.process_min_ESD\n          : 0;\n\n      // 🚫 Require ALL keys — otherwise NO dialog\n      const shouldOpen =\n        msg.payload.open_dialog === true &&\n        msg.payload.is_segmented === false &&\n        typeof msg.payload.path === \"string\" &&\n        msg.payload.path.length > 0;\n\n      this.showDialog = shouldOpen;\n    },\n  },\n},\n\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4088,7 +3890,9 @@
         "x": 590,
         "y": 40,
         "wires": [
-            []
+            [
+                "164baa371893de7a"
+            ]
         ]
     },
     {
@@ -4103,7 +3907,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"export\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Export\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4127,7 +3931,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"export\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Export\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4140,310 +3944,113 @@
         ]
     },
     {
-        "id": "62f69ab05b710c7c",
-        "type": "mqtt in",
+        "id": "164baa371893de7a",
+        "type": "list segmentations",
         "z": "14f8c9b5ce1235cc",
         "name": "",
-        "topic": "status/#",
-        "qos": "0",
-        "datatype": "json",
-        "broker": "8dc3722c.06efa8",
-        "nl": false,
-        "rap": false,
-        "inputs": 0,
-        "x": 200,
-        "y": 960,
+        "x": 170,
+        "y": 180,
         "wires": [
             [
-                "e2269afad765ca6e"
+                "18a10804663dbaa1"
             ]
         ]
     },
     {
-        "id": "e2269afad765ca6e",
-        "type": "switch",
+        "id": "6532974092861ef7",
+        "type": "ui-table",
         "z": "14f8c9b5ce1235cc",
-        "name": "",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
+        "group": "fa6393a7d7e3b7d7",
+        "name": "List of acq",
+        "label": "",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "maxrows": "10",
+        "passthru": false,
+        "autocols": false,
+        "showSearch": true,
+        "deselect": true,
+        "selectionType": "click",
+        "columns": [
             {
-                "t": "eq",
-                "v": "status/segmenter/metric",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 350,
-        "y": 960,
-        "wires": [
-            [
-                "6c0e567b12e22791",
-                "fae799ce36e737e1"
-            ]
-        ]
-    },
-    {
-        "id": "6c0e567b12e22791",
-        "type": "ui-chart",
-        "z": "14f8c9b5ce1235cc",
-        "group": "bdcb68c6cff2da73",
-        "name": "",
-        "label": "Histogram - Equivalent Diameter",
-        "order": 1,
-        "chartType": "histogram",
-        "category": "Equivalent Diameter (μm)",
-        "categoryType": "str",
-        "xAxisLabel": "Equivalent Diameter (μm)",
-        "xAxisProperty": "payload.metadata.equivalent_diameter",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "bins",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "300",
-        "yAxisLabel": "Abundance",
-        "yAxisProperty": "payload.metadata.equivalent_diameter",
-        "yAxisPropertyType": "msg",
-        "ymin": "",
-        "ymax": "",
-        "bins": "10",
-        "action": "append",
-        "stackSeries": false,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": 1,
-        "removeOlderUnit": "86400",
-        "removeOlderPoints": "",
-        "colors": [
-            "#00ff04",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
+                "title": "Project name",
+                "key": "project_name",
+                "keyType": "key",
+                "type": "text",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Sample ID",
+                "key": "sample_id",
+                "keyType": "key",
+                "type": "text",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Acquisition ID",
+                "key": "acquisition_id",
+                "keyType": "key",
+                "type": "text",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Number of objects",
+                "key": "image_acquired_count",
+                "keyType": "key",
+                "type": "text",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Gallery",
+                "key": "gallery",
+                "keyType": "key",
+                "type": "link",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Download",
+                "key": "export",
+                "keyType": "key",
+                "type": "link",
+                "width": "",
+                "align": "start"
+            }
         ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 580,
-        "y": 960,
+        "mobileBreakpoint": "sm",
+        "mobileBreakpointType": "defaults",
+        "action": "replace",
+        "x": 650,
+        "y": 180,
         "wires": [
             []
         ]
     },
     {
-        "id": "fae799ce36e737e1",
-        "type": "ui-chart",
+        "id": "18a10804663dbaa1",
+        "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
-        "group": "fa6393a7d7e3b7d7",
-        "name": "equivalent_diameter vs. MeanValue",
-        "label": "equivalent_diameter vs. MeanValue",
-        "order": 1,
-        "chartType": "scatter",
-        "category": "equivalent_diameter vs. MeanValue",
-        "categoryType": "str",
-        "xAxisLabel": "Equivalent Diameter (μm)",
-        "xAxisProperty": "payload.metadata.x",
-        "xAxisPropertyType": "msg",
-        "xAxisType": "linear",
-        "xAxisFormat": "",
-        "xAxisFormatType": "auto",
-        "xmin": "0",
-        "xmax": "50",
-        "yAxisLabel": "MeanValue (0–255, grayscale value)",
-        "yAxisProperty": "payload.metadata.y",
-        "yAxisPropertyType": "msg",
-        "ymin": "150",
-        "ymax": "255",
-        "bins": 10,
-        "action": "append",
-        "stackSeries": true,
-        "pointShape": "circle",
-        "pointRadius": "1",
-        "showLegend": true,
-        "removeOlder": "1",
-        "removeOlderUnit": "3600",
-        "removeOlderPoints": "300",
-        "colors": [
-            "#8c00ff",
-            "#ff0000",
-            "#ff7f0e",
-            "#2ca02c",
-            "#a347e1",
-            "#d62728",
-            "#ff9896",
-            "#9467bd",
-            "#c5b0d5"
-        ],
-        "textColor": [
-            "#666666"
-        ],
-        "textColorDefault": true,
-        "gridColor": [
-            "#e5e5e5"
-        ],
-        "gridColorDefault": true,
-        "width": "3",
-        "height": "6",
-        "className": "",
-        "interpolation": "linear",
-        "x": 580,
-        "y": 1160,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "64c27d4448d8f79f",
-        "type": "ui-event",
-        "z": "2d14eef8a9f51595",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 80,
-        "y": 40,
-        "wires": [
-            [
-                "b47026c6196ae54f"
-            ]
-        ]
-    },
-    {
-        "id": "b47026c6196ae54f",
-        "type": "switch",
-        "z": "2d14eef8a9f51595",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
+        "name": "function 1",
+        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/files/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\n\nreturn msg;\n",
         "outputs": 1,
-        "x": 280,
-        "y": 40,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 360,
+        "y": 180,
         "wires": [
             [
-                "5676b794b1a00c6a"
+                "6532974092861ef7"
             ]
         ]
     },
-    {
-        "id": "5676b794b1a00c6a",
-        "type": "switch",
-        "z": "2d14eef8a9f51595",
-        "name": "msg.payload.page.path === \"/export\"",
-        "property": "payload.page.path",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "/export",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 570,
-        "y": 40,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "3cfcc4372e4a3fb2",
-        "type": "ui-template",
-        "z": "2d14eef8a9f51595",
-        "group": "5d3c24612267b256",
-        "page": "",
-        "ui": "",
-        "name": "Navigation Bottom",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Visualization\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1290,
-        "y": 160,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "32d0387ec0cb419f",
-        "type": "ui-template",
-        "z": "2d14eef8a9f51595",
-        "group": "1c2cd2bf4d4ab815",
-        "page": "",
-        "ui": "",
-        "name": "Navigation Top",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Visualization\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1300,
-        "y": 40,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "6521e33d1a35408e",
-        "type": "ui-template",
-        "z": "2d14eef8a9f51595",
-        "group": "d1c2dcd580716d02",
-        "page": "",
-        "ui": "",
-        "name": "Viewer",
-        "order": 1,
-        "width": "12",
-        "height": "16",
-        "head": "",
-        "format": "  <iframe \n    src=\"/ps/data/browse/files/export/ecotaxa\" \n    >\n  </iframe>\n  <style>\n    iframe {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border:none;\n    }\n  </style>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1330,
-        "y": 100,
-        "wires": [
-            []
-        ]
-    },
     {
         "id": "64ae825a687fb054",
         "type": "ecotaxa",
@@ -6151,729 +5758,5 @@
         "x": 470,
         "y": 1100,
         "wires": []
-    },
-    {
-        "id": "7451ef4165b79c87",
-        "type": "exec",
-        "z": "807baf16b84dfb29",
-        "command": "sudo",
-        "addpay": "payload",
-        "append": "now",
-        "useSpawn": "false",
-        "timer": "2",
-        "winHide": false,
-        "oldrc": false,
-        "name": "sudo cmd now",
-        "x": 480,
-        "y": 580,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "425b04bad228f33e",
-        "type": "exec",
-        "z": "807baf16b84dfb29",
-        "command": "sudo systemctl restart planktoscope-org.controller.service",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Restart hardware controller",
-        "x": 780,
-        "y": 660,
-        "wires": [
-            [
-                "fd74a406ecf48578"
-            ],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "3dac096ae08896f0",
-        "type": "exec",
-        "z": "807baf16b84dfb29",
-        "command": "sudo systemctl restart planktoscope-org.segmenter.service",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Restart segmenter",
-        "x": 750,
-        "y": 800,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "fd74a406ecf48578",
-        "type": "exec",
-        "z": "807baf16b84dfb29",
-        "command": "sudo systemctl restart nodered.service",
-        "addpay": false,
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "Restart Node Red",
-        "x": 1050,
-        "y": 660,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
-    {
-        "id": "53d72b9f4f4cb00f",
-        "type": "ui-button",
-        "z": "807baf16b84dfb29",
-        "group": "070185f2b69cf66d",
-        "name": "Reboot",
-        "label": "Reboot",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "emulateClick": false,
-        "tooltip": "",
-        "color": "",
-        "bgcolor": "",
-        "className": "",
-        "icon": "",
-        "iconPosition": "left",
-        "payload": "reboot",
-        "payloadType": "str",
-        "topic": "topic",
-        "topicType": "msg",
-        "buttonColor": "",
-        "textColor": "",
-        "iconColor": "",
-        "enableClick": true,
-        "enablePointerdown": false,
-        "pointerdownPayload": "",
-        "pointerdownPayloadType": "str",
-        "enablePointerup": false,
-        "pointerupPayload": "",
-        "pointerupPayloadType": "str",
-        "x": 200,
-        "y": 560,
-        "wires": [
-            [
-                "7451ef4165b79c87"
-            ]
-        ]
-    },
-    {
-        "id": "f040d18d96b705c3",
-        "type": "ui-button",
-        "z": "807baf16b84dfb29",
-        "group": "070185f2b69cf66d",
-        "name": "Shutdown",
-        "label": "Shutdown",
-        "order": 5,
-        "width": 0,
-        "height": 0,
-        "emulateClick": false,
-        "tooltip": "",
-        "color": "",
-        "bgcolor": "",
-        "className": "",
-        "icon": "",
-        "iconPosition": "left",
-        "payload": "shutdown",
-        "payloadType": "str",
-        "topic": "topic",
-        "topicType": "msg",
-        "buttonColor": "",
-        "textColor": "",
-        "iconColor": "",
-        "enableClick": true,
-        "enablePointerdown": false,
-        "pointerdownPayload": "",
-        "pointerdownPayloadType": "str",
-        "enablePointerup": false,
-        "pointerupPayload": "",
-        "pointerupPayloadType": "str",
-        "x": 210,
-        "y": 600,
-        "wires": [
-            [
-                "7451ef4165b79c87"
-            ]
-        ]
-    },
-    {
-        "id": "bab342f965d345f2",
-        "type": "ui-button",
-        "z": "807baf16b84dfb29",
-        "group": "070185f2b69cf66d",
-        "name": "Restart Hardware controller",
-        "label": "Restart Hardware controller",
-        "order": 4,
-        "width": 0,
-        "height": 0,
-        "emulateClick": false,
-        "tooltip": "",
-        "color": "",
-        "bgcolor": "",
-        "className": "",
-        "icon": "",
-        "iconPosition": "left",
-        "payload": "",
-        "payloadType": "str",
-        "topic": "topic",
-        "topicType": "msg",
-        "buttonColor": "",
-        "textColor": "",
-        "iconColor": "",
-        "enableClick": true,
-        "enablePointerdown": false,
-        "pointerdownPayload": "",
-        "pointerdownPayloadType": "str",
-        "enablePointerup": false,
-        "pointerupPayload": "",
-        "pointerupPayloadType": "str",
-        "x": 260,
-        "y": 640,
-        "wires": [
-            [
-                "425b04bad228f33e"
-            ]
-        ]
-    },
-    {
-        "id": "1f2fde836eabbb26",
-        "type": "ui-button",
-        "z": "807baf16b84dfb29",
-        "group": "070185f2b69cf66d",
-        "name": "Restart Segmenter",
-        "label": "Restart Segmenter",
-        "order": 3,
-        "width": 0,
-        "height": 0,
-        "emulateClick": false,
-        "tooltip": "",
-        "color": "",
-        "bgcolor": "",
-        "className": "",
-        "icon": "",
-        "iconPosition": "left",
-        "payload": "",
-        "payloadType": "str",
-        "topic": "topic",
-        "topicType": "msg",
-        "buttonColor": "",
-        "textColor": "",
-        "iconColor": "",
-        "enableClick": true,
-        "enablePointerdown": false,
-        "pointerdownPayload": "",
-        "pointerdownPayloadType": "str",
-        "enablePointerup": false,
-        "pointerupPayload": "",
-        "pointerupPayloadType": "str",
-        "x": 230,
-        "y": 680,
-        "wires": [
-            [
-                "3dac096ae08896f0"
-            ]
-        ]
-    },
-    {
-        "id": "5f45f5ce424a2d43",
-        "type": "ui-event",
-        "z": "807baf16b84dfb29",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 80,
-        "y": 40,
-        "wires": [
-            [
-                "fc0520ca0e28fea9"
-            ]
-        ]
-    },
-    {
-        "id": "fc0520ca0e28fea9",
-        "type": "switch",
-        "z": "807baf16b84dfb29",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "32fd5e03278f12c0"
-            ]
-        ]
-    },
-    {
-        "id": "32fd5e03278f12c0",
-        "type": "switch",
-        "z": "807baf16b84dfb29",
-        "name": "msg.payload.page.path === \"/settings\"",
-        "property": "payload.page.path",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "/settings",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 580,
-        "y": 40,
-        "wires": [
-            [
-                "1a7bb2d868fe8707",
-                "9c3e4701c6b1687a"
-            ]
-        ]
-    },
-    {
-        "id": "1a7bb2d868fe8707",
-        "type": "function",
-        "z": "807baf16b84dfb29",
-        "name": "Get process_min_ESD",
-        "func": "msg.payload = global.get(\"process_min_ESD\");\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 260,
-        "y": 140,
-        "wires": [
-            [
-                "b757ea59f07dc1f9"
-            ]
-        ]
-    },
-    {
-        "id": "b757ea59f07dc1f9",
-        "type": "ui-text-input",
-        "z": "807baf16b84dfb29",
-        "group": "070185f2b69cf66d",
-        "name": "",
-        "label": "process_min_ESD",
-        "order": 6,
-        "width": 0,
-        "height": 0,
-        "topic": "process_min_ESD",
-        "topicType": "str",
-        "mode": "number",
-        "tooltip": "",
-        "delay": 300,
-        "passthru": true,
-        "sendOnDelay": false,
-        "sendOnBlur": true,
-        "sendOnEnter": true,
-        "className": "",
-        "clearable": false,
-        "sendOnClear": false,
-        "icon": "",
-        "iconPosition": "left",
-        "iconInnerPosition": "inside",
-        "x": 530,
-        "y": 140,
-        "wires": [
-            [
-                "aa0070c82f8fe4b6"
-            ]
-        ]
-    },
-    {
-        "id": "aa0070c82f8fe4b6",
-        "type": "function",
-        "z": "807baf16b84dfb29",
-        "name": "set process_min_ESD",
-        "func": "global.set(\"process_min_ESD\", Number(msg.payload));\n",
-        "outputs": 1,
-        "timeout": "",
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 780,
-        "y": 140,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "73ce979b9b49a446",
-        "type": "ui-text-input",
-        "z": "807baf16b84dfb29",
-        "group": "070185f2b69cf66d",
-        "name": "",
-        "label": "acq_delay_stab",
-        "order": 2,
-        "width": 0,
-        "height": 0,
-        "topic": "acq_delay_stab",
-        "topicType": "str",
-        "mode": "number",
-        "tooltip": "",
-        "delay": 300,
-        "passthru": true,
-        "sendOnDelay": false,
-        "sendOnBlur": true,
-        "sendOnEnter": true,
-        "className": "",
-        "clearable": false,
-        "sendOnClear": false,
-        "icon": "",
-        "iconPosition": "left",
-        "iconInnerPosition": "inside",
-        "x": 520,
-        "y": 180,
-        "wires": [
-            [
-                "9fccbaf294903c2c"
-            ]
-        ]
-    },
-    {
-        "id": "9c3e4701c6b1687a",
-        "type": "function",
-        "z": "807baf16b84dfb29",
-        "name": "Get acq_delay_stab",
-        "func": "msg.payload = global.get(\"acq_delay_stab\");\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 260,
-        "y": 180,
-        "wires": [
-            [
-                "73ce979b9b49a446"
-            ]
-        ]
-    },
-    {
-        "id": "9fccbaf294903c2c",
-        "type": "function",
-        "z": "807baf16b84dfb29",
-        "name": "set acq_delay_stab",
-        "func": "global.set(\"acq_delay_stab\", Number(msg.payload));\n",
-        "outputs": 1,
-        "timeout": "",
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 770,
-        "y": 180,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "e6a8ee249bf33950",
-        "type": "ui-event",
-        "z": "1b99100829ae7f41",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 80,
-        "y": 40,
-        "wires": [
-            [
-                "f3b093b749e56ace"
-            ]
-        ]
-    },
-    {
-        "id": "f3b093b749e56ace",
-        "type": "switch",
-        "z": "1b99100829ae7f41",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "dfcec9d1920037d5"
-            ]
-        ]
-    },
-    {
-        "id": "dfcec9d1920037d5",
-        "type": "switch",
-        "z": "1b99100829ae7f41",
-        "name": "msg.payload.page.path === \"/hardware\"",
-        "property": "payload.page.path",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "/hardware",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 580,
-        "y": 40,
-        "wires": [
-            [
-                "921eb70f1795b70e",
-                "a41da1c9f8661415",
-                "629dbc1e59dceaea"
-            ]
-        ]
-    },
-    {
-        "id": "921eb70f1795b70e",
-        "type": "function",
-        "z": "1b99100829ae7f41",
-        "name": "Get calibration_sensor_height",
-        "func": "msg.payload = global.get(\"calibration_sensor_height\");\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 290,
-        "y": 140,
-        "wires": [
-            [
-                "74597418566e278f"
-            ]
-        ]
-    },
-    {
-        "id": "74597418566e278f",
-        "type": "ui-text-input",
-        "z": "1b99100829ae7f41",
-        "group": "9d212165f2367f01",
-        "name": "",
-        "label": "calibration_sensor_height",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "topic": "calibration_sensor_height",
-        "topicType": "str",
-        "mode": "number",
-        "tooltip": "",
-        "delay": 300,
-        "passthru": true,
-        "sendOnDelay": false,
-        "sendOnBlur": true,
-        "sendOnEnter": true,
-        "className": "",
-        "clearable": false,
-        "sendOnClear": false,
-        "icon": "",
-        "iconPosition": "left",
-        "iconInnerPosition": "inside",
-        "x": 550,
-        "y": 140,
-        "wires": [
-            [
-                "40cb70ede83af087"
-            ]
-        ]
-    },
-    {
-        "id": "40cb70ede83af087",
-        "type": "function",
-        "z": "1b99100829ae7f41",
-        "name": "set calibration_sensor_height",
-        "func": "global.set(\"calibration_sensor_height\", Number(msg.payload));\n",
-        "outputs": 1,
-        "timeout": "",
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 800,
-        "y": 140,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "2e6c2109cb3995b8",
-        "type": "ui-text-input",
-        "z": "1b99100829ae7f41",
-        "group": "9d212165f2367f01",
-        "name": "",
-        "label": "calibration_sensor_width",
-        "order": 3,
-        "width": 0,
-        "height": 0,
-        "topic": "calibration_sensor_width",
-        "topicType": "str",
-        "mode": "number",
-        "tooltip": "",
-        "delay": 300,
-        "passthru": true,
-        "sendOnDelay": false,
-        "sendOnBlur": true,
-        "sendOnEnter": true,
-        "className": "",
-        "clearable": false,
-        "sendOnClear": false,
-        "icon": "",
-        "iconPosition": "left",
-        "iconInnerPosition": "inside",
-        "x": 550,
-        "y": 180,
-        "wires": [
-            [
-                "068171405cf7937a"
-            ]
-        ]
-    },
-    {
-        "id": "068171405cf7937a",
-        "type": "function",
-        "z": "1b99100829ae7f41",
-        "name": "set calibration_sensor_width",
-        "func": "global.set(\"calibration_sensor_width\", Number(msg.payload));\n",
-        "outputs": 1,
-        "timeout": "",
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 800,
-        "y": 180,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "a41da1c9f8661415",
-        "type": "function",
-        "z": "1b99100829ae7f41",
-        "name": "Get calibration_sensor_width",
-        "func": "msg.payload = global.get(\"calibration_sensor_width\");\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 280,
-        "y": 180,
-        "wires": [
-            [
-                "2e6c2109cb3995b8"
-            ]
-        ]
-    },
-    {
-        "id": "629dbc1e59dceaea",
-        "type": "function",
-        "z": "1b99100829ae7f41",
-        "name": "Get acq_flowcell_thickness",
-        "func": "msg.payload = global.get(\"acq_flowcell_thickness\");\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 280,
-        "y": 220,
-        "wires": [
-            [
-                "c757aa3b1e6cbae8"
-            ]
-        ]
-    },
-    {
-        "id": "c757aa3b1e6cbae8",
-        "type": "ui-text-input",
-        "z": "1b99100829ae7f41",
-        "group": "9d212165f2367f01",
-        "name": "",
-        "label": "acq_flowcell_thickness",
-        "order": 2,
-        "width": 0,
-        "height": 0,
-        "topic": "acq_flowcell_thickness",
-        "topicType": "str",
-        "mode": "number",
-        "tooltip": "",
-        "delay": 300,
-        "passthru": true,
-        "sendOnDelay": false,
-        "sendOnBlur": true,
-        "sendOnEnter": true,
-        "className": "",
-        "clearable": false,
-        "sendOnClear": false,
-        "icon": "",
-        "iconPosition": "left",
-        "iconInnerPosition": "inside",
-        "x": 550,
-        "y": 220,
-        "wires": [
-            [
-                "ae3e82e107244b10"
-            ]
-        ]
-    },
-    {
-        "id": "ae3e82e107244b10",
-        "type": "function",
-        "z": "1b99100829ae7f41",
-        "name": "set acq_flowcell_thickness",
-        "func": "global.set(\"acq_flowcell_thickness\", Number(msg.payload));\n",
-        "outputs": 1,
-        "timeout": "",
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 800,
-        "y": 220,
-        "wires": [
-            []
-        ]
     }
 ]
\ No newline at end of file

From 4a881ead21dac0ed97012fa013fd2c89896a181d Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Tue, 25 Nov 2025 08:54:21 +0000
Subject: [PATCH 07/36] update

---
 node-red/projects/dashboard/flows.json | 522 ++++++++++++++++++-------
 1 file changed, 370 insertions(+), 152 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 4d36a872a..8e006ce54 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -1399,7 +1399,7 @@
         "ui": "e6ae26617c24c3ea",
         "path": "/visualization",
         "icon": "chart-scatter-plot",
-        "layout": "grid",
+        "layout": "tabs",
         "theme": "f7770f0b818c3a67",
         "breakpoints": [
             {
@@ -1425,12 +1425,13 @@
         ],
         "order": 6,
         "className": "",
-        "visible": true,
-        "disabled": false
+        "visible": "true",
+        "disabled": "false"
     },
     {
         "id": "b570f76ef526af45",
         "type": "ui-group",
+        "d": true,
         "name": "Navigation Top",
         "page": "d129fac8e7742d5b",
         "width": "12",
@@ -1445,11 +1446,12 @@
     {
         "id": "1d3abb201c51ff47",
         "type": "ui-group",
+        "d": true,
         "name": "Navigation Bottom",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 3,
+        "order": 8,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1473,7 +1475,7 @@
     {
         "id": "fa6393a7d7e3b7d7",
         "type": "ui-group",
-        "name": "Table",
+        "name": "List of Segmentation",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
@@ -1484,6 +1486,76 @@
         "disabled": "false",
         "groupType": "default"
     },
+    {
+        "id": "44d42558adf7baf7",
+        "type": "ui-group",
+        "name": "ChatGPT 5.1 Pro v1",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "bdf41008b379e80e",
+        "type": "ui-group",
+        "name": "Gemini 3 Pro v1",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "e3bd8883700f1ab8",
+        "type": "ui-group",
+        "name": "ChatGPT 5.1 Pro v2",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 5,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "0cb96323818204ca",
+        "type": "ui-group",
+        "name": "Gemini 3 Pro v2",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 6,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "fd07716b2cd88ccd",
+        "type": "ui-group",
+        "name": "ChatGPT 5.1 Pro v3",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 7,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
     {
         "id": "82099021.9ceb08",
         "type": "file",
@@ -1961,7 +2033,7 @@
             [
                 "52902327e2363f8b",
                 "cd5cd3a0277b8dba",
-                "0c0eb2a907745142"
+                "37fa78ad741d783c"
             ]
         ]
     },
@@ -1977,7 +2049,7 @@
         "width": "12",
         "height": "6",
         "head": "",
-        "format": "<!-- =========================================================\n                        STYLE\n========================================================= -->\n<style>\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* Clock */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* Machine button */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #f5f5f5;\n        border: 1px solid #c8c8c8;\n        margin-right:8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #333;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #eaeaea;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* Dropdown — Safari FIX: absolute instead of fixed */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    /* Menu header */\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-header i {\n        font-size: 22px;\n        margin-right: 8px;\n        color: #555;\n    }\n\n    .menu-name {\n        font-weight: bold;\n        font-size: 15px;\n    }\n\n    /* separator */\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    /* Items */\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    /* Special buttons */\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    /* External icon */\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* Modal Loader */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n    #app-bar-actions,\n    #pks-menu-wrapper {\n    flex-shrink: 0 !important;\n    }\n    \n    #app-bar {\n    width: 100% !important;\n    max-width: 100% !important;\n    }\n\n</style>\n\n\n\n<!-- =========================================================\n                        SCRIPT\n========================================================= -->\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n\n    const now = new Date();\n\n    // English weekday abbreviations\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n\n    // French month abbreviations\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n\n    // Desired format:\n    // \"Thu. 20 nov. 2025 - 15:22 (UTC)\"\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\n\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n                        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                                style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                            <path\n                                d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                                fill=\"#076eca\" />\n                        </svg>\n            \n            <b>Home</b>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item\" data-href=\"preview\">\n            <i class=\"mdi mdi-eye\"></i> Preview\n        </div>\n\n        <div class=\"menu-item\" data-href=\"visualization\">\n            <i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization\n        </div>\n\n        <div class=\"menu-item\" data-href=\"calibration\">\n            <i class=\"mdi mdi-crosshairs-gps\"></i> Calibration\n        </div>\n\n        <div class=\"menu-item\" data-external=\"/ps/docs/\">\n            <i class=\"mdi mdi-book-outline\"></i> Documentation\n            <i class=\"mdi mdi-open-in-new ext\"></i>\n        </div>\n\n        <div class=\"menu-separator\"></div>\n\n        <div class=\"menu-item reboot\" data-action=\"reboot\">\n            <i class=\"mdi mdi-refresh\"></i> Reboot\n        </div>\n\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\">\n            <i class=\"mdi mdi-power\"></i> Shutdown\n        </div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `\n            <div id=\"pks-modal-box\">\n                <div id=\"pks-loader\"></div>\n                <div id=\"pks-modal-text\">${message}</div>\n            </div>\n        `;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\n\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT MENU\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    /* Safari FIX — ensure dropdown exists in BODY */\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    /* =========================================================\n       SAFARI / iPAD FIX — compute position dynamically\n    ========================================================== */\n    btn.onclick = (e) => {\n        e.stopPropagation();\n\n        const rect = btn.getBoundingClientRect();\n        \n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";      // Toujours collé à droite de l'écran\n        menu.style.left = \"auto\";      // Important pour annuler l’ancien calcul\n\n\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n\n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n    if (item.dataset.action) {\n        showModal(\n            item.dataset.action === \"reboot\"\n                ? \"Rebooting…\"\n                : \"Shutting down…\"\n        );\n\n        scope.send({\n            topic: \"action\",\n            payload: item.dataset.action\n        });\n\n        // 🔥 Force reload after 5 seconds\n        setTimeout(() => {\n            window.location.reload();\n        }, 5000);\n    }\n\n\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer */\nconst observer = new MutationObserver(() => injectMenu());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   MACHINE NAME UPDATE\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (msg?.payload?.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n    injectMenu();\n});\n\nsetTimeout(injectMenu, 200);\n\n</script>",
+        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- Zone Gauche (Badge Version) --- */\n    #pks-hw-version {\n\n\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        /* Apparence de badge */\n        background: #eef3ff;\n        color: #1976d2;\n        border: 1px solid #d6e4ff;\n\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.5px;\n\n        padding: 4px 8px;\n        border-radius: 4px;\n        /* Forme arrondie \"pilule\" */\n\n        /* Espace après \"PlanktoScope\" */\n        vertical-align: middle;\n        line-height: 1.5;\n\n        /* Masqué tant qu'il n'y a pas de données */\n        display: none;\n    }\n\n    /* --- Horloge --- */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* --- Bouton Machine --- */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #eef3ff;\n        border: 1px solid #d6e4ff;\n        margin-right: 8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1b76d3;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #a6caed;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* --- Dropdown Menu --- */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* --- Loader Modal --- */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    #app-bar-actions,\n    #pks-menu-wrapper {\n        flex-shrink: 0 !important;\n    }\n\n    #app-bar {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n</style>\n\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n    const now = new Date();\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU CONTENT\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n             <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                 <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                 <path d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\" fill=\"#076eca\" />\n             </svg>\n            <b>Home</b>\n        </div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item\" data-href=\"preview\"><i class=\"mdi mdi-eye\"></i> Preview</div>\n        <div class=\"menu-item\" data-href=\"visualization\"><i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization</div>\n        <div class=\"menu-item\" data-href=\"calibration\"><i class=\"mdi mdi-crosshairs-gps\"></i> Calibration</div>\n        <div class=\"menu-item\" data-external=\"/ps/docs/\"><i class=\"mdi mdi-book-outline\"></i> Documentation <i class=\"mdi mdi-open-in-new ext\"></i></div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item reboot\" data-action=\"reboot\"><i class=\"mdi mdi-refresh\"></i> Reboot</div>\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\"><i class=\"mdi mdi-power\"></i> Shutdown</div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `<div id=\"pks-modal-box\"><div id=\"pks-loader\"></div><div id=\"pks-modal-text\">${message}</div></div>`;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT HARDWARE VERSION (LEFT)\n========================================================= */\nfunction injectHardwareVersion() {\n    // On cherche la zone du titre. Vous avez indiqué que c'est \"app-bar-title\"\n    // qui se trouve à côté de PlanktoScope\n    const titleZone = document.getElementById(\"app-bar-title\");\n    \n    if (titleZone && !document.getElementById(\"pks-hw-version\")) {\n        const verDiv = document.createElement(\"div\");\n        verDiv.id = \"pks-hw-version\";\n        // On l'ajoute DANS la div #app-bar-title, ce qui l'affichera juste après PlanktoScope\n        titleZone.appendChild(verDiv);\n    }\n}\n\n/* =========================================================\n   INJECT MENU (RIGHT)\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    // Note: J'ai retiré hw-version d'ici pour le mettre à gauche\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    btn.onclick = (e) => {\n        e.stopPropagation();\n        const rect = btn.getBoundingClientRect();\n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";\n        menu.style.left = \"auto\";\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n    \n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n        if (item.dataset.action) {\n            showModal(item.dataset.action === \"reboot\" ? \"Rebooting…\" : \"Shutting down…\");\n            scope.send({ topic: \"action\", payload: item.dataset.action });\n            setTimeout(() => { window.location.reload(); }, 5000);\n        }\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer pour lancer les injections si la structure change */\nfunction runInjections() {\n    injectMenu();\n    injectHardwareVersion();\n}\n\nconst observer = new MutationObserver(() => runInjections());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   DATA UPDATES\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (!msg || !msg.payload) return;\n\n    // 1. Update Machine Name (Droite)\n    if (msg.payload.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n\n    // 2. Update Hardware Version (Gauche)\n    if (msg.payload.hardware_version) {\n        // On s'assure que l'élément existe\n        injectHardwareVersion();\n        \n        const hwEl = document.getElementById(\"pks-hw-version\");\n        if (hwEl) {\n            hwEl.textContent = msg.payload.hardware_version;\n            hwEl.style.display = \"inline-flex\"; // On l'affiche maintenant qu'on a la valeur\n        }\n    }\n\n    runInjections();\n});\n\nsetTimeout(runInjections, 200);\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2039,7 +2111,8 @@
         "y": 200,
         "wires": [
             [
-                "39c7e4b018ce16cb"
+                "39c7e4b018ce16cb",
+                "1044b154a90406dc"
             ],
             [
                 "8efc52e6ee9206f6"
@@ -2058,7 +2131,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to the PlanktoScope GUI\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n      \n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n          <span class=\"text-h6\">Run the Calibration</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"12\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to your PlanktoScope\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n      \n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n          <span class=\"text-h6\">Run the Calibration</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"12\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2071,20 +2144,39 @@
         ]
     },
     {
-        "id": "0c0eb2a907745142",
+        "id": "1044b154a90406dc",
+        "type": "exec",
+        "z": "1b667c6443413ced",
+        "command": "sudo reboot now",
+        "addpay": "",
+        "append": "",
+        "useSpawn": "false",
+        "timer": "",
+        "winHide": false,
+        "oldrc": false,
+        "name": "",
+        "x": 1190,
+        "y": 300,
+        "wires": [
+            [],
+            [],
+            []
+        ]
+    },
+    {
+        "id": "37fa78ad741d783c",
         "type": "debug",
         "z": "1b667c6443413ced",
-        "name": "debug 15",
+        "name": "debug 7",
         "active": true,
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
+        "complete": "false",
         "statusVal": "",
         "statusType": "auto",
-        "x": 520,
-        "y": 280,
+        "x": 420,
+        "y": 320,
         "wires": []
     },
     {
@@ -2127,8 +2219,7 @@
         "y": 140,
         "wires": [
             [
-                "f514a138d38d3c61",
-                "4f5f150680be40da"
+                "f514a138d38d3c61"
             ]
         ]
     },
@@ -2144,7 +2235,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Home -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Metadata -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0 \">\n    <v-row align=\"center\" class=\"px-2 py-0\" no-gutters>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn to=\"home\" color=\"primary\" rounded=\"lg\" class=\"px-4\" variant=\"text\" size=\"large\">\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Preview\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" class=\"px-4\" variant=\"text\" size=\"large\">\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2460,22 +2551,6 @@
             ]
         ]
     },
-    {
-        "id": "4f5f150680be40da",
-        "type": "debug",
-        "z": "ab58b3fd0e6bcd77",
-        "name": "debug 12",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 380,
-        "y": 340,
-        "wires": []
-    },
     {
         "id": "349d0f7644f26a62",
         "type": "ui-template",
@@ -2488,7 +2563,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Metadata\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3075,7 +3150,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3602,7 +3677,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Acquisition\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Visualization\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Acquisition\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Segmentation\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"visualization\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Vizualisation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3674,8 +3749,7 @@
         "y": 260,
         "wires": [
             [
-                "33c0d1b8251b5d00",
-                "eed6aba5c7ab3b6c"
+                "33c0d1b8251b5d00"
             ]
         ]
     },
@@ -3788,23 +3862,6 @@
             ]
         ]
     },
-    {
-        "id": "eed6aba5c7ab3b6c",
-        "type": "debug",
-        "z": "0fd76ac156d78937",
-        "name": "debug 5",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 320,
-        "y": 460,
-        "wires": []
-    },
     {
         "id": "7fde0897e436c334",
         "type": "ui-template",
@@ -3931,7 +3988,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Segmentation\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Visualization\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3969,7 +4026,7 @@
         "maxrows": "10",
         "passthru": false,
         "autocols": false,
-        "showSearch": true,
+        "showSearch": false,
         "deselect": true,
         "selectionType": "click",
         "columns": [
@@ -4025,25 +4082,27 @@
         "mobileBreakpoint": "sm",
         "mobileBreakpointType": "defaults",
         "action": "replace",
-        "x": 650,
+        "x": 570,
         "y": 180,
         "wires": [
-            []
+            [
+                "aefbf6f96248c398"
+            ]
         ]
     },
     {
         "id": "18a10804663dbaa1",
         "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "name": "function 1",
-        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/files/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\n\nreturn msg;\n",
+        "name": "Insert export column",
+        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 360,
+        "x": 380,
         "y": 180,
         "wires": [
             [
@@ -4051,6 +4110,235 @@
             ]
         ]
     },
+    {
+        "id": "5ec998719a884cfe",
+        "type": "file in",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "filename": "payload.path",
+        "filenameType": "msg",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "allProps": false,
+        "x": 880,
+        "y": 180,
+        "wires": [
+            [
+                "70ec28e6b50bec41"
+            ]
+        ]
+    },
+    {
+        "id": "aefbf6f96248c398",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "Get tsv path",
+        "func": "// 1. On s'assure que le path existe\nif (msg.payload.path) {\n    \n    // 2. On récupère le path actuel\n    // ex: \"/home/pi/data/objects/2025-11-19/S_1/A_2\"\n    const currentPath = msg.payload.path;\n\n    // 3. On extrait l'identifiant (le dernier élément après le /)\n    // Si le path finit par un /, on le retire d'abord pour éviter un ID vide\n    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;\n    const acqId = cleanPath.split('/').pop(); \n\n    // 4. On modifie le path dans l'objet\n    // Résultat: .../A_2/ecotaxa_A_2.tsv\n    msg.payload.path = `${cleanPath}/ecotaxa_${acqId}.tsv`;\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 730,
+        "y": 180,
+        "wires": [
+            [
+                "5ec998719a884cfe"
+            ]
+        ]
+    },
+    {
+        "id": "70ec28e6b50bec41",
+        "type": "csv",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "spec": "rfc",
+        "sep": "\\t",
+        "hdrin": true,
+        "hdrout": "none",
+        "multi": "mult",
+        "ret": "\\r\\n",
+        "temp": "",
+        "skip": "0",
+        "strings": true,
+        "include_empty_strings": "",
+        "include_null_values": "",
+        "x": 1010,
+        "y": 180,
+        "wires": [
+            [
+                "8dc194f764cd61ef"
+            ]
+        ]
+    },
+    {
+        "id": "e8fbb01b7a38c29a",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "bdf41008b379e80e",
+        "page": "",
+        "ui": "",
+        "name": "Gemini 3 Pro v1",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-4 grey lighten-5\" style=\"min-height: 100vh; color:#333;\">\n\n    <v-row v-if=\"!hasData\" align=\"center\" justify=\"center\" style=\"height:80vh;\">\n      <div class=\"text-center\">\n        <v-progress-circular indeterminate color=\"primary\" size=\"64\"></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text text--darken-2 font-weight-light\">\n          Analyzing PlanktoScope Data...\n        </div>\n        <div class=\"caption grey--text\">Waiting for JSON payload</div>\n      </div>\n    </v-row>\n\n    <div v-else>\n\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"12\">\n          <v-card outlined class=\"pa-0 overflow-hidden\">\n            <v-sheet color=\"primary\" class=\"pa-2 pl-4 d-flex align-center dark white--text\">\n              <v-icon left color=\"white\">mdi-chart-scatter-plot-hexbin</v-icon>\n              <div class=\"text-subtitle-1 font-weight-bold text-uppercase\">\n                PlanktoScope Analytics\n              </div>\n              <v-spacer></v-spacer>\n              <div class=\"caption mr-4 hidden-sm-and-down\">\n                <span class=\"white--text text--lighten-3\">Project:</span> {{ safeHeader.sample_project }}\n                <span class=\"mx-2\">|</span>\n                <span class=\"white--text text--lighten-3\">Sample:</span> {{ safeHeader.sample_id }}\n              </div>\n            </v-sheet>\n            \n            <div class=\"pa-2 d-flex align-center flex-wrap grey lighten-5\">\n              <v-chip small outlined class=\"mr-2 my-1\" color=\"blue-grey\">\n                <v-icon left x-small>mdi-ruler-square</v-icon>\n                {{ formatNum(safeHeader.process_pixel, 3) }} µm/px\n              </v-chip>\n              <v-chip small outlined class=\"mr-2 my-1\" color=\"blue-grey\">\n                 <v-icon left x-small>mdi-water</v-icon>\n                 Vol: {{ formatNum(safeHeader.volume_used, 2) }} mL\n              </v-chip>\n              \n              <v-spacer></v-spacer>\n\n              <v-btn small text color=\"primary\" :href=\"ecotaxaLink\" target=\"_blank\" v-if=\"safeHeader.acq_id !== 'N/A'\">\n                <v-icon left small>mdi-cloud-download-outline</v-icon> EcoTaxa\n              </v-btn>\n              <v-btn small text color=\"grey darken-2\" @click=\"downloadCSV\">\n                <v-icon left small>mdi-file-delimited-outline</v-icon> CSV\n              </v-btn>\n              <v-btn small text color=\"deep-orange\" @click=\"resetFilters\">\n                <v-icon left small>mdi-refresh</v-icon> Reset\n              </v-btn>\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 fill-height d-flex flex-column justify-center border-left-primary\">\n             <div class=\"caption grey--text text-uppercase font-weight-bold\">Total Objects</div>\n             <div class=\"d-flex align-baseline\">\n               <span class=\"text-h4 font-weight-bold mr-2\">{{ filteredObjects.length }}</span>\n               <span class=\"caption grey--text\">/ {{ cleanObjects.length }}</span>\n             </div>\n          </v-card>\n        </v-col>\n        \n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 fill-height d-flex flex-column justify-center border-left-info\">\n             <div class=\"caption blue--text text--darken-2 text-uppercase font-weight-bold\">Abundance</div>\n             <div class=\"d-flex align-baseline\">\n               <span class=\"text-h4 font-weight-bold blue--text text--darken-2 mr-2\">{{ formatNum(abundance, 1) }}</span>\n               <span class=\"caption blue--text\">ind./mL</span>\n             </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"6\">\n          <v-card outlined class=\"fill-height pa-0\">\n            <v-row no-gutters class=\"fill-height\">\n              <v-col cols=\"3\" class=\"pa-2 text-center border-right\">\n                <div class=\"caption green--text font-weight-bold\">Filaments</div>\n                <div class=\"text-h6\">{{ counts.filament }}</div>\n              </v-col>\n              <v-col cols=\"3\" class=\"pa-2 text-center border-right\">\n                <div class=\"caption brown--text font-weight-bold\">Detritus</div>\n                <div class=\"text-h6\">{{ counts.detritus }}</div>\n              </v-col>\n              <v-col cols=\"3\" class=\"pa-2 text-center border-right\">\n                <div class=\"caption red--text font-weight-bold\">Dense</div>\n                <div class=\"text-h6\">{{ counts.dense }}</div>\n              </v-col>\n              <v-col cols=\"3\" class=\"pa-2 text-center\">\n                <div class=\"caption grey--text font-weight-bold\">Bubbles</div>\n                <div class=\"text-h6\">{{ counts.bubble }}</div>\n              </v-col>\n            </v-row>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <v-row>\n        <v-col cols=\"12\" md=\"3\" lg=\"2\">\n          <v-card outlined class=\"sticky-top\">\n            <v-subheader class=\"font-weight-bold text-uppercase caption grey--text\">Filters & Clusters</v-subheader>\n            \n            <v-card-text class=\"pt-0\">\n              <v-select\n                v-model=\"filters.cluster\"\n                :items=\"clusterOptions\"\n                label=\"Filter by Cluster\"\n                dense outlined\n                class=\"mb-4 caption\"\n                hide-details\n              ></v-select>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold mt-2\">\n                <span>Size (ESD)</span><span>{{ Math.round(filters.esd[0]) }}-{{ Math.round(filters.esd[1]) }}</span>\n              </div>\n              <v-range-slider v-model=\"filters.esd\" :min=\"sliderStats.min\" :max=\"sliderStats.max\" dense hide-details class=\"mt-1 mb-4\"></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Circularity</span><span>{{ filters.circ[0] }}-{{ filters.circ[1] }}</span>\n              </div>\n              <v-range-slider v-model=\"filters.circ\" :min=\"0\" :max=\"1\" :step=\"0.05\" dense hide-details class=\"mt-1 mb-4\"></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Density (Gray Val)</span>\n              </div>\n              <v-range-slider v-model=\"filters.val\" :min=\"0\" :max=\"255\" :step=\"5\" dense hide-details class=\"mt-1 mb-4\"></v-range-slider>\n            </v-card-text>\n            \n            <v-divider></v-divider>\n            \n            <div class=\"pa-2\">\n              <div class=\"caption text-center mb-1 grey--text\">Cluster Distribution</div>\n              <div style=\"height: 140px; width: 100%;\">\n                <canvas ref=\"chartPie\"></canvas>\n              </div>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"6\" lg=\"7\">\n          \n          <v-card outlined class=\"mb-3\">\n            <v-card-title class=\"subtitle-2 py-2\">\n              Morpho-Clustering Map\n              <v-spacer></v-spacer>\n              <v-icon small color=\"grey\" title=\"X=Circularity, Y=Elongation (Log Scale)\">mdi-information-outline</v-icon>\n            </v-card-title>\n            <v-card-text>\n              <div style=\"height: 280px; width: 100%;\">\n                <canvas ref=\"chartCluster\"></canvas>\n              </div>\n            </v-card-text>\n          </v-card>\n\n          <v-card outlined>\n             <v-toolbar flat dense color=\"grey lighten-4\">\n               <v-toolbar-title class=\"subtitle-2\">\n                 Gallery ({{ filteredObjects.length }})\n               </v-toolbar-title>\n               <v-spacer></v-spacer>\n               <v-select\n                v-model=\"gallerySort\"\n                :items=\"sortOptions\"\n                item-text=\"text\" item-value=\"value\"\n                dense outlined hide-details\n                style=\"max-width: 180px;\"\n                class=\"caption bg-white\"\n                label=\"Sort by\"\n              ></v-select>\n             </v-toolbar>\n            \n            <v-card-text class=\"pa-2\" style=\"min-height: 200px;\">\n              <div v-if=\"!filteredObjects.length\" class=\"d-flex flex-column align-center justify-center py-5 grey--text\">\n                <v-icon large color=\"grey lighten-2\">mdi-image-off-outline</v-icon>\n                <div class=\"mt-2 caption\">No objects match current gates.</div>\n              </div>\n              \n              <div class=\"gallery-grid\">\n                <div v-for=\"obj in paginatedObjects\" :key=\"obj.object_id\" \n                     class=\"gallery-item\" \n                     :class=\"{'selected': selectedId === obj.object_id, 'g-filament': obj.group === 'Filament', 'g-bubble': obj.group === 'Bubble', 'g-dense': obj.group === 'Dense'}\" \n                     @click=\"selectedId = obj.object_id\">\n                  <v-img :src=\"getImageUrl(obj)\" aspect-ratio=\"1\" contain class=\"white rounded elevation-1\">\n                    <template v-slot:placeholder><v-row class=\"fill-height ma-0\" align=\"center\" justify=\"center\"><v-progress-circular indeterminate size=\"20\" width=\"2\" color=\"grey lighten-3\"></v-progress-circular></v-row></template>\n                  </v-img>\n                </div>\n              </div>\n              <div v-if=\"filteredObjects.length > 200\" class=\"text-center caption mt-2 grey--text\">\n                + {{ filteredObjects.length - 200 }} more objects...\n              </div>\n            </v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"3\" lg=\"3\">\n          <v-card outlined class=\"sticky-top\">\n            <v-card-title class=\"subtitle-2 grey lighten-4 py-2\">\n              Identity Card\n            </v-card-title>\n            \n            <div v-if=\"selectedObject\">\n              <div class=\"pa-3 text-center grey lighten-5 border-bottom\">\n                <v-chip x-small class=\"mb-2 font-weight-bold white--text\" :color=\"getGroupColor(selectedObject.group)\">\n                  {{ selectedObject.group.toUpperCase() }}\n                </v-chip>\n                <v-img :src=\"getImageUrl(selectedObject)\" max-height=\"180\" contain class=\"mx-auto mb-2 rounded\"></v-img>\n                <div class=\"caption text-truncate font-weight-medium\">{{ selectedObject.object_id }}</div>\n              </div>\n              \n              <v-list dense class=\"pa-0\">\n                <v-list-item>\n                  <v-list-item-icon class=\"mr-2\"><v-icon small>mdi-arrow-expand-all</v-icon></v-list-item-icon>\n                  <v-list-item-content>\n                    <v-list-item-title class=\"caption grey--text\">Size (ESD)</v-list-item-title>\n                    <v-list-item-subtitle class=\"font-weight-bold text--primary\">{{ formatNum(selectedObject.esd_um, 1) }} µm</v-list-item-subtitle>\n                  </v-list-item-content>\n                </v-list-item>\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content>\n                    <div class=\"d-flex justify-space-between caption mb-1\">\n                      <span class=\"grey--text\">Circularity</span>\n                      <span class=\"font-weight-bold\">{{ formatNum(selectedObject.circ, 3) }}</span>\n                    </div>\n                    <v-progress-linear :value=\"selectedObject.circ * 100\" height=\"6\" rounded color=\"blue\"></v-progress-linear>\n                  </v-list-item-content>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content>\n                    <div class=\"d-flex justify-space-between caption mb-1\">\n                      <span class=\"grey--text\">Solidity</span>\n                      <span class=\"font-weight-bold\">{{ formatNum(selectedObject.solidity, 2) }}</span>\n                    </div>\n                    <v-progress-linear :value=\"selectedObject.solidity * 100\" height=\"6\" rounded color=\"orange\"></v-progress-linear>\n                  </v-list-item-content>\n                </v-list-item>\n\n                <v-list-item class=\"d-block\">\n                   <v-row dense class=\"caption mt-1\">\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Elongation</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.elongation, 1) }}</div>\n                     </v-col>\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Density (Gray)</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.val, 0) }}</div>\n                     </v-col>\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Width</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.width_um, 0) }} µm</div>\n                     </v-col>\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Height</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.height_um, 0) }} µm</div>\n                     </v-col>\n                   </v-row>\n                </v-list-item>\n              </v-list>\n            </div>\n            \n            <div v-else class=\"pa-5 text-center grey--text caption\">\n              <v-icon large class=\"mb-2 text--disabled\">mdi-cursor-default-click-outline</v-icon>\n              <br>Select an object in the gallery to view details.\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      filters: { esd: [0, 2000], circ: [0, 1], val: [0, 255], cluster: 'All' },\n      clusterOptions: ['All', 'Filament', 'Bubble', 'Detritus', 'Dense', 'Other'],\n      sortOptions: [\n        { text: 'Size (Desc)', value: 'esd_desc' }, \n        { text: 'Solidity (Asc)', value: 'sol_asc' },\n        { text: 'Darkest (Val)', value: 'val_asc' }\n      ],\n      gallerySort: 'esd_desc',\n      selectedId: null,\n      charts: { cluster: null, pie: null }\n    }\n  },\n\n  computed: {\n    hasData() { return this.msg && Array.isArray(this.msg.payload) && this.msg.payload.length > 1; },\n    \n    // === DATA CLEANING & CLUSTERING ENGINE ===\n    cleanObjects() {\n      if (!this.hasData) return [];\n      \n      // Filter out metadata rows\n      return this.msg.payload\n        .filter(o => o.object_id !== '[t]' && o.acq_id !== '[t]' && !String(o.object_equivalent_diameter).includes('[f]'))\n        .map(o => {\n          // 1. Unit conversion\n          const px = Number(o.process_pixel || this.msg.process_pixel) || 1;\n          \n          const obj = {\n            ...o,\n            esd_um: (Number(o.object_equivalent_diameter) || 0) * px,\n            width_um: (Number(o.object_width) || 0) * px,\n            height_um: (Number(o.object_height) || 0) * px,\n            circ: Number(o['object_circ.']) || 0,\n            val: Number(o.object_MeanValue) || 0,\n            solidity: Number(o.object_solidity) || 0,\n            elongation: Number(o.object_elongation) || 1,\n          };\n\n          // 2. CLUSTERING LOGIC\n          obj.group = this.determineGroup(obj);\n          return obj;\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    // Dynamic counters for Header\n    counts() {\n      const c = { filament:0, bubble:0, detritus:0, dense:0, other:0 };\n      this.cleanObjects.forEach(o => {\n        const key = o.group.toLowerCase();\n        if(c[key] !== undefined) c[key]++;\n        else c.other++;\n      });\n      return c;\n    },\n\n    safeHeader() {\n      if (!this.cleanObjects.length) return { sample_id:'?', volume_used:1, process_pixel:1 };\n      const obj = this.cleanObjects[0];\n      const imgVol = Number(obj.acq_imaged_volume) || 0;\n      const pumpVol = Number(obj.acq_pumped_volume) || 0;\n      return {\n        sample_project: obj.sample_project || 'Unknown',\n        sample_id: obj.sample_id || 'Unknown',\n        acq_id: obj.acq_id || 'N/A',\n        volume_used: imgVol > 0 ? imgVol : (pumpVol > 0 ? pumpVol : 1),\n        process_pixel: Number(obj.process_pixel || 1)\n      };\n    },\n\n    ecotaxaLink() {\n      return this.safeHeader.acq_id !== 'N/A' ? `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.safeHeader.acq_id}.zip` : '#';\n    },\n\n    sliderStats() {\n      if (!this.cleanObjects.length) return { min:0, max:100 };\n      const vals = this.cleanObjects.map(o => o.esd_um);\n      let min = Math.floor(Math.min(...vals));\n      let max = Math.ceil(Math.max(...vals));\n      if(min>=max) max=min+10;\n      return { min, max };\n    },\n\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        const sizeOk = o.esd_um >= f.esd[0] && o.esd_um <= f.esd[1];\n        const circOk = o.circ >= f.circ[0] && o.circ <= f.circ[1];\n        const valOk = o.val >= f.val[0] && o.val <= f.val[1];\n        const clusterOk = f.cluster === 'All' || o.group === f.cluster;\n        return sizeOk && circOk && valOk && clusterOk;\n      });\n    },\n\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n      arr.sort((a, b) => {\n        if(this.gallerySort === 'esd_desc') return b.esd_um - a.esd_um;\n        if(this.gallerySort === 'sol_asc') return a.solidity - b.solidity;\n        if(this.gallerySort === 'val_asc') return a.val - b.val;\n        return b.esd_um - a.esd_um;\n      });\n      return arr.slice(0, 200);\n    },\n\n    selectedObject() { return this.filteredObjects.find(o => o.object_id === this.selectedId) || null; },\n    abundance() { return this.filteredObjects.length / this.safeHeader.volume_used; }\n  },\n\n  watch: {\n    msg: { \n      handler() { this.init(); }, \n      deep: true \n    },\n    filteredObjects() { this.updateCharts(); }\n  },\n\n  mounted() { this.init(); },\n\n  methods: {\n    init() {\n      if(this.hasData) {\n        this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n        this.updateCharts();\n      }\n    },\n    \n    formatNum(v, d) { return (Number(v)||0).toFixed(d); },\n    getImageUrl(o) { return o ? `/ps/data/browse/api/preview/big/objects/${o.object_date || 'date'}/${o.sample_id || 'sample'}/${o.acq_id || 'acq'}/${o.img_file_name}` : ''; },\n\n    // === CLUSTERING LOGIC ===\n    determineGroup(o) {\n      if (o.elongation > 3.5) return 'Filament';\n      if (o.circ > 0.85 && o.solidity > 0.95) return 'Bubble';\n      if (o.solidity < 0.75) return 'Detritus';\n      if (o.val < 100 && o.solidity > 0.85) return 'Dense';\n      return 'Other';\n    },\n\n    getGroupColor(g) {\n      const colors = { 'Filament':'#4CAF50', 'Bubble':'#9E9E9E', 'Detritus':'#795548', 'Dense':'#F44336', 'Other':'#2196F3' };\n      return colors[g] || '#000';\n    },\n\n    resetFilters() {\n      this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n      this.filters.cluster = 'All';\n      this.filters.circ = [0, 1];\n      this.filters.val = [0, 255];\n    },\n    \n    downloadCSV() {\n       if (!this.filteredObjects.length) return;\n       const headers = Object.keys(this.filteredObjects[0]);\n       const csv = [\n         headers.join(','),\n         ...this.filteredObjects.map(r => headers.map(c => JSON.stringify(r[c]||'')).join(','))\n       ].join('\\n');\n       const blob = new Blob([csv], { type: 'text/csv' });\n       const url = URL.createObjectURL(blob);\n       const a = document.createElement('a');\n       a.href = url; a.download = `${this.safeHeader.acq_id}_export.csv`;\n       a.click();\n    },\n\n    updateCharts() { setTimeout(() => { this.$nextTick(this.renderCharts); }, 250); },\n\n    renderCharts() {\n      this.renderClusterMap();\n      this.renderPie();\n    },\n\n    renderPie() {\n      const ctx = this.$refs.chartPie;\n      if(!ctx) return;\n      if(this.charts.pie) this.charts.pie.destroy();\n\n      const c = this.counts;\n      this.charts.pie = new Chart(ctx, {\n        type: 'doughnut',\n        data: {\n          labels: ['Filament', 'Dense', 'Detritus', 'Bubble', 'Other'],\n          datasets: [{\n            data: [c.filament, c.dense, c.detritus, c.bubble, c.other],\n            backgroundColor: ['#4CAF50', '#F44336', '#795548', '#9E9E9E', '#2196F3'],\n            borderWidth: 1\n          }]\n        },\n        options: { \n          responsive: true, maintainAspectRatio: false,\n          plugins: { legend: { display: false } },\n          cutout: '65%'\n        }\n      });\n    },\n\n    renderClusterMap() {\n      const ctx = this.$refs.chartCluster;\n      if(!ctx) return;\n      if(this.charts.cluster) this.charts.cluster.destroy();\n\n      // PREPARE SEPARATE DATASETS (For auto-legend)\n      const groups = {\n        Filament: [], Dense: [], Detritus: [], Bubble: [], Other: []\n      };\n      \n      this.filteredObjects.forEach(o => {\n        if(groups[o.group]) groups[o.group].push({ x: o.circ, y: o.elongation });\n        else groups['Other'].push({ x: o.circ, y: o.elongation });\n      });\n\n      this.charts.cluster = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            { label:'Filament', data: groups.Filament, backgroundColor: '#4CAF50', pointRadius: 3 },\n            { label:'Dense', data: groups.Dense, backgroundColor: '#F44336', pointRadius: 3 },\n            { label:'Detritus', data: groups.Detritus, backgroundColor: '#795548', pointRadius: 2 },\n            { label:'Bubbles', data: groups.Bubble, backgroundColor: '#9E9E9E', pointRadius: 2 },\n            { label:'Other', data: groups.Other, backgroundColor: '#2196F3', pointRadius: 2 }\n          ]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          plugins: { \n            legend: { display: true, position: 'bottom', labels: { usePointStyle: true, padding: 15 } } \n          },\n          scales: {\n            x: { title: {display: true, text:'Circularity'}, min:0, max:1.1 },\n            y: { title: {display: true, text:'Elongation (Log)'}, type: 'logarithmic', min: 1 } \n          }\n        }\n      });\n    }\n  }\n}\n</script>\n\n<style scoped>\n/* BORDER ACCENTS FOR CARDS */\n.border-left-primary { border-left: 4px solid #1976D2 !important; }\n.border-left-info { border-left: 4px solid #03A9F4 !important; }\n.border-right { border-right: 1px solid #eee; }\n.border-bottom { border-bottom: 1px solid #eee; }\n\n/* GALLERY STYLES */\n.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }\n.gallery-item { cursor: pointer; border: 2px solid transparent; transition: all 0.2s; opacity: 0.9; }\n.gallery-item:hover { transform: scale(1.1); z-index: 10; opacity: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }\n.gallery-item.selected { border-color: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2); }\n\n/* Color hints under gallery items */\n.g-filament { border-bottom: 3px solid #4CAF50; }\n.g-bubble { border-bottom: 3px solid #9E9E9E; }\n.g-dense { border-bottom: 3px solid #F44336; }\n\n.sticky-top { position: sticky; top: 12px; z-index: 5; }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1280,
+        "y": 320,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "86bff301d6790945",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "44d42558adf7baf7",
+        "page": "",
+        "ui": "",
+        "name": "ChatGPT 5.1 Pro v1",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-4 white\" style=\"min-height: 100vh; color:#333;\">\n\n    <!-- NO DATA STATE -->\n    <v-row v-if=\"!hasData\" align=\"center\" justify=\"center\" style=\"height:80vh;\">\n      <div class=\"text-center\">\n        <v-progress-circular indeterminate color=\"primary\" size=\"64\"></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text text--darken-1\">\n          Waiting for PlanktoScope segmentation results...\n        </div>\n        <div class=\"caption grey--text\">\n          Send an array of segmented objects as <code>msg.payload</code>.\n        </div>\n      </div>\n    </v-row>\n\n    <!-- MAIN VIEW -->\n    <div v-else>\n\n      <!-- HEADER / CONTEXT -->\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"12\">\n          <v-card outlined class=\"pa-3 d-flex align-center\">\n            <v-icon color=\"primary\" large class=\"mr-3\">mdi-microscope</v-icon>\n            <div>\n              <div class=\"text-h6 font-weight-bold text-uppercase primary--text\">\n                PlanktoScope Segmentation QA\n              </div>\n              <div class=\"caption grey--text\">\n                Project: <strong>{{ header.sample_project }}</strong> ·\n                Sample: <strong>{{ header.sample_id }}</strong> ·\n                Acquisition: <strong>{{ header.acq_id }}</strong>\n              </div>\n              <div class=\"caption grey--text mt-1\">\n                {{ acquisitionLabel }}\n              </div>\n            </div>\n            <v-spacer></v-spacer>\n\n            <v-btn\n              color=\"primary\"\n              outlined\n              class=\"mr-2\"\n              :href=\"ecotaxaLink\"\n              target=\"_blank\"\n              v-if=\"header.acq_id !== 'N/A'\"\n            >\n              <v-icon left small>mdi-folder-zip-outline</v-icon>\n              EcoTaxa (.zip)\n            </v-btn>\n\n            <v-btn color=\"grey darken-2\" outlined class=\"mr-2\" @click=\"downloadCSV\">\n              <v-icon left small>mdi-table-arrow-down</v-icon>\n              CSV export\n            </v-btn>\n\n            <v-btn color=\"primary\" text small @click=\"resetFilters\">\n              <v-icon left small>mdi-filter-remove-outline</v-icon>\n              Reset gates\n            </v-btn>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- TOP KPIs -->\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 text-center fill-height\">\n            <div class=\"caption grey--text\">Imaged volume</div>\n            <div class=\"text-h5 font-weight-medium\">\n              {{ formatNum(header.acq_imaged_volume, 2) }}\n              <span class=\"caption\">mL</span>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 text-center fill-height\">\n            <div class=\"caption grey--text\">Segmented objects</div>\n            <div class=\"text-h5 font-weight-medium\">\n              {{ filteredObjects.length }}\n              <span class=\"caption grey--text\">/ {{ cleanObjects.length }}</span>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"6\" md=\"3\">\n          <v-card\n            outlined\n            class=\"pa-3 text-center fill-height\"\n            style=\"border-color:#2196F3;border-width:2px;\"\n          >\n            <div class=\"caption blue--text text--darken-1 font-weight-bold\">\n              Abundance\n            </div>\n            <div class=\"text-h5 font-weight-bold blue--text text--darken-1\">\n              {{ formatNum(abundance, 1) }}\n              <span class=\"caption\">ind./mL</span>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 text-center fill-height\">\n            <div class=\"caption grey--text\">Total biovolume</div>\n            <div class=\"text-h5 font-weight-medium orange--text text--darken-1\">\n              {{ formatNum(totalBiovolume, 3) }}\n              <span class=\"caption\">mm³</span>\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- SECOND ROW: QA / ACQ PARAMS / PIPELINE -->\n      <v-row dense class=\"mb-4\">\n        <!-- Segmentation QA -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card outlined class=\"pa-3\">\n            <div class=\"subtitle-2 font-weight-bold mb-2\">Segmentation quality</div>\n\n            <v-row dense class=\"caption\">\n              <v-col cols=\"7\" class=\"grey--text\">Mean ESD</v-col>\n              <v-col cols=\"5\" class=\"text-right font-weight-bold\">\n                {{ formatNum(segStats.meanEsd, 1) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Median ESD</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.medianEsd, 1) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Objects &lt; min ESD</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ segStats.numSmall }} ({{ formatNum(segStats.fracSmall*100, 0) }}%)\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Objects with holes (Euler &lt; 0)</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ segStats.nHoles }} ({{ formatNum(segStats.fracHoles*100, 0) }}%)\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Mean circularity</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.meanCirc, 3) }}\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Mean gray (MeanValue)</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.meanVal, 0) }}\n              </v-col>\n            </v-row>\n\n            <v-divider class=\"my-2\"></v-divider>\n\n            <div class=\"caption mb-1 font-weight-bold\">Automatic alerts</div>\n            <div v-if=\"!qcAlerts.length\" class=\"caption green--text text--darken-2\">\n              No strong segmentation issues detected.\n            </div>\n            <div v-else>\n              <v-chip\n                v-for=\"(a,i) in qcAlerts\"\n                :key=\"i\"\n                small\n                class=\"ma-1\"\n                color=\"deep-orange lighten-4\"\n                text-color=\"deep-orange darken-3\"\n              >\n                <v-icon left x-small>mdi-alert</v-icon>{{ a }}\n              </v-chip>\n            </div>\n          </v-card>\n        </v-col>\n\n        <!-- Acquisition parameters -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card outlined class=\"pa-3\">\n            <div class=\"subtitle-2 font-weight-bold mb-2\">Acquisition parameters</div>\n            <v-row dense class=\"caption\">\n              <v-col cols=\"7\" class=\"grey--text\">Pumped volume</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.acq_pumped_volume, 2) }} mL\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Filtered volume</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.sample_filtered_volume, 0) }} mL\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Concentration factor</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.sample_concentration_factor, 1) }}\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Flowcell thickness</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.acq_flowcell_thickness, 0) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Min ESD (process_min_ESD)</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.smallThreshold, 0) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Pixel size</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.process_pixel, 3) }} µm/px\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Camera resolution</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ header.acq_camera_resolution || '-' }}\n              </v-col>\n            </v-row>\n          </v-card>\n        </v-col>\n\n        <!-- Segmentation pipeline -->\n        <v-col cols=\"12\" md=\"4\">\n        </v-col>\n      </v-row>\n\n      <!-- MAIN LAYOUT: GATES / CHARTS+GALLERY / INSPECTOR -->\n      <v-row>\n        <!-- GATING PANEL -->\n        <v-col cols=\"12\" md=\"3\" lg=\"2\">\n          <v-card outlined class=\"sticky-top\">\n            <v-card-title class=\"subtitle-2 grey lighten-4 py-2\">\n              Morphological gates\n            </v-card-title>\n            <v-card-text class=\"pt-4\">\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Size (ESD, µm)</span>\n                <span>{{ filters.esd[0] }}–{{ filters.esd[1] }}</span>\n              </div>\n              <v-range-slider\n                v-model=\"filters.esd\"\n                :min=\"sliderStats.min\"\n                :max=\"sliderStats.max\"\n                dense\n                hide-details\n                class=\"mt-1 mb-4\"\n              ></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Circularity</span>\n                <span>{{ filters.circ[0].toFixed(2) }}–{{ filters.circ[1].toFixed(2) }}</span>\n              </div>\n              <v-range-slider\n                v-model=\"filters.circ\"\n                :min=\"0\"\n                :max=\"1\"\n                :step=\"0.05\"\n                dense\n                hide-details\n                class=\"mt-1 mb-4\"\n              ></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Mean gray (Value)</span>\n              </div>\n              <div class=\"caption text-right grey--text\">\n                {{ filters.val[0] }}–{{ filters.val[1] }}\n              </div>\n              <v-range-slider\n                v-model=\"filters.val\"\n                :min=\"0\"\n                :max=\"255\"\n                :step=\"5\"\n                dense\n                hide-details\n                class=\"mt-1 mb-4\"\n              ></v-range-slider>\n\n              <v-btn block text small color=\"grey\" @click=\"resetFilters\">\n                Reset gates\n              </v-btn>\n            </v-card-text>\n          </v-card>\n        </v-col>\n\n        <!-- CHARTS + GALLERY -->\n        <v-col cols=\"12\" md=\"6\" lg=\"7\">\n          <v-row dense>\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Size spectrum (ESD)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartSize\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Gray-level histogram (MeanValue)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartGray\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Morphospace (ESD vs circularity)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartMorpho\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Structural complexity (elongation vs solidity)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartStructure\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n          </v-row>\n\n          <!-- OBJECT GALLERY -->\n          <v-card outlined class=\"mt-3\">\n            <v-card-title class=\"subtitle-2 py-2 grey lighten-5\">\n              Object gallery ({{ filteredObjects.length }})\n              <v-spacer></v-spacer>\n              <v-select\n                v-model=\"gallerySort\"\n                :items=\"sortOptions\"\n                item-text=\"text\"\n                item-value=\"value\"\n                dense\n                outlined\n                hide-details\n                style=\"max-width:210px;\"\n                class=\"caption\"\n              ></v-select>\n            </v-card-title>\n            <v-card-text class=\"pa-2\">\n              <div v-if=\"!filteredObjects.length\" class=\"text-center pa-5 caption\">\n                No objects within current gates.\n              </div>\n              <div class=\"gallery-grid\">\n                <div\n                  v-for=\"obj in paginatedObjects\"\n                  :key=\"obj.object_id\"\n                  class=\"gallery-item\"\n                  :class=\"{selected: selectedId === obj.object_id}\"\n                  @click=\"selectedId = obj.object_id\"\n                >\n                  <v-img\n                    :src=\"getImageUrl(obj)\"\n                    aspect-ratio=\"1\"\n                    contain\n                    class=\"white rounded\"\n                  ></v-img>\n                </div>\n              </div>\n            </v-card-text>\n          </v-card>\n        </v-col>\n\n        <!-- OBJECT INSPECTOR -->\n        <v-col cols=\"12\" md=\"3\" lg=\"3\">\n          <v-card outlined class=\"sticky-top\">\n            <v-card-title class=\"subtitle-2 grey lighten-4 py-2\">\n              Object inspector\n            </v-card-title>\n\n            <div v-if=\"selectedObject\" class=\"pa-3\">\n              <v-img\n                :src=\"getImageUrl(selectedObject)\"\n                max-height=\"220\"\n                contain\n                class=\"mx-auto mb-2\"\n              ></v-img>\n              <div class=\"caption text-center mb-3 font-weight-bold\">\n                {{ selectedObject.object_id }}\n              </div>\n\n              <v-row dense class=\"caption\">\n                <v-col cols=\"7\" class=\"grey--text\">ESD</v-col>\n                <v-col cols=\"5\" class=\"text-right font-weight-bold\">\n                  {{ formatNum(selectedObject.esd_um, 1) }} µm\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Width × height</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.width_um,1) }}×{{ formatNum(selectedObject.height_um,1) }} µm\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Circularity</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.circ, 3) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Mean gray</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.val, 0) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Elongation</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.elongation, 1) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Solidity</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.solidity, 3) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Eccentricity</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.ecc, 3) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Euler number</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ selectedObject.euler }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Area (px²)</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.area_px2, 0) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Area (µm²)</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.area_um2, 1) }}\n                </v-col>\n              </v-row>\n            </div>\n\n            <div v-else class=\"pa-4 caption grey--text text-center\">\n              Select an object in the gallery to inspect its segmentation.\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      filters: {\n        esd: [0, 2000],\n        circ: [0, 1],\n        val: [0, 255]\n      },\n      sortOptions: [\n        { text: 'ESD (descending)', value: 'esd_desc' },\n        { text: 'ESD (ascending)', value: 'esd_asc' },\n        { text: 'Darkest (MeanValue)', value: 'val_asc' },\n        { text: 'Roundest (circularity)', value: 'circ_desc' }\n      ],\n      gallerySort: 'esd_desc',\n      selectedId: null,\n      charts: {\n        chartSize: null,\n        chartGray: null,\n        chartMorpho: null,\n        chartStructure: null\n      }\n    };\n  },\n\n  computed: {\n    hasData() {\n      return (\n        this.msg &&\n        Array.isArray(this.msg.payload) &&\n        this.msg.payload.length > 1\n      );\n    },\n\n    cleanObjects() {\n      if (!this.hasData) return [];\n\n      // First row can be a template row with \"[f]\" / \"[t]\" markers — skip it\n      const items = this.msg.payload.filter(o => o && o.object_id && o.object_id !== '[t]');\n\n      return items\n        .map(o => {\n          const pixelSize =\n            Number(o.process_pixel || this.msg.process_pixel || this.msg.calibration_pixel_size) || 1; // µm/px\n\n          const esd_px = Number(o.object_equivalent_diameter) || 0;\n          const width_px = Number(o.object_width) || 0;\n          const height_px = Number(o.object_height) || 0;\n          const area_px2 = Number(o.object_area) || 0;\n\n          return {\n            ...o,\n            pixelSize,\n            esd_px,\n            esd_um: esd_px * pixelSize,\n            width_px,\n            height_px,\n            width_um: width_px * pixelSize,\n            height_um: height_px * pixelSize,\n            circ: Number(o['object_circ.']) || 0,\n            val: Number(o.object_MeanValue) || 0,\n            hue: Number(o.object_MeanHue) || 0,\n            solidity: Number(o.object_solidity) || 0,\n            elongation: Number(o.object_elongation) || 1,\n            ecc: Number(o.object_eccentricity) || 0,\n            euler: Number(o.object_euler_number) || 0,\n            area_px2,\n            area_um2: area_px2 * pixelSize * pixelSize\n          };\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    header() {\n      if (!this.cleanObjects.length) {\n        return {\n          sample_project: '?',\n          sample_id: '?',\n          acq_id: 'N/A',\n          acq_imaged_volume: 0,\n          acq_pumped_volume: 0,\n          sample_filtered_volume: 0,\n          sample_concentration_factor: 1,\n          acq_flowcell_thickness: 0,\n          process_min_ESD: 0,\n          process_pixel: 0,\n          acq_camera_resolution: '',\n          acq_local_datetime: '',\n          object_date: '',\n          object_lat: null,\n          object_lon: null\n        };\n      }\n      const obj =\n        this.cleanObjects.find(o => Number(o.acq_imaged_volume) > 0) ||\n        this.cleanObjects[0];\n\n      return {\n        sample_project: obj.sample_project || 'Unknown',\n        sample_id: obj.sample_id || 'Unknown',\n        acq_id: obj.acq_id || 'N/A',\n        acq_imaged_volume: Number(obj.acq_imaged_volume) || 0,\n        acq_pumped_volume: Number(obj.acq_pumped_volume) || 0,\n        sample_filtered_volume: Number(obj.sample_filtered_volume) || 0,\n        sample_concentration_factor: Number(obj.sample_concentration_factor) || 1,\n        acq_flowcell_thickness: Number(obj.acq_flowcell_thickness) || 0,\n        process_min_ESD: Number(obj.process_min_ESD) || 0,\n        process_pixel:\n          Number(obj.process_pixel || this.msg.process_pixel || this.msg.calibration_pixel_size) || 0,\n        acq_camera_resolution: obj.acq_camera_resolution || '',\n        acq_local_datetime: obj.acq_local_datetime || '',\n        object_date: obj.object_date || '',\n        object_lat: Number(obj.object_lat) || null,\n        object_lon: Number(obj.object_lon) || null\n      };\n    },\n\n    acquisitionLabel() {\n      const h = this.header;\n      const parts = [];\n      if (h.object_date) parts.push(`Date: ${h.object_date}`);\n      if (h.acq_local_datetime) parts.push(`Local: ${h.acq_local_datetime}`);\n      if (h.object_lat !== null && h.object_lon !== null) {\n        parts.push(`Lat/Lon: ${h.object_lat.toFixed(3)}, ${h.object_lon.toFixed(3)}`);\n      }\n      return parts.join(' · ') || 'Acquisition context not available in payload.';\n    },\n\n    ecotaxaLink() {\n      const acq = this.header.acq_id;\n      if (!acq || acq === 'N/A') return '#';\n      return `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${acq}.zip`;\n    },\n\n    sliderStats() {\n      if (!this.cleanObjects.length) return { min: 0, max: 100 };\n      const vals = this.cleanObjects.map(o => o.esd_um);\n      let min = Math.floor(Math.min(...vals));\n      let max = Math.ceil(Math.max(...vals));\n      if (min >= max) max = min + 10;\n      return { min, max };\n    },\n\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        return (\n          o.esd_um >= f.esd[0] &&\n          o.esd_um <= f.esd[1] &&\n          o.circ >= f.circ[0] &&\n          o.circ <= f.circ[1] &&\n          o.val >= f.val[0] &&\n          o.val <= f.val[1]\n        );\n      });\n    },\n\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n      arr.sort((a, b) => {\n        switch (this.gallerySort) {\n          case 'esd_asc':\n            return a.esd_um - b.esd_um;\n          case 'val_asc':\n            return a.val - b.val;\n          case 'circ_desc':\n            return b.circ - a.circ;\n          case 'esd_desc':\n          default:\n            return b.esd_um - a.esd_um;\n        }\n      });\n      return arr.slice(0, 200);\n    },\n\n    selectedObject() {\n      return (\n        this.filteredObjects.find(o => o.object_id === this.selectedId) ||\n        this.filteredObjects[0] ||\n        null\n      );\n    },\n\n    abundance() {\n      const v = this.header.acq_imaged_volume;\n      return v > 0 ? this.filteredObjects.length / v : 0;\n    },\n\n    totalBiovolume() {\n      const sumUm3 = this.filteredObjects.reduce((acc, o) => {\n        const r = o.esd_um / 2;\n        return acc + (4 / 3) * Math.PI * Math.pow(r, 3);\n      }, 0);\n      return sumUm3 / 1e9; // µm³ → mm³\n    },\n\n    processingSteps() {\n      if (!this.cleanObjects.length) return [];\n\n      const o = this.cleanObjects[0];\n      const keys = [\n        'process_1st_operation',\n        'process_2nd_operation',\n        'process_3rd_operation',\n        'process_4th_operation',\n        'process_5th_operation',\n        'process_6th_operation',\n        'process_7th_operation'\n      ];\n\n      const steps = [];\n\n      keys.forEach((k, idx) => {\n        const raw = o[k];\n        if (!raw) return;\n\n        const str = String(raw);\n\n        // Type\n        let label = `Step ${idx + 1}`;\n        const mType = str.match(/'type'\\s*:\\s*'([^']+)'/);\n        if (mType && mType[1]) {\n          label = mType[1];\n        }\n\n        // Compact parameters summary\n        const parts = [];\n\n        const mAlg = str.match(/'algorithm'\\s*:\\s*'([^']+)'/);\n        if (mAlg && mAlg[1]) parts.push(mAlg[1]);\n\n        const mTypeParam = str.match(/'parameters'\\s*:\\s*\\{[^}]*'type'\\s*:\\s*'([^']+)'/);\n        if (mTypeParam && mTypeParam[1]) parts.push(mTypeParam[1]);\n\n        const mKernel = str.match(/'kernel_size'\\s*:\\s*([0-9.]+)/);\n        if (mKernel && mKernel[1]) parts.push(`k=${mKernel[1]}`);\n\n        const mShape = str.match(/'kernel_shape'\\s*:\\s*'([^']+)'/);\n        if (mShape && mShape[1]) parts.push(mShape[1]);\n\n        const params = parts.join(', ');\n\n        steps.push({\n          order: idx + 1,\n          label,\n          params\n        });\n      });\n\n      return steps;\n    },\n\n    segStats() {\n      const N = this.cleanObjects.length;\n      if (!N) {\n        return {\n          meanEsd: 0,\n          medianEsd: 0,\n          sdEsd: 0,\n          numSmall: 0,\n          fracSmall: 0,\n          nHoles: 0,\n          fracHoles: 0,\n          meanCirc: 0,\n          meanVal: 0,\n          smallThreshold: 0\n        };\n      }\n\n      const esdVals = this.cleanObjects.map(o => o.esd_um).filter(v => v > 0);\n      const circVals = this.cleanObjects.map(o => o.circ).filter(v => v >= 0);\n      const valVals = this.cleanObjects.map(o => o.val).filter(v => v >= 0);\n\n      const smallThreshold = Number(this.header.process_min_ESD) || 0;\n      const numSmall =\n        smallThreshold > 0\n          ? this.cleanObjects.filter(o => o.esd_um > 0 && o.esd_um < smallThreshold).length\n          : 0;\n      const nHoles = this.cleanObjects.filter(o => o.euler < 0).length;\n\n      const esdStats = this.basicStats(esdVals);\n      const circStats = this.basicStats(circVals);\n      const valStats = this.basicStats(valVals);\n\n      return {\n        meanEsd: esdStats.mean,\n        medianEsd: esdStats.median,\n        sdEsd: esdStats.sd,\n        numSmall,\n        fracSmall: N ? numSmall / N : 0,\n        nHoles,\n        fracHoles: N ? nHoles / N : 0,\n        meanCirc: circStats.mean,\n        meanVal: valStats.mean,\n        smallThreshold\n      };\n    },\n\n    qcAlerts() {\n      const alerts = [];\n      const s = this.segStats;\n\n      if (s.smallThreshold > 0 && s.fracSmall > 0.4) {\n        alerts.push('High fraction of objects below min ESD → possible over-segmentation or noise.');\n      }\n      if (s.fracHoles > 0.3) {\n        alerts.push('Many objects with Euler < 0 (holes) → hollow objects or thresholding artefacts.');\n      }\n      if (s.meanVal < 40) {\n        alerts.push('Very low gray levels → segmentation on dark background / threshold may be too low.');\n      }\n      if (s.meanCirc < 0.2) {\n        alerts.push('Very low mean circularity → many elongated objects (filaments/fragments?).');\n      }\n\n      return alerts;\n    }\n  },\n\n  watch: {\n    msg: {\n      handler(val) {\n        if (val && Array.isArray(val.payload)) {\n          this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n          this.updateCharts();\n        }\n      },\n      deep: true\n    },\n    filteredObjects() {\n      this.updateCharts();\n    }\n  },\n\n  mounted() {\n    if (this.hasData) {\n      this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n      this.updateCharts();\n    }\n  },\n\n  beforeUnmount() {\n    Object.keys(this.charts).forEach(k => {\n      if (this.charts[k]) {\n        this.charts[k].destroy();\n        this.charts[k] = null;\n      }\n    });\n  },\n\n  methods: {\n    formatNum(v, d) {\n      return typeof v === 'number' && !isNaN(v) ? v.toFixed(d) : '-';\n    },\n\n    basicStats(arr) {\n      if (!arr || !arr.length) {\n        return { mean: 0, median: 0, sd: 0 };\n      }\n      const n = arr.length;\n      const sum = arr.reduce((a, b) => a + b, 0);\n      const mean = sum / n;\n      const sorted = [...arr].sort((a, b) => a - b);\n      const median =\n        n % 2\n          ? sorted[(n - 1) / 2]\n          : (sorted[n / 2 - 1] + sorted[n / 2]) / 2;\n      const sd = Math.sqrt(\n        arr.reduce((acc, v) => acc + Math.pow(v - mean, 2), 0) / n\n      );\n      return { mean, median, sd };\n    },\n\n    getImageUrl(o) {\n      if (!o) return '';\n      const date = o.object_date || this.header.object_date || 'date';\n      const sample = o.sample_id || this.header.sample_id || 'sample';\n      const acq = o.acq_id || this.header.acq_id || 'acq';\n      return `/ps/data/browse/api/preview/big/objects/${date}/${sample}/${acq}/${o.img_file_name}`;\n    },\n\n    downloadCSV() {\n      if (!this.filteredObjects.length) return;\n      const headers = Object.keys(this.filteredObjects[0]);\n      const csv = [\n        headers.join(','),\n        ...this.filteredObjects.map(r =>\n          headers.map(c => JSON.stringify(r[c] != null ? r[c] : '')).join(',')\n        )\n      ].join('\\n');\n      const blob = new Blob([csv], { type: 'text/csv' });\n      const url = URL.createObjectURL(blob);\n      const a = document.createElement('a');\n      a.href = url;\n      a.download = `${this.header.acq_id || 'segmentation'}_export.csv`;\n      a.click();\n      URL.revokeObjectURL(url);\n    },\n\n    resetFilters() {\n      this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n      this.filters.circ = [0, 1];\n      this.filters.val = [0, 255];\n    },\n\n    updateCharts() {\n      setTimeout(() => {\n        this.$nextTick(() => {\n          this.renderAllCharts();\n        });\n      }, 200);\n    },\n\n    renderAllCharts() {\n      this.drawChart('chartSize', 'bar', this.getSizeHistData(), {\n        x: { title: { display: true, text: 'ESD (µm)' } },\n        y: { beginAtZero: true, title: { display: true, text: 'Count' } }\n      });\n\n      this.drawChart('chartGray', 'bar', this.getGrayHistData(), {\n        x: { title: { display: true, text: 'MeanValue (0–255)' } },\n        y: { beginAtZero: true, title: { display: true, text: 'Count' } }\n      });\n\n      this.drawChart('chartMorpho', 'scatter', this.getScatterData('esd_um', 'circ'), {\n        x: { title: { display: true, text: 'ESD (µm)' } },\n        y: { min: 0, max: 1.1, title: { display: true, text: 'Circularity' } }\n      });\n\n      this.drawChart('chartStructure', 'scatter', this.getScatterData('elongation', 'solidity'), {\n        x: { title: { display: true, text: 'Elongation' }, min: 1 },\n        y: { min: 0, max: 1.1, title: { display: true, text: 'Solidity' } }\n      });\n    },\n\n    drawChart(refName, type, data, scales) {\n      const canvas = this.$refs[refName];\n      if (!canvas || !data || !data.datasets || !data.datasets.length) {\n        if (this.charts[refName]) {\n          this.charts[refName].destroy();\n          this.charts[refName] = null;\n        }\n        return;\n      }\n\n      if (this.charts[refName]) {\n        this.charts[refName].destroy();\n        this.charts[refName] = null;\n      }\n\n      this.charts[refName] = new Chart(canvas, {\n        type,\n        data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          animation: false,\n          plugins: { legend: { display: false } },\n          scales\n        }\n      });\n    },\n\n    getSizeHistData() {\n      const vals = this.filteredObjects.map(o => o.esd_um).filter(v => v > 0);\n      if (!vals.length) return { labels: [], datasets: [] };\n\n      const bins = 15;\n      const min = Math.min(...vals);\n      const max = Math.max(...vals);\n      const step = (max - min) / bins || 1;\n      const hist = new Array(bins).fill(0);\n      const labels = [];\n\n      for (let i = 0; i < bins; i++) {\n        const edge = min + i * step;\n        labels.push(edge.toFixed(0));\n      }\n      vals.forEach(v => {\n        let idx = Math.floor((v - min) / step);\n        if (idx >= bins) idx = bins - 1;\n        if (idx < 0) idx = 0;\n        hist[idx]++;\n      });\n\n      return {\n        labels,\n        datasets: [\n          {\n            data: hist,\n            backgroundColor: '#2196F3'\n          }\n        ]\n      };\n    },\n\n    getGrayHistData() {\n      const vals = this.filteredObjects.map(o => o.val).filter(v => v >= 0);\n      if (!vals.length) return { labels: [], datasets: [] };\n\n      const bins = 16;\n      const min = 0;\n      const max = 255;\n      const step = (max - min) / bins;\n      const hist = new Array(bins).fill(0);\n      const labels = [];\n\n      for (let i = 0; i < bins; i++) {\n        const start = min + i * step;\n        labels.push(start.toFixed(0));\n      }\n      vals.forEach(v => {\n        let idx = Math.floor((v - min) / step);\n        if (idx >= bins) idx = bins - 1;\n        if (idx < 0) idx = 0;\n        hist[idx]++;\n      });\n\n      return {\n        labels,\n        datasets: [\n          {\n            data: hist,\n            backgroundColor: '#9C27B0'\n          }\n        ]\n      };\n    },\n\n    getScatterData(xKey, yKey) {\n      const data = this.filteredObjects.map(o => ({\n        x: Number(o[xKey]) || 0,\n        y: Number(o[yKey]) || 0\n      }));\n      if (!data.length) return { datasets: [] };\n\n      return {\n        datasets: [\n          {\n            data,\n            backgroundColor: 'rgba(33,150,243,0.5)',\n            pointRadius: 2\n          }\n        ]\n      };\n    }\n  }\n};\n</script>\n\n<style scoped>\n.v-card {\n  border: 1px solid #ddd !important;\n}\n\n.sticky-top {\n  position: sticky;\n  top: 12px;\n  z-index: 5;\n}\n\n/* Gallery */\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));\n  gap: 4px;\n}\n\n.gallery-item {\n  cursor: pointer;\n  border: 2px solid transparent;\n  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;\n}\n\n.gallery-item:hover {\n  transform: scale(1.08);\n  z-index: 2;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n}\n\n.gallery-item.selected {\n  border-color: #2196F3;\n}\n</style>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 240,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "c42d0eb4a7bc6eb4",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "d": true,
+        "group": "e3bd8883700f1ab8",
+        "page": "",
+        "ui": "",
+        "name": "ChatGPT 5.1 Pro v2",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-2 dashboard-root\">\n    <v-row dense>\n      <v-col cols=\"12\">\n        <v-card class=\"mb-2\" outlined>\n          <v-card-text>\n            <v-row align=\"center\" justify=\"space-between\" no-gutters>\n              <v-col cols=\"12\" md=\"4\">\n                <div class=\"text-h6 font-weight-medium\">\n                  {{ headerProjectName || 'No project' }}\n                </div>\n                <div class=\"caption grey--text\">\n                  Sample:\n                  <span class=\"font-weight-medium\">{{ headerSampleId || 'N/A' }}</span>\n                  <span v-if=\"headerLocalDateTime\"> • {{ headerLocalDateTime }}</span>\n                </div>\n              </v-col>\n              <v-col cols=\"12\" md=\"4\">\n                <div class=\"d-flex flex-wrap\">\n                  <v-chip small class=\"mr-2 mb-1\" color=\"primary\" text-color=\"white\">\n                    {{ pixelSizeDisplay }}\n                  </v-chip>\n                  <v-chip small class=\"mr-2 mb-1\" color=\"teal\" text-color=\"white\">\n                    {{ volumeDisplay }}\n                  </v-chip>\n                  <v-chip small class=\"mr-2 mb-1\" color=\"indigo\" text-color=\"white\" v-if=\"cameraDisplay\">\n                    {{ cameraDisplay }}\n                  </v-chip>\n                </div>\n              </v-col>\n              <v-col cols=\"12\" md=\"4\">\n                <div class=\"d-flex justify-end flex-wrap mt-2 mt-md-0\">\n                  <v-btn\n                    small\n                    class=\"mr-2 mb-1\"\n                    :href=\"ecoTaxaUrl\"\n                    target=\"_blank\"\n                    :disabled=\"!ecoTaxaUrl\"\n                    color=\"primary\"\n                    outlined\n                  >\n                    <v-icon left small>mdi-zip-box</v-icon>\n                    EcoTaxa ZIP\n                  </v-btn>\n                  <v-btn\n                    small\n                    class=\"mr-2 mb-1\"\n                    @click=\"exportCsv\"\n                    color=\"primary\"\n                    outlined\n                  >\n                    <v-icon left small>mdi-download</v-icon>\n                    CSV\n                  </v-btn>\n                  <v-btn\n                    small\n                    class=\"mb-1\"\n                    @click=\"resetFilters\"\n                    color=\"secondary\"\n                    text\n                  >\n                    <v-icon left small>mdi-restore</v-icon>\n                    Reset\n                  </v-btn>\n                </div>\n              </v-col>\n            </v-row>\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n```\n  <v-col cols=\"12\">\n    <v-row dense>\n      <v-col cols=\"12\" sm=\"4\" md=\"2\" v-for=\"kpi in kpiCards\" :key=\"kpi.key\">\n        <v-card class=\"kpi-card\" outlined>\n          <div class=\"kpi-border\" :class=\"'kpi-border--' + kpi.key\"></div>\n          <v-card-text class=\"py-2\">\n            <div class=\"caption text-uppercase grey--text text--darken-1\">\n              {{ kpi.label }}\n            </div>\n            <div class=\"d-flex align-center justify-space-between\">\n              <div class=\"text-h5 font-weight-medium\">{{ kpi.value }}</div>\n              <div class=\"caption grey--text\" v-if=\"kpi.sub\">{{ kpi.sub }}</div>\n            </div>\n          </v-card-text>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-col>\n</v-row>\n\n<v-row dense>\n  <v-col cols=\"12\" md=\"3\" lg=\"2\">\n    <v-card class=\"sticky-card\" outlined>\n      <v-card-title class=\"py-2\">\n        <span class=\"subtitle-2 font-weight-medium\">Filters</span>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div class=\"mb-3\">\n          <div class=\"caption grey--text text--darken-1 d-flex justify-space-between\">\n            <span>ESD (µm)</span>\n            <span>{{ formatNumber(esdRange[0]) }} – {{ formatNumber(esdRange[1]) }}</span>\n          </div>\n          <v-range-slider\n            v-model=\"esdRange\"\n            :min=\"minEsd\"\n            :max=\"maxEsd\"\n            :step=\"(maxEsd - minEsd) / 50 || 1\"\n            hide-details\n            dense\n          ></v-range-slider>\n        </div>\n\n        <div class=\"mb-3\">\n          <div class=\"caption grey--text text--darken-1 d-flex justify-space-between\">\n            <span>Circularity</span>\n            <span>{{ formatNumber(circularityRange[0]) }} – {{ formatNumber(circularityRange[1]) }}</span>\n          </div>\n          <v-range-slider\n            v-model=\"circularityRange\"\n            :min=\"minCircularity\"\n            :max=\"maxCircularity\"\n            :step=\"0.01\"\n            hide-details\n            dense\n          ></v-range-slider>\n        </div>\n\n        <div class=\"mb-3\">\n          <div class=\"caption grey--text text--darken-1 mb-1\">\n            Cluster\n          </div>\n          <v-select\n            dense\n            outlined\n            hide-details\n            :items=\"clusterOptions\"\n            v-model=\"selectedCluster\"\n          ></v-select>\n        </div>\n\n        <div class=\"mt-3\">\n          <div class=\"caption mb-1 grey--text text--darken-1\">\n            Cluster distribution\n          </div>\n          <div class=\"cluster-pie-wrapper\">\n            <canvas ref=\"clusterPieCanvas\"></canvas>\n          </div>\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n\n  <v-col cols=\"12\" md=\"6\" lg=\"7\">\n    <v-card class=\"mb-2\" outlined>\n      <v-card-title class=\"py-2\">\n        <span class=\"subtitle-2 font-weight-medium\">Morphology descriptors</span>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div class=\"mb-3\">\n          <div class=\"caption mb-1 grey--text text--darken-1\">\n            Circularity vs Elongation\n          </div>\n          <div class=\"chart-container scatter-container\">\n            <canvas ref=\"scatterCanvas\"></canvas>\n          </div>\n        </div>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <div>\n          <div class=\"caption mb-1 grey--text text--darken-1\">\n            ESD distribution (µm)\n          </div>\n          <div class=\"chart-container\">\n            <canvas ref=\"esdHistCanvas\"></canvas>\n          </div>\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n\n  <v-col cols=\"12\" md=\"3\" lg=\"3\">\n    <v-card class=\"sticky-card mb-2\" outlined>\n      <v-card-title class=\"py-2\">\n        <span class=\"subtitle-2 font-weight-medium\">Object inspector</span>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div v-if=\"selectedObject\">\n          <div class=\"mb-2 d-flex align-center justify-space-between\">\n            <div>\n              <div class=\"subtitle-2 font-weight-medium\">\n                ID {{ selectedObject.object_id || selectedObject._uid }}\n              </div>\n              <div class=\"caption grey--text text--darken-1\">\n                {{ selectedObject.sample_id || headerSampleId || 'N/A' }}\n                •\n                {{ selectedObject.acq_id || headerAcqId || 'N/A' }}\n              </div>\n            </div>\n            <v-chip\n              small\n              :color=\"clusterColor(selectedObject.clusterCanonical)\"\n              text-color=\"white\"\n            >\n              {{ selectedObject.clusterCanonical }}\n            </v-chip>\n          </div>\n\n          <div v-if=\"getObjectImageUrl(selectedObject)\" class=\"inspector-image-wrapper mb-2\">\n            <v-img\n              :src=\"getObjectImageUrl(selectedObject)\"\n              :aspect-ratio=\"1\"\n              contain\n              class=\"inspector-img\"\n              ref=\"inspectorImage\"\n              @load=\"onInspectorImageLoad\"\n            ></v-img>\n            <div v-if=\"scaleBarVisible\" class=\"scale-bar\">\n              <div class=\"scale-bar-line\" :style=\"{ width: scaleBarCssWidth + 'px' }\"></div>\n              <div class=\"scale-bar-label\">{{ scaleBarMicronsLabel }}</div>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"inspector-placeholder mb-2 d-flex align-center justify-center caption grey--text\"\n          >\n            No preview available\n          </div>\n\n          <div v-if=\"getObjectImageUrl(selectedObject)\" class=\"mb-2 d-flex justify-end\">\n            <v-btn\n              small\n              outlined\n              color=\"primary\"\n              :href=\"getObjectImageUrl(selectedObject)\"\n              :download=\"downloadFileName(selectedObject)\"\n              target=\"_blank\"\n            >\n              <v-icon left small>mdi-download</v-icon>\n              Télécharger l'image\n            </v-btn>\n          </div>\n\n          <v-row dense class=\"mb-2\">\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">ESD</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.esd_um) }} µm\n              </div>\n            </v-col>\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">Area</div>\n              <div class=\"subtitle-2\">\n                <span v-if=\"selectedObject.area_um2\">\n                  {{ formatNumber(selectedObject.area_um2) }} µm²\n                </span>\n                <span v-else>N/A</span>\n              </div>\n            </v-col>\n          </v-row>\n\n          <v-row dense class=\"mb-2\">\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">Circularity</div>\n              <div class=\"subtitle-2 mb-1\">\n                {{ formatNumber(selectedObject.circularity) }}\n              </div>\n              <v-progress-linear\n                :value=\"metricToPercent(selectedObject.circularity)\"\n                height=\"5\"\n              ></v-progress-linear>\n            </v-col>\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">Solidity</div>\n              <div class=\"subtitle-2 mb-1\">\n                {{ formatNumber(selectedObject.solidity) }}\n              </div>\n              <v-progress-linear\n                :value=\"metricToPercent(selectedObject.solidity)\"\n                height=\"5\"\n                color=\"deep-purple\"\n              ></v-progress-linear>\n            </v-col>\n          </v-row>\n\n          <v-row dense class=\"mb-2\">\n            <v-col cols=\"4\">\n              <div class=\"caption grey--text text--darken-1\">Elongation</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.elongation) }}\n              </div>\n            </v-col>\n            <v-col cols=\"4\">\n              <div class=\"caption grey--text text--darken-1\">Width</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.width_um) }} µm\n              </div>\n            </v-col>\n            <v-col cols=\"4\">\n              <div class=\"caption grey--text text--darken-1\">Height</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.height_um) }} µm\n              </div>\n            </v-col>\n          </v-row>\n        </div>\n        <div v-else class=\"text-center caption grey--text py-6\">\n          Select an object from the gallery to inspect its details.\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n</v-row>\n\n<v-row dense class=\"mt-2\">\n  <v-col cols=\"12\">\n    <v-card outlined>\n      <v-card-title class=\"py-2\">\n        <div class=\"d-flex align-center justify-space-between flex-wrap w-100\">\n          <div class=\"subtitle-2 font-weight-medium\">\n            Objects gallery\n          </div>\n          <div class=\"d-flex align-center\">\n            <v-select\n              dense\n              outlined\n              hide-details\n              class=\"mr-2 gallery-sort-select\"\n              style=\"max-width: 220px;\"\n              :items=\"gallerySortOptions\"\n              v-model=\"gallerySortKey\"\n            ></v-select>\n            <div class=\"caption grey--text\">\n              {{ visibleObjects.length }} / {{ filteredObjects.length }} visible\n            </div>\n          </div>\n        </div>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div v-if=\"visibleObjects.length\" class=\"gallery-grid\">\n          <div\n            v-for=\"obj in visibleObjects\"\n            :key=\"obj._uid\"\n            class=\"gallery-item\"\n            :class=\"['cluster-' + obj.clusterCanonical, { 'gallery-item--selected': selectedObject && selectedObject._uid === obj._uid }]\"\n            @click=\"selectObject(obj)\"\n          >\n            <v-img\n              v-if=\"getObjectImageUrl(obj)\"\n              :src=\"getObjectImageUrl(obj)\"\n              :aspect-ratio=\"1\"\n              contain\n              class=\"gallery-img\"\n            ></v-img>\n            <div\n              v-else\n              class=\"gallery-placeholder d-flex align-center justify-center caption grey--text\"\n            >\n              No image\n            </div>\n            <div class=\"gallery-meta\">\n              <div class=\"caption\">{{ formatNumber(obj.esd_um) }} µm</div>\n              <div class=\"caption grey--text text--darken-1\">\n                {{ obj.clusterCanonical }}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div v-else class=\"text-center caption grey--text py-4\">\n          No objects match current filters.\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n</v-row>\n```\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: {\n    msg: {\n      type: Object,\n      default: function () {\n        return {};\n      }\n    }\n  },\n  data: function () {\n    return {\n      esdRange: [0, 0],\n      circularityRange: [0, 1],\n      selectedCluster: 'All',\n      gallerySortKey: 'ESD ↓ (largest first)',\n      charts: {\n        clusterPie: null,\n        scatter: null,\n        esdHist: null\n      },\n      selectedUid: null,\n      maxGalleryItems: 200,\n      chartReady: false,\n      chartInitInterval: null,\n      chartUpdateTimeout: null,\n      inspectorImageWidth: null,\n      inspectorImageNaturalWidth: null,\n      maxScatterPoints: 2000\n    };\n  },\n  computed: {\n    payload: function () {\n      var p = this.msg && this.msg.payload;\n      return Array.isArray(p) ? p : [];\n    },\n    cleanObjects: function () {\n      var rows = this.payload || [];\n      var result = [];\n      for (var i = 0; i < rows.length; i++) {\n        var row = rows[i];\n        if (!row || typeof row !== 'object') continue;\n        if (this.isTemplateRow(row)) continue;\n        var o = Object.assign({}, row);\n        o.object_id = o.object_id || o.id || (i + 1);\n        var pixelSize = this.toNumber(o.process_pixel) || this.toNumber(o.calibration_pixel_size) || 1;\n        o._pixelSize = pixelSize;\n\n        var esdPx = this.toNumber(o.object_equivalent_diameter);\n        if (esdPx === null) continue;\n        o.object_equivalent_diameter = esdPx;\n        o.esd_um = esdPx * pixelSize;\n\n        var widthPx = this.toNumber(o.object_width);\n        var heightPx = this.toNumber(o.object_height);\n        if (widthPx !== null) {\n          o.object_width = widthPx;\n          o.width_um = widthPx * pixelSize;\n        }\n        if (heightPx !== null) {\n          o.object_height = heightPx;\n          o.height_um = heightPx * pixelSize;\n        }\n\n        var areaPx2 = this.toNumber(o.object_area);\n        if (areaPx2 !== null) {\n          o.object_area = areaPx2;\n          o.area_um2 = areaPx2 * pixelSize * pixelSize;\n        }\n\n        o.circularity = this.toNumber(o.circularity);\n        o.elongation = this.toNumber(o.elongation);\n        o.solidity = this.toNumber(o.solidity || o.Solidity);\n        o.object_MeanValue = this.toNumber(o.object_MeanValue || o.gray_mean || o.mean_gray);\n\n        var clusterLabel = this.getClusterLabel(o);\n        o.clusterCanonical = clusterLabel;\n\n        o._uid = String(o.object_id) + '-' + i + '-' + clusterLabel;\n        result.push(o);\n      }\n      return result;\n    },\n    headerObject: function () {\n      if (this.cleanObjects.length) return this.cleanObjects[0];\n      if (this.payload && this.payload.length) return this.payload[0];\n      return null;\n    },\n    headerProjectName: function () {\n      if (!this.headerObject) return this.msg && this.msg.sample_project;\n      return (\n        this.headerObject.sample_project ||\n        this.headerObject.project_name ||\n        this.headerObject.project ||\n        (this.msg && this.msg.sample_project) ||\n        null\n      );\n    },\n    headerSampleId: function () {\n      if (!this.headerObject) return this.msg && this.msg.sample_id;\n      return (\n        this.headerObject.sample_id ||\n        this.headerObject.sampleID ||\n        (this.msg && this.msg.sample_id) ||\n        null\n      );\n    },\n    headerLocalDateTime: function () {\n      if (!this.headerObject) return null;\n      return this.headerObject.acq_local_datetime || this.headerObject.local_datetime || null;\n    },\n    headerAcqId: function () {\n      if (!this.headerObject) return null;\n      return this.headerObject.acq_id || this.headerObject.acqID || null;\n    },\n    pixelSizeValue: function () {\n      if (!this.headerObject) return null;\n      return (\n        this.headerObject._pixelSize ||\n        this.toNumber(this.headerObject.process_pixel) ||\n        this.toNumber(this.headerObject.calibration_pixel_size) ||\n        null\n      );\n    },\n    pixelSizeDisplay: function () {\n      return this.pixelSizeValue ? this.formatNumber(this.pixelSizeValue) + ' µm/px' : 'Pixel size: N/A';\n    },\n    volumeInfo: function () {\n      var h = this.headerObject;\n      if (!h) return { label: null, value: null };\n      var vol = this.toNumber(h.sample_filtered_volume);\n      if (vol !== null) return { label: 'Filtered volume', value: vol };\n      vol = this.toNumber(h.acq_pumped_volume);\n      if (vol !== null) return { label: 'Pumped volume', value: vol };\n      vol = this.toNumber(h.acq_imaged_volume);\n      if (vol !== null) return { label: 'Imaged volume', value: vol };\n      return { label: null, value: null };\n    },\n    volumeDisplay: function () {\n      var info = this.volumeInfo;\n      if (!info.value) return 'Volume: N/A';\n      return info.label + ': ' + this.formatNumber(info.value) + ' mL';\n    },\n    cameraDisplay: function () {\n      var h = this.headerObject;\n      if (!h) return null;\n      var res = h.acq_camera_resolution || h.camera_resolution;\n      var iso = h.acq_camera_iso || h.camera_iso;\n      var shutter = h.acq_camera_shutter_speed || h.camera_shutter;\n      var bits = [];\n      if (res) bits.push(res);\n      if (iso) bits.push('ISO ' + iso);\n      if (shutter) bits.push('1/' + shutter);\n      return bits.join(' • ');\n    },\n    ecoTaxaUrl: function () {\n      if (this.msg && this.msg.ecotaxa_zip_url) return this.msg.ecotaxa_zip_url;\n      if (this.headerObject && this.headerObject.ecotaxa_zip_url) return this.headerObject.ecotaxa_zip_url;\n      if (this.headerSampleId) {\n        return '/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_' + this.headerSampleId + '.zip';\n      }\n      return null;\n    },\n    minEsd: function () {\n      if (!this.cleanObjects.length) return 0;\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].esd_um;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      if (!values.length) return 0;\n      return Math.min.apply(null, values);\n    },\n    maxEsd: function () {\n      if (!this.cleanObjects.length) return 0;\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].esd_um;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      if (!values.length) return 0;\n      return Math.max.apply(null, values);\n    },\n    minCircularity: function () {\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].circularity;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      return values.length ? Math.min.apply(null, values) : 0;\n    },\n    maxCircularity: function () {\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].circularity;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      return values.length ? Math.max.apply(null, values) : 1;\n    },\n    filteredObjects: function () {\n      var esdMin = this.esdRange[0];\n      var esdMax = this.esdRange[1];\n      var circMin = this.circularityRange[0];\n      var circMax = this.circularityRange[1];\n      var cluster = this.selectedCluster;\n\n      var out = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var o = this.cleanObjects[i];\n\n        var esd = o.esd_um;\n        if (esd === null || isNaN(esd) || esd < esdMin || esd > esdMax) continue;\n\n        var circ = o.circularity;\n        if (circ !== null && !isNaN(circ)) {\n          if (circ < circMin || circ > circMax) continue;\n        }\n\n        if (cluster && cluster !== 'All') {\n          if (o.clusterCanonical !== cluster) continue;\n        }\n        out.push(o);\n      }\n      return out;\n    },\n    sortedObjects: function () {\n      var arr = this.filteredObjects.slice();\n      var key = this.gallerySortKey || '';\n      var lower = key.toLowerCase();\n      if (lower.indexOf('solidity') !== -1) {\n        arr.sort(function (a, b) {\n          return (a.solidity || 0) - (b.solidity || 0);\n        });\n      } else {\n        arr.sort(function (a, b) {\n          return (b.esd_um || 0) - (a.esd_um || 0);\n        });\n      }\n      return arr;\n    },\n    visibleObjects: function () {\n      return this.sortedObjects.slice(0, this.maxGalleryItems);\n    },\n    selectedObject: function () {\n      if (!this.selectedUid || !this.filteredObjects.length) return null;\n      for (var i = 0; i < this.filteredObjects.length; i++) {\n        if (this.filteredObjects[i]._uid === this.selectedUid) return this.filteredObjects[i];\n      }\n      return null;\n    },\n    clusterCounts: function () {\n      var counts = {\n        Filament: 0,\n        Dense: 0,\n        Detritus: 0,\n        Bubble: 0,\n        Other: 0\n      };\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var o = this.cleanObjects[i];\n        var c = o.clusterCanonical || 'Other';\n        if (counts[c] === undefined) counts[c] = 0;\n        counts[c]++;\n      }\n      return counts;\n    },\n    filteredClusterCounts: function () {\n      var counts = {\n        Filament: 0,\n        Dense: 0,\n        Detritus: 0,\n        Bubble: 0,\n        Other: 0\n      };\n      for (var i = 0; i < this.filteredObjects.length; i++) {\n        var o = this.filteredObjects[i];\n        var c = o.clusterCanonical || 'Other';\n        if (counts[c] === undefined) counts[c] = 0;\n        counts[c]++;\n      }\n      return counts;\n    },\n    kpiCards: function () {\n      var totalRaw = this.cleanObjects.length;\n      var totalFiltered = this.filteredObjects.length;\n      var volume = this.volumeInfo.value;\n      var abundance = volume ? totalFiltered / volume : null;\n\n      return [\n        {\n          key: 'objects',\n          label: 'Total objects',\n          value: this.formatNumber(totalFiltered, 0),\n          sub: totalRaw ? this.formatNumber(totalRaw, 0) + ' raw' : ''\n        },\n        {\n          key: 'abundance',\n          label: 'Abundance',\n          value: abundance !== null ? this.formatNumber(abundance, 1) : 'N/A',\n          sub: 'ind./mL'\n        },\n        {\n          key: 'filament',\n          label: 'Filament',\n          value: this.formatNumber(this.filteredClusterCounts.Filament || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Filament || 0, 0) + ' raw'\n        },\n        {\n          key: 'dense',\n          label: 'Dense',\n          value: this.formatNumber(this.filteredClusterCounts.Dense || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Dense || 0, 0) + ' raw'\n        },\n        {\n          key: 'detritus',\n          label: 'Detritus',\n          value: this.formatNumber(this.filteredClusterCounts.Detritus || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Detritus || 0, 0) + ' raw'\n        },\n        {\n          key: 'bubble',\n          label: 'Bubble',\n          value: this.formatNumber(this.filteredClusterCounts.Bubble || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Bubble || 0, 0) + ' raw'\n        }\n      ];\n    },\n    gallerySortOptions: function () {\n      return ['ESD ↓ (largest first)', 'Solidity ↑'];\n    },\n    clusterOptions: function () {\n      return ['All', 'Filament', 'Dense', 'Detritus', 'Bubble', 'Other'];\n    },\n    scaleBarMicronsValue: function () {\n      var obj = this.selectedObject;\n      if (!obj || !this.pixelSizeValue) return null;\n      var esd = obj.esd_um || 0;\n      if (esd <= 20) return 5;\n      if (esd <= 50) return 10;\n      if (esd <= 200) return 50;\n      if (esd <= 500) return 100;\n      return 200;\n    },\n    scaleBarCssWidth: function () {\n      var microns = this.scaleBarMicronsValue;\n      if (!microns || !this.pixelSizeValue || !this.inspectorImageWidth || !this.inspectorImageNaturalWidth) {\n        return 40;\n      }\n      var micronsPerPixel = this.pixelSizeValue;\n      var imagePixelsForScale = microns / micronsPerPixel;\n      var scale = this.inspectorImageWidth / this.inspectorImageNaturalWidth;\n      var widthPx = imagePixelsForScale * scale;\n      var maxWidth = this.inspectorImageWidth * 0.8;\n      if (widthPx > maxWidth) widthPx = maxWidth;\n      if (widthPx < 20) widthPx = 20;\n      return widthPx;\n    },\n    scaleBarVisible: function () {\n      return !!(this.scaleBarMicronsValue && this.pixelSizeValue && this.selectedObject);\n    },\n    scaleBarMicronsLabel: function () {\n      return this.scaleBarMicronsValue ? this.scaleBarMicronsValue + ' µm' : '';\n    }\n  },\n  watch: {\n    payload: {\n      handler: function () {\n        this.onPayloadChanged();\n      },\n      deep: false,\n      immediate: true\n    },\n    esdRange: function () {\n      this.scheduleChartUpdate();\n    },\n    circularityRange: function () {\n      this.scheduleChartUpdate();\n    },\n    selectedCluster: function () {\n      this.scheduleChartUpdate();\n    },\n    filteredObjects: {\n      handler: function (newList) {\n        if (!newList || !newList.length) return;\n        var found = false;\n        for (var i = 0; i < newList.length; i++) {\n          if (newList[i]._uid === this.selectedUid) {\n            found = true;\n            break;\n          }\n        }\n        if (!found) {\n          this.selectedUid = newList[0]._uid;\n        }\n      },\n      deep: false\n    }\n  },\n  mounted: function () {\n    this.ensureChartJsReady();\n  },\n  beforeDestroy: function () {\n    this.destroyCharts();\n    if (this.chartInitInterval) {\n      clearInterval(this.chartInitInterval);\n      this.chartInitInterval = null;\n    }\n    if (this.chartUpdateTimeout) {\n      clearTimeout(this.chartUpdateTimeout);\n      this.chartUpdateTimeout = null;\n    }\n  },\n  methods: {\n    onPayloadChanged: function () {\n      this.resetRangesFromData();\n      if (this.cleanObjects.length) {\n        var keep = false;\n        if (this.selectedUid) {\n          for (var i = 0; i < this.cleanObjects.length; i++) {\n            if (this.cleanObjects[i]._uid === this.selectedUid) {\n              keep = true;\n              break;\n            }\n          }\n        }\n        if (!keep) {\n          this.selectedUid = this.cleanObjects[0]._uid;\n        }\n      } else {\n        this.selectedUid = null;\n      }\n      this.scheduleChartUpdate();\n    },\n    toNumber: function (value) {\n      if (value === null || value === undefined) return null;\n      if (typeof value === 'number') {\n        if (isNaN(value)) return null;\n        return value;\n      }\n      if (typeof value === 'string') {\n        var trimmed = value.trim();\n        if (!trimmed) return null;\n        var normalized = trimmed.replace(',', '.');\n        var num = parseFloat(normalized);\n        return isNaN(num) ? null : num;\n      }\n      return null;\n    },\n    isTemplateRow: function (row) {\n      if (!row || typeof row !== 'object') return false;\n      if (row.templateRow) return true;\n      var values = Object.values(row);\n      var templateMarkers = 0;\n      for (var i = 0; i < values.length; i++) {\n        var v = values[i];\n        if (typeof v === 'string' && /^\\[[fti]\\]$/i.test(v.trim())) {\n          templateMarkers++;\n        }\n      }\n      return templateMarkers >= 3;\n    },\n    resetRangesFromData: function () {\n      var esdMin = this.minEsd;\n      var esdMax = this.maxEsd;\n      if (esdMax >= esdMin) {\n        this.esdRange = [esdMin, esdMax];\n      } else {\n        this.esdRange = [0, 0];\n      }\n\n      var circMin = this.minCircularity;\n      var circMax = this.maxCircularity;\n      if (circMax >= circMin) {\n        this.circularityRange = [circMin, circMax];\n      } else {\n        this.circularityRange = [0, 1];\n      }\n    },\n    resetFilters: function () {\n      this.resetRangesFromData();\n      this.selectedCluster = 'All';\n      this.gallerySortKey = 'ESD ↓ (largest first)';\n      this.scheduleChartUpdate();\n    },\n    formatNumber: function (value, decimals) {\n      if (value === null || value === undefined || isNaN(value)) return 'N/A';\n      var d = typeof decimals === 'number' ? decimals : 2;\n      return Number(value).toLocaleString(undefined, {\n        maximumFractionDigits: d,\n        minimumFractionDigits: 0\n      });\n    },\n    metricToPercent: function (value) {\n      var num = this.toNumber(value);\n      if (num === null) return 0;\n      var v = num;\n      if (v > 1) v = 1;\n      if (v < 0) v = 0;\n      return v * 100;\n    },\n    getClusterLabel: function (obj) {\n      var cand = (\n        obj.cluster ||\n        obj.object_cluster ||\n        obj.group ||\n        obj.object_group ||\n        obj.final_cluster ||\n        ''\n      ).toString();\n      var lower = cand.toLowerCase();\n      if (lower.indexOf('filament') !== -1) return 'Filament';\n      if (lower.indexOf('bubble') !== -1) return 'Bubble';\n      if (lower.indexOf('detrit') !== -1) return 'Detritus';\n      if (lower.indexOf('dense') !== -1 || lower.indexOf('cluster') !== -1) return 'Dense';\n      return 'Other';\n    },\n    clusterColor: function (cluster) {\n      var name = (cluster || '').toString();\n      if (name === 'Filament') return 'deep-orange darken-2';\n      if (name === 'Dense') return 'purple darken-2';\n      if (name === 'Detritus') return 'brown darken-2';\n      if (name === 'Bubble') return 'cyan darken-2';\n      return 'grey darken-1';\n    },\n    getObjectImageUrl: function (obj) {\n      if (!obj) return null;\n      var date = obj.object_date || obj.date || (this.headerObject && this.headerObject.object_date);\n      var sampleId = obj.sample_id || this.headerSampleId;\n      var acqId = obj.acq_id || this.headerAcqId;\n      var file = obj.img_file_name || obj.image_name || obj.filename;\n      if (!date || !sampleId || !acqId || !file) return null;\n      return '/ps/data/browse/api/preview/big/objects/' + date + '/' + sampleId + '/' + acqId + '/' + file;\n    },\n    selectObject: function (obj) {\n      this.selectedUid = obj && obj._uid;\n    },\n    buildHistogram: function (objects, field, binCount) {\n      var values = [];\n      for (var i = 0; i < objects.length; i++) {\n        var v = this.toNumber(objects[i][field]);\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      if (!values.length) {\n        return { labels: [], counts: [] };\n      }\n      var min = Math.min.apply(null, values);\n      var max = Math.max.apply(null, values);\n      if (min === max) {\n        return { labels: [this.formatNumber(min)], counts: [values.length] };\n      }\n      var count = binCount || 15;\n      var step = (max - min) / count;\n      var bins = new Array(count);\n      for (var i2 = 0; i2 < count; i2++) bins[i2] = 0;\n\n      for (var j = 0; j < values.length; j++) {\n        var v2 = values[j];\n        var idx = Math.floor((v2 - min) / step);\n        if (idx < 0) idx = 0;\n        if (idx >= count) idx = count - 1;\n        bins[idx]++;\n      }\n\n      var labels = [];\n      for (var k = 0; k < count; k++) {\n        var start = min + step * k;\n        var end = start + step;\n        labels.push(this.formatNumber(start) + '–' + this.formatNumber(end));\n      }\n      return { labels: labels, counts: bins };\n    },\n    destroyCharts: function () {\n      if (this.charts.clusterPie) {\n        this.charts.clusterPie.destroy();\n        this.charts.clusterPie = null;\n      }\n      if (this.charts.scatter) {\n        this.charts.scatter.destroy();\n        this.charts.scatter = null;\n      }\n      if (this.charts.esdHist) {\n        this.charts.esdHist.destroy();\n        this.charts.esdHist = null;\n      }\n    },\n    ensureChartJsReady: function () {\n      if (typeof Chart !== 'undefined') {\n        this.chartReady = true;\n        this.scheduleChartUpdate(true);\n        return;\n      }\n      var self = this;\n      var attempts = 0;\n      var maxAttempts = 40;\n      this.chartInitInterval = setInterval(function () {\n        attempts++;\n        if (typeof Chart !== 'undefined') {\n          clearInterval(self.chartInitInterval);\n          self.chartInitInterval = null;\n          self.chartReady = true;\n          self.scheduleChartUpdate(true);\n        } else if (attempts >= maxAttempts) {\n          clearInterval(self.chartInitInterval);\n          self.chartInitInterval = null;\n        }\n      }, 200);\n    },\n    scheduleChartUpdate: function (force) {\n      if (!force && !this.chartReady) return;\n      var self = this;\n      if (this.chartUpdateTimeout) {\n        clearTimeout(this.chartUpdateTimeout);\n      }\n      this.chartUpdateTimeout = setTimeout(function () {\n        self.updateCharts();\n        self.chartUpdateTimeout = null;\n      }, 120);\n    },\n    updateCharts: function () {\n      if (!this.chartReady || typeof Chart === 'undefined') return;\n\n      var pieCanvas = this.$refs.clusterPieCanvas;\n      var scatterCanvas = this.$refs.scatterCanvas;\n      var esdCanvas = this.$refs.esdHistCanvas;\n\n      if (!pieCanvas || !scatterCanvas || !esdCanvas) return;\n\n      this.destroyCharts();\n\n      var clusters = ['Filament', 'Dense', 'Detritus', 'Bubble', 'Other'];\n      var colors = ['#fb8c00', '#8e24aa', '#6d4c41', '#00acc1', '#9e9e9e'];\n\n      var counts = [];\n      for (var i = 0; i < clusters.length; i++) {\n        var c = clusters[i];\n        counts.push(this.filteredClusterCounts[c] || 0);\n      }\n\n      this.charts.clusterPie = new Chart(pieCanvas.getContext('2d'), {\n        type: 'pie',\n        data: {\n          labels: clusters,\n          datasets: [\n            {\n              data: counts,\n              backgroundColor: colors\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom'\n            }\n          }\n        }\n      });\n\n      var allFiltered = this.filteredObjects || [];\n      var sample = [];\n      if (allFiltered.length <= this.maxScatterPoints) {\n        sample = allFiltered;\n      } else {\n        var step = Math.ceil(allFiltered.length / this.maxScatterPoints);\n        for (var j = 0; j < allFiltered.length; j += step) {\n          sample.push(allFiltered[j]);\n        }\n      }\n\n      var pointsByCluster = {\n        Filament: [],\n        Dense: [],\n        Detritus: [],\n        Bubble: [],\n        Other: []\n      };\n      var yValues = [];\n\n      for (var s = 0; s < sample.length; s++) {\n        var o = sample[s];\n        var cl = o.clusterCanonical || 'Other';\n        if (!pointsByCluster[cl]) pointsByCluster[cl] = [];\n        var x = o.circularity !== null && !isNaN(o.circularity) ? o.circularity : 0;\n        var y = o.elongation !== null && !isNaN(o.elongation) && o.elongation > 0 ? o.elongation : 1;\n        pointsByCluster[cl].push({ x: x, y: y });\n        yValues.push(y);\n      }\n\n      var datasets = [];\n      for (var idx = 0; idx < clusters.length; idx++) {\n        var clName = clusters[idx];\n        datasets.push({\n          label: clName,\n          data: pointsByCluster[clName],\n          backgroundColor: colors[idx],\n          pointRadius: 2,\n          pointHoverRadius: 3\n        });\n      }\n\n      var yMin = yValues.length ? Math.min.apply(null, yValues) : 1;\n      var yMax = yValues.length ? Math.max.apply(null, yValues) : 10;\n\n      this.charts.scatter = new Chart(scatterCanvas.getContext('2d'), {\n        type: 'scatter',\n        data: { datasets: datasets },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            x: {\n              title: { display: true, text: 'Circularity' },\n              min: 0,\n              max: 1\n            },\n            y: {\n              type: 'logarithmic',\n              title: { display: true, text: 'Elongation' },\n              min: Math.max(0.1, yMin * 0.9),\n              max: yMax * 1.1,\n              ticks: {\n                callback: function (value) {\n                  return Number(value).toString();\n                }\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom'\n            }\n          }\n        }\n      });\n\n      var esdHist = this.buildHistogram(this.filteredObjects, 'esd_um', 18);\n      this.charts.esdHist = new Chart(esdCanvas.getContext('2d'), {\n        type: 'bar',\n        data: {\n          labels: esdHist.labels,\n          datasets: [\n            {\n              label: 'Count',\n              data: esdHist.counts,\n              backgroundColor: '#42a5f5'\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            x: {\n              display: false\n            },\n            y: {\n              beginAtZero: true\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      });\n    },\n    exportCsv: function () {\n      var rows = this.filteredObjects;\n      if (!rows.length) return;\n\n      var headers = [\n        'object_id',\n        'cluster',\n        'esd_um',\n        'circularity',\n        'elongation',\n        'solidity',\n        'width_um',\n        'height_um',\n        'area_um2',\n        'object_MeanValue',\n        'object_date',\n        'sample_id',\n        'acq_id',\n        'img_file_name'\n      ];\n\n      var lines = [];\n      lines.push(headers.join(','));\n\n      for (var i = 0; i < rows.length; i++) {\n        var o = rows[i];\n        var rowValues = headers.map(function (h) {\n          var v;\n          if (h === 'cluster') {\n            v = o.clusterCanonical;\n          } else {\n            v = o[h];\n          }\n          if (v === null || v === undefined) return '';\n          var str = String(v).replace(/\"/g, '\"\"');\n          if (str.indexOf(',') !== -1 || str.indexOf('\"') !== -1) {\n            return '\"' + str + '\"';\n          }\n          return str;\n        });\n        lines.push(rowValues.join(','));\n      }\n\n      var csv = lines.join('\\n');\n      var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });\n      var url = URL.createObjectURL(blob);\n      var a = document.createElement('a');\n      var sampleId = this.headerSampleId || 'export';\n      a.href = url;\n      a.download = sampleId + '_objects.csv';\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n      URL.revokeObjectURL(url);\n    },\n    downloadFileName: function (obj) {\n      if (!obj) return 'object_image.jpg';\n      var sample = obj.sample_id || this.headerSampleId || 'sample';\n      var id = obj.object_id || obj._uid || 'object';\n      var name = obj.img_file_name || obj.image_name || 'image';\n      return sample + '_' + id + '_' + name;\n    },\n    onInspectorImageLoad: function (e) {\n      if (e && e.target) {\n        this.inspectorImageNaturalWidth = e.target.naturalWidth || null;\n      }\n      var self = this;\n      this.$nextTick(function () {\n        var ref = self.$refs.inspectorImage;\n        var imgEl = ref && ref.$el ? ref.$el.querySelector('img') : null;\n        self.inspectorImageWidth = imgEl ? imgEl.clientWidth : null;\n      });\n    }\n  }\n};\n</script>\n\n<style scoped>\n.dashboard-root {\n  font-size: 13px;\n}\n\n.kpi-card {\n  position: relative;\n  overflow: hidden;\n}\n\n.kpi-border {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n}\n\n.kpi-border--objects {\n  background-color: #1976d2;\n}\n\n.kpi-border--abundance {\n  background-color: #00897b;\n}\n\n.kpi-border--filament {\n  background-color: #fb8c00;\n}\n\n.kpi-border--dense {\n  background-color: #8e24aa;\n}\n\n.kpi-border--detritus {\n  background-color: #6d4c41;\n}\n\n.kpi-border--bubble {\n  background-color: #00acc1;\n}\n\n.sticky-card {\n  position: sticky;\n  top: 12px;\n  z-index: 1;\n}\n\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));\n  grid-gap: 6px;\n}\n\n.gallery-item {\n  border-radius: 4px;\n  overflow: hidden;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.gallery-img {\n  flex: 1;\n}\n\n.gallery-meta {\n  padding: 2px 4px 4px 4px;\n}\n\n.gallery-item:hover {\n  transform: scale(1.03);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);\n}\n\n.gallery-item--selected {\n  transform: scale(1.05);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border-color: #1976d2;\n}\n\n.gallery-placeholder {\n  height: 100%;\n  min-height: 60px;\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.gallery-sort-select {\n  min-width: 160px;\n}\n\n.cluster-Filament {\n  border-bottom: 3px solid #fb8c00;\n}\n\n.cluster-Dense {\n  border-bottom: 3px solid #8e24aa;\n}\n\n.cluster-Detritus {\n  border-bottom: 3px solid #6d4c41;\n}\n\n.cluster-Bubble {\n  border-bottom: 3px solid #00acc1;\n}\n\n.cluster-Other {\n  border-bottom: 3px solid #9e9e9e;\n}\n\n.inspector-img {\n  border-radius: 4px;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.inspector-placeholder {\n  border-radius: 4px;\n  border: 1px dashed rgba(0, 0, 0, 0.2);\n  min-height: 120px;\n}\n\n.cluster-pie-wrapper {\n  width: 100%;\n  height: 170px;\n}\n\n.cluster-pie-wrapper canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n.chart-container {\n  width: 100%;\n  height: 190px;\n}\n\n.scatter-container {\n  height: 230px;\n}\n\n.chart-container canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n.inspector-image-wrapper {\n  position: relative;\n}\n\n.scale-bar {\n  position: absolute;\n  left: 8px;\n  bottom: 8px;\n  padding: 2px 4px;\n  background: rgba(0, 0, 0, 0.55);\n  border-radius: 2px;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.scale-bar-line {\n  height: 2px;\n  background: #ffffff;\n  margin-bottom: 2px;\n}\n\n.scale-bar-label {\n  font-size: 10px;\n  color: #ffffff;\n  line-height: 1;\n}\n\n@media (max-width: 959px) {\n  .sticky-card {\n    position: static;\n  }\n}\n</style>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 380,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "687050b30c8d78f3",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 6",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1260,
+        "y": 580,
+        "wires": []
+    },
+    {
+        "id": "8dc194f764cd61ef",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "function 1",
+        "func": "// Vérifie que payload est un tableau\nif (Array.isArray(msg.payload)) {\n    // Supprime la première entrée du tableau\n    msg.payload = msg.payload.slice(1);\n}\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1000,
+        "y": 400,
+        "wires": [
+            [
+                "687050b30c8d78f3",
+                "c42d0eb4a7bc6eb4",
+                "86bff301d6790945",
+                "ddac1dedf1ed0bb3",
+                "39ab3eeb12643cc6",
+                "e8fbb01b7a38c29a"
+            ]
+        ]
+    },
+    {
+        "id": "ddac1dedf1ed0bb3",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "d": true,
+        "group": "0cb96323818204ca",
+        "page": "",
+        "ui": "",
+        "name": "Gemini 3 Pro v2",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-4 grey lighten-5\" style=\"min-height: 100vh; color:#333;\">\n\n    <v-row v-if=\"!hasData\" align=\"center\" justify=\"center\" style=\"height:80vh;\">\n      <div class=\"text-center\">\n        <v-progress-circular indeterminate color=\"primary\" size=\"64\"></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text text--darken-2\">Analyse en cours...</div>\n      </div>\n    </v-row>\n\n    <div v-else>\n      \n      <div class=\"mb-4\">\n        <div class=\"text-overline grey--text ml-1\">1. SUMMARY METRICS</div>\n        <v-card outlined>\n          <v-row no-gutters>\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 border-right\">\n              <div class=\"caption grey--text text-uppercase\">Sample Identity</div>\n              <div class=\"font-weight-bold text-h6 primary--text\">{{ safeHeader.sample_id }}</div>\n              <div class=\"caption grey--text mt-1\">Project: {{ safeHeader.sample_project }}</div>\n              <div class=\"caption grey--text\">Acq ID: {{ safeHeader.acq_id }}</div>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 border-right grey lighten-5\">\n              <div class=\"caption grey--text text-uppercase\">Abundance</div>\n              <div class=\"d-flex align-baseline\">\n                <span class=\"text-h4 font-weight-black deep-purple--text mr-1\">{{ formatNum(abundance, 0) }}</span>\n                <span class=\"caption font-weight-bold deep-purple--text text--lighten-2\">ind./mL</span>\n              </div>\n              <div class=\"caption grey--text mt-2\">\n                Total Objects: {{ filteredObjects.length }} / {{ cleanObjects.length }}\n              </div>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 border-right\">\n              <div class=\"caption grey--text text-uppercase\">Est. Biovolume</div>\n              <div class=\"d-flex align-baseline\">\n                <span class=\"text-h5 font-weight-bold blue-grey--text mr-1\">{{ formatBigNum(totalBiovolume) }}</span>\n                <span class=\"caption blue-grey--text\">µm³/mL</span>\n              </div>\n               <div class=\"caption grey--text mt-2\">\n                <v-icon x-small>mdi-water-percent</v-icon> Vol. Imaged: {{ formatNum(safeHeader.volume_used, 2) }} mL\n              </div>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 d-flex flex-column justify-space-between\">\n              <div>\n                <div class=\"caption grey--text text-uppercase\">Resolution</div>\n                <div class=\"font-weight-medium\">{{ formatNum(safeHeader.process_pixel, 3) }} µm/px</div>\n              </div>\n              <div class=\"d-flex mt-3\">\n                <v-btn x-small outlined color=\"primary\" class=\"mr-2\" @click=\"downloadCSV\">\n                  <v-icon left x-small>mdi-download</v-icon> CSV\n                </v-btn>\n                <v-btn x-small text color=\"grey\" :href=\"ecotaxaLink\" target=\"_blank\" v-if=\"safeHeader.acq_id !== 'N/A'\">\n                   EcoTaxa\n                </v-btn>\n              </div>\n            </v-col>\n          </v-row>\n        </v-card>\n      </div>\n\n      <div class=\"mb-4\">\n        <div class=\"text-overline grey--text ml-1\">2. QUALITY CONTROL (QC)</div>\n        <v-row dense>\n          <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"fill-height\">\n              <v-card-title class=\"caption font-weight-bold py-2 grey lighten-4 border-bottom\">\n                Flowcell Distribution\n                <v-spacer></v-spacer>\n                <v-chip x-small color=\"red lighten-4\" text-color=\"red darken-2\" v-if=\"stickyCount > 0\">\n                  {{ stickyCount }} Sticky Objs\n                </v-chip>\n              </v-card-title>\n              <v-card-text class=\"pa-2 relative\">\n                <div style=\"height: 200px; width: 100%;\">\n                   <canvas ref=\"chartFlowcell\"></canvas>\n                </div>\n                <div v-if=\"!hasCoords\" class=\"overlay-message caption\">\n                  No X/Y coordinates found.\n                </div>\n              </v-card-text>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"fill-height\">\n              <v-card-title class=\"caption font-weight-bold py-2 grey lighten-4 border-bottom\">\n                Segmentation Report\n              </v-card-title>\n              <v-card-text class=\"pa-4\">\n                 <div class=\"d-flex justify-space-between caption mb-1\">\n                   <span>Valid Objects</span>\n                   <span class=\"green--text font-weight-bold\">{{ counts.other + counts.dense }}</span>\n                 </div>\n                 <v-progress-linear :value=\"(counts.other + counts.dense)/cleanObjects.length*100\" color=\"green\" height=\"8\" rounded class=\"mb-3\"></v-progress-linear>\n\n                 <div class=\"d-flex justify-space-between caption mb-1\">\n                   <span>Multiple/Filaments</span>\n                   <span class=\"orange--text font-weight-bold\">{{ counts.filament }}</span>\n                 </div>\n                 <v-progress-linear :value=\"counts.filament/cleanObjects.length*100\" color=\"orange\" height=\"6\" rounded class=\"mb-3\"></v-progress-linear>\n                 \n                 <div class=\"d-flex justify-space-between caption mb-1\">\n                   <span>Detritus/Noise</span>\n                   <span class=\"brown--text font-weight-bold\">{{ counts.detritus }}</span>\n                 </div>\n                 <v-progress-linear :value=\"counts.detritus/cleanObjects.length*100\" color=\"brown\" height=\"6\" rounded></v-progress-linear>\n              </v-card-text>\n            </v-card>\n          </v-col>\n          \n           <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"fill-height\">\n              <v-card-title class=\"caption font-weight-bold py-2 grey lighten-4 border-bottom\">\n                Acquisition Stats\n              </v-card-title>\n              <div class=\"pa-4 d-flex align-center justify-center fill-height\">\n                 <div class=\"text-center\">\n                    <div class=\"text-h5 font-weight-light\">{{ Math.round(safeHeader.process_pixel * 2048) }} x {{ Math.round(safeHeader.process_pixel * 1536) }}</div>\n                    <div class=\"caption grey--text\">Field of View (µm estimate)</div>\n                    <v-divider class=\"my-3\"></v-divider>\n                    <div class=\"caption\">\n                      Processing Date: <br>\n                      <b>{{ cleanObjects[0] ? cleanObjects[0].object_date : 'N/A' }}</b>\n                    </div>\n                 </div>\n              </div>\n            </v-card>\n          </v-col>\n        </v-row>\n      </div>\n\n\n      <div>\n        <div class=\"text-overline grey--text ml-1\">3. GALLERY & DETAILS</div>\n        <v-row>\n          <v-col cols=\"12\" md=\"8\" lg=\"9\">\n            <v-card outlined>\n              <v-toolbar flat dense color=\"grey lighten-4\">\n                <v-toolbar-title class=\"subtitle-2\">Object Gallery ({{ filteredObjects.length }})</v-toolbar-title>\n                <v-spacer></v-spacer>\n                <v-select\n                  v-model=\"gallerySort\" :items=\"sortOptions\" item-text=\"text\" item-value=\"value\"\n                  dense outlined hide-details style=\"max-width: 180px;\" class=\"caption bg-white\"\n                ></v-select>\n              </v-toolbar>\n              \n              <v-card-text class=\"pa-2\" style=\"min-height: 300px;\">\n                <div v-if=\"!filteredObjects.length\" class=\"text-center py-10 grey--text\">\n                  No objects found.\n                </div>\n                \n                <div class=\"gallery-grid\">\n                  <div v-for=\"obj in paginatedObjects\" :key=\"obj.object_id\" \n                       class=\"gallery-item rounded elevation-1\"\n                       :class=\"{'selected': selectedId === obj.object_id, 'g-filament': obj.group === 'Filament'}\" \n                       @click=\"selectObject(obj)\">\n                    <v-img :src=\"getImageUrl(obj)\" aspect-ratio=\"1\" contain class=\"white\">\n                       <template v-slot:placeholder><v-row class=\"fill-height ma-0\" align=\"center\" justify=\"center\"><v-progress-circular indeterminate size=\"20\" width=\"2\"></v-progress-circular></v-row></template>\n                    </v-img>\n                    <div class=\"gallery-label\">{{ Math.round(obj.esd_um) }}µm</div>\n                  </div>\n                </div>\n                <div v-if=\"filteredObjects.length > 100\" class=\"text-center mt-2 caption grey--text\">Showing top 100 objects</div>\n              </v-card-text>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\" lg=\"3\">\n             <v-card outlined class=\"sticky-top\">\n                <v-card-title class=\"subtitle-2 grey lighten-3 py-2\">Details</v-card-title>\n                <div v-if=\"selectedObject\">\n                   <div class=\"pa-3 text-center white border-bottom\">\n                      <div class=\"image-container d-inline-block relative elevation-2 rounded pa-1 mb-2\">\n                        <img :src=\"getImageUrl(selectedObject)\" style=\"max-width: 100%; max-height: 200px; display:block;\">\n                        <div class=\"scale-bar-container\">\n                           <div class=\"scale-line\" :style=\"{ width: scaleBarWidth + 'px' }\"></div>\n                           <div class=\"scale-text\">{{ scaleBarValue }} µm</div>\n                        </div>\n                      </div>\n                      <div>\n                        <v-chip x-small color=\"primary\" dark>{{ selectedObject.group }}</v-chip>\n                        <div class=\"caption mt-1 text-truncate\">{{ selectedObject.object_id }}</div>\n                      </div>\n                   </div>\n                   <v-list dense class=\"pa-0\">\n                      <v-list-item>\n                        <v-list-item-content><v-list-item-title class=\"caption\">ESD</v-list-item-title></v-list-item-content>\n                        <v-list-item-action class=\"caption font-weight-bold\">{{ formatNum(selectedObject.esd_um, 1) }} µm</v-list-item-action>\n                      </v-list-item>\n                      <v-divider></v-divider>\n                      <v-list-item>\n                        <v-list-item-content><v-list-item-title class=\"caption\">Circularity</v-list-item-title></v-list-item-content>\n                        <v-list-item-action class=\"caption font-weight-bold\">{{ formatNum(selectedObject.circ, 3) }}</v-list-item-action>\n                      </v-list-item>\n                      <v-divider></v-divider>\n                      <v-list-item>\n                         <v-list-item-content><v-list-item-title class=\"caption\">Biovolume</v-list-item-title></v-list-item-content>\n                         <v-list-item-action class=\"caption font-weight-bold\">{{ formatBigNum((Math.PI * Math.pow(selectedObject.esd_um,3))/6) }} µm³</v-list-item-action>\n                      </v-list-item>\n                   </v-list>\n                </div>\n                <div v-else class=\"pa-4 text-center caption grey--text\">Select an object.</div>\n             </v-card>\n          </v-col>\n        </v-row>\n      </div>\n\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      filters: { esd: [0, 2000], circ: [0, 1], cluster: 'All' },\n      clusterOptions: ['All', 'Filament', 'Bubble', 'Detritus', 'Dense', 'Other'],\n      sortOptions: [{ text: 'Size (Desc)', value: 'esd_desc' }, { text: 'Size (Asc)', value: 'esd_asc' }],\n      gallerySort: 'esd_desc',\n      selectedId: null,\n      charts: { cluster: null, flow: null, hist: null },\n      scaleBarValue: 100,\n      stickyCount: 0\n    }\n  },\n\n  computed: {\n    hasData() { return this.msg && Array.isArray(this.msg.payload) && this.msg.payload.length > 1; },\n    \n    cleanObjects() {\n      if (!this.hasData) return [];\n      return this.msg.payload\n        .filter(o => o.object_id !== '[t]' && o.acq_id !== '[t]' && !String(o.object_equivalent_diameter).includes('[f]'))\n        .map(o => {\n          const px = Number(o.process_pixel || this.msg.process_pixel) || 1;\n          const esd = (Number(o.object_equivalent_diameter) || 0) * px;\n          \n          let grp = 'Other';\n          const el = Number(o.object_elongation) || 1;\n          const circ = Number(o['object_circ.']) || 0;\n          const sol = Number(o.object_solidity) || 0;\n          const val = Number(o.object_MeanValue) || 0;\n\n          if (el > 3.5) grp = 'Filament';\n          else if (circ > 0.85 && sol > 0.95) grp = 'Bubble';\n          else if (sol < 0.75) grp = 'Detritus';\n          else if (val < 100 && sol > 0.85) grp = 'Dense';\n\n          return {\n            ...o,\n            esd_um: esd,\n            major: (Number(o.object_major) || 0) * px,\n            minor: (Number(o.object_minor) || 0) * px,\n            x: Number(o.object_x) || 0,\n            y: Number(o.object_y) || 0,\n            circ, val, solidity: sol, elongation: el,\n            group: grp\n          };\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        return o.esd_um >= f.esd[0] && o.esd_um <= f.esd[1] &&\n               o.circ >= f.circ[0] && o.circ <= f.circ[1] &&\n               (f.cluster === 'All' || o.group === f.cluster);\n      });\n    },\n\n    hasCoords() {\n       return this.cleanObjects.some(o => o.x > 0 || o.y > 0);\n    },\n\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n      arr.sort((a, b) => this.gallerySort === 'esd_desc' ? b.esd_um - a.esd_um : a.esd_um - b.esd_um);\n      return arr.slice(0, 100);\n    },\n\n    selectedObject() { return this.cleanObjects.find(o => o.object_id === this.selectedId) || null; },\n    \n    safeHeader() {\n      if (!this.cleanObjects.length) return { sample_id:'?', volume_used:1, process_pixel:1 };\n      const obj = this.cleanObjects[0];\n      return {\n        sample_project: obj.sample_project || 'Unknown',\n        sample_id: obj.sample_id || 'Unknown',\n        acq_id: obj.acq_id || 'N/A',\n        volume_used: Number(obj.acq_imaged_volume) || 1,\n        process_pixel: Number(obj.process_pixel || 1)\n      };\n    },\n\n    abundance() { return this.filteredObjects.length / this.safeHeader.volume_used; },\n    \n    totalBiovolume() {\n      const totalVolUm3 = this.filteredObjects.reduce((acc, o) => {\n        return acc + (Math.PI * Math.pow(o.esd_um, 3)) / 6;\n      }, 0);\n      return totalVolUm3 / this.safeHeader.volume_used;\n    },\n\n    counts() {\n      const c = { filament:0, bubble:0, detritus:0, dense:0, other:0 };\n      this.cleanObjects.forEach(o => {\n        const key = o.group.toLowerCase();\n        if(c[key]!==undefined) c[key]++; else c.other++;\n      });\n      return c;\n    },\n\n    sliderStats() {\n      if (!this.cleanObjects.length) return { min:0, max:100 };\n      const vals = this.cleanObjects.map(o => o.esd_um);\n      return { min: Math.floor(Math.min(...vals)), max: Math.ceil(Math.max(...vals)) };\n    },\n\n    scaleBarWidth() {\n      if(!this.safeHeader.process_pixel || !this.selectedObject) return 0;\n      if(this.selectedObject.esd_um < 50) this.scaleBarValue = 10;\n      else if(this.selectedObject.esd_um < 200) this.scaleBarValue = 50;\n      else this.scaleBarValue = 100;\n      return this.scaleBarValue / this.safeHeader.process_pixel;\n    },\n\n    ecotaxaLink() { return this.safeHeader.acq_id !== 'N/A' ? `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.safeHeader.acq_id}.zip` : '#'; }\n  },\n\n  watch: {\n    filteredObjects() { this.updateCharts(); },\n    msg: { deep: true, handler() { this.init(); } }\n  },\n\n  mounted() { this.init(); },\n\n  methods: {\n    init() {\n      if(this.hasData) {\n        this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n        this.updateCharts();\n      }\n    },\n    \n    formatNum(v, d) { return (Number(v)||0).toFixed(d); },\n    formatBigNum(v) {\n       if(v > 1000000) return (v/1000000).toFixed(2) + 'M';\n       if(v > 1000) return (v/1000).toFixed(0) + 'k';\n       return Math.round(v);\n    },\n    \n    getImageUrl(o) { return o ? `/ps/data/browse/api/preview/big/objects/${o.object_date}/${o.sample_id}/${o.acq_id}/${o.img_file_name}` : ''; },\n    \n    selectObject(obj) { this.selectedId = obj.object_id; },\n    resetFilters() { this.filters.esd = [this.sliderStats.min, this.sliderStats.max]; this.filters.cluster = 'All'; },\n    \n    downloadCSV() {\n       if (!this.filteredObjects.length) return;\n       const headers = Object.keys(this.filteredObjects[0]);\n       const csv = [headers.join(','), ...this.filteredObjects.map(r => headers.map(c => JSON.stringify(r[c]||'')).join(','))].join('\\n');\n       const blob = new Blob([csv], { type: 'text/csv' });\n       const a = document.createElement('a');\n       a.href = URL.createObjectURL(blob); a.download = 'export.csv'; a.click();\n    },\n\n    updateCharts() { setTimeout(() => { this.$nextTick(this.renderCharts); }, 250); },\n\n    renderCharts() {\n      if(this.filteredObjects.length === 0) return;\n      this.renderFlowcellChart();\n      this.renderHistChart();\n      this.renderClusterChart();\n    },\n\n    // --- FIXED FLOWCELL CHART ---\n    renderFlowcellChart() {\n      const ctx = this.$refs.chartFlowcell;\n      if(!ctx) return;\n      if(this.charts.flow) this.charts.flow.destroy();\n      \n      // FIX: DEEP COPY to remove Vue Observers\n      const objects = JSON.parse(JSON.stringify(this.filteredObjects));\n\n      const xs = objects.map(o => o.x);\n      const ys = objects.map(o => o.y);\n      const maxX = Math.max(...xs, 100);\n      const maxY = Math.max(...ys, 100);\n      \n      const binStep = Math.max(maxX, maxY) / 20; \n      const bins = {};\n      \n      objects.forEach(o => {\n        const bx = Math.floor(o.x / binStep);\n        const by = Math.floor(o.y / binStep);\n        const k = `${bx}_${by}`;\n        bins[k] = (bins[k] || 0) + 1;\n      });\n\n      const normal = [];\n      const sticky = [];\n      this.stickyCount = 0;\n\n      objects.forEach(o => {\n        const bx = Math.floor(o.x / binStep);\n        const by = Math.floor(o.y / binStep);\n        if(bins[`${bx}_${by}`] > 5) {\n           sticky.push({x: o.x, y: o.y});\n           this.stickyCount++;\n        } else {\n           normal.push({x: o.x, y: o.y});\n        }\n      });\n\n      const finalNormal = sticky.length === 0 ? objects.map(o => ({x:o.x, y:o.y})) : normal;\n\n      this.charts.flow = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            { label: 'Objects', data: finalNormal, backgroundColor: '#90CAF9', pointRadius: 2 },\n            { label: 'Sticky/Clump', data: sticky, backgroundColor: '#E57373', pointRadius: 3 }\n          ]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          scales: { x: { display:false }, y: { display:false, reverse: true } },\n          plugins: { legend: { display: false } }\n        }\n      });\n    },\n\n    // --- FIXED HISTOGRAM ---\n    renderHistChart() {\n      const ctx = this.$refs.chartHist;\n      if(!ctx) return;\n      if(this.charts.hist) this.charts.hist.destroy();\n\n      // FIX: DEEP COPY\n      const objects = JSON.parse(JSON.stringify(this.filteredObjects));\n      const vals = objects.map(o => o.esd_um);\n      \n      if(vals.length === 0) return;\n\n      const maxVal = Math.max(...vals);\n      const binCount = 15;\n      const step = (maxVal / binCount) || 1; \n      \n      const bins = new Array(binCount).fill(0);\n      const labels = new Array(binCount).fill(0).map((_, i) => Math.round(i * step));\n\n      vals.forEach(v => {\n        const idx = Math.min(Math.floor(v / step), binCount - 1);\n        if(idx >= 0) bins[idx]++;\n      });\n\n      this.charts.hist = new Chart(ctx, {\n        type: 'bar',\n        data: {\n          labels: labels,\n          datasets: [{ label: 'Count', data: bins, backgroundColor: '#5C6BC0' }]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          plugins: { legend: { display: false } },\n          scales: { x: { title: { display: true, text: 'ESD (µm)' } }, y: { display:false } }\n        }\n      });\n    },\n\n    // --- FIXED CLUSTER CHART ---\n    renderClusterChart() {\n      const ctx = this.$refs.chartCluster;\n      if(!ctx) return;\n      if(this.charts.cluster) this.charts.cluster.destroy();\n      \n      // FIX: DEEP COPY\n      const objects = JSON.parse(JSON.stringify(this.filteredObjects));\n      const data = objects.slice(0, 1000).map(o => ({ x: o.circ, y: o.elongation }));\n\n      this.charts.cluster = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [{ label: 'Obj', data: data, backgroundColor: 'rgba(0, 150, 136, 0.6)', pointRadius: 2 }]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          scales: {\n            x: { title: {display: true, text:'Circular.'}, min: 0, max: 1.1 },\n            y: { title: {display: true, text:'Elong. (Log)'}, type: 'logarithmic', min:1 }\n          },\n          plugins: { legend: { display: false } }\n        }\n      });\n    }\n  }\n}\n</script>\n\n<style scoped>\n.border-right { border-right: 1px solid #e0e0e0; }\n.border-left { border-left: 1px solid #e0e0e0; }\n.border-bottom { border-bottom: 1px solid #e0e0e0; }\n.relative { position: relative; }\n\n.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }\n.gallery-item { cursor: pointer; position: relative; overflow: hidden; border: 2px solid transparent; }\n.gallery-item:hover { transform: scale(1.1); z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }\n.gallery-item.selected { border-color: #1976D2; }\n.g-filament { border-bottom: 3px solid #4CAF50; }\n\n.gallery-label { \n  position: absolute; bottom: 0; left: 0; right: 0; \n  background: rgba(255,255,255,0.7); font-size: 9px; text-align: center; \n}\n\n.sticky-top { position: sticky; top: 10px; z-index: 4; }\n\n.scale-bar-container {\n  position: absolute; bottom: 6px; right: 6px;\n  display: flex; flex-direction: column; align-items: flex-end;\n}\n.scale-line { height: 3px; background: white; border: 1px solid rgba(0,0,0,0.4); margin-bottom: 1px; }\n.scale-text { font-size: 9px; font-weight: bold; color: white; text-shadow: 0 1px 2px black; line-height: 1; }\n\n.overlay-message {\n  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n  background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 4px;\n}\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1280,
+        "y": 460,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "39ab3eeb12643cc6",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "d": true,
+        "group": "fd07716b2cd88ccd",
+        "page": "",
+        "ui": "",
+        "name": "ChatGPT 5.1 Pro v3",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div class=\"plankto-dashboard\">\n    <div v-if=\"!objects.length\" class=\"no-data\">\n      Aucune donnée reçue (msg.payload ou msg.payload.payload doit être un tableau d'objets).\n    </div>\n\n    <div v-else class=\"plankto-layout\">\n      <!-- COLONNE GAUCHE : stats + QC + charts -->\n      <div class=\"left-panel\">\n        <!-- Bandeau infos échantillon / acquisition -->\n        <div class=\"info-row\">\n          <div class=\"info-block\">\n            <div class=\"info-title\">Échantillon</div>\n            <div class=\"info-body\">\n              <div><strong>Projet :</strong> {{ meta.sample_project }}</div>\n              <div><strong>Sample ID :</strong> {{ meta.sample_id }}</div>\n              <div><strong>Opérateur :</strong> {{ meta.sample_operator }}</div>\n              <div><strong>Gear :</strong> {{ meta.sample_gear }}</div>\n            </div>\n          </div>\n          <div class=\"info-block\">\n            <div class=\"info-title\">Acquisition</div>\n            <div class=\"info-body\">\n              <div><strong>Acq ID :</strong> {{ meta.acq_id }}</div>\n              <div><strong>Date :</strong> {{ meta.object_date }} {{ timeString }}</div>\n              <div><strong>Caméra :</strong> {{ meta.acq_camera_resolution }}</div>\n              <div><strong>pixel :</strong> {{ pixelSizeUm.toFixed(3) }} µm/px</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Statistiques principales -->\n        <div class=\"stat-row\">\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Total objets</div>\n            <div class=\"stat-value big\">{{ stats.totalObjects }}</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">ESD moyen</div>\n            <div class=\"stat-value\">{{ formatNumber(stats.meanEsdUm, 1) }} µm</div>\n            <div class=\"stat-sub\">médiane {{ formatNumber(stats.medianEsdUm, 1) }} µm</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Biovolume total</div>\n            <div class=\"stat-value\">{{ formatNumber(stats.totalBiovolumeMm3, 3) }} mm³</div>\n            <div class=\"stat-sub\">(approx. sphérique)</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Densité brute</div>\n            <div class=\"stat-value\">\n              <span v-if=\"stats.imagedVolume\">\n                {{ formatNumber(stats.objectsPerVolume, 1) }} obj / unité vol\n              </span>\n              <span v-else>n/a</span>\n            </div>\n            <div class=\"stat-sub\" v-if=\"stats.concentrationIndex\">\n              Indice conc. {{ formatNumber(stats.concentrationIndex, 1) }}\n            </div>\n          </div>\n        </div>\n\n        <!-- QC cards -->\n        <div class=\"qc-row\">\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Objets au bord</div>\n            <div :class=\"qcClass(qc.borderFraction)\">\n              {{ percent(qc.borderFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Positions doublons</div>\n            <div :class=\"qcClass(qc.duplicateFraction)\">\n              {{ percent(qc.duplicateFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Sous ESD min ({{ formatNumber(minEsdUm,0) }} µm)</div>\n            <div :class=\"qcClass(qc.tinyFraction)\">\n              {{ percent(qc.tinyFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Artefacts morpho.</div>\n            <div :class=\"qcClass(qc.artifactFraction)\">\n              {{ percent(qc.artifactFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Saturés / très sombres</div>\n            <div :class=\"qcClass(qc.saturatedFraction)\">\n              {{ percent(qc.saturatedFraction) }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Graphiques -->\n        <div class=\"charts\">\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">Distribution de taille (ESD, µm)</div>\n            <canvas :id=\"id + '-esd-hist'\"></canvas>\n          </div>\n\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">Positions dans la flowcell</div>\n            <canvas :id=\"id + '-xy-scatter'\"></canvas>\n          </div>\n\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">Morphologie (solidity vs élongation)</div>\n            <canvas :id=\"id + '-shape-qc'\"></canvas>\n          </div>\n\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">\n              Clusters (UMAP / features)\n              <span class=\"chart-subtitle\">\n                (fallback vers 2 features si UMAP n'est pas chargée)\n              </span>\n            </div>\n            <canvas :id=\"id + '-umap'\"></canvas>\n          </div>\n        </div>\n      </div>\n\n      <!-- COLONNE DROITE : galerie d'images + détails -->\n      <div class=\"right-panel\">\n        <div class=\"gallery-title\">\n          Galerie d'objets ({{ galleryObjects.length }} / {{ stats.totalObjects }})\n        </div>\n\n        <div class=\"gallery\">\n          <div\n            v-for=\"obj in galleryObjects\"\n            :key=\"obj.object_id\"\n            class=\"thumb\"\n            :class=\"{ selected: selected && selected.object_id === obj.object_id }\"\n            @click=\"selectObject(obj)\"\n          >\n            <div class=\"thumb-image-wrapper\">\n              <img :src=\"imageUrl(obj)\" :alt=\"obj.object_id\" />\n              <div class=\"scale-bar-overlay\" v-if=\"scaleBarPx > 0\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPx + 'px' }\"></div>\n                <span>{{ scaleBarUm }} µm</span>\n              </div>\n            </div>\n            <div class=\"thumb-caption\">\n              <div class=\"thumb-id\">{{ obj.object_id }}</div>\n              <div class=\"thumb-meta\">\n                ESD ~ {{ formatNumber(esdUm(obj), 0) }} µm<br>\n                area {{ obj.object_area }} px²\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div v-if=\"selected\" class=\"selected-details\">\n          <div class=\"details-title\">Détails de l'objet sélectionné</div>\n          <div class=\"details-body\">\n            <div class=\"details-image\">\n              <img :src=\"imageUrl(selected)\" :alt=\"selected.object_id\" />\n              <div class=\"scale-bar-overlay\" v-if=\"scaleBarPx > 0\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPx + 'px' }\"></div>\n                <span>{{ scaleBarUm }} µm</span>\n              </div>\n            </div>\n            <div class=\"details-text\">\n              <p><strong>ID :</strong> {{ selected.object_id }}</p>\n              <p><strong>ESD :</strong> {{ formatNumber(esdUm(selected), 1) }} µm</p>\n              <p><strong>Aire :</strong> {{ selected.object_area }} px²</p>\n              <p><strong>Solidity :</strong> {{ formatNumber(selected.object_solidity, 3) }}</p>\n              <p><strong>Élongation :</strong> {{ formatNumber(selected.object_elongation, 3) }}</p>\n              <p><strong>Hue/Sat/Value :</strong>\n                {{ formatNumber(selected.object_MeanHue, 1) }} /\n                {{ formatNumber(selected.object_MeanSaturation, 1) }} /\n                {{ formatNumber(selected.object_MeanValue, 1) }}\n              </p>\n              <p>\n                <a :href=\"imageUrl(selected)\" download>Télécharger l'image</a>\n              </p>\n            </div>\n          </div>\n          <div class=\"details-json\">\n            <div class=\"details-json-title\">Métadonnées brutes</div>\n            <pre>{{ pretty(selected) }}</pre>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<!-- Chart.js -->\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<!-- (Optionnel) UMAP-js : à ajuster selon ton choix de lib / CDN -->\n<!-- <script src=\"https://cdn.jsdelivr.net/npm/umap-js\"></script> -->\n\n<script>\nexport default {\n  data () {\n    return {\n      objects: [],\n      meta: {},\n      stats: {\n        totalObjects: 0,\n        meanEsdUm: 0,\n        medianEsdUm: 0,\n        totalBiovolumeMm3: 0,\n        imagedVolume: 0,\n        objectsPerVolume: 0,\n        concentrationIndex: 0\n      },\n      qc: {\n        borderFraction: 0,\n        duplicateFraction: 0,\n        tinyFraction: 0,\n        artifactFraction: 0,\n        saturatedFraction: 0\n      },\n      esdValues: [],\n      xyPoints: [],\n      shapePoints: [],\n      pixelSizeUm: 1,\n      minEsdUm: 0,\n      charts: {},\n      selected: null,\n      config: {\n        nEsdBins: 20,\n        maxGallery: 48,\n        scaleBarUm: 100,\n        duplicateGridSizePx: 20\n      }\n    }\n  },\n\n  computed: {\n    galleryObjects () {\n      return this.objects.slice(0, this.config.maxGallery)\n    },\n\n    scaleBarUm () {\n      return this.config.scaleBarUm\n    },\n\n    scaleBarPx () {\n      return this.pixelSizeUm > 0\n        ? this.scaleBarUm / this.pixelSizeUm\n        : 0\n    },\n\n    timeString () {\n      const t = this.meta.object_time\n      if (!t && t !== 0) return ''\n      const s = String(t).padStart(4, '0')\n      return s.slice(0, 2) + ':' + s.slice(2)\n    }\n  },\n\n  watch: {\n    // On surveille msg pour reconstruire dès qu'un nouveau message arrive\n    msg: {\n      immediate: true,\n      deep: true,\n      handler (newMsg) {\n        const objs = this.extractObjectsFromMsg(newMsg)\n        if (!Array.isArray(objs) || !objs.length) {\n          this.objects = []\n          return\n        }\n        this.objects = objs\n        this.meta = { ...objs[0] }\n        this.computeStatsAndQc()\n        this.buildChartsWhenReady()\n        if (!this.selected) {\n          this.selected = objs[0]\n        }\n      }\n    }\n  },\n\n  methods: {\n    extractObjectsFromMsg (msg) {\n      if (!msg) return []\n      if (Array.isArray(msg.payload)) return msg.payload\n      if (Array.isArray(msg.payload?.payload)) return msg.payload.payload\n      return []\n    },\n\n    computeStatsAndQc () {\n      const objs = this.objects\n      if (!objs.length) return\n\n      const first = objs[0]\n      const pixelSizeUm = first.process_pixel || 1\n      const minEsdUm = first.process_min_ESD || 0\n\n      this.pixelSizeUm = pixelSizeUm\n      this.minEsdUm = minEsdUm\n\n      // Résolution de la caméra\n      const res = (first.acq_camera_resolution || '0x0').split('x')\n      const camW = parseInt(res[0]) || 0\n      const camH = parseInt(res[1]) || 0\n\n      const esdValues = []\n      const volumesUm3 = []\n      const xyPoints = []\n      const shapePoints = []\n\n      let borderCount = 0\n      let tinyCount = 0\n      let artifactCount = 0\n      let saturatedCount = 0\n\n      const grid = {}\n      const gridSize = this.config.duplicateGridSizePx\n\n      for (const o of objs) {\n        // ESD en µm\n        let esdPx = o.object_equivalent_diameter\n        if ((!esdPx || !isFinite(esdPx)) && o.object_area) {\n          esdPx = 2 * Math.sqrt(o.object_area / Math.PI)\n        }\n        const esdUm = esdPx && pixelSizeUm ? esdPx * pixelSizeUm : 0\n\n        if (esdUm > 0 && isFinite(esdUm)) {\n          esdValues.push(esdUm)\n          const vUm3 = (Math.PI / 6) * Math.pow(esdUm, 3)\n          volumesUm3.push(vUm3)\n          if (minEsdUm && esdUm < minEsdUm) {\n            tinyCount++\n          }\n        }\n\n        // Objets au bord\n        if (camW && camH) {\n          const bx = o.object_bx || 0\n          const by = o.object_by || 0\n          const w = o.object_width || 0\n          const h = o.object_height || 0\n          if (\n            bx <= 1 ||\n            by <= 1 ||\n            bx + w >= camW - 1 ||\n            by + h >= camH - 1\n          ) {\n            borderCount++\n          }\n        }\n\n        // Artefacts morpho\n        if (\n          (o.object_area && o.object_area < 30) ||\n          (o.object_solidity && o.object_solidity < 0.4) ||\n          (o.object_elongation && o.object_elongation > 10)\n        ) {\n          artifactCount++\n        }\n\n        // Saturation / très sombre\n        const meanVal = o.object_MeanValue || 0\n        const stdVal = o.object_StdValue || 0\n        if ((meanVal >= 250 && stdVal < 8) || meanVal <= 5) {\n          saturatedCount++\n        }\n\n        // Points XY\n        if (o.object_x != null && o.object_y != null) {\n          xyPoints.push({ x: o.object_x, y: o.object_y })\n          const gx = Math.round(o.object_x / gridSize)\n          const gy = Math.round(o.object_y / gridSize)\n          const key = gx + ':' + gy\n          grid[key] = (grid[key] || 0) + 1\n        }\n\n        // Points morphologiques (solidity vs élongation)\n        if (o.object_solidity != null && o.object_elongation != null) {\n          shapePoints.push({\n            x: o.object_solidity,\n            y: o.object_elongation\n          })\n        }\n      }\n\n      // Doublons (positions récurrentes)\n      let duplicateCount = 0\n      Object.values(grid).forEach(count => {\n        if (count > 1) duplicateCount += count\n      })\n\n      const totalObjects = objs.length\n      const totalBiovolumeUm3 = volumesUm3.reduce((a, b) => a + b, 0)\n      const totalBiovolumeMm3 = totalBiovolumeUm3 / 1e9\n\n      const meanEsdUm = esdValues.length\n        ? esdValues.reduce((a, b) => a + b, 0) / esdValues.length\n        : 0\n\n      const sorted = [...esdValues].sort((a, b) => a - b)\n      const medianEsdUm = sorted.length\n        ? sorted[Math.floor(sorted.length / 2)]\n        : 0\n\n      // Volume image approximatif\n      let imagedVolume = first.acq_imaged_volume\n      if (!imagedVolume || imagedVolume <= 0) {\n        if (first.acq_nb_frame && first.acq_interframe_volume) {\n          imagedVolume = first.acq_nb_frame * first.acq_interframe_volume\n        }\n      }\n\n      const objectsPerVolume = imagedVolume\n        ? totalObjects / imagedVolume\n        : 0\n\n      const concentrationIndex =\n        imagedVolume &&\n        first.sample_filtered_volume &&\n        first.sample_collected_volume\n          ? (totalObjects / imagedVolume) *\n            (first.sample_filtered_volume / first.sample_collected_volume)\n          : 0\n\n      this.stats = {\n        totalObjects,\n        meanEsdUm,\n        medianEsdUm,\n        totalBiovolumeMm3,\n        imagedVolume,\n        objectsPerVolume,\n        concentrationIndex\n      }\n\n      this.qc = {\n        borderFraction: totalObjects ? borderCount / totalObjects : 0,\n        duplicateFraction: totalObjects ? duplicateCount / totalObjects : 0,\n        tinyFraction: totalObjects ? tinyCount / totalObjects : 0,\n        artifactFraction: totalObjects ? artifactCount / totalObjects : 0,\n        saturatedFraction: totalObjects ? saturatedCount / totalObjects : 0\n      }\n\n      this.esdValues = esdValues\n      this.xyPoints = xyPoints\n      this.shapePoints = shapePoints\n    },\n\n    buildChartsWhenReady () {\n      const build = () => {\n        this.renderEsdHistogram()\n        this.renderXYScatter()\n        this.renderShapeQC()\n        this.renderUmapScatter()\n      }\n\n      if (!window.Chart) {\n        const interval = setInterval(() => {\n          if (window.Chart) {\n            clearInterval(interval)\n            build()\n          }\n        }, 100)\n      } else {\n        build()\n      }\n    },\n\n    createOrUpdateChart (id, config) {\n      const canvas = document.getElementById(id)\n      if (!canvas || !window.Chart) return\n\n      if (this.charts[id]) {\n        const chart = this.charts[id]\n        chart.data = config.data\n        chart.options = config.options || {}\n        chart.update()\n      } else {\n        const ctx = canvas.getContext('2d')\n        this.charts[id] = new window.Chart(ctx, config)\n      }\n    },\n\n    renderEsdHistogram () {\n      if (!this.esdValues || !this.esdValues.length) return\n\n      const values = this.esdValues\n      const nBins = this.config.nEsdBins\n      const min = Math.min(...values)\n      const max = Math.max(...values)\n      if (!isFinite(min) || !isFinite(max) || max === min) return\n\n      const binSize = (max - min) / nBins\n      const counts = new Array(nBins).fill(0)\n      const labels = []\n\n      for (let i = 0; i < nBins; i++) {\n        const start = min + i * binSize\n        const end = start + binSize\n        labels.push(`${Math.round(start)}-${Math.round(end)}`)\n      }\n\n      for (const v of values) {\n        let idx = Math.floor((v - min) / binSize)\n        if (idx >= nBins) idx = nBins - 1\n        if (idx < 0) idx = 0\n        counts[idx]++\n      }\n\n      this.createOrUpdateChart(this.id + '-esd-hist', {\n        type: 'bar',\n        data: {\n          labels,\n          datasets: [\n            {\n              label: 'ESD (µm)',\n              data: counts\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: {\n              title: { display: true, text: 'Classe de taille (µm)' }\n            },\n            y: {\n              title: { display: true, text: 'Nombre d\\'objets' },\n              type: 'logarithmic',\n              min: 1\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    renderXYScatter () {\n      if (!this.xyPoints || !this.xyPoints.length) return\n\n      const data = this.xyPoints.map(p => ({ x: p.x, y: p.y }))\n\n      this.createOrUpdateChart(this.id + '-xy-scatter', {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Objets',\n              data\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: { title: { display: true, text: 'x (px)' } },\n            y: {\n              title: { display: true, text: 'y (px)' },\n              reverse: true\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    renderShapeQC () {\n      if (!this.shapePoints || !this.shapePoints.length) return\n\n      const data = this.shapePoints.map(p => ({ x: p.x, y: p.y }))\n\n      this.createOrUpdateChart(this.id + '-shape-qc', {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Objets',\n              data\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: {\n              title: { display: true, text: 'Solidity' },\n              min: 0,\n              max: 1\n            },\n            y: {\n              title: { display: true, text: 'Élongation' }\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    async renderUmapScatter () {\n      if (!this.objects || !this.objects.length) return\n\n      // Features pour UMAP\n      const features = []\n      for (const o of this.objects) {\n        const esd = this.esdUm(o) || 0\n        const logEsd = esd > 0 ? Math.log10(esd) : 0\n        const circ = o['object_circ.'] || o.object_circ || 0\n        const elong = o.object_elongation || 0\n        const solid = o.object_solidity || 0\n        const hue = (o.object_MeanHue || 0) / 255\n        const sat = (o.object_MeanSaturation || 0) / 100\n        features.push([logEsd, circ, elong, solid, hue, sat])\n      }\n\n      let points = null\n\n      // Si une lib UMAP globale est dispo, on tente de l'utiliser.\n      // NOTE : selon la lib, le nom global peut être différent.\n      if (window.UMAP && typeof window.UMAP === 'function') {\n        try {\n          const umap = new window.UMAP({\n            nComponents: 2,\n            nNeighbors: 15,\n            minDist: 0.1\n          })\n          // fitAsync est exposé par umap-js selon la doc npm\n          const embedding = await umap.fitAsync(features)\n          points = embedding.map(e => ({ x: e[0], y: e[1] }))\n        } catch (e) {\n          console.warn('Erreur UMAP, fallback features simples', e)\n        }\n      }\n\n      // Fallback : première feature = log10(ESD), deuxième = circularité\n      if (!points) {\n        points = features.map(f => ({ x: f[0], y: f[1] }))\n      }\n\n      this.createOrUpdateChart(this.id + '-umap', {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Projection',\n              data: points\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: { title: { display: true, text: 'dim 1' } },\n            y: { title: { display: true, text: 'dim 2' } }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    esdUm (o) {\n      if (!o) return 0\n      const pxSize = this.pixelSizeUm || 1\n      let esdPx = o.object_equivalent_diameter\n      if ((!esdPx || !isFinite(esdPx)) && o.object_area) {\n        esdPx = 2 * Math.sqrt(o.object_area / Math.PI)\n      }\n      return esdPx && isFinite(esdPx) ? esdPx * pxSize : 0\n    },\n\n    imageUrl (o) {\n      if (!o) return ''\n      const date = o.object_date || 'unknown-date'\n      const sampleId = o.sample_id || this.meta.sample_id || 'unknown_sample'\n      const acqId = o.acq_id || this.meta.acq_id || 'unknown_acq'\n      const file = o.img_file_name || (o.object_id ? o.object_id + '.jpg' : '')\n      // Adapté à la forme que tu as donnée :\n      // ps/data/browse/api/preview/big/objects/2025-11-19/S_1/A_4/2025-11-20_09-39-25-057700_0.jpg\n      return `ps/data/browse/api/preview/big/objects/${date}/${sampleId}/${acqId}/${file}`\n    },\n\n    selectObject (obj) {\n      this.selected = obj\n      // Tu peux aussi renvoyer un msg dans le flow si tu veux :\n      // this.send({ payload: obj })\n    },\n\n    formatNumber (v, digits = 2) {\n      const x = Number(v)\n      if (!isFinite(x)) return 'n/a'\n      return x.toFixed(digits)\n    },\n\n    percent (f) {\n      if (!isFinite(f)) return '0 %'\n      return (f * 100).toFixed(1) + ' %'\n    },\n\n    qcClass (frac) {\n      if (!isFinite(frac)) return 'qc-neutral'\n      if (frac < 0.05) return 'qc-good'\n      if (frac < 0.15) return 'qc-medium'\n      return 'qc-bad'\n    },\n\n    pretty (obj) {\n      return JSON.stringify(obj, null, 2)\n    }\n  }\n}\n</script>\n\n<style>\n.plankto-dashboard {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 13px;\n  padding: 6px;\n  box-sizing: border-box;\n}\n\n.no-data {\n  padding: 12px;\n  text-align: center;\n  opacity: 0.7;\n}\n\n.plankto-layout {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n}\n\n.left-panel {\n  flex: 2;\n  min-width: 0;\n}\n\n.right-panel {\n  flex: 1.5;\n  min-width: 0;\n  max-height: 80vh;\n  overflow: auto;\n}\n\n/* Infos échantillon */\n.info-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: 6px;\n}\n\n.info-block {\n  flex: 1;\n  min-width: 180px;\n  background: rgba(0, 0, 0, 0.03);\n  border-radius: 6px;\n  padding: 6px 8px;\n}\n\n.info-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.info-body div {\n  margin-bottom: 2px;\n}\n\n/* Stats */\n.stat-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: 6px;\n}\n\n.stat-card {\n  flex: 1;\n  min-width: 160px;\n  background: rgba(0, 0, 0, 0.03);\n  border-radius: 6px;\n  padding: 6px 8px;\n}\n\n.stat-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: 0.8;\n}\n\n.stat-value {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-value.big {\n  font-size: 18px;\n}\n\n.stat-sub {\n  font-size: 11px;\n  opacity: 0.8;\n}\n\n/* QC */\n.qc-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: 8px;\n}\n\n.qc-card {\n  flex: 1;\n  min-width: 130px;\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 6px;\n  padding: 4px 6px;\n}\n\n.qc-label {\n  font-size: 11px;\n  opacity: 0.8;\n  margin-bottom: 2px;\n}\n\n.qc-good {\n  color: #2e7d32;\n  font-weight: 600;\n}\n\n.qc-medium {\n  color: #f9a825;\n  font-weight: 600;\n}\n\n.qc-bad {\n  color: #c62828;\n  font-weight: 600;\n}\n\n.qc-neutral {\n  opacity: 0.6;\n}\n\n/* Charts */\n.charts {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 8px;\n}\n\n.chart-block {\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 6px;\n  padding: 6px;\n}\n\n.chart-title {\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.chart-subtitle {\n  font-size: 11px;\n  font-weight: 400;\n  opacity: 0.7;\n}\n\n.chart-block canvas {\n  width: 100%;\n  max-height: 260px;\n}\n\n/* Galerie */\n.gallery-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 6px;\n}\n\n.thumb {\n  border-radius: 6px;\n  overflow: hidden;\n  background: rgba(0, 0, 0, 0.02);\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n\n.thumb.selected {\n  border-color: #1976d2;\n}\n\n.thumb-image-wrapper {\n  position: relative;\n  overflow: hidden;\n}\n\n.thumb img {\n  display: block;\n  width: 100%;\n}\n\n.scale-bar-overlay {\n  position: absolute;\n  left: 4px;\n  right: 4px;\n  bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background: rgba(0, 0, 0, 0.55);\n  padding: 2px 4px;\n  border-radius: 3px;\n  color: #fff;\n  font-size: 10px;\n}\n\n.scale-bar {\n  height: 2px;\n  background: #fff;\n}\n\n.thumb-caption {\n  padding: 3px 4px 4px;\n  font-size: 11px;\n}\n\n.thumb-id {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n\n.thumb-meta {\n  opacity: 0.8;\n}\n\n/* Détails objet sélectionné */\n.selected-details {\n  margin-top: 10px;\n}\n\n.details-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.details-body {\n  display: flex;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n.details-image {\n  position: relative;\n  flex: 1;\n  min-width: 120px;\n}\n\n.details-image img {\n  display: block;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.details-text {\n  flex: 1.2;\n  font-size: 12px;\n}\n\n.details-text p {\n  margin: 0 0 4px;\n}\n\n.details-json {\n  margin-top: 6px;\n}\n\n.details-json-title {\n  font-size: 11px;\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n\n.details-json pre {\n  font-size: 10px;\n  background: #f5f5f5;\n  border-radius: 4px;\n  padding: 4px;\n  max-height: 180px;\n  overflow: auto;\n}\n</style>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 520,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "64ae825a687fb054",
         "type": "ecotaxa",
@@ -4197,7 +4485,7 @@
         "page": "",
         "ui": "",
         "name": "Step Bar",
-        "order": 1,
+        "order": 2,
         "width": 0,
         "height": 0,
         "head": "",
@@ -4309,8 +4597,7 @@
         "y": 140,
         "wires": [
             [
-                "94a287dea58faa4d",
-                "b8b60ce8a0cf6764"
+                "94a287dea58faa4d"
             ]
         ]
     },
@@ -4322,7 +4609,7 @@
         "page": "",
         "ui": "",
         "name": "Calibration - WB",
-        "order": 2,
+        "order": 3,
         "width": "0",
         "height": "0",
         "head": "",
@@ -4340,22 +4627,6 @@
             ]
         ]
     },
-    {
-        "id": "9c40c3932475ea84",
-        "type": "debug",
-        "z": "6426e7bea6900426",
-        "name": "debug 1",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 940,
-        "y": 260,
-        "wires": []
-    },
     {
         "id": "e52cb70984e0d25d",
         "type": "mqtt out",
@@ -4387,23 +4658,6 @@
             []
         ]
     },
-    {
-        "id": "b8b60ce8a0cf6764",
-        "type": "debug",
-        "z": "6426e7bea6900426",
-        "name": "debug 2",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 320,
-        "y": 220,
-        "wires": []
-    },
     {
         "id": "615edad94a4f77e7",
         "type": "switch",
@@ -4421,13 +4675,12 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 650,
-        "y": 180,
+        "x": 590,
+        "y": 140,
         "wires": [
             [
                 "d8f732f8fe251222",
-                "e52cb70984e0d25d",
-                "9c40c3932475ea84"
+                "e52cb70984e0d25d"
             ]
         ]
     },
@@ -4552,8 +4805,7 @@
         "y": 140,
         "wires": [
             [
-                "740188ac42d17f44",
-                "d41870c7f587821b"
+                "740188ac42d17f44"
             ]
         ]
     },
@@ -4569,7 +4821,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container\n    class=\"pa-4 d-flex flex-wrap justify-center align-start\"\n    style=\"gap:32px;\"\n  >\n    <!-- PREVIEW -->\n    <v-card\n      class=\"calibration-container\"\n      style=\"width:1000px;height:750px;position:relative;overflow:hidden\"\n    >\n      <iframe ref=\"previewFrame\" src=\"/preview\" class=\"calibration-iframe\"></iframe>\n\n\n\n    </v-card>\n\n    <!-- Control Panel -->\n    <v-card width=\"440\" class=\"px-4\">\n      <v-card-title class=\"text-left text-primary\">\n        Lightness Calibration\n      </v-card-title>\n\n      <!-- Calibration steps section -->\n      \n      <v-card-text class=\"mb-2 bg-surface-light pt-4\">\n        <div class=\"mb-1 text-subtitle-2 text-primary\"><b>Calibration steps</b></div>\n        <ol class=\"pl-4 text-caption text-grey-darken-2\">\n          <li>Step 1</li>\n          <li>Step 2</li>\n          <li>Step 3</li>\n          <li>Step 4</li>\n        </ol>\n      </v-card-text>\n\n      <v-divider class=\"mb-4\"></v-divider>\n\n    </v-card>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      led: 50,\n      axis: \"X\",\n      ctx: null,\n      interval: null,\n    };\n  },\n  mounted() {\n    this.ctx = this.$refs.histCanvas.getContext(\"2d\");\n    // Rafraîchit l’histogramme toutes les 500 ms\n    this.interval = setInterval(this.updateHistogram, 500);\n  },\n  beforeUnmount() {\n    clearInterval(this.interval);\n  },\n  methods: {\n    sendSettings() {\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: {\n          led_intensity: this.led,\n        },\n      });\n    },\n    sendUpdate(topic, payload) {\n      console.log(\"Sending update:\", topic, payload);\n      // Ici tu enverras ta requête (WebSocket, fetch, etc.)\n    },\n\n    async updateHistogram() {\n      try {\n        // Récupère une frame du flux (JPEG ou PNG)\n        const response = await fetch(\"/preview/snapshot\"); // endpoint à adapter\n        const blob = await response.blob();\n        const bitmap = await createImageBitmap(blob);\n\n        const offscreen = new OffscreenCanvas(bitmap.width, bitmap.height);\n        const ctxOff = offscreen.getContext(\"2d\");\n        ctxOff.drawImage(bitmap, 0, 0);\n\n        const { data, width, height } = ctxOff.getImageData(0, 0, bitmap.width, bitmap.height);\n\n        const histogram = this.axis === \"X\"\n          ? this.computeXHistogram(data, width, height)\n          : this.computeYHistogram(data, width, height);\n\n        this.drawHistogram(histogram);\n      } catch (err) {\n        console.warn(\"Histogram update failed:\", err);\n      }\n    },\n\n    computeXHistogram(data, width, height) {\n      const hist = new Array(width).fill(0);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = (y * width + x) * 4;\n          const v = (data[idx] + data[idx + 1] + data[idx + 2]) / 3;\n          hist[x] += v;\n        }\n      }\n      return hist.map((v) => v / height);\n    },\n\n    computeYHistogram(data, width, height) {\n      const hist = new Array(height).fill(0);\n      for (let y = 0; y < height; y++) {\n        for (let x = 0; x < width; x++) {\n          const idx = (y * width + x) * 4;\n          const v = (data[idx] + data[idx + 1] + data[idx + 2]) / 3;\n          hist[y] += v;\n        }\n      }\n      return hist.map((v) => v / width);\n    },\n\n    drawHistogram(hist) {\n      const ctx = this.ctx;\n      const w = ctx.canvas.width;\n      const h = ctx.canvas.height;\n      ctx.clearRect(0, 0, w, h);\n      ctx.beginPath();\n      ctx.moveTo(0, h - hist[0] * h / 255);\n      for (let i = 1; i < hist.length; i++) {\n        const x = (i / hist.length) * w;\n        const y = h - (hist[i] * h) / 255;\n        ctx.lineTo(x, y);\n      }\n      ctx.strokeStyle = \"#00bcd4\";\n      ctx.lineWidth = 2;\n      ctx.stroke();\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 1000px;\n  height: 750px;\n  border: none;\n  pointer-events: none;\n}\n.histogram-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 1000px;\n  height: 150px;\n  background: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n          \n          <div class=\"target-overlay\">\n             <v-icon color=\"white\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n            <v-chip size=\"x-small\" color=\"grey\" class=\"ml-2\" variant=\"outlined\">\n               Target: {{ targetLuminance }}\n            </v-chip>\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Current State</h3>\n            <div class=\"d-flex align-center justify-space-between bg-grey-lighten-4 pa-2 rounded\">\n                <span>LED Intensity:</span>\n                <strong class=\"text-primary font-mono\">{{ currentLedValue.toFixed(4) }}</strong>\n            </div>\n            <v-btn block color=\"grey-darken-1\" variant=\"text\" size=\"small\" class=\"mt-1\" @click=\"refreshState\">\n              Refresh Data\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Measure</h3>\n            \n            <div class=\"d-flex align-center justify-center mb-4\">\n               <input class=\"colorpicker\" type=\"color\" v-model=\"selectedColor\" @input=\"onColorInput\"/>\n            </div>\n\n            <div class=\"text-center mb-2\">\n                <div class=\"text-h3 font-weight-bold\" :class=\"luminanceColor\">\n                    {{ currentLuminance.toFixed(0) }}\n                </div>\n                <div class=\"text-caption text-grey\">Target: {{ targetLuminance }}</div>\n            </div>\n\n            <v-progress-linear\n                :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n                :color=\"getProgressColor(currentLuminance)\"\n                height=\"20\"\n                rounded\n            >\n                <template v-slot:default=\"{ value }\">\n                    <strong style=\"color:white; text-shadow: 0 0 2px black;\">{{ Math.round(currentLuminance) }}</strong>\n                </template>\n            </v-progress-linear>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">3. Action</h3>\n            \n            <v-alert v-if=\"suggestedLedValue !== null\" :type=\"isTargetReached ? 'success' : 'info'\" variant=\"tonal\" density=\"compact\" class=\"mb-3\">\n                <div v-if=\"isTargetReached\">\n                    Target reached ({{targetLuminance}} ± {{tolerance}}).\n                </div>\n                <div v-else>\n                    New LED Value: <b>{{ suggestedLedValue.toFixed(4) }}</b>\n                </div>\n            </v-alert>\n\n            <v-btn \n                block \n                size=\"large\"\n                :color=\"isTargetReached ? 'success' : 'primary'\" \n                :disabled=\"suggestedLedValue === null\"\n                @click=\"applyCorrection\"\n            >\n                {{ isTargetReached ? 'Done' : 'Apply Correction' }}\n            </v-btn>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      currentLedValue: 0.5, \n      suggestedLedValue: null,\n      selectedColor: \"#000000\",\n      currentLuminance: 0,\n      targetLuminance: 230,\n      tolerance: 2,\n      \n      // SINGLE CURVE DATA (Based on your V3 dataset)\n      // Format: { lum: Measured Luminance (0-255), val: LED Intensity (0-1) }\n      curveData: [\n        { lum: 170.00, val: 0.2744 }, \n        { lum: 180.00, val: 0.4633 }, \n        { lum: 194.00, val: 0.6027 },\n        { lum: 210.00, val: 0.6994 }, \n        { lum: 229.00, val: 0.8992 }, \n        { lum: 232.00, val: 0.9087 },\n        { lum: 234.00, val: 0.9176 }, \n        { lum: 238.00, val: 0.9345 }, \n        { lum: 253.00, val: 0.9937 },\n        { lum: 255.00, val: 1.0000 }\n      ]\n    };\n  },\n  computed: {\n    isTargetReached() {\n        return Math.abs(this.currentLuminance - this.targetLuminance) <= this.tolerance;\n    },\n    luminanceColor() {\n        const diff = Math.abs(this.currentLuminance - this.targetLuminance);\n        if (diff <= this.tolerance) return 'text-success';\n        if (diff <= 10) return 'text-warning';\n        return 'text-error';\n    }\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        // Update LED Intensity from incoming message\n        if (p.settings && p.settings.led_intensity !== undefined) {\n            this.currentLedValue = Number(p.settings.led_intensity);\n        }\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    refreshState() {\n        this.sendUpdate(\"imager/request_settings\", {}); \n    },\n    sendUpdate(topic, payload) {\n      if (typeof this.send === \"function\") this.send({ topic, payload });\n    },\n    onColorInput(e) {\n      const hex = e.target.value;\n      this.selectedColor = hex;\n      this.currentLuminance = this.getLuminanceFromHex(hex);\n      this.calculateNextStep();\n    },\n    getLuminanceFromHex(hex) {\n        const r = parseInt(hex.substr(1, 2), 16);\n        const g = parseInt(hex.substr(3, 2), 16);\n        const b = parseInt(hex.substr(5, 2), 16);\n        // Simple average luminance\n        return (r + g + b) / 3;\n    },\n    getProgressColor(lum) {\n        if (Math.abs(lum - this.targetLuminance) < 5) return 'success';\n        if (lum > this.targetLuminance) return 'deep-orange';\n        return 'blue-grey';\n    },\n    getTheoreticalLedValue(lum) {\n        const data = this.curveData;\n        \n        // Handle out of bounds\n        if (lum <= data[0].lum) return data[0].val;\n        if (lum >= data[data.length - 1].lum) return data[data.length - 1].val;\n\n        // Interpolation\n        for (let i = 0; i < data.length - 1; i++) {\n            const p1 = data[i];\n            const p2 = data[i+1];\n            if (lum >= p1.lum && lum <= p2.lum) {\n                const ratio = (lum - p1.lum) / (p2.lum - p1.lum);\n                return p1.val + ratio * (p2.val - p1.val);\n            }\n        }\n        return 0.5;\n    },\n    calculateNextStep() {\n        // 1. Theoretical LED for current reading\n        const theoreticalCurrent = this.getTheoreticalLedValue(this.currentLuminance);\n        // 2. Theoretical LED for target (230)\n        const theoreticalTarget = this.getTheoreticalLedValue(this.targetLuminance);\n        \n        // 3. Calculate Delta\n        const delta = theoreticalTarget - theoreticalCurrent;\n        \n        // 4. Apply Delta to Real Value\n        let nextVal = this.currentLedValue + delta;\n        nextVal = Math.max(0, Math.min(1, nextVal));\n        \n        this.suggestedLedValue = nextVal;\n    },\n    applyCorrection() {\n        if (this.suggestedLedValue === null) return;\n        this.sendUpdate(\"imager/image\", {\n            action: \"settings\",\n            settings: {\n                led_intensity: Number(this.suggestedLedValue.toFixed(5))\n            }\n        });\n        this.currentLedValue = this.suggestedLedValue;\n    }\n  }\n};\n</script>\n\n<style scoped>\n.calibration-iframe { width: 100%; height: 100%; border: none; }\n.target-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.5; }\n.colorpicker { height: 40px; width: 100%; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4583,22 +4835,6 @@
             ]
         ]
     },
-    {
-        "id": "21af2e731c368d3e",
-        "type": "debug",
-        "z": "14c685bd04db8be5",
-        "name": "debug 3",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 940,
-        "y": 260,
-        "wires": []
-    },
     {
         "id": "785c59c553d71326",
         "type": "mqtt out",
@@ -4616,37 +4852,20 @@
         "id": "0283e992ff5da0f6",
         "type": "function",
         "z": "14c685bd04db8be5",
-        "name": "set pump settings",
-        "func": "if (msg.topic) {\n    global.set(\"calibration_wbg_red\", msg.payload.settings.white_balance_gain.red);\n    global.set(\"calibration_wbg_blue\", msg.payload.settings.white_balance_gain.blue);\n}\nreturn msg;",
+        "name": "set led_intensity",
+        "func": "if (msg.topic) {\n    global.set(\"led_intensity\", msg.payload.settings.led_intensity);}\nreturn msg;",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 990,
+        "x": 980,
         "y": 180,
         "wires": [
             []
         ]
     },
-    {
-        "id": "d41870c7f587821b",
-        "type": "debug",
-        "z": "14c685bd04db8be5",
-        "name": "debug 4",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 320,
-        "y": 220,
-        "wires": []
-    },
     {
         "id": "959de9b1292e047d",
         "type": "switch",
@@ -4664,12 +4883,11 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 650,
-        "y": 180,
+        "x": 590,
+        "y": 140,
         "wires": [
             [
-                "0283e992ff5da0f6",
-                "21af2e731c368d3e"
+                "0283e992ff5da0f6"
             ]
         ]
     },
@@ -4841,7 +5059,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 610,
+        "x": 590,
         "y": 140,
         "wires": [
             [
@@ -4861,8 +5079,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 810,
-        "y": 140,
+        "x": 1010,
+        "y": 180,
         "wires": [
             []
         ]
@@ -5094,8 +5312,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 920,
-        "y": 160,
+        "x": 1000,
+        "y": 180,
         "wires": [
             []
         ]

From da8bd588dcd65cd9885e87512e738c43109cbf69 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Tue, 25 Nov 2025 14:28:45 +0000
Subject: [PATCH 08/36] update

---
 node-red/projects/dashboard/flows.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 8e006ce54..416716978 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -1916,7 +1916,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "  .v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n  }\n\n\n.v-row+.v-row {\n    margin-top: 0px !important;\n}\n\n.v-row {\n    margin: 0px !important;\n}",
+        "format": "  .v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n  }\n\n\n.v-row+.v-row {\n    margin-top: 0px !important;\n}\n\n.v-row {\n    margin: 0px !important;\n}\n\n\n    .v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n    }\n    .v-btn-group .v-btn {\n    flex-grow: 1;\n    background: #eef3ff;\n    }",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2049,7 +2049,7 @@
         "width": "12",
         "height": "6",
         "head": "",
-        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- Zone Gauche (Badge Version) --- */\n    #pks-hw-version {\n\n\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        /* Apparence de badge */\n        background: #eef3ff;\n        color: #1976d2;\n        border: 1px solid #d6e4ff;\n\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.5px;\n\n        padding: 4px 8px;\n        border-radius: 4px;\n        /* Forme arrondie \"pilule\" */\n\n        /* Espace après \"PlanktoScope\" */\n        vertical-align: middle;\n        line-height: 1.5;\n\n        /* Masqué tant qu'il n'y a pas de données */\n        display: none;\n    }\n\n    /* --- Horloge --- */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* --- Bouton Machine --- */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #eef3ff;\n        border: 1px solid #d6e4ff;\n        margin-right: 8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1b76d3;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #a6caed;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* --- Dropdown Menu --- */\n    #pks-dropdown {\n        position: absolute !important;\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* --- Loader Modal --- */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    #app-bar-actions,\n    #pks-menu-wrapper {\n        flex-shrink: 0 !important;\n    }\n\n    #app-bar {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n</style>\n\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n    const now = new Date();\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU CONTENT\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n             <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                 <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                 <path d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\" fill=\"#076eca\" />\n             </svg>\n            <b>Home</b>\n        </div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item\" data-href=\"preview\"><i class=\"mdi mdi-eye\"></i> Preview</div>\n        <div class=\"menu-item\" data-href=\"visualization\"><i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization</div>\n        <div class=\"menu-item\" data-href=\"calibration\"><i class=\"mdi mdi-crosshairs-gps\"></i> Calibration</div>\n        <div class=\"menu-item\" data-external=\"/ps/docs/\"><i class=\"mdi mdi-book-outline\"></i> Documentation <i class=\"mdi mdi-open-in-new ext\"></i></div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item reboot\" data-action=\"reboot\"><i class=\"mdi mdi-refresh\"></i> Reboot</div>\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\"><i class=\"mdi mdi-power\"></i> Shutdown</div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `<div id=\"pks-modal-box\"><div id=\"pks-loader\"></div><div id=\"pks-modal-text\">${message}</div></div>`;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT HARDWARE VERSION (LEFT)\n========================================================= */\nfunction injectHardwareVersion() {\n    // On cherche la zone du titre. Vous avez indiqué que c'est \"app-bar-title\"\n    // qui se trouve à côté de PlanktoScope\n    const titleZone = document.getElementById(\"app-bar-title\");\n    \n    if (titleZone && !document.getElementById(\"pks-hw-version\")) {\n        const verDiv = document.createElement(\"div\");\n        verDiv.id = \"pks-hw-version\";\n        // On l'ajoute DANS la div #app-bar-title, ce qui l'affichera juste après PlanktoScope\n        titleZone.appendChild(verDiv);\n    }\n}\n\n/* =========================================================\n   INJECT MENU (RIGHT)\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    // Note: J'ai retiré hw-version d'ici pour le mettre à gauche\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    btn.onclick = (e) => {\n        e.stopPropagation();\n        const rect = btn.getBoundingClientRect();\n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";\n        menu.style.left = \"auto\";\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n    \n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n        if (item.dataset.action) {\n            showModal(item.dataset.action === \"reboot\" ? \"Rebooting…\" : \"Shutting down…\");\n            scope.send({ topic: \"action\", payload: item.dataset.action });\n            setTimeout(() => { window.location.reload(); }, 5000);\n        }\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer pour lancer les injections si la structure change */\nfunction runInjections() {\n    injectMenu();\n    injectHardwareVersion();\n}\n\nconst observer = new MutationObserver(() => runInjections());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   DATA UPDATES\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (!msg || !msg.payload) return;\n\n    // 1. Update Machine Name (Droite)\n    if (msg.payload.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n\n    // 2. Update Hardware Version (Gauche)\n    if (msg.payload.hardware_version) {\n        // On s'assure que l'élément existe\n        injectHardwareVersion();\n        \n        const hwEl = document.getElementById(\"pks-hw-version\");\n        if (hwEl) {\n            hwEl.textContent = msg.payload.hardware_version;\n            hwEl.style.display = \"inline-flex\"; // On l'affiche maintenant qu'on a la valeur\n        }\n    }\n\n    runInjections();\n});\n\nsetTimeout(runInjections, 200);\n</script>",
+        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- Zone Gauche (Badge Version) --- */\n    #pks-hw-version {\n\n\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        /* Apparence de badge */\n        background: #eef3ff;\n        color: #1976d2;\n        border: 1px solid #d6e4ff;\n\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.5px;\n\n        padding: 4px 8px;\n        border-radius: 4px;\n        /* Forme arrondie \"pilule\" */\n\n        /* Espace après \"PlanktoScope\" */\n        vertical-align: middle;\n        line-height: 1.5;\n\n        /* Masqué tant qu'il n'y a pas de données */\n        display: none;\n    }\n\n    /* --- Horloge --- */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* --- Bouton Machine --- */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #eef3ff;\n        border: 1px solid #d6e4ff;\n        margin-right: 8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1b76d3;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #a6caed;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* --- Dropdown Menu --- */\n    #pks-dropdown {\n        position: fixed !important;\n        top: 64px !important;\n\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* --- Loader Modal --- */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    #app-bar-actions,\n    #pks-menu-wrapper {\n        flex-shrink: 0 !important;\n    }\n\n    #app-bar {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n</style>\n\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n    const now = new Date();\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU CONTENT\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n             <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                 <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                 <path d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\" fill=\"#076eca\" />\n             </svg>\n            <b>Home</b>\n        </div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item\" data-href=\"preview\"><i class=\"mdi mdi-eye\"></i> Preview</div>\n        <div class=\"menu-item\" data-href=\"visualization\"><i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization</div>\n        <div class=\"menu-item\" data-href=\"calibration\"><i class=\"mdi mdi-crosshairs-gps\"></i> Calibration</div>\n        <div class=\"menu-item\" data-external=\"/ps/docs/\"><i class=\"mdi mdi-book-outline\"></i> Documentation <i class=\"mdi mdi-open-in-new ext\"></i></div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item reboot\" data-action=\"reboot\"><i class=\"mdi mdi-refresh\"></i> Reboot</div>\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\"><i class=\"mdi mdi-power\"></i> Shutdown</div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `<div id=\"pks-modal-box\"><div id=\"pks-loader\"></div><div id=\"pks-modal-text\">${message}</div></div>`;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT HARDWARE VERSION (LEFT)\n========================================================= */\nfunction injectHardwareVersion() {\n    // On cherche la zone du titre. Vous avez indiqué que c'est \"app-bar-title\"\n    // qui se trouve à côté de PlanktoScope\n    const titleZone = document.getElementById(\"app-bar-title\");\n    \n    if (titleZone && !document.getElementById(\"pks-hw-version\")) {\n        const verDiv = document.createElement(\"div\");\n        verDiv.id = \"pks-hw-version\";\n        // On l'ajoute DANS la div #app-bar-title, ce qui l'affichera juste après PlanktoScope\n        titleZone.appendChild(verDiv);\n    }\n}\n\n/* =========================================================\n   INJECT MENU (RIGHT)\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    // Note: J'ai retiré hw-version d'ici pour le mettre à gauche\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    btn.onclick = (e) => {\n        e.stopPropagation();\n        const rect = btn.getBoundingClientRect();\n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";\n        menu.style.left = \"auto\";\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n    \n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n        if (item.dataset.action) {\n            showModal(item.dataset.action === \"reboot\" ? \"Rebooting…\" : \"Shutting down…\");\n            scope.send({ topic: \"action\", payload: item.dataset.action });\n            setTimeout(() => { window.location.reload(); }, 5000);\n        }\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer pour lancer les injections si la structure change */\nfunction runInjections() {\n    injectMenu();\n    injectHardwareVersion();\n}\n\nconst observer = new MutationObserver(() => runInjections());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   DATA UPDATES\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (!msg || !msg.payload) return;\n\n    // 1. Update Machine Name (Droite)\n    if (msg.payload.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n\n    // 2. Update Hardware Version (Gauche)\n    if (msg.payload.hardware_version) {\n        // On s'assure que l'élément existe\n        injectHardwareVersion();\n        \n        const hwEl = document.getElementById(\"pks-hw-version\");\n        if (hwEl) {\n            hwEl.textContent = msg.payload.hardware_version;\n            hwEl.style.display = \"inline-flex\"; // On l'affiche maintenant qu'on a la valeur\n        }\n    }\n\n    runInjections();\n});\n\nsetTimeout(runInjections, 200);\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2435,7 +2435,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        LED Control\n      </v-card-title> \n      <v-divider></v-divider>\n      <v-card-text>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-title>\n    Focus Control\n  </v-card-title>\n  <v-divider></v-divider>\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-title>\n        Pump Control\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text><!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        LED Control\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 742121b68912c4196d0785dc52241ba75d511fa6 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Tue, 25 Nov 2025 18:54:03 +0000
Subject: [PATCH 09/36] update

---
 node-red/projects/dashboard/flows.json | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 416716978..f4eef4e5f 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -3971,7 +3971,7 @@
         "templateScope": "local",
         "className": "",
         "x": 1290,
-        "y": 160,
+        "y": 180,
         "wires": [
             []
         ]
@@ -4226,7 +4226,6 @@
         "id": "c42d0eb4a7bc6eb4",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
         "group": "e3bd8883700f1ab8",
         "page": "",
         "ui": "",
@@ -4293,7 +4292,6 @@
         "id": "ddac1dedf1ed0bb3",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
         "group": "0cb96323818204ca",
         "page": "",
         "ui": "",
@@ -4318,7 +4316,6 @@
         "id": "39ab3eeb12643cc6",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "d": true,
         "group": "fd07716b2cd88ccd",
         "page": "",
         "ui": "",
@@ -4485,7 +4482,7 @@
         "page": "",
         "ui": "",
         "name": "Step Bar",
-        "order": 2,
+        "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
@@ -4609,7 +4606,7 @@
         "page": "",
         "ui": "",
         "name": "Calibration - WB",
-        "order": 3,
+        "order": 2,
         "width": "0",
         "height": "0",
         "head": "",

From efbf7713c245fd8786f060ea86e1188ac191209d Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Tue, 25 Nov 2025 20:24:17 +0000
Subject: [PATCH 10/36] update

---
 node-red/projects/dashboard/flows.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index f4eef4e5f..2bbf9b726 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -676,10 +676,10 @@
         },
         "sizes": {
             "density": "default",
-            "pagePadding": "10px",
-            "groupGap": "10px",
+            "pagePadding": "1rem",
+            "groupGap": "1rem",
             "groupBorderRadius": "4px",
-            "widgetGap": "10px"
+            "widgetGap": "0px"
         }
     },
     {
@@ -1916,7 +1916,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "  .v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n  }\n\n\n.v-row+.v-row {\n    margin-top: 0px !important;\n}\n\n.v-row {\n    margin: 0px !important;\n}\n\n\n    .v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n    }\n    .v-btn-group .v-btn {\n    flex-grow: 1;\n    background: #eef3ff;\n    }",
+        "format": "  .v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n  }\n\n\n.v-row+.v-row {\n    margin-top: 0px !important;\n}\n\n.v-row {\n    margin: 0px !important;\n}\n\n\n    .v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n    }\n    .v-btn-group .v-btn, .v-field__overlay {\n    background: #eef3ff;\n    }\n    \n\n    .v-container{\n          padding: 0 !important;\n    }",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2188,10 +2188,10 @@
         "ui": "",
         "name": "Streaming",
         "order": 1,
-        "width": "6",
-        "height": "18",
+        "width": "0",
+        "height": "0",
         "head": "",
-        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  .iframe-container {\n    position: relative;\n    width: 100%;\n    padding-top: 75%; /* proportion 4:3 */\n    overflow: hidden;\n  }\n\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n    margin: 0;\n  }\n</style>\n",
+        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border: 1px solid #9c9c9c;\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2613,7 +2613,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container class=\"pa-4\">\n    <!-- Date & Time -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheel\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomIn\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOut\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n      latitude_D: \"0\",\n      latitude_M: \"0\",\n      latitude_S: \"0\",\n      latDir: \"N\",\n      longitude_D: \"0\",\n      longitude_M: \"0\",\n      longitude_S: \"0\",\n      lonDir: \"E\",\n      ctx: null,\n      mapImage: null,\n      imageLoaded: false,\n      zoom: 1,\n      offsetX: 0,\n      offsetY: 0,\n      sample_gear: \"\", // ajouté\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) {\n          this.sample_gear = p.sample_gear;\n\n          // ✅ Si \"Lab culture\" ou \"Demo / Test\", remplir automatiquement date/heure et GPS\n          if ([\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear)) {\n            const now = new Date();\n            this.object_date = now.toISOString().split(\"T\")[0];\n            this.object_time = now.toISOString().split(\"T\")[1].slice(0, 5);\n            this.object_lat = 0;\n            this.object_lon = 0;\n            this.updateFromDecimal(\"lat\");\n            this.updateFromDecimal(\"lon\");\n            this.sendUpdate(\"object_datetime\", {\n              object_lat: 0,\n              object_lon: 0,\n            });\n          }\n        }\n\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\"\n          const t = p.object_time.toString();\n          if (t.length === 4) this.object_time = `${t.slice(0,2)}:${t.slice(2,4)}`;\n          else this.object_time = t; // fallback si format déjà HH:MM\n        }\n\n        if (p.object_lat !== undefined)\n          this.object_lat = parseFloat(p.object_lat.toFixed(6));\n        if (p.object_lon !== undefined)\n          this.object_lon = parseFloat(p.object_lon.toFixed(6));\n        if (p.object_lat !== undefined || p.object_lon !== undefined) {\n          this.updateFromDecimal(\"lat\");\n          this.updateFromDecimal(\"lon\");\n        }\n        this.centerOnMarker();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas\");\n    this.ctx = canvas.getContext(\"2d\");\n    this.mapImage = new Image();\n    this.mapImage.src = \"/world-map.svg\";\n    this.mapImage.onload = () => {\n      this.imageLoaded = true;\n      this.centerOnMarker();\n    };\n  },\n  methods: {\n    openHint(type) {\n      if (type === \"datetime\") {\n        this.hintTitle = \"Date and Time (UTC)\";\n      this.hintText =\n        \"Enter the observation timestamp in Coordinated Universal Time (UTC). \" +\n        \"Use YYYY-MM-DD for date and HH:MM (24-hour). The saved format will be HHMM (without colon).\";\n\n      } else if (type === \"latitude\") {\n        this.hintTitle = \"Latitude\";\n        this.hintText =\n          \"Latitude defines how far north or south you are from the equator.\";\n      } else if (type === \"longitude\") {\n        this.hintTitle = \"Longitude\";\n        this.hintText =\n          \"Longitude defines how far east or west you are from the Prime Meridian.\";\n      }\n      this.hintDialog = true;\n    },\n    sendUpdate(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\"\n      const formattedTime = this.object_time ? this.object_time.replace(\":\", \"\") : \"\";\n      this.send({\n        topic,\n        payload: {\n          object_date: this.object_date,\n          object_time: formattedTime,\n          ...extra,\n        },\n      });\n    },\n    syncDecimal() {\n      this.object_lon = parseFloat(\n        this.toDecimal(this.longitude_D, this.longitude_M, this.longitude_S, this.lonDir).toFixed(6)\n      );\n      this.object_lat = parseFloat(\n        this.toDecimal(this.latitude_D, this.latitude_M, this.latitude_S, this.latDir).toFixed(6)\n      );\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    updateFromDecimal(which) {\n      if (which === \"lon\") {\n        this.object_lon = parseFloat(this.object_lon.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon, \"lon\");\n        this.longitude_D = D;\n        this.longitude_M = M;\n        this.longitude_S = S;\n        this.lonDir = dir;\n      } else {\n        this.object_lat = parseFloat(this.object_lat.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat, \"lat\");\n        this.latitude_D = D;\n        this.latitude_M = M;\n        this.latitude_S = S;\n        this.latDir = dir;\n      }\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheel(e) {\n      if (e.deltaY < 0) this.zoomIn();\n      else this.zoomOut();\n    },\n    zoomIn() {\n      this.zoom = Math.min(this.zoom * 1.25, 10);\n      this.centerOnMarker();\n    },\n    zoomOut() {\n      this.zoom = Math.max(this.zoom / 1.25, 0.5);\n      this.centerOnMarker();\n    },\n    centerOnMarker() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX = w / 2 - x;\n      this.offsetY = h / 2 - y;\n      this.drawPoint();\n    },\n    drawMap(w, h) {\n      const ctx = this.ctx;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      if (this.imageLoaded) ctx.drawImage(this.mapImage, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPoint() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx;\n      if (!ctx) return;\n      this.drawMap(w, h);\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      ctx.fillStyle = \"blue\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom, y - 10 / this.zoom);\n      ctx.restore();\n    },\n  },\n};\n</script>\n",
+        "format": "<template>\n  <v-container>\n    <!-- Date & Time -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdate('object_datetime')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"syncDecimal\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @update:model-value=\"syncDecimal\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"updateFromDecimal('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheel\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomIn\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOut\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n      latitude_D: \"0\",\n      latitude_M: \"0\",\n      latitude_S: \"0\",\n      latDir: \"N\",\n      longitude_D: \"0\",\n      longitude_M: \"0\",\n      longitude_S: \"0\",\n      lonDir: \"E\",\n      ctx: null,\n      mapImage: null,\n      imageLoaded: false,\n      zoom: 1,\n      offsetX: 0,\n      offsetY: 0,\n      sample_gear: \"\", // ajouté\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) {\n          this.sample_gear = p.sample_gear;\n\n          // ✅ Si \"Lab culture\" ou \"Demo / Test\", remplir automatiquement date/heure et GPS\n          if ([\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear)) {\n            const now = new Date();\n            this.object_date = now.toISOString().split(\"T\")[0];\n            this.object_time = now.toISOString().split(\"T\")[1].slice(0, 5);\n            this.object_lat = 0;\n            this.object_lon = 0;\n            this.updateFromDecimal(\"lat\");\n            this.updateFromDecimal(\"lon\");\n            this.sendUpdate(\"object_datetime\", {\n              object_lat: 0,\n              object_lon: 0,\n            });\n          }\n        }\n\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\"\n          const t = p.object_time.toString();\n          if (t.length === 4) this.object_time = `${t.slice(0,2)}:${t.slice(2,4)}`;\n          else this.object_time = t; // fallback si format déjà HH:MM\n        }\n\n        if (p.object_lat !== undefined)\n          this.object_lat = parseFloat(p.object_lat.toFixed(6));\n        if (p.object_lon !== undefined)\n          this.object_lon = parseFloat(p.object_lon.toFixed(6));\n        if (p.object_lat !== undefined || p.object_lon !== undefined) {\n          this.updateFromDecimal(\"lat\");\n          this.updateFromDecimal(\"lon\");\n        }\n        this.centerOnMarker();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas\");\n    this.ctx = canvas.getContext(\"2d\");\n    this.mapImage = new Image();\n    this.mapImage.src = \"/world-map.svg\";\n    this.mapImage.onload = () => {\n      this.imageLoaded = true;\n      this.centerOnMarker();\n    };\n  },\n  methods: {\n    openHint(type) {\n      if (type === \"datetime\") {\n        this.hintTitle = \"Date and Time (UTC)\";\n      this.hintText =\n        \"Enter the observation timestamp in Coordinated Universal Time (UTC). \" +\n        \"Use YYYY-MM-DD for date and HH:MM (24-hour). The saved format will be HHMM (without colon).\";\n\n      } else if (type === \"latitude\") {\n        this.hintTitle = \"Latitude\";\n        this.hintText =\n          \"Latitude defines how far north or south you are from the equator.\";\n      } else if (type === \"longitude\") {\n        this.hintTitle = \"Longitude\";\n        this.hintText =\n          \"Longitude defines how far east or west you are from the Prime Meridian.\";\n      }\n      this.hintDialog = true;\n    },\n    sendUpdate(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\"\n      const formattedTime = this.object_time ? this.object_time.replace(\":\", \"\") : \"\";\n      this.send({\n        topic,\n        payload: {\n          object_date: this.object_date,\n          object_time: formattedTime,\n          ...extra,\n        },\n      });\n    },\n    syncDecimal() {\n      this.object_lon = parseFloat(\n        this.toDecimal(this.longitude_D, this.longitude_M, this.longitude_S, this.lonDir).toFixed(6)\n      );\n      this.object_lat = parseFloat(\n        this.toDecimal(this.latitude_D, this.latitude_M, this.latitude_S, this.latDir).toFixed(6)\n      );\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    updateFromDecimal(which) {\n      if (which === \"lon\") {\n        this.object_lon = parseFloat(this.object_lon.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon, \"lon\");\n        this.longitude_D = D;\n        this.longitude_M = M;\n        this.longitude_S = S;\n        this.lonDir = dir;\n      } else {\n        this.object_lat = parseFloat(this.object_lat.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat, \"lat\");\n        this.latitude_D = D;\n        this.latitude_M = M;\n        this.latitude_S = S;\n        this.latDir = dir;\n      }\n      this.centerOnMarker();\n      this.sendUpdate(\"object_latlon\", {\n        object_lat: this.object_lat,\n        object_lon: this.object_lon,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheel(e) {\n      if (e.deltaY < 0) this.zoomIn();\n      else this.zoomOut();\n    },\n    zoomIn() {\n      this.zoom = Math.min(this.zoom * 1.25, 10);\n      this.centerOnMarker();\n    },\n    zoomOut() {\n      this.zoom = Math.max(this.zoom / 1.25, 0.5);\n      this.centerOnMarker();\n    },\n    centerOnMarker() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX = w / 2 - x;\n      this.offsetY = h / 2 - y;\n      this.drawPoint();\n    },\n    drawMap(w, h) {\n      const ctx = this.ctx;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      if (this.imageLoaded) ctx.drawImage(this.mapImage, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPoint() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx;\n      if (!ctx) return;\n      this.drawMap(w, h);\n      const lat = this.object_lat;\n      const lon = this.object_lon;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX * this.zoom + (w / 2) * (1 - this.zoom),\n        this.offsetY * this.zoom + (h / 2) * (1 - this.zoom)\n      );\n      ctx.scale(this.zoom, this.zoom);\n      ctx.fillStyle = \"blue\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom, y - 10 / this.zoom);\n      ctx.restore();\n    },\n  },\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2639,7 +2639,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Le conteneur principal devient désactivé si sample_gear n'est pas \"Horizontal Net\" -->\n  <v-container\n    class=\"pa-4\"\n    :disabled=\"isDisabled\"\n    :style=\"{\n      pointerEvents: isDisabled ? 'none' : 'auto',\n      opacity: isDisabled ? 0.5 : 1,\n    }\"\n  >\n    <!-- Date & Time (End) -->\n    <v-row>\n      <v-col cols=\"12\"><strong>End Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date_end\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time_end\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir_end\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat_end\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir_end\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon_end\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map (End) -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas_end\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheelEnd\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOutEnd\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialogEnd\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitleEnd }}</v-card-title>\n        <v-card-text>{{ hintTextEnd }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialogEnd = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n      latitude_D_end: \"0\",\n      latitude_M_end: \"0\",\n      latitude_S_end: \"0\",\n      latDir_end: \"N\",\n      longitude_D_end: \"0\",\n      longitude_M_end: \"0\",\n      longitude_S_end: \"0\",\n      lonDir_end: \"E\",\n      ctx_end: null,\n      mapImage_end: null,\n      imageLoaded_end: false,\n      zoom_end: 1,\n      offsetX_end: 0,\n      offsetY_end: 0,\n      sample_gear: \"\", // <-- ajouté ici\n      // Popup fields\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactive tout le formulaire si sample_gear n’est pas \"Horizontal Net\"\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- surveille la valeur reçue\n        if (p.object_date_end !== undefined) this.object_date_end = p.object_date_end;\n        if (p.object_time_end !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\" pour affichage dans le champ <input type=\"time\">\n          const t = p.object_time_end.toString();\n          if (t.length === 4) this.object_time_end = `${t.slice(0, 2)}:${t.slice(2, 4)}`;\n          else this.object_time_end = t; // si déjà au format HH:MM\n        }\n\n        if (p.object_lat_end !== undefined)\n          this.object_lat_end = parseFloat(p.object_lat_end.toFixed(6));\n        if (p.object_lon_end !== undefined)\n          this.object_lon_end = parseFloat(p.object_lon_end.toFixed(6));\n        if (p.object_lat_end !== undefined || p.object_lon_end !== undefined) {\n          this.updateFromDecimalEnd(\"lat\");\n          this.updateFromDecimalEnd(\"lon\");\n        }\n        this.centerOnMarkerEnd();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas_end\");\n    this.ctx_end = canvas.getContext(\"2d\");\n    this.mapImage_end = new Image();\n    this.mapImage_end.src = \"/world-map.svg\";\n    this.mapImage_end.onload = () => {\n      this.imageLoaded_end = true;\n      this.centerOnMarkerEnd();\n    };\n  },\n  methods: {\n    /** Info Popup **/\n    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd =\n          \"Enter the end time of your observation in Coordinated Universal Time (UTC). \" +\n          \"Use YYYY-MM-DD for date and HH:MM (24-hour) for time.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd =\n          \"Latitude specifies how far north or south your end location is from the equator. \" +\n          \"Use degrees (°), minutes (′), and seconds (″) with N/S direction, or directly enter a decimal between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd =\n          \"Longitude specifies how far east or west your end location is from the Prime Meridian. \" +\n          \"You can enter DMS (° ′ ″) with E/W direction or a decimal between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n\n    sendUpdateEnd(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\" avant sauvegarde\n      const formattedTimeEnd = this.object_time_end\n        ? this.object_time_end.replace(\":\", \"\")\n        : \"\";      \n      this.send({\n        topic,\n        payload: {\n          object_date_end: this.object_date_end,\n          object_time_end: formattedTimeEnd,\n          ...extra,\n        },\n      });\n    },\n    syncDecimalEnd() {\n      this.object_lon_end = parseFloat(\n        this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6)\n      );\n      this.object_lat_end = parseFloat(\n        this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6)\n      );\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    updateFromDecimalEnd(which) {\n      if (which === \"lon\") {\n        this.object_lon_end = parseFloat(this.object_lon_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon_end, \"lon\");\n        this.longitude_D_end = D;\n        this.longitude_M_end = M;\n        this.longitude_S_end = S;\n        this.lonDir_end = dir;\n      } else {\n        this.object_lat_end = parseFloat(this.object_lat_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat_end, \"lat\");\n        this.latitude_D_end = D;\n        this.latitude_M_end = M;\n        this.latitude_S_end = S;\n        this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) {\n      if (e.deltaY < 0) this.zoomInEnd();\n      else this.zoomOutEnd();\n    },\n    zoomInEnd() {\n      this.zoom_end = Math.min(this.zoom_end * 1.25, 10);\n      this.centerOnMarkerEnd();\n    },\n    zoomOutEnd() {\n      this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5);\n      this.centerOnMarkerEnd();\n    },\n    centerOnMarkerEnd() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX_end = w / 2 - x;\n      this.offsetY_end = h / 2 - y;\n      this.drawPointEnd();\n    },\n    drawMapEnd(w, h) {\n      const ctx = this.ctx_end;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <!-- Le conteneur principal devient désactivé si sample_gear n'est pas \"Horizontal Net\" -->\n  <v-container\n    :disabled=\"isDisabled\"\n    :style=\"{\n      pointerEvents: isDisabled ? 'none' : 'auto',\n      opacity: isDisabled ? 0.5 : 1,\n    }\"\n  >\n    <!-- Date & Time (End) -->\n    <v-row>\n      <v-col cols=\"12\"><strong>End Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date_end\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time_end\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir_end\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat_end\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir_end\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon_end\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map (End) -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas_end\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheelEnd\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOutEnd\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialogEnd\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitleEnd }}</v-card-title>\n        <v-card-text>{{ hintTextEnd }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialogEnd = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n      latitude_D_end: \"0\",\n      latitude_M_end: \"0\",\n      latitude_S_end: \"0\",\n      latDir_end: \"N\",\n      longitude_D_end: \"0\",\n      longitude_M_end: \"0\",\n      longitude_S_end: \"0\",\n      lonDir_end: \"E\",\n      ctx_end: null,\n      mapImage_end: null,\n      imageLoaded_end: false,\n      zoom_end: 1,\n      offsetX_end: 0,\n      offsetY_end: 0,\n      sample_gear: \"\", // <-- ajouté ici\n      // Popup fields\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactive tout le formulaire si sample_gear n’est pas \"Horizontal Net\"\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- surveille la valeur reçue\n        if (p.object_date_end !== undefined) this.object_date_end = p.object_date_end;\n        if (p.object_time_end !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\" pour affichage dans le champ <input type=\"time\">\n          const t = p.object_time_end.toString();\n          if (t.length === 4) this.object_time_end = `${t.slice(0, 2)}:${t.slice(2, 4)}`;\n          else this.object_time_end = t; // si déjà au format HH:MM\n        }\n\n        if (p.object_lat_end !== undefined)\n          this.object_lat_end = parseFloat(p.object_lat_end.toFixed(6));\n        if (p.object_lon_end !== undefined)\n          this.object_lon_end = parseFloat(p.object_lon_end.toFixed(6));\n        if (p.object_lat_end !== undefined || p.object_lon_end !== undefined) {\n          this.updateFromDecimalEnd(\"lat\");\n          this.updateFromDecimalEnd(\"lon\");\n        }\n        this.centerOnMarkerEnd();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas_end\");\n    this.ctx_end = canvas.getContext(\"2d\");\n    this.mapImage_end = new Image();\n    this.mapImage_end.src = \"/world-map.svg\";\n    this.mapImage_end.onload = () => {\n      this.imageLoaded_end = true;\n      this.centerOnMarkerEnd();\n    };\n  },\n  methods: {\n    /** Info Popup **/\n    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd =\n          \"Enter the end time of your observation in Coordinated Universal Time (UTC). \" +\n          \"Use YYYY-MM-DD for date and HH:MM (24-hour) for time.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd =\n          \"Latitude specifies how far north or south your end location is from the equator. \" +\n          \"Use degrees (°), minutes (′), and seconds (″) with N/S direction, or directly enter a decimal between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd =\n          \"Longitude specifies how far east or west your end location is from the Prime Meridian. \" +\n          \"You can enter DMS (° ′ ″) with E/W direction or a decimal between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n\n    sendUpdateEnd(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\" avant sauvegarde\n      const formattedTimeEnd = this.object_time_end\n        ? this.object_time_end.replace(\":\", \"\")\n        : \"\";      \n      this.send({\n        topic,\n        payload: {\n          object_date_end: this.object_date_end,\n          object_time_end: formattedTimeEnd,\n          ...extra,\n        },\n      });\n    },\n    syncDecimalEnd() {\n      this.object_lon_end = parseFloat(\n        this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6)\n      );\n      this.object_lat_end = parseFloat(\n        this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6)\n      );\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    updateFromDecimalEnd(which) {\n      if (which === \"lon\") {\n        this.object_lon_end = parseFloat(this.object_lon_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon_end, \"lon\");\n        this.longitude_D_end = D;\n        this.longitude_M_end = M;\n        this.longitude_S_end = S;\n        this.lonDir_end = dir;\n      } else {\n        this.object_lat_end = parseFloat(this.object_lat_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat_end, \"lat\");\n        this.latitude_D_end = D;\n        this.latitude_M_end = M;\n        this.latitude_S_end = S;\n        this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) {\n      if (e.deltaY < 0) this.zoomInEnd();\n      else this.zoomOutEnd();\n    },\n    zoomInEnd() {\n      this.zoom_end = Math.min(this.zoom_end * 1.25, 10);\n      this.centerOnMarkerEnd();\n    },\n    zoomOutEnd() {\n      this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5);\n      this.centerOnMarkerEnd();\n    },\n    centerOnMarkerEnd() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX_end = w / 2 - x;\n      this.offsetY_end = h / 2 - y;\n      this.drawPointEnd();\n    },\n    drawMapEnd(w, h) {\n      const ctx = this.ctx_end;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2665,7 +2665,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Conteneur principal désactivé si sample_gear n'est ni Horizontal Net ni Vertical Net -->\n    <v-container\n      fluid\n      class=\"pa-2\"\n      :disabled=\"isDisabled\"\n      :style=\"{\n        pointerEvents: isDisabled ? 'none' : 'auto',\n        opacity: isDisabled ? 0.5 : 1,\n        width: '100%',\n      }\"\n    >\n\n    <v-row class=\"mt-2\">\n      <!-- Net Mouth Diameter -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Mouth Opening Diameter\"\n          v-model.number=\"sample_net_mouth_diameter\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mouth_diameter')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Net Length -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Length of the Net\"\n          v-model.number=\"sample_net_length\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('net_length')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Net Mesh Size\"\n          v-model.number=\"sample_net_mesh_size\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Collector Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Volume of the Collector\"\n          v-model.number=\"sample_collected_volume\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"mL\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('collector_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_net_mouth_diameter: \"\",\n      sample_net_length: \"\",\n      sample_net_mesh_size: \"\",\n      sample_collected_volume: \"\",\n      sample_gear: \"\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactiver si sample_gear n'est pas \"Horizontal Net\" ou \"Vertical Net\"\n      return ![\"Horizontal Net\", \"Vertical Net\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- récupère la valeur reçue\n        if (p.sample_net_mouth_diameter !== undefined)\n          this.sample_net_mouth_diameter = Number(p.sample_net_mouth_diameter);\n        if (p.sample_net_length !== undefined)\n          this.sample_net_length = Number(p.sample_net_length);\n        if (p.sample_net_mesh_size !== undefined)\n          this.sample_net_mesh_size = Number(p.sample_net_mesh_size);\n        if (p.sample_collected_volume !== undefined)\n          this.sample_collected_volume = Number(p.sample_collected_volume);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send updates (ensures all values are numbers)\n     */\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_net_mouth_diameter: Number(this.sample_net_mouth_diameter) || 0,\n          sample_net_length: Number(this.sample_net_length) || 0,\n          sample_net_mesh_size: Number(this.sample_net_mesh_size) || 0,\n          sample_collected_volume: Number(this.sample_collected_volume) || 0,\n          ...extra,\n        },\n      });\n    },\n\n    /**\n     * Info popup — consistent with previous templates\n     */\n    openHint(type) {\n      if (type === \"mouth_diameter\") {\n        this.hintTitle = \"Mouth Opening Diameter\";\n        this.hintText =\n          \"Enter the diameter of the net’s mouth — the circular opening where water enters the net — measured in centimeters (cm). \" +\n          \"Typical plankton nets range from 20–60 cm in diameter. Larger diameters capture more water volume.\";\n      } else if (type === \"net_length\") {\n        this.hintTitle = \"Length of the Net\";\n        this.hintText =\n          \"Specify the total length of the net from the mouth opening to the collector. \" +\n          \"Measure in centimeters (cm). This helps calculate the water volume filtered and affects flow resistance.\";\n      } else if (type === \"mesh_size\") {\n        this.hintTitle = \"Net Mesh Size\";\n        this.hintText =\n          \"Enter the mesh size of the net in micrometers (μm). \" +\n          \"This defines the smallest particles or plankton that can pass through. For example, a 20 μm mesh captures microplankton but not bacteria.\";\n      } else if (type === \"collector_volume\") {\n        this.hintTitle = \"Volume of the Collector\";\n        this.hintText =\n          \"Specify the amount of sample collected after towing or pumping, measured in milliliters (mL). \" +\n          \"It should correspond to the water filtered and ensures proper concentration calculations.\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <!-- Conteneur principal désactivé si sample_gear n'est ni Horizontal Net ni Vertical Net -->\n    <v-container\n      fluid\n      :disabled=\"isDisabled\"\n      :style=\"{\n        pointerEvents: isDisabled ? 'none' : 'auto',\n        opacity: isDisabled ? 0.5 : 1,\n        width: '100%',\n      }\"\n    >\n\n    <v-row class=\"mt-2\">\n      <!-- Net Mouth Diameter -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Mouth Opening Diameter\"\n          v-model.number=\"sample_net_mouth_diameter\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mouth_diameter')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Net Length -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Length of the Net\"\n          v-model.number=\"sample_net_length\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"cm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('net_length')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Net Mesh Size\"\n          v-model.number=\"sample_net_mesh_size\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Collector Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Volume of the Collector\"\n          v-model.number=\"sample_collected_volume\"\n          :min=\"0\"\n          :max=\"1000\"\n          :step=\"1\"\n          suffix=\"mL\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_net_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('collector_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_net_mouth_diameter: \"\",\n      sample_net_length: \"\",\n      sample_net_mesh_size: \"\",\n      sample_collected_volume: \"\",\n      sample_gear: \"\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactiver si sample_gear n'est pas \"Horizontal Net\" ou \"Vertical Net\"\n      return ![\"Horizontal Net\", \"Vertical Net\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- récupère la valeur reçue\n        if (p.sample_net_mouth_diameter !== undefined)\n          this.sample_net_mouth_diameter = Number(p.sample_net_mouth_diameter);\n        if (p.sample_net_length !== undefined)\n          this.sample_net_length = Number(p.sample_net_length);\n        if (p.sample_net_mesh_size !== undefined)\n          this.sample_net_mesh_size = Number(p.sample_net_mesh_size);\n        if (p.sample_collected_volume !== undefined)\n          this.sample_collected_volume = Number(p.sample_collected_volume);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send updates (ensures all values are numbers)\n     */\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_net_mouth_diameter: Number(this.sample_net_mouth_diameter) || 0,\n          sample_net_length: Number(this.sample_net_length) || 0,\n          sample_net_mesh_size: Number(this.sample_net_mesh_size) || 0,\n          sample_collected_volume: Number(this.sample_collected_volume) || 0,\n          ...extra,\n        },\n      });\n    },\n\n    /**\n     * Info popup — consistent with previous templates\n     */\n    openHint(type) {\n      if (type === \"mouth_diameter\") {\n        this.hintTitle = \"Mouth Opening Diameter\";\n        this.hintText =\n          \"Enter the diameter of the net’s mouth — the circular opening where water enters the net — measured in centimeters (cm). \" +\n          \"Typical plankton nets range from 20–60 cm in diameter. Larger diameters capture more water volume.\";\n      } else if (type === \"net_length\") {\n        this.hintTitle = \"Length of the Net\";\n        this.hintText =\n          \"Specify the total length of the net from the mouth opening to the collector. \" +\n          \"Measure in centimeters (cm). This helps calculate the water volume filtered and affects flow resistance.\";\n      } else if (type === \"mesh_size\") {\n        this.hintTitle = \"Net Mesh Size\";\n        this.hintText =\n          \"Enter the mesh size of the net in micrometers (μm). \" +\n          \"This defines the smallest particles or plankton that can pass through. For example, a 20 μm mesh captures microplankton but not bacteria.\";\n      } else if (type === \"collector_volume\") {\n        this.hintTitle = \"Volume of the Collector\";\n        this.hintText =\n          \"Specify the amount of sample collected after towing or pumping, measured in milliliters (mL). \" +\n          \"It should correspond to the water filtered and ensures proper concentration calculations.\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2691,7 +2691,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <v-row class=\"mt-2\">\n      <!-- Filtered Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Filtered Volume\"\n          v-model.number=\"sample_filtered_volume\"\n          :min=\"0\"\n          :max=\"100000\"\n          :step=\"1\"\n          suffix=\"L\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('filtered_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Concentration Factor -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Concentration Factor\"\n          v-model.number=\"sample_concentration_factor\"\n          :min=\"0\"\n          :max=\"100\"\n          :step=\"0.01\"\n          suffix=\"×\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('concentration_factor')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sieve Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Sieve Mesh Size\"\n          v-model.number=\"sample_sieve_mesh_size\"\n          :min=\"1\"\n          :max=\"1000\"\n          :step=\"10\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sieve_mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sample Depth -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Depth of the Sample\"\n          v-model.number=\"sample_depth\"\n          :min=\"0\"\n          :max=\"10935\"\n          :step=\"1\"\n          suffix=\"m\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_depth')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Sample Comment (Toujours actif) -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          label=\"Sample Comment\"\n          v-model=\"sample_comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_comment')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_filtered_volume: \"\",\n      sample_concentration_factor: \"\",\n      sample_sieve_mesh_size: \"\",\n      sample_depth: \"\",\n      sample_comment: \"\",\n      sample_gear: \"\", // <-- ajout\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    // ✅ Disable fields if Lab culture or Demo / Test\n    isDisabled() {\n      return [\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        if (p.sample_filtered_volume !== undefined)\n          this.sample_filtered_volume = Number(p.sample_filtered_volume);\n        if (p.sample_concentration_factor !== undefined)\n          this.sample_concentration_factor = Number(p.sample_concentration_factor);\n        if (p.sample_sieve_mesh_size !== undefined)\n          this.sample_sieve_mesh_size = Number(p.sample_sieve_mesh_size);\n        if (p.sample_depth !== undefined)\n          this.sample_depth = Number(p.sample_depth);\n        if (p.sample_comment !== undefined)\n          this.sample_comment = String(p.sample_comment);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_filtered_volume: Number(this.sample_filtered_volume) || 0,\n          sample_concentration_factor: Number(this.sample_concentration_factor) || 0,\n          sample_sieve_mesh_size: Number(this.sample_sieve_mesh_size) || 0,\n          sample_depth: Number(this.sample_depth) || 0,\n          sample_comment: this.sample_comment || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(type) {\n      if (type === \"filtered_volume\") {\n        this.hintTitle = \"Filtered Volume\";\n        this.hintText =\n          \"Enter the total volume of water that passed through the net or filter during sampling, measured in liters (L).\";\n      } else if (type === \"concentration_factor\") {\n        this.hintTitle = \"Concentration Factor\";\n        this.hintText =\n          \"Specify the ratio by which the filtered water volume was concentrated into the final collected sample.\";\n      } else if (type === \"sieve_mesh_size\") {\n        this.hintTitle = \"Sieve Mesh Size\";\n        this.hintText =\n          \"Indicate the mesh size of the sieve used to separate particles or organisms, in micrometers (μm).\";\n      } else if (type === \"sample_depth\") {\n        this.hintTitle = \"Depth of the Sample\";\n        this.hintText =\n          \"Specify the depth (in meters) at which the sample was collected.\";\n      } else if (type === \"sample_comment\") {\n        this.hintTitle = \"Sample Comment\";\n        this.hintText =\n          \"Add any notes or context about the sample (e.g., weather, color, debris, issues).\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-textarea textarea {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <v-row class=\"mt-2\">\n      <!-- Filtered Volume -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Filtered Volume\"\n          v-model.number=\"sample_filtered_volume\"\n          :min=\"0\"\n          :max=\"100000\"\n          :step=\"1\"\n          suffix=\"L\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('filtered_volume')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Concentration Factor -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Concentration Factor\"\n          v-model.number=\"sample_concentration_factor\"\n          :min=\"0\"\n          :max=\"100\"\n          :step=\"0.01\"\n          suffix=\"×\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('concentration_factor')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sieve Mesh Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Sieve Mesh Size\"\n          v-model.number=\"sample_sieve_mesh_size\"\n          :min=\"1\"\n          :max=\"1000\"\n          :step=\"10\"\n          suffix=\"μm\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sieve_mesh_size')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n\n      <!-- Sample Depth -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field\n          label=\"Depth of the Sample\"\n          v-model.number=\"sample_depth\"\n          :min=\"0\"\n          :max=\"10935\"\n          :step=\"1\"\n          suffix=\"m\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details=\"auto\"\n          :disabled=\"isDisabled\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_depth')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Sample Comment (Toujours actif) -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          label=\"Sample Comment\"\n          v-model=\"sample_comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          @input=\"sendUpdate('sample_water_params')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('sample_comment')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text>{{ hintText }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialog = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_filtered_volume: \"\",\n      sample_concentration_factor: \"\",\n      sample_sieve_mesh_size: \"\",\n      sample_depth: \"\",\n      sample_comment: \"\",\n      sample_gear: \"\", // <-- ajout\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    // ✅ Disable fields if Lab culture or Demo / Test\n    isDisabled() {\n      return [\"Lab culture\", \"Demo / Test\"].includes(this.sample_gear);\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        if (p.sample_filtered_volume !== undefined)\n          this.sample_filtered_volume = Number(p.sample_filtered_volume);\n        if (p.sample_concentration_factor !== undefined)\n          this.sample_concentration_factor = Number(p.sample_concentration_factor);\n        if (p.sample_sieve_mesh_size !== undefined)\n          this.sample_sieve_mesh_size = Number(p.sample_sieve_mesh_size);\n        if (p.sample_depth !== undefined)\n          this.sample_depth = Number(p.sample_depth);\n        if (p.sample_comment !== undefined)\n          this.sample_comment = String(p.sample_comment);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      this.send({\n        topic,\n        payload: {\n          sample_filtered_volume: Number(this.sample_filtered_volume) || 0,\n          sample_concentration_factor: Number(this.sample_concentration_factor) || 0,\n          sample_sieve_mesh_size: Number(this.sample_sieve_mesh_size) || 0,\n          sample_depth: Number(this.sample_depth) || 0,\n          sample_comment: this.sample_comment || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(type) {\n      if (type === \"filtered_volume\") {\n        this.hintTitle = \"Filtered Volume\";\n        this.hintText =\n          \"Enter the total volume of water that passed through the net or filter during sampling, measured in liters (L).\";\n      } else if (type === \"concentration_factor\") {\n        this.hintTitle = \"Concentration Factor\";\n        this.hintText =\n          \"Specify the ratio by which the filtered water volume was concentrated into the final collected sample.\";\n      } else if (type === \"sieve_mesh_size\") {\n        this.hintTitle = \"Sieve Mesh Size\";\n        this.hintText =\n          \"Indicate the mesh size of the sieve used to separate particles or organisms, in micrometers (μm).\";\n      } else if (type === \"sample_depth\") {\n        this.hintTitle = \"Depth of the Sample\";\n        this.hintText =\n          \"Specify the depth (in meters) at which the sample was collected.\";\n      } else if (type === \"sample_comment\") {\n        this.hintTitle = \"Sample Comment\";\n        this.hintText =\n          \"Add any notes or context about the sample (e.g., weather, color, debris, issues).\";\n      }\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-textarea textarea {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3124,7 +3124,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"pa-2\">\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From b8ac594ca4e4309df1302ac89eeef3f1905f1e5b Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Wed, 26 Nov 2025 16:39:44 +0000
Subject: [PATCH 11/36] update

---
 node-red/projects/dashboard/flows.json | 748 +++++++++++++++----------
 1 file changed, 451 insertions(+), 297 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 2bbf9b726..647126a3d 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -1,8 +1,16 @@
 [
+    {
+        "id": "07f3b717f2a2c8c7",
+        "type": "tab",
+        "label": "Setup",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
     {
         "id": "1b667c6443413ced",
         "type": "tab",
-        "label": "Home dashboard2",
+        "label": "Home",
         "disabled": false,
         "info": "",
         "env": []
@@ -47,14 +55,6 @@
         "info": "",
         "env": []
     },
-    {
-        "id": "8555b76c53e789e0",
-        "type": "tab",
-        "label": "[TEST] EcoTaxa",
-        "disabled": false,
-        "info": "",
-        "env": []
-    },
     {
         "id": "8018bd5586fd4054",
         "type": "tab",
@@ -95,6 +95,14 @@
         "info": "",
         "env": []
     },
+    {
+        "id": "8555b76c53e789e0",
+        "type": "tab",
+        "label": "[TEST] EcoTaxa",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
     {
         "id": "a02961610bc3982a",
         "type": "tab",
@@ -713,7 +721,7 @@
                 "cols": "12"
             }
         ],
-        "order": 3,
+        "order": 4,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -847,7 +855,7 @@
                 "cols": "12"
             }
         ],
-        "order": 5,
+        "order": 6,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -897,7 +905,7 @@
                 "cols": "12"
             }
         ],
-        "order": 9,
+        "order": 10,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -947,7 +955,7 @@
                 "cols": "12"
             }
         ],
-        "order": 10,
+        "order": 11,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -997,7 +1005,7 @@
                 "cols": "12"
             }
         ],
-        "order": 11,
+        "order": 12,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1047,7 +1055,7 @@
                 "cols": "12"
             }
         ],
-        "order": 8,
+        "order": 9,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1097,7 +1105,7 @@
                 "cols": "12"
             }
         ],
-        "order": 7,
+        "order": 8,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1161,7 +1169,7 @@
                 "cols": "12"
             }
         ],
-        "order": 2,
+        "order": 3,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1225,7 +1233,7 @@
                 "cols": "12"
             }
         ],
-        "order": 4,
+        "order": 5,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1289,7 +1297,7 @@
                 "cols": "12"
             }
         ],
-        "order": 1,
+        "order": 2,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1399,7 +1407,7 @@
         "ui": "e6ae26617c24c3ea",
         "path": "/visualization",
         "icon": "chart-scatter-plot",
-        "layout": "tabs",
+        "layout": "grid",
         "theme": "f7770f0b818c3a67",
         "breakpoints": [
             {
@@ -1423,7 +1431,7 @@
                 "cols": "12"
             }
         ],
-        "order": 6,
+        "order": 7,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1431,7 +1439,6 @@
     {
         "id": "b570f76ef526af45",
         "type": "ui-group",
-        "d": true,
         "name": "Navigation Top",
         "page": "d129fac8e7742d5b",
         "width": "12",
@@ -1446,12 +1453,11 @@
     {
         "id": "1d3abb201c51ff47",
         "type": "ui-group",
-        "d": true,
         "name": "Navigation Bottom",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 8,
+        "order": 6,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1493,7 +1499,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 3,
+        "order": 4,
         "showTitle": true,
         "className": "",
         "visible": "true",
@@ -1501,56 +1507,78 @@
         "groupType": "default"
     },
     {
-        "id": "bdf41008b379e80e",
+        "id": "0cb96323818204ca",
         "type": "ui-group",
-        "name": "Gemini 3 Pro v1",
+        "name": "Gemini 3 Pro v2",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 4,
-        "showTitle": true,
+        "order": 5,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
         "groupType": "default"
     },
     {
-        "id": "e3bd8883700f1ab8",
-        "type": "ui-group",
-        "name": "ChatGPT 5.1 Pro v2",
-        "page": "d129fac8e7742d5b",
-        "width": "12",
-        "height": 1,
-        "order": 5,
-        "showTitle": true,
+        "id": "34112984a39c35bd",
+        "type": "ui-page",
+        "name": "Setup",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/setup",
+        "icon": "cog",
+        "layout": "grid",
+        "theme": "f7770f0b818c3a67",
+        "breakpoints": [
+            {
+                "name": "Default",
+                "px": "0",
+                "cols": "3"
+            },
+            {
+                "name": "Tablet",
+                "px": "576",
+                "cols": "6"
+            },
+            {
+                "name": "Small Desktop",
+                "px": "768",
+                "cols": "9"
+            },
+            {
+                "name": "Desktop",
+                "px": "1024",
+                "cols": "12"
+            }
+        ],
+        "order": 1,
         "className": "",
         "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
+        "disabled": "false"
     },
     {
-        "id": "0cb96323818204ca",
+        "id": "de680effc3e27451",
         "type": "ui-group",
-        "name": "Gemini 3 Pro v2",
-        "page": "d129fac8e7742d5b",
-        "width": 6,
+        "name": "body",
+        "page": "34112984a39c35bd",
+        "width": "12",
         "height": 1,
-        "order": 6,
-        "showTitle": true,
+        "order": 1,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
         "groupType": "default"
     },
     {
-        "id": "fd07716b2cd88ccd",
+        "id": "3d290173d833fd04",
         "type": "ui-group",
-        "name": "ChatGPT 5.1 Pro v3",
+        "name": "V3",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 7,
-        "showTitle": true,
+        "order": 3,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1814,6 +1842,182 @@
             ]
         ]
     },
+    {
+        "id": "7e7d02f3ea356eff",
+        "type": "switch",
+        "z": "07f3b717f2a2c8c7",
+        "name": "msg.payload.page.path === \"/home\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/home",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 570,
+        "y": 40,
+        "wires": [
+            [
+                "8faec1a8f5c2527a"
+            ]
+        ]
+    },
+    {
+        "id": "f49d711b2738e87e",
+        "type": "switch",
+        "z": "07f3b717f2a2c8c7",
+        "name": "msg.topic === \"$pageview\"",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "$pageview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 280,
+        "y": 40,
+        "wires": [
+            [
+                "7e7d02f3ea356eff"
+            ]
+        ]
+    },
+    {
+        "id": "b1f5b8b5f26121e6",
+        "type": "ui-event",
+        "z": "07f3b717f2a2c8c7",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "f49d711b2738e87e"
+            ]
+        ]
+    },
+    {
+        "id": "8faec1a8f5c2527a",
+        "type": "delay",
+        "z": "07f3b717f2a2c8c7",
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 180,
+        "y": 140,
+        "wires": [
+            [
+                "d55333906aeb7517"
+            ]
+        ]
+    },
+    {
+        "id": "d55333906aeb7517",
+        "type": "function",
+        "z": "07f3b717f2a2c8c7",
+        "name": "Get Global Variables",
+        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 360,
+        "y": 140,
+        "wires": [
+            [
+                "87b0cc67cfa07120"
+            ]
+        ]
+    },
+    {
+        "id": "87b0cc67cfa07120",
+        "type": "ui-template",
+        "z": "07f3b717f2a2c8c7",
+        "group": "de680effc3e27451",
+        "page": "",
+        "ui": "",
+        "name": "body",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-container fluid>\n        <v-card elevation=\"4\">\n            <!-- Header -->\n            <v-card-item class=\"bg-primary pa-4\">\n                <template v-slot:prepend>\n                    <v-icon icon=\"mdi-microscope\" size=\"large\" class=\"mr-2\"></v-icon>\n                </template>\n                <v-card-title class=\"text-h6 font-weight-bold\">\n                    Welcome to the PlanktoScope GUI\n                </v-card-title>\n            </v-card-item>\n\n            <v-card-text>\n                <div class=\"text-h6 my-4\">Enter your information</div>\n\n                <v-form ref=\"form\" v-model=\"valid\">\n                    <v-row>\n                        <!-- Region / Country Select -->\n                        <v-col cols=\"12\" md=\"12\">\n                            <v-autocomplete v-model=\"formData.country\" :items=\"countries\" item-title=\"label\"\n                                item-value=\"value\" label=\"Region\" placeholder=\"Please select\" variant=\"outlined\"\n                                density=\"compact\" clearable></v-autocomplete>\n                        </v-col>\n\n                        <!-- Timezone Select -->\n                        <v-col cols=\"12\" md=\"12\">\n                            <v-autocomplete v-model=\"formData.timezone\" :items=\"timezones\" label=\"Timezone\"\n                                placeholder=\"Please select\" variant=\"outlined\" density=\"compact\"\n                                clearable></v-autocomplete>\n                        </v-col>\n                    </v-row>\n                </v-form>\n            </v-card-text>\n\n            <!-- Actions -->\n            <v-card-actions>\n                <v-spacer></v-spacer>\n                <v-btn variant=\"flat\" size=\"large\" class=\"px-6\" color=\"primary\" @click=\"submitForm\" :disabled=\"!isValid\">\n                    <v-icon start>mdi-content-save</v-icon>\n                    Save Configuration\n                </v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-container>\n</template>\n\n<script>\n    export default {\n    data() {\n        return {\n            valid: true,\n            formData: {\n                country: \"\",\n                timezone: \"UTC\", // Valeur par défaut modifiée\n            },\n            // Large lists are loaded in mounted to keep data cleaner\n            countries: [],\n            timezones: []\n        };\n    },\n    computed: {\n        isValid() {\n            return this.formData.country && this.formData.timezone;\n        }\n    },\n    methods: {\n        submitForm() {\n            // Send the form data to Node-RED\n            this.send({ payload: this.formData });\n        }\n    },\n    mounted() {\n        // Populating the massive lists provided in the prompt\n        this.countries = [\n            { value: \"AF\", label: \"Afghanistan\" },\n            { value: \"AX\", label: \"Åland Islands\" },\n            { value: \"AL\", label: \"Albania\" },\n            { value: \"DZ\", label: \"Algeria\" },\n            { value: \"AD\", label: \"Andorra\" },\n            { value: \"AO\", label: \"Angola\" },\n            { value: \"AI\", label: \"Anguilla\" },\n            { value: \"AQ\", label: \"Antarctica\" },\n            { value: \"AG\", label: \"Antigua & Barbuda\" },\n            { value: \"AR\", label: \"Argentina\" },\n            { value: \"AM\", label: \"Armenia\" },\n            { value: \"AW\", label: \"Aruba\" },\n            { value: \"AU\", label: \"Australia\" },\n            { value: \"AT\", label: \"Austria\" },\n            { value: \"AZ\", label: \"Azerbaijan\" },\n            { value: \"BS\", label: \"Bahamas\" },\n            { value: \"BH\", label: \"Bahrain\" },\n            { value: \"BD\", label: \"Bangladesh\" },\n            { value: \"BB\", label: \"Barbados\" },\n            { value: \"BY\", label: \"Belarus\" },\n            { value: \"BE\", label: \"Belgium\" },\n            { value: \"BZ\", label: \"Belize\" },\n            { value: \"BJ\", label: \"Benin\" },\n            { value: \"BM\", label: \"Bermuda\" },\n            { value: \"BT\", label: \"Bhutan\" },\n            { value: \"BO\", label: \"Bolivia\" },\n            { value: \"BA\", label: \"Bosnia & Herzegovina\" },\n            { value: \"BW\", label: \"Botswana\" },\n            { value: \"BV\", label: \"Bouvet Island\" },\n            { value: \"BR\", label: \"Brazil\" },\n            { value: \"GB\", label: \"Britain (UK)\" },\n            { value: \"IO\", label: \"British Indian Ocean Territory\" },\n            { value: \"BN\", label: \"Brunei\" },\n            { value: \"BG\", label: \"Bulgaria\" },\n            { value: \"BF\", label: \"Burkina Faso\" },\n            { value: \"BI\", label: \"Burundi\" },\n            { value: \"KH\", label: \"Cambodia\" },\n            { value: \"CM\", label: \"Cameroon\" },\n            { value: \"CA\", label: \"Canada\" },\n            { value: \"CV\", label: \"Cape Verde\" },\n            { value: \"BQ\", label: \"Caribbean NL\" },\n            { value: \"KY\", label: \"Cayman Islands\" },\n            { value: \"CF\", label: \"Central African Rep.\" },\n            { value: \"TD\", label: \"Chad\" },\n            { value: \"CL\", label: \"Chile\" },\n            { value: \"CN\", label: \"China\" },\n            { value: \"CX\", label: \"Christmas Island\" },\n            { value: \"CC\", label: \"Cocos (Keeling) Islands\" },\n            { value: \"CO\", label: \"Colombia\" },\n            { value: \"KM\", label: \"Comoros\" },\n            { value: \"CD\", label: \"Congo (Dem. Rep.)\" },\n            { value: \"CG\", label: \"Congo (Rep.)\" },\n            { value: \"CK\", label: \"Cook Islands\" },\n            { value: \"CR\", label: \"Costa Rica\" },\n            { value: \"CI\", label: \"Côte d'Ivoire\" },\n            { value: \"HR\", label: \"Croatia\" },\n            { value: \"CU\", label: \"Cuba\" },\n            { value: \"CW\", label: \"Curaçao\" },\n            { value: \"CY\", label: \"Cyprus\" },\n            { value: \"CZ\", label: \"Czech Republic\" },\n            { value: \"DK\", label: \"Denmark\" },\n            { value: \"DJ\", label: \"Djibouti\" },\n            { value: \"DM\", label: \"Dominica\" },\n            { value: \"DO\", label: \"Dominican Republic\" },\n            { value: \"TL\", label: \"East Timor\" },\n            { value: \"EC\", label: \"Ecuador\" },\n            { value: \"EG\", label: \"Egypt\" },\n            { value: \"SV\", label: \"El Salvador\" },\n            { value: \"GQ\", label: \"Equatorial Guinea\" },\n            { value: \"ER\", label: \"Eritrea\" },\n            { value: \"EE\", label: \"Estonia\" },\n            { value: \"SZ\", label: \"Eswatini (Swaziland)\" },\n            { value: \"ET\", label: \"Ethiopia\" },\n            { value: \"FK\", label: \"Falkland Islands\" },\n            { value: \"FO\", label: \"Faroe Islands\" },\n            { value: \"FJ\", label: \"Fiji\" },\n            { value: \"FI\", label: \"Finland\" },\n            { value: \"FR\", label: \"France\" },\n            { value: \"GF\", label: \"French Guiana\" },\n            { value: \"PF\", label: \"French Polynesia\" },\n            { value: \"TF\", label: \"French S. Terr.\" },\n            { value: \"GA\", label: \"Gabon\" },\n            { value: \"GM\", label: \"Gambia\" },\n            { value: \"GE\", label: \"Georgia\" },\n            { value: \"DE\", label: \"Germany\" },\n            { value: \"GH\", label: \"Ghana\" },\n            { value: \"GI\", label: \"Gibraltar\" },\n            { value: \"GR\", label: \"Greece\" },\n            { value: \"GL\", label: \"Greenland\" },\n            { value: \"GD\", label: \"Grenada\" },\n            { value: \"GP\", label: \"Guadeloupe\" },\n            { value: \"GU\", label: \"Guam\" },\n            { value: \"GT\", label: \"Guatemala\" },\n            { value: \"GG\", label: \"Guernsey\" },\n            { value: \"GN\", label: \"Guinea\" },\n            { value: \"GW\", label: \"Guinea-Bissau\" },\n            { value: \"GY\", label: \"Guyana\" },\n            { value: \"HT\", label: \"Haiti\" },\n            { value: \"HM\", label: \"Heard Island & McDonald Islands\" },\n            { value: \"HN\", label: \"Honduras\" },\n            { value: \"HK\", label: \"Hong Kong\" },\n            { value: \"HU\", label: \"Hungary\" },\n            { value: \"IS\", label: \"Iceland\" },\n            { value: \"IN\", label: \"India\" },\n            { value: \"ID\", label: \"Indonesia\" },\n            { value: \"IR\", label: \"Iran\" },\n            { value: \"IQ\", label: \"Iraq\" },\n            { value: \"IE\", label: \"Ireland\" },\n            { value: \"IM\", label: \"Isle of Man\" },\n            { value: \"IL\", label: \"Israel\" },\n            { value: \"IT\", label: \"Italy\" },\n            { value: \"JM\", label: \"Jamaica\" },\n            { value: \"JP\", label: \"Japan\" },\n            { value: \"JE\", label: \"Jersey\" },\n            { value: \"JO\", label: \"Jordan\" },\n            { value: \"KZ\", label: \"Kazakhstan\" },\n            { value: \"KE\", label: \"Kenya\" },\n            { value: \"KI\", label: \"Kiribati\" },\n            { value: \"KP\", label: \"Korea (North)\" },\n            { value: \"KR\", label: \"Korea (South)\" },\n            { value: \"KW\", label: \"Kuwait\" },\n            { value: \"KG\", label: \"Kyrgyzstan\" },\n            { value: \"LA\", label: \"Laos\" },\n            { value: \"LV\", label: \"Latvia\" },\n            { value: \"LB\", label: \"Lebanon\" },\n            { value: \"LS\", label: \"Lesotho\" },\n            { value: \"LR\", label: \"Liberia\" },\n            { value: \"LY\", label: \"Libya\" },\n            { value: \"LI\", label: \"Liechtenstein\" },\n            { value: \"LT\", label: \"Lithuania\" },\n            { value: \"LU\", label: \"Luxembourg\" },\n            { value: \"MO\", label: \"Macau\" },\n            { value: \"MG\", label: \"Madagascar\" },\n            { value: \"MW\", label: \"Malawi\" },\n            { value: \"MY\", label: \"Malaysia\" },\n            { value: \"MV\", label: \"Maldives\" },\n            { value: \"ML\", label: \"Mali\" },\n            { value: \"MT\", label: \"Malta\" },\n            { value: \"MH\", label: \"Marshall Islands\" },\n            { value: \"MQ\", label: \"Martinique\" },\n            { value: \"MR\", label: \"Mauritania\" },\n            { value: \"MU\", label: \"Mauritius\" },\n            { value: \"YT\", label: \"Mayotte\" },\n            { value: \"MX\", label: \"Mexico\" },\n            { value: \"FM\", label: \"Micronesia\" },\n            { value: \"MD\", label: \"Moldova\" },\n            { value: \"MC\", label: \"Monaco\" },\n            { value: \"MN\", label: \"Mongolia\" },\n            { value: \"ME\", label: \"Montenegro\" },\n            { value: \"MS\", label: \"Montserrat\" },\n            { value: \"MA\", label: \"Morocco\" },\n            { value: \"MZ\", label: \"Mozambique\" },\n            { value: \"MM\", label: \"Myanmar (Burma)\" },\n            { value: \"NA\", label: \"Namibia\" },\n            { value: \"NR\", label: \"Nauru\" },\n            { value: \"NP\", label: \"Nepal\" },\n            { value: \"NL\", label: \"Netherlands\" },\n            { value: \"NC\", label: \"New Caledonia\" },\n            { value: \"NZ\", label: \"New Zealand\" },\n            { value: \"NI\", label: \"Nicaragua\" },\n            { value: \"NE\", label: \"Niger\" },\n            { value: \"NG\", label: \"Nigeria\" },\n            { value: \"NU\", label: \"Niue\" },\n            { value: \"NF\", label: \"Norfolk Island\" },\n            { value: \"MK\", label: \"North Macedonia\" },\n            { value: \"MP\", label: \"Northern Mariana Islands\" },\n            { value: \"NO\", label: \"Norway\" },\n            { value: \"OM\", label: \"Oman\" },\n            { value: \"PK\", label: \"Pakistan\" },\n            { value: \"PW\", label: \"Palau\" },\n            { value: \"PS\", label: \"Palestine\" },\n            { value: \"PA\", label: \"Panama\" },\n            { value: \"PG\", label: \"Papua New Guinea\" },\n            { value: \"PY\", label: \"Paraguay\" },\n            { value: \"PE\", label: \"Peru\" },\n            { value: \"PH\", label: \"Philippines\" },\n            { value: \"PN\", label: \"Pitcairn\" },\n            { value: \"PL\", label: \"Poland\" },\n            { value: \"PT\", label: \"Portugal\" },\n            { value: \"PR\", label: \"Puerto Rico\" },\n            { value: \"QA\", label: \"Qatar\" },\n            { value: \"RE\", label: \"Réunion\" },\n            { value: \"RO\", label: \"Romania\" },\n            { value: \"RU\", label: \"Russia\" },\n            { value: \"RW\", label: \"Rwanda\" },\n            { value: \"AS\", label: \"Samoa (American)\" },\n            { value: \"WS\", label: \"Samoa (western)\" },\n            { value: \"SM\", label: \"San Marino\" },\n            { value: \"ST\", label: \"Sao Tome & Principe\" },\n            { value: \"SA\", label: \"Saudi Arabia\" },\n            { value: \"SN\", label: \"Senegal\" },\n            { value: \"RS\", label: \"Serbia\" },\n            { value: \"SC\", label: \"Seychelles\" },\n            { value: \"SL\", label: \"Sierra Leone\" },\n            { value: \"SG\", label: \"Singapore\" },\n            { value: \"SK\", label: \"Slovakia\" },\n            { value: \"SI\", label: \"Slovenia\" },\n            { value: \"SB\", label: \"Solomon Islands\" },\n            { value: \"SO\", label: \"Somalia\" },\n            { value: \"ZA\", label: \"South Africa\" },\n            { value: \"GS\", label: \"South Georgia & the South Sandwich Islands\" },\n            { value: \"SS\", label: \"South Sudan\" },\n            { value: \"ES\", label: \"Spain\" },\n            { value: \"LK\", label: \"Sri Lanka\" },\n            { value: \"BL\", label: \"St Barthelemy\" },\n            { value: \"SH\", label: \"St Helena\" },\n            { value: \"KN\", label: \"St Kitts & Nevis\" },\n            { value: \"LC\", label: \"St Lucia\" },\n            { value: \"SX\", label: \"St Maarten (Dutch)\" },\n            { value: \"MF\", label: \"St Martin (French)\" },\n            { value: \"PM\", label: \"St Pierre & Miquelon\" },\n            { value: \"VC\", label: \"St Vincent\" },\n            { value: \"SD\", label: \"Sudan\" },\n            { value: \"SR\", label: \"Suriname\" },\n            { value: \"SJ\", label: \"Svalbard & Jan Mayen\" },\n            { value: \"SE\", label: \"Sweden\" },\n            { value: \"CH\", label: \"Switzerland\" },\n            { value: \"SY\", label: \"Syria\" },\n            { value: \"TW\", label: \"Taiwan\" },\n            { value: \"TJ\", label: \"Tajikistan\" },\n            { value: \"TZ\", label: \"Tanzania\" },\n            { value: \"TH\", label: \"Thailand\" },\n            { value: \"TG\", label: \"Togo\" },\n            { value: \"TK\", label: \"Tokelau\" },\n            { value: \"TO\", label: \"Tonga\" },\n            { value: \"TT\", label: \"Trinidad & Tobago\" },\n            { value: \"TN\", label: \"Tunisia\" },\n            { value: \"TR\", label: \"Turkey\" },\n            { value: \"TM\", label: \"Turkmenistan\" },\n            { value: \"TC\", label: \"Turks & Caicos Is\" },\n            { value: \"TV\", label: \"Tuvalu\" },\n            { value: \"UG\", label: \"Uganda\" },\n            { value: \"UA\", label: \"Ukraine\" },\n            { value: \"AE\", label: \"United Arab Emirates\" },\n            { value: \"US\", label: \"United States\" },\n            { value: \"UY\", label: \"Uruguay\" },\n            { value: \"UM\", label: \"US minor outlying islands\" },\n            { value: \"UZ\", label: \"Uzbekistan\" },\n            { value: \"VU\", label: \"Vanuatu\" },\n            { value: \"VA\", label: \"Vatican City\" },\n            { value: \"VE\", label: \"Venezuela\" },\n            { value: \"VN\", label: \"Vietnam\" },\n            { value: \"VG\", label: \"Virgin Islands (UK)\" },\n            { value: \"VI\", label: \"Virgin Islands (US)\" },\n            { value: \"WF\", label: \"Wallis & Futuna\" },\n            { value: \"EH\", label: \"Western Sahara\" },\n            { value: \"YE\", label: \"Yemen\" },\n            { value: \"ZM\", label: \"Zambia\" },\n            { value: \"ZW\", label: \"Zimbabwe\" }\n        ];\n        \n        this.timezones = [\n            \"Africa/Abidjan\", \"Africa/Accra\", \"Africa/Addis_Ababa\", \"Africa/Algiers\", \"Africa/Asmara\", \"Africa/Asmera\", \"Africa/Bamako\", \"Africa/Bangui\", \"Africa/Banjul\", \"Africa/Bissau\", \"Africa/Blantyre\", \"Africa/Brazzaville\", \"Africa/Bujumbura\", \"Africa/Cairo\", \"Africa/Casablanca\", \"Africa/Ceuta\", \"Africa/Conakry\", \"Africa/Dakar\", \"Africa/Dar_es_Salaam\", \"Africa/Djibouti\", \"Africa/Douala\", \"Africa/El_Aaiun\", \"Africa/Freetown\", \"Africa/Gaborone\", \"Africa/Harare\", \"Africa/Johannesburg\", \"Africa/Juba\", \"Africa/Kampala\", \"Africa/Khartoum\", \"Africa/Kigali\", \"Africa/Kinshasa\", \"Africa/Lagos\", \"Africa/Libreville\", \"Africa/Lome\", \"Africa/Luanda\", \"Africa/Lubumbashi\", \"Africa/Lusaka\", \"Africa/Malabo\", \"Africa/Maputo\", \"Africa/Maseru\", \"Africa/Mbabane\", \"Africa/Mogadishu\", \"Africa/Monrovia\", \"Africa/Nairobi\", \"Africa/Ndjamena\", \"Africa/Niamey\", \"Africa/Nouakchott\", \"Africa/Ouagadougou\", \"Africa/Porto-Novo\", \"Africa/Sao_Tome\", \"Africa/Timbuktu\", \"Africa/Tripoli\", \"Africa/Tunis\", \"Africa/Windhoek\", \"America/Adak\", \"America/Anchorage\", \"America/Anguilla\", \"America/Antigua\", \"America/Araguaina\", \"America/Argentina/Buenos_Aires\", \"America/Argentina/Catamarca\", \"America/Argentina/ComodRivadavia\", \"America/Argentina/Cordoba\", \"America/Argentina/Jujuy\", \"America/Argentina/La_Rioja\", \"America/Argentina/Mendoza\", \"America/Argentina/Rio_Gallegos\", \"America/Argentina/Salta\", \"America/Argentina/San_Juan\", \"America/Argentina/San_Luis\", \"America/Argentina/Tucuman\", \"America/Argentina/Ushuaia\", \"America/Aruba\", \"America/Asuncion\", \"America/Atikokan\", \"America/Atka\", \"America/Bahia\", \"America/Bahia_Banderas\", \"America/Barbados\", \"America/Belem\", \"America/Belize\", \"America/Blanc-Sablon\", \"America/Boa_Vista\", \"America/Bogota\", \"America/Boise\", \"America/Buenos_Aires\", \"America/Cambridge_Bay\", \"America/Campo_Grande\", \"America/Cancun\", \"America/Caracas\", \"America/Catamarca\", \"America/Cayenne\", \"America/Cayman\", \"America/Chicago\", \"America/Chihuahua\", \"America/Ciudad_Juarez\", \"America/Coral_Harbour\", \"America/Cordoba\", \"America/Costa_Rica\", \"America/Coyhaique\", \"America/Creston\", \"America/Cuiaba\", \"America/Curacao\", \"America/Danmarkshavn\", \"America/Dawson\", \"America/Dawson_Creek\", \"America/Denver\", \"America/Detroit\", \"America/Dominica\", \"America/Edmonton\", \"America/Eirunepe\", \"America/El_Salvador\", \"America/Ensenada\", \"America/Fort_Nelson\", \"America/Fort_Wayne\", \"America/Fortaleza\", \"America/Glace_Bay\", \"America/Godthab\", \"America/Goose_Bay\", \"America/Grand_Turk\", \"America/Grenada\", \"America/Guadeloupe\", \"America/Guatemala\", \"America/Guayaquil\", \"America/Guyana\", \"America/Halifax\", \"America/Havana\", \"America/Hermosillo\", \"America/Indiana/Indianapolis\", \"America/Indiana/Knox\", \"America/Indiana/Marengo\", \"America/Indiana/Petersburg\", \"America/Indiana/Tell_City\", \"America/Indiana/Vevay\", \"America/Indiana/Vincennes\", \"America/Indiana/Winamac\", \"America/Indianapolis\", \"America/Inuvik\", \"America/Iqaluit\", \"America/Jamaica\", \"America/Jujuy\", \"America/Juneau\", \"America/Kentucky/Louisville\", \"America/Kentucky/Monticello\", \"America/Knox_IN\", \"America/Kralendijk\", \"America/La_Paz\", \"America/Lima\", \"America/Los_Angeles\", \"America/Louisville\", \"America/Lower_Princes\", \"America/Maceio\", \"America/Managua\", \"America/Manaus\", \"America/Marigot\", \"America/Martinique\", \"America/Matamoros\", \"America/Mazatlan\", \"America/Mendoza\", \"America/Menominee\", \"America/Merida\", \"America/Metlakatla\", \"America/Mexico_City\", \"America/Miquelon\", \"America/Moncton\", \"America/Monterrey\", \"America/Montevideo\", \"America/Montreal\", \"America/Montserrat\", \"America/Nassau\", \"America/New_York\", \"America/Nipigon\", \"America/Nome\", \"America/Noronha\", \"America/North_Dakota/Beulah\", \"America/North_Dakota/Center\", \"America/North_Dakota/New_Salem\", \"America/Nuuk\", \"America/Ojinaga\", \"America/Panama\", \"America/Pangnirtung\", \"America/Paramaribo\", \"America/Phoenix\", \"America/Port-au-Prince\", \"America/Port_of_Spain\", \"America/Porto_Acre\", \"America/Porto_Velho\", \"America/Puerto_Rico\", \"America/Punta_Arenas\", \"America/Rainy_River\", \"America/Rankin_Inlet\", \"America/Recife\", \"America/Regina\", \"America/Resolute\", \"America/Rio_Branco\", \"America/Rosario\", \"America/Santa_Isabel\", \"America/Santarem\", \"America/Santiago\", \"America/Santo_Domingo\", \"America/Sao_Paulo\", \"America/Scoresbysund\", \"America/Shiprock\", \"America/Sitka\", \"America/St_Barthelemy\", \"America/St_Johns\", \"America/St_Kitts\", \"America/St_Lucia\", \"America/St_Thomas\", \"America/St_Vincent\", \"America/Swift_Current\", \"America/Tegucigalpa\", \"America/Thule\", \"America/Thunder_Bay\", \"America/Tijuana\", \"America/Toronto\", \"America/Tortola\", \"America/Vancouver\", \"America/Virgin\", \"America/Whitehorse\", \"America/Winnipeg\", \"America/Yakutat\", \"America/Yellowknife\", \"Antarctica/Casey\", \"Antarctica/Davis\", \"Antarctica/DumontDUrville\", \"Antarctica/Macquarie\", \"Antarctica/Mawson\", \"Antarctica/McMurdo\", \"Antarctica/Palmer\", \"Antarctica/Rothera\", \"Antarctica/South_Pole\", \"Antarctica/Syowa\", \"Antarctica/Troll\", \"Antarctica/Vostok\", \"Arctic/Longyearbyen\", \"Asia/Aden\", \"Asia/Almaty\", \"Asia/Amman\", \"Asia/Anadyr\", \"Asia/Aqtau\", \"Asia/Aqtobe\", \"Asia/Ashgabat\", \"Asia/Ashkhabad\", \"Asia/Atyrau\", \"Asia/Baghdad\", \"Asia/Bahrain\", \"Asia/Baku\", \"Asia/Bangkok\", \"Asia/Barnaul\", \"Asia/Beirut\", \"Asia/Bishkek\", \"Asia/Brunei\", \"Asia/Calcutta\", \"Asia/Chita\", \"Asia/Choibalsan\", \"Asia/Chongqing\", \"Asia/Chungking\", \"Asia/Colombo\", \"Asia/Dacca\", \"Asia/Damascus\", \"Asia/Dhaka\", \"Asia/Dili\", \"Asia/Dubai\", \"Asia/Dushanbe\", \"Asia/Famagusta\", \"Asia/Gaza\", \"Asia/Harbin\", \"Asia/Hebron\", \"Asia/Ho_Chi_Minh\", \"Asia/Hong_Kong\", \"Asia/Hovd\", \"Asia/Irkutsk\", \"Asia/Istanbul\", \"Asia/Jakarta\", \"Asia/Jayapura\", \"Asia/Jerusalem\", \"Asia/Kabul\", \"Asia/Kamchatka\", \"Asia/Karachi\", \"Asia/Kashgar\", \"Asia/Kathmandu\", \"Asia/Katmandu\", \"Asia/Khandyga\", \"Asia/Kolkata\", \"Asia/Krasnoyarsk\", \"Asia/Kuala_Lumpur\", \"Asia/Kuching\", \"Asia/Kuwait\", \"Asia/Macao\", \"Asia/Macau\", \"Asia/Magadan\", \"Asia/Makassar\", \"Asia/Manila\", \"Asia/Muscat\", \"Asia/Nicosia\", \"Asia/Novokuznetsk\", \"Asia/Novosibirsk\", \"Asia/Omsk\", \"Asia/Oral\", \"Asia/Phnom_Penh\", \"Asia/Pontianak\", \"Asia/Pyongyang\", \"Asia/Qatar\", \"Asia/Qostanay\", \"Asia/Qyzylorda\", \"Asia/Rangoon\", \"Asia/Riyadh\", \"Asia/Saigon\", \"Asia/Sakhalin\", \"Asia/Samarkand\", \"Asia/Seoul\", \"Asia/Shanghai\", \"Asia/Singapore\", \"Asia/Srednekolymsk\", \"Asia/Taipei\", \"Asia/Tashkent\", \"Asia/Tbilisi\", \"Asia/Tehran\", \"Asia/Tel_Aviv\", \"Asia/Thimbu\", \"Asia/Thimphu\", \"Asia/Tokyo\", \"Asia/Tomsk\", \"Asia/Ujung_Pandang\", \"Asia/Ulaanbaatar\", \"Asia/Ulan_Bator\", \"Asia/Urumqi\", \"Asia/Ust-Nera\", \"Asia/Vientiane\", \"Asia/Vladivostok\", \"Asia/Yakutsk\", \"Asia/Yangon\", \"Asia/Yekaterinburg\", \"Asia/Yerevan\", \"Atlantic/Azores\", \"Atlantic/Bermuda\", \"Atlantic/Canary\", \"Atlantic/Cape_Verde\", \"Atlantic/Faeroe\", \"Atlantic/Faroe\", \"Atlantic/Jan_Mayen\", \"Atlantic/Madeira\", \"Atlantic/Reykjavik\", \"Atlantic/South_Georgia\", \"Atlantic/St_Helena\", \"Atlantic/Stanley\", \"Australia/ACT\", \"Australia/Adelaide\", \"Australia/Brisbane\", \"Australia/Broken_Hill\", \"Australia/Canberra\", \"Australia/Currie\", \"Australia/Darwin\", \"Australia/Eucla\", \"Australia/Hobart\", \"Australia/LHI\", \"Australia/Lindeman\", \"Australia/Lord_Howe\", \"Australia/Melbourne\", \"Australia/NSW\", \"Australia/North\", \"Australia/Perth\", \"Australia/Queensland\", \"Australia/South\", \"Australia/Sydney\", \"Australia/Tasmania\", \"Australia/Victoria\", \"Australia/West\", \"Australia/Yancowinna\", \"Brazil/Acre\", \"Brazil/DeNoronha\", \"Brazil/East\", \"Brazil/West\", \"CET\", \"CST6CDT\", \"Canada/Atlantic\", \"Canada/Central\", \"Canada/Eastern\", \"Canada/Mountain\", \"Canada/Newfoundland\", \"Canada/Pacific\", \"Canada/Saskatchewan\", \"Canada/Yukon\", \"Chile/Continental\", \"Chile/EasterIsland\", \"Cuba\", \"EET\", \"EST\", \"EST5EDT\", \"Egypt\", \"Eire\", \"Etc/GMT\", \"Etc/GMT+0\", \"Etc/GMT+1\", \"Etc/GMT+10\", \"Etc/GMT+11\", \"Etc/GMT+12\", \"Etc/GMT+2\", \"Etc/GMT+3\", \"Etc/GMT+4\", \"Etc/GMT+5\", \"Etc/GMT+6\", \"Etc/GMT+7\", \"Etc/GMT+8\", \"Etc/GMT+9\", \"Etc/GMT-0\", \"Etc/GMT-1\", \"Etc/GMT-10\", \"Etc/GMT-11\", \"Etc/GMT-12\", \"Etc/GMT-13\", \"Etc/GMT-14\", \"Etc/GMT-2\", \"Etc/GMT-3\", \"Etc/GMT-4\", \"Etc/GMT-5\", \"Etc/GMT-6\", \"Etc/GMT-7\", \"Etc/GMT-8\", \"Etc/GMT-9\", \"Etc/GMT0\", \"Etc/Greenwich\", \"Etc/UCT\", \"Etc/UTC\", \"Etc/Universal\", \"Etc/Zulu\", \"Europe/Amsterdam\", \"Europe/Andorra\", \"Europe/Astrakhan\", \"Europe/Athens\", \"Europe/Belfast\", \"Europe/Belgrade\", \"Europe/Berlin\", \"Europe/Bratislava\", \"Europe/Brussels\", \"Europe/Bucharest\", \"Europe/Budapest\", \"Europe/Busingen\", \"Europe/Chisinau\", \"Europe/Copenhagen\", \"Europe/Dublin\", \"Europe/Gibraltar\", \"Europe/Guernsey\", \"Europe/Helsinki\", \"Europe/Isle_of_Man\", \"Europe/Istanbul\", \"Europe/Jersey\", \"Europe/Kaliningrad\", \"Europe/Kiev\", \"Europe/Kirov\", \"Europe/Kyiv\", \"Europe/Lisbon\", \"Europe/Ljubljana\", \"Europe/London\", \"Europe/Luxembourg\", \"Europe/Madrid\", \"Europe/Malta\", \"Europe/Mariehamn\", \"Europe/Minsk\", \"Europe/Monaco\", \"Europe/Moscow\", \"Europe/Nicosia\", \"Europe/Oslo\", \"Europe/Paris\", \"Europe/Podgorica\", \"Europe/Prague\", \"Europe/Riga\", \"Europe/Rome\", \"Europe/Samara\", \"Europe/San_Marino\", \"Europe/Sarajevo\", \"Europe/Saratov\", \"Europe/Simferopol\", \"Europe/Skopje\", \"Europe/Sofia\", \"Europe/Stockholm\", \"Europe/Tallinn\", \"Europe/Tirane\", \"Europe/Tiraspol\", \"Europe/Ulyanovsk\", \"Europe/Uzhgorod\", \"Europe/Vaduz\", \"Europe/Vatican\", \"Europe/Vienna\", \"Europe/Vilnius\", \"Europe/Volgograd\", \"Europe/Warsaw\", \"Europe/Zagreb\", \"Europe/Zaporozhye\", \"Europe/Zurich\", \"Factory\", \"GB\", \"GB-Eire\", \"GMT\", \"GMT+0\", \"GMT-0\", \"GMT0\", \"Greenwich\", \"HST\", \"Hongkong\", \"Iceland\", \"Indian/Antananarivo\", \"Indian/Chagos\", \"Indian/Christmas\", \"Indian/Cocos\", \"Indian/Comoro\", \"Indian/Kerguelen\", \"Indian/Mahe\", \"Indian/Maldives\", \"Indian/Mauritius\", \"Indian/Mayotte\", \"Indian/Reunion\", \"Iran\", \"Israel\", \"Jamaica\", \"Japan\", \"Kwajalein\", \"Libya\", \"MET\", \"MST\", \"MST7MDT\", \"Mexico/BajaNorte\", \"Mexico/BajaSur\", \"Mexico/General\", \"NZ\", \"NZ-CHAT\", \"Navajo\", \"PRC\", \"PST8PDT\", \"Pacific/Apia\", \"Pacific/Auckland\", \"Pacific/Bougainville\", \"Pacific/Chatham\", \"Pacific/Chuuk\", \"Pacific/Easter\", \"Pacific/Efate\", \"Pacific/Enderbury\", \"Pacific/Fakaofo\", \"Pacific/Fiji\", \"Pacific/Funafuti\", \"Pacific/Galapagos\", \"Pacific/Gambier\", \"Pacific/Guadalcanal\", \"Pacific/Guam\", \"Pacific/Honolulu\", \"Pacific/Johnston\", \"Pacific/Kanton\", \"Pacific/Kiritimati\", \"Pacific/Kosrae\", \"Pacific/Kwajalein\", \"Pacific/Majuro\", \"Pacific/Marquesas\", \"Pacific/Midway\", \"Pacific/Nauru\", \"Pacific/Niue\", \"Pacific/Norfolk\", \"Pacific/Noumea\", \"Pacific/Pago_Pago\", \"Pacific/Palau\", \"Pacific/Pitcairn\", \"Pacific/Pohnpei\", \"Pacific/Ponape\", \"Pacific/Port_Moresby\", \"Pacific/Rarotonga\", \"Pacific/Saipan\", \"Pacific/Samoa\", \"Pacific/Tahiti\", \"Pacific/Tarawa\", \"Pacific/Tongatapu\", \"Pacific/Truk\", \"Pacific/Wake\", \"Pacific/Wallis\", \"Pacific/Yap\", \"Poland\", \"Portugal\", \"ROC\", \"ROK\", \"Singapore\", \"Turkey\", \"UCT\", \"US/Alaska\", \"US/Aleutian\", \"US/Arizona\", \"US/Central\", \"US/East-Indiana\", \"US/Eastern\", \"US/Hawaii\", \"US/Indiana-Starke\", \"US/Michigan\", \"US/Mountain\", \"US/Pacific\", \"US/Samoa\", \"UTC\", \"Universal\", \"W-SU\", \"WET\", \"Zulu\"\n        ];\n    }\n}\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 530,
+        "y": 140,
+        "wires": [
+            [
+                "b49055c50dca065a"
+            ]
+        ]
+    },
+    {
+        "id": "b49055c50dca065a",
+        "type": "debug",
+        "z": "07f3b717f2a2c8c7",
+        "name": "debug 2",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 660,
+        "y": 140,
+        "wires": []
+    },
+    {
+        "id": "c8caad8136e6c5e3",
+        "type": "ui-template",
+        "z": "07f3b717f2a2c8c7",
+        "group": "",
+        "page": "34112984a39c35bd",
+        "ui": "",
+        "name": "CSS (All Pages)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "\n    .v-toolbar__content {\n    display:none;\n    }\n\n.v-main{\n  --v-layout-top: 0px !important;\n\n}       \n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 920,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "1cf1b20e425ec126",
         "type": "ui-template",
@@ -2031,41 +2235,15 @@
         "y": 280,
         "wires": [
             [
-                "52902327e2363f8b",
                 "cd5cd3a0277b8dba",
-                "37fa78ad741d783c"
+                "37fa78ad741d783c",
+                "04386808e694e97e"
             ]
         ]
     },
     {
-        "id": "52902327e2363f8b",
-        "type": "ui-template",
-        "z": "1b667c6443413ced",
-        "group": "",
-        "page": "",
-        "ui": "e6ae26617c24c3ea",
-        "name": "toolbar",
-        "order": 2,
-        "width": "12",
-        "height": "6",
-        "head": "",
-        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- Zone Gauche (Badge Version) --- */\n    #pks-hw-version {\n\n\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        /* Apparence de badge */\n        background: #eef3ff;\n        color: #1976d2;\n        border: 1px solid #d6e4ff;\n\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.5px;\n\n        padding: 4px 8px;\n        border-radius: 4px;\n        /* Forme arrondie \"pilule\" */\n\n        /* Espace après \"PlanktoScope\" */\n        vertical-align: middle;\n        line-height: 1.5;\n\n        /* Masqué tant qu'il n'y a pas de données */\n        display: none;\n    }\n\n    /* --- Horloge --- */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* --- Bouton Machine --- */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #eef3ff;\n        border: 1px solid #d6e4ff;\n        margin-right: 8px;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1b76d3;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #a6caed;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* --- Dropdown Menu --- */\n    #pks-dropdown {\n        position: fixed !important;\n        top: 64px !important;\n\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .menu-header {\n        display: flex;\n        align-items: center;\n        padding: 12px 16px 6px 16px;\n    }\n\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* --- Loader Modal --- */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    #app-bar-actions,\n    #pks-menu-wrapper {\n        flex-shrink: 0 !important;\n    }\n\n    #app-bar {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n</style>\n\n<script>\n    let scope = this;\n\n/* Load MDI icons if missing */\nif (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n    const mdi = document.createElement(\"link\");\n    mdi.rel = \"stylesheet\";\n    mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n    document.head.appendChild(mdi);\n}\n\n/* Clock */\nfunction updateClock() {\n    const el = document.getElementById(\"pks-clock\");\n    if (!el) return;\n    const now = new Date();\n    const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n    const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n    const d = days[now.getUTCDay()];\n    const day = String(now.getUTCDate()).padStart(2, \"0\");\n    const month = months[now.getUTCMonth()];\n    const year = now.getUTCFullYear();\n    const hh = now.getUTCHours().toString().padStart(2, \"0\");\n    const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n    el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n}\nsetInterval(updateClock, 60000);\n\n/* =========================================================\n   BUILD MENU CONTENT\n========================================================= */\nfunction buildMenu(machineName) {\n    const menu = document.getElementById(\"pks-dropdown\");\n    if (!menu) return;\n    menu.innerHTML = `\n        <div class=\"menu-item\" data-href=\"home\">\n             <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\">\n                 <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                 <path d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\" fill=\"#076eca\" />\n             </svg>\n            <b>Home</b>\n        </div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item\" data-href=\"preview\"><i class=\"mdi mdi-eye\"></i> Preview</div>\n        <div class=\"menu-item\" data-href=\"visualization\"><i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization</div>\n        <div class=\"menu-item\" data-href=\"calibration\"><i class=\"mdi mdi-crosshairs-gps\"></i> Calibration</div>\n        <div class=\"menu-item\" data-external=\"/ps/docs/\"><i class=\"mdi mdi-book-outline\"></i> Documentation <i class=\"mdi mdi-open-in-new ext\"></i></div>\n        <div class=\"menu-separator\"></div>\n        <div class=\"menu-item reboot\" data-action=\"reboot\"><i class=\"mdi mdi-refresh\"></i> Reboot</div>\n        <div class=\"menu-item shutdown\" data-action=\"shutdown\"><i class=\"mdi mdi-power\"></i> Shutdown</div>\n    `;\n}\n\n/* =========================================================\n   MODAL LOADER\n========================================================= */\nfunction showModal(message) {\n    let modal = document.getElementById(\"pks-modal\");\n    if (!modal) {\n        modal = document.createElement(\"div\");\n        modal.id = \"pks-modal\";\n        modal.innerHTML = `<div id=\"pks-modal-box\"><div id=\"pks-loader\"></div><div id=\"pks-modal-text\">${message}</div></div>`;\n        document.body.appendChild(modal);\n    }\n    document.getElementById(\"pks-modal-text\").textContent = message;\n    modal.style.display = \"flex\";\n}\nfunction hideModal() {\n    const modal = document.getElementById(\"pks-modal\");\n    if (modal) modal.style.display = \"none\";\n}\n\n/* =========================================================\n   INJECT HARDWARE VERSION (LEFT)\n========================================================= */\nfunction injectHardwareVersion() {\n    // On cherche la zone du titre. Vous avez indiqué que c'est \"app-bar-title\"\n    // qui se trouve à côté de PlanktoScope\n    const titleZone = document.getElementById(\"app-bar-title\");\n    \n    if (titleZone && !document.getElementById(\"pks-hw-version\")) {\n        const verDiv = document.createElement(\"div\");\n        verDiv.id = \"pks-hw-version\";\n        // On l'ajoute DANS la div #app-bar-title, ce qui l'affichera juste après PlanktoScope\n        titleZone.appendChild(verDiv);\n    }\n}\n\n/* =========================================================\n   INJECT MENU (RIGHT)\n========================================================= */\nfunction injectMenu() {\n    const zone = document.getElementById(\"app-bar-actions\");\n    if (!zone) return;\n    if (!document.getElementById(\"pks-menu-wrapper\")) {\n        const wrap = document.createElement(\"div\");\n        wrap.id = \"pks-menu-wrapper\";\n        zone.appendChild(wrap);\n    }\n    const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n    if (!document.getElementById(\"pks-dropdown\")) {\n        const dropdown = document.createElement(\"div\");\n        dropdown.id = \"pks-dropdown\";\n        document.body.appendChild(dropdown);\n    }\n\n    // Note: J'ai retiré hw-version d'ici pour le mettre à gauche\n    if (!document.getElementById(\"pks-machine-button\")) {\n        wrapper.innerHTML = `\n            <div id=\"pks-clock\"></div>\n            <button id=\"pks-machine-button\">\n                <i class=\"mdi mdi-desktop-classic\"></i>\n                <span id=\"pks-machine-name\">Loading..</span>\n                <i class=\"mdi mdi-menu-down\"></i>\n            </button>\n        `;\n        updateClock();\n    }\n\n    const btn = document.getElementById(\"pks-machine-button\");\n    const menu = document.getElementById(\"pks-dropdown\");\n\n    btn.onclick = (e) => {\n        e.stopPropagation();\n        const rect = btn.getBoundingClientRect();\n        menu.style.top = rect.bottom + \"px\";\n        menu.style.right = \"0px\";\n        menu.style.left = \"auto\";\n        menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n    };\n    \n    menu.onclick = (e) => {\n        const item = e.target.closest(\".menu-item\");\n        if (!item) return;\n        if (item.dataset.href) window.location.href = item.dataset.href;\n        if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n        if (item.dataset.action) {\n            showModal(item.dataset.action === \"reboot\" ? \"Rebooting…\" : \"Shutting down…\");\n            scope.send({ topic: \"action\", payload: item.dataset.action });\n            setTimeout(() => { window.location.reload(); }, 5000);\n        }\n        menu.style.display = \"none\";\n    };\n\n    document.addEventListener(\"click\", (e) => {\n        if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n    });\n}\n\n/* DOM observer pour lancer les injections si la structure change */\nfunction runInjections() {\n    injectMenu();\n    injectHardwareVersion();\n}\n\nconst observer = new MutationObserver(() => runInjections());\nobserver.observe(document.body, { childList: true, subtree: true });\n\n/* =========================================================\n   DATA UPDATES\n========================================================= */\nthis.$watch(\"msg\", (msg) => {\n    if (!msg || !msg.payload) return;\n\n    // 1. Update Machine Name (Droite)\n    if (msg.payload.machine_name) {\n        const name = msg.payload.machine_name;\n        const el = document.getElementById(\"pks-machine-name\");\n        if (el) el.textContent = name;\n        buildMenu(name);\n    }\n\n    // 2. Update Hardware Version (Gauche)\n    if (msg.payload.hardware_version) {\n        // On s'assure que l'élément existe\n        injectHardwareVersion();\n        \n        const hwEl = document.getElementById(\"pks-hw-version\");\n        if (hwEl) {\n            hwEl.textContent = msg.payload.hardware_version;\n            hwEl.style.display = \"inline-flex\"; // On l'affiche maintenant qu'on a la valeur\n        }\n    }\n\n    runInjections();\n});\n\nsetTimeout(runInjections, 200);\n</script>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "widget:ui",
-        "className": "",
-        "x": 820,
-        "y": 200,
-        "wires": [
-            [
-                "1db1c2e3e19e85ff"
-            ]
-        ]
-    },
-    {
-        "id": "8efc52e6ee9206f6",
-        "type": "poweroff",
+        "id": "8efc52e6ee9206f6",
+        "type": "poweroff",
         "z": "1b667c6443413ced",
         "name": "",
         "x": 1160,
@@ -2179,6 +2357,32 @@
         "y": 320,
         "wires": []
     },
+    {
+        "id": "04386808e694e97e",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "",
+        "page": "",
+        "ui": "e6ae26617c24c3ea",
+        "name": "toolbar",
+        "order": 2,
+        "width": "12",
+        "height": "6",
+        "head": "",
+        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- Styles pour le Logo et Texte PlanktoScope --- */\n    #pks-logo-link {\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #pks-logo-link svg {\n        margin-right: 8px;\n        height: 36px;\n        width: 36px;\n    }\n\n    .pks-logo-text {\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.5px;\n        color: #1976d2;\n    }\n\n    /* --- Zone Gauche (Badge Version) --- */\n    #pks-hw-version {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n\n        /* Apparence de badge */\n        background: #eef3ff;\n        color: #1976d2;\n        border: 1px solid #d6e4ff;\n\n        font-size: 11px;\n        font-weight: 800;\n        letter-spacing: 0.5px;\n\n        padding: 4px 8px;\n        border-radius: 4px;\n\n        vertical-align: middle;\n        line-height: 1.5;\n\n        /* Masqué par défaut */\n        display: none;\n\n    }\n\n    /* --- Horloge --- */\n    #pks-clock {\n        font-size: 14px;\n        color: #555;\n        opacity: 0.9;\n        white-space: nowrap;\n        user-select: none;\n    }\n\n    /* --- Bouton Machine --- */\n    #pks-machine-button {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        background: #eef3ff;\n        border: 1px solid #d6e4ff;\n        margin-right: 1rem;\n        padding: 6px 10px;\n        border-radius: 6px;\n        cursor: pointer;\n        font-size: 14px;\n        font-weight: 600;\n        color: #1b76d3;\n        transition: background 0.2s;\n    }\n\n    #pks-machine-button:hover {\n        background: #1976d2;\n        color:white;\n    }\n\n    #pks-machine-button i {\n        font-size: 18px;\n        opacity: 0.8;\n    }\n\n    /* --- Dropdown Menu --- */\n    #pks-dropdown {\n        position: fixed !important;\n        top: 64px !important;\n\n        background: #ffffff;\n        border-radius: 0px 0px 6px 6px;\n        width: 250px;\n        border: 1px solid #b6b6b6;\n        display: none;\n        z-index: 999999 !important;\n        padding: 6px 0;\n        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .menu-separator {\n        border-top: 1px solid #cfcfcf;\n        margin: 6px 0;\n    }\n\n    .menu-item {\n        display: flex;\n        align-items: center;\n        padding: 10px 16px;\n        cursor: pointer;\n        color: #333;\n        font-size: 15px;\n    }\n\n    .menu-item:hover {\n        background: #eef3ff;\n    }\n\n    .menu-item i {\n        font-size: 20px;\n        color: #1976d2;\n        margin-right: 10px;\n        width: 22px;\n        text-align: center;\n    }\n\n    .menu-item.reboot i {\n        color: #f57c00;\n    }\n\n    .menu-item.reboot:hover {\n        background: #fef2e6;\n    }\n\n    .menu-item.shutdown i {\n        color: #d32f2f;\n    }\n\n    .menu-item.shutdown:hover {\n        background: #fbeaea;\n    }\n\n    .menu-item .ext {\n        margin-left: auto;\n        font-size: 18px;\n        color: #777;\n    }\n\n    /* --- Loader Modal --- */\n    #pks-modal {\n        display: none;\n        position: fixed;\n        top: 0;\n        right: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 9999999;\n        backdrop-filter: blur(2px);\n        justify-content: center;\n        align-items: center;\n    }\n\n    #pks-modal-box {\n        background: white;\n        padding: 20px 30px;\n        border-radius: 10px;\n        text-align: center;\n        min-width: 260px;\n    }\n\n    #pks-loader {\n        border: 4px solid #ddd;\n        border-top: 4px solid #1976d2;\n        border-radius: 50%;\n        width: 36px;\n        height: 36px;\n        margin: 10px auto;\n        animation: spin 0.9s linear infinite;\n    }\n\n    .v-toolbar__append {\n        margin-inline: 0px;\n    }\n\n    @keyframes spin {\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n\n    #app-bar-actions,\n    #pks-menu-wrapper {\n        flex-shrink: 0 !important;\n    }\n\n    /* Important: S'assurer que le titre prend l'espace nécessaire */\n    .v-toolbar-title {\n        overflow: visible !important;\n        white-space: nowrap;\n    }\n\n    #app-bar {\n        width: 100% !important;\n        max-width: 100% !important;\n    }\n</style>\n\n<script>\n    let scope = this;\n\n    /* Load MDI icons if missing */\n    if (!document.querySelector('link[href*=\"materialdesignicons\"]')) {\n        const mdi = document.createElement(\"link\");\n        mdi.rel = \"stylesheet\";\n        mdi.href = \"https://cdn.materialdesignicons.com/7.4.47/css/materialdesignicons.min.css\";\n        document.head.appendChild(mdi);\n    }\n\n    /* Clock */\n    function updateClock() {\n        const el = document.getElementById(\"pks-clock\");\n        if (!el) return;\n        const now = new Date();\n        const days = [\"Sun.\", \"Mon.\", \"Tue.\", \"Wed.\", \"Thu.\", \"Fri.\", \"Sat.\"];\n        const months = [\"janv.\", \"févr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"août\", \"sept.\", \"oct.\", \"nov.\", \"déc.\"];\n        const d = days[now.getUTCDay()];\n        const day = String(now.getUTCDate()).padStart(2, \"0\");\n        const month = months[now.getUTCMonth()];\n        const year = now.getUTCFullYear();\n        const hh = now.getUTCHours().toString().padStart(2, \"0\");\n        const mm = now.getUTCMinutes().toString().padStart(2, \"0\");\n        el.textContent = `${d} ${day} ${month} ${year} - ${hh}:${mm} (UTC)`;\n    }\n    setInterval(updateClock, 60000);\n\n    /* =========================================================\n       BUILD MENU CONTENT\n    ========================================================= */\n    const PLANKTOSCOPE_LOGO_SVG = `\n        <svg viewBox=\"0 0 52.916666 52.916666\" width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\">\n            <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\" style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                        d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                        fill=\"#076eca\" />    </svg>`;\n\n    function buildMenu(machineName) {\n        const menu = document.getElementById(\"pks-dropdown\");\n        if (!menu) return;\n        menu.innerHTML = `\n            <div class=\"menu-item\" data-href=\"home\">\n                 ${PLANKTOSCOPE_LOGO_SVG.replace('width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\"', 'width=\"20\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"mr-3\"')}\n                <b>Home</b>\n            </div>\n            <div class=\"menu-separator\"></div>\n            <div class=\"menu-item\" data-href=\"preview\"><i class=\"mdi mdi-eye\"></i> Preview</div>\n            <div class=\"menu-item\" data-href=\"visualization\"><i class=\"mdi mdi-chart-scatter-plot-hexbin\"></i> Visualization</div>\n            <div class=\"menu-item\" data-href=\"calibration\"><i class=\"mdi mdi-crosshairs-gps\"></i> Calibration</div>\n            <div class=\"menu-item\" data-external=\"/ps/docs/\"><i class=\"mdi mdi-book-outline\"></i> Documentation <i class=\"mdi mdi-open-in-new ext\"></i></div>\n            <div class=\"menu-separator\"></div>\n            <div class=\"menu-item reboot\" data-action=\"reboot\"><i class=\"mdi mdi-refresh\"></i> Reboot</div>\n            <div class=\"menu-item shutdown\" data-action=\"shutdown\"><i class=\"mdi mdi-power\"></i> Shutdown</div>\n        `;\n    }\n\n    /* =========================================================\n       MODAL LOADER\n    ========================================================= */\n    function showModal(message) {\n        let modal = document.getElementById(\"pks-modal\");\n        if (!modal) {\n            modal = document.createElement(\"div\");\n            modal.id = \"pks-modal\";\n            modal.innerHTML = `<div id=\"pks-modal-box\"><div id=\"pks-loader\"></div><div id=\"pks-modal-text\">${message}</div></div>`;\n            document.body.appendChild(modal);\n        }\n        document.getElementById(\"pks-modal-text\").textContent = message;\n        modal.style.display = \"flex\";\n    }\n\n    function hideModal() {\n        const modal = document.getElementById(\"pks-modal\");\n        if (modal) modal.style.display = \"none\";\n    }\n\n    /* =========================================================\n       INJECT HARDWARE VERSION (LEFT)\n    ========================================================= */\n    function injectHardwareVersion() {\n        // Cible la div principale du titre\n        const titleContainer = document.querySelector(\".v-toolbar-title.v-app-bar-title\"); \n        \n        if (titleContainer) {\n            // S'assure que notre ID d'injection est bien sur le conteneur principal\n            titleContainer.id = \"app-bar-title\";\n            const appBarTitle = titleContainer;\n\n            // --- 1. Suppression de tout placeholder restant (logique précédente) ---\n            const placeholderEl = appBarTitle.querySelector(\".v-toolbar-title__placeholder\");\n            if (placeholderEl) {\n                placeholderEl.remove();\n            }\n\n            // --- 2. Ajout du logo et du texte PlanktoScope (lien vers home) ---\n            if (!document.getElementById(\"pks-logo-link\")) {\n                const logoLink = document.createElement(\"a\");\n                logoLink.id = \"pks-logo-link\";\n                logoLink.href = \"home\";\n                logoLink.innerHTML = `\n                    ${PLANKTOSCOPE_LOGO_SVG.replace('width=\"20\" height=\"20\"', 'width=\"36\" height=\"36\"')}\n                    <span class=\"pks-logo-text\">PlanktoScope</span>\n                `;\n                // On insère le lien du logo en premier enfant\n                appBarTitle.prepend(logoLink);\n            }\n\n            // --- 3. Ajout/Déplacement du badge de version ---\n            if (!document.getElementById(\"pks-hw-version\")) {\n                const verDiv = document.createElement(\"div\");\n                verDiv.id = \"pks-hw-version\";\n                appBarTitle.appendChild(verDiv);\n            }\n        }\n    }\n\n    /* =========================================================\n       INJECT MENU (RIGHT)\n    ========================================================= */\n    function injectMenu() {\n        const zone = document.getElementById(\"app-bar-actions\");\n        if (!zone) return;\n        if (!document.getElementById(\"pks-menu-wrapper\")) {\n            const wrap = document.createElement(\"div\");\n            wrap.id = \"pks-menu-wrapper\";\n            zone.appendChild(wrap);\n        }\n        const wrapper = document.getElementById(\"pks-menu-wrapper\");\n\n        if (!document.getElementById(\"pks-dropdown\")) {\n            const dropdown = document.createElement(\"div\");\n            dropdown.id = \"pks-dropdown\";\n            document.body.appendChild(dropdown);\n        }\n\n        if (!document.getElementById(\"pks-machine-button\")) {\n            wrapper.innerHTML = `\n                <div id=\"pks-clock\"></div>\n                <button id=\"pks-machine-button\">\n                    <i class=\"mdi mdi-desktop-classic\"></i>\n                    <span id=\"pks-machine-name\">Loading..</span>\n                    <i class=\"mdi mdi-menu-down\"></i>\n                </button>\n            `;\n            updateClock();\n        }\n\n        const btn = document.getElementById(\"pks-machine-button\");\n        const menu = document.getElementById(\"pks-dropdown\");\n\n        btn.onclick = (e) => {\n            e.stopPropagation();\n            const rect = btn.getBoundingClientRect();\n            menu.style.top = rect.bottom + \"px\";\n            menu.style.right = \"0px\";\n            menu.style.left = \"auto\";\n            menu.style.display = menu.style.display === \"block\" ? \"none\" : \"block\";\n        };\n\n        menu.onclick = (e) => {\n            const item = e.target.closest(\".menu-item\");\n            if (!item) return;\n            if (item.dataset.href) window.location.href = item.dataset.href;\n            if (item.dataset.external) window.open(item.dataset.external, \"_blank\");\n\n            if (item.dataset.action) {\n                showModal(item.dataset.action === \"reboot\" ? \"Rebooting…\" : \"Shutting down…\");\n                scope.send({ topic: \"action\", payload: item.dataset.action });\n                setTimeout(() => {\n                    window.location.reload();\n                }, 5000);\n            }\n            menu.style.display = \"none\";\n        };\n\n        document.addEventListener(\"click\", (e) => {\n            if (!wrapper.contains(e.target)) menu.style.display = \"none\";\n        });\n    }\n\n    /* DOM observer pour lancer les injections si la structure change */\n    function runInjections() {\n        injectMenu();\n        injectHardwareVersion();\n    }\n\n    const observer = new MutationObserver(() => runInjections());\n    observer.observe(document.body, {\n        childList: true,\n        subtree: true\n    });\n\n    /* =========================================================\n       DATA UPDATES\n    ========================================================= */\n    this.$watch(\"msg\", (msg) => {\n        if (!msg || !msg.payload) return;\n\n        // 1. Update Machine Name (Droite)\n        if (msg.payload.machine_name) {\n            const name = msg.payload.machine_name;\n            const el = document.getElementById(\"pks-machine-name\");\n            if (el) el.textContent = name;\n            buildMenu(name);\n        }\n\n        // 2. Update Hardware Version (Gauche)\n        if (msg.payload.hardware_version) {\n            // On s'assure que l'élément existe\n            injectHardwareVersion();\n\n            const hwEl = document.getElementById(\"pks-hw-version\");\n            if (hwEl) {\n                hwEl.textContent = msg.payload.hardware_version;\n                hwEl.style.display = \"inline-flex\"; // On l'affiche maintenant qu'on a la valeur\n            }\n        }\n\n        runInjections();\n    });\n\n    setTimeout(runInjections, 200);\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "widget:ui",
+        "className": "",
+        "x": 820,
+        "y": 240,
+        "wires": [
+            [
+                "1db1c2e3e19e85ff"
+            ]
+        ]
+    },
     {
         "id": "a57a165cd0ce511b",
         "type": "ui-template",
@@ -2435,7 +2639,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text><!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        LED Control\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card variant=\"tonal\">\n      <v-card-title>\n        <v-icon class=\"mr-2\" color=\"primary\" size=\"large\">mdi-tune</v-icon>\n        Calibration\n      </v-card-title>\n      <v-card-text>\n        Modify your camera settings through the\n        <a href=\"calibration\" style=\"color: primary; text-decoration: underline;\">\n          calibration page\n        </a>.\n        Adjust optical parameters to ensure accurate imaging.\n      </v-card-text>\n    </v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text><!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        LED Control\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n<v-card \n          variant=\"flat\"\n          color=\"grey-darken-3\"> <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3124,7 +3328,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input mr-1\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon color=\"primary\" class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"plain\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly \n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"HH:MM:SS\"\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4175,29 +4379,45 @@
         ]
     },
     {
-        "id": "e8fbb01b7a38c29a",
-        "type": "ui-template",
+        "id": "8dc194f764cd61ef",
+        "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "group": "bdf41008b379e80e",
-        "page": "",
-        "ui": "",
-        "name": "Gemini 3 Pro v1",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-4 grey lighten-5\" style=\"min-height: 100vh; color:#333;\">\n\n    <v-row v-if=\"!hasData\" align=\"center\" justify=\"center\" style=\"height:80vh;\">\n      <div class=\"text-center\">\n        <v-progress-circular indeterminate color=\"primary\" size=\"64\"></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text text--darken-2 font-weight-light\">\n          Analyzing PlanktoScope Data...\n        </div>\n        <div class=\"caption grey--text\">Waiting for JSON payload</div>\n      </div>\n    </v-row>\n\n    <div v-else>\n\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"12\">\n          <v-card outlined class=\"pa-0 overflow-hidden\">\n            <v-sheet color=\"primary\" class=\"pa-2 pl-4 d-flex align-center dark white--text\">\n              <v-icon left color=\"white\">mdi-chart-scatter-plot-hexbin</v-icon>\n              <div class=\"text-subtitle-1 font-weight-bold text-uppercase\">\n                PlanktoScope Analytics\n              </div>\n              <v-spacer></v-spacer>\n              <div class=\"caption mr-4 hidden-sm-and-down\">\n                <span class=\"white--text text--lighten-3\">Project:</span> {{ safeHeader.sample_project }}\n                <span class=\"mx-2\">|</span>\n                <span class=\"white--text text--lighten-3\">Sample:</span> {{ safeHeader.sample_id }}\n              </div>\n            </v-sheet>\n            \n            <div class=\"pa-2 d-flex align-center flex-wrap grey lighten-5\">\n              <v-chip small outlined class=\"mr-2 my-1\" color=\"blue-grey\">\n                <v-icon left x-small>mdi-ruler-square</v-icon>\n                {{ formatNum(safeHeader.process_pixel, 3) }} µm/px\n              </v-chip>\n              <v-chip small outlined class=\"mr-2 my-1\" color=\"blue-grey\">\n                 <v-icon left x-small>mdi-water</v-icon>\n                 Vol: {{ formatNum(safeHeader.volume_used, 2) }} mL\n              </v-chip>\n              \n              <v-spacer></v-spacer>\n\n              <v-btn small text color=\"primary\" :href=\"ecotaxaLink\" target=\"_blank\" v-if=\"safeHeader.acq_id !== 'N/A'\">\n                <v-icon left small>mdi-cloud-download-outline</v-icon> EcoTaxa\n              </v-btn>\n              <v-btn small text color=\"grey darken-2\" @click=\"downloadCSV\">\n                <v-icon left small>mdi-file-delimited-outline</v-icon> CSV\n              </v-btn>\n              <v-btn small text color=\"deep-orange\" @click=\"resetFilters\">\n                <v-icon left small>mdi-refresh</v-icon> Reset\n              </v-btn>\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 fill-height d-flex flex-column justify-center border-left-primary\">\n             <div class=\"caption grey--text text-uppercase font-weight-bold\">Total Objects</div>\n             <div class=\"d-flex align-baseline\">\n               <span class=\"text-h4 font-weight-bold mr-2\">{{ filteredObjects.length }}</span>\n               <span class=\"caption grey--text\">/ {{ cleanObjects.length }}</span>\n             </div>\n          </v-card>\n        </v-col>\n        \n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 fill-height d-flex flex-column justify-center border-left-info\">\n             <div class=\"caption blue--text text--darken-2 text-uppercase font-weight-bold\">Abundance</div>\n             <div class=\"d-flex align-baseline\">\n               <span class=\"text-h4 font-weight-bold blue--text text--darken-2 mr-2\">{{ formatNum(abundance, 1) }}</span>\n               <span class=\"caption blue--text\">ind./mL</span>\n             </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"6\">\n          <v-card outlined class=\"fill-height pa-0\">\n            <v-row no-gutters class=\"fill-height\">\n              <v-col cols=\"3\" class=\"pa-2 text-center border-right\">\n                <div class=\"caption green--text font-weight-bold\">Filaments</div>\n                <div class=\"text-h6\">{{ counts.filament }}</div>\n              </v-col>\n              <v-col cols=\"3\" class=\"pa-2 text-center border-right\">\n                <div class=\"caption brown--text font-weight-bold\">Detritus</div>\n                <div class=\"text-h6\">{{ counts.detritus }}</div>\n              </v-col>\n              <v-col cols=\"3\" class=\"pa-2 text-center border-right\">\n                <div class=\"caption red--text font-weight-bold\">Dense</div>\n                <div class=\"text-h6\">{{ counts.dense }}</div>\n              </v-col>\n              <v-col cols=\"3\" class=\"pa-2 text-center\">\n                <div class=\"caption grey--text font-weight-bold\">Bubbles</div>\n                <div class=\"text-h6\">{{ counts.bubble }}</div>\n              </v-col>\n            </v-row>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <v-row>\n        <v-col cols=\"12\" md=\"3\" lg=\"2\">\n          <v-card outlined class=\"sticky-top\">\n            <v-subheader class=\"font-weight-bold text-uppercase caption grey--text\">Filters & Clusters</v-subheader>\n            \n            <v-card-text class=\"pt-0\">\n              <v-select\n                v-model=\"filters.cluster\"\n                :items=\"clusterOptions\"\n                label=\"Filter by Cluster\"\n                dense outlined\n                class=\"mb-4 caption\"\n                hide-details\n              ></v-select>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold mt-2\">\n                <span>Size (ESD)</span><span>{{ Math.round(filters.esd[0]) }}-{{ Math.round(filters.esd[1]) }}</span>\n              </div>\n              <v-range-slider v-model=\"filters.esd\" :min=\"sliderStats.min\" :max=\"sliderStats.max\" dense hide-details class=\"mt-1 mb-4\"></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Circularity</span><span>{{ filters.circ[0] }}-{{ filters.circ[1] }}</span>\n              </div>\n              <v-range-slider v-model=\"filters.circ\" :min=\"0\" :max=\"1\" :step=\"0.05\" dense hide-details class=\"mt-1 mb-4\"></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Density (Gray Val)</span>\n              </div>\n              <v-range-slider v-model=\"filters.val\" :min=\"0\" :max=\"255\" :step=\"5\" dense hide-details class=\"mt-1 mb-4\"></v-range-slider>\n            </v-card-text>\n            \n            <v-divider></v-divider>\n            \n            <div class=\"pa-2\">\n              <div class=\"caption text-center mb-1 grey--text\">Cluster Distribution</div>\n              <div style=\"height: 140px; width: 100%;\">\n                <canvas ref=\"chartPie\"></canvas>\n              </div>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"6\" lg=\"7\">\n          \n          <v-card outlined class=\"mb-3\">\n            <v-card-title class=\"subtitle-2 py-2\">\n              Morpho-Clustering Map\n              <v-spacer></v-spacer>\n              <v-icon small color=\"grey\" title=\"X=Circularity, Y=Elongation (Log Scale)\">mdi-information-outline</v-icon>\n            </v-card-title>\n            <v-card-text>\n              <div style=\"height: 280px; width: 100%;\">\n                <canvas ref=\"chartCluster\"></canvas>\n              </div>\n            </v-card-text>\n          </v-card>\n\n          <v-card outlined>\n             <v-toolbar flat dense color=\"grey lighten-4\">\n               <v-toolbar-title class=\"subtitle-2\">\n                 Gallery ({{ filteredObjects.length }})\n               </v-toolbar-title>\n               <v-spacer></v-spacer>\n               <v-select\n                v-model=\"gallerySort\"\n                :items=\"sortOptions\"\n                item-text=\"text\" item-value=\"value\"\n                dense outlined hide-details\n                style=\"max-width: 180px;\"\n                class=\"caption bg-white\"\n                label=\"Sort by\"\n              ></v-select>\n             </v-toolbar>\n            \n            <v-card-text class=\"pa-2\" style=\"min-height: 200px;\">\n              <div v-if=\"!filteredObjects.length\" class=\"d-flex flex-column align-center justify-center py-5 grey--text\">\n                <v-icon large color=\"grey lighten-2\">mdi-image-off-outline</v-icon>\n                <div class=\"mt-2 caption\">No objects match current gates.</div>\n              </div>\n              \n              <div class=\"gallery-grid\">\n                <div v-for=\"obj in paginatedObjects\" :key=\"obj.object_id\" \n                     class=\"gallery-item\" \n                     :class=\"{'selected': selectedId === obj.object_id, 'g-filament': obj.group === 'Filament', 'g-bubble': obj.group === 'Bubble', 'g-dense': obj.group === 'Dense'}\" \n                     @click=\"selectedId = obj.object_id\">\n                  <v-img :src=\"getImageUrl(obj)\" aspect-ratio=\"1\" contain class=\"white rounded elevation-1\">\n                    <template v-slot:placeholder><v-row class=\"fill-height ma-0\" align=\"center\" justify=\"center\"><v-progress-circular indeterminate size=\"20\" width=\"2\" color=\"grey lighten-3\"></v-progress-circular></v-row></template>\n                  </v-img>\n                </div>\n              </div>\n              <div v-if=\"filteredObjects.length > 200\" class=\"text-center caption mt-2 grey--text\">\n                + {{ filteredObjects.length - 200 }} more objects...\n              </div>\n            </v-card-text>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"12\" md=\"3\" lg=\"3\">\n          <v-card outlined class=\"sticky-top\">\n            <v-card-title class=\"subtitle-2 grey lighten-4 py-2\">\n              Identity Card\n            </v-card-title>\n            \n            <div v-if=\"selectedObject\">\n              <div class=\"pa-3 text-center grey lighten-5 border-bottom\">\n                <v-chip x-small class=\"mb-2 font-weight-bold white--text\" :color=\"getGroupColor(selectedObject.group)\">\n                  {{ selectedObject.group.toUpperCase() }}\n                </v-chip>\n                <v-img :src=\"getImageUrl(selectedObject)\" max-height=\"180\" contain class=\"mx-auto mb-2 rounded\"></v-img>\n                <div class=\"caption text-truncate font-weight-medium\">{{ selectedObject.object_id }}</div>\n              </div>\n              \n              <v-list dense class=\"pa-0\">\n                <v-list-item>\n                  <v-list-item-icon class=\"mr-2\"><v-icon small>mdi-arrow-expand-all</v-icon></v-list-item-icon>\n                  <v-list-item-content>\n                    <v-list-item-title class=\"caption grey--text\">Size (ESD)</v-list-item-title>\n                    <v-list-item-subtitle class=\"font-weight-bold text--primary\">{{ formatNum(selectedObject.esd_um, 1) }} µm</v-list-item-subtitle>\n                  </v-list-item-content>\n                </v-list-item>\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content>\n                    <div class=\"d-flex justify-space-between caption mb-1\">\n                      <span class=\"grey--text\">Circularity</span>\n                      <span class=\"font-weight-bold\">{{ formatNum(selectedObject.circ, 3) }}</span>\n                    </div>\n                    <v-progress-linear :value=\"selectedObject.circ * 100\" height=\"6\" rounded color=\"blue\"></v-progress-linear>\n                  </v-list-item-content>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content>\n                    <div class=\"d-flex justify-space-between caption mb-1\">\n                      <span class=\"grey--text\">Solidity</span>\n                      <span class=\"font-weight-bold\">{{ formatNum(selectedObject.solidity, 2) }}</span>\n                    </div>\n                    <v-progress-linear :value=\"selectedObject.solidity * 100\" height=\"6\" rounded color=\"orange\"></v-progress-linear>\n                  </v-list-item-content>\n                </v-list-item>\n\n                <v-list-item class=\"d-block\">\n                   <v-row dense class=\"caption mt-1\">\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Elongation</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.elongation, 1) }}</div>\n                     </v-col>\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Density (Gray)</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.val, 0) }}</div>\n                     </v-col>\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Width</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.width_um, 0) }} µm</div>\n                     </v-col>\n                     <v-col cols=\"6\">\n                       <div class=\"grey--text\">Height</div>\n                       <div class=\"font-weight-bold\">{{ formatNum(selectedObject.height_um, 0) }} µm</div>\n                     </v-col>\n                   </v-row>\n                </v-list-item>\n              </v-list>\n            </div>\n            \n            <div v-else class=\"pa-5 text-center grey--text caption\">\n              <v-icon large class=\"mb-2 text--disabled\">mdi-cursor-default-click-outline</v-icon>\n              <br>Select an object in the gallery to view details.\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      filters: { esd: [0, 2000], circ: [0, 1], val: [0, 255], cluster: 'All' },\n      clusterOptions: ['All', 'Filament', 'Bubble', 'Detritus', 'Dense', 'Other'],\n      sortOptions: [\n        { text: 'Size (Desc)', value: 'esd_desc' }, \n        { text: 'Solidity (Asc)', value: 'sol_asc' },\n        { text: 'Darkest (Val)', value: 'val_asc' }\n      ],\n      gallerySort: 'esd_desc',\n      selectedId: null,\n      charts: { cluster: null, pie: null }\n    }\n  },\n\n  computed: {\n    hasData() { return this.msg && Array.isArray(this.msg.payload) && this.msg.payload.length > 1; },\n    \n    // === DATA CLEANING & CLUSTERING ENGINE ===\n    cleanObjects() {\n      if (!this.hasData) return [];\n      \n      // Filter out metadata rows\n      return this.msg.payload\n        .filter(o => o.object_id !== '[t]' && o.acq_id !== '[t]' && !String(o.object_equivalent_diameter).includes('[f]'))\n        .map(o => {\n          // 1. Unit conversion\n          const px = Number(o.process_pixel || this.msg.process_pixel) || 1;\n          \n          const obj = {\n            ...o,\n            esd_um: (Number(o.object_equivalent_diameter) || 0) * px,\n            width_um: (Number(o.object_width) || 0) * px,\n            height_um: (Number(o.object_height) || 0) * px,\n            circ: Number(o['object_circ.']) || 0,\n            val: Number(o.object_MeanValue) || 0,\n            solidity: Number(o.object_solidity) || 0,\n            elongation: Number(o.object_elongation) || 1,\n          };\n\n          // 2. CLUSTERING LOGIC\n          obj.group = this.determineGroup(obj);\n          return obj;\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    // Dynamic counters for Header\n    counts() {\n      const c = { filament:0, bubble:0, detritus:0, dense:0, other:0 };\n      this.cleanObjects.forEach(o => {\n        const key = o.group.toLowerCase();\n        if(c[key] !== undefined) c[key]++;\n        else c.other++;\n      });\n      return c;\n    },\n\n    safeHeader() {\n      if (!this.cleanObjects.length) return { sample_id:'?', volume_used:1, process_pixel:1 };\n      const obj = this.cleanObjects[0];\n      const imgVol = Number(obj.acq_imaged_volume) || 0;\n      const pumpVol = Number(obj.acq_pumped_volume) || 0;\n      return {\n        sample_project: obj.sample_project || 'Unknown',\n        sample_id: obj.sample_id || 'Unknown',\n        acq_id: obj.acq_id || 'N/A',\n        volume_used: imgVol > 0 ? imgVol : (pumpVol > 0 ? pumpVol : 1),\n        process_pixel: Number(obj.process_pixel || 1)\n      };\n    },\n\n    ecotaxaLink() {\n      return this.safeHeader.acq_id !== 'N/A' ? `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.safeHeader.acq_id}.zip` : '#';\n    },\n\n    sliderStats() {\n      if (!this.cleanObjects.length) return { min:0, max:100 };\n      const vals = this.cleanObjects.map(o => o.esd_um);\n      let min = Math.floor(Math.min(...vals));\n      let max = Math.ceil(Math.max(...vals));\n      if(min>=max) max=min+10;\n      return { min, max };\n    },\n\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        const sizeOk = o.esd_um >= f.esd[0] && o.esd_um <= f.esd[1];\n        const circOk = o.circ >= f.circ[0] && o.circ <= f.circ[1];\n        const valOk = o.val >= f.val[0] && o.val <= f.val[1];\n        const clusterOk = f.cluster === 'All' || o.group === f.cluster;\n        return sizeOk && circOk && valOk && clusterOk;\n      });\n    },\n\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n      arr.sort((a, b) => {\n        if(this.gallerySort === 'esd_desc') return b.esd_um - a.esd_um;\n        if(this.gallerySort === 'sol_asc') return a.solidity - b.solidity;\n        if(this.gallerySort === 'val_asc') return a.val - b.val;\n        return b.esd_um - a.esd_um;\n      });\n      return arr.slice(0, 200);\n    },\n\n    selectedObject() { return this.filteredObjects.find(o => o.object_id === this.selectedId) || null; },\n    abundance() { return this.filteredObjects.length / this.safeHeader.volume_used; }\n  },\n\n  watch: {\n    msg: { \n      handler() { this.init(); }, \n      deep: true \n    },\n    filteredObjects() { this.updateCharts(); }\n  },\n\n  mounted() { this.init(); },\n\n  methods: {\n    init() {\n      if(this.hasData) {\n        this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n        this.updateCharts();\n      }\n    },\n    \n    formatNum(v, d) { return (Number(v)||0).toFixed(d); },\n    getImageUrl(o) { return o ? `/ps/data/browse/api/preview/big/objects/${o.object_date || 'date'}/${o.sample_id || 'sample'}/${o.acq_id || 'acq'}/${o.img_file_name}` : ''; },\n\n    // === CLUSTERING LOGIC ===\n    determineGroup(o) {\n      if (o.elongation > 3.5) return 'Filament';\n      if (o.circ > 0.85 && o.solidity > 0.95) return 'Bubble';\n      if (o.solidity < 0.75) return 'Detritus';\n      if (o.val < 100 && o.solidity > 0.85) return 'Dense';\n      return 'Other';\n    },\n\n    getGroupColor(g) {\n      const colors = { 'Filament':'#4CAF50', 'Bubble':'#9E9E9E', 'Detritus':'#795548', 'Dense':'#F44336', 'Other':'#2196F3' };\n      return colors[g] || '#000';\n    },\n\n    resetFilters() {\n      this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n      this.filters.cluster = 'All';\n      this.filters.circ = [0, 1];\n      this.filters.val = [0, 255];\n    },\n    \n    downloadCSV() {\n       if (!this.filteredObjects.length) return;\n       const headers = Object.keys(this.filteredObjects[0]);\n       const csv = [\n         headers.join(','),\n         ...this.filteredObjects.map(r => headers.map(c => JSON.stringify(r[c]||'')).join(','))\n       ].join('\\n');\n       const blob = new Blob([csv], { type: 'text/csv' });\n       const url = URL.createObjectURL(blob);\n       const a = document.createElement('a');\n       a.href = url; a.download = `${this.safeHeader.acq_id}_export.csv`;\n       a.click();\n    },\n\n    updateCharts() { setTimeout(() => { this.$nextTick(this.renderCharts); }, 250); },\n\n    renderCharts() {\n      this.renderClusterMap();\n      this.renderPie();\n    },\n\n    renderPie() {\n      const ctx = this.$refs.chartPie;\n      if(!ctx) return;\n      if(this.charts.pie) this.charts.pie.destroy();\n\n      const c = this.counts;\n      this.charts.pie = new Chart(ctx, {\n        type: 'doughnut',\n        data: {\n          labels: ['Filament', 'Dense', 'Detritus', 'Bubble', 'Other'],\n          datasets: [{\n            data: [c.filament, c.dense, c.detritus, c.bubble, c.other],\n            backgroundColor: ['#4CAF50', '#F44336', '#795548', '#9E9E9E', '#2196F3'],\n            borderWidth: 1\n          }]\n        },\n        options: { \n          responsive: true, maintainAspectRatio: false,\n          plugins: { legend: { display: false } },\n          cutout: '65%'\n        }\n      });\n    },\n\n    renderClusterMap() {\n      const ctx = this.$refs.chartCluster;\n      if(!ctx) return;\n      if(this.charts.cluster) this.charts.cluster.destroy();\n\n      // PREPARE SEPARATE DATASETS (For auto-legend)\n      const groups = {\n        Filament: [], Dense: [], Detritus: [], Bubble: [], Other: []\n      };\n      \n      this.filteredObjects.forEach(o => {\n        if(groups[o.group]) groups[o.group].push({ x: o.circ, y: o.elongation });\n        else groups['Other'].push({ x: o.circ, y: o.elongation });\n      });\n\n      this.charts.cluster = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            { label:'Filament', data: groups.Filament, backgroundColor: '#4CAF50', pointRadius: 3 },\n            { label:'Dense', data: groups.Dense, backgroundColor: '#F44336', pointRadius: 3 },\n            { label:'Detritus', data: groups.Detritus, backgroundColor: '#795548', pointRadius: 2 },\n            { label:'Bubbles', data: groups.Bubble, backgroundColor: '#9E9E9E', pointRadius: 2 },\n            { label:'Other', data: groups.Other, backgroundColor: '#2196F3', pointRadius: 2 }\n          ]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          plugins: { \n            legend: { display: true, position: 'bottom', labels: { usePointStyle: true, padding: 15 } } \n          },\n          scales: {\n            x: { title: {display: true, text:'Circularity'}, min:0, max:1.1 },\n            y: { title: {display: true, text:'Elongation (Log)'}, type: 'logarithmic', min: 1 } \n          }\n        }\n      });\n    }\n  }\n}\n</script>\n\n<style scoped>\n/* BORDER ACCENTS FOR CARDS */\n.border-left-primary { border-left: 4px solid #1976D2 !important; }\n.border-left-info { border-left: 4px solid #03A9F4 !important; }\n.border-right { border-right: 1px solid #eee; }\n.border-bottom { border-bottom: 1px solid #eee; }\n\n/* GALLERY STYLES */\n.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }\n.gallery-item { cursor: pointer; border: 2px solid transparent; transition: all 0.2s; opacity: 0.9; }\n.gallery-item:hover { transform: scale(1.1); z-index: 10; opacity: 1; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }\n.gallery-item.selected { border-color: #1976D2; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.2); }\n\n/* Color hints under gallery items */\n.g-filament { border-bottom: 3px solid #4CAF50; }\n.g-bubble { border-bottom: 3px solid #9E9E9E; }\n.g-dense { border-bottom: 3px solid #F44336; }\n\n.sticky-top { position: sticky; top: 12px; z-index: 5; }\n</style>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1280,
-        "y": 320,
+        "name": "function 1",
+        "func": "// Vérifie que payload est un tableau\nif (Array.isArray(msg.payload)) {\n    // Supprime la première entrée du tableau\n    msg.payload = msg.payload.slice(1);\n}\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 900,
+        "y": 420,
         "wires": [
-            []
+            [
+                "687050b30c8d78f3",
+                "86bff301d6790945",
+                "ddac1dedf1ed0bb3",
+                "mega_plankto_v3"
+            ]
         ]
     },
+    {
+        "id": "687050b30c8d78f3",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 6",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1260,
+        "y": 580,
+        "wires": []
+    },
     {
         "id": "86bff301d6790945",
         "type": "ui-template",
@@ -4217,77 +4437,11 @@
         "templateScope": "local",
         "className": "",
         "x": 1300,
-        "y": 240,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "c42d0eb4a7bc6eb4",
-        "type": "ui-template",
-        "z": "14f8c9b5ce1235cc",
-        "group": "e3bd8883700f1ab8",
-        "page": "",
-        "ui": "",
-        "name": "ChatGPT 5.1 Pro v2",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-2 dashboard-root\">\n    <v-row dense>\n      <v-col cols=\"12\">\n        <v-card class=\"mb-2\" outlined>\n          <v-card-text>\n            <v-row align=\"center\" justify=\"space-between\" no-gutters>\n              <v-col cols=\"12\" md=\"4\">\n                <div class=\"text-h6 font-weight-medium\">\n                  {{ headerProjectName || 'No project' }}\n                </div>\n                <div class=\"caption grey--text\">\n                  Sample:\n                  <span class=\"font-weight-medium\">{{ headerSampleId || 'N/A' }}</span>\n                  <span v-if=\"headerLocalDateTime\"> • {{ headerLocalDateTime }}</span>\n                </div>\n              </v-col>\n              <v-col cols=\"12\" md=\"4\">\n                <div class=\"d-flex flex-wrap\">\n                  <v-chip small class=\"mr-2 mb-1\" color=\"primary\" text-color=\"white\">\n                    {{ pixelSizeDisplay }}\n                  </v-chip>\n                  <v-chip small class=\"mr-2 mb-1\" color=\"teal\" text-color=\"white\">\n                    {{ volumeDisplay }}\n                  </v-chip>\n                  <v-chip small class=\"mr-2 mb-1\" color=\"indigo\" text-color=\"white\" v-if=\"cameraDisplay\">\n                    {{ cameraDisplay }}\n                  </v-chip>\n                </div>\n              </v-col>\n              <v-col cols=\"12\" md=\"4\">\n                <div class=\"d-flex justify-end flex-wrap mt-2 mt-md-0\">\n                  <v-btn\n                    small\n                    class=\"mr-2 mb-1\"\n                    :href=\"ecoTaxaUrl\"\n                    target=\"_blank\"\n                    :disabled=\"!ecoTaxaUrl\"\n                    color=\"primary\"\n                    outlined\n                  >\n                    <v-icon left small>mdi-zip-box</v-icon>\n                    EcoTaxa ZIP\n                  </v-btn>\n                  <v-btn\n                    small\n                    class=\"mr-2 mb-1\"\n                    @click=\"exportCsv\"\n                    color=\"primary\"\n                    outlined\n                  >\n                    <v-icon left small>mdi-download</v-icon>\n                    CSV\n                  </v-btn>\n                  <v-btn\n                    small\n                    class=\"mb-1\"\n                    @click=\"resetFilters\"\n                    color=\"secondary\"\n                    text\n                  >\n                    <v-icon left small>mdi-restore</v-icon>\n                    Reset\n                  </v-btn>\n                </div>\n              </v-col>\n            </v-row>\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n```\n  <v-col cols=\"12\">\n    <v-row dense>\n      <v-col cols=\"12\" sm=\"4\" md=\"2\" v-for=\"kpi in kpiCards\" :key=\"kpi.key\">\n        <v-card class=\"kpi-card\" outlined>\n          <div class=\"kpi-border\" :class=\"'kpi-border--' + kpi.key\"></div>\n          <v-card-text class=\"py-2\">\n            <div class=\"caption text-uppercase grey--text text--darken-1\">\n              {{ kpi.label }}\n            </div>\n            <div class=\"d-flex align-center justify-space-between\">\n              <div class=\"text-h5 font-weight-medium\">{{ kpi.value }}</div>\n              <div class=\"caption grey--text\" v-if=\"kpi.sub\">{{ kpi.sub }}</div>\n            </div>\n          </v-card-text>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-col>\n</v-row>\n\n<v-row dense>\n  <v-col cols=\"12\" md=\"3\" lg=\"2\">\n    <v-card class=\"sticky-card\" outlined>\n      <v-card-title class=\"py-2\">\n        <span class=\"subtitle-2 font-weight-medium\">Filters</span>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div class=\"mb-3\">\n          <div class=\"caption grey--text text--darken-1 d-flex justify-space-between\">\n            <span>ESD (µm)</span>\n            <span>{{ formatNumber(esdRange[0]) }} – {{ formatNumber(esdRange[1]) }}</span>\n          </div>\n          <v-range-slider\n            v-model=\"esdRange\"\n            :min=\"minEsd\"\n            :max=\"maxEsd\"\n            :step=\"(maxEsd - minEsd) / 50 || 1\"\n            hide-details\n            dense\n          ></v-range-slider>\n        </div>\n\n        <div class=\"mb-3\">\n          <div class=\"caption grey--text text--darken-1 d-flex justify-space-between\">\n            <span>Circularity</span>\n            <span>{{ formatNumber(circularityRange[0]) }} – {{ formatNumber(circularityRange[1]) }}</span>\n          </div>\n          <v-range-slider\n            v-model=\"circularityRange\"\n            :min=\"minCircularity\"\n            :max=\"maxCircularity\"\n            :step=\"0.01\"\n            hide-details\n            dense\n          ></v-range-slider>\n        </div>\n\n        <div class=\"mb-3\">\n          <div class=\"caption grey--text text--darken-1 mb-1\">\n            Cluster\n          </div>\n          <v-select\n            dense\n            outlined\n            hide-details\n            :items=\"clusterOptions\"\n            v-model=\"selectedCluster\"\n          ></v-select>\n        </div>\n\n        <div class=\"mt-3\">\n          <div class=\"caption mb-1 grey--text text--darken-1\">\n            Cluster distribution\n          </div>\n          <div class=\"cluster-pie-wrapper\">\n            <canvas ref=\"clusterPieCanvas\"></canvas>\n          </div>\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n\n  <v-col cols=\"12\" md=\"6\" lg=\"7\">\n    <v-card class=\"mb-2\" outlined>\n      <v-card-title class=\"py-2\">\n        <span class=\"subtitle-2 font-weight-medium\">Morphology descriptors</span>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div class=\"mb-3\">\n          <div class=\"caption mb-1 grey--text text--darken-1\">\n            Circularity vs Elongation\n          </div>\n          <div class=\"chart-container scatter-container\">\n            <canvas ref=\"scatterCanvas\"></canvas>\n          </div>\n        </div>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <div>\n          <div class=\"caption mb-1 grey--text text--darken-1\">\n            ESD distribution (µm)\n          </div>\n          <div class=\"chart-container\">\n            <canvas ref=\"esdHistCanvas\"></canvas>\n          </div>\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n\n  <v-col cols=\"12\" md=\"3\" lg=\"3\">\n    <v-card class=\"sticky-card mb-2\" outlined>\n      <v-card-title class=\"py-2\">\n        <span class=\"subtitle-2 font-weight-medium\">Object inspector</span>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div v-if=\"selectedObject\">\n          <div class=\"mb-2 d-flex align-center justify-space-between\">\n            <div>\n              <div class=\"subtitle-2 font-weight-medium\">\n                ID {{ selectedObject.object_id || selectedObject._uid }}\n              </div>\n              <div class=\"caption grey--text text--darken-1\">\n                {{ selectedObject.sample_id || headerSampleId || 'N/A' }}\n                •\n                {{ selectedObject.acq_id || headerAcqId || 'N/A' }}\n              </div>\n            </div>\n            <v-chip\n              small\n              :color=\"clusterColor(selectedObject.clusterCanonical)\"\n              text-color=\"white\"\n            >\n              {{ selectedObject.clusterCanonical }}\n            </v-chip>\n          </div>\n\n          <div v-if=\"getObjectImageUrl(selectedObject)\" class=\"inspector-image-wrapper mb-2\">\n            <v-img\n              :src=\"getObjectImageUrl(selectedObject)\"\n              :aspect-ratio=\"1\"\n              contain\n              class=\"inspector-img\"\n              ref=\"inspectorImage\"\n              @load=\"onInspectorImageLoad\"\n            ></v-img>\n            <div v-if=\"scaleBarVisible\" class=\"scale-bar\">\n              <div class=\"scale-bar-line\" :style=\"{ width: scaleBarCssWidth + 'px' }\"></div>\n              <div class=\"scale-bar-label\">{{ scaleBarMicronsLabel }}</div>\n            </div>\n          </div>\n          <div\n            v-else\n            class=\"inspector-placeholder mb-2 d-flex align-center justify-center caption grey--text\"\n          >\n            No preview available\n          </div>\n\n          <div v-if=\"getObjectImageUrl(selectedObject)\" class=\"mb-2 d-flex justify-end\">\n            <v-btn\n              small\n              outlined\n              color=\"primary\"\n              :href=\"getObjectImageUrl(selectedObject)\"\n              :download=\"downloadFileName(selectedObject)\"\n              target=\"_blank\"\n            >\n              <v-icon left small>mdi-download</v-icon>\n              Télécharger l'image\n            </v-btn>\n          </div>\n\n          <v-row dense class=\"mb-2\">\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">ESD</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.esd_um) }} µm\n              </div>\n            </v-col>\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">Area</div>\n              <div class=\"subtitle-2\">\n                <span v-if=\"selectedObject.area_um2\">\n                  {{ formatNumber(selectedObject.area_um2) }} µm²\n                </span>\n                <span v-else>N/A</span>\n              </div>\n            </v-col>\n          </v-row>\n\n          <v-row dense class=\"mb-2\">\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">Circularity</div>\n              <div class=\"subtitle-2 mb-1\">\n                {{ formatNumber(selectedObject.circularity) }}\n              </div>\n              <v-progress-linear\n                :value=\"metricToPercent(selectedObject.circularity)\"\n                height=\"5\"\n              ></v-progress-linear>\n            </v-col>\n            <v-col cols=\"6\">\n              <div class=\"caption grey--text text--darken-1\">Solidity</div>\n              <div class=\"subtitle-2 mb-1\">\n                {{ formatNumber(selectedObject.solidity) }}\n              </div>\n              <v-progress-linear\n                :value=\"metricToPercent(selectedObject.solidity)\"\n                height=\"5\"\n                color=\"deep-purple\"\n              ></v-progress-linear>\n            </v-col>\n          </v-row>\n\n          <v-row dense class=\"mb-2\">\n            <v-col cols=\"4\">\n              <div class=\"caption grey--text text--darken-1\">Elongation</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.elongation) }}\n              </div>\n            </v-col>\n            <v-col cols=\"4\">\n              <div class=\"caption grey--text text--darken-1\">Width</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.width_um) }} µm\n              </div>\n            </v-col>\n            <v-col cols=\"4\">\n              <div class=\"caption grey--text text--darken-1\">Height</div>\n              <div class=\"subtitle-2\">\n                {{ formatNumber(selectedObject.height_um) }} µm\n              </div>\n            </v-col>\n          </v-row>\n        </div>\n        <div v-else class=\"text-center caption grey--text py-6\">\n          Select an object from the gallery to inspect its details.\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n</v-row>\n\n<v-row dense class=\"mt-2\">\n  <v-col cols=\"12\">\n    <v-card outlined>\n      <v-card-title class=\"py-2\">\n        <div class=\"d-flex align-center justify-space-between flex-wrap w-100\">\n          <div class=\"subtitle-2 font-weight-medium\">\n            Objects gallery\n          </div>\n          <div class=\"d-flex align-center\">\n            <v-select\n              dense\n              outlined\n              hide-details\n              class=\"mr-2 gallery-sort-select\"\n              style=\"max-width: 220px;\"\n              :items=\"gallerySortOptions\"\n              v-model=\"gallerySortKey\"\n            ></v-select>\n            <div class=\"caption grey--text\">\n              {{ visibleObjects.length }} / {{ filteredObjects.length }} visible\n            </div>\n          </div>\n        </div>\n      </v-card-title>\n      <v-divider></v-divider>\n      <v-card-text class=\"py-2\">\n        <div v-if=\"visibleObjects.length\" class=\"gallery-grid\">\n          <div\n            v-for=\"obj in visibleObjects\"\n            :key=\"obj._uid\"\n            class=\"gallery-item\"\n            :class=\"['cluster-' + obj.clusterCanonical, { 'gallery-item--selected': selectedObject && selectedObject._uid === obj._uid }]\"\n            @click=\"selectObject(obj)\"\n          >\n            <v-img\n              v-if=\"getObjectImageUrl(obj)\"\n              :src=\"getObjectImageUrl(obj)\"\n              :aspect-ratio=\"1\"\n              contain\n              class=\"gallery-img\"\n            ></v-img>\n            <div\n              v-else\n              class=\"gallery-placeholder d-flex align-center justify-center caption grey--text\"\n            >\n              No image\n            </div>\n            <div class=\"gallery-meta\">\n              <div class=\"caption\">{{ formatNumber(obj.esd_um) }} µm</div>\n              <div class=\"caption grey--text text--darken-1\">\n                {{ obj.clusterCanonical }}\n              </div>\n            </div>\n          </div>\n        </div>\n        <div v-else class=\"text-center caption grey--text py-4\">\n          No objects match current filters.\n        </div>\n      </v-card-text>\n    </v-card>\n  </v-col>\n</v-row>\n```\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: {\n    msg: {\n      type: Object,\n      default: function () {\n        return {};\n      }\n    }\n  },\n  data: function () {\n    return {\n      esdRange: [0, 0],\n      circularityRange: [0, 1],\n      selectedCluster: 'All',\n      gallerySortKey: 'ESD ↓ (largest first)',\n      charts: {\n        clusterPie: null,\n        scatter: null,\n        esdHist: null\n      },\n      selectedUid: null,\n      maxGalleryItems: 200,\n      chartReady: false,\n      chartInitInterval: null,\n      chartUpdateTimeout: null,\n      inspectorImageWidth: null,\n      inspectorImageNaturalWidth: null,\n      maxScatterPoints: 2000\n    };\n  },\n  computed: {\n    payload: function () {\n      var p = this.msg && this.msg.payload;\n      return Array.isArray(p) ? p : [];\n    },\n    cleanObjects: function () {\n      var rows = this.payload || [];\n      var result = [];\n      for (var i = 0; i < rows.length; i++) {\n        var row = rows[i];\n        if (!row || typeof row !== 'object') continue;\n        if (this.isTemplateRow(row)) continue;\n        var o = Object.assign({}, row);\n        o.object_id = o.object_id || o.id || (i + 1);\n        var pixelSize = this.toNumber(o.process_pixel) || this.toNumber(o.calibration_pixel_size) || 1;\n        o._pixelSize = pixelSize;\n\n        var esdPx = this.toNumber(o.object_equivalent_diameter);\n        if (esdPx === null) continue;\n        o.object_equivalent_diameter = esdPx;\n        o.esd_um = esdPx * pixelSize;\n\n        var widthPx = this.toNumber(o.object_width);\n        var heightPx = this.toNumber(o.object_height);\n        if (widthPx !== null) {\n          o.object_width = widthPx;\n          o.width_um = widthPx * pixelSize;\n        }\n        if (heightPx !== null) {\n          o.object_height = heightPx;\n          o.height_um = heightPx * pixelSize;\n        }\n\n        var areaPx2 = this.toNumber(o.object_area);\n        if (areaPx2 !== null) {\n          o.object_area = areaPx2;\n          o.area_um2 = areaPx2 * pixelSize * pixelSize;\n        }\n\n        o.circularity = this.toNumber(o.circularity);\n        o.elongation = this.toNumber(o.elongation);\n        o.solidity = this.toNumber(o.solidity || o.Solidity);\n        o.object_MeanValue = this.toNumber(o.object_MeanValue || o.gray_mean || o.mean_gray);\n\n        var clusterLabel = this.getClusterLabel(o);\n        o.clusterCanonical = clusterLabel;\n\n        o._uid = String(o.object_id) + '-' + i + '-' + clusterLabel;\n        result.push(o);\n      }\n      return result;\n    },\n    headerObject: function () {\n      if (this.cleanObjects.length) return this.cleanObjects[0];\n      if (this.payload && this.payload.length) return this.payload[0];\n      return null;\n    },\n    headerProjectName: function () {\n      if (!this.headerObject) return this.msg && this.msg.sample_project;\n      return (\n        this.headerObject.sample_project ||\n        this.headerObject.project_name ||\n        this.headerObject.project ||\n        (this.msg && this.msg.sample_project) ||\n        null\n      );\n    },\n    headerSampleId: function () {\n      if (!this.headerObject) return this.msg && this.msg.sample_id;\n      return (\n        this.headerObject.sample_id ||\n        this.headerObject.sampleID ||\n        (this.msg && this.msg.sample_id) ||\n        null\n      );\n    },\n    headerLocalDateTime: function () {\n      if (!this.headerObject) return null;\n      return this.headerObject.acq_local_datetime || this.headerObject.local_datetime || null;\n    },\n    headerAcqId: function () {\n      if (!this.headerObject) return null;\n      return this.headerObject.acq_id || this.headerObject.acqID || null;\n    },\n    pixelSizeValue: function () {\n      if (!this.headerObject) return null;\n      return (\n        this.headerObject._pixelSize ||\n        this.toNumber(this.headerObject.process_pixel) ||\n        this.toNumber(this.headerObject.calibration_pixel_size) ||\n        null\n      );\n    },\n    pixelSizeDisplay: function () {\n      return this.pixelSizeValue ? this.formatNumber(this.pixelSizeValue) + ' µm/px' : 'Pixel size: N/A';\n    },\n    volumeInfo: function () {\n      var h = this.headerObject;\n      if (!h) return { label: null, value: null };\n      var vol = this.toNumber(h.sample_filtered_volume);\n      if (vol !== null) return { label: 'Filtered volume', value: vol };\n      vol = this.toNumber(h.acq_pumped_volume);\n      if (vol !== null) return { label: 'Pumped volume', value: vol };\n      vol = this.toNumber(h.acq_imaged_volume);\n      if (vol !== null) return { label: 'Imaged volume', value: vol };\n      return { label: null, value: null };\n    },\n    volumeDisplay: function () {\n      var info = this.volumeInfo;\n      if (!info.value) return 'Volume: N/A';\n      return info.label + ': ' + this.formatNumber(info.value) + ' mL';\n    },\n    cameraDisplay: function () {\n      var h = this.headerObject;\n      if (!h) return null;\n      var res = h.acq_camera_resolution || h.camera_resolution;\n      var iso = h.acq_camera_iso || h.camera_iso;\n      var shutter = h.acq_camera_shutter_speed || h.camera_shutter;\n      var bits = [];\n      if (res) bits.push(res);\n      if (iso) bits.push('ISO ' + iso);\n      if (shutter) bits.push('1/' + shutter);\n      return bits.join(' • ');\n    },\n    ecoTaxaUrl: function () {\n      if (this.msg && this.msg.ecotaxa_zip_url) return this.msg.ecotaxa_zip_url;\n      if (this.headerObject && this.headerObject.ecotaxa_zip_url) return this.headerObject.ecotaxa_zip_url;\n      if (this.headerSampleId) {\n        return '/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_' + this.headerSampleId + '.zip';\n      }\n      return null;\n    },\n    minEsd: function () {\n      if (!this.cleanObjects.length) return 0;\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].esd_um;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      if (!values.length) return 0;\n      return Math.min.apply(null, values);\n    },\n    maxEsd: function () {\n      if (!this.cleanObjects.length) return 0;\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].esd_um;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      if (!values.length) return 0;\n      return Math.max.apply(null, values);\n    },\n    minCircularity: function () {\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].circularity;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      return values.length ? Math.min.apply(null, values) : 0;\n    },\n    maxCircularity: function () {\n      var values = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var v = this.cleanObjects[i].circularity;\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      return values.length ? Math.max.apply(null, values) : 1;\n    },\n    filteredObjects: function () {\n      var esdMin = this.esdRange[0];\n      var esdMax = this.esdRange[1];\n      var circMin = this.circularityRange[0];\n      var circMax = this.circularityRange[1];\n      var cluster = this.selectedCluster;\n\n      var out = [];\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var o = this.cleanObjects[i];\n\n        var esd = o.esd_um;\n        if (esd === null || isNaN(esd) || esd < esdMin || esd > esdMax) continue;\n\n        var circ = o.circularity;\n        if (circ !== null && !isNaN(circ)) {\n          if (circ < circMin || circ > circMax) continue;\n        }\n\n        if (cluster && cluster !== 'All') {\n          if (o.clusterCanonical !== cluster) continue;\n        }\n        out.push(o);\n      }\n      return out;\n    },\n    sortedObjects: function () {\n      var arr = this.filteredObjects.slice();\n      var key = this.gallerySortKey || '';\n      var lower = key.toLowerCase();\n      if (lower.indexOf('solidity') !== -1) {\n        arr.sort(function (a, b) {\n          return (a.solidity || 0) - (b.solidity || 0);\n        });\n      } else {\n        arr.sort(function (a, b) {\n          return (b.esd_um || 0) - (a.esd_um || 0);\n        });\n      }\n      return arr;\n    },\n    visibleObjects: function () {\n      return this.sortedObjects.slice(0, this.maxGalleryItems);\n    },\n    selectedObject: function () {\n      if (!this.selectedUid || !this.filteredObjects.length) return null;\n      for (var i = 0; i < this.filteredObjects.length; i++) {\n        if (this.filteredObjects[i]._uid === this.selectedUid) return this.filteredObjects[i];\n      }\n      return null;\n    },\n    clusterCounts: function () {\n      var counts = {\n        Filament: 0,\n        Dense: 0,\n        Detritus: 0,\n        Bubble: 0,\n        Other: 0\n      };\n      for (var i = 0; i < this.cleanObjects.length; i++) {\n        var o = this.cleanObjects[i];\n        var c = o.clusterCanonical || 'Other';\n        if (counts[c] === undefined) counts[c] = 0;\n        counts[c]++;\n      }\n      return counts;\n    },\n    filteredClusterCounts: function () {\n      var counts = {\n        Filament: 0,\n        Dense: 0,\n        Detritus: 0,\n        Bubble: 0,\n        Other: 0\n      };\n      for (var i = 0; i < this.filteredObjects.length; i++) {\n        var o = this.filteredObjects[i];\n        var c = o.clusterCanonical || 'Other';\n        if (counts[c] === undefined) counts[c] = 0;\n        counts[c]++;\n      }\n      return counts;\n    },\n    kpiCards: function () {\n      var totalRaw = this.cleanObjects.length;\n      var totalFiltered = this.filteredObjects.length;\n      var volume = this.volumeInfo.value;\n      var abundance = volume ? totalFiltered / volume : null;\n\n      return [\n        {\n          key: 'objects',\n          label: 'Total objects',\n          value: this.formatNumber(totalFiltered, 0),\n          sub: totalRaw ? this.formatNumber(totalRaw, 0) + ' raw' : ''\n        },\n        {\n          key: 'abundance',\n          label: 'Abundance',\n          value: abundance !== null ? this.formatNumber(abundance, 1) : 'N/A',\n          sub: 'ind./mL'\n        },\n        {\n          key: 'filament',\n          label: 'Filament',\n          value: this.formatNumber(this.filteredClusterCounts.Filament || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Filament || 0, 0) + ' raw'\n        },\n        {\n          key: 'dense',\n          label: 'Dense',\n          value: this.formatNumber(this.filteredClusterCounts.Dense || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Dense || 0, 0) + ' raw'\n        },\n        {\n          key: 'detritus',\n          label: 'Detritus',\n          value: this.formatNumber(this.filteredClusterCounts.Detritus || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Detritus || 0, 0) + ' raw'\n        },\n        {\n          key: 'bubble',\n          label: 'Bubble',\n          value: this.formatNumber(this.filteredClusterCounts.Bubble || 0, 0),\n          sub: this.formatNumber(this.clusterCounts.Bubble || 0, 0) + ' raw'\n        }\n      ];\n    },\n    gallerySortOptions: function () {\n      return ['ESD ↓ (largest first)', 'Solidity ↑'];\n    },\n    clusterOptions: function () {\n      return ['All', 'Filament', 'Dense', 'Detritus', 'Bubble', 'Other'];\n    },\n    scaleBarMicronsValue: function () {\n      var obj = this.selectedObject;\n      if (!obj || !this.pixelSizeValue) return null;\n      var esd = obj.esd_um || 0;\n      if (esd <= 20) return 5;\n      if (esd <= 50) return 10;\n      if (esd <= 200) return 50;\n      if (esd <= 500) return 100;\n      return 200;\n    },\n    scaleBarCssWidth: function () {\n      var microns = this.scaleBarMicronsValue;\n      if (!microns || !this.pixelSizeValue || !this.inspectorImageWidth || !this.inspectorImageNaturalWidth) {\n        return 40;\n      }\n      var micronsPerPixel = this.pixelSizeValue;\n      var imagePixelsForScale = microns / micronsPerPixel;\n      var scale = this.inspectorImageWidth / this.inspectorImageNaturalWidth;\n      var widthPx = imagePixelsForScale * scale;\n      var maxWidth = this.inspectorImageWidth * 0.8;\n      if (widthPx > maxWidth) widthPx = maxWidth;\n      if (widthPx < 20) widthPx = 20;\n      return widthPx;\n    },\n    scaleBarVisible: function () {\n      return !!(this.scaleBarMicronsValue && this.pixelSizeValue && this.selectedObject);\n    },\n    scaleBarMicronsLabel: function () {\n      return this.scaleBarMicronsValue ? this.scaleBarMicronsValue + ' µm' : '';\n    }\n  },\n  watch: {\n    payload: {\n      handler: function () {\n        this.onPayloadChanged();\n      },\n      deep: false,\n      immediate: true\n    },\n    esdRange: function () {\n      this.scheduleChartUpdate();\n    },\n    circularityRange: function () {\n      this.scheduleChartUpdate();\n    },\n    selectedCluster: function () {\n      this.scheduleChartUpdate();\n    },\n    filteredObjects: {\n      handler: function (newList) {\n        if (!newList || !newList.length) return;\n        var found = false;\n        for (var i = 0; i < newList.length; i++) {\n          if (newList[i]._uid === this.selectedUid) {\n            found = true;\n            break;\n          }\n        }\n        if (!found) {\n          this.selectedUid = newList[0]._uid;\n        }\n      },\n      deep: false\n    }\n  },\n  mounted: function () {\n    this.ensureChartJsReady();\n  },\n  beforeDestroy: function () {\n    this.destroyCharts();\n    if (this.chartInitInterval) {\n      clearInterval(this.chartInitInterval);\n      this.chartInitInterval = null;\n    }\n    if (this.chartUpdateTimeout) {\n      clearTimeout(this.chartUpdateTimeout);\n      this.chartUpdateTimeout = null;\n    }\n  },\n  methods: {\n    onPayloadChanged: function () {\n      this.resetRangesFromData();\n      if (this.cleanObjects.length) {\n        var keep = false;\n        if (this.selectedUid) {\n          for (var i = 0; i < this.cleanObjects.length; i++) {\n            if (this.cleanObjects[i]._uid === this.selectedUid) {\n              keep = true;\n              break;\n            }\n          }\n        }\n        if (!keep) {\n          this.selectedUid = this.cleanObjects[0]._uid;\n        }\n      } else {\n        this.selectedUid = null;\n      }\n      this.scheduleChartUpdate();\n    },\n    toNumber: function (value) {\n      if (value === null || value === undefined) return null;\n      if (typeof value === 'number') {\n        if (isNaN(value)) return null;\n        return value;\n      }\n      if (typeof value === 'string') {\n        var trimmed = value.trim();\n        if (!trimmed) return null;\n        var normalized = trimmed.replace(',', '.');\n        var num = parseFloat(normalized);\n        return isNaN(num) ? null : num;\n      }\n      return null;\n    },\n    isTemplateRow: function (row) {\n      if (!row || typeof row !== 'object') return false;\n      if (row.templateRow) return true;\n      var values = Object.values(row);\n      var templateMarkers = 0;\n      for (var i = 0; i < values.length; i++) {\n        var v = values[i];\n        if (typeof v === 'string' && /^\\[[fti]\\]$/i.test(v.trim())) {\n          templateMarkers++;\n        }\n      }\n      return templateMarkers >= 3;\n    },\n    resetRangesFromData: function () {\n      var esdMin = this.minEsd;\n      var esdMax = this.maxEsd;\n      if (esdMax >= esdMin) {\n        this.esdRange = [esdMin, esdMax];\n      } else {\n        this.esdRange = [0, 0];\n      }\n\n      var circMin = this.minCircularity;\n      var circMax = this.maxCircularity;\n      if (circMax >= circMin) {\n        this.circularityRange = [circMin, circMax];\n      } else {\n        this.circularityRange = [0, 1];\n      }\n    },\n    resetFilters: function () {\n      this.resetRangesFromData();\n      this.selectedCluster = 'All';\n      this.gallerySortKey = 'ESD ↓ (largest first)';\n      this.scheduleChartUpdate();\n    },\n    formatNumber: function (value, decimals) {\n      if (value === null || value === undefined || isNaN(value)) return 'N/A';\n      var d = typeof decimals === 'number' ? decimals : 2;\n      return Number(value).toLocaleString(undefined, {\n        maximumFractionDigits: d,\n        minimumFractionDigits: 0\n      });\n    },\n    metricToPercent: function (value) {\n      var num = this.toNumber(value);\n      if (num === null) return 0;\n      var v = num;\n      if (v > 1) v = 1;\n      if (v < 0) v = 0;\n      return v * 100;\n    },\n    getClusterLabel: function (obj) {\n      var cand = (\n        obj.cluster ||\n        obj.object_cluster ||\n        obj.group ||\n        obj.object_group ||\n        obj.final_cluster ||\n        ''\n      ).toString();\n      var lower = cand.toLowerCase();\n      if (lower.indexOf('filament') !== -1) return 'Filament';\n      if (lower.indexOf('bubble') !== -1) return 'Bubble';\n      if (lower.indexOf('detrit') !== -1) return 'Detritus';\n      if (lower.indexOf('dense') !== -1 || lower.indexOf('cluster') !== -1) return 'Dense';\n      return 'Other';\n    },\n    clusterColor: function (cluster) {\n      var name = (cluster || '').toString();\n      if (name === 'Filament') return 'deep-orange darken-2';\n      if (name === 'Dense') return 'purple darken-2';\n      if (name === 'Detritus') return 'brown darken-2';\n      if (name === 'Bubble') return 'cyan darken-2';\n      return 'grey darken-1';\n    },\n    getObjectImageUrl: function (obj) {\n      if (!obj) return null;\n      var date = obj.object_date || obj.date || (this.headerObject && this.headerObject.object_date);\n      var sampleId = obj.sample_id || this.headerSampleId;\n      var acqId = obj.acq_id || this.headerAcqId;\n      var file = obj.img_file_name || obj.image_name || obj.filename;\n      if (!date || !sampleId || !acqId || !file) return null;\n      return '/ps/data/browse/api/preview/big/objects/' + date + '/' + sampleId + '/' + acqId + '/' + file;\n    },\n    selectObject: function (obj) {\n      this.selectedUid = obj && obj._uid;\n    },\n    buildHistogram: function (objects, field, binCount) {\n      var values = [];\n      for (var i = 0; i < objects.length; i++) {\n        var v = this.toNumber(objects[i][field]);\n        if (v !== null && !isNaN(v)) values.push(v);\n      }\n      if (!values.length) {\n        return { labels: [], counts: [] };\n      }\n      var min = Math.min.apply(null, values);\n      var max = Math.max.apply(null, values);\n      if (min === max) {\n        return { labels: [this.formatNumber(min)], counts: [values.length] };\n      }\n      var count = binCount || 15;\n      var step = (max - min) / count;\n      var bins = new Array(count);\n      for (var i2 = 0; i2 < count; i2++) bins[i2] = 0;\n\n      for (var j = 0; j < values.length; j++) {\n        var v2 = values[j];\n        var idx = Math.floor((v2 - min) / step);\n        if (idx < 0) idx = 0;\n        if (idx >= count) idx = count - 1;\n        bins[idx]++;\n      }\n\n      var labels = [];\n      for (var k = 0; k < count; k++) {\n        var start = min + step * k;\n        var end = start + step;\n        labels.push(this.formatNumber(start) + '–' + this.formatNumber(end));\n      }\n      return { labels: labels, counts: bins };\n    },\n    destroyCharts: function () {\n      if (this.charts.clusterPie) {\n        this.charts.clusterPie.destroy();\n        this.charts.clusterPie = null;\n      }\n      if (this.charts.scatter) {\n        this.charts.scatter.destroy();\n        this.charts.scatter = null;\n      }\n      if (this.charts.esdHist) {\n        this.charts.esdHist.destroy();\n        this.charts.esdHist = null;\n      }\n    },\n    ensureChartJsReady: function () {\n      if (typeof Chart !== 'undefined') {\n        this.chartReady = true;\n        this.scheduleChartUpdate(true);\n        return;\n      }\n      var self = this;\n      var attempts = 0;\n      var maxAttempts = 40;\n      this.chartInitInterval = setInterval(function () {\n        attempts++;\n        if (typeof Chart !== 'undefined') {\n          clearInterval(self.chartInitInterval);\n          self.chartInitInterval = null;\n          self.chartReady = true;\n          self.scheduleChartUpdate(true);\n        } else if (attempts >= maxAttempts) {\n          clearInterval(self.chartInitInterval);\n          self.chartInitInterval = null;\n        }\n      }, 200);\n    },\n    scheduleChartUpdate: function (force) {\n      if (!force && !this.chartReady) return;\n      var self = this;\n      if (this.chartUpdateTimeout) {\n        clearTimeout(this.chartUpdateTimeout);\n      }\n      this.chartUpdateTimeout = setTimeout(function () {\n        self.updateCharts();\n        self.chartUpdateTimeout = null;\n      }, 120);\n    },\n    updateCharts: function () {\n      if (!this.chartReady || typeof Chart === 'undefined') return;\n\n      var pieCanvas = this.$refs.clusterPieCanvas;\n      var scatterCanvas = this.$refs.scatterCanvas;\n      var esdCanvas = this.$refs.esdHistCanvas;\n\n      if (!pieCanvas || !scatterCanvas || !esdCanvas) return;\n\n      this.destroyCharts();\n\n      var clusters = ['Filament', 'Dense', 'Detritus', 'Bubble', 'Other'];\n      var colors = ['#fb8c00', '#8e24aa', '#6d4c41', '#00acc1', '#9e9e9e'];\n\n      var counts = [];\n      for (var i = 0; i < clusters.length; i++) {\n        var c = clusters[i];\n        counts.push(this.filteredClusterCounts[c] || 0);\n      }\n\n      this.charts.clusterPie = new Chart(pieCanvas.getContext('2d'), {\n        type: 'pie',\n        data: {\n          labels: clusters,\n          datasets: [\n            {\n              data: counts,\n              backgroundColor: colors\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom'\n            }\n          }\n        }\n      });\n\n      var allFiltered = this.filteredObjects || [];\n      var sample = [];\n      if (allFiltered.length <= this.maxScatterPoints) {\n        sample = allFiltered;\n      } else {\n        var step = Math.ceil(allFiltered.length / this.maxScatterPoints);\n        for (var j = 0; j < allFiltered.length; j += step) {\n          sample.push(allFiltered[j]);\n        }\n      }\n\n      var pointsByCluster = {\n        Filament: [],\n        Dense: [],\n        Detritus: [],\n        Bubble: [],\n        Other: []\n      };\n      var yValues = [];\n\n      for (var s = 0; s < sample.length; s++) {\n        var o = sample[s];\n        var cl = o.clusterCanonical || 'Other';\n        if (!pointsByCluster[cl]) pointsByCluster[cl] = [];\n        var x = o.circularity !== null && !isNaN(o.circularity) ? o.circularity : 0;\n        var y = o.elongation !== null && !isNaN(o.elongation) && o.elongation > 0 ? o.elongation : 1;\n        pointsByCluster[cl].push({ x: x, y: y });\n        yValues.push(y);\n      }\n\n      var datasets = [];\n      for (var idx = 0; idx < clusters.length; idx++) {\n        var clName = clusters[idx];\n        datasets.push({\n          label: clName,\n          data: pointsByCluster[clName],\n          backgroundColor: colors[idx],\n          pointRadius: 2,\n          pointHoverRadius: 3\n        });\n      }\n\n      var yMin = yValues.length ? Math.min.apply(null, yValues) : 1;\n      var yMax = yValues.length ? Math.max.apply(null, yValues) : 10;\n\n      this.charts.scatter = new Chart(scatterCanvas.getContext('2d'), {\n        type: 'scatter',\n        data: { datasets: datasets },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            x: {\n              title: { display: true, text: 'Circularity' },\n              min: 0,\n              max: 1\n            },\n            y: {\n              type: 'logarithmic',\n              title: { display: true, text: 'Elongation' },\n              min: Math.max(0.1, yMin * 0.9),\n              max: yMax * 1.1,\n              ticks: {\n                callback: function (value) {\n                  return Number(value).toString();\n                }\n              }\n            }\n          },\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom'\n            }\n          }\n        }\n      });\n\n      var esdHist = this.buildHistogram(this.filteredObjects, 'esd_um', 18);\n      this.charts.esdHist = new Chart(esdCanvas.getContext('2d'), {\n        type: 'bar',\n        data: {\n          labels: esdHist.labels,\n          datasets: [\n            {\n              label: 'Count',\n              data: esdHist.counts,\n              backgroundColor: '#42a5f5'\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            x: {\n              display: false\n            },\n            y: {\n              beginAtZero: true\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      });\n    },\n    exportCsv: function () {\n      var rows = this.filteredObjects;\n      if (!rows.length) return;\n\n      var headers = [\n        'object_id',\n        'cluster',\n        'esd_um',\n        'circularity',\n        'elongation',\n        'solidity',\n        'width_um',\n        'height_um',\n        'area_um2',\n        'object_MeanValue',\n        'object_date',\n        'sample_id',\n        'acq_id',\n        'img_file_name'\n      ];\n\n      var lines = [];\n      lines.push(headers.join(','));\n\n      for (var i = 0; i < rows.length; i++) {\n        var o = rows[i];\n        var rowValues = headers.map(function (h) {\n          var v;\n          if (h === 'cluster') {\n            v = o.clusterCanonical;\n          } else {\n            v = o[h];\n          }\n          if (v === null || v === undefined) return '';\n          var str = String(v).replace(/\"/g, '\"\"');\n          if (str.indexOf(',') !== -1 || str.indexOf('\"') !== -1) {\n            return '\"' + str + '\"';\n          }\n          return str;\n        });\n        lines.push(rowValues.join(','));\n      }\n\n      var csv = lines.join('\\n');\n      var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });\n      var url = URL.createObjectURL(blob);\n      var a = document.createElement('a');\n      var sampleId = this.headerSampleId || 'export';\n      a.href = url;\n      a.download = sampleId + '_objects.csv';\n      document.body.appendChild(a);\n      a.click();\n      document.body.removeChild(a);\n      URL.revokeObjectURL(url);\n    },\n    downloadFileName: function (obj) {\n      if (!obj) return 'object_image.jpg';\n      var sample = obj.sample_id || this.headerSampleId || 'sample';\n      var id = obj.object_id || obj._uid || 'object';\n      var name = obj.img_file_name || obj.image_name || 'image';\n      return sample + '_' + id + '_' + name;\n    },\n    onInspectorImageLoad: function (e) {\n      if (e && e.target) {\n        this.inspectorImageNaturalWidth = e.target.naturalWidth || null;\n      }\n      var self = this;\n      this.$nextTick(function () {\n        var ref = self.$refs.inspectorImage;\n        var imgEl = ref && ref.$el ? ref.$el.querySelector('img') : null;\n        self.inspectorImageWidth = imgEl ? imgEl.clientWidth : null;\n      });\n    }\n  }\n};\n</script>\n\n<style scoped>\n.dashboard-root {\n  font-size: 13px;\n}\n\n.kpi-card {\n  position: relative;\n  overflow: hidden;\n}\n\n.kpi-border {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 4px;\n}\n\n.kpi-border--objects {\n  background-color: #1976d2;\n}\n\n.kpi-border--abundance {\n  background-color: #00897b;\n}\n\n.kpi-border--filament {\n  background-color: #fb8c00;\n}\n\n.kpi-border--dense {\n  background-color: #8e24aa;\n}\n\n.kpi-border--detritus {\n  background-color: #6d4c41;\n}\n\n.kpi-border--bubble {\n  background-color: #00acc1;\n}\n\n.sticky-card {\n  position: sticky;\n  top: 12px;\n  z-index: 1;\n}\n\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));\n  grid-gap: 6px;\n}\n\n.gallery-item {\n  border-radius: 4px;\n  overflow: hidden;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  cursor: pointer;\n  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n.gallery-img {\n  flex: 1;\n}\n\n.gallery-meta {\n  padding: 2px 4px 4px 4px;\n}\n\n.gallery-item:hover {\n  transform: scale(1.03);\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);\n}\n\n.gallery-item--selected {\n  transform: scale(1.05);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n  border-color: #1976d2;\n}\n\n.gallery-placeholder {\n  height: 100%;\n  min-height: 60px;\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.gallery-sort-select {\n  min-width: 160px;\n}\n\n.cluster-Filament {\n  border-bottom: 3px solid #fb8c00;\n}\n\n.cluster-Dense {\n  border-bottom: 3px solid #8e24aa;\n}\n\n.cluster-Detritus {\n  border-bottom: 3px solid #6d4c41;\n}\n\n.cluster-Bubble {\n  border-bottom: 3px solid #00acc1;\n}\n\n.cluster-Other {\n  border-bottom: 3px solid #9e9e9e;\n}\n\n.inspector-img {\n  border-radius: 4px;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.inspector-placeholder {\n  border-radius: 4px;\n  border: 1px dashed rgba(0, 0, 0, 0.2);\n  min-height: 120px;\n}\n\n.cluster-pie-wrapper {\n  width: 100%;\n  height: 170px;\n}\n\n.cluster-pie-wrapper canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n.chart-container {\n  width: 100%;\n  height: 190px;\n}\n\n.scatter-container {\n  height: 230px;\n}\n\n.chart-container canvas {\n  width: 100% !important;\n  height: 100% !important;\n}\n\n.inspector-image-wrapper {\n  position: relative;\n}\n\n.scale-bar {\n  position: absolute;\n  left: 8px;\n  bottom: 8px;\n  padding: 2px 4px;\n  background: rgba(0, 0, 0, 0.55);\n  border-radius: 2px;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.scale-bar-line {\n  height: 2px;\n  background: #ffffff;\n  margin-bottom: 2px;\n}\n\n.scale-bar-label {\n  font-size: 10px;\n  color: #ffffff;\n  line-height: 1;\n}\n\n@media (max-width: 959px) {\n  .sticky-card {\n    position: static;\n  }\n}\n</style>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1300,
-        "y": 380,
+        "y": 360,
         "wires": [
             []
         ]
     },
-    {
-        "id": "687050b30c8d78f3",
-        "type": "debug",
-        "z": "14f8c9b5ce1235cc",
-        "name": "debug 6",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1260,
-        "y": 580,
-        "wires": []
-    },
-    {
-        "id": "8dc194f764cd61ef",
-        "type": "function",
-        "z": "14f8c9b5ce1235cc",
-        "name": "function 1",
-        "func": "// Vérifie que payload est un tableau\nif (Array.isArray(msg.payload)) {\n    // Supprime la première entrée du tableau\n    msg.payload = msg.payload.slice(1);\n}\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 1000,
-        "y": 400,
-        "wires": [
-            [
-                "687050b30c8d78f3",
-                "c42d0eb4a7bc6eb4",
-                "86bff301d6790945",
-                "ddac1dedf1ed0bb3",
-                "39ab3eeb12643cc6",
-                "e8fbb01b7a38c29a"
-            ]
-        ]
-    },
     {
         "id": "ddac1dedf1ed0bb3",
         "type": "ui-template",
@@ -4313,118 +4467,28 @@
         ]
     },
     {
-        "id": "39ab3eeb12643cc6",
+        "id": "mega_plankto_v3",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "fd07716b2cd88ccd",
+        "group": "3d290173d833fd04",
         "page": "",
         "ui": "",
-        "name": "ChatGPT 5.1 Pro v3",
+        "name": "PlanktoScope Mega V3",
         "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<template>\n  <div class=\"plankto-dashboard\">\n    <div v-if=\"!objects.length\" class=\"no-data\">\n      Aucune donnée reçue (msg.payload ou msg.payload.payload doit être un tableau d'objets).\n    </div>\n\n    <div v-else class=\"plankto-layout\">\n      <!-- COLONNE GAUCHE : stats + QC + charts -->\n      <div class=\"left-panel\">\n        <!-- Bandeau infos échantillon / acquisition -->\n        <div class=\"info-row\">\n          <div class=\"info-block\">\n            <div class=\"info-title\">Échantillon</div>\n            <div class=\"info-body\">\n              <div><strong>Projet :</strong> {{ meta.sample_project }}</div>\n              <div><strong>Sample ID :</strong> {{ meta.sample_id }}</div>\n              <div><strong>Opérateur :</strong> {{ meta.sample_operator }}</div>\n              <div><strong>Gear :</strong> {{ meta.sample_gear }}</div>\n            </div>\n          </div>\n          <div class=\"info-block\">\n            <div class=\"info-title\">Acquisition</div>\n            <div class=\"info-body\">\n              <div><strong>Acq ID :</strong> {{ meta.acq_id }}</div>\n              <div><strong>Date :</strong> {{ meta.object_date }} {{ timeString }}</div>\n              <div><strong>Caméra :</strong> {{ meta.acq_camera_resolution }}</div>\n              <div><strong>pixel :</strong> {{ pixelSizeUm.toFixed(3) }} µm/px</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Statistiques principales -->\n        <div class=\"stat-row\">\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Total objets</div>\n            <div class=\"stat-value big\">{{ stats.totalObjects }}</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">ESD moyen</div>\n            <div class=\"stat-value\">{{ formatNumber(stats.meanEsdUm, 1) }} µm</div>\n            <div class=\"stat-sub\">médiane {{ formatNumber(stats.medianEsdUm, 1) }} µm</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Biovolume total</div>\n            <div class=\"stat-value\">{{ formatNumber(stats.totalBiovolumeMm3, 3) }} mm³</div>\n            <div class=\"stat-sub\">(approx. sphérique)</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Densité brute</div>\n            <div class=\"stat-value\">\n              <span v-if=\"stats.imagedVolume\">\n                {{ formatNumber(stats.objectsPerVolume, 1) }} obj / unité vol\n              </span>\n              <span v-else>n/a</span>\n            </div>\n            <div class=\"stat-sub\" v-if=\"stats.concentrationIndex\">\n              Indice conc. {{ formatNumber(stats.concentrationIndex, 1) }}\n            </div>\n          </div>\n        </div>\n\n        <!-- QC cards -->\n        <div class=\"qc-row\">\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Objets au bord</div>\n            <div :class=\"qcClass(qc.borderFraction)\">\n              {{ percent(qc.borderFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Positions doublons</div>\n            <div :class=\"qcClass(qc.duplicateFraction)\">\n              {{ percent(qc.duplicateFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Sous ESD min ({{ formatNumber(minEsdUm,0) }} µm)</div>\n            <div :class=\"qcClass(qc.tinyFraction)\">\n              {{ percent(qc.tinyFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Artefacts morpho.</div>\n            <div :class=\"qcClass(qc.artifactFraction)\">\n              {{ percent(qc.artifactFraction) }}\n            </div>\n          </div>\n          <div class=\"qc-card\">\n            <div class=\"qc-label\">Saturés / très sombres</div>\n            <div :class=\"qcClass(qc.saturatedFraction)\">\n              {{ percent(qc.saturatedFraction) }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Graphiques -->\n        <div class=\"charts\">\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">Distribution de taille (ESD, µm)</div>\n            <canvas :id=\"id + '-esd-hist'\"></canvas>\n          </div>\n\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">Positions dans la flowcell</div>\n            <canvas :id=\"id + '-xy-scatter'\"></canvas>\n          </div>\n\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">Morphologie (solidity vs élongation)</div>\n            <canvas :id=\"id + '-shape-qc'\"></canvas>\n          </div>\n\n          <div class=\"chart-block\">\n            <div class=\"chart-title\">\n              Clusters (UMAP / features)\n              <span class=\"chart-subtitle\">\n                (fallback vers 2 features si UMAP n'est pas chargée)\n              </span>\n            </div>\n            <canvas :id=\"id + '-umap'\"></canvas>\n          </div>\n        </div>\n      </div>\n\n      <!-- COLONNE DROITE : galerie d'images + détails -->\n      <div class=\"right-panel\">\n        <div class=\"gallery-title\">\n          Galerie d'objets ({{ galleryObjects.length }} / {{ stats.totalObjects }})\n        </div>\n\n        <div class=\"gallery\">\n          <div\n            v-for=\"obj in galleryObjects\"\n            :key=\"obj.object_id\"\n            class=\"thumb\"\n            :class=\"{ selected: selected && selected.object_id === obj.object_id }\"\n            @click=\"selectObject(obj)\"\n          >\n            <div class=\"thumb-image-wrapper\">\n              <img :src=\"imageUrl(obj)\" :alt=\"obj.object_id\" />\n              <div class=\"scale-bar-overlay\" v-if=\"scaleBarPx > 0\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPx + 'px' }\"></div>\n                <span>{{ scaleBarUm }} µm</span>\n              </div>\n            </div>\n            <div class=\"thumb-caption\">\n              <div class=\"thumb-id\">{{ obj.object_id }}</div>\n              <div class=\"thumb-meta\">\n                ESD ~ {{ formatNumber(esdUm(obj), 0) }} µm<br>\n                area {{ obj.object_area }} px²\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div v-if=\"selected\" class=\"selected-details\">\n          <div class=\"details-title\">Détails de l'objet sélectionné</div>\n          <div class=\"details-body\">\n            <div class=\"details-image\">\n              <img :src=\"imageUrl(selected)\" :alt=\"selected.object_id\" />\n              <div class=\"scale-bar-overlay\" v-if=\"scaleBarPx > 0\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPx + 'px' }\"></div>\n                <span>{{ scaleBarUm }} µm</span>\n              </div>\n            </div>\n            <div class=\"details-text\">\n              <p><strong>ID :</strong> {{ selected.object_id }}</p>\n              <p><strong>ESD :</strong> {{ formatNumber(esdUm(selected), 1) }} µm</p>\n              <p><strong>Aire :</strong> {{ selected.object_area }} px²</p>\n              <p><strong>Solidity :</strong> {{ formatNumber(selected.object_solidity, 3) }}</p>\n              <p><strong>Élongation :</strong> {{ formatNumber(selected.object_elongation, 3) }}</p>\n              <p><strong>Hue/Sat/Value :</strong>\n                {{ formatNumber(selected.object_MeanHue, 1) }} /\n                {{ formatNumber(selected.object_MeanSaturation, 1) }} /\n                {{ formatNumber(selected.object_MeanValue, 1) }}\n              </p>\n              <p>\n                <a :href=\"imageUrl(selected)\" download>Télécharger l'image</a>\n              </p>\n            </div>\n          </div>\n          <div class=\"details-json\">\n            <div class=\"details-json-title\">Métadonnées brutes</div>\n            <pre>{{ pretty(selected) }}</pre>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<!-- Chart.js -->\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<!-- (Optionnel) UMAP-js : à ajuster selon ton choix de lib / CDN -->\n<!-- <script src=\"https://cdn.jsdelivr.net/npm/umap-js\"></script> -->\n\n<script>\nexport default {\n  data () {\n    return {\n      objects: [],\n      meta: {},\n      stats: {\n        totalObjects: 0,\n        meanEsdUm: 0,\n        medianEsdUm: 0,\n        totalBiovolumeMm3: 0,\n        imagedVolume: 0,\n        objectsPerVolume: 0,\n        concentrationIndex: 0\n      },\n      qc: {\n        borderFraction: 0,\n        duplicateFraction: 0,\n        tinyFraction: 0,\n        artifactFraction: 0,\n        saturatedFraction: 0\n      },\n      esdValues: [],\n      xyPoints: [],\n      shapePoints: [],\n      pixelSizeUm: 1,\n      minEsdUm: 0,\n      charts: {},\n      selected: null,\n      config: {\n        nEsdBins: 20,\n        maxGallery: 48,\n        scaleBarUm: 100,\n        duplicateGridSizePx: 20\n      }\n    }\n  },\n\n  computed: {\n    galleryObjects () {\n      return this.objects.slice(0, this.config.maxGallery)\n    },\n\n    scaleBarUm () {\n      return this.config.scaleBarUm\n    },\n\n    scaleBarPx () {\n      return this.pixelSizeUm > 0\n        ? this.scaleBarUm / this.pixelSizeUm\n        : 0\n    },\n\n    timeString () {\n      const t = this.meta.object_time\n      if (!t && t !== 0) return ''\n      const s = String(t).padStart(4, '0')\n      return s.slice(0, 2) + ':' + s.slice(2)\n    }\n  },\n\n  watch: {\n    // On surveille msg pour reconstruire dès qu'un nouveau message arrive\n    msg: {\n      immediate: true,\n      deep: true,\n      handler (newMsg) {\n        const objs = this.extractObjectsFromMsg(newMsg)\n        if (!Array.isArray(objs) || !objs.length) {\n          this.objects = []\n          return\n        }\n        this.objects = objs\n        this.meta = { ...objs[0] }\n        this.computeStatsAndQc()\n        this.buildChartsWhenReady()\n        if (!this.selected) {\n          this.selected = objs[0]\n        }\n      }\n    }\n  },\n\n  methods: {\n    extractObjectsFromMsg (msg) {\n      if (!msg) return []\n      if (Array.isArray(msg.payload)) return msg.payload\n      if (Array.isArray(msg.payload?.payload)) return msg.payload.payload\n      return []\n    },\n\n    computeStatsAndQc () {\n      const objs = this.objects\n      if (!objs.length) return\n\n      const first = objs[0]\n      const pixelSizeUm = first.process_pixel || 1\n      const minEsdUm = first.process_min_ESD || 0\n\n      this.pixelSizeUm = pixelSizeUm\n      this.minEsdUm = minEsdUm\n\n      // Résolution de la caméra\n      const res = (first.acq_camera_resolution || '0x0').split('x')\n      const camW = parseInt(res[0]) || 0\n      const camH = parseInt(res[1]) || 0\n\n      const esdValues = []\n      const volumesUm3 = []\n      const xyPoints = []\n      const shapePoints = []\n\n      let borderCount = 0\n      let tinyCount = 0\n      let artifactCount = 0\n      let saturatedCount = 0\n\n      const grid = {}\n      const gridSize = this.config.duplicateGridSizePx\n\n      for (const o of objs) {\n        // ESD en µm\n        let esdPx = o.object_equivalent_diameter\n        if ((!esdPx || !isFinite(esdPx)) && o.object_area) {\n          esdPx = 2 * Math.sqrt(o.object_area / Math.PI)\n        }\n        const esdUm = esdPx && pixelSizeUm ? esdPx * pixelSizeUm : 0\n\n        if (esdUm > 0 && isFinite(esdUm)) {\n          esdValues.push(esdUm)\n          const vUm3 = (Math.PI / 6) * Math.pow(esdUm, 3)\n          volumesUm3.push(vUm3)\n          if (minEsdUm && esdUm < minEsdUm) {\n            tinyCount++\n          }\n        }\n\n        // Objets au bord\n        if (camW && camH) {\n          const bx = o.object_bx || 0\n          const by = o.object_by || 0\n          const w = o.object_width || 0\n          const h = o.object_height || 0\n          if (\n            bx <= 1 ||\n            by <= 1 ||\n            bx + w >= camW - 1 ||\n            by + h >= camH - 1\n          ) {\n            borderCount++\n          }\n        }\n\n        // Artefacts morpho\n        if (\n          (o.object_area && o.object_area < 30) ||\n          (o.object_solidity && o.object_solidity < 0.4) ||\n          (o.object_elongation && o.object_elongation > 10)\n        ) {\n          artifactCount++\n        }\n\n        // Saturation / très sombre\n        const meanVal = o.object_MeanValue || 0\n        const stdVal = o.object_StdValue || 0\n        if ((meanVal >= 250 && stdVal < 8) || meanVal <= 5) {\n          saturatedCount++\n        }\n\n        // Points XY\n        if (o.object_x != null && o.object_y != null) {\n          xyPoints.push({ x: o.object_x, y: o.object_y })\n          const gx = Math.round(o.object_x / gridSize)\n          const gy = Math.round(o.object_y / gridSize)\n          const key = gx + ':' + gy\n          grid[key] = (grid[key] || 0) + 1\n        }\n\n        // Points morphologiques (solidity vs élongation)\n        if (o.object_solidity != null && o.object_elongation != null) {\n          shapePoints.push({\n            x: o.object_solidity,\n            y: o.object_elongation\n          })\n        }\n      }\n\n      // Doublons (positions récurrentes)\n      let duplicateCount = 0\n      Object.values(grid).forEach(count => {\n        if (count > 1) duplicateCount += count\n      })\n\n      const totalObjects = objs.length\n      const totalBiovolumeUm3 = volumesUm3.reduce((a, b) => a + b, 0)\n      const totalBiovolumeMm3 = totalBiovolumeUm3 / 1e9\n\n      const meanEsdUm = esdValues.length\n        ? esdValues.reduce((a, b) => a + b, 0) / esdValues.length\n        : 0\n\n      const sorted = [...esdValues].sort((a, b) => a - b)\n      const medianEsdUm = sorted.length\n        ? sorted[Math.floor(sorted.length / 2)]\n        : 0\n\n      // Volume image approximatif\n      let imagedVolume = first.acq_imaged_volume\n      if (!imagedVolume || imagedVolume <= 0) {\n        if (first.acq_nb_frame && first.acq_interframe_volume) {\n          imagedVolume = first.acq_nb_frame * first.acq_interframe_volume\n        }\n      }\n\n      const objectsPerVolume = imagedVolume\n        ? totalObjects / imagedVolume\n        : 0\n\n      const concentrationIndex =\n        imagedVolume &&\n        first.sample_filtered_volume &&\n        first.sample_collected_volume\n          ? (totalObjects / imagedVolume) *\n            (first.sample_filtered_volume / first.sample_collected_volume)\n          : 0\n\n      this.stats = {\n        totalObjects,\n        meanEsdUm,\n        medianEsdUm,\n        totalBiovolumeMm3,\n        imagedVolume,\n        objectsPerVolume,\n        concentrationIndex\n      }\n\n      this.qc = {\n        borderFraction: totalObjects ? borderCount / totalObjects : 0,\n        duplicateFraction: totalObjects ? duplicateCount / totalObjects : 0,\n        tinyFraction: totalObjects ? tinyCount / totalObjects : 0,\n        artifactFraction: totalObjects ? artifactCount / totalObjects : 0,\n        saturatedFraction: totalObjects ? saturatedCount / totalObjects : 0\n      }\n\n      this.esdValues = esdValues\n      this.xyPoints = xyPoints\n      this.shapePoints = shapePoints\n    },\n\n    buildChartsWhenReady () {\n      const build = () => {\n        this.renderEsdHistogram()\n        this.renderXYScatter()\n        this.renderShapeQC()\n        this.renderUmapScatter()\n      }\n\n      if (!window.Chart) {\n        const interval = setInterval(() => {\n          if (window.Chart) {\n            clearInterval(interval)\n            build()\n          }\n        }, 100)\n      } else {\n        build()\n      }\n    },\n\n    createOrUpdateChart (id, config) {\n      const canvas = document.getElementById(id)\n      if (!canvas || !window.Chart) return\n\n      if (this.charts[id]) {\n        const chart = this.charts[id]\n        chart.data = config.data\n        chart.options = config.options || {}\n        chart.update()\n      } else {\n        const ctx = canvas.getContext('2d')\n        this.charts[id] = new window.Chart(ctx, config)\n      }\n    },\n\n    renderEsdHistogram () {\n      if (!this.esdValues || !this.esdValues.length) return\n\n      const values = this.esdValues\n      const nBins = this.config.nEsdBins\n      const min = Math.min(...values)\n      const max = Math.max(...values)\n      if (!isFinite(min) || !isFinite(max) || max === min) return\n\n      const binSize = (max - min) / nBins\n      const counts = new Array(nBins).fill(0)\n      const labels = []\n\n      for (let i = 0; i < nBins; i++) {\n        const start = min + i * binSize\n        const end = start + binSize\n        labels.push(`${Math.round(start)}-${Math.round(end)}`)\n      }\n\n      for (const v of values) {\n        let idx = Math.floor((v - min) / binSize)\n        if (idx >= nBins) idx = nBins - 1\n        if (idx < 0) idx = 0\n        counts[idx]++\n      }\n\n      this.createOrUpdateChart(this.id + '-esd-hist', {\n        type: 'bar',\n        data: {\n          labels,\n          datasets: [\n            {\n              label: 'ESD (µm)',\n              data: counts\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: {\n              title: { display: true, text: 'Classe de taille (µm)' }\n            },\n            y: {\n              title: { display: true, text: 'Nombre d\\'objets' },\n              type: 'logarithmic',\n              min: 1\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    renderXYScatter () {\n      if (!this.xyPoints || !this.xyPoints.length) return\n\n      const data = this.xyPoints.map(p => ({ x: p.x, y: p.y }))\n\n      this.createOrUpdateChart(this.id + '-xy-scatter', {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Objets',\n              data\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: { title: { display: true, text: 'x (px)' } },\n            y: {\n              title: { display: true, text: 'y (px)' },\n              reverse: true\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    renderShapeQC () {\n      if (!this.shapePoints || !this.shapePoints.length) return\n\n      const data = this.shapePoints.map(p => ({ x: p.x, y: p.y }))\n\n      this.createOrUpdateChart(this.id + '-shape-qc', {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Objets',\n              data\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: {\n              title: { display: true, text: 'Solidity' },\n              min: 0,\n              max: 1\n            },\n            y: {\n              title: { display: true, text: 'Élongation' }\n            }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    async renderUmapScatter () {\n      if (!this.objects || !this.objects.length) return\n\n      // Features pour UMAP\n      const features = []\n      for (const o of this.objects) {\n        const esd = this.esdUm(o) || 0\n        const logEsd = esd > 0 ? Math.log10(esd) : 0\n        const circ = o['object_circ.'] || o.object_circ || 0\n        const elong = o.object_elongation || 0\n        const solid = o.object_solidity || 0\n        const hue = (o.object_MeanHue || 0) / 255\n        const sat = (o.object_MeanSaturation || 0) / 100\n        features.push([logEsd, circ, elong, solid, hue, sat])\n      }\n\n      let points = null\n\n      // Si une lib UMAP globale est dispo, on tente de l'utiliser.\n      // NOTE : selon la lib, le nom global peut être différent.\n      if (window.UMAP && typeof window.UMAP === 'function') {\n        try {\n          const umap = new window.UMAP({\n            nComponents: 2,\n            nNeighbors: 15,\n            minDist: 0.1\n          })\n          // fitAsync est exposé par umap-js selon la doc npm\n          const embedding = await umap.fitAsync(features)\n          points = embedding.map(e => ({ x: e[0], y: e[1] }))\n        } catch (e) {\n          console.warn('Erreur UMAP, fallback features simples', e)\n        }\n      }\n\n      // Fallback : première feature = log10(ESD), deuxième = circularité\n      if (!points) {\n        points = features.map(f => ({ x: f[0], y: f[1] }))\n      }\n\n      this.createOrUpdateChart(this.id + '-umap', {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Projection',\n              data: points\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          scales: {\n            x: { title: { display: true, text: 'dim 1' } },\n            y: { title: { display: true, text: 'dim 2' } }\n          },\n          plugins: {\n            legend: { display: false }\n          }\n        }\n      })\n    },\n\n    esdUm (o) {\n      if (!o) return 0\n      const pxSize = this.pixelSizeUm || 1\n      let esdPx = o.object_equivalent_diameter\n      if ((!esdPx || !isFinite(esdPx)) && o.object_area) {\n        esdPx = 2 * Math.sqrt(o.object_area / Math.PI)\n      }\n      return esdPx && isFinite(esdPx) ? esdPx * pxSize : 0\n    },\n\n    imageUrl (o) {\n      if (!o) return ''\n      const date = o.object_date || 'unknown-date'\n      const sampleId = o.sample_id || this.meta.sample_id || 'unknown_sample'\n      const acqId = o.acq_id || this.meta.acq_id || 'unknown_acq'\n      const file = o.img_file_name || (o.object_id ? o.object_id + '.jpg' : '')\n      // Adapté à la forme que tu as donnée :\n      // ps/data/browse/api/preview/big/objects/2025-11-19/S_1/A_4/2025-11-20_09-39-25-057700_0.jpg\n      return `ps/data/browse/api/preview/big/objects/${date}/${sampleId}/${acqId}/${file}`\n    },\n\n    selectObject (obj) {\n      this.selected = obj\n      // Tu peux aussi renvoyer un msg dans le flow si tu veux :\n      // this.send({ payload: obj })\n    },\n\n    formatNumber (v, digits = 2) {\n      const x = Number(v)\n      if (!isFinite(x)) return 'n/a'\n      return x.toFixed(digits)\n    },\n\n    percent (f) {\n      if (!isFinite(f)) return '0 %'\n      return (f * 100).toFixed(1) + ' %'\n    },\n\n    qcClass (frac) {\n      if (!isFinite(frac)) return 'qc-neutral'\n      if (frac < 0.05) return 'qc-good'\n      if (frac < 0.15) return 'qc-medium'\n      return 'qc-bad'\n    },\n\n    pretty (obj) {\n      return JSON.stringify(obj, null, 2)\n    }\n  }\n}\n</script>\n\n<style>\n.plankto-dashboard {\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 13px;\n  padding: 6px;\n  box-sizing: border-box;\n}\n\n.no-data {\n  padding: 12px;\n  text-align: center;\n  opacity: 0.7;\n}\n\n.plankto-layout {\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n}\n\n.left-panel {\n  flex: 2;\n  min-width: 0;\n}\n\n.right-panel {\n  flex: 1.5;\n  min-width: 0;\n  max-height: 80vh;\n  overflow: auto;\n}\n\n/* Infos échantillon */\n.info-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: 6px;\n}\n\n.info-block {\n  flex: 1;\n  min-width: 180px;\n  background: rgba(0, 0, 0, 0.03);\n  border-radius: 6px;\n  padding: 6px 8px;\n}\n\n.info-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.info-body div {\n  margin-bottom: 2px;\n}\n\n/* Stats */\n.stat-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: 6px;\n}\n\n.stat-card {\n  flex: 1;\n  min-width: 160px;\n  background: rgba(0, 0, 0, 0.03);\n  border-radius: 6px;\n  padding: 6px 8px;\n}\n\n.stat-label {\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  opacity: 0.8;\n}\n\n.stat-value {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.stat-value.big {\n  font-size: 18px;\n}\n\n.stat-sub {\n  font-size: 11px;\n  opacity: 0.8;\n}\n\n/* QC */\n.qc-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin-bottom: 8px;\n}\n\n.qc-card {\n  flex: 1;\n  min-width: 130px;\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 6px;\n  padding: 4px 6px;\n}\n\n.qc-label {\n  font-size: 11px;\n  opacity: 0.8;\n  margin-bottom: 2px;\n}\n\n.qc-good {\n  color: #2e7d32;\n  font-weight: 600;\n}\n\n.qc-medium {\n  color: #f9a825;\n  font-weight: 600;\n}\n\n.qc-bad {\n  color: #c62828;\n  font-weight: 600;\n}\n\n.qc-neutral {\n  opacity: 0.6;\n}\n\n/* Charts */\n.charts {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 8px;\n}\n\n.chart-block {\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 6px;\n  padding: 6px;\n}\n\n.chart-title {\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.chart-subtitle {\n  font-size: 11px;\n  font-weight: 400;\n  opacity: 0.7;\n}\n\n.chart-block canvas {\n  width: 100%;\n  max-height: 260px;\n}\n\n/* Galerie */\n.gallery-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 6px;\n}\n\n.thumb {\n  border-radius: 6px;\n  overflow: hidden;\n  background: rgba(0, 0, 0, 0.02);\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n\n.thumb.selected {\n  border-color: #1976d2;\n}\n\n.thumb-image-wrapper {\n  position: relative;\n  overflow: hidden;\n}\n\n.thumb img {\n  display: block;\n  width: 100%;\n}\n\n.scale-bar-overlay {\n  position: absolute;\n  left: 4px;\n  right: 4px;\n  bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background: rgba(0, 0, 0, 0.55);\n  padding: 2px 4px;\n  border-radius: 3px;\n  color: #fff;\n  font-size: 10px;\n}\n\n.scale-bar {\n  height: 2px;\n  background: #fff;\n}\n\n.thumb-caption {\n  padding: 3px 4px 4px;\n  font-size: 11px;\n}\n\n.thumb-id {\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n\n.thumb-meta {\n  opacity: 0.8;\n}\n\n/* Détails objet sélectionné */\n.selected-details {\n  margin-top: 10px;\n}\n\n.details-title {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.details-body {\n  display: flex;\n  gap: 8px;\n  align-items: flex-start;\n}\n\n.details-image {\n  position: relative;\n  flex: 1;\n  min-width: 120px;\n}\n\n.details-image img {\n  display: block;\n  width: 100%;\n  border-radius: 6px;\n}\n\n.details-text {\n  flex: 1.2;\n  font-size: 12px;\n}\n\n.details-text p {\n  margin: 0 0 4px;\n}\n\n.details-json {\n  margin-top: 6px;\n}\n\n.details-json-title {\n  font-size: 11px;\n  font-weight: 600;\n  margin-bottom: 2px;\n}\n\n.details-json pre {\n  font-size: 10px;\n  background: #f5f5f5;\n  border-radius: 4px;\n  padding: 4px;\n  max-height: 180px;\n  overflow: auto;\n}\n</style>\n",
+        "width": "0",
+        "height": "0",
+        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container\n    fluid\n    class=\"pa-0\"\n    style=\"min-height: 80vh; background-color: #f5f5f5; color: #333;\"\n  >\n    <!-- EMPTY / WAITING STATE -->\n    <v-row\n      v-if=\"!hasData\"\n      align=\"center\"\n      justify=\"center\"\n      style=\"height: 60vh;\"\n    >\n      <div class=\"text-center\">\n        <v-progress-circular\n          indeterminate\n          color=\"primary\"\n          size=\"64\"\n        ></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text\">Waiting for Data...</div>\n        <div class=\"caption grey--text\">\n          Payload must be an array of objects\n        </div>\n      </div>\n    </v-row>\n\n    <!-- MAIN UI -->\n    <div v-else class=\"d-flex flex-column fill-height\">\n      <!-- TOP TOOLBAR / SUMMARY -->\n      <v-toolbar\n        flat\n        dense\n        color=\"white\"\n        class=\"border-bottom elevation-1 mb-3\"\n      >\n        <v-icon color=\"primary\" class=\"mr-3\">mdi-microscope</v-icon>\n\n        <div class=\"mr-4\">\n          <div\n            class=\"subtitle-1 font-weight-bold\"\n            style=\"line-height:1.1\"\n          >\n            {{ meta.sample_id }} — {{ meta.acq_id }}\n          </div>\n          <div class=\"caption grey--text\">\n            Project: {{ meta.project }} · Operator: {{ meta.operator }}\n          </div>\n          <div class=\"caption grey--text\">\n            {{ meta.date }} · Lat/Lon: {{ meta.lat_end }}, {{ meta.lon_end }}\n          </div>\n        </div>\n\n        <v-spacer></v-spacer>\n\n        <!-- COUNTS -->\n        <div class=\"d-none d-sm-flex align-center mr-6\">\n          <div class=\"text-right mr-4\">\n            <div class=\"caption grey--text\">Objects (clean)</div>\n            <div class=\"font-weight-bold\">\n              {{ cleanObjects.length }}\n            </div>\n          </div>\n          <div class=\"text-right mr-4\">\n            <div class=\"caption grey--text\">Objects (filtered)</div>\n            <div class=\"font-weight-bold\">\n              {{ filteredObjects.length }}\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"caption grey--text\">Abundance</div>\n            <div class=\"font-weight-bold primary--text\">\n              {{ formatNum(abundance, 1) }}\n              <span class=\"caption\">ind/mL</span>\n            </div>\n          </div>\n        </div>\n\n        <v-divider vertical class=\"mx-2\"></v-divider>\n\n        <!-- EXPORTS -->\n        <v-btn\n          icon\n          color=\"green\"\n          :href=\"ecotaxaLink\"\n          target=\"_blank\"\n          :disabled=\"meta.acq_id === 'N/A'\"\n          title=\"EcoTaxa Export\"\n        >\n          <v-icon>mdi-cloud-download</v-icon>\n        </v-btn>\n        <v-btn\n          icon\n          color=\"blue-grey\"\n          @click=\"downloadCSV\"\n          title=\"Export CSV\"\n        >\n          <v-icon>mdi-file-delimited</v-icon>\n        </v-btn>\n      </v-toolbar>\n\n      <div class=\"px-4 pb-6\">\n        <!-- ROW 1: HISTOGRAM + SAMPLE INFO -->\n        <v-row>\n          <v-col cols=\"12\" md=\"8\">\n            <v-card outlined class=\"pa-3 fill-height\">\n              <div\n                class=\"d-flex justify-space-between align-center mb-2\"\n              >\n                <div class=\"subtitle-2 font-weight-bold grey--text text--darken-2\">\n                  Size Distribution (ESD)\n                </div>\n              </div>\n              <div\n                style=\"height: 350px; width: 100%; position: relative;\"\n              >\n                <canvas ref=\"chartHist\"></canvas>\n              </div>\n              <div class=\"caption text-center mt-2 grey--text\">\n                ESD in µm · Pixel size:\n                {{ formatNum(meta.pixel, 3) }} µm/px · Min ESD:\n                {{ Math.round(meta.min_esd) }} µm\n              </div>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"pa-0 fill-height\">\n              <v-card-title\n                class=\"grey lighten-4 py-2 subtitle-2 font-weight-bold\"\n              >\n                Sample & Acquisition\n              </v-card-title>\n              <v-list dense>\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Project\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ meta.project }}\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Gear\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ meta.gear }}\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Net (Ø / L / mesh)\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold caption\">\n                    {{ meta.net_diameter }} cm ·\n                    {{ meta.net_length }} cm ·\n                    {{ meta.net_mesh }} µm\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Imaged Volume\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatNum(meta.imaged_volume, 3) }} mL\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Pumped Volume\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatNum(meta.pumped_volume, 3) }} mL\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Flowcell Thickness\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatNum(meta.flowcell_thickness, 0) }} µm\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Total Biovolume\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatBigNum(totalBiovolume) }} µm³/mL\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Camera\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold caption\">\n                    {{ meta.camera_res }} · ISO {{ meta.camera_iso }}\n                    · 1/{{ meta.shutter_speed }} s\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Comment\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-italic caption\">\n                    {{ meta.comment || '—' }}\n                  </v-list-item-action>\n                </v-list-item>\n              </v-list>\n            </v-card>\n          </v-col>\n        </v-row>\n\n        <!-- ROW 2: FLOWCELL HEATMAP + SEGMENTATION QC -->\n        <v-row class=\"mt-4\">\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div class=\"d-flex justify-space-between mb-2\">\n                <span class=\"subtitle-2 font-weight-bold\">\n                  Flowcell Heatmap (X/Y)\n                </span>\n                <v-chip\n                  x-small\n                  color=\"red lighten-4\"\n                  text-color=\"red darken-3\"\n                  v-if=\"stickyCount > 0\"\n                >\n                  {{ stickyCount }} Sticky Objects\n                </v-chip>\n              </div>\n              <div\n                style=\"height: 300px; width: 100%; position: relative;\"\n              >\n                <canvas ref=\"chartFlow\"></canvas>\n              </div>\n              <div\n                v-if=\"!hasCoords\"\n                class=\"text-center caption red--text mt-2\"\n              >\n                No coordinate data available (object_x/object_y).\n              </div>\n              <div\n                v-else\n                class=\"caption grey--text text-center mt-2\"\n              >\n                Large datasets are decimated for performance.\n                Sticky objects are always retained.\n              </div>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div class=\"subtitle-2 font-weight-bold mb-3\">\n                Segmentation Quality\n              </div>\n\n              <div class=\"body-2 mb-3\">\n                <div\n                  class=\"font-weight-bold indigo--text text--darken-2 mb-1\"\n                >\n                  1. Objects with Holes (Euler &lt; 0)\n                </div>\n                <p\n                  class=\"caption grey--text text--darken-2 mb-2\"\n                >\n                  Negative Euler usually indicates internal holes\n                  (ring shapes, over-thresholded or hollow objects).\n                </p>\n                <v-progress-linear\n                  :value=\"qc.holesPct\"\n                  height=\"6\"\n                  color=\"indigo lighten-2\"\n                  rounded\n                ></v-progress-linear>\n                <div class=\"text-right caption\">\n                  {{ qc.holes }} objects ({{ qc.holesPct }}%)\n                </div>\n              </div>\n\n              <v-divider class=\"my-3\"></v-divider>\n\n              <div class=\"body-2\">\n                <div\n                  class=\"font-weight-bold orange--text text--darken-2 mb-1\"\n                >\n                  2. Small Objects / Noise\n                </div>\n                <p\n                  class=\"caption grey--text text--darken-2 mb-2\"\n                >\n                  Objects smaller than process min ESD\n                  ({{ Math.round(meta.min_esd) }} µm). High\n                  fraction suggests background noise or detritus.\n                </p>\n                <v-progress-linear\n                  :value=\"qc.smallPct\"\n                  height=\"6\"\n                  color=\"orange lighten-2\"\n                  rounded\n                ></v-progress-linear>\n                <div class=\"text-right caption\">\n                  {{ qc.small }} objects ({{ qc.smallPct }}%)\n                </div>\n              </div>\n            </v-card>\n          </v-col>\n        </v-row>\n\n        <!-- ROW 3: MORPHOMETRICS SCATTER + PROCESS PIPELINE -->\n        <v-row class=\"mt-4\">\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div\n                class=\"d-flex justify-space-between align-center mb-2\"\n              >\n                <div class=\"subtitle-2 font-weight-bold\">\n                  Morphometrics Scatterplot\n                </div>\n                <v-select\n                  v-model=\"qcPlot\"\n                  :items=\"qcPlotOptions\"\n                  dense\n                  outlined\n                  hide-details\n                  style=\"max-width: 260px;\"\n                ></v-select>\n              </div>\n              <div\n                style=\"height: 260px; width: 100%; position: relative;\"\n              >\n                <canvas ref=\"chartMorph\"></canvas>\n              </div>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div class=\"subtitle-2 font-weight-bold mb-3\">\n                Processing Pipeline\n              </div>\n              <div class=\"caption grey--text mb-1\">\n                Process ID: <strong>{{ meta.process_id }}</strong>\n              </div>\n              <div class=\"caption grey--text mb-3\">\n                Process datetime:\n                <strong>{{ meta.process_datetime }}</strong>\n              </div>\n              <v-simple-table dense class=\"caption\">\n                <tbody>\n                  <tr v-for=\"(step, idx) in meta.process_steps\" :key=\"idx\">\n                    <td class=\"grey--text\">Step {{ idx + 1 }}</td>\n                    <td>{{ step }}</td>\n                  </tr>\n                </tbody>\n              </v-simple-table>\n            </v-card>\n          </v-col>\n        </v-row>\n\n        <!-- ROW 4: GALLERY + INSPECTOR & FILTERS -->\n        <v-row class=\"mt-4\">\n          <!-- LEFT: GALLERY GRID -->\n          <v-col cols=\"12\" md=\"8\" lg=\"9\">\n            <v-card outlined class=\"fill-height d-flex flex-column\">\n              <v-toolbar\n                flat\n                dense\n                color=\"grey lighten-5\"\n                style=\"flex: 0 0 auto;\"\n              >\n                <span class=\"caption grey--text mr-2\">Sort by:</span>\n                <v-select\n                  v-model=\"gallerySort\"\n                  :items=\"sortOptions\"\n                  item-text=\"text\"\n                  item-value=\"value\"\n                  dense\n                  outlined\n                  hide-details\n                  style=\"max-width: 220px;\"\n                  class=\"caption bg-white\"\n                ></v-select>\n\n                <v-spacer></v-spacer>\n\n                <span class=\"caption grey--text mr-4\">\n                  Showing top {{ paginatedObjects.length }} of\n                  {{ filteredObjects.length }}\n                </span>\n              </v-toolbar>\n\n              <v-card-text\n                class=\"pa-2 flex-grow-1 overflow-y-auto\"\n                style=\"height: 600px;\"\n              >\n                <div\n                  v-if=\"!paginatedObjects.length\"\n                  class=\"text-center mt-10 grey--text\"\n                >\n                  No objects match the current filters.\n                </div>\n\n                <div class=\"gallery-grid\">\n                  <div\n                    v-for=\"obj in paginatedObjects\"\n                    :key=\"obj.object_id\"\n                    class=\"gallery-item elevation-1\"\n                    :class=\"{ selected: selectedId === obj.object_id }\"\n                    @click=\"selectObject(obj)\"\n                  >\n                    <v-img\n                      :src=\"getImageUrl(obj)\"\n                      aspect-ratio=\"1\"\n                      contain\n                      class=\"white pa-1\"\n                    >\n                      <template v-slot:placeholder>\n                        <v-row\n                          class=\"fill-height ma-0\"\n                          align=\"center\"\n                          justify=\"center\"\n                        >\n                          <v-progress-circular\n                            indeterminate\n                            size=\"20\"\n                            width=\"2\"\n                            color=\"grey lighten-2\"\n                          ></v-progress-circular>\n                        </v-row>\n                      </template>\n                    </v-img>\n\n                    <!-- Metric overlay -->\n                    <div class=\"gallery-overlay\">\n                      <div>\n                        {{ Math.round(obj.esd_um) }} µm\n                      </div>\n                      <div>\n                        Circ: {{ formatNum(obj.circ, 2) }}\n                      </div>\n                      <div>\n                        Val: {{ Math.round(obj.val) }}\n                      </div>\n                    </div>\n\n                    <!-- Optional label chip -->\n                    <div\n                      v-if=\"obj.label\"\n                      class=\"class-chip\"\n                    >\n                      {{ obj.label }}\n                    </div>\n                  </div>\n                </div>\n              </v-card-text>\n            </v-card>\n          </v-col>\n\n          <!-- RIGHT: INSPECTOR + FILTERS -->\n          <v-col cols=\"12\" md=\"4\" lg=\"3\">\n            <div class=\"sticky-top\">\n              <!-- INSPECTOR -->\n              <v-card outlined class=\"mb-3\">\n                <v-card-title\n                  class=\"caption font-weight-bold py-2 grey lighten-4\"\n                >\n                  Inspector\n                </v-card-title>\n\n                <div\n                  v-if=\"selectedObject\"\n                  class=\"pa-3\"\n                >\n                  <div\n                    class=\"img-container rounded elevation-1 mb-3 white relative pa-1\"\n                  >\n                    <v-img\n                      :src=\"getImageUrl(selectedObject)\"\n                      contain\n                      max-height=\"220\"\n                    ></v-img>\n\n                    <!-- Scale bar -->\n                    <div\n                      class=\"scale-bar-overlay\"\n                      v-if=\"scaleBar.px > 0\"\n                    >\n                      <div\n                        class=\"scale-line\"\n                        :style=\"{ width: scaleBar.px + 'px' }\"\n                      ></div>\n                      <div class=\"scale-text\">\n                        {{ scaleBar.val }} µm\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"caption grey--text mb-1\">\n                    <strong>object_ID:</strong> {{ selectedObject.object_id }}\n                  </div>\n                  <div class=\"caption grey--text mb-3\">\n                    Equivalent Spherical Diameter (ESD) computed from\n                    <code>object_equivalent_diameter</code> (px) × pixel size\n                    {{ formatNum(meta.pixel, 3) }} µm/px.\n                  </div>\n                  <div class=\"text-h6 font-weight-bold mb-1\">\n                    {{ formatNum(selectedObject.esd_um, 1) }} µm\n                  </div>\n\n                  <!-- Quick strip of neighbors -->\n                  <div class=\"strip mb-3\">\n                    <v-img\n                      v-for=\"o in stripObjects\"\n                      :key=\"o.object_id\"\n                      :src=\"getImageUrl(o)\"\n                      max-width=\"40\"\n                      max-height=\"40\"\n                      class=\"mr-1 strip-thumb\"\n                      contain\n                      @click=\"selectObject(o)\"\n                    ></v-img>\n                  </div>\n\n                  <!-- GEOMETRY METRICS -->\n                  <div class=\"subtitle-2 mb-1\">Geometry</div>\n                  <v-simple-table dense class=\"caption mb-3\">\n                    <tbody>\n                      <tr>\n                        <td class=\"grey--text\">Width × Height (µm)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.width_um, 0) }} ×\n                          {{ formatNum(selectedObject.height_um, 0) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Major / Minor axis (µm)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.major_um, 1) }} /\n                          {{ formatNum(selectedObject.minor_um, 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Area / Convex Area (px²)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ selectedObject.object_area }} /\n                          {{ selectedObject.object_convex_area }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Bounding box area (px²)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ selectedObject.object_bounding_box_area }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Perimeter (px)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject['object_perim.'], 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Elongation</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_elongation, 2) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Eccentricity</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_eccentricity, 3) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Extent</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_extent, 3) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Angle (deg)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_angle, 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Euler number</td>\n                        <td class=\"font-weight-bold\">\n                          {{ selectedObject.object_euler_number }}\n                        </td>\n                      </tr>\n                    </tbody>\n                  </v-simple-table>\n\n                  <!-- SHAPE INDICES -->\n                  <div class=\"subtitle-2 mb-1\">Shape indices</div>\n                  <div class=\"mb-2\">\n                    <div class=\"d-flex justify-space-between caption\">\n                      <span>Circularity</span>\n                      <strong>\n                        {{ formatNum(selectedObject.circ, 2) }}\n                      </strong>\n                    </div>\n                    <v-progress-linear\n                      :value=\"selectedObject.circ * 100\"\n                      color=\"blue\"\n                      height=\"6\"\n                      rounded\n                    ></v-progress-linear>\n                  </div>\n\n                  <div class=\"mb-2\">\n                    <div class=\"d-flex justify-space-between caption\">\n                      <span>Solidity</span>\n                      <strong>\n                        {{ formatNum(selectedObject.solidity, 2) }}\n                      </strong>\n                    </div>\n                    <v-progress-linear\n                      :value=\"selectedObject.solidity * 100\"\n                      color=\"orange\"\n                      height=\"6\"\n                      rounded\n                    ></v-progress-linear>\n                  </div>\n\n                  <div class=\"mb-4\">\n                    <div class=\"d-flex justify-space-between caption\">\n                      <span>Mean Gray Value</span>\n                      <strong>\n                        {{ formatNum(selectedObject.val, 0) }}\n                      </strong>\n                    </div>\n                    <v-progress-linear\n                      :value=\"(selectedObject.val / 255) * 100\"\n                      color=\"grey darken-2\"\n                      height=\"6\"\n                      rounded\n                    ></v-progress-linear>\n                  </div>\n\n                  <!-- COLOR STATS -->\n                  <div class=\"subtitle-2 mb-1\">Color (HSV)</div>\n                  <v-simple-table dense class=\"caption mb-4\">\n                    <tbody>\n                      <tr>\n                        <td class=\"grey--text\">Mean Hue / Sat / Val</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_MeanHue, 1) }} /\n                          {{ formatNum(selectedObject.object_MeanSaturation, 1) }} /\n                          {{ formatNum(selectedObject.object_MeanValue, 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Std Hue / Sat / Val</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_StdHue, 1) }} /\n                          {{ formatNum(selectedObject.object_StdSaturation, 1) }} /\n                          {{ formatNum(selectedObject.object_StdValue, 1) }}\n                        </td>\n                      </tr>\n                    </tbody>\n                  </v-simple-table>\n\n                  <v-btn\n                    block\n                    small\n                    outlined\n                    color=\"primary\"\n                    :href=\"getImageUrl(selectedObject)\"\n                    download\n                    target=\"_blank\"\n                  >\n                    <v-icon left small>mdi-download</v-icon>\n                    Download Image\n                  </v-btn>\n                </div>\n\n                <div\n                  v-else\n                  class=\"pa-6 text-center caption grey--text\"\n                >\n                  Select an object from the gallery to view details.\n                </div>\n              </v-card>\n\n              <!-- FILTERS -->\n              <v-card outlined>\n                <v-card-title\n                  class=\"caption font-weight-bold py-2 grey lighten-4\"\n                >\n                  Filters ({{ filteredObjects.length }})\n                  <v-spacer></v-spacer>\n                  <v-btn\n                    x-small\n                    text\n                    color=\"red\"\n                    @click=\"resetFilters\"\n                  >\n                    Reset\n                  </v-btn>\n                </v-card-title>\n\n                <v-card-text\n                  class=\"pt-4\"\n                  style=\"max-height: 380px; overflow-y: auto;\"\n                >\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>ESD (µm)</span>\n                    <span>{{ filters.esd[0] }}–{{ filters.esd[1] }}</span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.esd\"\n                    :min=\"sliderStats.esd.min\"\n                    :max=\"sliderStats.esd.max\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-4\"\n                  ></v-range-slider>\n\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>Major Axis (µm)</span>\n                    <span>\n                      {{ filters.major[0] }}–{{ filters.major[1] }}\n                    </span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.major\"\n                    :min=\"sliderStats.major.min\"\n                    :max=\"sliderStats.major.max\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-4\"\n                    color=\"purple\"\n                  ></v-range-slider>\n\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>Minor Axis (µm)</span>\n                    <span>\n                      {{ filters.minor[0] }}–{{ filters.minor[1] }}\n                    </span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.minor\"\n                    :min=\"sliderStats.minor.min\"\n                    :max=\"sliderStats.minor.max\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-4\"\n                    color=\"teal\"\n                  ></v-range-slider>\n\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>Circularity</span>\n                    <span>\n                      {{ filters.circ[0] }}–{{ filters.circ[1] }}\n                    </span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.circ\"\n                    :min=\"0\"\n                    :max=\"1\"\n                    :step=\"0.05\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-2\"\n                  ></v-range-slider>\n                </v-card-text>\n              </v-card>\n            </div>\n          </v-col>\n        </v-row>\n      </div>\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: ['msg'],\n\n  data() {\n    return {\n      gallerySort: 'esd_desc',\n      sortOptions: [\n        { text: 'Size (ESD) Desc', value: 'esd_desc' },\n        { text: 'Size (ESD) Asc', value: 'esd_asc' },\n        { text: 'Major Axis Desc', value: 'maj_desc' },\n        { text: 'Minor Axis Desc', value: 'min_desc' },\n        { text: 'Circularity Desc', value: 'circ_desc' },\n        { text: 'Gray Value Asc', value: 'val_asc' }\n      ],\n      filters: {\n        esd: [0, 2000],\n        major: [0, 2000],\n        minor: [0, 2000],\n        circ: [0, 1]\n      },\n      selectedId: null,\n      scaleBar: { px: 0, val: 0 },\n      stickyCount: 0,\n      qcPlot: 'esd_circ',\n      qcPlotOptions: [\n        { text: 'ESD vs Circularity', value: 'esd_circ' },\n        { text: 'Major vs Minor', value: 'major_minor' },\n        { text: 'ESD vs Gray Value', value: 'esd_val' }\n      ],\n      charts: {\n        hist: null,\n        flow: null,\n        morph: null\n      }\n    };\n  },\n\n  computed: {\n    rawPayload() {\n      if (!this.msg) return [];\n      const p = this.msg.payload;\n      if (Array.isArray(p)) return p;\n      return p ? [p] : [];\n    },\n\n    hasData() {\n      return this.rawPayload.length > 0;\n    },\n\n    // CORE NORMALIZED OBJECT LIST\n    cleanObjects() {\n      if (!this.hasData) return [];\n      const pxDefault =\n        Number(this.msg.process_pixel || this.msg.processPixelSize) || 1;\n\n      return this.rawPayload\n        .filter(o => o.object_id && o.object_equivalent_diameter)\n        .map(o => {\n          const px =\n            Number(\n              o.process_pixel ||\n                o.calibration_pixel_size ||\n                pxDefault\n            ) || 1;\n\n          return {\n            ...o,\n            esd_um:\n              (Number(o.object_equivalent_diameter) || 0) * px,\n            width_um: (Number(o.object_width) || 0) * px,\n            height_um: (Number(o.object_height) || 0) * px,\n            major_um: (Number(o.object_major) || 0) * px,\n            minor_um: (Number(o.object_minor) || 0) * px,\n            x: Number(o.object_x) || 0,\n            y: Number(o.object_y) || 0,\n            circ:\n              Number(o['object_circ.'] || o.circularity) || 0,\n            val: Number(o.object_MeanValue) || 0,\n            solidity: Number(o.object_solidity) || 0,\n            euler: Number(o.object_euler_number) || 0\n          };\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    // FILTERED OBJECTS\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        return (\n          o.esd_um >= f.esd[0] &&\n          o.esd_um <= f.esd[1] &&\n          o.major_um >= f.major[0] &&\n          o.major_um <= f.major[1] &&\n          o.minor_um >= f.minor[0] &&\n          o.minor_um <= f.minor[1] &&\n          o.circ >= f.circ[0] &&\n          o.circ <= f.circ[1]\n        );\n      });\n    },\n\n    // META EXTRACTED FROM FIRST OBJECT\n    meta() {\n      if (!this.cleanObjects.length) {\n        return {\n          sample_id: 'N/A',\n          acq_id: 'N/A',\n          project: '—',\n          operator: '—',\n          gear: '—',\n          imaged_volume: 1,\n          pumped_volume: 1,\n          pixel: 1,\n          min_esd: 0,\n          flowcell_thickness: 0,\n          lat_end: '—',\n          lon_end: '—',\n          date: '—',\n          camera_res: '—',\n          camera_iso: '—',\n          shutter_speed: '—',\n          comment: '',\n          process_id: '—',\n          process_datetime: '—',\n          process_steps: [],\n          net_diameter: '—',\n          net_length: '—',\n          net_mesh: '—'\n        };\n      }\n\n      const o = this.cleanObjects[0];\n      const src = this.rawPayload[0] || o;\n\n      const steps = [];\n      for (let i = 1; i <= 7; i++) {\n        const key = `process_${i}st_operation`.replace('1st', '1st');\n        // Actually keys in your JSON are process_1st_operation...process_7th_operation\n      }\n      // On recrée proprement depuis le JSON\n      const processSteps = [];\n      for (let i = 1; i <= 7; i++) {\n        const suffix =\n          i === 1\n            ? '1st'\n            : i === 2\n            ? '2nd'\n            : i === 3\n            ? '3rd'\n            : `${i}th`;\n        const key = `process_${suffix}_operation`;\n        if (src[key]) processSteps.push(src[key]);\n      }\n\n      return {\n        sample_id: src.sample_id || this.msg.sample_id || 'Unknown',\n        acq_id: src.acq_id || this.msg.acq_id || 'N/A',\n        project: src.sample_project || 'Unknown',\n        operator: src.sample_operator || 'Unknown',\n        gear: src.sample_gear || 'Unknown',\n        imaged_volume: Number(src.acq_imaged_volume) || 1,\n        pumped_volume: Number(src.acq_pumped_volume) || 1,\n        pixel:\n          Number(src.process_pixel || this.msg.process_pixel) ||\n          1,\n        min_esd: Number(src.process_min_ESD) || 0,\n        flowcell_thickness:\n          Number(src.acq_flowcell_thickness) || 0,\n        lat_end: src.object_lat_end ?? 'N/A',\n        lon_end: src.object_lon_end ?? 'N/A',\n        date:\n          src.acq_local_datetime ||\n          src.process_datetime ||\n          src.object_date ||\n          '',\n        camera_res: src.acq_camera_resolution || '—',\n        camera_iso: src.acq_camera_iso || '—',\n        shutter_speed: src.acq_camera_shutter_speed || '—',\n        comment: src.sample_comment || '',\n        process_id: src.process_id || '—',\n        process_datetime: src.process_datetime || '—',\n        process_steps: processSteps,\n        net_diameter: src.sample_net_mouth_diameter || '—',\n        net_length: src.sample_net_length || '—',\n        net_mesh: src.sample_net_mesh_size || '—'\n      };\n    },\n\n    // ABUNDANCE & BIOVOLUME\n    abundance() {\n      if (!this.meta.imaged_volume) return 0;\n      return this.filteredObjects.length / this.meta.imaged_volume;\n    },\n\n    totalBiovolume() {\n      if (!this.meta.imaged_volume) return 0;\n      const vol = this.filteredObjects.reduce((acc, o) => {\n        return acc + (Math.PI * Math.pow(o.esd_um, 3)) / 6;\n      }, 0);\n      return vol / this.meta.imaged_volume;\n    },\n\n    // SLIDER LIMITS\n    sliderStats() {\n      if (!this.cleanObjects.length) {\n        return {\n          esd: { min: 0, max: 100 },\n          major: { min: 0, max: 100 },\n          minor: { min: 0, max: 100 }\n        };\n      }\n      const esds = this.cleanObjects.map(o => o.esd_um);\n      const majs = this.cleanObjects.map(o => o.major_um);\n      const mins = this.cleanObjects.map(o => o.minor_um);\n\n      return {\n        esd: {\n          min: Math.floor(Math.min(...esds)),\n          max: Math.ceil(Math.max(...esds))\n        },\n        major: {\n          min: Math.floor(Math.min(...majs)),\n          max: Math.ceil(Math.max(...majs))\n        },\n        minor: {\n          min: Math.floor(Math.min(...mins)),\n          max: Math.ceil(Math.max(...mins))\n        }\n      };\n    },\n\n    // PAGINATED / SORTED GALLERY OBJECTS\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n\n      arr.sort((a, b) => {\n        switch (this.gallerySort) {\n          case 'esd_asc':\n            return a.esd_um - b.esd_um;\n          case 'maj_desc':\n            return b.major_um - a.major_um;\n          case 'min_desc':\n            return b.minor_um - a.minor_um;\n          case 'circ_desc':\n            return b.circ - a.circ;\n          case 'val_asc':\n            return a.val - b.val;\n          default:\n            // esd_desc\n            return b.esd_um - a.esd_um;\n        }\n      });\n\n      return arr.slice(0, 150);\n    },\n\n    selectedObject() {\n      return (\n        this.cleanObjects.find(\n          o => o.object_id === this.selectedId\n        ) || null\n      );\n    },\n\n    // small strip of neighbors around selected object\n    stripObjects() {\n      if (!this.selectedObject) return [];\n      const idx = this.filteredObjects.findIndex(\n        o => o.object_id === this.selectedId\n      );\n      if (idx === -1) return [];\n      const start = Math.max(idx - 5, 0);\n      return this.filteredObjects.slice(start, idx + 6);\n    },\n\n    // QC STATS\n    qc() {\n      const total = this.cleanObjects.length || 1;\n      const holes = this.cleanObjects.filter(o => o.euler < 0)\n        .length;\n      const small =\n        this.meta.min_esd > 0\n          ? this.cleanObjects.filter(\n              o => o.esd_um < this.meta.min_esd\n            ).length\n          : 0;\n\n      return {\n        holes,\n        holesPct: Math.round((holes / total) * 100),\n        small,\n        smallPct: Math.round((small / total) * 100)\n      };\n    },\n\n    hasCoords() {\n      return this.cleanObjects.some(o => o.x !== 0 || o.y !== 0);\n    },\n\n    ecotaxaLink() {\n      return this.meta.acq_id !== 'N/A'\n        ? `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.meta.acq_id}.zip`\n        : '#';\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler() {\n        this.init();\n      }\n    },\n    filteredObjects() {\n      this.updateCharts();\n    },\n    qcPlot() {\n      this.$nextTick(this.renderMorph);\n    },\n    selectedObject() {\n      this.calcScaleBar();\n    }\n  },\n\n  mounted() {\n    this.init();\n  },\n\n  methods: {\n    init() {\n      if (!this.cleanObjects.length) return;\n\n      // init sliders to data bounds\n      this.filters.esd = [\n        this.sliderStats.esd.min,\n        this.sliderStats.esd.max\n      ];\n      this.filters.major = [\n        this.sliderStats.major.min,\n        this.sliderStats.major.max\n      ];\n      this.filters.minor = [\n        this.sliderStats.minor.min,\n        this.sliderStats.minor.max\n      ];\n\n      // default selection = first object\n      this.selectedId = this.cleanObjects[0].object_id;\n      this.updateCharts();\n    },\n\n    // FORMATTERS\n    formatNum(v, d) {\n      return (Number(v) || 0).toFixed(d);\n    },\n\n    formatBigNum(v) {\n      const n = Number(v) || 0;\n      if (n > 1_000_000) return (n / 1_000_000).toFixed(2) + 'M';\n      if (n > 1000) return (n / 1000).toFixed(0) + 'k';\n      return Math.round(n);\n    },\n\n    // IMAGE URL HELPERS\n    getImageUrl(o) {\n      if (!o) return '';\n      const date = o.object_date || this.meta.date || '';\n      const sample = o.sample_id || this.meta.sample_id || '';\n      const acq = o.acq_id || this.meta.acq_id || '';\n      return `/ps/data/browse/api/preview/big/objects/${date}/${sample}/${acq}/${o.img_file_name}`;\n    },\n\n    // FILTERS / SELECTION\n    resetFilters() {\n      this.filters.esd = [\n        this.sliderStats.esd.min,\n        this.sliderStats.esd.max\n      ];\n      this.filters.major = [\n        this.sliderStats.major.min,\n        this.sliderStats.major.max\n      ];\n      this.filters.minor = [\n        this.sliderStats.minor.min,\n        this.sliderStats.minor.max\n      ];\n      this.filters.circ = [0, 1];\n    },\n\n    selectObject(obj) {\n      if (obj && obj.object_id) {\n        this.selectedId = obj.object_id;\n      }\n    },\n\n    // SCALE BAR: approximate 25% of object width with \"nice\" values\n    calcScaleBar() {\n      if (\n        !this.selectedObject ||\n        !this.meta.pixel ||\n        !this.selectedObject.object_width\n      ) {\n        this.scaleBar = { px: 0, val: 0 };\n        return;\n      }\n\n      const pxSize = this.meta.pixel;\n      const widthPx = Number(this.selectedObject.object_width) || 0;\n      const targetFrac = 0.25; // 25% of width\n      const physical = widthPx * pxSize * targetFrac;\n\n      const niceSteps = [5, 10, 20, 50, 100, 200, 500, 1000];\n      let chosen = niceSteps[0];\n      for (const step of niceSteps) {\n        if (physical <= step) {\n          chosen = step;\n          break;\n        }\n      }\n      const px = chosen / pxSize;\n      this.scaleBar = { val: chosen, px: px };\n    },\n\n    // CSV EXPORT\n    downloadCSV() {\n      if (!this.filteredObjects.length) return;\n      const headers = Object.keys(this.filteredObjects[0]);\n      const csv = [\n        headers.join(','),\n        ...this.filteredObjects.map(r =>\n          headers\n            .map(c => JSON.stringify(r[c] != null ? r[c] : ''))\n            .join(',')\n        )\n      ].join('\\n');\n\n      const blob = new Blob([csv], { type: 'text/csv' });\n      const a = document.createElement('a');\n      a.href = URL.createObjectURL(blob);\n      a.download = `${this.meta.acq_id}_export.csv`;\n      a.click();\n    },\n\n    // CHARTS\n    updateCharts() {\n      this.$nextTick(() => {\n        this.renderHist();\n        this.renderFlow();\n        this.renderMorph();\n      });\n    },\n\n    // Histogram of ESD (linear bins only)\n    renderHist() {\n      const ctx = this.$refs.chartHist;\n      if (!ctx || !this.filteredObjects.length) return;\n      if (this.charts.hist) this.charts.hist.destroy();\n\n      const vals = this.filteredObjects\n        .map(o => o.esd_um)\n        .filter(v => v > 0);\n      if (!vals.length) return;\n\n      const maxVal = Math.max(...vals);\n      const step = 10;\n      const numBins = Math.ceil(maxVal / step) + 1;\n      let counts = new Array(numBins).fill(0);\n      let labels = new Array(numBins)\n        .fill(0)\n        .map(\n          (_, i) =>\n            `${i * step}-${(i + 1) * step}`\n        );\n\n      vals.forEach(v => {\n        const idx = Math.floor(v / step);\n        if (counts[idx] !== undefined) counts[idx]++;\n      });\n\n      // trim empty tail\n      let limit = counts.length;\n      while (limit > 0 && counts[limit - 1] === 0) limit--;\n      counts = counts.slice(0, limit);\n      labels = labels.slice(0, limit);\n\n      this.charts.hist = new Chart(ctx, {\n        type: 'bar',\n        data: {\n          labels,\n          datasets: [\n            {\n              label: 'Count',\n              data: counts,\n              backgroundColor: '#5C6BC0',\n              borderRadius: 2\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: { display: false }\n          },\n          scales: {\n            x: {\n              title: {\n                display: true,\n                text: 'ESD Size Class (µm)'\n              },\n              ticks: {\n                autoSkip: true,\n                maxTicksLimit: 20\n              }\n            },\n            y: {\n              beginAtZero: true\n            }\n          }\n        }\n      });\n    },\n\n    // Flowcell heatmap (scatter with sticky detection + decimation)\n    renderFlow() {\n      const ctx = this.$refs.chartFlow;\n      if (!ctx || !this.filteredObjects.length || !this.hasCoords)\n        return;\n      if (this.charts.flow) this.charts.flow.destroy();\n\n      const objs = this.filteredObjects;\n      const binSize = 100;\n      const bins = {};\n\n      objs.forEach(o => {\n        const k = `${Math.floor(\n          o.x / binSize\n        )}_${Math.floor(o.y / binSize)}`;\n        bins[k] = (bins[k] || 0) + 1;\n      });\n\n      let normal = [];\n      let sticky = [];\n      this.stickyCount = 0;\n\n      objs.forEach(o => {\n        const k = `${Math.floor(\n          o.x / binSize\n        )}_${Math.floor(o.y / binSize)}`;\n        if (bins[k] > 5) {\n          sticky.push({ x: o.x, y: o.y });\n          this.stickyCount++;\n        } else {\n          normal.push({ x: o.x, y: o.y });\n        }\n      });\n\n      const MAX_POINTS = 2000;\n      if (normal.length > MAX_POINTS) {\n        const step = Math.ceil(normal.length / MAX_POINTS);\n        normal = normal.filter((_, i) => i % step === 0);\n      }\n\n      this.charts.flow = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Normal (sampled)',\n              data: normal,\n              backgroundColor: '#90CAF9',\n              pointRadius: 2\n            },\n            {\n              label: 'Sticky/Clump',\n              data: sticky,\n              backgroundColor: '#EF5350',\n              pointRadius: 3\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            y: { reverse: true, display: false },\n            x: { display: false }\n          },\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom'\n            }\n          }\n        }\n      });\n    },\n\n    // Morphometrics scatter: ESD vs circ, major vs minor, etc.\n    renderMorph() {\n      const ctx = this.$refs.chartMorph;\n      if (!ctx || !this.filteredObjects.length) return;\n      if (this.charts.morph) this.charts.morph.destroy();\n\n      const objs = this.filteredObjects;\n      const data = [];\n      const MAX_POINTS = 3000;\n      const step =\n        objs.length > MAX_POINTS\n          ? Math.ceil(objs.length / MAX_POINTS)\n          : 1;\n\n      for (let i = 0; i < objs.length; i += step) {\n        const o = objs[i];\n        if (!o) continue;\n        if (this.qcPlot === 'esd_circ') {\n          data.push({ x: o.esd_um, y: o.circ });\n        } else if (this.qcPlot === 'major_minor') {\n          data.push({ x: o.major_um, y: o.minor_um });\n        } else if (this.qcPlot === 'esd_val') {\n          data.push({ x: o.esd_um, y: o.val });\n        }\n      }\n\n      let xLabel = '';\n      let yLabel = '';\n\n      if (this.qcPlot === 'esd_circ') {\n        xLabel = 'ESD (µm)';\n        yLabel = 'Circularity';\n      } else if (this.qcPlot === 'major_minor') {\n        xLabel = 'Major axis (µm)';\n        yLabel = 'Minor axis (µm)';\n      } else if (this.qcPlot === 'esd_val') {\n        xLabel = 'ESD (µm)';\n        yLabel = 'Gray value';\n      }\n\n      this.charts.morph = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: '',\n              data,\n              backgroundColor: '#42A5F5',\n              pointRadius: 2\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: { legend: { display: false } },\n          scales: {\n            x: {\n              title: {\n                display: true,\n                text: xLabel\n              }\n            },\n            y: {\n              title: {\n                display: true,\n                text: yLabel\n              }\n            }\n          }\n        }\n      });\n    }\n  }\n};\n</script>\n\n<style scoped>\n/* LAYOUT */\n.sticky-top {\n  position: sticky;\n  top: 10px;\n  z-index: 2;\n}\n.relative {\n  position: relative;\n}\n.border-bottom {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n/* GALLERY */\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\n  gap: 8px;\n}\n.gallery-item {\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.2s;\n  background: white;\n  border: 2px solid transparent;\n}\n.gallery-item:hover {\n  transform: scale(1.05);\n  z-index: 3;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n}\n.gallery-item.selected {\n  border-color: #1976d2;\n}\n\n/* OVERLAY ON THUMBNAIL */\n.gallery-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.65);\n  color: white;\n  font-size: 10px;\n  padding: 2px 3px;\n  line-height: 1.1;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.gallery-item:hover .gallery-overlay {\n  opacity: 1;\n}\n\n/* CLASS CHIP */\n.class-chip {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background: #4caf50;\n  color: white;\n  font-size: 9px;\n  padding: 1px 4px;\n  border-radius: 3px;\n}\n\n/* SCALE BAR */\n.scale-bar-overlay {\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  background: rgba(0, 0, 0, 0.4);\n  padding: 3px 5px;\n  border-radius: 2px;\n}\n.scale-line {\n  height: 2px;\n  background: white;\n  margin-bottom: 2px;\n  box-shadow: 0 1px 2px black;\n}\n.scale-text {\n  font-size: 10px;\n  font-weight: bold;\n  color: white;\n  text-shadow: 0 1px 2px black;\n  line-height: 1;\n}\n\n/* STRIP OF NEIGHBORS */\n.strip {\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n}\n.strip-thumb {\n  border: 1px solid #eee;\n}\n\n/* UTIL */\n.img-container {\n  overflow: hidden;\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1300,
-        "y": 520,
+        "x": 1310,
+        "y": 280,
         "wires": [
             []
         ]
     },
-    {
-        "id": "64ae825a687fb054",
-        "type": "ecotaxa",
-        "z": "8555b76c53e789e0",
-        "name": "Import to Ecotaxa Project",
-        "api_url": "https://ecotaxa.obs-vlfr.fr/api/",
-        "project_id": "9366",
-        "x": 830,
-        "y": 300,
-        "wires": [
-            [
-                "c21f20a7a9902ee4"
-            ]
-        ]
-    },
-    {
-        "id": "af1ec6323cc00231",
-        "type": "inject",
-        "z": "8555b76c53e789e0",
-        "name": "Lancer import",
-        "props": [],
-        "repeat": "",
-        "crontab": "",
-        "once": false,
-        "onceDelay": "0",
-        "topic": "",
-        "x": 310,
-        "y": 300,
-        "wires": [
-            [
-                "28f8eb0318735246"
-            ]
-        ]
-    },
-    {
-        "id": "c21f20a7a9902ee4",
-        "type": "debug",
-        "z": "8555b76c53e789e0",
-        "name": "Show import result",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "payload",
-        "targetType": "msg",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1110,
-        "y": 300,
-        "wires": []
-    },
-    {
-        "id": "28f8eb0318735246",
-        "type": "function",
-        "z": "8555b76c53e789e0",
-        "name": "Set file_path",
-        "func": "msg.payload = {}\nmsg.payload.file_path = \"/home/pi/data/export/ecotaxa/ecotaxa_A_2.zip\"\n\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 570,
-        "y": 300,
-        "wires": [
-            [
-                "64ae825a687fb054",
-                "1457a0786f787415"
-            ]
-        ]
-    },
-    {
-        "id": "1457a0786f787415",
-        "type": "debug",
-        "z": "8555b76c53e789e0",
-        "name": "debug 9",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 820,
-        "y": 200,
-        "wires": []
-    },
     {
         "id": "8e11bb014b9664be",
         "type": "ui-template",
@@ -4594,33 +4658,7 @@
         "y": 140,
         "wires": [
             [
-                "94a287dea58faa4d"
-            ]
-        ]
-    },
-    {
-        "id": "94a287dea58faa4d",
-        "type": "ui-template",
-        "z": "6426e7bea6900426",
-        "group": "af8acdfe9afbad74",
-        "page": "",
-        "ui": "",
-        "name": "Calibration - WB",
-        "order": 2,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "\n<template>\n  <v-container fluid>\n    <v-row>\n      <!-- PREVIEW : 8 colonnes -->\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n        </v-card>\n      </v-col>\n\n      <!-- CONTROL PANEL : 4 colonnes -->\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4\">\n          <v-card-title class=\"text-left text-primary\">\n            White Balance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 1 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Refresh</h3>\n            <p class=\"text-caption mb-3\">\n              Click <b>Refresh the value of the gains</b> to start.\n            </p>\n            <v-btn block color=\"error\" class=\"mb-4\" @click=\"refreshGain\">\n              Refresh\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 2 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Pick a Pixel</h3>\n            <p class=\"text-caption mb-3\">Pick a pixel from the live stream.</p>\n\n            <div class=\"text-center mb-3\">\n              Pick a pixel from the stream :\n              <input class=\"colorpicker\" type=\"color\" v-model=\"selectedColor\" @input=\"onColorInput\"/>\n            </div>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 3 -->\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">3. Apply Suggested Gains</h3>\n\n            <v-data-table :items=\"rows\" density=\"comfortable\" hide-default-footer class=\"gain-table mb-6\">\n              <template #item.current=\"{ item }\">\n                <div class=\"text-center font-mono\">{{ item.current }}</div>\n              </template>\n              <template #item.suggested=\"{ item }\">\n                <v-text-field v-model.number=\"item.suggested\" type=\"number\" min=\"0\" hide-details density=\"compact\"\n                  variant=\"underlined\" class=\"text-primary text-center suggested-input\"\n                  @change=\"onManualEdit(item.channel,item.suggested)\" />\n              </template>\n            </v-data-table>\n\n            <p class=\"text-caption mb-3\">\n              Click <b>Apply Suggested Gains</b> after selecting your pixel.\n            </p>\n\n            <v-btn block color=\"primary\" class=\"mt-auto\" :disabled=\"!suggested.red && !suggested.blue\"\n              @click=\"applySuggested\">\n              Apply Suggested Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- Step 4 -->\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">4. Repeat Until Saturation ≈ 0%</h3>\n            <p class=\"text-caption\">\n              Repeat steps 10 times until the saturation value approaches <b>0%</b>.\n            </p>\n\n            <div class=\"mb-2\" :style=\"{ color: hsl.s < 10 ? 'green' : hsl.s < 30 ? 'orange' : 'red' }\">\n              Current saturation: <b>{{ hsl.s }} %</b>\n            </div>\n\n            <div class=\"mb-4 text-center text-caption\">\n              <v-progress-linear :model-value=\"(loopCount / totalLoops) * 100\" color=\"primary\" height=\"40\"\n                class=\"rounded mb-1\" />\n\n              <div>\n                <template v-if=\"loopCount === 0\">\n                  Start calibration — click <b>Refresh</b>.\n                </template>\n                <template v-else-if=\"loopCount < totalLoops\">\n                  Iteration {{ loopCount }} / {{ totalLoops }} — sample & apply.\n                </template>\n                <template v-else>\n                  ✅ Calibration complete! Saturation should be near <b>0%</b>.\n                </template>\n              </div>\n            </div>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      selectedColor: \"#ffffff\",\n      hsl: { h: 0, s: 0, l: 0 },\n      loopCount: 0,\n      totalLoops: 10,\n      headers: [\n        { text: \"Channel\", value: \"channel\", align: \"start\" },\n        { text: \"Current\", value: \"current\", align: \"center\" },\n        { text: \"Suggested\", value: \"suggested\", align: \"center\" },\n      ],\n    };\n  },\n  computed: {\n    rows() {\n      return [\n        { channel: \"AWRed\", current: this.current.red, suggested: this.suggested.red },\n        { channel: \"AWBlue\", current: this.current.blue, suggested: this.suggested.blue },\n      ];\n    },\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.calibration_wbg_red !== undefined)\n          this.current.red = Number(p.calibration_wbg_red);\n        if (p.calibration_wbg_blue !== undefined)\n          this.current.blue = Number(p.calibration_wbg_blue);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: { white_balance_gain: this.current },\n      });\n    },\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    onColorInput(e) {\n      const hex = e.target.value;\n      this.selectedColor = hex;\n      this.hsl = this.hexToHsl(hex);\n      const { r, g, b } = this.hexToRgb(hex);\n      const redAdj = g - r + this.current.red;\n      const blueAdj = g - b + this.current.blue;\n      this.suggested.red = Math.max(0, Math.min(255, Math.round(redAdj)));\n      this.suggested.blue = Math.max(0, Math.min(255, Math.round(blueAdj)));\n    },\n    onManualEdit(ch, v) {\n      if (ch === \"AWRed\") this.suggested.red = v;\n      if (ch === \"AWBlue\") this.suggested.blue = v;\n    },\n    applySuggested() {\n      if (!this.suggested.red && !this.suggested.blue) return;\n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: parseInt(this.suggested.red, 10),\n            blue: parseInt(this.suggested.blue, 10),\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      this.current = { ...this.suggested };\n      if (this.loopCount < this.totalLoops) this.loopCount++;\n    },\n    hexToRgb(h) {\n      return {\n        r: parseInt(h.substr(1, 2), 16),\n        g: parseInt(h.substr(3, 2), 16),\n        b: parseInt(h.substr(5, 2), 16),\n      };\n    },\n    hexToHsl(hex) {\n      const { r, g, b } = this.hexToRgb(hex);\n      const rn = r / 255, gn = g / 255, bn = b / 255;\n      const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);\n      const l = (max + min) / 2;\n      let h = 0, s = 0;\n      if (max !== min) {\n        const d = max - min;\n        s = d / (1 - Math.abs(2 * l - 1));\n        switch (max) {\n          case rn: h = ((gn - bn) / d) % 6; break;\n          case gn: h = (bn - rn) / d + 2; break;\n          case bn: h = (rn - gn) / d + 4; break;\n        }\n        h *= 60;\n      }\n      return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 1000px; height: 750px; border: none; pointer-events: none; }\n.gain-table { border-radius: 8px; background: #fafafa; border: 1px solid #cfd8dc; }\n.table-header-title { background: #e3f2fd; font-weight: 600; font-size: 15px; }\n.suggested-input { max-width: 80px; margin: auto; }\n.colorpicker { height: 28px; width: 60px; margin-left: 8px; border: 1px solid #999; border-radius: 4px; cursor: pointer; vertical-align: middle; }\n</style>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 400,
-        "y": 140,
-        "wires": [
-            [
-                "615edad94a4f77e7"
+                "5ec541d6e203def5"
             ]
         ]
     },
@@ -4681,6 +4719,32 @@
             ]
         ]
     },
+    {
+        "id": "5ec541d6e203def5",
+        "type": "ui-template",
+        "z": "6426e7bea6900426",
+        "group": "af8acdfe9afbad74",
+        "page": "",
+        "ui": "",
+        "name": "Calibration - WB",
+        "order": 2,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n          <v-card-title class=\"text-left text-primary\">\n            White Balance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Refresh</h3>\n            <p class=\"text-caption mb-3\">\n              Click <b>Refresh Gains</b> to reset the calibration and start.\n            </p>\n            <v-btn block color=\"error\" class=\"mb-4\" @click=\"refreshGain\">\n              Refresh Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Sample Average Pixel (Auto)</h3>\n            <p class=\"text-caption mb-3\">\n              Average color sampled from the central **red box**.\n            </p>\n\n            <div class=\"d-flex align-center justify-center mb-3\">\n              <div\n                :style=\"{ 'background-color': `rgb(${sampledR}, ${sampledG}, ${sampledB})`, \n                          width: '40px', height: '40px', border: '2px solid #333', 'border-radius': '4px' }\"\n                class=\"mr-3\"\n              ></div>\n              <span class=\"font-mono text-subtitle-1\">\n                RGB: {{ sampledR }}, {{ sampledG }}, {{ sampledB }}\n              </span>\n            </div>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">3. Apply Suggested Gains</h3>\n\n            <v-data-table :items=\"rows\" density=\"comfortable\" hide-default-footer class=\"gain-table mb-6\">\n              <template #item.current=\"{ item }\">\n                <div class=\"text-center font-mono\">{{ item.current }}</div>\n              </template>\n              <template #item.suggested=\"{ item }\">\n                <v-text-field v-model.number=\"item.suggested\" type=\"number\" min=\"0\" hide-details density=\"compact\"\n                  variant=\"underlined\" class=\"text-primary text-center suggested-input\"\n                  @change=\"onManualEdit(item.channel,item.suggested)\" />\n              </template>\n            </v-data-table>\n\n            <p class=\"text-caption mb-3\">\n              Click <b>Apply Suggested Gains</b> to send the new calibration values.\n            </p>\n\n            <v-btn block color=\"primary\" class=\"mt-auto\" :disabled=\"!suggested.red && !suggested.blue\"\n              @click=\"applySuggested\">\n              Apply Suggested Gains\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">4. Repeat Until Saturation ≈ 0%</h3>\n            \n            <p class=\"text-caption\">\n              Repeat the cycle (Sample $\\rightarrow$ Apply) until the saturation is minimal.\n            </p>\n            \n            <div class=\"text-center mt-3 mb-4\">\n                <div \n                    class=\"text-h3 font-weight-bold\" \n                    :style=\"{ color: hsl.s < 5 ? 'green' : hsl.s < 15 ? 'orange' : 'red' }\"\n                >\n                    {{ hsl.s }} %\n                </div>\n                <div class=\"text-caption text-grey\">\n                    Current Saturation (Target: 0%)\n                </div>\n            </div>\n\n            <v-alert\n                :type=\"statusType\"\n                :icon=\"statusIcon\"\n                variant=\"tonal\"\n                density=\"compact\"\n            >\n              <div v-if=\"loopCount === 0\">\n                  <v-icon size=\"small\" icon=\"mdi-hand-pointing-up\" class=\"mr-1\"></v-icon>\n                  <span class=\"font-weight-bold\">Ready.</span> Click \"Refresh Gains\" to begin.\n              </div>\n              <div v-else-if=\"hsl.s < 5\">\n                  <v-icon size=\"small\" icon=\"mdi-star-four-points\" class=\"mr-1\"></v-icon>\n                  <span class=\"font-weight-bold\">Calibration Complete</span> ({{ loopCount }} Iterations)\n              </div>\n              <div v-else>\n                  <v-icon size=\"small\" icon=\"mdi-repeat\" class=\"mr-1\"></v-icon>\n                  Iteration <span class=\"font-weight-bold\">{{ loopCount }}</span> — Continue sampling & applying.\n              </div>\n            </v-alert>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      \n      sampledR: 0,\n      sampledG: 0,\n      sampledB: 0,\n\n      hsl: { h: 0, s: 0, l: 0 },\n      loopCount: 0, \n      \n      html2canvasReady: false,\n      captureInterval: null,\n    };\n  },\n  computed: {\n    rows() {\n      return [\n        { channel: \"AWRed\", current: this.current.red, suggested: this.suggested.red },\n        { channel: \"AWBlue\", current: this.current.blue, suggested: this.suggested.blue },\n      ];\n    },\n    statusType() {\n        if (this.loopCount === 0) return 'info';\n        if (this.hsl.s < 5) return 'success';\n        return 'warning';\n    },\n    statusIcon() {\n        if (this.loopCount === 0) return 'mdi-hand-pointing-up';\n        if (this.hsl.s < 5) return 'mdi-star-four-points';\n        return 'mdi-progress-alert';\n    }\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.calibration_wbg_red !== undefined)\n          this.current.red = Number(p.calibration_wbg_red);\n        if (p.calibration_wbg_blue !== undefined)\n          this.current.blue = Number(p.calibration_wbg_blue);\n      },\n      deep: true,\n    },\n  },\n  \n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // --------------------------------------------\n    // GENERAL METHODS\n    // --------------------------------------------\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    \n    // --------------------------------------------\n    // GAIN CONTROL\n    // --------------------------------------------\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.sendUpdate(\"imager/image\", {\n        action: \"settings\",\n        settings: { white_balance_gain: this.current },\n      });\n    },\n\n    onManualEdit(ch, v) {\n      if (ch === \"AWRed\") this.suggested.red = v;\n      if (ch === \"AWBlue\") this.suggested.blue = v;\n    },\n\n    applySuggested() {\n      if (!this.suggested.red && !this.suggested.blue) return;\n      \n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: parseInt(this.suggested.red, 10),\n            blue: parseInt(this.suggested.blue, 10),\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      \n      this.current = { \n        red: parseInt(this.suggested.red, 10), \n        blue: parseInt(this.suggested.blue, 10) \n      };\n\n      this.loopCount++;\n    },\n    \n    // --------------------------------------------\n    // COLOR UTILITIES\n    // --------------------------------------------\n    rgbToHsl(r, g, b) {\n      const rn = r / 255, gn = g / 255, bn = b / 255;\n      const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);\n      const l = (max + min) / 2;\n      let h = 0, s = 0;\n      if (max !== min) {\n        const d = max - min;\n        s = d / (1 - Math.abs(2 * l - 1));\n        switch (max) {\n          case rn: h = ((gn - bn) / d) % 6; break;\n          case gn: h = (bn - rn) / d + 2; break;\n          case bn: h = (rn - gn) / d + 4; break;\n        }\n        h *= 60;\n      }\n      return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n    },\n    \n    // --------------------------------------------\n    // AUTO CAPTURE CONTROL (Always ON)\n    // --------------------------------------------\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureColorAndCalculateGains();\n      }, 500); // update rate\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // --------------------------------------------\n    // PIXEL CAPTURE FROM IFRAME (Core Logic)\n    // --------------------------------------------\n    async captureColorAndCalculateGains() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n\n        let sumR = 0, sumG = 0, sumB = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          sumR += pixelData[i];\n          sumG += pixelData[i + 1];\n          sumB += pixelData[i + 2];\n          count++;\n        }\n        \n        const avgR = count > 0 ? Math.round(sumR / count) : 0;\n        const avgG = count > 0 ? Math.round(sumG / count) : 0;\n        const avgB = count > 0 ? Math.round(sumB / count) : 0;\n\n        this.sampledR = avgR;\n        this.sampledG = avgG;\n        this.sampledB = avgB;\n        \n        this.hsl = this.rgbToHsl(avgR, avgG, avgB);\n        \n        const redAdj = avgG - avgR + this.current.red;\n        const blueAdj = avgG - avgB + this.current.blue;\n        \n        this.suggested.red = Math.max(0, Math.min(255, Math.round(redAdj)));\n        this.suggested.blue = Math.max(0, Math.min(255, Math.round(blueAdj)));\n\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe { \n  width: 100%;\n  height: 100%;\n  border: none; \n  pointer-events: none; \n}\n.calibration-container {\n  position: relative;\n}\n\n/* Styles for the visible sampling box overlay */\n.sampling-overlay {\n  position: absolute;\n  /* (1/3)x(1/3) of the parent size, centered */\n  width: calc(100% / 3); \n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red; \n  pointer-events: none; \n  z-index: 10;\n}\n\n/* Other styles */\n.gain-table { border-radius: 8px; background: #fafafa; border: 1px solid #cfd8dc; }\n.suggested-input { max-width: 80px; margin: auto; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 380,
+        "y": 180,
+        "wires": [
+            [
+                "615edad94a4f77e7"
+            ]
+        ]
+    },
     {
         "id": "5fbdba7e61973f9a",
         "type": "ui-template",
@@ -4818,7 +4882,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card class=\"calibration-container\" style=\"width:100%; height:750px; position:relative; overflow:hidden;\">\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n          \n          <div class=\"target-overlay\">\n             <v-icon color=\"white\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n            <v-chip size=\"x-small\" color=\"grey\" class=\"ml-2\" variant=\"outlined\">\n               Target: {{ targetLuminance }}\n            </v-chip>\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">1. Current State</h3>\n            <div class=\"d-flex align-center justify-space-between bg-grey-lighten-4 pa-2 rounded\">\n                <span>LED Intensity:</span>\n                <strong class=\"text-primary font-mono\">{{ currentLedValue.toFixed(4) }}</strong>\n            </div>\n            <v-btn block color=\"grey-darken-1\" variant=\"text\" size=\"small\" class=\"mt-1\" @click=\"refreshState\">\n              Refresh Data\n            </v-btn>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <h3 class=\"text-subtitle-1 mb-2\">2. Measure</h3>\n            \n            <div class=\"d-flex align-center justify-center mb-4\">\n               <input class=\"colorpicker\" type=\"color\" v-model=\"selectedColor\" @input=\"onColorInput\"/>\n            </div>\n\n            <div class=\"text-center mb-2\">\n                <div class=\"text-h3 font-weight-bold\" :class=\"luminanceColor\">\n                    {{ currentLuminance.toFixed(0) }}\n                </div>\n                <div class=\"text-caption text-grey\">Target: {{ targetLuminance }}</div>\n            </div>\n\n            <v-progress-linear\n                :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n                :color=\"getProgressColor(currentLuminance)\"\n                height=\"20\"\n                rounded\n            >\n                <template v-slot:default=\"{ value }\">\n                    <strong style=\"color:white; text-shadow: 0 0 2px black;\">{{ Math.round(currentLuminance) }}</strong>\n                </template>\n            </v-progress-linear>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section>\n            <h3 class=\"text-subtitle-1 mb-2\">3. Action</h3>\n            \n            <v-alert v-if=\"suggestedLedValue !== null\" :type=\"isTargetReached ? 'success' : 'info'\" variant=\"tonal\" density=\"compact\" class=\"mb-3\">\n                <div v-if=\"isTargetReached\">\n                    Target reached ({{targetLuminance}} ± {{tolerance}}).\n                </div>\n                <div v-else>\n                    New LED Value: <b>{{ suggestedLedValue.toFixed(4) }}</b>\n                </div>\n            </v-alert>\n\n            <v-btn \n                block \n                size=\"large\"\n                :color=\"isTargetReached ? 'success' : 'primary'\" \n                :disabled=\"suggestedLedValue === null\"\n                @click=\"applyCorrection\"\n            >\n                {{ isTargetReached ? 'Done' : 'Apply Correction' }}\n            </v-btn>\n          </section>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      currentLedValue: 0.5, \n      suggestedLedValue: null,\n      selectedColor: \"#000000\",\n      currentLuminance: 0,\n      targetLuminance: 230,\n      tolerance: 2,\n      \n      // SINGLE CURVE DATA (Based on your V3 dataset)\n      // Format: { lum: Measured Luminance (0-255), val: LED Intensity (0-1) }\n      curveData: [\n        { lum: 170.00, val: 0.2744 }, \n        { lum: 180.00, val: 0.4633 }, \n        { lum: 194.00, val: 0.6027 },\n        { lum: 210.00, val: 0.6994 }, \n        { lum: 229.00, val: 0.8992 }, \n        { lum: 232.00, val: 0.9087 },\n        { lum: 234.00, val: 0.9176 }, \n        { lum: 238.00, val: 0.9345 }, \n        { lum: 253.00, val: 0.9937 },\n        { lum: 255.00, val: 1.0000 }\n      ]\n    };\n  },\n  computed: {\n    isTargetReached() {\n        return Math.abs(this.currentLuminance - this.targetLuminance) <= this.tolerance;\n    },\n    luminanceColor() {\n        const diff = Math.abs(this.currentLuminance - this.targetLuminance);\n        if (diff <= this.tolerance) return 'text-success';\n        if (diff <= 10) return 'text-warning';\n        return 'text-error';\n    }\n  },\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        // Update LED Intensity from incoming message\n        if (p.settings && p.settings.led_intensity !== undefined) {\n            this.currentLedValue = Number(p.settings.led_intensity);\n        }\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    refreshState() {\n        this.sendUpdate(\"imager/request_settings\", {}); \n    },\n    sendUpdate(topic, payload) {\n      if (typeof this.send === \"function\") this.send({ topic, payload });\n    },\n    onColorInput(e) {\n      const hex = e.target.value;\n      this.selectedColor = hex;\n      this.currentLuminance = this.getLuminanceFromHex(hex);\n      this.calculateNextStep();\n    },\n    getLuminanceFromHex(hex) {\n        const r = parseInt(hex.substr(1, 2), 16);\n        const g = parseInt(hex.substr(3, 2), 16);\n        const b = parseInt(hex.substr(5, 2), 16);\n        // Simple average luminance\n        return (r + g + b) / 3;\n    },\n    getProgressColor(lum) {\n        if (Math.abs(lum - this.targetLuminance) < 5) return 'success';\n        if (lum > this.targetLuminance) return 'deep-orange';\n        return 'blue-grey';\n    },\n    getTheoreticalLedValue(lum) {\n        const data = this.curveData;\n        \n        // Handle out of bounds\n        if (lum <= data[0].lum) return data[0].val;\n        if (lum >= data[data.length - 1].lum) return data[data.length - 1].val;\n\n        // Interpolation\n        for (let i = 0; i < data.length - 1; i++) {\n            const p1 = data[i];\n            const p2 = data[i+1];\n            if (lum >= p1.lum && lum <= p2.lum) {\n                const ratio = (lum - p1.lum) / (p2.lum - p1.lum);\n                return p1.val + ratio * (p2.val - p1.val);\n            }\n        }\n        return 0.5;\n    },\n    calculateNextStep() {\n        // 1. Theoretical LED for current reading\n        const theoreticalCurrent = this.getTheoreticalLedValue(this.currentLuminance);\n        // 2. Theoretical LED for target (230)\n        const theoreticalTarget = this.getTheoreticalLedValue(this.targetLuminance);\n        \n        // 3. Calculate Delta\n        const delta = theoreticalTarget - theoreticalCurrent;\n        \n        // 4. Apply Delta to Real Value\n        let nextVal = this.currentLedValue + delta;\n        nextVal = Math.max(0, Math.min(1, nextVal));\n        \n        this.suggestedLedValue = nextVal;\n    },\n    applyCorrection() {\n        if (this.suggestedLedValue === null) return;\n        this.sendUpdate(\"imager/image\", {\n            action: \"settings\",\n            settings: {\n                led_intensity: Number(this.suggestedLedValue.toFixed(5))\n            }\n        });\n        this.currentLedValue = this.suggestedLedValue;\n    }\n  }\n};\n</script>\n\n<style scoped>\n.calibration-iframe { width: 100%; height: 100%; border: none; }\n.target-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0.5; }\n.colorpicker { height: 40px; width: 100%; border: 2px solid #ddd; border-radius: 4px; cursor: pointer; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-3\">\n              <h3 class=\"text-subtitle-1 ma-0\">1. LED Control</h3>\n              <v-chip color=\"primary\" variant=\"flat\" class=\"font-mono\">\n                {{ currentLedValue.toFixed(4) }}\n              </v-chip>\n            </div>\n\n            <v-row no-gutters class=\"align-center\">\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-minus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(-0.0001)\"\n                  class=\"mr-2\"\n                />\n              </v-col>\n\n              <v-col class=\"flex-grow-1\">\n                <v-slider\n                  v-model=\"currentLedValue\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.0001\"\n                  color=\"primary\"\n                  track-color=\"grey-lighten-2\"\n                  thumb-label\n                  hide-details\n                  @end=\"onSliderRelease\"\n                  class=\"align-center mt-0\"\n                ></v-slider>\n              </v-col>\n\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-plus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(+0.0001)\"\n                  class=\"ml-2\"\n                />\n              </v-col>\n            </v-row>\n            </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-2\">\n              <h3 class=\"text-subtitle-1 ma-0\">2. Measured Luminance</h3>\n            </div>\n\n            <div class=\"text-center mb-2\">\n              <div class=\"text-h3 font-weight-bold\">\n                {{ currentLuminance.toFixed(0) }}\n              </div>\n              <div class=\"text-caption text-grey\">\n                Measured from central region of preview\n              </div>\n            </div>\n\n            <v-progress-linear\n              :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n              color=\"primary\"\n              height=\"20\"\n              rounded\n            >\n              <template #default=\"{ value }\">\n                <strong style=\"color:white; text-shadow: 0 0 2px black;\">\n                  {{ Math.round(currentLuminance) }}\n                </strong>\n              </template>\n            </v-progress-linear>\n          </section>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      currentLedValue: 0.5,\n      currentLuminance: 0,\n      html2canvasReady: false,\n      captureInterval: null,\n    };\n  },\n\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.led_intensity !== undefined)\n          this.currentLedValue = Number(p.led_intensity);\n        if (p.value !== undefined)\n          this.currentLedValue = Number(p.value);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // --------------------------------------------\n    // LED CONTROL\n    // --------------------------------------------\n    adjustLed(step) {\n      let v = this.currentLedValue + step;\n      v = Math.max(0, Math.min(1, v));\n      this.currentLedValue = v;\n      this.onSliderRelease();\n    },\n\n    onSliderRelease() {\n      this.sendUpdate(\"light\", {\n        action: \"on\",\n        value: Number(this.currentLedValue.toFixed(5)),\n      });\n    },\n\n    sendUpdate(topic, payload) {\n      const msg = { topic, payload };\n      if (this.$emit) this.$emit(\"msg-input\", msg);\n      if (this.send) this.send(msg);\n    },\n\n    // --------------------------------------------\n    // AUTO CAPTURE CONTROL (Always ON)\n    // --------------------------------------------\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureLuminance();\n      }, 500); // update rate\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // --------------------------------------------\n    // PIXEL CAPTURE FROM IFRAME\n    // --------------------------------------------\n    async captureLuminance() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n\n        let sum = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          const r = pixelData[i];\n          const g = pixelData[i + 1];\n          const b = pixelData[i + 2];\n          sum += (r + g + b) / 3;\n          count++;\n        }\n\n        this.currentLuminance = count > 0 ? sum / count : 0;\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n.target-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sampling-overlay {\n  position: absolute;\n  width: calc(100% / 3); \n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red; \n  pointer-events: none; \n  z-index: 10;\n}\n\n.font-mono {\n  font-family: 'Roboto Mono', monospace;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4850,15 +4914,15 @@
         "type": "function",
         "z": "14c685bd04db8be5",
         "name": "set led_intensity",
-        "func": "if (msg.topic) {\n    global.set(\"led_intensity\", msg.payload.settings.led_intensity);}\nreturn msg;",
+        "func": "if (msg.topic) {\n    global.set(\"led_intensity\", msg.payload.value);}\nreturn msg;",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 980,
-        "y": 180,
+        "x": 880,
+        "y": 160,
         "wires": [
             []
         ]
@@ -4873,7 +4937,7 @@
         "rules": [
             {
                 "t": "eq",
-                "v": "imager/image",
+                "v": "light",
                 "vt": "str"
             }
         ],
@@ -4884,6 +4948,7 @@
         "y": 140,
         "wires": [
             [
+                "785c59c553d71326",
                 "0283e992ff5da0f6"
             ]
         ]
@@ -5315,6 +5380,95 @@
             []
         ]
     },
+    {
+        "id": "64ae825a687fb054",
+        "type": "ecotaxa",
+        "z": "8555b76c53e789e0",
+        "name": "Import to Ecotaxa Project",
+        "api_url": "https://ecotaxa.obs-vlfr.fr/api/",
+        "project_id": "9366",
+        "x": 830,
+        "y": 300,
+        "wires": [
+            [
+                "c21f20a7a9902ee4"
+            ]
+        ]
+    },
+    {
+        "id": "af1ec6323cc00231",
+        "type": "inject",
+        "z": "8555b76c53e789e0",
+        "name": "Lancer import",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": "0",
+        "topic": "",
+        "x": 310,
+        "y": 300,
+        "wires": [
+            [
+                "28f8eb0318735246"
+            ]
+        ]
+    },
+    {
+        "id": "c21f20a7a9902ee4",
+        "type": "debug",
+        "z": "8555b76c53e789e0",
+        "name": "Show import result",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1110,
+        "y": 300,
+        "wires": []
+    },
+    {
+        "id": "28f8eb0318735246",
+        "type": "function",
+        "z": "8555b76c53e789e0",
+        "name": "Set file_path",
+        "func": "msg.payload = {}\nmsg.payload.file_path = \"/home/pi/data/export/ecotaxa/ecotaxa_A_2.zip\"\n\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 570,
+        "y": 300,
+        "wires": [
+            [
+                "64ae825a687fb054",
+                "1457a0786f787415"
+            ]
+        ]
+    },
+    {
+        "id": "1457a0786f787415",
+        "type": "debug",
+        "z": "8555b76c53e789e0",
+        "name": "debug 9",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 820,
+        "y": 200,
+        "wires": []
+    },
     {
         "id": "7ccb5c8c66ad170a",
         "type": "inject",

From 1362391321795546220afa12afc3099e38096f6e Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 27 Nov 2025 12:01:40 +0000
Subject: [PATCH 12/36] update

---
 node-red/projects/dashboard/flows.json | 335 ++++++++++++++-----------
 1 file changed, 188 insertions(+), 147 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 647126a3d..07811fb70 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -713,7 +713,7 @@
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "6"
             },
             {
                 "name": "Desktop",
@@ -1457,7 +1457,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 6,
+        "order": 4,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1492,34 +1492,6 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "44d42558adf7baf7",
-        "type": "ui-group",
-        "name": "ChatGPT 5.1 Pro v1",
-        "page": "d129fac8e7742d5b",
-        "width": "12",
-        "height": 1,
-        "order": 4,
-        "showTitle": true,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
-    {
-        "id": "0cb96323818204ca",
-        "type": "ui-group",
-        "name": "Gemini 3 Pro v2",
-        "page": "d129fac8e7742d5b",
-        "width": "12",
-        "height": 1,
-        "order": 5,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "34112984a39c35bd",
         "type": "ui-page",
@@ -1580,8 +1552,8 @@
         "order": 3,
         "showTitle": false,
         "className": "",
-        "visible": "true",
-        "disabled": "false",
+        "visible": true,
+        "disabled": false,
         "groupType": "default"
     },
     {
@@ -1863,7 +1835,7 @@
         "y": 40,
         "wires": [
             [
-                "8faec1a8f5c2527a"
+                "d55333906aeb7517"
             ]
         ]
     },
@@ -1906,31 +1878,6 @@
             ]
         ]
     },
-    {
-        "id": "8faec1a8f5c2527a",
-        "type": "delay",
-        "z": "07f3b717f2a2c8c7",
-        "name": "",
-        "pauseType": "delay",
-        "timeout": "1",
-        "timeoutUnits": "seconds",
-        "rate": "1",
-        "nbRateUnits": "1",
-        "rateUnits": "second",
-        "randomFirst": "1",
-        "randomLast": "5",
-        "randomUnits": "seconds",
-        "drop": false,
-        "allowrate": false,
-        "outputs": 1,
-        "x": 180,
-        "y": 140,
-        "wires": [
-            [
-                "d55333906aeb7517"
-            ]
-        ]
-    },
     {
         "id": "d55333906aeb7517",
         "type": "function",
@@ -1943,7 +1890,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 360,
+        "x": 120,
         "y": 140,
         "wires": [
             [
@@ -1963,13 +1910,13 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid>\n        <v-card elevation=\"4\">\n            <!-- Header -->\n            <v-card-item class=\"bg-primary pa-4\">\n                <template v-slot:prepend>\n                    <v-icon icon=\"mdi-microscope\" size=\"large\" class=\"mr-2\"></v-icon>\n                </template>\n                <v-card-title class=\"text-h6 font-weight-bold\">\n                    Welcome to the PlanktoScope GUI\n                </v-card-title>\n            </v-card-item>\n\n            <v-card-text>\n                <div class=\"text-h6 my-4\">Enter your information</div>\n\n                <v-form ref=\"form\" v-model=\"valid\">\n                    <v-row>\n                        <!-- Region / Country Select -->\n                        <v-col cols=\"12\" md=\"12\">\n                            <v-autocomplete v-model=\"formData.country\" :items=\"countries\" item-title=\"label\"\n                                item-value=\"value\" label=\"Region\" placeholder=\"Please select\" variant=\"outlined\"\n                                density=\"compact\" clearable></v-autocomplete>\n                        </v-col>\n\n                        <!-- Timezone Select -->\n                        <v-col cols=\"12\" md=\"12\">\n                            <v-autocomplete v-model=\"formData.timezone\" :items=\"timezones\" label=\"Timezone\"\n                                placeholder=\"Please select\" variant=\"outlined\" density=\"compact\"\n                                clearable></v-autocomplete>\n                        </v-col>\n                    </v-row>\n                </v-form>\n            </v-card-text>\n\n            <!-- Actions -->\n            <v-card-actions>\n                <v-spacer></v-spacer>\n                <v-btn variant=\"flat\" size=\"large\" class=\"px-6\" color=\"primary\" @click=\"submitForm\" :disabled=\"!isValid\">\n                    <v-icon start>mdi-content-save</v-icon>\n                    Save Configuration\n                </v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-container>\n</template>\n\n<script>\n    export default {\n    data() {\n        return {\n            valid: true,\n            formData: {\n                country: \"\",\n                timezone: \"UTC\", // Valeur par défaut modifiée\n            },\n            // Large lists are loaded in mounted to keep data cleaner\n            countries: [],\n            timezones: []\n        };\n    },\n    computed: {\n        isValid() {\n            return this.formData.country && this.formData.timezone;\n        }\n    },\n    methods: {\n        submitForm() {\n            // Send the form data to Node-RED\n            this.send({ payload: this.formData });\n        }\n    },\n    mounted() {\n        // Populating the massive lists provided in the prompt\n        this.countries = [\n            { value: \"AF\", label: \"Afghanistan\" },\n            { value: \"AX\", label: \"Åland Islands\" },\n            { value: \"AL\", label: \"Albania\" },\n            { value: \"DZ\", label: \"Algeria\" },\n            { value: \"AD\", label: \"Andorra\" },\n            { value: \"AO\", label: \"Angola\" },\n            { value: \"AI\", label: \"Anguilla\" },\n            { value: \"AQ\", label: \"Antarctica\" },\n            { value: \"AG\", label: \"Antigua & Barbuda\" },\n            { value: \"AR\", label: \"Argentina\" },\n            { value: \"AM\", label: \"Armenia\" },\n            { value: \"AW\", label: \"Aruba\" },\n            { value: \"AU\", label: \"Australia\" },\n            { value: \"AT\", label: \"Austria\" },\n            { value: \"AZ\", label: \"Azerbaijan\" },\n            { value: \"BS\", label: \"Bahamas\" },\n            { value: \"BH\", label: \"Bahrain\" },\n            { value: \"BD\", label: \"Bangladesh\" },\n            { value: \"BB\", label: \"Barbados\" },\n            { value: \"BY\", label: \"Belarus\" },\n            { value: \"BE\", label: \"Belgium\" },\n            { value: \"BZ\", label: \"Belize\" },\n            { value: \"BJ\", label: \"Benin\" },\n            { value: \"BM\", label: \"Bermuda\" },\n            { value: \"BT\", label: \"Bhutan\" },\n            { value: \"BO\", label: \"Bolivia\" },\n            { value: \"BA\", label: \"Bosnia & Herzegovina\" },\n            { value: \"BW\", label: \"Botswana\" },\n            { value: \"BV\", label: \"Bouvet Island\" },\n            { value: \"BR\", label: \"Brazil\" },\n            { value: \"GB\", label: \"Britain (UK)\" },\n            { value: \"IO\", label: \"British Indian Ocean Territory\" },\n            { value: \"BN\", label: \"Brunei\" },\n            { value: \"BG\", label: \"Bulgaria\" },\n            { value: \"BF\", label: \"Burkina Faso\" },\n            { value: \"BI\", label: \"Burundi\" },\n            { value: \"KH\", label: \"Cambodia\" },\n            { value: \"CM\", label: \"Cameroon\" },\n            { value: \"CA\", label: \"Canada\" },\n            { value: \"CV\", label: \"Cape Verde\" },\n            { value: \"BQ\", label: \"Caribbean NL\" },\n            { value: \"KY\", label: \"Cayman Islands\" },\n            { value: \"CF\", label: \"Central African Rep.\" },\n            { value: \"TD\", label: \"Chad\" },\n            { value: \"CL\", label: \"Chile\" },\n            { value: \"CN\", label: \"China\" },\n            { value: \"CX\", label: \"Christmas Island\" },\n            { value: \"CC\", label: \"Cocos (Keeling) Islands\" },\n            { value: \"CO\", label: \"Colombia\" },\n            { value: \"KM\", label: \"Comoros\" },\n            { value: \"CD\", label: \"Congo (Dem. Rep.)\" },\n            { value: \"CG\", label: \"Congo (Rep.)\" },\n            { value: \"CK\", label: \"Cook Islands\" },\n            { value: \"CR\", label: \"Costa Rica\" },\n            { value: \"CI\", label: \"Côte d'Ivoire\" },\n            { value: \"HR\", label: \"Croatia\" },\n            { value: \"CU\", label: \"Cuba\" },\n            { value: \"CW\", label: \"Curaçao\" },\n            { value: \"CY\", label: \"Cyprus\" },\n            { value: \"CZ\", label: \"Czech Republic\" },\n            { value: \"DK\", label: \"Denmark\" },\n            { value: \"DJ\", label: \"Djibouti\" },\n            { value: \"DM\", label: \"Dominica\" },\n            { value: \"DO\", label: \"Dominican Republic\" },\n            { value: \"TL\", label: \"East Timor\" },\n            { value: \"EC\", label: \"Ecuador\" },\n            { value: \"EG\", label: \"Egypt\" },\n            { value: \"SV\", label: \"El Salvador\" },\n            { value: \"GQ\", label: \"Equatorial Guinea\" },\n            { value: \"ER\", label: \"Eritrea\" },\n            { value: \"EE\", label: \"Estonia\" },\n            { value: \"SZ\", label: \"Eswatini (Swaziland)\" },\n            { value: \"ET\", label: \"Ethiopia\" },\n            { value: \"FK\", label: \"Falkland Islands\" },\n            { value: \"FO\", label: \"Faroe Islands\" },\n            { value: \"FJ\", label: \"Fiji\" },\n            { value: \"FI\", label: \"Finland\" },\n            { value: \"FR\", label: \"France\" },\n            { value: \"GF\", label: \"French Guiana\" },\n            { value: \"PF\", label: \"French Polynesia\" },\n            { value: \"TF\", label: \"French S. Terr.\" },\n            { value: \"GA\", label: \"Gabon\" },\n            { value: \"GM\", label: \"Gambia\" },\n            { value: \"GE\", label: \"Georgia\" },\n            { value: \"DE\", label: \"Germany\" },\n            { value: \"GH\", label: \"Ghana\" },\n            { value: \"GI\", label: \"Gibraltar\" },\n            { value: \"GR\", label: \"Greece\" },\n            { value: \"GL\", label: \"Greenland\" },\n            { value: \"GD\", label: \"Grenada\" },\n            { value: \"GP\", label: \"Guadeloupe\" },\n            { value: \"GU\", label: \"Guam\" },\n            { value: \"GT\", label: \"Guatemala\" },\n            { value: \"GG\", label: \"Guernsey\" },\n            { value: \"GN\", label: \"Guinea\" },\n            { value: \"GW\", label: \"Guinea-Bissau\" },\n            { value: \"GY\", label: \"Guyana\" },\n            { value: \"HT\", label: \"Haiti\" },\n            { value: \"HM\", label: \"Heard Island & McDonald Islands\" },\n            { value: \"HN\", label: \"Honduras\" },\n            { value: \"HK\", label: \"Hong Kong\" },\n            { value: \"HU\", label: \"Hungary\" },\n            { value: \"IS\", label: \"Iceland\" },\n            { value: \"IN\", label: \"India\" },\n            { value: \"ID\", label: \"Indonesia\" },\n            { value: \"IR\", label: \"Iran\" },\n            { value: \"IQ\", label: \"Iraq\" },\n            { value: \"IE\", label: \"Ireland\" },\n            { value: \"IM\", label: \"Isle of Man\" },\n            { value: \"IL\", label: \"Israel\" },\n            { value: \"IT\", label: \"Italy\" },\n            { value: \"JM\", label: \"Jamaica\" },\n            { value: \"JP\", label: \"Japan\" },\n            { value: \"JE\", label: \"Jersey\" },\n            { value: \"JO\", label: \"Jordan\" },\n            { value: \"KZ\", label: \"Kazakhstan\" },\n            { value: \"KE\", label: \"Kenya\" },\n            { value: \"KI\", label: \"Kiribati\" },\n            { value: \"KP\", label: \"Korea (North)\" },\n            { value: \"KR\", label: \"Korea (South)\" },\n            { value: \"KW\", label: \"Kuwait\" },\n            { value: \"KG\", label: \"Kyrgyzstan\" },\n            { value: \"LA\", label: \"Laos\" },\n            { value: \"LV\", label: \"Latvia\" },\n            { value: \"LB\", label: \"Lebanon\" },\n            { value: \"LS\", label: \"Lesotho\" },\n            { value: \"LR\", label: \"Liberia\" },\n            { value: \"LY\", label: \"Libya\" },\n            { value: \"LI\", label: \"Liechtenstein\" },\n            { value: \"LT\", label: \"Lithuania\" },\n            { value: \"LU\", label: \"Luxembourg\" },\n            { value: \"MO\", label: \"Macau\" },\n            { value: \"MG\", label: \"Madagascar\" },\n            { value: \"MW\", label: \"Malawi\" },\n            { value: \"MY\", label: \"Malaysia\" },\n            { value: \"MV\", label: \"Maldives\" },\n            { value: \"ML\", label: \"Mali\" },\n            { value: \"MT\", label: \"Malta\" },\n            { value: \"MH\", label: \"Marshall Islands\" },\n            { value: \"MQ\", label: \"Martinique\" },\n            { value: \"MR\", label: \"Mauritania\" },\n            { value: \"MU\", label: \"Mauritius\" },\n            { value: \"YT\", label: \"Mayotte\" },\n            { value: \"MX\", label: \"Mexico\" },\n            { value: \"FM\", label: \"Micronesia\" },\n            { value: \"MD\", label: \"Moldova\" },\n            { value: \"MC\", label: \"Monaco\" },\n            { value: \"MN\", label: \"Mongolia\" },\n            { value: \"ME\", label: \"Montenegro\" },\n            { value: \"MS\", label: \"Montserrat\" },\n            { value: \"MA\", label: \"Morocco\" },\n            { value: \"MZ\", label: \"Mozambique\" },\n            { value: \"MM\", label: \"Myanmar (Burma)\" },\n            { value: \"NA\", label: \"Namibia\" },\n            { value: \"NR\", label: \"Nauru\" },\n            { value: \"NP\", label: \"Nepal\" },\n            { value: \"NL\", label: \"Netherlands\" },\n            { value: \"NC\", label: \"New Caledonia\" },\n            { value: \"NZ\", label: \"New Zealand\" },\n            { value: \"NI\", label: \"Nicaragua\" },\n            { value: \"NE\", label: \"Niger\" },\n            { value: \"NG\", label: \"Nigeria\" },\n            { value: \"NU\", label: \"Niue\" },\n            { value: \"NF\", label: \"Norfolk Island\" },\n            { value: \"MK\", label: \"North Macedonia\" },\n            { value: \"MP\", label: \"Northern Mariana Islands\" },\n            { value: \"NO\", label: \"Norway\" },\n            { value: \"OM\", label: \"Oman\" },\n            { value: \"PK\", label: \"Pakistan\" },\n            { value: \"PW\", label: \"Palau\" },\n            { value: \"PS\", label: \"Palestine\" },\n            { value: \"PA\", label: \"Panama\" },\n            { value: \"PG\", label: \"Papua New Guinea\" },\n            { value: \"PY\", label: \"Paraguay\" },\n            { value: \"PE\", label: \"Peru\" },\n            { value: \"PH\", label: \"Philippines\" },\n            { value: \"PN\", label: \"Pitcairn\" },\n            { value: \"PL\", label: \"Poland\" },\n            { value: \"PT\", label: \"Portugal\" },\n            { value: \"PR\", label: \"Puerto Rico\" },\n            { value: \"QA\", label: \"Qatar\" },\n            { value: \"RE\", label: \"Réunion\" },\n            { value: \"RO\", label: \"Romania\" },\n            { value: \"RU\", label: \"Russia\" },\n            { value: \"RW\", label: \"Rwanda\" },\n            { value: \"AS\", label: \"Samoa (American)\" },\n            { value: \"WS\", label: \"Samoa (western)\" },\n            { value: \"SM\", label: \"San Marino\" },\n            { value: \"ST\", label: \"Sao Tome & Principe\" },\n            { value: \"SA\", label: \"Saudi Arabia\" },\n            { value: \"SN\", label: \"Senegal\" },\n            { value: \"RS\", label: \"Serbia\" },\n            { value: \"SC\", label: \"Seychelles\" },\n            { value: \"SL\", label: \"Sierra Leone\" },\n            { value: \"SG\", label: \"Singapore\" },\n            { value: \"SK\", label: \"Slovakia\" },\n            { value: \"SI\", label: \"Slovenia\" },\n            { value: \"SB\", label: \"Solomon Islands\" },\n            { value: \"SO\", label: \"Somalia\" },\n            { value: \"ZA\", label: \"South Africa\" },\n            { value: \"GS\", label: \"South Georgia & the South Sandwich Islands\" },\n            { value: \"SS\", label: \"South Sudan\" },\n            { value: \"ES\", label: \"Spain\" },\n            { value: \"LK\", label: \"Sri Lanka\" },\n            { value: \"BL\", label: \"St Barthelemy\" },\n            { value: \"SH\", label: \"St Helena\" },\n            { value: \"KN\", label: \"St Kitts & Nevis\" },\n            { value: \"LC\", label: \"St Lucia\" },\n            { value: \"SX\", label: \"St Maarten (Dutch)\" },\n            { value: \"MF\", label: \"St Martin (French)\" },\n            { value: \"PM\", label: \"St Pierre & Miquelon\" },\n            { value: \"VC\", label: \"St Vincent\" },\n            { value: \"SD\", label: \"Sudan\" },\n            { value: \"SR\", label: \"Suriname\" },\n            { value: \"SJ\", label: \"Svalbard & Jan Mayen\" },\n            { value: \"SE\", label: \"Sweden\" },\n            { value: \"CH\", label: \"Switzerland\" },\n            { value: \"SY\", label: \"Syria\" },\n            { value: \"TW\", label: \"Taiwan\" },\n            { value: \"TJ\", label: \"Tajikistan\" },\n            { value: \"TZ\", label: \"Tanzania\" },\n            { value: \"TH\", label: \"Thailand\" },\n            { value: \"TG\", label: \"Togo\" },\n            { value: \"TK\", label: \"Tokelau\" },\n            { value: \"TO\", label: \"Tonga\" },\n            { value: \"TT\", label: \"Trinidad & Tobago\" },\n            { value: \"TN\", label: \"Tunisia\" },\n            { value: \"TR\", label: \"Turkey\" },\n            { value: \"TM\", label: \"Turkmenistan\" },\n            { value: \"TC\", label: \"Turks & Caicos Is\" },\n            { value: \"TV\", label: \"Tuvalu\" },\n            { value: \"UG\", label: \"Uganda\" },\n            { value: \"UA\", label: \"Ukraine\" },\n            { value: \"AE\", label: \"United Arab Emirates\" },\n            { value: \"US\", label: \"United States\" },\n            { value: \"UY\", label: \"Uruguay\" },\n            { value: \"UM\", label: \"US minor outlying islands\" },\n            { value: \"UZ\", label: \"Uzbekistan\" },\n            { value: \"VU\", label: \"Vanuatu\" },\n            { value: \"VA\", label: \"Vatican City\" },\n            { value: \"VE\", label: \"Venezuela\" },\n            { value: \"VN\", label: \"Vietnam\" },\n            { value: \"VG\", label: \"Virgin Islands (UK)\" },\n            { value: \"VI\", label: \"Virgin Islands (US)\" },\n            { value: \"WF\", label: \"Wallis & Futuna\" },\n            { value: \"EH\", label: \"Western Sahara\" },\n            { value: \"YE\", label: \"Yemen\" },\n            { value: \"ZM\", label: \"Zambia\" },\n            { value: \"ZW\", label: \"Zimbabwe\" }\n        ];\n        \n        this.timezones = [\n            \"Africa/Abidjan\", \"Africa/Accra\", \"Africa/Addis_Ababa\", \"Africa/Algiers\", \"Africa/Asmara\", \"Africa/Asmera\", \"Africa/Bamako\", \"Africa/Bangui\", \"Africa/Banjul\", \"Africa/Bissau\", \"Africa/Blantyre\", \"Africa/Brazzaville\", \"Africa/Bujumbura\", \"Africa/Cairo\", \"Africa/Casablanca\", \"Africa/Ceuta\", \"Africa/Conakry\", \"Africa/Dakar\", \"Africa/Dar_es_Salaam\", \"Africa/Djibouti\", \"Africa/Douala\", \"Africa/El_Aaiun\", \"Africa/Freetown\", \"Africa/Gaborone\", \"Africa/Harare\", \"Africa/Johannesburg\", \"Africa/Juba\", \"Africa/Kampala\", \"Africa/Khartoum\", \"Africa/Kigali\", \"Africa/Kinshasa\", \"Africa/Lagos\", \"Africa/Libreville\", \"Africa/Lome\", \"Africa/Luanda\", \"Africa/Lubumbashi\", \"Africa/Lusaka\", \"Africa/Malabo\", \"Africa/Maputo\", \"Africa/Maseru\", \"Africa/Mbabane\", \"Africa/Mogadishu\", \"Africa/Monrovia\", \"Africa/Nairobi\", \"Africa/Ndjamena\", \"Africa/Niamey\", \"Africa/Nouakchott\", \"Africa/Ouagadougou\", \"Africa/Porto-Novo\", \"Africa/Sao_Tome\", \"Africa/Timbuktu\", \"Africa/Tripoli\", \"Africa/Tunis\", \"Africa/Windhoek\", \"America/Adak\", \"America/Anchorage\", \"America/Anguilla\", \"America/Antigua\", \"America/Araguaina\", \"America/Argentina/Buenos_Aires\", \"America/Argentina/Catamarca\", \"America/Argentina/ComodRivadavia\", \"America/Argentina/Cordoba\", \"America/Argentina/Jujuy\", \"America/Argentina/La_Rioja\", \"America/Argentina/Mendoza\", \"America/Argentina/Rio_Gallegos\", \"America/Argentina/Salta\", \"America/Argentina/San_Juan\", \"America/Argentina/San_Luis\", \"America/Argentina/Tucuman\", \"America/Argentina/Ushuaia\", \"America/Aruba\", \"America/Asuncion\", \"America/Atikokan\", \"America/Atka\", \"America/Bahia\", \"America/Bahia_Banderas\", \"America/Barbados\", \"America/Belem\", \"America/Belize\", \"America/Blanc-Sablon\", \"America/Boa_Vista\", \"America/Bogota\", \"America/Boise\", \"America/Buenos_Aires\", \"America/Cambridge_Bay\", \"America/Campo_Grande\", \"America/Cancun\", \"America/Caracas\", \"America/Catamarca\", \"America/Cayenne\", \"America/Cayman\", \"America/Chicago\", \"America/Chihuahua\", \"America/Ciudad_Juarez\", \"America/Coral_Harbour\", \"America/Cordoba\", \"America/Costa_Rica\", \"America/Coyhaique\", \"America/Creston\", \"America/Cuiaba\", \"America/Curacao\", \"America/Danmarkshavn\", \"America/Dawson\", \"America/Dawson_Creek\", \"America/Denver\", \"America/Detroit\", \"America/Dominica\", \"America/Edmonton\", \"America/Eirunepe\", \"America/El_Salvador\", \"America/Ensenada\", \"America/Fort_Nelson\", \"America/Fort_Wayne\", \"America/Fortaleza\", \"America/Glace_Bay\", \"America/Godthab\", \"America/Goose_Bay\", \"America/Grand_Turk\", \"America/Grenada\", \"America/Guadeloupe\", \"America/Guatemala\", \"America/Guayaquil\", \"America/Guyana\", \"America/Halifax\", \"America/Havana\", \"America/Hermosillo\", \"America/Indiana/Indianapolis\", \"America/Indiana/Knox\", \"America/Indiana/Marengo\", \"America/Indiana/Petersburg\", \"America/Indiana/Tell_City\", \"America/Indiana/Vevay\", \"America/Indiana/Vincennes\", \"America/Indiana/Winamac\", \"America/Indianapolis\", \"America/Inuvik\", \"America/Iqaluit\", \"America/Jamaica\", \"America/Jujuy\", \"America/Juneau\", \"America/Kentucky/Louisville\", \"America/Kentucky/Monticello\", \"America/Knox_IN\", \"America/Kralendijk\", \"America/La_Paz\", \"America/Lima\", \"America/Los_Angeles\", \"America/Louisville\", \"America/Lower_Princes\", \"America/Maceio\", \"America/Managua\", \"America/Manaus\", \"America/Marigot\", \"America/Martinique\", \"America/Matamoros\", \"America/Mazatlan\", \"America/Mendoza\", \"America/Menominee\", \"America/Merida\", \"America/Metlakatla\", \"America/Mexico_City\", \"America/Miquelon\", \"America/Moncton\", \"America/Monterrey\", \"America/Montevideo\", \"America/Montreal\", \"America/Montserrat\", \"America/Nassau\", \"America/New_York\", \"America/Nipigon\", \"America/Nome\", \"America/Noronha\", \"America/North_Dakota/Beulah\", \"America/North_Dakota/Center\", \"America/North_Dakota/New_Salem\", \"America/Nuuk\", \"America/Ojinaga\", \"America/Panama\", \"America/Pangnirtung\", \"America/Paramaribo\", \"America/Phoenix\", \"America/Port-au-Prince\", \"America/Port_of_Spain\", \"America/Porto_Acre\", \"America/Porto_Velho\", \"America/Puerto_Rico\", \"America/Punta_Arenas\", \"America/Rainy_River\", \"America/Rankin_Inlet\", \"America/Recife\", \"America/Regina\", \"America/Resolute\", \"America/Rio_Branco\", \"America/Rosario\", \"America/Santa_Isabel\", \"America/Santarem\", \"America/Santiago\", \"America/Santo_Domingo\", \"America/Sao_Paulo\", \"America/Scoresbysund\", \"America/Shiprock\", \"America/Sitka\", \"America/St_Barthelemy\", \"America/St_Johns\", \"America/St_Kitts\", \"America/St_Lucia\", \"America/St_Thomas\", \"America/St_Vincent\", \"America/Swift_Current\", \"America/Tegucigalpa\", \"America/Thule\", \"America/Thunder_Bay\", \"America/Tijuana\", \"America/Toronto\", \"America/Tortola\", \"America/Vancouver\", \"America/Virgin\", \"America/Whitehorse\", \"America/Winnipeg\", \"America/Yakutat\", \"America/Yellowknife\", \"Antarctica/Casey\", \"Antarctica/Davis\", \"Antarctica/DumontDUrville\", \"Antarctica/Macquarie\", \"Antarctica/Mawson\", \"Antarctica/McMurdo\", \"Antarctica/Palmer\", \"Antarctica/Rothera\", \"Antarctica/South_Pole\", \"Antarctica/Syowa\", \"Antarctica/Troll\", \"Antarctica/Vostok\", \"Arctic/Longyearbyen\", \"Asia/Aden\", \"Asia/Almaty\", \"Asia/Amman\", \"Asia/Anadyr\", \"Asia/Aqtau\", \"Asia/Aqtobe\", \"Asia/Ashgabat\", \"Asia/Ashkhabad\", \"Asia/Atyrau\", \"Asia/Baghdad\", \"Asia/Bahrain\", \"Asia/Baku\", \"Asia/Bangkok\", \"Asia/Barnaul\", \"Asia/Beirut\", \"Asia/Bishkek\", \"Asia/Brunei\", \"Asia/Calcutta\", \"Asia/Chita\", \"Asia/Choibalsan\", \"Asia/Chongqing\", \"Asia/Chungking\", \"Asia/Colombo\", \"Asia/Dacca\", \"Asia/Damascus\", \"Asia/Dhaka\", \"Asia/Dili\", \"Asia/Dubai\", \"Asia/Dushanbe\", \"Asia/Famagusta\", \"Asia/Gaza\", \"Asia/Harbin\", \"Asia/Hebron\", \"Asia/Ho_Chi_Minh\", \"Asia/Hong_Kong\", \"Asia/Hovd\", \"Asia/Irkutsk\", \"Asia/Istanbul\", \"Asia/Jakarta\", \"Asia/Jayapura\", \"Asia/Jerusalem\", \"Asia/Kabul\", \"Asia/Kamchatka\", \"Asia/Karachi\", \"Asia/Kashgar\", \"Asia/Kathmandu\", \"Asia/Katmandu\", \"Asia/Khandyga\", \"Asia/Kolkata\", \"Asia/Krasnoyarsk\", \"Asia/Kuala_Lumpur\", \"Asia/Kuching\", \"Asia/Kuwait\", \"Asia/Macao\", \"Asia/Macau\", \"Asia/Magadan\", \"Asia/Makassar\", \"Asia/Manila\", \"Asia/Muscat\", \"Asia/Nicosia\", \"Asia/Novokuznetsk\", \"Asia/Novosibirsk\", \"Asia/Omsk\", \"Asia/Oral\", \"Asia/Phnom_Penh\", \"Asia/Pontianak\", \"Asia/Pyongyang\", \"Asia/Qatar\", \"Asia/Qostanay\", \"Asia/Qyzylorda\", \"Asia/Rangoon\", \"Asia/Riyadh\", \"Asia/Saigon\", \"Asia/Sakhalin\", \"Asia/Samarkand\", \"Asia/Seoul\", \"Asia/Shanghai\", \"Asia/Singapore\", \"Asia/Srednekolymsk\", \"Asia/Taipei\", \"Asia/Tashkent\", \"Asia/Tbilisi\", \"Asia/Tehran\", \"Asia/Tel_Aviv\", \"Asia/Thimbu\", \"Asia/Thimphu\", \"Asia/Tokyo\", \"Asia/Tomsk\", \"Asia/Ujung_Pandang\", \"Asia/Ulaanbaatar\", \"Asia/Ulan_Bator\", \"Asia/Urumqi\", \"Asia/Ust-Nera\", \"Asia/Vientiane\", \"Asia/Vladivostok\", \"Asia/Yakutsk\", \"Asia/Yangon\", \"Asia/Yekaterinburg\", \"Asia/Yerevan\", \"Atlantic/Azores\", \"Atlantic/Bermuda\", \"Atlantic/Canary\", \"Atlantic/Cape_Verde\", \"Atlantic/Faeroe\", \"Atlantic/Faroe\", \"Atlantic/Jan_Mayen\", \"Atlantic/Madeira\", \"Atlantic/Reykjavik\", \"Atlantic/South_Georgia\", \"Atlantic/St_Helena\", \"Atlantic/Stanley\", \"Australia/ACT\", \"Australia/Adelaide\", \"Australia/Brisbane\", \"Australia/Broken_Hill\", \"Australia/Canberra\", \"Australia/Currie\", \"Australia/Darwin\", \"Australia/Eucla\", \"Australia/Hobart\", \"Australia/LHI\", \"Australia/Lindeman\", \"Australia/Lord_Howe\", \"Australia/Melbourne\", \"Australia/NSW\", \"Australia/North\", \"Australia/Perth\", \"Australia/Queensland\", \"Australia/South\", \"Australia/Sydney\", \"Australia/Tasmania\", \"Australia/Victoria\", \"Australia/West\", \"Australia/Yancowinna\", \"Brazil/Acre\", \"Brazil/DeNoronha\", \"Brazil/East\", \"Brazil/West\", \"CET\", \"CST6CDT\", \"Canada/Atlantic\", \"Canada/Central\", \"Canada/Eastern\", \"Canada/Mountain\", \"Canada/Newfoundland\", \"Canada/Pacific\", \"Canada/Saskatchewan\", \"Canada/Yukon\", \"Chile/Continental\", \"Chile/EasterIsland\", \"Cuba\", \"EET\", \"EST\", \"EST5EDT\", \"Egypt\", \"Eire\", \"Etc/GMT\", \"Etc/GMT+0\", \"Etc/GMT+1\", \"Etc/GMT+10\", \"Etc/GMT+11\", \"Etc/GMT+12\", \"Etc/GMT+2\", \"Etc/GMT+3\", \"Etc/GMT+4\", \"Etc/GMT+5\", \"Etc/GMT+6\", \"Etc/GMT+7\", \"Etc/GMT+8\", \"Etc/GMT+9\", \"Etc/GMT-0\", \"Etc/GMT-1\", \"Etc/GMT-10\", \"Etc/GMT-11\", \"Etc/GMT-12\", \"Etc/GMT-13\", \"Etc/GMT-14\", \"Etc/GMT-2\", \"Etc/GMT-3\", \"Etc/GMT-4\", \"Etc/GMT-5\", \"Etc/GMT-6\", \"Etc/GMT-7\", \"Etc/GMT-8\", \"Etc/GMT-9\", \"Etc/GMT0\", \"Etc/Greenwich\", \"Etc/UCT\", \"Etc/UTC\", \"Etc/Universal\", \"Etc/Zulu\", \"Europe/Amsterdam\", \"Europe/Andorra\", \"Europe/Astrakhan\", \"Europe/Athens\", \"Europe/Belfast\", \"Europe/Belgrade\", \"Europe/Berlin\", \"Europe/Bratislava\", \"Europe/Brussels\", \"Europe/Bucharest\", \"Europe/Budapest\", \"Europe/Busingen\", \"Europe/Chisinau\", \"Europe/Copenhagen\", \"Europe/Dublin\", \"Europe/Gibraltar\", \"Europe/Guernsey\", \"Europe/Helsinki\", \"Europe/Isle_of_Man\", \"Europe/Istanbul\", \"Europe/Jersey\", \"Europe/Kaliningrad\", \"Europe/Kiev\", \"Europe/Kirov\", \"Europe/Kyiv\", \"Europe/Lisbon\", \"Europe/Ljubljana\", \"Europe/London\", \"Europe/Luxembourg\", \"Europe/Madrid\", \"Europe/Malta\", \"Europe/Mariehamn\", \"Europe/Minsk\", \"Europe/Monaco\", \"Europe/Moscow\", \"Europe/Nicosia\", \"Europe/Oslo\", \"Europe/Paris\", \"Europe/Podgorica\", \"Europe/Prague\", \"Europe/Riga\", \"Europe/Rome\", \"Europe/Samara\", \"Europe/San_Marino\", \"Europe/Sarajevo\", \"Europe/Saratov\", \"Europe/Simferopol\", \"Europe/Skopje\", \"Europe/Sofia\", \"Europe/Stockholm\", \"Europe/Tallinn\", \"Europe/Tirane\", \"Europe/Tiraspol\", \"Europe/Ulyanovsk\", \"Europe/Uzhgorod\", \"Europe/Vaduz\", \"Europe/Vatican\", \"Europe/Vienna\", \"Europe/Vilnius\", \"Europe/Volgograd\", \"Europe/Warsaw\", \"Europe/Zagreb\", \"Europe/Zaporozhye\", \"Europe/Zurich\", \"Factory\", \"GB\", \"GB-Eire\", \"GMT\", \"GMT+0\", \"GMT-0\", \"GMT0\", \"Greenwich\", \"HST\", \"Hongkong\", \"Iceland\", \"Indian/Antananarivo\", \"Indian/Chagos\", \"Indian/Christmas\", \"Indian/Cocos\", \"Indian/Comoro\", \"Indian/Kerguelen\", \"Indian/Mahe\", \"Indian/Maldives\", \"Indian/Mauritius\", \"Indian/Mayotte\", \"Indian/Reunion\", \"Iran\", \"Israel\", \"Jamaica\", \"Japan\", \"Kwajalein\", \"Libya\", \"MET\", \"MST\", \"MST7MDT\", \"Mexico/BajaNorte\", \"Mexico/BajaSur\", \"Mexico/General\", \"NZ\", \"NZ-CHAT\", \"Navajo\", \"PRC\", \"PST8PDT\", \"Pacific/Apia\", \"Pacific/Auckland\", \"Pacific/Bougainville\", \"Pacific/Chatham\", \"Pacific/Chuuk\", \"Pacific/Easter\", \"Pacific/Efate\", \"Pacific/Enderbury\", \"Pacific/Fakaofo\", \"Pacific/Fiji\", \"Pacific/Funafuti\", \"Pacific/Galapagos\", \"Pacific/Gambier\", \"Pacific/Guadalcanal\", \"Pacific/Guam\", \"Pacific/Honolulu\", \"Pacific/Johnston\", \"Pacific/Kanton\", \"Pacific/Kiritimati\", \"Pacific/Kosrae\", \"Pacific/Kwajalein\", \"Pacific/Majuro\", \"Pacific/Marquesas\", \"Pacific/Midway\", \"Pacific/Nauru\", \"Pacific/Niue\", \"Pacific/Norfolk\", \"Pacific/Noumea\", \"Pacific/Pago_Pago\", \"Pacific/Palau\", \"Pacific/Pitcairn\", \"Pacific/Pohnpei\", \"Pacific/Ponape\", \"Pacific/Port_Moresby\", \"Pacific/Rarotonga\", \"Pacific/Saipan\", \"Pacific/Samoa\", \"Pacific/Tahiti\", \"Pacific/Tarawa\", \"Pacific/Tongatapu\", \"Pacific/Truk\", \"Pacific/Wake\", \"Pacific/Wallis\", \"Pacific/Yap\", \"Poland\", \"Portugal\", \"ROC\", \"ROK\", \"Singapore\", \"Turkey\", \"UCT\", \"US/Alaska\", \"US/Aleutian\", \"US/Arizona\", \"US/Central\", \"US/East-Indiana\", \"US/Eastern\", \"US/Hawaii\", \"US/Indiana-Starke\", \"US/Michigan\", \"US/Mountain\", \"US/Pacific\", \"US/Samoa\", \"UTC\", \"Universal\", \"W-SU\", \"WET\", \"Zulu\"\n        ];\n    }\n}\n</script>",
+        "format": "<template>\n    <v-container fluid>\n        <v-card elevation=\"4\">\n            <!-- Header -->\n            <v-card-item class=\"bg-primary pa-4\">\n                <template v-slot:prepend>\n                    <v-icon icon=\"mdi-microscope\" size=\"large\" class=\"mr-2\"></v-icon>\n                </template>\n                <v-card-title class=\"text-h6 font-weight-bold\">\n                    Welcome to the PlanktoScope GUI\n                </v-card-title>\n            </v-card-item>\n\n            <v-card-text>\n                <div class=\"text-h6 my-4\">Enter your information</div>\n\n                <v-form ref=\"form\" v-model=\"valid\">\n                    <v-row>\n                        <!-- Region / Country Select -->\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete v-model=\"formData.country\" :items=\"countries\" item-title=\"label\"\n                                item-value=\"value\" label=\"Region\" placeholder=\"Please select\" variant=\"outlined\"\n                                density=\"compact\" clearable></v-autocomplete>\n                        </v-col>\n\n                        <!-- Timezone Select -->\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete v-model=\"formData.timezone\" :items=\"timezones\" label=\"Timezone\"\n                                placeholder=\"Please select\" variant=\"outlined\" density=\"compact\"\n                                clearable></v-autocomplete>\n                        </v-col>\n                    </v-row>\n                </v-form>\n            </v-card-text>\n\n            <!-- Actions -->\n            <v-card-actions class=\"pa-4\" >\n                <v-spacer></v-spacer>\n                <v-btn variant=\"flat\" class=\"px-4\" size=\"large\" color=\"primary\" @click=\"submitForm\" :disabled=\"!isValid\">\n                    <v-icon start>mdi-content-save</v-icon>\n                    Save Configuration\n                </v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-container>\n</template>\n\n<script>\n    export default {\n    data() {\n        return {\n            valid: true,\n            formData: {\n                country: \"\",\n                timezone: \"UTC\", // Valeur par défaut modifiée\n            },\n            // Large lists are loaded in mounted to keep data cleaner\n            countries: [],\n            timezones: []\n        };\n    },\n    computed: {\n        isValid() {\n            return this.formData.country && this.formData.timezone;\n        }\n    },\n    methods: {\n        submitForm() {\n            // Send the form data to Node-RED\n            this.send({ payload: this.formData });\n        }\n    },\n    mounted() {\n        // Populating the massive lists provided in the prompt\n        this.countries = [\n            { value: \"AF\", label: \"Afghanistan\" },\n            { value: \"AX\", label: \"Åland Islands\" },\n            { value: \"AL\", label: \"Albania\" },\n            { value: \"DZ\", label: \"Algeria\" },\n            { value: \"AD\", label: \"Andorra\" },\n            { value: \"AO\", label: \"Angola\" },\n            { value: \"AI\", label: \"Anguilla\" },\n            { value: \"AQ\", label: \"Antarctica\" },\n            { value: \"AG\", label: \"Antigua & Barbuda\" },\n            { value: \"AR\", label: \"Argentina\" },\n            { value: \"AM\", label: \"Armenia\" },\n            { value: \"AW\", label: \"Aruba\" },\n            { value: \"AU\", label: \"Australia\" },\n            { value: \"AT\", label: \"Austria\" },\n            { value: \"AZ\", label: \"Azerbaijan\" },\n            { value: \"BS\", label: \"Bahamas\" },\n            { value: \"BH\", label: \"Bahrain\" },\n            { value: \"BD\", label: \"Bangladesh\" },\n            { value: \"BB\", label: \"Barbados\" },\n            { value: \"BY\", label: \"Belarus\" },\n            { value: \"BE\", label: \"Belgium\" },\n            { value: \"BZ\", label: \"Belize\" },\n            { value: \"BJ\", label: \"Benin\" },\n            { value: \"BM\", label: \"Bermuda\" },\n            { value: \"BT\", label: \"Bhutan\" },\n            { value: \"BO\", label: \"Bolivia\" },\n            { value: \"BA\", label: \"Bosnia & Herzegovina\" },\n            { value: \"BW\", label: \"Botswana\" },\n            { value: \"BV\", label: \"Bouvet Island\" },\n            { value: \"BR\", label: \"Brazil\" },\n            { value: \"GB\", label: \"Britain (UK)\" },\n            { value: \"IO\", label: \"British Indian Ocean Territory\" },\n            { value: \"BN\", label: \"Brunei\" },\n            { value: \"BG\", label: \"Bulgaria\" },\n            { value: \"BF\", label: \"Burkina Faso\" },\n            { value: \"BI\", label: \"Burundi\" },\n            { value: \"KH\", label: \"Cambodia\" },\n            { value: \"CM\", label: \"Cameroon\" },\n            { value: \"CA\", label: \"Canada\" },\n            { value: \"CV\", label: \"Cape Verde\" },\n            { value: \"BQ\", label: \"Caribbean NL\" },\n            { value: \"KY\", label: \"Cayman Islands\" },\n            { value: \"CF\", label: \"Central African Rep.\" },\n            { value: \"TD\", label: \"Chad\" },\n            { value: \"CL\", label: \"Chile\" },\n            { value: \"CN\", label: \"China\" },\n            { value: \"CX\", label: \"Christmas Island\" },\n            { value: \"CC\", label: \"Cocos (Keeling) Islands\" },\n            { value: \"CO\", label: \"Colombia\" },\n            { value: \"KM\", label: \"Comoros\" },\n            { value: \"CD\", label: \"Congo (Dem. Rep.)\" },\n            { value: \"CG\", label: \"Congo (Rep.)\" },\n            { value: \"CK\", label: \"Cook Islands\" },\n            { value: \"CR\", label: \"Costa Rica\" },\n            { value: \"CI\", label: \"Côte d'Ivoire\" },\n            { value: \"HR\", label: \"Croatia\" },\n            { value: \"CU\", label: \"Cuba\" },\n            { value: \"CW\", label: \"Curaçao\" },\n            { value: \"CY\", label: \"Cyprus\" },\n            { value: \"CZ\", label: \"Czech Republic\" },\n            { value: \"DK\", label: \"Denmark\" },\n            { value: \"DJ\", label: \"Djibouti\" },\n            { value: \"DM\", label: \"Dominica\" },\n            { value: \"DO\", label: \"Dominican Republic\" },\n            { value: \"TL\", label: \"East Timor\" },\n            { value: \"EC\", label: \"Ecuador\" },\n            { value: \"EG\", label: \"Egypt\" },\n            { value: \"SV\", label: \"El Salvador\" },\n            { value: \"GQ\", label: \"Equatorial Guinea\" },\n            { value: \"ER\", label: \"Eritrea\" },\n            { value: \"EE\", label: \"Estonia\" },\n            { value: \"SZ\", label: \"Eswatini (Swaziland)\" },\n            { value: \"ET\", label: \"Ethiopia\" },\n            { value: \"FK\", label: \"Falkland Islands\" },\n            { value: \"FO\", label: \"Faroe Islands\" },\n            { value: \"FJ\", label: \"Fiji\" },\n            { value: \"FI\", label: \"Finland\" },\n            { value: \"FR\", label: \"France\" },\n            { value: \"GF\", label: \"French Guiana\" },\n            { value: \"PF\", label: \"French Polynesia\" },\n            { value: \"TF\", label: \"French S. Terr.\" },\n            { value: \"GA\", label: \"Gabon\" },\n            { value: \"GM\", label: \"Gambia\" },\n            { value: \"GE\", label: \"Georgia\" },\n            { value: \"DE\", label: \"Germany\" },\n            { value: \"GH\", label: \"Ghana\" },\n            { value: \"GI\", label: \"Gibraltar\" },\n            { value: \"GR\", label: \"Greece\" },\n            { value: \"GL\", label: \"Greenland\" },\n            { value: \"GD\", label: \"Grenada\" },\n            { value: \"GP\", label: \"Guadeloupe\" },\n            { value: \"GU\", label: \"Guam\" },\n            { value: \"GT\", label: \"Guatemala\" },\n            { value: \"GG\", label: \"Guernsey\" },\n            { value: \"GN\", label: \"Guinea\" },\n            { value: \"GW\", label: \"Guinea-Bissau\" },\n            { value: \"GY\", label: \"Guyana\" },\n            { value: \"HT\", label: \"Haiti\" },\n            { value: \"HM\", label: \"Heard Island & McDonald Islands\" },\n            { value: \"HN\", label: \"Honduras\" },\n            { value: \"HK\", label: \"Hong Kong\" },\n            { value: \"HU\", label: \"Hungary\" },\n            { value: \"IS\", label: \"Iceland\" },\n            { value: \"IN\", label: \"India\" },\n            { value: \"ID\", label: \"Indonesia\" },\n            { value: \"IR\", label: \"Iran\" },\n            { value: \"IQ\", label: \"Iraq\" },\n            { value: \"IE\", label: \"Ireland\" },\n            { value: \"IM\", label: \"Isle of Man\" },\n            { value: \"IL\", label: \"Israel\" },\n            { value: \"IT\", label: \"Italy\" },\n            { value: \"JM\", label: \"Jamaica\" },\n            { value: \"JP\", label: \"Japan\" },\n            { value: \"JE\", label: \"Jersey\" },\n            { value: \"JO\", label: \"Jordan\" },\n            { value: \"KZ\", label: \"Kazakhstan\" },\n            { value: \"KE\", label: \"Kenya\" },\n            { value: \"KI\", label: \"Kiribati\" },\n            { value: \"KP\", label: \"Korea (North)\" },\n            { value: \"KR\", label: \"Korea (South)\" },\n            { value: \"KW\", label: \"Kuwait\" },\n            { value: \"KG\", label: \"Kyrgyzstan\" },\n            { value: \"LA\", label: \"Laos\" },\n            { value: \"LV\", label: \"Latvia\" },\n            { value: \"LB\", label: \"Lebanon\" },\n            { value: \"LS\", label: \"Lesotho\" },\n            { value: \"LR\", label: \"Liberia\" },\n            { value: \"LY\", label: \"Libya\" },\n            { value: \"LI\", label: \"Liechtenstein\" },\n            { value: \"LT\", label: \"Lithuania\" },\n            { value: \"LU\", label: \"Luxembourg\" },\n            { value: \"MO\", label: \"Macau\" },\n            { value: \"MG\", label: \"Madagascar\" },\n            { value: \"MW\", label: \"Malawi\" },\n            { value: \"MY\", label: \"Malaysia\" },\n            { value: \"MV\", label: \"Maldives\" },\n            { value: \"ML\", label: \"Mali\" },\n            { value: \"MT\", label: \"Malta\" },\n            { value: \"MH\", label: \"Marshall Islands\" },\n            { value: \"MQ\", label: \"Martinique\" },\n            { value: \"MR\", label: \"Mauritania\" },\n            { value: \"MU\", label: \"Mauritius\" },\n            { value: \"YT\", label: \"Mayotte\" },\n            { value: \"MX\", label: \"Mexico\" },\n            { value: \"FM\", label: \"Micronesia\" },\n            { value: \"MD\", label: \"Moldova\" },\n            { value: \"MC\", label: \"Monaco\" },\n            { value: \"MN\", label: \"Mongolia\" },\n            { value: \"ME\", label: \"Montenegro\" },\n            { value: \"MS\", label: \"Montserrat\" },\n            { value: \"MA\", label: \"Morocco\" },\n            { value: \"MZ\", label: \"Mozambique\" },\n            { value: \"MM\", label: \"Myanmar (Burma)\" },\n            { value: \"NA\", label: \"Namibia\" },\n            { value: \"NR\", label: \"Nauru\" },\n            { value: \"NP\", label: \"Nepal\" },\n            { value: \"NL\", label: \"Netherlands\" },\n            { value: \"NC\", label: \"New Caledonia\" },\n            { value: \"NZ\", label: \"New Zealand\" },\n            { value: \"NI\", label: \"Nicaragua\" },\n            { value: \"NE\", label: \"Niger\" },\n            { value: \"NG\", label: \"Nigeria\" },\n            { value: \"NU\", label: \"Niue\" },\n            { value: \"NF\", label: \"Norfolk Island\" },\n            { value: \"MK\", label: \"North Macedonia\" },\n            { value: \"MP\", label: \"Northern Mariana Islands\" },\n            { value: \"NO\", label: \"Norway\" },\n            { value: \"OM\", label: \"Oman\" },\n            { value: \"PK\", label: \"Pakistan\" },\n            { value: \"PW\", label: \"Palau\" },\n            { value: \"PS\", label: \"Palestine\" },\n            { value: \"PA\", label: \"Panama\" },\n            { value: \"PG\", label: \"Papua New Guinea\" },\n            { value: \"PY\", label: \"Paraguay\" },\n            { value: \"PE\", label: \"Peru\" },\n            { value: \"PH\", label: \"Philippines\" },\n            { value: \"PN\", label: \"Pitcairn\" },\n            { value: \"PL\", label: \"Poland\" },\n            { value: \"PT\", label: \"Portugal\" },\n            { value: \"PR\", label: \"Puerto Rico\" },\n            { value: \"QA\", label: \"Qatar\" },\n            { value: \"RE\", label: \"Réunion\" },\n            { value: \"RO\", label: \"Romania\" },\n            { value: \"RU\", label: \"Russia\" },\n            { value: \"RW\", label: \"Rwanda\" },\n            { value: \"AS\", label: \"Samoa (American)\" },\n            { value: \"WS\", label: \"Samoa (western)\" },\n            { value: \"SM\", label: \"San Marino\" },\n            { value: \"ST\", label: \"Sao Tome & Principe\" },\n            { value: \"SA\", label: \"Saudi Arabia\" },\n            { value: \"SN\", label: \"Senegal\" },\n            { value: \"RS\", label: \"Serbia\" },\n            { value: \"SC\", label: \"Seychelles\" },\n            { value: \"SL\", label: \"Sierra Leone\" },\n            { value: \"SG\", label: \"Singapore\" },\n            { value: \"SK\", label: \"Slovakia\" },\n            { value: \"SI\", label: \"Slovenia\" },\n            { value: \"SB\", label: \"Solomon Islands\" },\n            { value: \"SO\", label: \"Somalia\" },\n            { value: \"ZA\", label: \"South Africa\" },\n            { value: \"GS\", label: \"South Georgia & the South Sandwich Islands\" },\n            { value: \"SS\", label: \"South Sudan\" },\n            { value: \"ES\", label: \"Spain\" },\n            { value: \"LK\", label: \"Sri Lanka\" },\n            { value: \"BL\", label: \"St Barthelemy\" },\n            { value: \"SH\", label: \"St Helena\" },\n            { value: \"KN\", label: \"St Kitts & Nevis\" },\n            { value: \"LC\", label: \"St Lucia\" },\n            { value: \"SX\", label: \"St Maarten (Dutch)\" },\n            { value: \"MF\", label: \"St Martin (French)\" },\n            { value: \"PM\", label: \"St Pierre & Miquelon\" },\n            { value: \"VC\", label: \"St Vincent\" },\n            { value: \"SD\", label: \"Sudan\" },\n            { value: \"SR\", label: \"Suriname\" },\n            { value: \"SJ\", label: \"Svalbard & Jan Mayen\" },\n            { value: \"SE\", label: \"Sweden\" },\n            { value: \"CH\", label: \"Switzerland\" },\n            { value: \"SY\", label: \"Syria\" },\n            { value: \"TW\", label: \"Taiwan\" },\n            { value: \"TJ\", label: \"Tajikistan\" },\n            { value: \"TZ\", label: \"Tanzania\" },\n            { value: \"TH\", label: \"Thailand\" },\n            { value: \"TG\", label: \"Togo\" },\n            { value: \"TK\", label: \"Tokelau\" },\n            { value: \"TO\", label: \"Tonga\" },\n            { value: \"TT\", label: \"Trinidad & Tobago\" },\n            { value: \"TN\", label: \"Tunisia\" },\n            { value: \"TR\", label: \"Turkey\" },\n            { value: \"TM\", label: \"Turkmenistan\" },\n            { value: \"TC\", label: \"Turks & Caicos Is\" },\n            { value: \"TV\", label: \"Tuvalu\" },\n            { value: \"UG\", label: \"Uganda\" },\n            { value: \"UA\", label: \"Ukraine\" },\n            { value: \"AE\", label: \"United Arab Emirates\" },\n            { value: \"US\", label: \"United States\" },\n            { value: \"UY\", label: \"Uruguay\" },\n            { value: \"UM\", label: \"US minor outlying islands\" },\n            { value: \"UZ\", label: \"Uzbekistan\" },\n            { value: \"VU\", label: \"Vanuatu\" },\n            { value: \"VA\", label: \"Vatican City\" },\n            { value: \"VE\", label: \"Venezuela\" },\n            { value: \"VN\", label: \"Vietnam\" },\n            { value: \"VG\", label: \"Virgin Islands (UK)\" },\n            { value: \"VI\", label: \"Virgin Islands (US)\" },\n            { value: \"WF\", label: \"Wallis & Futuna\" },\n            { value: \"EH\", label: \"Western Sahara\" },\n            { value: \"YE\", label: \"Yemen\" },\n            { value: \"ZM\", label: \"Zambia\" },\n            { value: \"ZW\", label: \"Zimbabwe\" }\n        ];\n        \n        this.timezones = [\n            \"Africa/Abidjan\", \"Africa/Accra\", \"Africa/Addis_Ababa\", \"Africa/Algiers\", \"Africa/Asmara\", \"Africa/Asmera\", \"Africa/Bamako\", \"Africa/Bangui\", \"Africa/Banjul\", \"Africa/Bissau\", \"Africa/Blantyre\", \"Africa/Brazzaville\", \"Africa/Bujumbura\", \"Africa/Cairo\", \"Africa/Casablanca\", \"Africa/Ceuta\", \"Africa/Conakry\", \"Africa/Dakar\", \"Africa/Dar_es_Salaam\", \"Africa/Djibouti\", \"Africa/Douala\", \"Africa/El_Aaiun\", \"Africa/Freetown\", \"Africa/Gaborone\", \"Africa/Harare\", \"Africa/Johannesburg\", \"Africa/Juba\", \"Africa/Kampala\", \"Africa/Khartoum\", \"Africa/Kigali\", \"Africa/Kinshasa\", \"Africa/Lagos\", \"Africa/Libreville\", \"Africa/Lome\", \"Africa/Luanda\", \"Africa/Lubumbashi\", \"Africa/Lusaka\", \"Africa/Malabo\", \"Africa/Maputo\", \"Africa/Maseru\", \"Africa/Mbabane\", \"Africa/Mogadishu\", \"Africa/Monrovia\", \"Africa/Nairobi\", \"Africa/Ndjamena\", \"Africa/Niamey\", \"Africa/Nouakchott\", \"Africa/Ouagadougou\", \"Africa/Porto-Novo\", \"Africa/Sao_Tome\", \"Africa/Timbuktu\", \"Africa/Tripoli\", \"Africa/Tunis\", \"Africa/Windhoek\", \"America/Adak\", \"America/Anchorage\", \"America/Anguilla\", \"America/Antigua\", \"America/Araguaina\", \"America/Argentina/Buenos_Aires\", \"America/Argentina/Catamarca\", \"America/Argentina/ComodRivadavia\", \"America/Argentina/Cordoba\", \"America/Argentina/Jujuy\", \"America/Argentina/La_Rioja\", \"America/Argentina/Mendoza\", \"America/Argentina/Rio_Gallegos\", \"America/Argentina/Salta\", \"America/Argentina/San_Juan\", \"America/Argentina/San_Luis\", \"America/Argentina/Tucuman\", \"America/Argentina/Ushuaia\", \"America/Aruba\", \"America/Asuncion\", \"America/Atikokan\", \"America/Atka\", \"America/Bahia\", \"America/Bahia_Banderas\", \"America/Barbados\", \"America/Belem\", \"America/Belize\", \"America/Blanc-Sablon\", \"America/Boa_Vista\", \"America/Bogota\", \"America/Boise\", \"America/Buenos_Aires\", \"America/Cambridge_Bay\", \"America/Campo_Grande\", \"America/Cancun\", \"America/Caracas\", \"America/Catamarca\", \"America/Cayenne\", \"America/Cayman\", \"America/Chicago\", \"America/Chihuahua\", \"America/Ciudad_Juarez\", \"America/Coral_Harbour\", \"America/Cordoba\", \"America/Costa_Rica\", \"America/Coyhaique\", \"America/Creston\", \"America/Cuiaba\", \"America/Curacao\", \"America/Danmarkshavn\", \"America/Dawson\", \"America/Dawson_Creek\", \"America/Denver\", \"America/Detroit\", \"America/Dominica\", \"America/Edmonton\", \"America/Eirunepe\", \"America/El_Salvador\", \"America/Ensenada\", \"America/Fort_Nelson\", \"America/Fort_Wayne\", \"America/Fortaleza\", \"America/Glace_Bay\", \"America/Godthab\", \"America/Goose_Bay\", \"America/Grand_Turk\", \"America/Grenada\", \"America/Guadeloupe\", \"America/Guatemala\", \"America/Guayaquil\", \"America/Guyana\", \"America/Halifax\", \"America/Havana\", \"America/Hermosillo\", \"America/Indiana/Indianapolis\", \"America/Indiana/Knox\", \"America/Indiana/Marengo\", \"America/Indiana/Petersburg\", \"America/Indiana/Tell_City\", \"America/Indiana/Vevay\", \"America/Indiana/Vincennes\", \"America/Indiana/Winamac\", \"America/Indianapolis\", \"America/Inuvik\", \"America/Iqaluit\", \"America/Jamaica\", \"America/Jujuy\", \"America/Juneau\", \"America/Kentucky/Louisville\", \"America/Kentucky/Monticello\", \"America/Knox_IN\", \"America/Kralendijk\", \"America/La_Paz\", \"America/Lima\", \"America/Los_Angeles\", \"America/Louisville\", \"America/Lower_Princes\", \"America/Maceio\", \"America/Managua\", \"America/Manaus\", \"America/Marigot\", \"America/Martinique\", \"America/Matamoros\", \"America/Mazatlan\", \"America/Mendoza\", \"America/Menominee\", \"America/Merida\", \"America/Metlakatla\", \"America/Mexico_City\", \"America/Miquelon\", \"America/Moncton\", \"America/Monterrey\", \"America/Montevideo\", \"America/Montreal\", \"America/Montserrat\", \"America/Nassau\", \"America/New_York\", \"America/Nipigon\", \"America/Nome\", \"America/Noronha\", \"America/North_Dakota/Beulah\", \"America/North_Dakota/Center\", \"America/North_Dakota/New_Salem\", \"America/Nuuk\", \"America/Ojinaga\", \"America/Panama\", \"America/Pangnirtung\", \"America/Paramaribo\", \"America/Phoenix\", \"America/Port-au-Prince\", \"America/Port_of_Spain\", \"America/Porto_Acre\", \"America/Porto_Velho\", \"America/Puerto_Rico\", \"America/Punta_Arenas\", \"America/Rainy_River\", \"America/Rankin_Inlet\", \"America/Recife\", \"America/Regina\", \"America/Resolute\", \"America/Rio_Branco\", \"America/Rosario\", \"America/Santa_Isabel\", \"America/Santarem\", \"America/Santiago\", \"America/Santo_Domingo\", \"America/Sao_Paulo\", \"America/Scoresbysund\", \"America/Shiprock\", \"America/Sitka\", \"America/St_Barthelemy\", \"America/St_Johns\", \"America/St_Kitts\", \"America/St_Lucia\", \"America/St_Thomas\", \"America/St_Vincent\", \"America/Swift_Current\", \"America/Tegucigalpa\", \"America/Thule\", \"America/Thunder_Bay\", \"America/Tijuana\", \"America/Toronto\", \"America/Tortola\", \"America/Vancouver\", \"America/Virgin\", \"America/Whitehorse\", \"America/Winnipeg\", \"America/Yakutat\", \"America/Yellowknife\", \"Antarctica/Casey\", \"Antarctica/Davis\", \"Antarctica/DumontDUrville\", \"Antarctica/Macquarie\", \"Antarctica/Mawson\", \"Antarctica/McMurdo\", \"Antarctica/Palmer\", \"Antarctica/Rothera\", \"Antarctica/South_Pole\", \"Antarctica/Syowa\", \"Antarctica/Troll\", \"Antarctica/Vostok\", \"Arctic/Longyearbyen\", \"Asia/Aden\", \"Asia/Almaty\", \"Asia/Amman\", \"Asia/Anadyr\", \"Asia/Aqtau\", \"Asia/Aqtobe\", \"Asia/Ashgabat\", \"Asia/Ashkhabad\", \"Asia/Atyrau\", \"Asia/Baghdad\", \"Asia/Bahrain\", \"Asia/Baku\", \"Asia/Bangkok\", \"Asia/Barnaul\", \"Asia/Beirut\", \"Asia/Bishkek\", \"Asia/Brunei\", \"Asia/Calcutta\", \"Asia/Chita\", \"Asia/Choibalsan\", \"Asia/Chongqing\", \"Asia/Chungking\", \"Asia/Colombo\", \"Asia/Dacca\", \"Asia/Damascus\", \"Asia/Dhaka\", \"Asia/Dili\", \"Asia/Dubai\", \"Asia/Dushanbe\", \"Asia/Famagusta\", \"Asia/Gaza\", \"Asia/Harbin\", \"Asia/Hebron\", \"Asia/Ho_Chi_Minh\", \"Asia/Hong_Kong\", \"Asia/Hovd\", \"Asia/Irkutsk\", \"Asia/Istanbul\", \"Asia/Jakarta\", \"Asia/Jayapura\", \"Asia/Jerusalem\", \"Asia/Kabul\", \"Asia/Kamchatka\", \"Asia/Karachi\", \"Asia/Kashgar\", \"Asia/Kathmandu\", \"Asia/Katmandu\", \"Asia/Khandyga\", \"Asia/Kolkata\", \"Asia/Krasnoyarsk\", \"Asia/Kuala_Lumpur\", \"Asia/Kuching\", \"Asia/Kuwait\", \"Asia/Macao\", \"Asia/Macau\", \"Asia/Magadan\", \"Asia/Makassar\", \"Asia/Manila\", \"Asia/Muscat\", \"Asia/Nicosia\", \"Asia/Novokuznetsk\", \"Asia/Novosibirsk\", \"Asia/Omsk\", \"Asia/Oral\", \"Asia/Phnom_Penh\", \"Asia/Pontianak\", \"Asia/Pyongyang\", \"Asia/Qatar\", \"Asia/Qostanay\", \"Asia/Qyzylorda\", \"Asia/Rangoon\", \"Asia/Riyadh\", \"Asia/Saigon\", \"Asia/Sakhalin\", \"Asia/Samarkand\", \"Asia/Seoul\", \"Asia/Shanghai\", \"Asia/Singapore\", \"Asia/Srednekolymsk\", \"Asia/Taipei\", \"Asia/Tashkent\", \"Asia/Tbilisi\", \"Asia/Tehran\", \"Asia/Tel_Aviv\", \"Asia/Thimbu\", \"Asia/Thimphu\", \"Asia/Tokyo\", \"Asia/Tomsk\", \"Asia/Ujung_Pandang\", \"Asia/Ulaanbaatar\", \"Asia/Ulan_Bator\", \"Asia/Urumqi\", \"Asia/Ust-Nera\", \"Asia/Vientiane\", \"Asia/Vladivostok\", \"Asia/Yakutsk\", \"Asia/Yangon\", \"Asia/Yekaterinburg\", \"Asia/Yerevan\", \"Atlantic/Azores\", \"Atlantic/Bermuda\", \"Atlantic/Canary\", \"Atlantic/Cape_Verde\", \"Atlantic/Faeroe\", \"Atlantic/Faroe\", \"Atlantic/Jan_Mayen\", \"Atlantic/Madeira\", \"Atlantic/Reykjavik\", \"Atlantic/South_Georgia\", \"Atlantic/St_Helena\", \"Atlantic/Stanley\", \"Australia/ACT\", \"Australia/Adelaide\", \"Australia/Brisbane\", \"Australia/Broken_Hill\", \"Australia/Canberra\", \"Australia/Currie\", \"Australia/Darwin\", \"Australia/Eucla\", \"Australia/Hobart\", \"Australia/LHI\", \"Australia/Lindeman\", \"Australia/Lord_Howe\", \"Australia/Melbourne\", \"Australia/NSW\", \"Australia/North\", \"Australia/Perth\", \"Australia/Queensland\", \"Australia/South\", \"Australia/Sydney\", \"Australia/Tasmania\", \"Australia/Victoria\", \"Australia/West\", \"Australia/Yancowinna\", \"Brazil/Acre\", \"Brazil/DeNoronha\", \"Brazil/East\", \"Brazil/West\", \"CET\", \"CST6CDT\", \"Canada/Atlantic\", \"Canada/Central\", \"Canada/Eastern\", \"Canada/Mountain\", \"Canada/Newfoundland\", \"Canada/Pacific\", \"Canada/Saskatchewan\", \"Canada/Yukon\", \"Chile/Continental\", \"Chile/EasterIsland\", \"Cuba\", \"EET\", \"EST\", \"EST5EDT\", \"Egypt\", \"Eire\", \"Etc/GMT\", \"Etc/GMT+0\", \"Etc/GMT+1\", \"Etc/GMT+10\", \"Etc/GMT+11\", \"Etc/GMT+12\", \"Etc/GMT+2\", \"Etc/GMT+3\", \"Etc/GMT+4\", \"Etc/GMT+5\", \"Etc/GMT+6\", \"Etc/GMT+7\", \"Etc/GMT+8\", \"Etc/GMT+9\", \"Etc/GMT-0\", \"Etc/GMT-1\", \"Etc/GMT-10\", \"Etc/GMT-11\", \"Etc/GMT-12\", \"Etc/GMT-13\", \"Etc/GMT-14\", \"Etc/GMT-2\", \"Etc/GMT-3\", \"Etc/GMT-4\", \"Etc/GMT-5\", \"Etc/GMT-6\", \"Etc/GMT-7\", \"Etc/GMT-8\", \"Etc/GMT-9\", \"Etc/GMT0\", \"Etc/Greenwich\", \"Etc/UCT\", \"Etc/UTC\", \"Etc/Universal\", \"Etc/Zulu\", \"Europe/Amsterdam\", \"Europe/Andorra\", \"Europe/Astrakhan\", \"Europe/Athens\", \"Europe/Belfast\", \"Europe/Belgrade\", \"Europe/Berlin\", \"Europe/Bratislava\", \"Europe/Brussels\", \"Europe/Bucharest\", \"Europe/Budapest\", \"Europe/Busingen\", \"Europe/Chisinau\", \"Europe/Copenhagen\", \"Europe/Dublin\", \"Europe/Gibraltar\", \"Europe/Guernsey\", \"Europe/Helsinki\", \"Europe/Isle_of_Man\", \"Europe/Istanbul\", \"Europe/Jersey\", \"Europe/Kaliningrad\", \"Europe/Kiev\", \"Europe/Kirov\", \"Europe/Kyiv\", \"Europe/Lisbon\", \"Europe/Ljubljana\", \"Europe/London\", \"Europe/Luxembourg\", \"Europe/Madrid\", \"Europe/Malta\", \"Europe/Mariehamn\", \"Europe/Minsk\", \"Europe/Monaco\", \"Europe/Moscow\", \"Europe/Nicosia\", \"Europe/Oslo\", \"Europe/Paris\", \"Europe/Podgorica\", \"Europe/Prague\", \"Europe/Riga\", \"Europe/Rome\", \"Europe/Samara\", \"Europe/San_Marino\", \"Europe/Sarajevo\", \"Europe/Saratov\", \"Europe/Simferopol\", \"Europe/Skopje\", \"Europe/Sofia\", \"Europe/Stockholm\", \"Europe/Tallinn\", \"Europe/Tirane\", \"Europe/Tiraspol\", \"Europe/Ulyanovsk\", \"Europe/Uzhgorod\", \"Europe/Vaduz\", \"Europe/Vatican\", \"Europe/Vienna\", \"Europe/Vilnius\", \"Europe/Volgograd\", \"Europe/Warsaw\", \"Europe/Zagreb\", \"Europe/Zaporozhye\", \"Europe/Zurich\", \"Factory\", \"GB\", \"GB-Eire\", \"GMT\", \"GMT+0\", \"GMT-0\", \"GMT0\", \"Greenwich\", \"HST\", \"Hongkong\", \"Iceland\", \"Indian/Antananarivo\", \"Indian/Chagos\", \"Indian/Christmas\", \"Indian/Cocos\", \"Indian/Comoro\", \"Indian/Kerguelen\", \"Indian/Mahe\", \"Indian/Maldives\", \"Indian/Mauritius\", \"Indian/Mayotte\", \"Indian/Reunion\", \"Iran\", \"Israel\", \"Jamaica\", \"Japan\", \"Kwajalein\", \"Libya\", \"MET\", \"MST\", \"MST7MDT\", \"Mexico/BajaNorte\", \"Mexico/BajaSur\", \"Mexico/General\", \"NZ\", \"NZ-CHAT\", \"Navajo\", \"PRC\", \"PST8PDT\", \"Pacific/Apia\", \"Pacific/Auckland\", \"Pacific/Bougainville\", \"Pacific/Chatham\", \"Pacific/Chuuk\", \"Pacific/Easter\", \"Pacific/Efate\", \"Pacific/Enderbury\", \"Pacific/Fakaofo\", \"Pacific/Fiji\", \"Pacific/Funafuti\", \"Pacific/Galapagos\", \"Pacific/Gambier\", \"Pacific/Guadalcanal\", \"Pacific/Guam\", \"Pacific/Honolulu\", \"Pacific/Johnston\", \"Pacific/Kanton\", \"Pacific/Kiritimati\", \"Pacific/Kosrae\", \"Pacific/Kwajalein\", \"Pacific/Majuro\", \"Pacific/Marquesas\", \"Pacific/Midway\", \"Pacific/Nauru\", \"Pacific/Niue\", \"Pacific/Norfolk\", \"Pacific/Noumea\", \"Pacific/Pago_Pago\", \"Pacific/Palau\", \"Pacific/Pitcairn\", \"Pacific/Pohnpei\", \"Pacific/Ponape\", \"Pacific/Port_Moresby\", \"Pacific/Rarotonga\", \"Pacific/Saipan\", \"Pacific/Samoa\", \"Pacific/Tahiti\", \"Pacific/Tarawa\", \"Pacific/Tongatapu\", \"Pacific/Truk\", \"Pacific/Wake\", \"Pacific/Wallis\", \"Pacific/Yap\", \"Poland\", \"Portugal\", \"ROC\", \"ROK\", \"Singapore\", \"Turkey\", \"UCT\", \"US/Alaska\", \"US/Aleutian\", \"US/Arizona\", \"US/Central\", \"US/East-Indiana\", \"US/Eastern\", \"US/Hawaii\", \"US/Indiana-Starke\", \"US/Michigan\", \"US/Mountain\", \"US/Pacific\", \"US/Samoa\", \"UTC\", \"Universal\", \"W-SU\", \"WET\", \"Zulu\"\n        ];\n    }\n}\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 530,
+        "x": 370,
         "y": 140,
         "wires": [
             [
@@ -2634,7 +2581,7 @@
         "group": "39cbd2658f16d608",
         "page": "",
         "ui": "",
-        "name": "Settings",
+        "name": "body",
         "order": 1,
         "width": "0",
         "height": "0",
@@ -2645,7 +2592,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 380,
+        "x": 370,
         "y": 140,
         "wires": [
             [
@@ -3323,18 +3270,18 @@
         "group": "d2f77573ed4317e4",
         "page": "",
         "ui": "",
-        "name": "Acquisition settings",
+        "name": "body",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly \n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"HH:MM:SS\"\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly \n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 370,
+        "x": 350,
         "y": 140,
         "wires": [
             [
@@ -3819,6 +3766,14 @@
                 "type": "tickcross",
                 "width": "",
                 "align": "start"
+            },
+            {
+                "title": "",
+                "key": "",
+                "keyType": "str",
+                "type": "html",
+                "width": "",
+                "align": "start"
             }
         ],
         "mobileBreakpoint": "sm",
@@ -3975,8 +3930,8 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 610,
-        "y": 240,
+        "x": 370,
+        "y": 220,
         "wires": [
             []
         ]
@@ -4062,30 +4017,48 @@
         "y": 140,
         "wires": [
             [
+                "0ec6b9337acadf6f",
                 "7fde0897e436c334"
             ]
         ]
     },
+    {
+        "id": "0ec6b9337acadf6f",
+        "type": "debug",
+        "z": "0fd76ac156d78937",
+        "name": "debug 1",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 880,
+        "y": 180,
+        "wires": []
+    },
     {
         "id": "7fde0897e436c334",
         "type": "ui-template",
         "z": "0fd76ac156d78937",
-        "group": "",
-        "page": "7a4e042a60b734a6",
+        "group": "bfd4acb7b243514f",
+        "page": "",
         "ui": "",
         "name": "Dialog",
         "order": 2,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Dialog only -->\n  <v-dialog v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <!-- Number input for process_min_ESD -->\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  // ⚠️ no props / no lifecycle hooks in ui-template\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: 0,\n      hasSeenFirstMsg: false, // ← ignore the first msg (replayed by Dashboard)\n    };\n  },\n\nwatch: {\n  msg: {\n    immediate: true,\n    deep: true,\n    handler(msg) {\n\n      // Always force dialog closed unless explicitly opened\n      this.showDialog = false;\n\n      // Ignore the first replayed message\n      if (!this.hasSeenFirstMsg) {\n        this.hasSeenFirstMsg = true;\n        return;\n      }\n\n      // 🚫 No message or empty payload -> abort immediately\n      if (!msg || !msg.payload || typeof msg.payload !== \"object\") {\n        return;\n      }\n\n      // Now we know there is a real payload\n      this.payload = msg.payload;\n\n      // Sync ESD if provided\n      this.process_min_ESD =\n        typeof msg.payload.process_min_ESD !== \"undefined\"\n          ? msg.payload.process_min_ESD\n          : 0;\n\n      // 🚫 Require ALL keys — otherwise NO dialog\n      const shouldOpen =\n        msg.payload.open_dialog === true &&\n        msg.payload.is_segmented === false &&\n        typeof msg.payload.path === \"string\" &&\n        msg.payload.path.length > 0;\n\n      this.showDialog = shouldOpen;\n    },\n  },\n},\n\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>\n",
+        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\nexport default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 0,\n      // 1. Add a flag to track if page is fully loaded\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    // 2. Wait 1 second after the component loads before accepting \"Open\" commands.\n    // This effectively ignores the \"History\" message sent by Node-RED on refresh.\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        // 3. If the page is still loading (first 1 sec), IGNORE the message\n        if (!this.isReady) return;\n\n        // Safety check\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        // 4. Check conditions\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 0;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
-        "templateScope": "widget:page",
+        "templateScope": "local",
         "className": "",
         "x": 850,
-        "y": 140,
+        "y": 380,
         "wires": [
             [
                 "24c71b69e60e41bd"
@@ -4152,7 +4125,8 @@
         "y": 40,
         "wires": [
             [
-                "164baa371893de7a"
+                "164baa371893de7a",
+                "d9c0cf13cfa21a19"
             ]
         ]
     },
@@ -4310,7 +4284,8 @@
         "y": 180,
         "wires": [
             [
-                "6532974092861ef7"
+                "6532974092861ef7",
+                "5abf944e23a57b18"
             ]
         ]
     },
@@ -4330,7 +4305,7 @@
         "y": 180,
         "wires": [
             [
-                "70ec28e6b50bec41"
+                "c66ff37635c5da7a"
             ]
         ]
     },
@@ -4355,136 +4330,202 @@
         ]
     },
     {
-        "id": "70ec28e6b50bec41",
-        "type": "csv",
+        "id": "c66ff37635c5da7a",
+        "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "name": "",
-        "spec": "rfc",
-        "sep": "\\t",
-        "hdrin": true,
-        "hdrout": "none",
-        "multi": "mult",
-        "ret": "\\r\\n",
-        "temp": "",
-        "skip": "0",
-        "strings": true,
-        "include_empty_strings": "",
-        "include_null_values": "",
-        "x": 1010,
-        "y": 180,
+        "name": "Data Processor",
+        "func": "// 1. Parse TSV\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\n// Need at least header + 1 data line\nif (lines.length < 2) return null; \n\nconst headers = lines[0].split('\\t');\n// Helper to safely get value\nconst val = (row, colName) => {\n    const idx = headers.indexOf(colName);\n    return idx > -1 ? row[idx] : null;\n};\n\n// 2. Extract Metadata from the first valid data row (skipping [f]/[t] lines)\nlet firstRow = null;\nfor(let i=1; i<lines.length; i++) {\n    if(!lines[i].trim().startsWith('[')) {\n        firstRow = lines[i].split('\\t');\n        break;\n    }\n}\n\nconst meta = {\n    sample_id: 'N/A',\n    project: 'N/A',\n    acq_id: 'N/A',\n    vol_imaged: 1, // avoid div by zero default\n    resolution: 0\n};\n\nif (firstRow) {\n    meta.sample_id = val(firstRow, 'sample_id');\n    meta.project = val(firstRow, 'sample_project');\n    meta.acq_id = val(firstRow, 'acq_id');\n    meta.vol_imaged = parseFloat(val(firstRow, 'acq_imaged_volume')) || 0;\n    meta.resolution = parseFloat(val(firstRow, 'process_pixel')) || 0.75;\n}\n\n// 3. Define useful variables\nconst usefulKeys = [\n    'object_area', 'object_equivalent_diameter', 'object_perim.',\n    'object_major', 'object_minor', 'object_width', 'object_height',\n    'object_circ.', 'object_elongation', 'object_solidity', 'object_eccentricity',\n    'object_MeanHue', 'object_MeanSaturation', 'object_MeanValue', 'object_StdValue',\n    'object_x', 'object_y'\n];\n\n// 4. Process Rows\nconst items = [];\nlet totalBiovolume = 0;\n\nfor (let i = 1; i < lines.length; i++) {\n    const row = lines[i].split('\\t');\n    // Skip empty/bad lines\n    if (row.length < headers.length || row[0].trim().startsWith('[')) continue;\n\n    const url = `/ps/data/browse/api/preview/big/objects/${val(row, 'object_date')}/${val(row, 'sample_id')}/${val(row, 'acq_id')}/${val(row, 'img_file_name')}`;\n\n    const item = {\n        id: val(row, 'object_id'),\n        url: url\n    };\n\n    usefulKeys.forEach(key => {\n        const v = parseFloat(val(row, key));\n        item[key] = isNaN(v) ? 0 : v;\n    });\n\n    // Biovolume estimate (Sphere from ESD): 4/3 * pi * (r)^3\n    if(item.object_equivalent_diameter) {\n        const r = item.object_equivalent_diameter / 2;\n        totalBiovolume += (4/3) * Math.PI * Math.pow(r, 3);\n    }\n\n    items.push(item);\n}\n\n// 5. Final calculations for Header\nmeta.total_objects = items.length;\nmeta.abundance = meta.vol_imaged > 0 ? (items.length / meta.vol_imaged).toFixed(0) : 0;\n// Biovolume in Millions of µm³ per mL\nmeta.est_biovolume = meta.vol_imaged > 0 ? ((totalBiovolume / 1000000) / meta.vol_imaged).toFixed(2) : 0;\n\nmsg.payload = {\n    data: items,\n    keys: usefulKeys,\n    meta: meta\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1060,
+        "y": 320,
         "wires": [
             [
-                "8dc194f764cd61ef"
+                "bff00eae3f65f644",
+                "bbb2d0709f064549",
+                "45375ce0b837d4fb",
+                "905cfb1ad4803a3a",
+                "4244d2ed880cca66"
             ]
         ]
     },
     {
-        "id": "8dc194f764cd61ef",
+        "id": "bff00eae3f65f644",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "3d290173d833fd04",
+        "page": "",
+        "ui": "",
+        "name": "Gemini 3 Pro v3",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n    <div style=\"height: 100%; position: relative; min-height: 100vh;\">\n        \n        <v-overlay \n            :value=\"showOverlay\" \n            absolute \n            color=\"white\" \n            opacity=\"0.95\" \n            style=\"z-index: 9999; justify-content: center; align-items: center;\"\n        >\n            <div class=\"text-center\">\n                <div v-if=\"isLoading\">\n                    <v-progress-circular indeterminate color=\"primary\" size=\"64\" width=\"6\"></v-progress-circular>\n                    <div class=\"mt-4 primary--text text-h6 font-weight-light\">Processing Sample Data...</div>\n                </div>\n\n                <div v-else>\n                    <v-icon size=\"80\" color=\"grey lighten-2\">mdi-chart-scatter-plot</v-icon>\n                    <div class=\"mt-4 grey--text text--darken-1 text-h6 font-weight-light\">Waiting for Data...</div>\n                    <div class=\"caption grey--text\">Send a payload to visualize the dashboard</div>\n                </div>\n            </div>\n        </v-overlay>\n\n        <v-card outlined class=\"grey lighten-5\">\n            <v-card-text class=\"px-0\">\n                <v-row align=\"center\">\n                    \n                    <v-col cols=\"12\" md=\"9\" class=\"border-right\">\n                        <div class=\"caption grey--text text-uppercase font-weight-bold mb-1\">Sample Identity</div>\n                        <div class=\"text-h4 primary--text font-weight-bold\">\n                            {{ meta.sample_id || '--' }}\n                        </div>\n                        <div class=\"subtitle-1 grey--text text--darken-3 mt-1\">\n                            <strong>Project:</strong> {{ meta.project || '--' }}<br>\n                            <span class=\"caption\">Acq ID: {{ meta.acq_id || '--' }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\" md=\"3\" class=\"text-right\">\n                        <v-btn \n                            color=\"success\" \n                            large \n                            depressed \n                            :href=\"downloadUrl\" \n                            target=\"_blank\"\n                            :disabled=\"!meta.sample_id\"\n                        >\n                            <v-icon left>mdi-download</v-icon>\n                            Download EcoTaxa .zip\n                        </v-btn>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n        </v-card>\n\n        <v-row class=\"pa-0\">\n            <v-col class=\"pa-0\" cols=\"12\">\n                <v-row>\n                    \n                    <v-col class=\"pa-0\" cols=\"12\" md=\"6\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">1. Flowcell Distribution</div>\n                            <div id=\"chart-heatmap\" style=\"height: 300px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Check:</strong> Are particles evenly spread? 'Hotspots' indicate stuck dirt.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"6\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">2. Size Spectrum (ESD)</div>\n                            <div id=\"chart-esd\" style=\"height: 300px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Check:</strong> The dominant size class. A steep slope is typical for marine samples.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"12\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">\n                                3. Acquisition Stability (Timeline)\n                            </div>\n                            <div id=\"chart-timeline\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Look for gaps (clogs) or spikes (bubbles) over time.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">4. Color vs. Brightness</div>\n                            <div id=\"chart-colorspace\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Separates colorful/opaque (Living) from pale (Ghost).\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">5. Aspect Ratio</div>\n                            <div id=\"chart-aspect\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Points far from diagonal are chains/filaments.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">6. Greenness vs. Shape</div>\n                            <div id=\"chart-green\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> High Green + High Circ = Phytoplankton.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">7. Complexity</div>\n                            <div id=\"chart-complexity\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Deviations indicate spines or appendages.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">8. Focus Quality</div>\n                            <div id=\"chart-texture\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Low std dev indicates blurry objects.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">9. Solidity</div>\n                            <div id=\"chart-solidity\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Low solidity indicates fluffy aggregates.\n                            </div>\n                        </v-card>\n                    </v-col>\n                </v-row>\n            </v-col>\n        </v-row>\n\n\n        <v-card outlined class=\"mb-8 elevation-1\">\n            \n            <div>\n                <v-row>\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"9\">\n                        <div style=\"height: 600px; border: 1px solid #e0e0e0; border-radius: 4px;\">\n                            <div id=\"explorerPlot\" style=\"width:100%; height:100%;\"></div>\n                        </div>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"3\">\n                        <v-card class=\"pa-4\" outlined height=\"auto\" class=\"d-flex flex-column grey lighten-5\">\n                            <v-card-title class=\"subtitle-2 grey--text text--darken-2\">Explorer Details</v-card-title>\n                            \n                            <div v-if=\"!hoveredItem\" class=\"d-flex flex-column justify-center align-center flex-grow-1 grey--text\">\n                                <v-icon size=\"48\" color=\"grey lighten-2\">mdi-cursor-default-click-outline</v-icon>\n                                <div class=\"caption mt-2\">Hover over a point</div>\n                            </div>\n                            \n                            <div v-else class=\"d-flex flex-column\" style=\"height: 100%; overflow-y: auto;\">\n                                <v-card flat class=\"mb-3 white border-sm\">\n                                    <v-img :src=\"hoveredItem.url\" aspect-ratio=\"1\" contain class=\"grey lighten-4\">\n                                        <template v-slot:placeholder>\n                                            <v-row class=\"fill-height ma-0\" align=\"center\" justify=\"center\">\n                                                <v-progress-circular indeterminate color=\"primary\" size=\"20\"></v-progress-circular>\n                                            </v-row>\n                                        </template>\n                                        <template v-slot:error>\n                                            <v-icon color=\"grey lighten-1\">mdi-image-off</v-icon>\n                                        </template>\n                                    </v-img>\n                                </v-card>\n                                \n                                <div class=\"text-center mb-2\">\n                                    <v-chip x-small color=\"primary\" dark>ID: {{ hoveredItem.id }}</v-chip>\n                                </div>\n                                <v-divider class=\"mb-2\"></v-divider>\n                                <div class=\"caption\">\n                                    <v-row dense>\n                                        <v-col cols=\"6\" class=\"grey--text text--darken-1 font-weight-bold\">X ({{ xAxis }})</v-col>\n                                        <v-col cols=\"6\" class=\"text-right\">{{ formatVal(hoveredItem[xAxis]) }}</v-col>\n                                        <v-col cols=\"6\" class=\"grey--text text--darken-1 font-weight-bold\">Y ({{ yAxis }})</v-col>\n                                        <v-col cols=\"6\" class=\"text-right\">{{ formatVal(hoveredItem[yAxis]) }}</v-col>\n                                    </v-row>\n                                </div>\n                            </div>\n                        </v-card>\n                    </v-col>\n                </v-row>\n\n            <v-row class=\"mb-4\" align=\"center\" justify=\"space-between\" >\n\n                <v-col cols=\"12\" md=\"5\">\n                    <v-select v-model=\"xAxis\" :items=\"keys\" label=\"X Axis\" variant=\"outlined\" density=\"compact\" hide-details\n                        bg-color=\"white\" />\n                </v-col>\n\n                <v-col cols=\"12\" md=\"5\">\n                    <v-select v-model=\"yAxis\" :items=\"keys\" label=\"Y Axis\" variant=\"outlined\" density=\"compact\" hide-details\n                        bg-color=\"white\" />\n                </v-col>\n\n                <v-col cols=\"12\" md=\"2\">\n                    <v-btn color=\"primary\" block size=\"small\" @click=\"updateExplorer\">\n                        <v-icon start>mdi-chart-scatter-plot-hexbin</v-icon>\n                        Load the plot\n                    </v-btn>\n                </v-col>\n            </v-row>\n            </div>\n        </v-card>\n\n        <v-card\n            v-if=\"reportTooltip.show\"\n            class=\"elevation-10 rounded-lg\"\n            :style=\"{\n                position: 'fixed',\n                top: reportTooltip.y + 15 + 'px',\n                left: reportTooltip.x + 15 + 'px',\n                zIndex: 9999,\n                width: '200px',\n                pointerEvents: 'none'\n            }\"\n        >\n            <v-img :src=\"reportTooltip.url\" aspect-ratio=\"1\" contain class=\"grey lighten-4 rounded-t-lg\"></v-img>\n            <div class=\"caption pa-2 text-center white font-weight-bold primary--text\">\n                ID: {{ reportTooltip.id }}\n            </div>\n        </v-card>\n\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            isLoading: false,\n            dataset: [],\n            keys: [],\n            meta: {\n                sample_id: '', project: '', acq_id: '',\n                abundance: 0, total_objects: 0, est_biovolume: 0,\n                vol_imaged: 0, resolution: 0\n            },\n            xAxis: 'object_elongation',\n            yAxis: 'object_circularity',\n            \n            hoveredItem: null,\n            reportTooltip: { show: false, url: '', id: '', x: 0, y: 0 },\n            dialogs: { abundance: false, biovolume: false }\n        }\n    },\n    watch: {\n        msg: {\n            handler(val) {\n                if (val.payload && val.payload.data) {\n                    this.isLoading = true;\n                    \n                    setTimeout(() => {\n                        this.meta = val.payload.meta || {};\n                        \n                        this.dataset = val.payload.data.map((d, i) => {\n                            const h = d.object_MeanHue || 0;\n                            const greenDist = Math.abs(h - 80); \n                            d.custom_greenness = Math.max(0, 100 - greenDist); \n                            d.sequence_index = i; \n                            return d;\n                        });\n                        \n                        this.keys = val.payload.keys || [];\n                        \n                        if (this.keys.includes('object_elongation')) this.xAxis = 'object_elongation';\n                        if (this.keys.includes('object_area')) this.yAxis = 'object_area';\n                        \n                        this.$nextTick(() => {\n                            this.updateExplorer();\n                            this.generateReport();\n                            this.isLoading = false;\n                        });\n                    }, 50);\n                }\n            },\n            deep: true\n        }\n    },\n    computed: {\n        // Logic to show overlay if loading OR if data is empty\n        showOverlay() {\n            return this.isLoading || this.dataset.length === 0;\n        },\n        totalCount() { return this.dataset.length; },\n        downloadUrl() {\n            if (!this.meta.sample_id) return '#';\n            return `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.meta.sample_id}.zip`;\n        }\n    },\n    mounted() {\n        if (!window.Plotly) {\n            const script = document.createElement('script');\n            script.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n            script.onload = () => { /* Loaded */ };\n            document.head.appendChild(script);\n        }\n    },\n    methods: {\n        formatVal(val) {\n            return typeof val === 'number' ? val.toFixed(2) : val;\n        },\n        \n        updateExplorer() {\n            const divId = 'explorerPlot';\n            if (!window.Plotly || !document.getElementById(divId)) return;\n\n            // CLEAR PLOT if no data\n            if (this.dataset.length === 0) {\n                Plotly.purge(divId);\n                this.hoveredItem = null;\n                return;\n            }\n\n            const trace = {\n                x: this.dataset.map(d => d[this.xAxis]),\n                y: this.dataset.map(d => d[this.yAxis]),\n                mode: 'markers',\n                type: 'scatter',\n                marker: { size: 8, color: '#1976D2', opacity: 0.6, line: {width:1, color:'white'} },\n                hoverinfo: 'none'\n            };\n\n            const layout = {\n                margin: { t: 20, b: 40, l: 60, r: 20 },\n                xaxis: { title: this.xAxis },\n                yaxis: { title: this.yAxis },\n                plot_bgcolor: '#eef3ff',\n                hovermode: 'closest',\n                dragmode: 'zoom'\n            };\n\n            Plotly.newPlot(divId, [trace], layout, { responsive: true, displayModeBar: true }).then(() => {\n                document.getElementById(divId).on('plotly_hover', (data) => {\n                    this.hoveredItem = this.dataset[data.points[0].pointIndex];\n                });\n            });\n        },\n\n        generateReport() {\n            const chartIds = [\n                'chart-heatmap', 'chart-esd', 'chart-timeline', \n                'chart-colorspace', 'chart-aspect', 'chart-green', \n                'chart-complexity', 'chart-texture', 'chart-solidity'\n            ];\n\n            if (!window.Plotly) return;\n\n            // CLEAR ALL PLOTS if no data\n            if (this.dataset.length === 0) {\n                chartIds.forEach(id => {\n                    const el = document.getElementById(id);\n                    if(el) Plotly.purge(el);\n                });\n                return;\n            }\n            \n            const commonLayout = {\n                margin: {t:10,b:30,l:40,r:10},\n                plot_bgcolor: '#eef3ff'\n            };\n\n            // 1. Heatmap (Portland)\n            Plotly.newPlot('chart-heatmap', [{\n                x: this.dataset.map(d => d.object_x),\n                y: this.dataset.map(d => d.object_y),\n                type: 'histogram2d', \n                colorscale: 'Plotly3',\n                nbinsx: 100, nbinsy: 80\n            }], { \n                ...commonLayout, \n                hovermode: false, \n                xaxis: { title: 'X (px)' }, \n                yaxis: { title: 'Y (px)', autorange: 'reversed' } \n            }, {responsive:true});\n\n            // 2. ESD\n            Plotly.newPlot('chart-esd', [{\n                x: this.dataset.map(d => d.object_equivalent_diameter),\n                type: 'histogram',\n                marker: { color: 'teal' }\n            }], { ...commonLayout, xaxis: {title: 'ESD'} }, {responsive:true});\n\n            // 3. Timeline (Blue)\n            this.createScatter('chart-timeline', 'sequence_index', 'object_area', 'Acq Sequence', 'Area', 'blue');\n\n            // 4. Color Space (Magenta)\n            this.createScatter('chart-colorspace', 'object_MeanSaturation', 'object_MeanValue', 'Saturation', 'Brightness', 'magenta');\n\n            // 5. Aspect\n            this.createScatter('chart-aspect', 'object_width', 'object_height', 'Width', 'Height', 'orange');\n\n            // 6. Greenness\n            this.createScatter('chart-green', 'custom_greenness', 'object_circ.', 'Green Index', 'Circularity', '#4CAF50');\n\n            // 7. Complexity\n            this.createScatter('chart-complexity', 'object_area', 'object_perim.', 'Area', 'Perimeter', 'purple');\n\n            // 8. Texture\n            this.createScatter('chart-texture', 'object_area', 'object_StdValue', 'Area', 'Texture (Std Dev)', 'brown');\n\n            // 9. Solidity (Histo)\n            Plotly.newPlot('chart-solidity', [{\n                x: this.dataset.map(d => d.object_solidity),\n                type: 'histogram',\n                marker: { color: '#3F51B5' }\n            }], { ...commonLayout, xaxis: {title: 'Solidity'} }, {responsive:true});\n        },\n\n        createScatter(divId, xKey, yKey, xTitle, yTitle, color) {\n             const el = document.getElementById(divId);\n             if (!el) return;\n             \n             const trace = {\n                x: this.dataset.map(d => d[xKey]),\n                y: this.dataset.map(d => d[yKey]),\n                mode: 'markers',\n                type: 'scatter',\n                marker: { size: 10, color: color, opacity: 0.5 },\n                hoverinfo: 'none'\n            };\n\n            const layout = {\n                margin: {t:10,b:30,l:50,r:10},\n                xaxis: {title: xTitle},\n                yaxis: {title: yTitle},\n                plot_bgcolor: '#eef3ff',\n                hovermode: 'closest'\n            };\n\n            Plotly.newPlot(divId, [trace], layout, {responsive:true}).then(() => {\n                el.on('plotly_hover', (data) => {\n                    const idx = data.points[0].pointIndex;\n                    this.reportTooltip = {\n                        show: true,\n                        url: this.dataset[idx].url,\n                        id: this.dataset[idx].id,\n                        x: data.event.clientX,\n                        y: data.event.clientY\n                    };\n                });\n                \n                el.on('plotly_unhover', () => {\n                    this.reportTooltip.show = false;\n                });\n            });\n        }\n    }\n}\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1260,
+        "y": 320,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "bbb2d0709f064549",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "3d290173d833fd04",
+        "page": "",
+        "ui": "",
+        "name": "UMAP",
+        "order": 3,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n    <div class=\"pa-4\" style=\"height: 100vh; display: flex; flex-direction: column;\">\n        \n        <v-row style=\"height: 100%;\">\n            \n            <v-col cols=\"12\" md=\"3\" class=\"d-flex flex-column\" style=\"height: 100%;\">\n                <v-card outlined class=\"grey lighten-5 flex-grow-1 d-flex flex-column\">\n                    <v-card-title class=\"primary white--text py-3 subtitle-1 font-weight-bold\">\n                        <v-icon left color=\"white\">mdi-graph-outline</v-icon>\n                        UMAP Parameters\n                    </v-card-title>\n                    \n                    <div class=\"pa-4 flex-grow-1\" style=\"overflow-y: auto;\">\n                        \n                        <v-alert dense type=\"info\" outlined class=\"mb-6 caption\">\n                            <strong>{{ totalCount }}</strong> Objects<br>\n                            Clustering based on <strong>{{ availableKeys.length }}</strong> variables.\n                        </v-alert>\n\n                        <div class=\"mb-6\">\n                            <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Neighbors ({{ params.n_neighbors }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.n_neighbors\"\n                                min=\"2\" max=\"100\" step=\"1\"\n                                dense hide-details\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-2\" style=\"line-height: 1.3;\">\n                                <strong>Insight:</strong> Controls the balance between local and global structure.\n                                <ul class=\"pl-3 mt-1\">\n                                    <li><strong>Low (2-10):</strong> Focuses on very local details (micro-clusters).</li>\n                                    <li><strong>High (30-100):</strong> Preserves the overall global shape of the data.</li>\n                                </ul>\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                             <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Min Distance ({{ params.min_dist }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.min_dist\"\n                                min=\"0.01\" max=\"0.99\" step=\"0.01\"\n                                dense hide-details\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-2\" style=\"line-height: 1.3;\">\n                                <strong>Insight:</strong> Controls how tightly points are packed together.\n                                <ul class=\"pl-3 mt-1\">\n                                    <li><strong>Low (0.01):</strong> Creates tight, dense clumps.</li>\n                                    <li><strong>High (0.5+):</strong> Spreads points out, revealing structure within clumps.</li>\n                                </ul>\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                            <div class=\"caption font-weight-bold grey--text text--darken-2 mb-1\">\n                                Image Zoom ({{ imageSize }})\n                            </div>\n                            <v-slider\n                                v-model=\"imageSize\"\n                                min=\"0.02\" max=\"0.5\" step=\"0.01\"\n                                dense hide-details\n                                color=\"secondary\"\n                                track-color=\"grey lighten-2\"\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-2\">\n                                Adjusts the size of the images projected on the plot.\n                            </div>\n                        </div>\n\n                    </div>\n\n                    <div class=\"pa-4 white elevation-2\">\n                        <v-btn \n                            color=\"primary\" \n                            block \n                            large\n                            depressed\n                            :loading=\"isCalculating\"\n                            @click=\"runUMAP\"\n                        >\n                            <v-icon left>mdi-play</v-icon>\n                            Run UMAP Calculation\n                        </v-btn>\n                    </div>\n                </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"9\" style=\"height: 100%;\">\n                <v-card outlined style=\"height: 100%; position: relative;\">\n                    \n                    <v-overlay \n                        absolute \n                        :value=\"isCalculating\"\n                        opacity=\"0.8\"\n                        color=\"white\"\n                        style=\"z-index: 10;\"\n                        class=\"d-flex justify-center align-center\"\n                    >\n                        <div class=\"text-center\">\n                            <v-progress-circular indeterminate color=\"primary\" size=\"64\" width=\"6\"></v-progress-circular>\n                            <div class=\"mt-4 primary--text text-h5 font-weight-light\">Calculating UMAP...</div>\n                            <div class=\"caption grey--text mt-1\">Processing {{ availableKeys.length }} dimensions for {{ totalCount }} objects.</div>\n                        </div>\n                    </v-overlay>\n\n                    <div v-if=\"!umapResult && !isCalculating\" class=\"d-flex justify-center align-center\" style=\"height: 100%;\">\n                        <div class=\"text-center grey--text\">\n                            <v-icon size=\"64\" color=\"grey lighten-2\">mdi-chart-bubble</v-icon>\n                            <div class=\"text-h6 mt-2\">Ready to Cluster</div>\n                            <p>Click \"Run UMAP Calculation\" to generate the map.</p>\n                        </div>\n                    </div>\n\n                    <div id=\"umapPlot\" style=\"width:100%; height:100%;\"></div>\n\n                </v-card>\n            </v-col>\n\n        </v-row>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            availableKeys: [],\n            isCalculating: false,\n            params: {\n                n_neighbors: 15,\n                min_dist: 0.15,\n                spread: 1.0\n            },\n            imageSize: 0.3, // Default image scale\n            umapResult: null\n        }\n    },\n    computed: {\n        totalCount() { return this.rawData.length; }\n    },\n    watch: {\n        msg: {\n            handler(val) {\n                if (val.payload && val.payload.data) {\n                    this.rawData = val.payload.data;\n                    this.availableKeys = val.payload.keys || [];\n                    \n                    // Reset result on new data\n                    this.umapResult = null;\n\n                    // Auto-run if small dataset\n                    if(this.totalCount > 0 && this.totalCount < 200) {\n                        this.runUMAP();\n                    }\n                }\n            },\n            deep: true\n        },\n        // Re-draw plot instantly when image size changes\n        imageSize() {\n            if (this.umapResult) this.drawPlot();\n        }\n    },\n    mounted() {\n        // Load Plotly\n        if (!window.Plotly) {\n            const s1 = document.createElement('script');\n            s1.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n            document.head.appendChild(s1);\n        }\n        \n        // Load UMAP-JS\n        if (!window.UMAP) {\n            const s2 = document.createElement('script');\n            s2.src = \"https://cdn.jsdelivr.net/npm/umap-js@1.3.3/lib/umap-js.min.js\";\n            document.head.appendChild(s2);\n        }\n    },\n    methods: {\n        async runUMAP() {\n            if (!window.UMAP || this.rawData.length === 0) return;\n\n            this.isCalculating = true;\n\n            // UI update delay\n            await new Promise(resolve => setTimeout(resolve, 100));\n\n            try {\n                const matrix = this.normalizeData(this.rawData, this.availableKeys);\n\n                const umap = new window.UMAP({\n                    nNeighbors: this.params.n_neighbors,\n                    minDist: this.params.min_dist,\n                    spread: this.params.spread,\n                    nComponents: 2, \n                    random: Math.random\n                });\n\n                const embedding = await umap.fit(matrix);\n\n                this.umapResult = this.rawData.map((item, i) => ({\n                    ...item,\n                    umapX: embedding[i][0],\n                    umapY: embedding[i][1]\n                }));\n\n                this.drawPlot();\n\n            } catch (e) {\n                console.error(\"UMAP Calculation Error\", e);\n            } finally {\n                this.isCalculating = false;\n            }\n        },\n\n        normalizeData(data, features) {\n            const stats = {};\n            features.forEach(f => {\n                const vals = data.map(row => row[f] || 0);\n                stats[f] = {\n                    min: Math.min(...vals),\n                    max: Math.max(...vals)\n                };\n                if (stats[f].max === stats[f].min) stats[f].max += 1; \n            });\n\n            return data.map(row => {\n                return features.map(f => {\n                    const val = row[f] || 0;\n                    return (val - stats[f].min) / (stats[f].max - stats[f].min);\n                });\n            });\n        },\n\n        drawPlot() {\n            const divId = 'umapPlot';\n            if (!window.Plotly || !this.umapResult) return;\n\n            // 1. Hidden Scatter Trace\n            const trace = {\n                x: this.umapResult.map(d => d.umapX),\n                y: this.umapResult.map(d => d.umapY),\n                mode: 'markers',\n                type: 'scatter',\n                text: this.umapResult.map(d => `ID: ${d.id}`),\n                marker: { \n                    size: 2, \n                    color: 'rgba(0,0,0,0)' \n                },\n                hoverinfo: 'text'\n            };\n\n            // 2. Image Layout Array\n            const images = this.umapResult.map(d => ({\n                source: d.url,\n                xref: 'x',\n                yref: 'y',\n                x: d.umapX,\n                y: d.umapY,\n                sizex: this.imageSize,\n                sizey: this.imageSize,\n                xanchor: 'center',\n                yanchor: 'middle',\n                layer: 'above'\n            }));\n\n            // 3. Shapes (Contours/Borders)\n            // We create a rectangle shape behind each image to act as a border\n            const shapes = this.umapResult.map(d => ({\n                type: 'rect',\n                xref: 'x',\n                yref: 'y',\n                x0: d.umapX - (this.imageSize / 2),\n                y0: d.umapY - (this.imageSize / 2),\n                x1: d.umapX + (this.imageSize / 2),\n                y1: d.umapY + (this.imageSize / 2),\n                line: {\n                    color: '#bdbdbd', // Light grey contour\n                    width: 1\n                }\n            }));\n\n            const layout = {\n                title: {\n                    text: 'Morphological Similarity Map',\n                    font: { size: 14, color: 'grey' }\n                },\n                xaxis: { showgrid: false, zeroline: false, showticklabels: false },\n                yaxis: { showgrid: false, zeroline: false, showticklabels: false },\n                plot_bgcolor: 'black',\n                margin: { t: 30, b: 10, l: 10, r: 10 },\n                hovermode: 'closest',\n                dragmode: 'pan',\n                images: images,\n            };\n\n            const config = {\n                responsive: true,\n                scrollZoom: true,\n                displayModeBar: true,\n                modeBarButtonsToRemove: ['lasso2d', 'select2d']\n            };\n\n            Plotly.newPlot(divId, [trace], layout, config);\n        }\n    }\n}\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1290,
+        "y": 400,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "4b133307e9244dd1",
         "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "name": "function 1",
-        "func": "// Vérifie que payload est un tableau\nif (Array.isArray(msg.payload)) {\n    // Supprime la première entrée du tableau\n    msg.payload = msg.payload.slice(1);\n}\n\nreturn msg;\n",
+        "name": "Eraser",
+        "func": "// Construct a \"Blank\" payload structure\n// This matches the structure the UI expects, preventing \"undefined\" errors.\n\nmsg.payload = {\n    // 1. Empty Data Array (Clears all plots and the explorer)\n    data: [],\n    \n    // 2. Empty Keys (Clears dropdown selectors)\n    keys: [],\n    \n    // 3. Reset Metadata (Sets header text to default/zero)\n    meta: {\n        sample_id: 'Select a sample from the table',\n        project: '-',\n        acq_id: '-',\n        vol_imaged: 0,\n        resolution: 0,\n        \n        // Computed stats reset\n        total_objects: 0,\n        abundance: 0,\n        est_biovolume: 0\n    }\n};\n\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 900,
-        "y": 420,
+        "x": 1090,
+        "y": 360,
         "wires": [
             [
-                "687050b30c8d78f3",
-                "86bff301d6790945",
-                "ddac1dedf1ed0bb3",
-                "mega_plankto_v3"
+                "bff00eae3f65f644",
+                "bbb2d0709f064549",
+                "45375ce0b837d4fb",
+                "4244d2ed880cca66"
             ]
         ]
     },
     {
-        "id": "687050b30c8d78f3",
+        "id": "905cfb1ad4803a3a",
         "type": "debug",
         "z": "14f8c9b5ce1235cc",
-        "name": "debug 6",
+        "name": "debug 4",
         "active": true,
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
+        "complete": "false",
         "statusVal": "",
         "statusType": "auto",
-        "x": 1260,
-        "y": 580,
+        "x": 1440,
+        "y": 780,
         "wires": []
     },
     {
-        "id": "86bff301d6790945",
+        "id": "45375ce0b837d4fb",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "44d42558adf7baf7",
+        "group": "3d290173d833fd04",
         "page": "",
         "ui": "",
-        "name": "ChatGPT 5.1 Pro v1",
-        "order": 1,
+        "name": "t-sne",
+        "order": 4,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-4 white\" style=\"min-height: 100vh; color:#333;\">\n\n    <!-- NO DATA STATE -->\n    <v-row v-if=\"!hasData\" align=\"center\" justify=\"center\" style=\"height:80vh;\">\n      <div class=\"text-center\">\n        <v-progress-circular indeterminate color=\"primary\" size=\"64\"></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text text--darken-1\">\n          Waiting for PlanktoScope segmentation results...\n        </div>\n        <div class=\"caption grey--text\">\n          Send an array of segmented objects as <code>msg.payload</code>.\n        </div>\n      </div>\n    </v-row>\n\n    <!-- MAIN VIEW -->\n    <div v-else>\n\n      <!-- HEADER / CONTEXT -->\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"12\">\n          <v-card outlined class=\"pa-3 d-flex align-center\">\n            <v-icon color=\"primary\" large class=\"mr-3\">mdi-microscope</v-icon>\n            <div>\n              <div class=\"text-h6 font-weight-bold text-uppercase primary--text\">\n                PlanktoScope Segmentation QA\n              </div>\n              <div class=\"caption grey--text\">\n                Project: <strong>{{ header.sample_project }}</strong> ·\n                Sample: <strong>{{ header.sample_id }}</strong> ·\n                Acquisition: <strong>{{ header.acq_id }}</strong>\n              </div>\n              <div class=\"caption grey--text mt-1\">\n                {{ acquisitionLabel }}\n              </div>\n            </div>\n            <v-spacer></v-spacer>\n\n            <v-btn\n              color=\"primary\"\n              outlined\n              class=\"mr-2\"\n              :href=\"ecotaxaLink\"\n              target=\"_blank\"\n              v-if=\"header.acq_id !== 'N/A'\"\n            >\n              <v-icon left small>mdi-folder-zip-outline</v-icon>\n              EcoTaxa (.zip)\n            </v-btn>\n\n            <v-btn color=\"grey darken-2\" outlined class=\"mr-2\" @click=\"downloadCSV\">\n              <v-icon left small>mdi-table-arrow-down</v-icon>\n              CSV export\n            </v-btn>\n\n            <v-btn color=\"primary\" text small @click=\"resetFilters\">\n              <v-icon left small>mdi-filter-remove-outline</v-icon>\n              Reset gates\n            </v-btn>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- TOP KPIs -->\n      <v-row dense class=\"mb-3\">\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 text-center fill-height\">\n            <div class=\"caption grey--text\">Imaged volume</div>\n            <div class=\"text-h5 font-weight-medium\">\n              {{ formatNum(header.acq_imaged_volume, 2) }}\n              <span class=\"caption\">mL</span>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 text-center fill-height\">\n            <div class=\"caption grey--text\">Segmented objects</div>\n            <div class=\"text-h5 font-weight-medium\">\n              {{ filteredObjects.length }}\n              <span class=\"caption grey--text\">/ {{ cleanObjects.length }}</span>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"6\" md=\"3\">\n          <v-card\n            outlined\n            class=\"pa-3 text-center fill-height\"\n            style=\"border-color:#2196F3;border-width:2px;\"\n          >\n            <div class=\"caption blue--text text--darken-1 font-weight-bold\">\n              Abundance\n            </div>\n            <div class=\"text-h5 font-weight-bold blue--text text--darken-1\">\n              {{ formatNum(abundance, 1) }}\n              <span class=\"caption\">ind./mL</span>\n            </div>\n          </v-card>\n        </v-col>\n\n        <v-col cols=\"6\" md=\"3\">\n          <v-card outlined class=\"pa-3 text-center fill-height\">\n            <div class=\"caption grey--text\">Total biovolume</div>\n            <div class=\"text-h5 font-weight-medium orange--text text--darken-1\">\n              {{ formatNum(totalBiovolume, 3) }}\n              <span class=\"caption\">mm³</span>\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n      <!-- SECOND ROW: QA / ACQ PARAMS / PIPELINE -->\n      <v-row dense class=\"mb-4\">\n        <!-- Segmentation QA -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card outlined class=\"pa-3\">\n            <div class=\"subtitle-2 font-weight-bold mb-2\">Segmentation quality</div>\n\n            <v-row dense class=\"caption\">\n              <v-col cols=\"7\" class=\"grey--text\">Mean ESD</v-col>\n              <v-col cols=\"5\" class=\"text-right font-weight-bold\">\n                {{ formatNum(segStats.meanEsd, 1) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Median ESD</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.medianEsd, 1) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Objects &lt; min ESD</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ segStats.numSmall }} ({{ formatNum(segStats.fracSmall*100, 0) }}%)\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Objects with holes (Euler &lt; 0)</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ segStats.nHoles }} ({{ formatNum(segStats.fracHoles*100, 0) }}%)\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Mean circularity</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.meanCirc, 3) }}\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Mean gray (MeanValue)</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.meanVal, 0) }}\n              </v-col>\n            </v-row>\n\n            <v-divider class=\"my-2\"></v-divider>\n\n            <div class=\"caption mb-1 font-weight-bold\">Automatic alerts</div>\n            <div v-if=\"!qcAlerts.length\" class=\"caption green--text text--darken-2\">\n              No strong segmentation issues detected.\n            </div>\n            <div v-else>\n              <v-chip\n                v-for=\"(a,i) in qcAlerts\"\n                :key=\"i\"\n                small\n                class=\"ma-1\"\n                color=\"deep-orange lighten-4\"\n                text-color=\"deep-orange darken-3\"\n              >\n                <v-icon left x-small>mdi-alert</v-icon>{{ a }}\n              </v-chip>\n            </div>\n          </v-card>\n        </v-col>\n\n        <!-- Acquisition parameters -->\n        <v-col cols=\"12\" md=\"4\">\n          <v-card outlined class=\"pa-3\">\n            <div class=\"subtitle-2 font-weight-bold mb-2\">Acquisition parameters</div>\n            <v-row dense class=\"caption\">\n              <v-col cols=\"7\" class=\"grey--text\">Pumped volume</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.acq_pumped_volume, 2) }} mL\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Filtered volume</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.sample_filtered_volume, 0) }} mL\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Concentration factor</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.sample_concentration_factor, 1) }}\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Flowcell thickness</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.acq_flowcell_thickness, 0) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Min ESD (process_min_ESD)</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(segStats.smallThreshold, 0) }} µm\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Pixel size</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ formatNum(header.process_pixel, 3) }} µm/px\n              </v-col>\n\n              <v-col cols=\"7\" class=\"grey--text\">Camera resolution</v-col>\n              <v-col cols=\"5\" class=\"text-right\">\n                {{ header.acq_camera_resolution || '-' }}\n              </v-col>\n            </v-row>\n          </v-card>\n        </v-col>\n\n        <!-- Segmentation pipeline -->\n        <v-col cols=\"12\" md=\"4\">\n        </v-col>\n      </v-row>\n\n      <!-- MAIN LAYOUT: GATES / CHARTS+GALLERY / INSPECTOR -->\n      <v-row>\n        <!-- GATING PANEL -->\n        <v-col cols=\"12\" md=\"3\" lg=\"2\">\n          <v-card outlined class=\"sticky-top\">\n            <v-card-title class=\"subtitle-2 grey lighten-4 py-2\">\n              Morphological gates\n            </v-card-title>\n            <v-card-text class=\"pt-4\">\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Size (ESD, µm)</span>\n                <span>{{ filters.esd[0] }}–{{ filters.esd[1] }}</span>\n              </div>\n              <v-range-slider\n                v-model=\"filters.esd\"\n                :min=\"sliderStats.min\"\n                :max=\"sliderStats.max\"\n                dense\n                hide-details\n                class=\"mt-1 mb-4\"\n              ></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Circularity</span>\n                <span>{{ filters.circ[0].toFixed(2) }}–{{ filters.circ[1].toFixed(2) }}</span>\n              </div>\n              <v-range-slider\n                v-model=\"filters.circ\"\n                :min=\"0\"\n                :max=\"1\"\n                :step=\"0.05\"\n                dense\n                hide-details\n                class=\"mt-1 mb-4\"\n              ></v-range-slider>\n\n              <div class=\"d-flex justify-space-between caption font-weight-bold\">\n                <span>Mean gray (Value)</span>\n              </div>\n              <div class=\"caption text-right grey--text\">\n                {{ filters.val[0] }}–{{ filters.val[1] }}\n              </div>\n              <v-range-slider\n                v-model=\"filters.val\"\n                :min=\"0\"\n                :max=\"255\"\n                :step=\"5\"\n                dense\n                hide-details\n                class=\"mt-1 mb-4\"\n              ></v-range-slider>\n\n              <v-btn block text small color=\"grey\" @click=\"resetFilters\">\n                Reset gates\n              </v-btn>\n            </v-card-text>\n          </v-card>\n        </v-col>\n\n        <!-- CHARTS + GALLERY -->\n        <v-col cols=\"12\" md=\"6\" lg=\"7\">\n          <v-row dense>\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Size spectrum (ESD)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartSize\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Gray-level histogram (MeanValue)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartGray\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Morphospace (ESD vs circularity)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartMorpho\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"6\">\n              <v-card outlined class=\"pa-2\">\n                <div class=\"caption font-weight-bold text-center\">\n                  Structural complexity (elongation vs solidity)\n                </div>\n                <div style=\"height:220px;width:100%;\">\n                  <canvas ref=\"chartStructure\"></canvas>\n                </div>\n              </v-card>\n            </v-col>\n          </v-row>\n\n          <!-- OBJECT GALLERY -->\n          <v-card outlined class=\"mt-3\">\n            <v-card-title class=\"subtitle-2 py-2 grey lighten-5\">\n              Object gallery ({{ filteredObjects.length }})\n              <v-spacer></v-spacer>\n              <v-select\n                v-model=\"gallerySort\"\n                :items=\"sortOptions\"\n                item-text=\"text\"\n                item-value=\"value\"\n                dense\n                outlined\n                hide-details\n                style=\"max-width:210px;\"\n                class=\"caption\"\n              ></v-select>\n            </v-card-title>\n            <v-card-text class=\"pa-2\">\n              <div v-if=\"!filteredObjects.length\" class=\"text-center pa-5 caption\">\n                No objects within current gates.\n              </div>\n              <div class=\"gallery-grid\">\n                <div\n                  v-for=\"obj in paginatedObjects\"\n                  :key=\"obj.object_id\"\n                  class=\"gallery-item\"\n                  :class=\"{selected: selectedId === obj.object_id}\"\n                  @click=\"selectedId = obj.object_id\"\n                >\n                  <v-img\n                    :src=\"getImageUrl(obj)\"\n                    aspect-ratio=\"1\"\n                    contain\n                    class=\"white rounded\"\n                  ></v-img>\n                </div>\n              </div>\n            </v-card-text>\n          </v-card>\n        </v-col>\n\n        <!-- OBJECT INSPECTOR -->\n        <v-col cols=\"12\" md=\"3\" lg=\"3\">\n          <v-card outlined class=\"sticky-top\">\n            <v-card-title class=\"subtitle-2 grey lighten-4 py-2\">\n              Object inspector\n            </v-card-title>\n\n            <div v-if=\"selectedObject\" class=\"pa-3\">\n              <v-img\n                :src=\"getImageUrl(selectedObject)\"\n                max-height=\"220\"\n                contain\n                class=\"mx-auto mb-2\"\n              ></v-img>\n              <div class=\"caption text-center mb-3 font-weight-bold\">\n                {{ selectedObject.object_id }}\n              </div>\n\n              <v-row dense class=\"caption\">\n                <v-col cols=\"7\" class=\"grey--text\">ESD</v-col>\n                <v-col cols=\"5\" class=\"text-right font-weight-bold\">\n                  {{ formatNum(selectedObject.esd_um, 1) }} µm\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Width × height</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.width_um,1) }}×{{ formatNum(selectedObject.height_um,1) }} µm\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Circularity</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.circ, 3) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Mean gray</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.val, 0) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Elongation</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.elongation, 1) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Solidity</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.solidity, 3) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Eccentricity</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.ecc, 3) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Euler number</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ selectedObject.euler }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Area (px²)</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.area_px2, 0) }}\n                </v-col>\n\n                <v-col cols=\"7\" class=\"grey--text\">Area (µm²)</v-col>\n                <v-col cols=\"5\" class=\"text-right\">\n                  {{ formatNum(selectedObject.area_um2, 1) }}\n                </v-col>\n              </v-row>\n            </div>\n\n            <div v-else class=\"pa-4 caption grey--text text-center\">\n              Select an object in the gallery to inspect its segmentation.\n            </div>\n          </v-card>\n        </v-col>\n      </v-row>\n\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      filters: {\n        esd: [0, 2000],\n        circ: [0, 1],\n        val: [0, 255]\n      },\n      sortOptions: [\n        { text: 'ESD (descending)', value: 'esd_desc' },\n        { text: 'ESD (ascending)', value: 'esd_asc' },\n        { text: 'Darkest (MeanValue)', value: 'val_asc' },\n        { text: 'Roundest (circularity)', value: 'circ_desc' }\n      ],\n      gallerySort: 'esd_desc',\n      selectedId: null,\n      charts: {\n        chartSize: null,\n        chartGray: null,\n        chartMorpho: null,\n        chartStructure: null\n      }\n    };\n  },\n\n  computed: {\n    hasData() {\n      return (\n        this.msg &&\n        Array.isArray(this.msg.payload) &&\n        this.msg.payload.length > 1\n      );\n    },\n\n    cleanObjects() {\n      if (!this.hasData) return [];\n\n      // First row can be a template row with \"[f]\" / \"[t]\" markers — skip it\n      const items = this.msg.payload.filter(o => o && o.object_id && o.object_id !== '[t]');\n\n      return items\n        .map(o => {\n          const pixelSize =\n            Number(o.process_pixel || this.msg.process_pixel || this.msg.calibration_pixel_size) || 1; // µm/px\n\n          const esd_px = Number(o.object_equivalent_diameter) || 0;\n          const width_px = Number(o.object_width) || 0;\n          const height_px = Number(o.object_height) || 0;\n          const area_px2 = Number(o.object_area) || 0;\n\n          return {\n            ...o,\n            pixelSize,\n            esd_px,\n            esd_um: esd_px * pixelSize,\n            width_px,\n            height_px,\n            width_um: width_px * pixelSize,\n            height_um: height_px * pixelSize,\n            circ: Number(o['object_circ.']) || 0,\n            val: Number(o.object_MeanValue) || 0,\n            hue: Number(o.object_MeanHue) || 0,\n            solidity: Number(o.object_solidity) || 0,\n            elongation: Number(o.object_elongation) || 1,\n            ecc: Number(o.object_eccentricity) || 0,\n            euler: Number(o.object_euler_number) || 0,\n            area_px2,\n            area_um2: area_px2 * pixelSize * pixelSize\n          };\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    header() {\n      if (!this.cleanObjects.length) {\n        return {\n          sample_project: '?',\n          sample_id: '?',\n          acq_id: 'N/A',\n          acq_imaged_volume: 0,\n          acq_pumped_volume: 0,\n          sample_filtered_volume: 0,\n          sample_concentration_factor: 1,\n          acq_flowcell_thickness: 0,\n          process_min_ESD: 0,\n          process_pixel: 0,\n          acq_camera_resolution: '',\n          acq_local_datetime: '',\n          object_date: '',\n          object_lat: null,\n          object_lon: null\n        };\n      }\n      const obj =\n        this.cleanObjects.find(o => Number(o.acq_imaged_volume) > 0) ||\n        this.cleanObjects[0];\n\n      return {\n        sample_project: obj.sample_project || 'Unknown',\n        sample_id: obj.sample_id || 'Unknown',\n        acq_id: obj.acq_id || 'N/A',\n        acq_imaged_volume: Number(obj.acq_imaged_volume) || 0,\n        acq_pumped_volume: Number(obj.acq_pumped_volume) || 0,\n        sample_filtered_volume: Number(obj.sample_filtered_volume) || 0,\n        sample_concentration_factor: Number(obj.sample_concentration_factor) || 1,\n        acq_flowcell_thickness: Number(obj.acq_flowcell_thickness) || 0,\n        process_min_ESD: Number(obj.process_min_ESD) || 0,\n        process_pixel:\n          Number(obj.process_pixel || this.msg.process_pixel || this.msg.calibration_pixel_size) || 0,\n        acq_camera_resolution: obj.acq_camera_resolution || '',\n        acq_local_datetime: obj.acq_local_datetime || '',\n        object_date: obj.object_date || '',\n        object_lat: Number(obj.object_lat) || null,\n        object_lon: Number(obj.object_lon) || null\n      };\n    },\n\n    acquisitionLabel() {\n      const h = this.header;\n      const parts = [];\n      if (h.object_date) parts.push(`Date: ${h.object_date}`);\n      if (h.acq_local_datetime) parts.push(`Local: ${h.acq_local_datetime}`);\n      if (h.object_lat !== null && h.object_lon !== null) {\n        parts.push(`Lat/Lon: ${h.object_lat.toFixed(3)}, ${h.object_lon.toFixed(3)}`);\n      }\n      return parts.join(' · ') || 'Acquisition context not available in payload.';\n    },\n\n    ecotaxaLink() {\n      const acq = this.header.acq_id;\n      if (!acq || acq === 'N/A') return '#';\n      return `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${acq}.zip`;\n    },\n\n    sliderStats() {\n      if (!this.cleanObjects.length) return { min: 0, max: 100 };\n      const vals = this.cleanObjects.map(o => o.esd_um);\n      let min = Math.floor(Math.min(...vals));\n      let max = Math.ceil(Math.max(...vals));\n      if (min >= max) max = min + 10;\n      return { min, max };\n    },\n\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        return (\n          o.esd_um >= f.esd[0] &&\n          o.esd_um <= f.esd[1] &&\n          o.circ >= f.circ[0] &&\n          o.circ <= f.circ[1] &&\n          o.val >= f.val[0] &&\n          o.val <= f.val[1]\n        );\n      });\n    },\n\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n      arr.sort((a, b) => {\n        switch (this.gallerySort) {\n          case 'esd_asc':\n            return a.esd_um - b.esd_um;\n          case 'val_asc':\n            return a.val - b.val;\n          case 'circ_desc':\n            return b.circ - a.circ;\n          case 'esd_desc':\n          default:\n            return b.esd_um - a.esd_um;\n        }\n      });\n      return arr.slice(0, 200);\n    },\n\n    selectedObject() {\n      return (\n        this.filteredObjects.find(o => o.object_id === this.selectedId) ||\n        this.filteredObjects[0] ||\n        null\n      );\n    },\n\n    abundance() {\n      const v = this.header.acq_imaged_volume;\n      return v > 0 ? this.filteredObjects.length / v : 0;\n    },\n\n    totalBiovolume() {\n      const sumUm3 = this.filteredObjects.reduce((acc, o) => {\n        const r = o.esd_um / 2;\n        return acc + (4 / 3) * Math.PI * Math.pow(r, 3);\n      }, 0);\n      return sumUm3 / 1e9; // µm³ → mm³\n    },\n\n    processingSteps() {\n      if (!this.cleanObjects.length) return [];\n\n      const o = this.cleanObjects[0];\n      const keys = [\n        'process_1st_operation',\n        'process_2nd_operation',\n        'process_3rd_operation',\n        'process_4th_operation',\n        'process_5th_operation',\n        'process_6th_operation',\n        'process_7th_operation'\n      ];\n\n      const steps = [];\n\n      keys.forEach((k, idx) => {\n        const raw = o[k];\n        if (!raw) return;\n\n        const str = String(raw);\n\n        // Type\n        let label = `Step ${idx + 1}`;\n        const mType = str.match(/'type'\\s*:\\s*'([^']+)'/);\n        if (mType && mType[1]) {\n          label = mType[1];\n        }\n\n        // Compact parameters summary\n        const parts = [];\n\n        const mAlg = str.match(/'algorithm'\\s*:\\s*'([^']+)'/);\n        if (mAlg && mAlg[1]) parts.push(mAlg[1]);\n\n        const mTypeParam = str.match(/'parameters'\\s*:\\s*\\{[^}]*'type'\\s*:\\s*'([^']+)'/);\n        if (mTypeParam && mTypeParam[1]) parts.push(mTypeParam[1]);\n\n        const mKernel = str.match(/'kernel_size'\\s*:\\s*([0-9.]+)/);\n        if (mKernel && mKernel[1]) parts.push(`k=${mKernel[1]}`);\n\n        const mShape = str.match(/'kernel_shape'\\s*:\\s*'([^']+)'/);\n        if (mShape && mShape[1]) parts.push(mShape[1]);\n\n        const params = parts.join(', ');\n\n        steps.push({\n          order: idx + 1,\n          label,\n          params\n        });\n      });\n\n      return steps;\n    },\n\n    segStats() {\n      const N = this.cleanObjects.length;\n      if (!N) {\n        return {\n          meanEsd: 0,\n          medianEsd: 0,\n          sdEsd: 0,\n          numSmall: 0,\n          fracSmall: 0,\n          nHoles: 0,\n          fracHoles: 0,\n          meanCirc: 0,\n          meanVal: 0,\n          smallThreshold: 0\n        };\n      }\n\n      const esdVals = this.cleanObjects.map(o => o.esd_um).filter(v => v > 0);\n      const circVals = this.cleanObjects.map(o => o.circ).filter(v => v >= 0);\n      const valVals = this.cleanObjects.map(o => o.val).filter(v => v >= 0);\n\n      const smallThreshold = Number(this.header.process_min_ESD) || 0;\n      const numSmall =\n        smallThreshold > 0\n          ? this.cleanObjects.filter(o => o.esd_um > 0 && o.esd_um < smallThreshold).length\n          : 0;\n      const nHoles = this.cleanObjects.filter(o => o.euler < 0).length;\n\n      const esdStats = this.basicStats(esdVals);\n      const circStats = this.basicStats(circVals);\n      const valStats = this.basicStats(valVals);\n\n      return {\n        meanEsd: esdStats.mean,\n        medianEsd: esdStats.median,\n        sdEsd: esdStats.sd,\n        numSmall,\n        fracSmall: N ? numSmall / N : 0,\n        nHoles,\n        fracHoles: N ? nHoles / N : 0,\n        meanCirc: circStats.mean,\n        meanVal: valStats.mean,\n        smallThreshold\n      };\n    },\n\n    qcAlerts() {\n      const alerts = [];\n      const s = this.segStats;\n\n      if (s.smallThreshold > 0 && s.fracSmall > 0.4) {\n        alerts.push('High fraction of objects below min ESD → possible over-segmentation or noise.');\n      }\n      if (s.fracHoles > 0.3) {\n        alerts.push('Many objects with Euler < 0 (holes) → hollow objects or thresholding artefacts.');\n      }\n      if (s.meanVal < 40) {\n        alerts.push('Very low gray levels → segmentation on dark background / threshold may be too low.');\n      }\n      if (s.meanCirc < 0.2) {\n        alerts.push('Very low mean circularity → many elongated objects (filaments/fragments?).');\n      }\n\n      return alerts;\n    }\n  },\n\n  watch: {\n    msg: {\n      handler(val) {\n        if (val && Array.isArray(val.payload)) {\n          this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n          this.updateCharts();\n        }\n      },\n      deep: true\n    },\n    filteredObjects() {\n      this.updateCharts();\n    }\n  },\n\n  mounted() {\n    if (this.hasData) {\n      this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n      this.updateCharts();\n    }\n  },\n\n  beforeUnmount() {\n    Object.keys(this.charts).forEach(k => {\n      if (this.charts[k]) {\n        this.charts[k].destroy();\n        this.charts[k] = null;\n      }\n    });\n  },\n\n  methods: {\n    formatNum(v, d) {\n      return typeof v === 'number' && !isNaN(v) ? v.toFixed(d) : '-';\n    },\n\n    basicStats(arr) {\n      if (!arr || !arr.length) {\n        return { mean: 0, median: 0, sd: 0 };\n      }\n      const n = arr.length;\n      const sum = arr.reduce((a, b) => a + b, 0);\n      const mean = sum / n;\n      const sorted = [...arr].sort((a, b) => a - b);\n      const median =\n        n % 2\n          ? sorted[(n - 1) / 2]\n          : (sorted[n / 2 - 1] + sorted[n / 2]) / 2;\n      const sd = Math.sqrt(\n        arr.reduce((acc, v) => acc + Math.pow(v - mean, 2), 0) / n\n      );\n      return { mean, median, sd };\n    },\n\n    getImageUrl(o) {\n      if (!o) return '';\n      const date = o.object_date || this.header.object_date || 'date';\n      const sample = o.sample_id || this.header.sample_id || 'sample';\n      const acq = o.acq_id || this.header.acq_id || 'acq';\n      return `/ps/data/browse/api/preview/big/objects/${date}/${sample}/${acq}/${o.img_file_name}`;\n    },\n\n    downloadCSV() {\n      if (!this.filteredObjects.length) return;\n      const headers = Object.keys(this.filteredObjects[0]);\n      const csv = [\n        headers.join(','),\n        ...this.filteredObjects.map(r =>\n          headers.map(c => JSON.stringify(r[c] != null ? r[c] : '')).join(',')\n        )\n      ].join('\\n');\n      const blob = new Blob([csv], { type: 'text/csv' });\n      const url = URL.createObjectURL(blob);\n      const a = document.createElement('a');\n      a.href = url;\n      a.download = `${this.header.acq_id || 'segmentation'}_export.csv`;\n      a.click();\n      URL.revokeObjectURL(url);\n    },\n\n    resetFilters() {\n      this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n      this.filters.circ = [0, 1];\n      this.filters.val = [0, 255];\n    },\n\n    updateCharts() {\n      setTimeout(() => {\n        this.$nextTick(() => {\n          this.renderAllCharts();\n        });\n      }, 200);\n    },\n\n    renderAllCharts() {\n      this.drawChart('chartSize', 'bar', this.getSizeHistData(), {\n        x: { title: { display: true, text: 'ESD (µm)' } },\n        y: { beginAtZero: true, title: { display: true, text: 'Count' } }\n      });\n\n      this.drawChart('chartGray', 'bar', this.getGrayHistData(), {\n        x: { title: { display: true, text: 'MeanValue (0–255)' } },\n        y: { beginAtZero: true, title: { display: true, text: 'Count' } }\n      });\n\n      this.drawChart('chartMorpho', 'scatter', this.getScatterData('esd_um', 'circ'), {\n        x: { title: { display: true, text: 'ESD (µm)' } },\n        y: { min: 0, max: 1.1, title: { display: true, text: 'Circularity' } }\n      });\n\n      this.drawChart('chartStructure', 'scatter', this.getScatterData('elongation', 'solidity'), {\n        x: { title: { display: true, text: 'Elongation' }, min: 1 },\n        y: { min: 0, max: 1.1, title: { display: true, text: 'Solidity' } }\n      });\n    },\n\n    drawChart(refName, type, data, scales) {\n      const canvas = this.$refs[refName];\n      if (!canvas || !data || !data.datasets || !data.datasets.length) {\n        if (this.charts[refName]) {\n          this.charts[refName].destroy();\n          this.charts[refName] = null;\n        }\n        return;\n      }\n\n      if (this.charts[refName]) {\n        this.charts[refName].destroy();\n        this.charts[refName] = null;\n      }\n\n      this.charts[refName] = new Chart(canvas, {\n        type,\n        data,\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          animation: false,\n          plugins: { legend: { display: false } },\n          scales\n        }\n      });\n    },\n\n    getSizeHistData() {\n      const vals = this.filteredObjects.map(o => o.esd_um).filter(v => v > 0);\n      if (!vals.length) return { labels: [], datasets: [] };\n\n      const bins = 15;\n      const min = Math.min(...vals);\n      const max = Math.max(...vals);\n      const step = (max - min) / bins || 1;\n      const hist = new Array(bins).fill(0);\n      const labels = [];\n\n      for (let i = 0; i < bins; i++) {\n        const edge = min + i * step;\n        labels.push(edge.toFixed(0));\n      }\n      vals.forEach(v => {\n        let idx = Math.floor((v - min) / step);\n        if (idx >= bins) idx = bins - 1;\n        if (idx < 0) idx = 0;\n        hist[idx]++;\n      });\n\n      return {\n        labels,\n        datasets: [\n          {\n            data: hist,\n            backgroundColor: '#2196F3'\n          }\n        ]\n      };\n    },\n\n    getGrayHistData() {\n      const vals = this.filteredObjects.map(o => o.val).filter(v => v >= 0);\n      if (!vals.length) return { labels: [], datasets: [] };\n\n      const bins = 16;\n      const min = 0;\n      const max = 255;\n      const step = (max - min) / bins;\n      const hist = new Array(bins).fill(0);\n      const labels = [];\n\n      for (let i = 0; i < bins; i++) {\n        const start = min + i * step;\n        labels.push(start.toFixed(0));\n      }\n      vals.forEach(v => {\n        let idx = Math.floor((v - min) / step);\n        if (idx >= bins) idx = bins - 1;\n        if (idx < 0) idx = 0;\n        hist[idx]++;\n      });\n\n      return {\n        labels,\n        datasets: [\n          {\n            data: hist,\n            backgroundColor: '#9C27B0'\n          }\n        ]\n      };\n    },\n\n    getScatterData(xKey, yKey) {\n      const data = this.filteredObjects.map(o => ({\n        x: Number(o[xKey]) || 0,\n        y: Number(o[yKey]) || 0\n      }));\n      if (!data.length) return { datasets: [] };\n\n      return {\n        datasets: [\n          {\n            data,\n            backgroundColor: 'rgba(33,150,243,0.5)',\n            pointRadius: 2\n          }\n        ]\n      };\n    }\n  }\n};\n</script>\n\n<style scoped>\n.v-card {\n  border: 1px solid #ddd !important;\n}\n\n.sticky-top {\n  position: sticky;\n  top: 12px;\n  z-index: 5;\n}\n\n/* Gallery */\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));\n  gap: 4px;\n}\n\n.gallery-item {\n  cursor: pointer;\n  border: 2px solid transparent;\n  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;\n}\n\n.gallery-item:hover {\n  transform: scale(1.08);\n  z-index: 2;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n}\n\n.gallery-item.selected {\n  border-color: #2196F3;\n}\n</style>\n",
+        "format": "<template>\n    <div class=\"pa-4\" style=\"height: 100vh; display: flex; flex-direction: column;\">\n        \n        <v-row style=\"height: 100%;\">\n            \n            <v-col cols=\"12\" md=\"3\" class=\"d-flex flex-column\" style=\"height: 100%;\">\n                <v-card outlined class=\"grey lighten-5 flex-grow-1 d-flex flex-column\">\n                    <v-card-title class=\"deep-purple white--text py-3 subtitle-1 font-weight-bold\">\n                        <v-icon left color=\"white\">mdi-scatter-plot-outline</v-icon>\n                        t-SNE Parameters\n                    </v-card-title>\n                    \n                    <div class=\"pa-4 flex-grow-1\" style=\"overflow-y: auto;\">\n                        \n                        <v-alert dense type=\"success\" outlined class=\"mb-6 caption\">\n                            <strong>{{ totalCount }}</strong> Objects<br>\n                            Library: <strong>Embedded (Offline)</strong>\n                        </v-alert>\n\n                        <div class=\"mb-6\">\n                            <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Perplexity ({{ params.perplexity }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.perplexity\"\n                                min=\"5\" max=\"50\" step=\"1\"\n                                dense hide-details\n                                color=\"deep-purple\"\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-1\">\n                                Guess of neighbors per point.\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                             <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Epsilon ({{ params.epsilon }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.epsilon\"\n                                min=\"1\" max=\"20\" step=\"1\"\n                                dense hide-details\n                                color=\"deep-purple\"\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-1\">\n                                Learning rate (speed).\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                            <div class=\"caption font-weight-bold grey--text text--darken-2 mb-1\">\n                                Image Zoom ({{ imageSize }})\n                            </div>\n                            <v-slider\n                                v-model=\"imageSize\"\n                                min=\"0.02\" max=\"0.8\" step=\"0.01\"\n                                dense hide-details\n                                color=\"secondary\"\n                                track-color=\"grey lighten-2\"\n                            ></v-slider>\n                        </div>\n\n                    </div>\n\n                    <div class=\"pa-4 white elevation-2\">\n                        <v-btn \n                            color=\"deep-purple\" \n                            dark\n                            block \n                            large\n                            depressed\n                            :loading=\"isCalculating\"\n                            :disabled=\"totalCount === 0\"\n                            @click=\"runTSNE\"\n                        >\n                            <v-icon left>mdi-play</v-icon>\n                            Run t-SNE Calculation\n                        </v-btn>\n                    </div>\n                </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"9\" style=\"height: 100%;\">\n                <v-card outlined style=\"height: 100%; position: relative;\">\n                    \n                    <v-overlay \n                        absolute \n                        :value=\"isCalculating\"\n                        opacity=\"0.8\"\n                        color=\"white\"\n                        style=\"z-index: 10;\"\n                        class=\"d-flex justify-center align-center\"\n                    >\n                        <div class=\"text-center\">\n                            <v-progress-circular indeterminate color=\"deep-purple\" size=\"64\" width=\"6\"></v-progress-circular>\n                            <div class=\"mt-4 deep-purple--text text-h5 font-weight-light\">Calculating t-SNE...</div>\n                            <div class=\"caption grey--text mt-1\">\n                                Iteration {{ currentIteration }} / {{ totalIterations }}\n                            </div>\n                        </div>\n                    </v-overlay>\n\n                    <div v-if=\"!tsneResult && !isCalculating\" class=\"d-flex justify-center align-center\" style=\"height: 100%;\">\n                        <div class=\"text-center grey--text\">\n                            <v-icon size=\"64\" color=\"grey lighten-2\">mdi-chart-scatter-plot</v-icon>\n                            <div class=\"text-h6 mt-2\">Ready to Cluster</div>\n                            <p v-if=\"totalCount > 0\">Click \"Run t-SNE Calculation\" to generate the map.</p>\n                            <p v-else class=\"orange--text\">Waiting for data...</p>\n                        </div>\n                    </div>\n\n                    <div id=\"tsnePlot\" style=\"width:100%; height:100%;\"></div>\n\n                </v-card>\n            </v-col>\n\n        </v-row>\n    </div>\n</template>\n\n<script>\nexport default {\n    props: ['msg'],\n    data() {\n        return {\n            rawData: [],\n            availableKeys: [],\n            isCalculating: false,\n            \n            params: {\n                perplexity: 30,\n                epsilon: 10,\n            },\n            totalIterations: 500,\n            currentIteration: 0,\n            imageSize: 0.3, \n            tsneResult: null,\n            embeddedTSNE: null // We store the library instance here\n        }\n    },\n    computed: {\n        totalCount() { return this.rawData ? this.rawData.length : 0; }\n    },\n    watch: {\n        msg: {\n            handler(val) {\n                if (val && val.payload && val.payload.data) {\n                    this.rawData = val.payload.data;\n                    this.availableKeys = val.payload.keys || [];\n                    this.tsneResult = null;\n                }\n            },\n            deep: true,\n            immediate: true\n        },\n        imageSize() {\n            if (this.tsneResult) this.drawPlot();\n        }\n    },\n    mounted() {\n        // 1. Initialize our internal t-SNE engine immediately\n        this.initEmbeddedLibrary();\n\n        // 2. Load Plotly (Standard Visual Library)\n        if (!window.Plotly) {\n            const s1 = document.createElement('script');\n            s1.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n            document.head.appendChild(s1);\n        }\n    },\n    methods: {\n        async runTSNE() {\n            if (this.totalCount === 0) return;\n\n            this.isCalculating = true;\n            this.currentIteration = 0;\n\n            // Yield to UI\n            await new Promise(resolve => setTimeout(resolve, 100));\n\n            try {\n                // Prepare Data\n                const matrix = this.normalizeData(this.rawData, this.availableKeys);\n\n                // Initialize Engine\n                const opt = {\n                    epsilon: this.params.epsilon, \n                    perplexity: this.params.perplexity,\n                    dim: 2\n                };\n                \n                // Use our embedded engine\n                const tsne = new this.embeddedTSNE.tSNE(opt);\n                tsne.initDataRaw(matrix);\n\n                const stepSize = 50; \n                \n                // Calculation Loop\n                for(let i = 0; i < this.totalIterations; i += stepSize) {\n                    for(let j = 0; j < stepSize; j++) {\n                        tsne.step();\n                    }\n                    this.currentIteration = i + stepSize;\n                    await new Promise(r => setTimeout(r, 10)); \n                }\n\n                // Get Results\n                const embedding = tsne.getSolution();\n\n                this.tsneResult = this.rawData.map((item, i) => ({\n                    ...item,\n                    tsneX: embedding[i][0],\n                    tsneY: embedding[i][1]\n                }));\n\n                this.drawPlot();\n\n            } catch (e) {\n                console.error(\"t-SNE Error\", e);\n            } finally {\n                this.isCalculating = false;\n            }\n        },\n\n        normalizeData(data, features) {\n            if(!features || features.length === 0) return [];\n            const stats = {};\n            features.forEach(f => {\n                const vals = data.map(row => row[f] || 0);\n                stats[f] = { min: Math.min(...vals), max: Math.max(...vals) };\n                if (stats[f].max === stats[f].min) stats[f].max += 1; \n            });\n            return data.map(row => {\n                return features.map(f => {\n                    const val = row[f] || 0;\n                    return (val - stats[f].min) / (stats[f].max - stats[f].min);\n                });\n            });\n        },\n\n        drawPlot() {\n        const divId = 'tsnePlot';\n        if (!window.Plotly || !this.tsneResult) return;\n        \n        const trace = {\n        x: this.tsneResult.map(d => d.tsneX),\n        y: this.tsneResult.map(d => d.tsneY),\n        mode: 'markers',\n        type: 'scatter',\n        text: this.tsneResult.map(d => `ID: ${d.id}`),\n        marker: { size: 2, color: 'rgba(0,0,0,0)' }, // Invisible markers, just for hover\n        hoverinfo: 'text'\n        };\n        \n        const images = this.tsneResult.map(d => ({\n        source: d.url,\n        xref: 'x',\n        yref: 'y',\n        x: d.tsneX,\n        y: d.tsneY,\n        sizex: this.imageSize,\n        sizey: this.imageSize,\n        // --- THE FIX ---\n        sizing: \"contain\", // Prevents stretching; keeps original aspect ratio\n        // ----------------\n        xanchor: 'center',\n        yanchor: 'middle',\n        layer: 'above'\n        }));\n        \n        const layout = {\n        title: { text: 't-SNE Morphological Map' },\n        xaxis: { showgrid: false, zeroline: false, showticklabels: false },\n        yaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        scaleanchor: 'x', // Keeps the plot aspect ratio 1:1\n        scaleratio: 1\n        },\n        plot_bgcolor: 'black',\n        margin: { t: 30, b: 10, l: 10, r: 10 },\n        hovermode: 'closest',\n        dragmode: 'pan',\n        images: images,\n        };\n        \n        const config = { responsive: true, scrollZoom: true, displayModeBar: true };\n        Plotly.newPlot(divId, [trace], layout, config);\n        },\n\n        // --- EMBEDDED LIBRARY (Minified Implementation of Karpathy's t-SNE) ---\n        initEmbeddedLibrary() {\n            const tsnejs = {};\n            \n            // Utility functions\n            const return_v = false;\n            const v_val = 0.0;\n            const gaussRandom = function() {\n                if(return_v) { return_v = false; return v_val; }\n                var u = 2*Math.random()-1; var v = 2*Math.random()-1; var r = u*u + v*v;\n                if(r == 0 || r > 1) return gaussRandom();\n                var c = Math.sqrt(-2*Math.log(r)/r);\n                return u*c; // stripped v logic for brevity in strict mode\n            };\n            const randn = function(mu, std) { return mu+gaussRandom()*std; };\n            const distL2 = function(a, b) { var d=0; for(var i=0;i<a.length;i++) { d+=(a[i]-b[i])*(a[i]-b[i]); } return d; };\n\n            // The Logic\n            tsnejs.tSNE = function(opt) {\n                opt = opt || {};\n                this.perplexity = opt.perplexity || 30;\n                this.dim = opt.dim || 2;\n                this.epsilon = opt.epsilon || 10;\n                this.iter = 0;\n            };\n\n            tsnejs.tSNE.prototype = {\n                initDataRaw: function(X) {\n                    var N = X.length; var D = X[0].length;\n                    this.P = new Float64Array(N*N);\n                    this.Y = new Float64Array(N*this.dim);\n                    this.gains = new Float64Array(N*this.dim);\n                    this.ystep = new Float64Array(N*this.dim);\n                    for(var i=0;i<N*this.dim;i++) { this.Y[i] = randn(0.0, 1e-4); this.gains[i]=1.0; this.ystep[i]=0.0;}\n                    \n                    // Compute P-values (Gaussian Kernel)\n                    var Htarget = Math.log(this.perplexity);\n                    for(var i=0;i<N;i++) {\n                        var betas = 1.0; var min_beta = -Infinity; var max_beta = Infinity; var tol = 1e-4;\n                        for(var iter=0;iter<50;iter++) {\n                            var p_sum = 0.0;\n                            for(var j=0;j<N;j++) {\n                                var d = 0.0;\n                                if(i!=j) d = distL2(X[i], X[j]);\n                                var p = 0.0;\n                                if(i!=j) p = Math.exp(-d * betas);\n                                this.P[i*N+j] = p;\n                                if(i!=j) p_sum += p;\n                            }\n                            var H = 0.0;\n                            for(var j=0;j<N;j++) {\n                                var pj = 0.0;\n                                if(i!=j) pj = this.P[i*N+j] / p_sum;\n                                if(pj > 1e-7) H -= pj * Math.log(pj);\n                            }\n                            if(Math.abs(H - Htarget) < tol) break;\n                            if(H > Htarget) { min_beta = betas; if(max_beta == Infinity) betas *= 2; else betas = (betas + max_beta) / 2; }\n                            else { max_beta = betas; if(min_beta == -Infinity) betas /= 2; else betas = (betas + min_beta) / 2; }\n                        }\n                        var p_sum_final = 0.0;\n                        for(var j=0;j<N;j++) {\n                            if(i!=j) p_sum_final += this.P[i*N+j];\n                        }\n                        for(var j=0;j<N;j++) {\n                            if(i!=j) this.P[i*N+j] /= p_sum_final;\n                        }\n                    }\n                    // Symmetrize P\n                    var N2 = N*2;\n                    for(var i=0;i<N;i++) {\n                        for(var j=i+1;j<N;j++) {\n                            var p = (this.P[i*N+j] + this.P[j*N+i]) / N2;\n                            this.P[i*N+j] = p; this.P[j*N+i] = p;\n                        }\n                    }\n                },\n                getSolution: function() {\n                    var N = this.P.length > 0 ? Math.sqrt(this.P.length) : 0;\n                    var res = [];\n                    for(var i=0; i<N; i++) {\n                        res.push([this.Y[i*this.dim], this.Y[i*this.dim+1]]);\n                    }\n                    return res;\n                },\n                step: function() {\n                    var N = Math.sqrt(this.P.length); var dim = this.dim;\n                    var cost = 0.0;\n                    var Q = new Float64Array(N*N);\n                    var qu_sum = 0.0;\n                    \n                    for(var i=0;i<N;i++) {\n                        for(var j=i+1;j<N;j++) {\n                            var dsum = 0.0;\n                            for(var d=0;d<dim;d++) {\n                                var dhere = this.Y[i*dim+d] - this.Y[j*dim+d];\n                                dsum += dhere * dhere;\n                            }\n                            var qu = 1.0 / (1.0 + dsum);\n                            Q[i*N+j] = qu; Q[j*N+i] = qu;\n                            qu_sum += 2 * qu;\n                        }\n                    }\n                    \n                    // Gradient\n                    var grad = new Float64Array(N*dim);\n                    for(var i=0;i<N;i++) {\n                        for(var j=0;j<N;j++) {\n                            if(i!=j) {\n                                var qu = Q[i*N+j];\n                                var q = qu / qu_sum;\n                                var p = this.P[i*N+j];\n                                // Prevent NaNs (Exaggeration is standard in early iter but simplified here)\n                                var premult = 4.0 * (p - q) * qu;\n                                for(var d=0;d<dim;d++) {\n                                    grad[i*dim+d] += premult * (this.Y[i*dim+d] - this.Y[j*dim+d]);\n                                }\n                            }\n                        }\n                    }\n\n                    // Update\n                    for(var i=0;i<N*dim;i++) {\n                        var g = grad[i];\n                        if((g > 0.0) != (this.ystep[i] > 0.0)) this.gains[i] += 0.2;\n                        else this.gains[i] *= 0.8;\n                        if(this.gains[i] < 0.01) this.gains[i] = 0.01;\n                        \n                        var momentum = (this.iter < 250) ? 0.5 : 0.8;\n                        this.ystep[i] = momentum * this.ystep[i] - this.epsilon * this.gains[i] * g;\n                        this.Y[i] += this.ystep[i];\n                        \n                        // Center Y\n                        // (Skipping rigorous centering for performance, rely on final map)\n                    }\n                    this.iter++;\n                }\n            };\n            \n            this.embeddedTSNE = tsnejs;\n        }\n    }\n}\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1300,
-        "y": 360,
+        "x": 1290,
+        "y": 440,
         "wires": [
             []
         ]
     },
     {
-        "id": "ddac1dedf1ed0bb3",
-        "type": "ui-template",
+        "id": "d9c0cf13cfa21a19",
+        "type": "delay",
         "z": "14f8c9b5ce1235cc",
-        "group": "0cb96323818204ca",
-        "page": "",
-        "ui": "",
-        "name": "Gemini 3 Pro v2",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container fluid class=\"pa-4 grey lighten-5\" style=\"min-height: 100vh; color:#333;\">\n\n    <v-row v-if=\"!hasData\" align=\"center\" justify=\"center\" style=\"height:80vh;\">\n      <div class=\"text-center\">\n        <v-progress-circular indeterminate color=\"primary\" size=\"64\"></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text text--darken-2\">Analyse en cours...</div>\n      </div>\n    </v-row>\n\n    <div v-else>\n      \n      <div class=\"mb-4\">\n        <div class=\"text-overline grey--text ml-1\">1. SUMMARY METRICS</div>\n        <v-card outlined>\n          <v-row no-gutters>\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 border-right\">\n              <div class=\"caption grey--text text-uppercase\">Sample Identity</div>\n              <div class=\"font-weight-bold text-h6 primary--text\">{{ safeHeader.sample_id }}</div>\n              <div class=\"caption grey--text mt-1\">Project: {{ safeHeader.sample_project }}</div>\n              <div class=\"caption grey--text\">Acq ID: {{ safeHeader.acq_id }}</div>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 border-right grey lighten-5\">\n              <div class=\"caption grey--text text-uppercase\">Abundance</div>\n              <div class=\"d-flex align-baseline\">\n                <span class=\"text-h4 font-weight-black deep-purple--text mr-1\">{{ formatNum(abundance, 0) }}</span>\n                <span class=\"caption font-weight-bold deep-purple--text text--lighten-2\">ind./mL</span>\n              </div>\n              <div class=\"caption grey--text mt-2\">\n                Total Objects: {{ filteredObjects.length }} / {{ cleanObjects.length }}\n              </div>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 border-right\">\n              <div class=\"caption grey--text text-uppercase\">Est. Biovolume</div>\n              <div class=\"d-flex align-baseline\">\n                <span class=\"text-h5 font-weight-bold blue-grey--text mr-1\">{{ formatBigNum(totalBiovolume) }}</span>\n                <span class=\"caption blue-grey--text\">µm³/mL</span>\n              </div>\n               <div class=\"caption grey--text mt-2\">\n                <v-icon x-small>mdi-water-percent</v-icon> Vol. Imaged: {{ formatNum(safeHeader.volume_used, 2) }} mL\n              </div>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"3\" class=\"pa-4 d-flex flex-column justify-space-between\">\n              <div>\n                <div class=\"caption grey--text text-uppercase\">Resolution</div>\n                <div class=\"font-weight-medium\">{{ formatNum(safeHeader.process_pixel, 3) }} µm/px</div>\n              </div>\n              <div class=\"d-flex mt-3\">\n                <v-btn x-small outlined color=\"primary\" class=\"mr-2\" @click=\"downloadCSV\">\n                  <v-icon left x-small>mdi-download</v-icon> CSV\n                </v-btn>\n                <v-btn x-small text color=\"grey\" :href=\"ecotaxaLink\" target=\"_blank\" v-if=\"safeHeader.acq_id !== 'N/A'\">\n                   EcoTaxa\n                </v-btn>\n              </div>\n            </v-col>\n          </v-row>\n        </v-card>\n      </div>\n\n      <div class=\"mb-4\">\n        <div class=\"text-overline grey--text ml-1\">2. QUALITY CONTROL (QC)</div>\n        <v-row dense>\n          <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"fill-height\">\n              <v-card-title class=\"caption font-weight-bold py-2 grey lighten-4 border-bottom\">\n                Flowcell Distribution\n                <v-spacer></v-spacer>\n                <v-chip x-small color=\"red lighten-4\" text-color=\"red darken-2\" v-if=\"stickyCount > 0\">\n                  {{ stickyCount }} Sticky Objs\n                </v-chip>\n              </v-card-title>\n              <v-card-text class=\"pa-2 relative\">\n                <div style=\"height: 200px; width: 100%;\">\n                   <canvas ref=\"chartFlowcell\"></canvas>\n                </div>\n                <div v-if=\"!hasCoords\" class=\"overlay-message caption\">\n                  No X/Y coordinates found.\n                </div>\n              </v-card-text>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"fill-height\">\n              <v-card-title class=\"caption font-weight-bold py-2 grey lighten-4 border-bottom\">\n                Segmentation Report\n              </v-card-title>\n              <v-card-text class=\"pa-4\">\n                 <div class=\"d-flex justify-space-between caption mb-1\">\n                   <span>Valid Objects</span>\n                   <span class=\"green--text font-weight-bold\">{{ counts.other + counts.dense }}</span>\n                 </div>\n                 <v-progress-linear :value=\"(counts.other + counts.dense)/cleanObjects.length*100\" color=\"green\" height=\"8\" rounded class=\"mb-3\"></v-progress-linear>\n\n                 <div class=\"d-flex justify-space-between caption mb-1\">\n                   <span>Multiple/Filaments</span>\n                   <span class=\"orange--text font-weight-bold\">{{ counts.filament }}</span>\n                 </div>\n                 <v-progress-linear :value=\"counts.filament/cleanObjects.length*100\" color=\"orange\" height=\"6\" rounded class=\"mb-3\"></v-progress-linear>\n                 \n                 <div class=\"d-flex justify-space-between caption mb-1\">\n                   <span>Detritus/Noise</span>\n                   <span class=\"brown--text font-weight-bold\">{{ counts.detritus }}</span>\n                 </div>\n                 <v-progress-linear :value=\"counts.detritus/cleanObjects.length*100\" color=\"brown\" height=\"6\" rounded></v-progress-linear>\n              </v-card-text>\n            </v-card>\n          </v-col>\n          \n           <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"fill-height\">\n              <v-card-title class=\"caption font-weight-bold py-2 grey lighten-4 border-bottom\">\n                Acquisition Stats\n              </v-card-title>\n              <div class=\"pa-4 d-flex align-center justify-center fill-height\">\n                 <div class=\"text-center\">\n                    <div class=\"text-h5 font-weight-light\">{{ Math.round(safeHeader.process_pixel * 2048) }} x {{ Math.round(safeHeader.process_pixel * 1536) }}</div>\n                    <div class=\"caption grey--text\">Field of View (µm estimate)</div>\n                    <v-divider class=\"my-3\"></v-divider>\n                    <div class=\"caption\">\n                      Processing Date: <br>\n                      <b>{{ cleanObjects[0] ? cleanObjects[0].object_date : 'N/A' }}</b>\n                    </div>\n                 </div>\n              </div>\n            </v-card>\n          </v-col>\n        </v-row>\n      </div>\n\n\n      <div>\n        <div class=\"text-overline grey--text ml-1\">3. GALLERY & DETAILS</div>\n        <v-row>\n          <v-col cols=\"12\" md=\"8\" lg=\"9\">\n            <v-card outlined>\n              <v-toolbar flat dense color=\"grey lighten-4\">\n                <v-toolbar-title class=\"subtitle-2\">Object Gallery ({{ filteredObjects.length }})</v-toolbar-title>\n                <v-spacer></v-spacer>\n                <v-select\n                  v-model=\"gallerySort\" :items=\"sortOptions\" item-text=\"text\" item-value=\"value\"\n                  dense outlined hide-details style=\"max-width: 180px;\" class=\"caption bg-white\"\n                ></v-select>\n              </v-toolbar>\n              \n              <v-card-text class=\"pa-2\" style=\"min-height: 300px;\">\n                <div v-if=\"!filteredObjects.length\" class=\"text-center py-10 grey--text\">\n                  No objects found.\n                </div>\n                \n                <div class=\"gallery-grid\">\n                  <div v-for=\"obj in paginatedObjects\" :key=\"obj.object_id\" \n                       class=\"gallery-item rounded elevation-1\"\n                       :class=\"{'selected': selectedId === obj.object_id, 'g-filament': obj.group === 'Filament'}\" \n                       @click=\"selectObject(obj)\">\n                    <v-img :src=\"getImageUrl(obj)\" aspect-ratio=\"1\" contain class=\"white\">\n                       <template v-slot:placeholder><v-row class=\"fill-height ma-0\" align=\"center\" justify=\"center\"><v-progress-circular indeterminate size=\"20\" width=\"2\"></v-progress-circular></v-row></template>\n                    </v-img>\n                    <div class=\"gallery-label\">{{ Math.round(obj.esd_um) }}µm</div>\n                  </div>\n                </div>\n                <div v-if=\"filteredObjects.length > 100\" class=\"text-center mt-2 caption grey--text\">Showing top 100 objects</div>\n              </v-card-text>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\" lg=\"3\">\n             <v-card outlined class=\"sticky-top\">\n                <v-card-title class=\"subtitle-2 grey lighten-3 py-2\">Details</v-card-title>\n                <div v-if=\"selectedObject\">\n                   <div class=\"pa-3 text-center white border-bottom\">\n                      <div class=\"image-container d-inline-block relative elevation-2 rounded pa-1 mb-2\">\n                        <img :src=\"getImageUrl(selectedObject)\" style=\"max-width: 100%; max-height: 200px; display:block;\">\n                        <div class=\"scale-bar-container\">\n                           <div class=\"scale-line\" :style=\"{ width: scaleBarWidth + 'px' }\"></div>\n                           <div class=\"scale-text\">{{ scaleBarValue }} µm</div>\n                        </div>\n                      </div>\n                      <div>\n                        <v-chip x-small color=\"primary\" dark>{{ selectedObject.group }}</v-chip>\n                        <div class=\"caption mt-1 text-truncate\">{{ selectedObject.object_id }}</div>\n                      </div>\n                   </div>\n                   <v-list dense class=\"pa-0\">\n                      <v-list-item>\n                        <v-list-item-content><v-list-item-title class=\"caption\">ESD</v-list-item-title></v-list-item-content>\n                        <v-list-item-action class=\"caption font-weight-bold\">{{ formatNum(selectedObject.esd_um, 1) }} µm</v-list-item-action>\n                      </v-list-item>\n                      <v-divider></v-divider>\n                      <v-list-item>\n                        <v-list-item-content><v-list-item-title class=\"caption\">Circularity</v-list-item-title></v-list-item-content>\n                        <v-list-item-action class=\"caption font-weight-bold\">{{ formatNum(selectedObject.circ, 3) }}</v-list-item-action>\n                      </v-list-item>\n                      <v-divider></v-divider>\n                      <v-list-item>\n                         <v-list-item-content><v-list-item-title class=\"caption\">Biovolume</v-list-item-title></v-list-item-content>\n                         <v-list-item-action class=\"caption font-weight-bold\">{{ formatBigNum((Math.PI * Math.pow(selectedObject.esd_um,3))/6) }} µm³</v-list-item-action>\n                      </v-list-item>\n                   </v-list>\n                </div>\n                <div v-else class=\"pa-4 text-center caption grey--text\">Select an object.</div>\n             </v-card>\n          </v-col>\n        </v-row>\n      </div>\n\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      filters: { esd: [0, 2000], circ: [0, 1], cluster: 'All' },\n      clusterOptions: ['All', 'Filament', 'Bubble', 'Detritus', 'Dense', 'Other'],\n      sortOptions: [{ text: 'Size (Desc)', value: 'esd_desc' }, { text: 'Size (Asc)', value: 'esd_asc' }],\n      gallerySort: 'esd_desc',\n      selectedId: null,\n      charts: { cluster: null, flow: null, hist: null },\n      scaleBarValue: 100,\n      stickyCount: 0\n    }\n  },\n\n  computed: {\n    hasData() { return this.msg && Array.isArray(this.msg.payload) && this.msg.payload.length > 1; },\n    \n    cleanObjects() {\n      if (!this.hasData) return [];\n      return this.msg.payload\n        .filter(o => o.object_id !== '[t]' && o.acq_id !== '[t]' && !String(o.object_equivalent_diameter).includes('[f]'))\n        .map(o => {\n          const px = Number(o.process_pixel || this.msg.process_pixel) || 1;\n          const esd = (Number(o.object_equivalent_diameter) || 0) * px;\n          \n          let grp = 'Other';\n          const el = Number(o.object_elongation) || 1;\n          const circ = Number(o['object_circ.']) || 0;\n          const sol = Number(o.object_solidity) || 0;\n          const val = Number(o.object_MeanValue) || 0;\n\n          if (el > 3.5) grp = 'Filament';\n          else if (circ > 0.85 && sol > 0.95) grp = 'Bubble';\n          else if (sol < 0.75) grp = 'Detritus';\n          else if (val < 100 && sol > 0.85) grp = 'Dense';\n\n          return {\n            ...o,\n            esd_um: esd,\n            major: (Number(o.object_major) || 0) * px,\n            minor: (Number(o.object_minor) || 0) * px,\n            x: Number(o.object_x) || 0,\n            y: Number(o.object_y) || 0,\n            circ, val, solidity: sol, elongation: el,\n            group: grp\n          };\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        return o.esd_um >= f.esd[0] && o.esd_um <= f.esd[1] &&\n               o.circ >= f.circ[0] && o.circ <= f.circ[1] &&\n               (f.cluster === 'All' || o.group === f.cluster);\n      });\n    },\n\n    hasCoords() {\n       return this.cleanObjects.some(o => o.x > 0 || o.y > 0);\n    },\n\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n      arr.sort((a, b) => this.gallerySort === 'esd_desc' ? b.esd_um - a.esd_um : a.esd_um - b.esd_um);\n      return arr.slice(0, 100);\n    },\n\n    selectedObject() { return this.cleanObjects.find(o => o.object_id === this.selectedId) || null; },\n    \n    safeHeader() {\n      if (!this.cleanObjects.length) return { sample_id:'?', volume_used:1, process_pixel:1 };\n      const obj = this.cleanObjects[0];\n      return {\n        sample_project: obj.sample_project || 'Unknown',\n        sample_id: obj.sample_id || 'Unknown',\n        acq_id: obj.acq_id || 'N/A',\n        volume_used: Number(obj.acq_imaged_volume) || 1,\n        process_pixel: Number(obj.process_pixel || 1)\n      };\n    },\n\n    abundance() { return this.filteredObjects.length / this.safeHeader.volume_used; },\n    \n    totalBiovolume() {\n      const totalVolUm3 = this.filteredObjects.reduce((acc, o) => {\n        return acc + (Math.PI * Math.pow(o.esd_um, 3)) / 6;\n      }, 0);\n      return totalVolUm3 / this.safeHeader.volume_used;\n    },\n\n    counts() {\n      const c = { filament:0, bubble:0, detritus:0, dense:0, other:0 };\n      this.cleanObjects.forEach(o => {\n        const key = o.group.toLowerCase();\n        if(c[key]!==undefined) c[key]++; else c.other++;\n      });\n      return c;\n    },\n\n    sliderStats() {\n      if (!this.cleanObjects.length) return { min:0, max:100 };\n      const vals = this.cleanObjects.map(o => o.esd_um);\n      return { min: Math.floor(Math.min(...vals)), max: Math.ceil(Math.max(...vals)) };\n    },\n\n    scaleBarWidth() {\n      if(!this.safeHeader.process_pixel || !this.selectedObject) return 0;\n      if(this.selectedObject.esd_um < 50) this.scaleBarValue = 10;\n      else if(this.selectedObject.esd_um < 200) this.scaleBarValue = 50;\n      else this.scaleBarValue = 100;\n      return this.scaleBarValue / this.safeHeader.process_pixel;\n    },\n\n    ecotaxaLink() { return this.safeHeader.acq_id !== 'N/A' ? `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.safeHeader.acq_id}.zip` : '#'; }\n  },\n\n  watch: {\n    filteredObjects() { this.updateCharts(); },\n    msg: { deep: true, handler() { this.init(); } }\n  },\n\n  mounted() { this.init(); },\n\n  methods: {\n    init() {\n      if(this.hasData) {\n        this.filters.esd = [this.sliderStats.min, this.sliderStats.max];\n        this.updateCharts();\n      }\n    },\n    \n    formatNum(v, d) { return (Number(v)||0).toFixed(d); },\n    formatBigNum(v) {\n       if(v > 1000000) return (v/1000000).toFixed(2) + 'M';\n       if(v > 1000) return (v/1000).toFixed(0) + 'k';\n       return Math.round(v);\n    },\n    \n    getImageUrl(o) { return o ? `/ps/data/browse/api/preview/big/objects/${o.object_date}/${o.sample_id}/${o.acq_id}/${o.img_file_name}` : ''; },\n    \n    selectObject(obj) { this.selectedId = obj.object_id; },\n    resetFilters() { this.filters.esd = [this.sliderStats.min, this.sliderStats.max]; this.filters.cluster = 'All'; },\n    \n    downloadCSV() {\n       if (!this.filteredObjects.length) return;\n       const headers = Object.keys(this.filteredObjects[0]);\n       const csv = [headers.join(','), ...this.filteredObjects.map(r => headers.map(c => JSON.stringify(r[c]||'')).join(','))].join('\\n');\n       const blob = new Blob([csv], { type: 'text/csv' });\n       const a = document.createElement('a');\n       a.href = URL.createObjectURL(blob); a.download = 'export.csv'; a.click();\n    },\n\n    updateCharts() { setTimeout(() => { this.$nextTick(this.renderCharts); }, 250); },\n\n    renderCharts() {\n      if(this.filteredObjects.length === 0) return;\n      this.renderFlowcellChart();\n      this.renderHistChart();\n      this.renderClusterChart();\n    },\n\n    // --- FIXED FLOWCELL CHART ---\n    renderFlowcellChart() {\n      const ctx = this.$refs.chartFlowcell;\n      if(!ctx) return;\n      if(this.charts.flow) this.charts.flow.destroy();\n      \n      // FIX: DEEP COPY to remove Vue Observers\n      const objects = JSON.parse(JSON.stringify(this.filteredObjects));\n\n      const xs = objects.map(o => o.x);\n      const ys = objects.map(o => o.y);\n      const maxX = Math.max(...xs, 100);\n      const maxY = Math.max(...ys, 100);\n      \n      const binStep = Math.max(maxX, maxY) / 20; \n      const bins = {};\n      \n      objects.forEach(o => {\n        const bx = Math.floor(o.x / binStep);\n        const by = Math.floor(o.y / binStep);\n        const k = `${bx}_${by}`;\n        bins[k] = (bins[k] || 0) + 1;\n      });\n\n      const normal = [];\n      const sticky = [];\n      this.stickyCount = 0;\n\n      objects.forEach(o => {\n        const bx = Math.floor(o.x / binStep);\n        const by = Math.floor(o.y / binStep);\n        if(bins[`${bx}_${by}`] > 5) {\n           sticky.push({x: o.x, y: o.y});\n           this.stickyCount++;\n        } else {\n           normal.push({x: o.x, y: o.y});\n        }\n      });\n\n      const finalNormal = sticky.length === 0 ? objects.map(o => ({x:o.x, y:o.y})) : normal;\n\n      this.charts.flow = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            { label: 'Objects', data: finalNormal, backgroundColor: '#90CAF9', pointRadius: 2 },\n            { label: 'Sticky/Clump', data: sticky, backgroundColor: '#E57373', pointRadius: 3 }\n          ]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          scales: { x: { display:false }, y: { display:false, reverse: true } },\n          plugins: { legend: { display: false } }\n        }\n      });\n    },\n\n    // --- FIXED HISTOGRAM ---\n    renderHistChart() {\n      const ctx = this.$refs.chartHist;\n      if(!ctx) return;\n      if(this.charts.hist) this.charts.hist.destroy();\n\n      // FIX: DEEP COPY\n      const objects = JSON.parse(JSON.stringify(this.filteredObjects));\n      const vals = objects.map(o => o.esd_um);\n      \n      if(vals.length === 0) return;\n\n      const maxVal = Math.max(...vals);\n      const binCount = 15;\n      const step = (maxVal / binCount) || 1; \n      \n      const bins = new Array(binCount).fill(0);\n      const labels = new Array(binCount).fill(0).map((_, i) => Math.round(i * step));\n\n      vals.forEach(v => {\n        const idx = Math.min(Math.floor(v / step), binCount - 1);\n        if(idx >= 0) bins[idx]++;\n      });\n\n      this.charts.hist = new Chart(ctx, {\n        type: 'bar',\n        data: {\n          labels: labels,\n          datasets: [{ label: 'Count', data: bins, backgroundColor: '#5C6BC0' }]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          plugins: { legend: { display: false } },\n          scales: { x: { title: { display: true, text: 'ESD (µm)' } }, y: { display:false } }\n        }\n      });\n    },\n\n    // --- FIXED CLUSTER CHART ---\n    renderClusterChart() {\n      const ctx = this.$refs.chartCluster;\n      if(!ctx) return;\n      if(this.charts.cluster) this.charts.cluster.destroy();\n      \n      // FIX: DEEP COPY\n      const objects = JSON.parse(JSON.stringify(this.filteredObjects));\n      const data = objects.slice(0, 1000).map(o => ({ x: o.circ, y: o.elongation }));\n\n      this.charts.cluster = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [{ label: 'Obj', data: data, backgroundColor: 'rgba(0, 150, 136, 0.6)', pointRadius: 2 }]\n        },\n        options: {\n          responsive: true, maintainAspectRatio: false,\n          scales: {\n            x: { title: {display: true, text:'Circular.'}, min: 0, max: 1.1 },\n            y: { title: {display: true, text:'Elong. (Log)'}, type: 'logarithmic', min:1 }\n          },\n          plugins: { legend: { display: false } }\n        }\n      });\n    }\n  }\n}\n</script>\n\n<style scoped>\n.border-right { border-right: 1px solid #e0e0e0; }\n.border-left { border-left: 1px solid #e0e0e0; }\n.border-bottom { border-bottom: 1px solid #e0e0e0; }\n.relative { position: relative; }\n\n.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }\n.gallery-item { cursor: pointer; position: relative; overflow: hidden; border: 2px solid transparent; }\n.gallery-item:hover { transform: scale(1.1); z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }\n.gallery-item.selected { border-color: #1976D2; }\n.g-filament { border-bottom: 3px solid #4CAF50; }\n\n.gallery-label { \n  position: absolute; bottom: 0; left: 0; right: 0; \n  background: rgba(255,255,255,0.7); font-size: 9px; text-align: center; \n}\n\n.sticky-top { position: sticky; top: 10px; z-index: 4; }\n\n.scale-bar-container {\n  position: absolute; bottom: 6px; right: 6px;\n  display: flex; flex-direction: column; align-items: flex-end;\n}\n.scale-line { height: 3px; background: white; border: 1px solid rgba(0,0,0,0.4); margin-bottom: 1px; }\n.scale-text { font-size: 9px; font-weight: bold; color: white; text-shadow: 0 1px 2px black; line-height: 1; }\n\n.overlay-message {\n  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n  background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 4px;\n}\n</style>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 1280,
-        "y": 460,
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 780,
+        "y": 360,
         "wires": [
-            []
+            [
+                "4b133307e9244dd1"
+            ]
         ]
     },
     {
-        "id": "mega_plankto_v3",
+        "id": "5abf944e23a57b18",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 3",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 460,
+        "y": 280,
+        "wires": []
+    },
+    {
+        "id": "4244d2ed880cca66",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
         "group": "3d290173d833fd04",
         "page": "",
         "ui": "",
-        "name": "PlanktoScope Mega V3",
-        "order": 1,
-        "width": "0",
-        "height": "0",
-        "format": "<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<template>\n  <v-container\n    fluid\n    class=\"pa-0\"\n    style=\"min-height: 80vh; background-color: #f5f5f5; color: #333;\"\n  >\n    <!-- EMPTY / WAITING STATE -->\n    <v-row\n      v-if=\"!hasData\"\n      align=\"center\"\n      justify=\"center\"\n      style=\"height: 60vh;\"\n    >\n      <div class=\"text-center\">\n        <v-progress-circular\n          indeterminate\n          color=\"primary\"\n          size=\"64\"\n        ></v-progress-circular>\n        <div class=\"mt-4 text-h6 grey--text\">Waiting for Data...</div>\n        <div class=\"caption grey--text\">\n          Payload must be an array of objects\n        </div>\n      </div>\n    </v-row>\n\n    <!-- MAIN UI -->\n    <div v-else class=\"d-flex flex-column fill-height\">\n      <!-- TOP TOOLBAR / SUMMARY -->\n      <v-toolbar\n        flat\n        dense\n        color=\"white\"\n        class=\"border-bottom elevation-1 mb-3\"\n      >\n        <v-icon color=\"primary\" class=\"mr-3\">mdi-microscope</v-icon>\n\n        <div class=\"mr-4\">\n          <div\n            class=\"subtitle-1 font-weight-bold\"\n            style=\"line-height:1.1\"\n          >\n            {{ meta.sample_id }} — {{ meta.acq_id }}\n          </div>\n          <div class=\"caption grey--text\">\n            Project: {{ meta.project }} · Operator: {{ meta.operator }}\n          </div>\n          <div class=\"caption grey--text\">\n            {{ meta.date }} · Lat/Lon: {{ meta.lat_end }}, {{ meta.lon_end }}\n          </div>\n        </div>\n\n        <v-spacer></v-spacer>\n\n        <!-- COUNTS -->\n        <div class=\"d-none d-sm-flex align-center mr-6\">\n          <div class=\"text-right mr-4\">\n            <div class=\"caption grey--text\">Objects (clean)</div>\n            <div class=\"font-weight-bold\">\n              {{ cleanObjects.length }}\n            </div>\n          </div>\n          <div class=\"text-right mr-4\">\n            <div class=\"caption grey--text\">Objects (filtered)</div>\n            <div class=\"font-weight-bold\">\n              {{ filteredObjects.length }}\n            </div>\n          </div>\n          <div class=\"text-right\">\n            <div class=\"caption grey--text\">Abundance</div>\n            <div class=\"font-weight-bold primary--text\">\n              {{ formatNum(abundance, 1) }}\n              <span class=\"caption\">ind/mL</span>\n            </div>\n          </div>\n        </div>\n\n        <v-divider vertical class=\"mx-2\"></v-divider>\n\n        <!-- EXPORTS -->\n        <v-btn\n          icon\n          color=\"green\"\n          :href=\"ecotaxaLink\"\n          target=\"_blank\"\n          :disabled=\"meta.acq_id === 'N/A'\"\n          title=\"EcoTaxa Export\"\n        >\n          <v-icon>mdi-cloud-download</v-icon>\n        </v-btn>\n        <v-btn\n          icon\n          color=\"blue-grey\"\n          @click=\"downloadCSV\"\n          title=\"Export CSV\"\n        >\n          <v-icon>mdi-file-delimited</v-icon>\n        </v-btn>\n      </v-toolbar>\n\n      <div class=\"px-4 pb-6\">\n        <!-- ROW 1: HISTOGRAM + SAMPLE INFO -->\n        <v-row>\n          <v-col cols=\"12\" md=\"8\">\n            <v-card outlined class=\"pa-3 fill-height\">\n              <div\n                class=\"d-flex justify-space-between align-center mb-2\"\n              >\n                <div class=\"subtitle-2 font-weight-bold grey--text text--darken-2\">\n                  Size Distribution (ESD)\n                </div>\n              </div>\n              <div\n                style=\"height: 350px; width: 100%; position: relative;\"\n              >\n                <canvas ref=\"chartHist\"></canvas>\n              </div>\n              <div class=\"caption text-center mt-2 grey--text\">\n                ESD in µm · Pixel size:\n                {{ formatNum(meta.pixel, 3) }} µm/px · Min ESD:\n                {{ Math.round(meta.min_esd) }} µm\n              </div>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"4\">\n            <v-card outlined class=\"pa-0 fill-height\">\n              <v-card-title\n                class=\"grey lighten-4 py-2 subtitle-2 font-weight-bold\"\n              >\n                Sample & Acquisition\n              </v-card-title>\n              <v-list dense>\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Project\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ meta.project }}\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Gear\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ meta.gear }}\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Net (Ø / L / mesh)\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold caption\">\n                    {{ meta.net_diameter }} cm ·\n                    {{ meta.net_length }} cm ·\n                    {{ meta.net_mesh }} µm\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Imaged Volume\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatNum(meta.imaged_volume, 3) }} mL\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Pumped Volume\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatNum(meta.pumped_volume, 3) }} mL\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Flowcell Thickness\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatNum(meta.flowcell_thickness, 0) }} µm\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Total Biovolume\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold\">\n                    {{ formatBigNum(totalBiovolume) }} µm³/mL\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Camera\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-weight-bold caption\">\n                    {{ meta.camera_res }} · ISO {{ meta.camera_iso }}\n                    · 1/{{ meta.shutter_speed }} s\n                  </v-list-item-action>\n                </v-list-item>\n\n                <v-divider></v-divider>\n\n                <v-list-item>\n                  <v-list-item-content class=\"grey--text\">\n                    Comment\n                  </v-list-item-content>\n                  <v-list-item-action class=\"font-italic caption\">\n                    {{ meta.comment || '—' }}\n                  </v-list-item-action>\n                </v-list-item>\n              </v-list>\n            </v-card>\n          </v-col>\n        </v-row>\n\n        <!-- ROW 2: FLOWCELL HEATMAP + SEGMENTATION QC -->\n        <v-row class=\"mt-4\">\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div class=\"d-flex justify-space-between mb-2\">\n                <span class=\"subtitle-2 font-weight-bold\">\n                  Flowcell Heatmap (X/Y)\n                </span>\n                <v-chip\n                  x-small\n                  color=\"red lighten-4\"\n                  text-color=\"red darken-3\"\n                  v-if=\"stickyCount > 0\"\n                >\n                  {{ stickyCount }} Sticky Objects\n                </v-chip>\n              </div>\n              <div\n                style=\"height: 300px; width: 100%; position: relative;\"\n              >\n                <canvas ref=\"chartFlow\"></canvas>\n              </div>\n              <div\n                v-if=\"!hasCoords\"\n                class=\"text-center caption red--text mt-2\"\n              >\n                No coordinate data available (object_x/object_y).\n              </div>\n              <div\n                v-else\n                class=\"caption grey--text text-center mt-2\"\n              >\n                Large datasets are decimated for performance.\n                Sticky objects are always retained.\n              </div>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div class=\"subtitle-2 font-weight-bold mb-3\">\n                Segmentation Quality\n              </div>\n\n              <div class=\"body-2 mb-3\">\n                <div\n                  class=\"font-weight-bold indigo--text text--darken-2 mb-1\"\n                >\n                  1. Objects with Holes (Euler &lt; 0)\n                </div>\n                <p\n                  class=\"caption grey--text text--darken-2 mb-2\"\n                >\n                  Negative Euler usually indicates internal holes\n                  (ring shapes, over-thresholded or hollow objects).\n                </p>\n                <v-progress-linear\n                  :value=\"qc.holesPct\"\n                  height=\"6\"\n                  color=\"indigo lighten-2\"\n                  rounded\n                ></v-progress-linear>\n                <div class=\"text-right caption\">\n                  {{ qc.holes }} objects ({{ qc.holesPct }}%)\n                </div>\n              </div>\n\n              <v-divider class=\"my-3\"></v-divider>\n\n              <div class=\"body-2\">\n                <div\n                  class=\"font-weight-bold orange--text text--darken-2 mb-1\"\n                >\n                  2. Small Objects / Noise\n                </div>\n                <p\n                  class=\"caption grey--text text--darken-2 mb-2\"\n                >\n                  Objects smaller than process min ESD\n                  ({{ Math.round(meta.min_esd) }} µm). High\n                  fraction suggests background noise or detritus.\n                </p>\n                <v-progress-linear\n                  :value=\"qc.smallPct\"\n                  height=\"6\"\n                  color=\"orange lighten-2\"\n                  rounded\n                ></v-progress-linear>\n                <div class=\"text-right caption\">\n                  {{ qc.small }} objects ({{ qc.smallPct }}%)\n                </div>\n              </div>\n            </v-card>\n          </v-col>\n        </v-row>\n\n        <!-- ROW 3: MORPHOMETRICS SCATTER + PROCESS PIPELINE -->\n        <v-row class=\"mt-4\">\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div\n                class=\"d-flex justify-space-between align-center mb-2\"\n              >\n                <div class=\"subtitle-2 font-weight-bold\">\n                  Morphometrics Scatterplot\n                </div>\n                <v-select\n                  v-model=\"qcPlot\"\n                  :items=\"qcPlotOptions\"\n                  dense\n                  outlined\n                  hide-details\n                  style=\"max-width: 260px;\"\n                ></v-select>\n              </div>\n              <div\n                style=\"height: 260px; width: 100%; position: relative;\"\n              >\n                <canvas ref=\"chartMorph\"></canvas>\n              </div>\n            </v-card>\n          </v-col>\n\n          <v-col cols=\"12\" md=\"6\">\n            <v-card outlined class=\"pa-3\">\n              <div class=\"subtitle-2 font-weight-bold mb-3\">\n                Processing Pipeline\n              </div>\n              <div class=\"caption grey--text mb-1\">\n                Process ID: <strong>{{ meta.process_id }}</strong>\n              </div>\n              <div class=\"caption grey--text mb-3\">\n                Process datetime:\n                <strong>{{ meta.process_datetime }}</strong>\n              </div>\n              <v-simple-table dense class=\"caption\">\n                <tbody>\n                  <tr v-for=\"(step, idx) in meta.process_steps\" :key=\"idx\">\n                    <td class=\"grey--text\">Step {{ idx + 1 }}</td>\n                    <td>{{ step }}</td>\n                  </tr>\n                </tbody>\n              </v-simple-table>\n            </v-card>\n          </v-col>\n        </v-row>\n\n        <!-- ROW 4: GALLERY + INSPECTOR & FILTERS -->\n        <v-row class=\"mt-4\">\n          <!-- LEFT: GALLERY GRID -->\n          <v-col cols=\"12\" md=\"8\" lg=\"9\">\n            <v-card outlined class=\"fill-height d-flex flex-column\">\n              <v-toolbar\n                flat\n                dense\n                color=\"grey lighten-5\"\n                style=\"flex: 0 0 auto;\"\n              >\n                <span class=\"caption grey--text mr-2\">Sort by:</span>\n                <v-select\n                  v-model=\"gallerySort\"\n                  :items=\"sortOptions\"\n                  item-text=\"text\"\n                  item-value=\"value\"\n                  dense\n                  outlined\n                  hide-details\n                  style=\"max-width: 220px;\"\n                  class=\"caption bg-white\"\n                ></v-select>\n\n                <v-spacer></v-spacer>\n\n                <span class=\"caption grey--text mr-4\">\n                  Showing top {{ paginatedObjects.length }} of\n                  {{ filteredObjects.length }}\n                </span>\n              </v-toolbar>\n\n              <v-card-text\n                class=\"pa-2 flex-grow-1 overflow-y-auto\"\n                style=\"height: 600px;\"\n              >\n                <div\n                  v-if=\"!paginatedObjects.length\"\n                  class=\"text-center mt-10 grey--text\"\n                >\n                  No objects match the current filters.\n                </div>\n\n                <div class=\"gallery-grid\">\n                  <div\n                    v-for=\"obj in paginatedObjects\"\n                    :key=\"obj.object_id\"\n                    class=\"gallery-item elevation-1\"\n                    :class=\"{ selected: selectedId === obj.object_id }\"\n                    @click=\"selectObject(obj)\"\n                  >\n                    <v-img\n                      :src=\"getImageUrl(obj)\"\n                      aspect-ratio=\"1\"\n                      contain\n                      class=\"white pa-1\"\n                    >\n                      <template v-slot:placeholder>\n                        <v-row\n                          class=\"fill-height ma-0\"\n                          align=\"center\"\n                          justify=\"center\"\n                        >\n                          <v-progress-circular\n                            indeterminate\n                            size=\"20\"\n                            width=\"2\"\n                            color=\"grey lighten-2\"\n                          ></v-progress-circular>\n                        </v-row>\n                      </template>\n                    </v-img>\n\n                    <!-- Metric overlay -->\n                    <div class=\"gallery-overlay\">\n                      <div>\n                        {{ Math.round(obj.esd_um) }} µm\n                      </div>\n                      <div>\n                        Circ: {{ formatNum(obj.circ, 2) }}\n                      </div>\n                      <div>\n                        Val: {{ Math.round(obj.val) }}\n                      </div>\n                    </div>\n\n                    <!-- Optional label chip -->\n                    <div\n                      v-if=\"obj.label\"\n                      class=\"class-chip\"\n                    >\n                      {{ obj.label }}\n                    </div>\n                  </div>\n                </div>\n              </v-card-text>\n            </v-card>\n          </v-col>\n\n          <!-- RIGHT: INSPECTOR + FILTERS -->\n          <v-col cols=\"12\" md=\"4\" lg=\"3\">\n            <div class=\"sticky-top\">\n              <!-- INSPECTOR -->\n              <v-card outlined class=\"mb-3\">\n                <v-card-title\n                  class=\"caption font-weight-bold py-2 grey lighten-4\"\n                >\n                  Inspector\n                </v-card-title>\n\n                <div\n                  v-if=\"selectedObject\"\n                  class=\"pa-3\"\n                >\n                  <div\n                    class=\"img-container rounded elevation-1 mb-3 white relative pa-1\"\n                  >\n                    <v-img\n                      :src=\"getImageUrl(selectedObject)\"\n                      contain\n                      max-height=\"220\"\n                    ></v-img>\n\n                    <!-- Scale bar -->\n                    <div\n                      class=\"scale-bar-overlay\"\n                      v-if=\"scaleBar.px > 0\"\n                    >\n                      <div\n                        class=\"scale-line\"\n                        :style=\"{ width: scaleBar.px + 'px' }\"\n                      ></div>\n                      <div class=\"scale-text\">\n                        {{ scaleBar.val }} µm\n                      </div>\n                    </div>\n                  </div>\n\n                  <div class=\"caption grey--text mb-1\">\n                    <strong>object_ID:</strong> {{ selectedObject.object_id }}\n                  </div>\n                  <div class=\"caption grey--text mb-3\">\n                    Equivalent Spherical Diameter (ESD) computed from\n                    <code>object_equivalent_diameter</code> (px) × pixel size\n                    {{ formatNum(meta.pixel, 3) }} µm/px.\n                  </div>\n                  <div class=\"text-h6 font-weight-bold mb-1\">\n                    {{ formatNum(selectedObject.esd_um, 1) }} µm\n                  </div>\n\n                  <!-- Quick strip of neighbors -->\n                  <div class=\"strip mb-3\">\n                    <v-img\n                      v-for=\"o in stripObjects\"\n                      :key=\"o.object_id\"\n                      :src=\"getImageUrl(o)\"\n                      max-width=\"40\"\n                      max-height=\"40\"\n                      class=\"mr-1 strip-thumb\"\n                      contain\n                      @click=\"selectObject(o)\"\n                    ></v-img>\n                  </div>\n\n                  <!-- GEOMETRY METRICS -->\n                  <div class=\"subtitle-2 mb-1\">Geometry</div>\n                  <v-simple-table dense class=\"caption mb-3\">\n                    <tbody>\n                      <tr>\n                        <td class=\"grey--text\">Width × Height (µm)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.width_um, 0) }} ×\n                          {{ formatNum(selectedObject.height_um, 0) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Major / Minor axis (µm)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.major_um, 1) }} /\n                          {{ formatNum(selectedObject.minor_um, 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Area / Convex Area (px²)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ selectedObject.object_area }} /\n                          {{ selectedObject.object_convex_area }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Bounding box area (px²)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ selectedObject.object_bounding_box_area }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Perimeter (px)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject['object_perim.'], 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Elongation</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_elongation, 2) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Eccentricity</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_eccentricity, 3) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Extent</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_extent, 3) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Angle (deg)</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_angle, 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Euler number</td>\n                        <td class=\"font-weight-bold\">\n                          {{ selectedObject.object_euler_number }}\n                        </td>\n                      </tr>\n                    </tbody>\n                  </v-simple-table>\n\n                  <!-- SHAPE INDICES -->\n                  <div class=\"subtitle-2 mb-1\">Shape indices</div>\n                  <div class=\"mb-2\">\n                    <div class=\"d-flex justify-space-between caption\">\n                      <span>Circularity</span>\n                      <strong>\n                        {{ formatNum(selectedObject.circ, 2) }}\n                      </strong>\n                    </div>\n                    <v-progress-linear\n                      :value=\"selectedObject.circ * 100\"\n                      color=\"blue\"\n                      height=\"6\"\n                      rounded\n                    ></v-progress-linear>\n                  </div>\n\n                  <div class=\"mb-2\">\n                    <div class=\"d-flex justify-space-between caption\">\n                      <span>Solidity</span>\n                      <strong>\n                        {{ formatNum(selectedObject.solidity, 2) }}\n                      </strong>\n                    </div>\n                    <v-progress-linear\n                      :value=\"selectedObject.solidity * 100\"\n                      color=\"orange\"\n                      height=\"6\"\n                      rounded\n                    ></v-progress-linear>\n                  </div>\n\n                  <div class=\"mb-4\">\n                    <div class=\"d-flex justify-space-between caption\">\n                      <span>Mean Gray Value</span>\n                      <strong>\n                        {{ formatNum(selectedObject.val, 0) }}\n                      </strong>\n                    </div>\n                    <v-progress-linear\n                      :value=\"(selectedObject.val / 255) * 100\"\n                      color=\"grey darken-2\"\n                      height=\"6\"\n                      rounded\n                    ></v-progress-linear>\n                  </div>\n\n                  <!-- COLOR STATS -->\n                  <div class=\"subtitle-2 mb-1\">Color (HSV)</div>\n                  <v-simple-table dense class=\"caption mb-4\">\n                    <tbody>\n                      <tr>\n                        <td class=\"grey--text\">Mean Hue / Sat / Val</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_MeanHue, 1) }} /\n                          {{ formatNum(selectedObject.object_MeanSaturation, 1) }} /\n                          {{ formatNum(selectedObject.object_MeanValue, 1) }}\n                        </td>\n                      </tr>\n                      <tr>\n                        <td class=\"grey--text\">Std Hue / Sat / Val</td>\n                        <td class=\"font-weight-bold\">\n                          {{ formatNum(selectedObject.object_StdHue, 1) }} /\n                          {{ formatNum(selectedObject.object_StdSaturation, 1) }} /\n                          {{ formatNum(selectedObject.object_StdValue, 1) }}\n                        </td>\n                      </tr>\n                    </tbody>\n                  </v-simple-table>\n\n                  <v-btn\n                    block\n                    small\n                    outlined\n                    color=\"primary\"\n                    :href=\"getImageUrl(selectedObject)\"\n                    download\n                    target=\"_blank\"\n                  >\n                    <v-icon left small>mdi-download</v-icon>\n                    Download Image\n                  </v-btn>\n                </div>\n\n                <div\n                  v-else\n                  class=\"pa-6 text-center caption grey--text\"\n                >\n                  Select an object from the gallery to view details.\n                </div>\n              </v-card>\n\n              <!-- FILTERS -->\n              <v-card outlined>\n                <v-card-title\n                  class=\"caption font-weight-bold py-2 grey lighten-4\"\n                >\n                  Filters ({{ filteredObjects.length }})\n                  <v-spacer></v-spacer>\n                  <v-btn\n                    x-small\n                    text\n                    color=\"red\"\n                    @click=\"resetFilters\"\n                  >\n                    Reset\n                  </v-btn>\n                </v-card-title>\n\n                <v-card-text\n                  class=\"pt-4\"\n                  style=\"max-height: 380px; overflow-y: auto;\"\n                >\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>ESD (µm)</span>\n                    <span>{{ filters.esd[0] }}–{{ filters.esd[1] }}</span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.esd\"\n                    :min=\"sliderStats.esd.min\"\n                    :max=\"sliderStats.esd.max\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-4\"\n                  ></v-range-slider>\n\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>Major Axis (µm)</span>\n                    <span>\n                      {{ filters.major[0] }}–{{ filters.major[1] }}\n                    </span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.major\"\n                    :min=\"sliderStats.major.min\"\n                    :max=\"sliderStats.major.max\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-4\"\n                    color=\"purple\"\n                  ></v-range-slider>\n\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>Minor Axis (µm)</span>\n                    <span>\n                      {{ filters.minor[0] }}–{{ filters.minor[1] }}\n                    </span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.minor\"\n                    :min=\"sliderStats.minor.min\"\n                    :max=\"sliderStats.minor.max\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-4\"\n                    color=\"teal\"\n                  ></v-range-slider>\n\n                  <div\n                    class=\"d-flex justify-space-between caption font-weight-bold\"\n                  >\n                    <span>Circularity</span>\n                    <span>\n                      {{ filters.circ[0] }}–{{ filters.circ[1] }}\n                    </span>\n                  </div>\n                  <v-range-slider\n                    v-model=\"filters.circ\"\n                    :min=\"0\"\n                    :max=\"1\"\n                    :step=\"0.05\"\n                    dense\n                    hide-details\n                    class=\"mt-1 mb-2\"\n                  ></v-range-slider>\n                </v-card-text>\n              </v-card>\n            </div>\n          </v-col>\n        </v-row>\n      </div>\n    </div>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: ['msg'],\n\n  data() {\n    return {\n      gallerySort: 'esd_desc',\n      sortOptions: [\n        { text: 'Size (ESD) Desc', value: 'esd_desc' },\n        { text: 'Size (ESD) Asc', value: 'esd_asc' },\n        { text: 'Major Axis Desc', value: 'maj_desc' },\n        { text: 'Minor Axis Desc', value: 'min_desc' },\n        { text: 'Circularity Desc', value: 'circ_desc' },\n        { text: 'Gray Value Asc', value: 'val_asc' }\n      ],\n      filters: {\n        esd: [0, 2000],\n        major: [0, 2000],\n        minor: [0, 2000],\n        circ: [0, 1]\n      },\n      selectedId: null,\n      scaleBar: { px: 0, val: 0 },\n      stickyCount: 0,\n      qcPlot: 'esd_circ',\n      qcPlotOptions: [\n        { text: 'ESD vs Circularity', value: 'esd_circ' },\n        { text: 'Major vs Minor', value: 'major_minor' },\n        { text: 'ESD vs Gray Value', value: 'esd_val' }\n      ],\n      charts: {\n        hist: null,\n        flow: null,\n        morph: null\n      }\n    };\n  },\n\n  computed: {\n    rawPayload() {\n      if (!this.msg) return [];\n      const p = this.msg.payload;\n      if (Array.isArray(p)) return p;\n      return p ? [p] : [];\n    },\n\n    hasData() {\n      return this.rawPayload.length > 0;\n    },\n\n    // CORE NORMALIZED OBJECT LIST\n    cleanObjects() {\n      if (!this.hasData) return [];\n      const pxDefault =\n        Number(this.msg.process_pixel || this.msg.processPixelSize) || 1;\n\n      return this.rawPayload\n        .filter(o => o.object_id && o.object_equivalent_diameter)\n        .map(o => {\n          const px =\n            Number(\n              o.process_pixel ||\n                o.calibration_pixel_size ||\n                pxDefault\n            ) || 1;\n\n          return {\n            ...o,\n            esd_um:\n              (Number(o.object_equivalent_diameter) || 0) * px,\n            width_um: (Number(o.object_width) || 0) * px,\n            height_um: (Number(o.object_height) || 0) * px,\n            major_um: (Number(o.object_major) || 0) * px,\n            minor_um: (Number(o.object_minor) || 0) * px,\n            x: Number(o.object_x) || 0,\n            y: Number(o.object_y) || 0,\n            circ:\n              Number(o['object_circ.'] || o.circularity) || 0,\n            val: Number(o.object_MeanValue) || 0,\n            solidity: Number(o.object_solidity) || 0,\n            euler: Number(o.object_euler_number) || 0\n          };\n        })\n        .filter(o => o.esd_um > 0);\n    },\n\n    // FILTERED OBJECTS\n    filteredObjects() {\n      const f = this.filters;\n      return this.cleanObjects.filter(o => {\n        return (\n          o.esd_um >= f.esd[0] &&\n          o.esd_um <= f.esd[1] &&\n          o.major_um >= f.major[0] &&\n          o.major_um <= f.major[1] &&\n          o.minor_um >= f.minor[0] &&\n          o.minor_um <= f.minor[1] &&\n          o.circ >= f.circ[0] &&\n          o.circ <= f.circ[1]\n        );\n      });\n    },\n\n    // META EXTRACTED FROM FIRST OBJECT\n    meta() {\n      if (!this.cleanObjects.length) {\n        return {\n          sample_id: 'N/A',\n          acq_id: 'N/A',\n          project: '—',\n          operator: '—',\n          gear: '—',\n          imaged_volume: 1,\n          pumped_volume: 1,\n          pixel: 1,\n          min_esd: 0,\n          flowcell_thickness: 0,\n          lat_end: '—',\n          lon_end: '—',\n          date: '—',\n          camera_res: '—',\n          camera_iso: '—',\n          shutter_speed: '—',\n          comment: '',\n          process_id: '—',\n          process_datetime: '—',\n          process_steps: [],\n          net_diameter: '—',\n          net_length: '—',\n          net_mesh: '—'\n        };\n      }\n\n      const o = this.cleanObjects[0];\n      const src = this.rawPayload[0] || o;\n\n      const steps = [];\n      for (let i = 1; i <= 7; i++) {\n        const key = `process_${i}st_operation`.replace('1st', '1st');\n        // Actually keys in your JSON are process_1st_operation...process_7th_operation\n      }\n      // On recrée proprement depuis le JSON\n      const processSteps = [];\n      for (let i = 1; i <= 7; i++) {\n        const suffix =\n          i === 1\n            ? '1st'\n            : i === 2\n            ? '2nd'\n            : i === 3\n            ? '3rd'\n            : `${i}th`;\n        const key = `process_${suffix}_operation`;\n        if (src[key]) processSteps.push(src[key]);\n      }\n\n      return {\n        sample_id: src.sample_id || this.msg.sample_id || 'Unknown',\n        acq_id: src.acq_id || this.msg.acq_id || 'N/A',\n        project: src.sample_project || 'Unknown',\n        operator: src.sample_operator || 'Unknown',\n        gear: src.sample_gear || 'Unknown',\n        imaged_volume: Number(src.acq_imaged_volume) || 1,\n        pumped_volume: Number(src.acq_pumped_volume) || 1,\n        pixel:\n          Number(src.process_pixel || this.msg.process_pixel) ||\n          1,\n        min_esd: Number(src.process_min_ESD) || 0,\n        flowcell_thickness:\n          Number(src.acq_flowcell_thickness) || 0,\n        lat_end: src.object_lat_end ?? 'N/A',\n        lon_end: src.object_lon_end ?? 'N/A',\n        date:\n          src.acq_local_datetime ||\n          src.process_datetime ||\n          src.object_date ||\n          '',\n        camera_res: src.acq_camera_resolution || '—',\n        camera_iso: src.acq_camera_iso || '—',\n        shutter_speed: src.acq_camera_shutter_speed || '—',\n        comment: src.sample_comment || '',\n        process_id: src.process_id || '—',\n        process_datetime: src.process_datetime || '—',\n        process_steps: processSteps,\n        net_diameter: src.sample_net_mouth_diameter || '—',\n        net_length: src.sample_net_length || '—',\n        net_mesh: src.sample_net_mesh_size || '—'\n      };\n    },\n\n    // ABUNDANCE & BIOVOLUME\n    abundance() {\n      if (!this.meta.imaged_volume) return 0;\n      return this.filteredObjects.length / this.meta.imaged_volume;\n    },\n\n    totalBiovolume() {\n      if (!this.meta.imaged_volume) return 0;\n      const vol = this.filteredObjects.reduce((acc, o) => {\n        return acc + (Math.PI * Math.pow(o.esd_um, 3)) / 6;\n      }, 0);\n      return vol / this.meta.imaged_volume;\n    },\n\n    // SLIDER LIMITS\n    sliderStats() {\n      if (!this.cleanObjects.length) {\n        return {\n          esd: { min: 0, max: 100 },\n          major: { min: 0, max: 100 },\n          minor: { min: 0, max: 100 }\n        };\n      }\n      const esds = this.cleanObjects.map(o => o.esd_um);\n      const majs = this.cleanObjects.map(o => o.major_um);\n      const mins = this.cleanObjects.map(o => o.minor_um);\n\n      return {\n        esd: {\n          min: Math.floor(Math.min(...esds)),\n          max: Math.ceil(Math.max(...esds))\n        },\n        major: {\n          min: Math.floor(Math.min(...majs)),\n          max: Math.ceil(Math.max(...majs))\n        },\n        minor: {\n          min: Math.floor(Math.min(...mins)),\n          max: Math.ceil(Math.max(...mins))\n        }\n      };\n    },\n\n    // PAGINATED / SORTED GALLERY OBJECTS\n    paginatedObjects() {\n      let arr = [...this.filteredObjects];\n\n      arr.sort((a, b) => {\n        switch (this.gallerySort) {\n          case 'esd_asc':\n            return a.esd_um - b.esd_um;\n          case 'maj_desc':\n            return b.major_um - a.major_um;\n          case 'min_desc':\n            return b.minor_um - a.minor_um;\n          case 'circ_desc':\n            return b.circ - a.circ;\n          case 'val_asc':\n            return a.val - b.val;\n          default:\n            // esd_desc\n            return b.esd_um - a.esd_um;\n        }\n      });\n\n      return arr.slice(0, 150);\n    },\n\n    selectedObject() {\n      return (\n        this.cleanObjects.find(\n          o => o.object_id === this.selectedId\n        ) || null\n      );\n    },\n\n    // small strip of neighbors around selected object\n    stripObjects() {\n      if (!this.selectedObject) return [];\n      const idx = this.filteredObjects.findIndex(\n        o => o.object_id === this.selectedId\n      );\n      if (idx === -1) return [];\n      const start = Math.max(idx - 5, 0);\n      return this.filteredObjects.slice(start, idx + 6);\n    },\n\n    // QC STATS\n    qc() {\n      const total = this.cleanObjects.length || 1;\n      const holes = this.cleanObjects.filter(o => o.euler < 0)\n        .length;\n      const small =\n        this.meta.min_esd > 0\n          ? this.cleanObjects.filter(\n              o => o.esd_um < this.meta.min_esd\n            ).length\n          : 0;\n\n      return {\n        holes,\n        holesPct: Math.round((holes / total) * 100),\n        small,\n        smallPct: Math.round((small / total) * 100)\n      };\n    },\n\n    hasCoords() {\n      return this.cleanObjects.some(o => o.x !== 0 || o.y !== 0);\n    },\n\n    ecotaxaLink() {\n      return this.meta.acq_id !== 'N/A'\n        ? `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.meta.acq_id}.zip`\n        : '#';\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler() {\n        this.init();\n      }\n    },\n    filteredObjects() {\n      this.updateCharts();\n    },\n    qcPlot() {\n      this.$nextTick(this.renderMorph);\n    },\n    selectedObject() {\n      this.calcScaleBar();\n    }\n  },\n\n  mounted() {\n    this.init();\n  },\n\n  methods: {\n    init() {\n      if (!this.cleanObjects.length) return;\n\n      // init sliders to data bounds\n      this.filters.esd = [\n        this.sliderStats.esd.min,\n        this.sliderStats.esd.max\n      ];\n      this.filters.major = [\n        this.sliderStats.major.min,\n        this.sliderStats.major.max\n      ];\n      this.filters.minor = [\n        this.sliderStats.minor.min,\n        this.sliderStats.minor.max\n      ];\n\n      // default selection = first object\n      this.selectedId = this.cleanObjects[0].object_id;\n      this.updateCharts();\n    },\n\n    // FORMATTERS\n    formatNum(v, d) {\n      return (Number(v) || 0).toFixed(d);\n    },\n\n    formatBigNum(v) {\n      const n = Number(v) || 0;\n      if (n > 1_000_000) return (n / 1_000_000).toFixed(2) + 'M';\n      if (n > 1000) return (n / 1000).toFixed(0) + 'k';\n      return Math.round(n);\n    },\n\n    // IMAGE URL HELPERS\n    getImageUrl(o) {\n      if (!o) return '';\n      const date = o.object_date || this.meta.date || '';\n      const sample = o.sample_id || this.meta.sample_id || '';\n      const acq = o.acq_id || this.meta.acq_id || '';\n      return `/ps/data/browse/api/preview/big/objects/${date}/${sample}/${acq}/${o.img_file_name}`;\n    },\n\n    // FILTERS / SELECTION\n    resetFilters() {\n      this.filters.esd = [\n        this.sliderStats.esd.min,\n        this.sliderStats.esd.max\n      ];\n      this.filters.major = [\n        this.sliderStats.major.min,\n        this.sliderStats.major.max\n      ];\n      this.filters.minor = [\n        this.sliderStats.minor.min,\n        this.sliderStats.minor.max\n      ];\n      this.filters.circ = [0, 1];\n    },\n\n    selectObject(obj) {\n      if (obj && obj.object_id) {\n        this.selectedId = obj.object_id;\n      }\n    },\n\n    // SCALE BAR: approximate 25% of object width with \"nice\" values\n    calcScaleBar() {\n      if (\n        !this.selectedObject ||\n        !this.meta.pixel ||\n        !this.selectedObject.object_width\n      ) {\n        this.scaleBar = { px: 0, val: 0 };\n        return;\n      }\n\n      const pxSize = this.meta.pixel;\n      const widthPx = Number(this.selectedObject.object_width) || 0;\n      const targetFrac = 0.25; // 25% of width\n      const physical = widthPx * pxSize * targetFrac;\n\n      const niceSteps = [5, 10, 20, 50, 100, 200, 500, 1000];\n      let chosen = niceSteps[0];\n      for (const step of niceSteps) {\n        if (physical <= step) {\n          chosen = step;\n          break;\n        }\n      }\n      const px = chosen / pxSize;\n      this.scaleBar = { val: chosen, px: px };\n    },\n\n    // CSV EXPORT\n    downloadCSV() {\n      if (!this.filteredObjects.length) return;\n      const headers = Object.keys(this.filteredObjects[0]);\n      const csv = [\n        headers.join(','),\n        ...this.filteredObjects.map(r =>\n          headers\n            .map(c => JSON.stringify(r[c] != null ? r[c] : ''))\n            .join(',')\n        )\n      ].join('\\n');\n\n      const blob = new Blob([csv], { type: 'text/csv' });\n      const a = document.createElement('a');\n      a.href = URL.createObjectURL(blob);\n      a.download = `${this.meta.acq_id}_export.csv`;\n      a.click();\n    },\n\n    // CHARTS\n    updateCharts() {\n      this.$nextTick(() => {\n        this.renderHist();\n        this.renderFlow();\n        this.renderMorph();\n      });\n    },\n\n    // Histogram of ESD (linear bins only)\n    renderHist() {\n      const ctx = this.$refs.chartHist;\n      if (!ctx || !this.filteredObjects.length) return;\n      if (this.charts.hist) this.charts.hist.destroy();\n\n      const vals = this.filteredObjects\n        .map(o => o.esd_um)\n        .filter(v => v > 0);\n      if (!vals.length) return;\n\n      const maxVal = Math.max(...vals);\n      const step = 10;\n      const numBins = Math.ceil(maxVal / step) + 1;\n      let counts = new Array(numBins).fill(0);\n      let labels = new Array(numBins)\n        .fill(0)\n        .map(\n          (_, i) =>\n            `${i * step}-${(i + 1) * step}`\n        );\n\n      vals.forEach(v => {\n        const idx = Math.floor(v / step);\n        if (counts[idx] !== undefined) counts[idx]++;\n      });\n\n      // trim empty tail\n      let limit = counts.length;\n      while (limit > 0 && counts[limit - 1] === 0) limit--;\n      counts = counts.slice(0, limit);\n      labels = labels.slice(0, limit);\n\n      this.charts.hist = new Chart(ctx, {\n        type: 'bar',\n        data: {\n          labels,\n          datasets: [\n            {\n              label: 'Count',\n              data: counts,\n              backgroundColor: '#5C6BC0',\n              borderRadius: 2\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: {\n            legend: { display: false }\n          },\n          scales: {\n            x: {\n              title: {\n                display: true,\n                text: 'ESD Size Class (µm)'\n              },\n              ticks: {\n                autoSkip: true,\n                maxTicksLimit: 20\n              }\n            },\n            y: {\n              beginAtZero: true\n            }\n          }\n        }\n      });\n    },\n\n    // Flowcell heatmap (scatter with sticky detection + decimation)\n    renderFlow() {\n      const ctx = this.$refs.chartFlow;\n      if (!ctx || !this.filteredObjects.length || !this.hasCoords)\n        return;\n      if (this.charts.flow) this.charts.flow.destroy();\n\n      const objs = this.filteredObjects;\n      const binSize = 100;\n      const bins = {};\n\n      objs.forEach(o => {\n        const k = `${Math.floor(\n          o.x / binSize\n        )}_${Math.floor(o.y / binSize)}`;\n        bins[k] = (bins[k] || 0) + 1;\n      });\n\n      let normal = [];\n      let sticky = [];\n      this.stickyCount = 0;\n\n      objs.forEach(o => {\n        const k = `${Math.floor(\n          o.x / binSize\n        )}_${Math.floor(o.y / binSize)}`;\n        if (bins[k] > 5) {\n          sticky.push({ x: o.x, y: o.y });\n          this.stickyCount++;\n        } else {\n          normal.push({ x: o.x, y: o.y });\n        }\n      });\n\n      const MAX_POINTS = 2000;\n      if (normal.length > MAX_POINTS) {\n        const step = Math.ceil(normal.length / MAX_POINTS);\n        normal = normal.filter((_, i) => i % step === 0);\n      }\n\n      this.charts.flow = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: 'Normal (sampled)',\n              data: normal,\n              backgroundColor: '#90CAF9',\n              pointRadius: 2\n            },\n            {\n              label: 'Sticky/Clump',\n              data: sticky,\n              backgroundColor: '#EF5350',\n              pointRadius: 3\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          scales: {\n            y: { reverse: true, display: false },\n            x: { display: false }\n          },\n          plugins: {\n            legend: {\n              display: true,\n              position: 'bottom'\n            }\n          }\n        }\n      });\n    },\n\n    // Morphometrics scatter: ESD vs circ, major vs minor, etc.\n    renderMorph() {\n      const ctx = this.$refs.chartMorph;\n      if (!ctx || !this.filteredObjects.length) return;\n      if (this.charts.morph) this.charts.morph.destroy();\n\n      const objs = this.filteredObjects;\n      const data = [];\n      const MAX_POINTS = 3000;\n      const step =\n        objs.length > MAX_POINTS\n          ? Math.ceil(objs.length / MAX_POINTS)\n          : 1;\n\n      for (let i = 0; i < objs.length; i += step) {\n        const o = objs[i];\n        if (!o) continue;\n        if (this.qcPlot === 'esd_circ') {\n          data.push({ x: o.esd_um, y: o.circ });\n        } else if (this.qcPlot === 'major_minor') {\n          data.push({ x: o.major_um, y: o.minor_um });\n        } else if (this.qcPlot === 'esd_val') {\n          data.push({ x: o.esd_um, y: o.val });\n        }\n      }\n\n      let xLabel = '';\n      let yLabel = '';\n\n      if (this.qcPlot === 'esd_circ') {\n        xLabel = 'ESD (µm)';\n        yLabel = 'Circularity';\n      } else if (this.qcPlot === 'major_minor') {\n        xLabel = 'Major axis (µm)';\n        yLabel = 'Minor axis (µm)';\n      } else if (this.qcPlot === 'esd_val') {\n        xLabel = 'ESD (µm)';\n        yLabel = 'Gray value';\n      }\n\n      this.charts.morph = new Chart(ctx, {\n        type: 'scatter',\n        data: {\n          datasets: [\n            {\n              label: '',\n              data,\n              backgroundColor: '#42A5F5',\n              pointRadius: 2\n            }\n          ]\n        },\n        options: {\n          responsive: true,\n          maintainAspectRatio: false,\n          plugins: { legend: { display: false } },\n          scales: {\n            x: {\n              title: {\n                display: true,\n                text: xLabel\n              }\n            },\n            y: {\n              title: {\n                display: true,\n                text: yLabel\n              }\n            }\n          }\n        }\n      });\n    }\n  }\n};\n</script>\n\n<style scoped>\n/* LAYOUT */\n.sticky-top {\n  position: sticky;\n  top: 10px;\n  z-index: 2;\n}\n.relative {\n  position: relative;\n}\n.border-bottom {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n/* GALLERY */\n.gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));\n  gap: 8px;\n}\n.gallery-item {\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  transition: transform 0.2s;\n  background: white;\n  border: 2px solid transparent;\n}\n.gallery-item:hover {\n  transform: scale(1.05);\n  z-index: 3;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n}\n.gallery-item.selected {\n  border-color: #1976d2;\n}\n\n/* OVERLAY ON THUMBNAIL */\n.gallery-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: rgba(0, 0, 0, 0.65);\n  color: white;\n  font-size: 10px;\n  padding: 2px 3px;\n  line-height: 1.1;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n.gallery-item:hover .gallery-overlay {\n  opacity: 1;\n}\n\n/* CLASS CHIP */\n.class-chip {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  background: #4caf50;\n  color: white;\n  font-size: 9px;\n  padding: 1px 4px;\n  border-radius: 3px;\n}\n\n/* SCALE BAR */\n.scale-bar-overlay {\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  background: rgba(0, 0, 0, 0.4);\n  padding: 3px 5px;\n  border-radius: 2px;\n}\n.scale-line {\n  height: 2px;\n  background: white;\n  margin-bottom: 2px;\n  box-shadow: 0 1px 2px black;\n}\n.scale-text {\n  font-size: 10px;\n  font-weight: bold;\n  color: white;\n  text-shadow: 0 1px 2px black;\n  line-height: 1;\n}\n\n/* STRIP OF NEIGHBORS */\n.strip {\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n}\n.strip-thumb {\n  border: 1px solid #eee;\n}\n\n/* UTIL */\n.img-container {\n  overflow: hidden;\n}\n</style>\n",
+        "name": "Gallery",
+        "order": 2,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n    <div class=\"pa-4 full-height-container d-flex flex-column\">\n        <v-card class=\"mb-4 flex-grow-0\" elevation=\"1\">\n            <v-card-text class=\"py-2\">\n                <v-row align=\"center\" justify=\"space-between\">\n                    <v-col cols=\"12\" md=\"3\">\n                        <div class=\"d-flex align-center\">\n                            <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" class=\"mr-2\"></v-icon>\n                            <v-slider\n                                v-model=\"zoom\"\n                                min=\"0.1\"\n                                max=\"3\"\n                                step=\"0.1\"\n                                density=\"compact\"\n                                hide-details\n                                thumb-label\n                                color=\"primary\"\n                            ></v-slider>\n                            <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" class=\"ml-2\"></v-icon>\n                        </div>\n                        <div class=\"text-caption text-center text-grey\">Zoom x{{ zoom.toFixed(1) }}</div>\n                    </v-col>\n\n                    <v-col cols=\"12\" md=\"3\">\n                        <v-select\n                            v-model=\"sortBy\"\n                            :items=\"sortOptions\"\n                            label=\"Sort By\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                            prepend-inner-icon=\"mdi-sort\"\n                        ></v-select>\n                    </v-col>\n\n                    <v-col cols=\"6\" md=\"3\">\n                         <v-select\n                            v-model=\"itemsPerPage\"\n                            :items=\"[12, 24, 48, 100]\"\n                            label=\"Per Page\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                        ></v-select>\n                    </v-col>\n                    \n                    <v-col cols=\"6\" md=\"3\" class=\"text-right\">\n                        <v-chip size=\"small\" variant=\"flat\">\n                            Total: {{ filteredItems.length }}\n                        </v-chip>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n        </v-card>\n\n        <div class=\"gallery-scroll-area flex-grow-1\">\n            <div class=\"gallery-grid\">\n                <div \n                    v-for=\"(item, index) in paginatedItems\" \n                    :key=\"item.id\" \n                    class=\"gallery-item-wrapper\"\n                >\n                    <v-card \n                        class=\"gallery-card\" \n                        hover \n                        variant=\"outlined\" \n                        @click=\"openDetails(item)\"\n                        style=\"border-color: #e0e0e0;\"\n                    >\n                        <div \n                            class=\"img-container\"\n                            :style=\"{ \n                                width: (Math.max(item.object_width * zoom, 40)) + 'px', \n                                height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                                backgroundColor: '#f5f5f5' \n                            }\"\n                        >\n                            <img \n                                :src=\"item.url\" \n                                :style=\"{\n                                    width: (item.object_width * zoom) + 'px',\n                                    height: (item.object_height * zoom) + 'px',\n                                    objectFit: 'contain',\n                                    imageRendering: 'pixelated'\n                                }\"\n                            />\n                            \n                            <div \n                                class=\"mini-scale-bar\" \n                                :style=\"{ width: getScaleBar(item).width + 'px' }\"\n                            ></div>\n                            <div class=\"mini-scale-text\">\n                                {{ getScaleBar(item).label }}\n                            </div>\n                        </div>\n\n                        <v-divider></v-divider>\n                        <div class=\"d-flex justify-center pa-0 bg-white\">\n                            <v-btn \n                                icon=\"mdi-download\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"grey-darken-1\"\n                                @click.stop=\"downloadImage(item.url, item.id)\"\n                                title=\"Download\"\n                            ></v-btn>\n                             <v-btn \n                                icon=\"mdi-eye\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"primary\"\n                                @click.stop=\"openDetails(item)\"\n                                title=\"View Details\"\n                            ></v-btn>\n                        </div>\n                    </v-card>\n                </div>\n                \n                <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                    No objects found.\n                </div>\n            </div>\n        </div>\n\n        <div class=\"text-center pt-2 flex-grow-0\">\n            <v-pagination\n                v-model=\"page\"\n                :length=\"totalPages\"\n                :total-visible=\"7\"\n                density=\"compact\"\n                rounded=\"circle\"\n                color=\"primary\"\n            ></v-pagination>\n        </div>\n\n        <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n            <v-card v-if=\"selectedItem\">\n                <v-toolbar color=\"primary\" density=\"compact\">\n                    <v-toolbar-title class=\"text-subtitle-1\">Object Analysis</v-toolbar-title>\n                    <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\"></v-btn>\n                </v-toolbar>\n                <v-card-text class=\"pa-4\">\n                    <v-row>\n                        <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                            <img :src=\"selectedItem.url\" style=\"max-width: 100%; max-height: 300px; image-rendering: pixelated;\" />\n                            <div class=\"text-caption text-grey mt-1\">\n                                Resolution: {{ meta.resolution }} units/px\n                            </div>\n                        </v-col>\n                        <v-col cols=\"12\">\n                            <v-table density=\"compact\">\n                                <thead>\n                                    <tr><th class=\"text-left\">Metric</th><th class=\"text-right\">Value</th></tr>\n                                </thead>\n                                <tbody>\n                                    <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                        <td>{{ formatKeyName(key) }}</td>\n                                        <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                    </tr>\n                                </tbody>\n                            </v-table>\n                        </v-col>\n                    </v-row>\n                </v-card-text>\n            </v-card>\n        </v-dialog>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5, // Default zoom set to 0.5\n            \n            // Pagination & Sorting\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            \n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let result = [...this.rawData];\n            result.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return result;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            const end = start + this.itemsPerPage;\n            return this.filteredItems.slice(start, end);\n        }\n    },\n    watch: {\n        msg: {\n            handler(newValue) {\n                if (newValue && newValue.payload && newValue.payload.data) {\n                    this.rawData = newValue.payload.data;\n                    this.meta = newValue.payload.meta || { resolution: 1 };\n                    this.keys = newValue.payload.keys || [];\n                    this.page = 1;\n                }\n            },\n            deep: true\n        },\n        sortBy() { this.page = 1; }, \n        totalPages(newVal) {\n            if (this.page > newVal && newVal > 0) {\n                this.page = newVal;\n            }\n        }\n    },\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n        // --- NEW ADAPTIVE SCALE BAR LOGIC ---\n        getScaleBar(item) {\n            const res = this.meta.resolution || 1; // e.g., 0.75 um/px\n            const realWidth = item.object_width * res; // The real world width of the object\n            \n            // We want a bar that is roughly 1/3rd to 1/4th of the object's visual width\n            // This prevents a 100px bar on a 20px image.\n            const targetSize = realWidth / 3;\n\n            // Algorithm to find the nearest \"Nice Number\" (1, 2, 5, 10, 20, 50, 100...)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(targetSize)));\n            const residual = targetSize / magnitude;\n            \n            let niceNumber;\n            if (residual > 5) niceNumber = 5 * magnitude;       // e.g. 80 -> 50\n            else if (residual > 2) niceNumber = 2 * magnitude;  // e.g. 40 -> 20\n            else niceNumber = 1 * magnitude;                    // e.g. 15 -> 10\n            \n            // Fallback for very small objects to ensure at least 1 unit\n            if (niceNumber === 0) niceNumber = 1;\n\n            // Calculate how many pixels this \"Nice Number\" takes up\n            // pixels = real_units / resolution\n            const barPixels = niceNumber / res;\n\n            return {\n                width: barPixels * this.zoom, // Adjust for the current UI zoom level\n                label: niceNumber\n            };\n        },\n        formatKeyName(key) {\n            return key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n        formatMeta(item) {\n            const display = {};\n            const keysToUse = this.keys.length ? this.keys : Object.keys(item);\n            \n            keysToUse.forEach(k => {\n                if (k === 'url' || k === 'id') return; \n                let val = item[k];\n                if (typeof val === 'number') val = val.toFixed(2);\n                \n                let unit = '';\n                const keyLower = k.toLowerCase();\n                if (keyLower.includes('area')) unit = ' px²';\n                else if (keyLower.includes('width') || keyLower.includes('height') || keyLower.includes('major') || keyLower.includes('minor') || keyLower.includes('perim') || keyLower.includes('diameter') || keyLower.includes('_x') || keyLower.includes('_y')) unit = ' px';\n                else if (keyLower.includes('hue') || keyLower.includes('angle')) unit = '°';\n                else if (keyLower.includes('saturation')) unit = '%';\n                \n                const cleanKey = k.replace('object_', '');\n                display[cleanKey] = val + unit;\n            });\n            return display;\n        },\n        downloadImage(url, id) {\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `object_${id}.jpg`;\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n        }\n    }\n}\n</script>\n\n<style scoped>\n.full-height-container {\n    height: 100%;\n    max-height: 100vh; \n}\n\n.gallery-scroll-area {\n    overflow-y: auto;\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end; \n    justify-content: center;\n}\n\n.gallery-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.gallery-card {\n    transition: transform 0.2s;\n    cursor: pointer;\n}\n.gallery-card:hover {\n    transform: translateY(-2px);\n    border-color: #2196F3 !important;\n}\n\n.img-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    margin: 0 auto;\n    border-bottom: 1px solid #eee;\n}\n\n/* Individual Scale Bar Styles */\n.mini-scale-bar {\n    position: absolute;\n    bottom: 2px;\n    right: 2px;\n    height: 3px;\n    background-color: white;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 2;\n    transition: width 0.3s ease; /* Smooth transition when zooming */\n}\n\n.mini-scale-text {\n    position: absolute;\n    bottom: 5px;\n    right: 2px;\n    font-size: 9px;\n    color: black;\n    text-shadow: 0px 0px 2px white;\n    font-weight: 700;\n    line-height: 1;\n    z-index: 2;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1310,
-        "y": 280,
+        "x": 1300,
+        "y": 360,
         "wires": [
             []
         ]
@@ -4738,7 +4779,7 @@
         "templateScope": "local",
         "className": "",
         "x": 380,
-        "y": 180,
+        "y": 140,
         "wires": [
             [
                 "615edad94a4f77e7"
@@ -4888,7 +4929,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 420,
+        "x": 400,
         "y": 140,
         "wires": [
             [
@@ -5012,7 +5053,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 420,
+        "x": 400,
         "y": 140,
         "wires": [
             [
@@ -5288,7 +5329,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 410,
+        "x": 390,
         "y": 140,
         "wires": [
             [
@@ -5331,7 +5372,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 2,
-        "x": 610,
+        "x": 590,
         "y": 140,
         "wires": [
             [

From ad68a284455b87a1ed1bbf6656d1c4f22df38d6a Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 27 Nov 2025 15:14:22 +0000
Subject: [PATCH 13/36] update

---
 node-red/projects/dashboard/flows.json | 146 +++++--------------------
 1 file changed, 30 insertions(+), 116 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 07811fb70..3cb9f5f5e 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -4191,83 +4191,6 @@
             ]
         ]
     },
-    {
-        "id": "6532974092861ef7",
-        "type": "ui-table",
-        "z": "14f8c9b5ce1235cc",
-        "group": "fa6393a7d7e3b7d7",
-        "name": "List of acq",
-        "label": "",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "maxrows": "10",
-        "passthru": false,
-        "autocols": false,
-        "showSearch": false,
-        "deselect": true,
-        "selectionType": "click",
-        "columns": [
-            {
-                "title": "Project name",
-                "key": "project_name",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Sample ID",
-                "key": "sample_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Acquisition ID",
-                "key": "acquisition_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Number of objects",
-                "key": "image_acquired_count",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Gallery",
-                "key": "gallery",
-                "keyType": "key",
-                "type": "link",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Download",
-                "key": "export",
-                "keyType": "key",
-                "type": "link",
-                "width": "",
-                "align": "start"
-            }
-        ],
-        "mobileBreakpoint": "sm",
-        "mobileBreakpointType": "defaults",
-        "action": "replace",
-        "x": 570,
-        "y": 180,
-        "wires": [
-            [
-                "aefbf6f96248c398"
-            ]
-        ]
-    },
     {
         "id": "18a10804663dbaa1",
         "type": "function",
@@ -4284,8 +4207,7 @@
         "y": 180,
         "wires": [
             [
-                "6532974092861ef7",
-                "5abf944e23a57b18"
+                "92e2ed9f115c3991"
             ]
         ]
     },
@@ -4301,7 +4223,7 @@
         "sendError": false,
         "encoding": "none",
         "allProps": false,
-        "x": 880,
+        "x": 860,
         "y": 180,
         "wires": [
             [
@@ -4321,7 +4243,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 730,
+        "x": 710,
         "y": 180,
         "wires": [
             [
@@ -4348,7 +4270,6 @@
                 "bff00eae3f65f644",
                 "bbb2d0709f064549",
                 "45375ce0b837d4fb",
-                "905cfb1ad4803a3a",
                 "4244d2ed880cca66"
             ]
         ]
@@ -4424,22 +4345,6 @@
             ]
         ]
     },
-    {
-        "id": "905cfb1ad4803a3a",
-        "type": "debug",
-        "z": "14f8c9b5ce1235cc",
-        "name": "debug 4",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1440,
-        "y": 780,
-        "wires": []
-    },
     {
         "id": "45375ce0b837d4fb",
         "type": "ui-template",
@@ -4489,23 +4394,6 @@
             ]
         ]
     },
-    {
-        "id": "5abf944e23a57b18",
-        "type": "debug",
-        "z": "14f8c9b5ce1235cc",
-        "name": "debug 3",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 460,
-        "y": 280,
-        "wires": []
-    },
     {
         "id": "4244d2ed880cca66",
         "type": "ui-template",
@@ -4518,7 +4406,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <div class=\"pa-4 full-height-container d-flex flex-column\">\n        <v-card class=\"mb-4 flex-grow-0\" elevation=\"1\">\n            <v-card-text class=\"py-2\">\n                <v-row align=\"center\" justify=\"space-between\">\n                    <v-col cols=\"12\" md=\"3\">\n                        <div class=\"d-flex align-center\">\n                            <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" class=\"mr-2\"></v-icon>\n                            <v-slider\n                                v-model=\"zoom\"\n                                min=\"0.1\"\n                                max=\"3\"\n                                step=\"0.1\"\n                                density=\"compact\"\n                                hide-details\n                                thumb-label\n                                color=\"primary\"\n                            ></v-slider>\n                            <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" class=\"ml-2\"></v-icon>\n                        </div>\n                        <div class=\"text-caption text-center text-grey\">Zoom x{{ zoom.toFixed(1) }}</div>\n                    </v-col>\n\n                    <v-col cols=\"12\" md=\"3\">\n                        <v-select\n                            v-model=\"sortBy\"\n                            :items=\"sortOptions\"\n                            label=\"Sort By\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                            prepend-inner-icon=\"mdi-sort\"\n                        ></v-select>\n                    </v-col>\n\n                    <v-col cols=\"6\" md=\"3\">\n                         <v-select\n                            v-model=\"itemsPerPage\"\n                            :items=\"[12, 24, 48, 100]\"\n                            label=\"Per Page\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                        ></v-select>\n                    </v-col>\n                    \n                    <v-col cols=\"6\" md=\"3\" class=\"text-right\">\n                        <v-chip size=\"small\" variant=\"flat\">\n                            Total: {{ filteredItems.length }}\n                        </v-chip>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n        </v-card>\n\n        <div class=\"gallery-scroll-area flex-grow-1\">\n            <div class=\"gallery-grid\">\n                <div \n                    v-for=\"(item, index) in paginatedItems\" \n                    :key=\"item.id\" \n                    class=\"gallery-item-wrapper\"\n                >\n                    <v-card \n                        class=\"gallery-card\" \n                        hover \n                        variant=\"outlined\" \n                        @click=\"openDetails(item)\"\n                        style=\"border-color: #e0e0e0;\"\n                    >\n                        <div \n                            class=\"img-container\"\n                            :style=\"{ \n                                width: (Math.max(item.object_width * zoom, 40)) + 'px', \n                                height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                                backgroundColor: '#f5f5f5' \n                            }\"\n                        >\n                            <img \n                                :src=\"item.url\" \n                                :style=\"{\n                                    width: (item.object_width * zoom) + 'px',\n                                    height: (item.object_height * zoom) + 'px',\n                                    objectFit: 'contain',\n                                    imageRendering: 'pixelated'\n                                }\"\n                            />\n                            \n                            <div \n                                class=\"mini-scale-bar\" \n                                :style=\"{ width: getScaleBar(item).width + 'px' }\"\n                            ></div>\n                            <div class=\"mini-scale-text\">\n                                {{ getScaleBar(item).label }}\n                            </div>\n                        </div>\n\n                        <v-divider></v-divider>\n                        <div class=\"d-flex justify-center pa-0 bg-white\">\n                            <v-btn \n                                icon=\"mdi-download\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"grey-darken-1\"\n                                @click.stop=\"downloadImage(item.url, item.id)\"\n                                title=\"Download\"\n                            ></v-btn>\n                             <v-btn \n                                icon=\"mdi-eye\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"primary\"\n                                @click.stop=\"openDetails(item)\"\n                                title=\"View Details\"\n                            ></v-btn>\n                        </div>\n                    </v-card>\n                </div>\n                \n                <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                    No objects found.\n                </div>\n            </div>\n        </div>\n\n        <div class=\"text-center pt-2 flex-grow-0\">\n            <v-pagination\n                v-model=\"page\"\n                :length=\"totalPages\"\n                :total-visible=\"7\"\n                density=\"compact\"\n                rounded=\"circle\"\n                color=\"primary\"\n            ></v-pagination>\n        </div>\n\n        <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n            <v-card v-if=\"selectedItem\">\n                <v-toolbar color=\"primary\" density=\"compact\">\n                    <v-toolbar-title class=\"text-subtitle-1\">Object Analysis</v-toolbar-title>\n                    <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\"></v-btn>\n                </v-toolbar>\n                <v-card-text class=\"pa-4\">\n                    <v-row>\n                        <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                            <img :src=\"selectedItem.url\" style=\"max-width: 100%; max-height: 300px; image-rendering: pixelated;\" />\n                            <div class=\"text-caption text-grey mt-1\">\n                                Resolution: {{ meta.resolution }} units/px\n                            </div>\n                        </v-col>\n                        <v-col cols=\"12\">\n                            <v-table density=\"compact\">\n                                <thead>\n                                    <tr><th class=\"text-left\">Metric</th><th class=\"text-right\">Value</th></tr>\n                                </thead>\n                                <tbody>\n                                    <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                        <td>{{ formatKeyName(key) }}</td>\n                                        <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                    </tr>\n                                </tbody>\n                            </v-table>\n                        </v-col>\n                    </v-row>\n                </v-card-text>\n            </v-card>\n        </v-dialog>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5, // Default zoom set to 0.5\n            \n            // Pagination & Sorting\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            \n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let result = [...this.rawData];\n            result.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return result;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            const end = start + this.itemsPerPage;\n            return this.filteredItems.slice(start, end);\n        }\n    },\n    watch: {\n        msg: {\n            handler(newValue) {\n                if (newValue && newValue.payload && newValue.payload.data) {\n                    this.rawData = newValue.payload.data;\n                    this.meta = newValue.payload.meta || { resolution: 1 };\n                    this.keys = newValue.payload.keys || [];\n                    this.page = 1;\n                }\n            },\n            deep: true\n        },\n        sortBy() { this.page = 1; }, \n        totalPages(newVal) {\n            if (this.page > newVal && newVal > 0) {\n                this.page = newVal;\n            }\n        }\n    },\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n        // --- NEW ADAPTIVE SCALE BAR LOGIC ---\n        getScaleBar(item) {\n            const res = this.meta.resolution || 1; // e.g., 0.75 um/px\n            const realWidth = item.object_width * res; // The real world width of the object\n            \n            // We want a bar that is roughly 1/3rd to 1/4th of the object's visual width\n            // This prevents a 100px bar on a 20px image.\n            const targetSize = realWidth / 3;\n\n            // Algorithm to find the nearest \"Nice Number\" (1, 2, 5, 10, 20, 50, 100...)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(targetSize)));\n            const residual = targetSize / magnitude;\n            \n            let niceNumber;\n            if (residual > 5) niceNumber = 5 * magnitude;       // e.g. 80 -> 50\n            else if (residual > 2) niceNumber = 2 * magnitude;  // e.g. 40 -> 20\n            else niceNumber = 1 * magnitude;                    // e.g. 15 -> 10\n            \n            // Fallback for very small objects to ensure at least 1 unit\n            if (niceNumber === 0) niceNumber = 1;\n\n            // Calculate how many pixels this \"Nice Number\" takes up\n            // pixels = real_units / resolution\n            const barPixels = niceNumber / res;\n\n            return {\n                width: barPixels * this.zoom, // Adjust for the current UI zoom level\n                label: niceNumber\n            };\n        },\n        formatKeyName(key) {\n            return key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n        formatMeta(item) {\n            const display = {};\n            const keysToUse = this.keys.length ? this.keys : Object.keys(item);\n            \n            keysToUse.forEach(k => {\n                if (k === 'url' || k === 'id') return; \n                let val = item[k];\n                if (typeof val === 'number') val = val.toFixed(2);\n                \n                let unit = '';\n                const keyLower = k.toLowerCase();\n                if (keyLower.includes('area')) unit = ' px²';\n                else if (keyLower.includes('width') || keyLower.includes('height') || keyLower.includes('major') || keyLower.includes('minor') || keyLower.includes('perim') || keyLower.includes('diameter') || keyLower.includes('_x') || keyLower.includes('_y')) unit = ' px';\n                else if (keyLower.includes('hue') || keyLower.includes('angle')) unit = '°';\n                else if (keyLower.includes('saturation')) unit = '%';\n                \n                const cleanKey = k.replace('object_', '');\n                display[cleanKey] = val + unit;\n            });\n            return display;\n        },\n        downloadImage(url, id) {\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `object_${id}.jpg`;\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n        }\n    }\n}\n</script>\n\n<style scoped>\n.full-height-container {\n    height: 100%;\n    max-height: 100vh; \n}\n\n.gallery-scroll-area {\n    overflow-y: auto;\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end; \n    justify-content: center;\n}\n\n.gallery-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.gallery-card {\n    transition: transform 0.2s;\n    cursor: pointer;\n}\n.gallery-card:hover {\n    transform: translateY(-2px);\n    border-color: #2196F3 !important;\n}\n\n.img-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    margin: 0 auto;\n    border-bottom: 1px solid #eee;\n}\n\n/* Individual Scale Bar Styles */\n.mini-scale-bar {\n    position: absolute;\n    bottom: 2px;\n    right: 2px;\n    height: 3px;\n    background-color: white;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 2;\n    transition: width 0.3s ease; /* Smooth transition when zooming */\n}\n\n.mini-scale-text {\n    position: absolute;\n    bottom: 5px;\n    right: 2px;\n    font-size: 9px;\n    color: black;\n    text-shadow: 0px 0px 2px white;\n    font-weight: 700;\n    line-height: 1;\n    z-index: 2;\n}\n</style>",
+        "format": "<template>\n    <div class=\"pa-0 d-flex flex-column\">\n        <v-card class=\"mb-4 flex-grow-0\" elevation=\"1\">\n            <v-card-text class=\"py-2\">\n                <v-row align=\"center\" justify=\"space-between\">\n                    <v-col cols=\"12\" md=\"3\">\n                        <div class=\"d-flex align-center\">\n                            <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" class=\"mr-2\"></v-icon>\n                            <v-slider\n                                v-model=\"zoom\"\n                                min=\"0.1\"\n                                max=\"3\"\n                                step=\"0.1\"\n                                density=\"compact\"\n                                hide-details\n                                thumb-label\n                                color=\"primary\"\n                            ></v-slider>\n                            <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" class=\"ml-2\"></v-icon>\n                        </div>\n                        <div class=\"text-caption text-center text-grey\">Zoom x{{ zoom.toFixed(1) }}</div>\n                    </v-col>\n\n                    <v-col cols=\"12\" md=\"3\">\n                        <v-select\n                            v-model=\"sortBy\"\n                            :items=\"sortOptions\"\n                            label=\"Sort By\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                            prepend-inner-icon=\"mdi-sort\"\n                        ></v-select>\n                    </v-col>\n\n                    <v-col cols=\"6\" md=\"3\">\n                         <v-select\n                            v-model=\"itemsPerPage\"\n                            :items=\"[12, 24, 48, 100]\"\n                            label=\"Per Page\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                        ></v-select>\n                    </v-col>\n                    \n                    <v-col cols=\"6\" md=\"3\" class=\"text-right\">\n                        <v-chip size=\"small\" variant=\"flat\">\n                            Total: {{ filteredItems.length }}\n                        </v-chip>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n        </v-card>\n\n        <div class=\"gallery-scroll-area flex-grow-1\">\n            <div class=\"gallery-grid\">\n                <div \n                    v-for=\"(item, index) in paginatedItems\" \n                    :key=\"item.id\" \n                    class=\"gallery-item-wrapper\"\n                >\n                    <v-card \n                        class=\"gallery-card\" \n                        hover \n                        variant=\"outlined\" \n                        @click=\"openDetails(item)\"\n                        style=\"border-color: #e0e0e0;\"\n                    >\n                        <div \n                            class=\"img-container\"\n                            :style=\"{ \n                                width: (Math.max(item.object_width * zoom, 40)) + 'px', \n                                height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                                backgroundColor: '#f5f5f5' \n                            }\"\n                        >\n                            <img \n                                :src=\"item.url\" \n                                :style=\"{\n                                    width: (item.object_width * zoom) + 'px',\n                                    height: (item.object_height * zoom) + 'px',\n                                    objectFit: 'contain',\n                                    imageRendering: 'pixelated'\n                                }\"\n                            />\n                            \n                            <div \n                                class=\"mini-scale-bar\" \n                                :style=\"{ width: getScaleBar(item).width + 'px' }\"\n                            ></div>\n                            <div class=\"mini-scale-text\">\n                                {{ getScaleBar(item).label }}\n                            </div>\n                        </div>\n\n                        <v-divider></v-divider>\n                        <div class=\"d-flex justify-center pa-0 bg-white\">\n                            <v-btn \n                                icon=\"mdi-download\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"grey-darken-1\"\n                                @click.stop=\"downloadImage(item.url, item.id)\"\n                                title=\"Download\"\n                            ></v-btn>\n                             <v-btn \n                                icon=\"mdi-eye\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"primary\"\n                                @click.stop=\"openDetails(item)\"\n                                title=\"View Details\"\n                            ></v-btn>\n                        </div>\n                    </v-card>\n                </div>\n                \n                <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                    No objects found.\n                </div>\n            </div>\n        </div>\n\n        <div class=\"text-center pt-2 flex-grow-0\">\n            <v-pagination\n                v-model=\"page\"\n                :length=\"totalPages\"\n                :total-visible=\"7\"\n                density=\"compact\"\n                rounded=\"circle\"\n                color=\"primary\"\n            ></v-pagination>\n        </div>\n\n        <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n            <v-card v-if=\"selectedItem\">\n                <v-toolbar color=\"primary\" density=\"compact\">\n                    <v-toolbar-title class=\"text-subtitle-1\">Object Analysis</v-toolbar-title>\n                    <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\"></v-btn>\n                </v-toolbar>\n                <v-card-text class=\"pa-4\">\n                    <v-row>\n                        <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                            <img :src=\"selectedItem.url\" style=\"max-width: 100%; max-height: 300px; image-rendering: pixelated;\" />\n                            <div class=\"text-caption text-grey mt-1\">\n                                Resolution: {{ meta.resolution }} units/px\n                            </div>\n                        </v-col>\n                        <v-col cols=\"12\">\n                            <v-table density=\"compact\">\n                                <thead>\n                                    <tr><th class=\"text-left\">Metric</th><th class=\"text-right\">Value</th></tr>\n                                </thead>\n                                <tbody>\n                                    <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                        <td>{{ formatKeyName(key) }}</td>\n                                        <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                    </tr>\n                                </tbody>\n                            </v-table>\n                        </v-col>\n                    </v-row>\n                </v-card-text>\n            </v-card>\n        </v-dialog>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5, // Default zoom set to 0.5\n            \n            // Pagination & Sorting\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            \n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let result = [...this.rawData];\n            result.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return result;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            const end = start + this.itemsPerPage;\n            return this.filteredItems.slice(start, end);\n        }\n    },\n    watch: {\n        msg: {\n            handler(newValue) {\n                if (newValue && newValue.payload && newValue.payload.data) {\n                    this.rawData = newValue.payload.data;\n                    this.meta = newValue.payload.meta || { resolution: 1 };\n                    this.keys = newValue.payload.keys || [];\n                    this.page = 1;\n                }\n            },\n            deep: true\n        },\n        sortBy() { this.page = 1; }, \n        totalPages(newVal) {\n            if (this.page > newVal && newVal > 0) {\n                this.page = newVal;\n            }\n        }\n    },\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n        // --- NEW ADAPTIVE SCALE BAR LOGIC ---\n        getScaleBar(item) {\n            const res = this.meta.resolution || 1; // e.g., 0.75 um/px\n            const realWidth = item.object_width * res; // The real world width of the object\n            \n            // We want a bar that is roughly 1/3rd to 1/4th of the object's visual width\n            // This prevents a 100px bar on a 20px image.\n            const targetSize = realWidth / 3;\n\n            // Algorithm to find the nearest \"Nice Number\" (1, 2, 5, 10, 20, 50, 100...)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(targetSize)));\n            const residual = targetSize / magnitude;\n            \n            let niceNumber;\n            if (residual > 5) niceNumber = 5 * magnitude;       // e.g. 80 -> 50\n            else if (residual > 2) niceNumber = 2 * magnitude;  // e.g. 40 -> 20\n            else niceNumber = 1 * magnitude;                    // e.g. 15 -> 10\n            \n            // Fallback for very small objects to ensure at least 1 unit\n            if (niceNumber === 0) niceNumber = 1;\n\n            // Calculate how many pixels this \"Nice Number\" takes up\n            // pixels = real_units / resolution\n            const barPixels = niceNumber / res;\n\n            return {\n                width: barPixels * this.zoom, // Adjust for the current UI zoom level\n                label: niceNumber\n            };\n        },\n        formatKeyName(key) {\n            return key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n        formatMeta(item) {\n            const display = {};\n            const keysToUse = this.keys.length ? this.keys : Object.keys(item);\n            \n            keysToUse.forEach(k => {\n                if (k === 'url' || k === 'id') return; \n                let val = item[k];\n                if (typeof val === 'number') val = val.toFixed(2);\n                \n                let unit = '';\n                const keyLower = k.toLowerCase();\n                if (keyLower.includes('area')) unit = ' px²';\n                else if (keyLower.includes('width') || keyLower.includes('height') || keyLower.includes('major') || keyLower.includes('minor') || keyLower.includes('perim') || keyLower.includes('diameter') || keyLower.includes('_x') || keyLower.includes('_y')) unit = ' px';\n                else if (keyLower.includes('hue') || keyLower.includes('angle')) unit = '°';\n                else if (keyLower.includes('saturation')) unit = '%';\n                \n                const cleanKey = k.replace('object_', '');\n                display[cleanKey] = val + unit;\n            });\n            return display;\n        },\n        downloadImage(url, id) {\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `object_${id}.jpg`;\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n        }\n    }\n}\n</script>\n\n<style scoped>\n.full-height-container {\n    height: 100%;\n    max-height: 100vh; \n}\n\n.gallery-scroll-area {\n    overflow-y: auto;\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end; \n    justify-content: center;\n}\n\n.gallery-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.gallery-card {\n    transition: transform 0.2s;\n    cursor: pointer;\n}\n.gallery-card:hover {\n    transform: translateY(-2px);\n    border-color: #2196F3 !important;\n}\n\n.img-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    margin: 0 auto;\n    border-bottom: 1px solid #eee;\n}\n\n/* Individual Scale Bar Styles */\n.mini-scale-bar {\n    position: absolute;\n    bottom: 2px;\n    right: 2px;\n    height: 3px;\n    background-color: white;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 2;\n    transition: width 0.3s ease; /* Smooth transition when zooming */\n}\n\n.mini-scale-text {\n    position: absolute;\n    bottom: 5px;\n    right: 2px;\n    font-size: 9px;\n    color: black;\n    text-shadow: 0px 0px 2px white;\n    font-weight: 700;\n    line-height: 1;\n    z-index: 2;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4530,6 +4418,32 @@
             []
         ]
     },
+    {
+        "id": "92e2ed9f115c3991",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "fa6393a7d7e3b7d7",
+        "page": "",
+        "ui": "",
+        "name": "Selector",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n    <v-card>\n        <v-card-title>\n            <span class=\"text-h6\">Select Acquisition</span>\n            <v-spacer></v-spacer>\n            <v-text-field\n                v-model=\"search\"\n                append-inner-icon=\"mdi-magnify\"\n                label=\"Search...\"\n                single-line\n                hide-details\n                variant=\"outlined\"\n                density=\"compact\"\n                style=\"max-width: 300px;\"\n            ></v-text-field>\n        </v-card-title>\n\n        <v-data-table\n            :headers=\"headers\"\n            :items=\"items\"\n            :search=\"search\"\n            item-value=\"acquisition_id\"\n            density=\"compact\"\n            class=\"elevation-1\"\n        >\n            <template v-slot:item.image_acquired_count=\"{ item }\">\n                <v-chip size=\"small\" color=\"primary\" variant=\"tonal\">\n                    {{ item.image_acquired_count }}\n                </v-chip>\n            </template>\n\n            <template v-slot:item.links=\"{ item }\">\n                \n                <v-tooltip text=\"View Gallery\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-image-multiple\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"blue-darken-2\" \n                            :href=\"item.gallery\" \n                            target=\"_blank\"\n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n\n                <v-tooltip text=\"Download Zip\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-download\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"orange-darken-2\" \n                            :href=\"item.export\" \n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n            </template>\n\n            <template v-slot:item.actions=\"{ item }\">\n                        <v-btn \n                            icon=\"mdi-chart-scatter-plot-hexbin\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"primary\" \n                            @click=\"selectAcquisition(item)\"\n                        ></v-btn>\n            </template>\n        </v-data-table>\n    </v-card>\n</template>\n\n<script>\n    export default {\n        data() { \n            return {\n                search: '',\n                items: [],\n                headers: [\n                    { title: 'Project', key: 'project_name', sortable: true },\n                    { title: 'Sample ID', key: 'sample_id', sortable: true },\n                    { title: 'Acquisition ID', key: 'acquisition_id', sortable: true },\n                    { title: 'Images', key: 'image_acquired_count', sortable: true, align: 'end' },\n                    { title: 'Resources', key: 'links', sortable: false, align: 'center' }, // New Column\n                    { title: 'Select', key: 'actions', sortable: false, align: 'end' },\n                ]\n            }\n        },\n        watch: {\n            msg: {\n                handler(newValue) {\n                    if (newValue && Array.isArray(newValue.payload)) {\n                        this.items = newValue.payload;\n                    }\n                },\n                deep: true\n            }\n        },\n        mounted() {\n            if (this.msg && Array.isArray(this.msg.payload)) {\n                this.items = this.msg.payload;\n            }\n        },\n        methods: {\n            selectAcquisition(item) {\n                this.send({\n                    topic: \"selected_acquisition\",\n                    payload: item\n                });\n            }\n        }\n    }\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 560,
+        "y": 180,
+        "wires": [
+            [
+                "aefbf6f96248c398"
+            ]
+        ]
+    },
     {
         "id": "8e11bb014b9664be",
         "type": "ui-template",

From 7fc6eb41ad1ba13c28924f507873d6dcc035aae0 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sat, 29 Nov 2025 20:14:34 +0000
Subject: [PATCH 14/36] update

---
 node-red/projects/dashboard/flows.json | 336 +++++++++++++++++++++----
 1 file changed, 281 insertions(+), 55 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 3cb9f5f5e..601153df1 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -111,6 +111,14 @@
         "info": "",
         "env": []
     },
+    {
+        "id": "7c57cfad252356b9",
+        "type": "tab",
+        "label": "Test",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
     {
         "id": "4ed26b8b.253504",
         "type": "subflow",
@@ -678,15 +686,15 @@
         "colors": {
             "surface": "#ffffff",
             "primary": "#1976d2",
-            "bgPage": "#dedede",
+            "bgPage": "#eef3ff",
             "groupBg": "#ffffff",
-            "groupOutline": "#9c9c9c"
+            "groupOutline": "#c6d1dc"
         },
         "sizes": {
             "density": "default",
-            "pagePadding": "1rem",
-            "groupGap": "1rem",
-            "groupBorderRadius": "4px",
+            "pagePadding": "1.5rem",
+            "groupGap": "1.5rem",
+            "groupBorderRadius": "12px",
             "widgetGap": "0px"
         }
     },
@@ -721,7 +729,7 @@
                 "cols": "12"
             }
         ],
-        "order": 4,
+        "order": 5,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -855,7 +863,7 @@
                 "cols": "12"
             }
         ],
-        "order": 6,
+        "order": 7,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -905,7 +913,7 @@
                 "cols": "12"
             }
         ],
-        "order": 10,
+        "order": 11,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -955,7 +963,7 @@
                 "cols": "12"
             }
         ],
-        "order": 11,
+        "order": 12,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1005,7 +1013,7 @@
                 "cols": "12"
             }
         ],
-        "order": 12,
+        "order": 13,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1055,7 +1063,7 @@
                 "cols": "12"
             }
         ],
-        "order": 9,
+        "order": 10,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1105,7 +1113,7 @@
                 "cols": "12"
             }
         ],
-        "order": 8,
+        "order": 9,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1169,7 +1177,7 @@
                 "cols": "12"
             }
         ],
-        "order": 3,
+        "order": 4,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1233,7 +1241,7 @@
                 "cols": "12"
             }
         ],
-        "order": 5,
+        "order": 6,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1297,7 +1305,7 @@
                 "cols": "12"
             }
         ],
-        "order": 2,
+        "order": 3,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1431,7 +1439,7 @@
                 "cols": "12"
             }
         ],
-        "order": 7,
+        "order": 8,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1457,7 +1465,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 4,
+        "order": 6,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1523,7 +1531,7 @@
                 "cols": "12"
             }
         ],
-        "order": 1,
+        "order": 2,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1545,15 +1553,135 @@
     {
         "id": "3d290173d833fd04",
         "type": "ui-group",
-        "name": "V3",
+        "name": "Experiment",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 5,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "c5651e1a3e56f3f5",
+        "type": "ui-group",
+        "name": "Plots",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
         "order": 3,
         "showTitle": false,
         "className": "",
-        "visible": true,
-        "disabled": false,
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "0c1537ce71affc2b",
+        "type": "ui-group",
+        "name": "Gallery",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 4,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "e6c6c12fea382047",
+        "type": "ui-page",
+        "name": "Test",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/test",
+        "icon": "home",
+        "layout": "grid",
+        "theme": "f7770f0b818c3a67",
+        "breakpoints": [
+            {
+                "name": "Default",
+                "px": "0",
+                "cols": "3"
+            },
+            {
+                "name": "Tablet",
+                "px": "576",
+                "cols": "6"
+            },
+            {
+                "name": "Small Desktop",
+                "px": "768",
+                "cols": "6"
+            },
+            {
+                "name": "Desktop",
+                "px": "1024",
+                "cols": "12"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "8ab8d09f947dced4",
+        "type": "ui-group",
+        "name": "Group 34",
+        "page": "e6c6c12fea382047",
+        "width": "6",
+        "height": 1,
+        "order": 1,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "2567fe5c6e1ac69f",
+        "type": "ui-group",
+        "name": "Group 35",
+        "page": "e6c6c12fea382047",
+        "width": 6,
+        "height": 1,
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "ec5fe3d2a48f9c58",
+        "type": "ui-group",
+        "name": "Group 36",
+        "page": "e6c6c12fea382047",
+        "width": 6,
+        "height": 1,
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "fbdbc0b5e681eb9d",
+        "type": "ui-group",
+        "name": "Group 37",
+        "page": "e6c6c12fea382047",
+        "width": 6,
+        "height": 1,
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
         "groupType": "default"
     },
     {
@@ -1953,7 +2081,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n    .v-toolbar__content {\n    display:none;\n    }\n\n.v-main{\n  --v-layout-top: 0px !important;\n\n}       \n",
+        "format": ".v-toolbar__content {\n  display:none;\n}\n\n.v-main{\n  --v-layout-top: 0px !important;\n\n}       \n.v-card {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;\n}",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -1984,7 +2112,7 @@
         "templateScope": "widget:ui",
         "className": "",
         "x": 510,
-        "y": 440,
+        "y": 540,
         "wires": [
             []
         ]
@@ -2183,7 +2311,6 @@
         "wires": [
             [
                 "cd5cd3a0277b8dba",
-                "37fa78ad741d783c",
                 "04386808e694e97e"
             ]
         ]
@@ -2288,22 +2415,6 @@
             []
         ]
     },
-    {
-        "id": "37fa78ad741d783c",
-        "type": "debug",
-        "z": "1b667c6443413ced",
-        "name": "debug 7",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 420,
-        "y": 320,
-        "wires": []
-    },
     {
         "id": "04386808e694e97e",
         "type": "ui-template",
@@ -2342,7 +2453,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border: 1px solid #9c9c9c;\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
+        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3248,10 +3359,10 @@
         "ui": "",
         "name": "Streaming",
         "order": 1,
-        "width": "7",
-        "height": "18",
+        "width": "0",
+        "height": "0",
         "head": "",
-        "format": "  <iframe \n    src=\"/preview/node-red\" \n    >\n  </iframe>\n  <style>\n    iframe {\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      border: none;\n    }\n  </style>",
+        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3275,7 +3386,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- Acquisition ID -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field\n          v-model.number=\"acq_id\"\n          type=\"number\"\n          label=\"Acquisition ID\"\n          variant=\"outlined\"\n          placeholder=\"ex : 001\"\n          @input=\"sendUpdate()\" \n          prefix=\"A_\"\n          density=\"compact\"\n\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Number of Images -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          v-model.number=\"acq_nb_frame\"\n          :max=\"10000\"\n          :min=\"1\"\n          :step=\"1\"\n          label=\"Number of Images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          v-model.number=\"acq_nb_frame\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"img\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Interimage Volume -->\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          :max=\"100\"\n          :min=\"0\"\n          :step=\"1\"\n          label=\"Volume between images\"\n          hide-details\n          @update:model-value=\"autoCalculateVolumes\"\n        />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field\n          :model-value=\"acq_interframe_volume * 1000\"\n@update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"µL\"\n          class=\"aligned-input\"\n          @input=\"autoCalculateVolumes\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Volume Imaged -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_imaged_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly \n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Total Volume Displaced -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"fmt(acq_pumped_volume)\"\n          suffix=\"mL\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Comment -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea\n          v-model=\"acq_comment\"\n          label=\"Acquisition Comment\"\n          variant=\"outlined\"\n          rows=\"2\"\n          @input=\"sendUpdate()\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <!-- Progress Bar -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear\n          :model-value=\"progression\"\n          color=\"primary\"\n          height=\"24\"\n          rounded\n          striped\n          class=\"mt-2 mb-2\"\n        >\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <!-- Estimated Duration -->\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field\n          :model-value=\"formatDuration(duration_left)\"\n          variant=\"outlined\"\n          hide-details\n          readonly\n          class=\"aligned-input\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Status Alert -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert\n          v-if=\"acq_status_message\"\n          :type=\"statusType\"\n          :color=\"statusColor\"\n          border=\"start\"\n          variant=\"tonal\"\n          class=\"text-subtitle-1\"\n          prominent\n        >\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <!-- Start / Stop Toggle -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          v-model=\"acq_status\"\n          variant=\"outlined\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between mt-4\"\n          @update:model-value=\"handleAcqStatusChange\"\n        >\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Hint Dialog -->\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: \"\",\n      acq_interframe_volume: 0,\n      acq_imaged_volume: 0,\n      acq_pumped_volume: 0,\n      acq_comment: \"\",   // 💡 Champ sensible : protégé dans le watcher\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      calibration_pixel_size: 0,\n      calibration_sensor_width: 0,\n      calibration_sensor_height: 0,\n      acq_flowcell_thickness: 0,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        // --------------------------------\n        // ✅ PROTECTION du acq_comment\n        // → On NE l'écrase que si présent dans le payload\n        // --------------------------------\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        if (p.calibration_sensor_width !== undefined)\n          this.calibration_sensor_width = Number(p.calibration_sensor_width);\n\n        if (p.calibration_sensor_height !== undefined)\n          this.calibration_sensor_height = Number(p.calibration_sensor_height);\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        // PRIORITÉ Image X/Y = acquisition en cours\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      if (this.calibration_sensor_width > 0 && this.calibration_sensor_height > 0 &&\n          this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w = this.calibration_sensor_width * this.calibration_pixel_size;\n        const h = this.calibration_sensor_height * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w * h * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\nshowVolumeImagedHint() {\n  const area = this.sensor_width_um * this.sensor_height_um;\n\n  const html = `<div class=\"text-body-2\">\n    <p class=\"mb-2\">\n      <strong>Volume Imaged</strong> represents the total fluid volume optically captured.\n    </p>\n\n    <v-divider class=\"my-3\"></v-divider>\n\n    <ul class=\"ml-4\">\n      <li>\n        <strong>Sensor width:</strong>\n        ${Math.round(this.calibration_sensor_width)} px → ${Math.round(this.sensor_width_um)} µm\n      </li>\n      <li>\n        <strong>Sensor height:</strong>\n        ${Math.round(this.calibration_sensor_height)} px → ${Math.round(this.sensor_height_um)} µm\n      </li>\n      <li>\n        <strong>Flowcell thickness:</strong>\n        ${Math.round(this.acq_flowcell_thickness)} µm\n        <a href=\"hardware\" target=\"_blank\" class=\"text-primary ms-1\">\n          (Check or modify in hardware settings)\n        </a>\n      </li>\n    </ul>\n\n    <p class=\"mt-4 mb-2\">\n      <strong>Step-by-step calculation:</strong>\n    </p>\n\n    <ol class=\"ml-4\">\n      <li>\n        Area per image = width × height =\n        ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n        ${Math.round(area)} µm²\n      </li>\n      <li>\n        Volume per image = area × thickness =\n        ${Math.round(area)} × ${Math.round(this.acq_flowcell_thickness)} =\n        ${Math.round(area * this.acq_flowcell_thickness)} µm³\n      </li>\n      <li>\n        Convert µm³ → mL: divide by 1e12 →\n        ${this.fmt(this.frame_volume_ml)} mL per image\n      </li>\n      <li>\n        Total = ${this.acq_nb_frame} × ${this.fmt(this.frame_volume_ml)} mL =\n        <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n      </li>\n    </ol>\n  </div>`;\n\n  this.openHint(\"Volume Imaged\", html);\n},\n\nshowVolumeDisplacedHint() {\n  const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n  const html = `\n    <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n    <hr>\n    <ul>\n      <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n      <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n    </ul>\n    <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n    <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n  `;\n\n  this.openHint(\"Total Volume Displaced\", html);\n},\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    // --------------------------------\n    // ENVOI MAITRISÉ\n    // --------------------------------\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,        // 🔥 toujours envoyé\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          calibration_pixel_size: this.calibration_pixel_size,\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n.cursor-pointer { cursor: pointer; }\n</style>\n",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"0\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3526,7 +3637,8 @@
         "y": 200,
         "wires": [
             [
-                "46b98c54eb680c2e"
+                "46b98c54eb680c2e",
+                "b162f94dfd6bfdad"
             ]
         ]
     },
@@ -3625,10 +3737,28 @@
         "y": 280,
         "wires": [
             [
-                "46b98c54eb680c2e"
+                "46b98c54eb680c2e",
+                "b162f94dfd6bfdad"
             ]
         ]
     },
+    {
+        "id": "b162f94dfd6bfdad",
+        "type": "debug",
+        "z": "35d7387466dd0bc0",
+        "name": "debug 3",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1080,
+        "y": 140,
+        "wires": []
+    },
     {
         "id": "250979b4672d81b6",
         "type": "ui-event",
@@ -4278,10 +4408,10 @@
         "id": "bff00eae3f65f644",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "3d290173d833fd04",
+        "group": "c5651e1a3e56f3f5",
         "page": "",
         "ui": "",
-        "name": "Gemini 3 Pro v3",
+        "name": "Plots",
         "order": 1,
         "width": 0,
         "height": 0,
@@ -4292,7 +4422,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1260,
+        "x": 1230,
         "y": 320,
         "wires": [
             []
@@ -4306,7 +4436,7 @@
         "page": "",
         "ui": "",
         "name": "UMAP",
-        "order": 3,
+        "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
@@ -4353,7 +4483,7 @@
         "page": "",
         "ui": "",
         "name": "t-sne",
-        "order": 4,
+        "order": 2,
         "width": 0,
         "height": 0,
         "head": "",
@@ -4398,11 +4528,11 @@
         "id": "4244d2ed880cca66",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "3d290173d833fd04",
+        "group": "0c1537ce71affc2b",
         "page": "",
         "ui": "",
         "name": "Gallery",
-        "order": 2,
+        "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
@@ -4837,7 +4967,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-3\">\n              <h3 class=\"text-subtitle-1 ma-0\">1. LED Control</h3>\n              <v-chip color=\"primary\" variant=\"flat\" class=\"font-mono\">\n                {{ currentLedValue.toFixed(4) }}\n              </v-chip>\n            </div>\n\n            <v-row no-gutters class=\"align-center\">\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-minus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(-0.0001)\"\n                  class=\"mr-2\"\n                />\n              </v-col>\n\n              <v-col class=\"flex-grow-1\">\n                <v-slider\n                  v-model=\"currentLedValue\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.0001\"\n                  color=\"primary\"\n                  track-color=\"grey-lighten-2\"\n                  thumb-label\n                  hide-details\n                  @end=\"onSliderRelease\"\n                  class=\"align-center mt-0\"\n                ></v-slider>\n              </v-col>\n\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-plus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(+0.0001)\"\n                  class=\"ml-2\"\n                />\n              </v-col>\n            </v-row>\n            </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-2\">\n              <h3 class=\"text-subtitle-1 ma-0\">2. Measured Luminance</h3>\n            </div>\n\n            <div class=\"text-center mb-2\">\n              <div class=\"text-h3 font-weight-bold\">\n                {{ currentLuminance.toFixed(0) }}\n              </div>\n              <div class=\"text-caption text-grey\">\n                Measured from central region of preview\n              </div>\n            </div>\n\n            <v-progress-linear\n              :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n              color=\"primary\"\n              height=\"20\"\n              rounded\n            >\n              <template #default=\"{ value }\">\n                <strong style=\"color:white; text-shadow: 0 0 2px black;\">\n                  {{ Math.round(currentLuminance) }}\n                </strong>\n              </template>\n            </v-progress-linear>\n          </section>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      currentLedValue: 0.5,\n      currentLuminance: 0,\n      html2canvasReady: false,\n      captureInterval: null,\n    };\n  },\n\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.led_intensity !== undefined)\n          this.currentLedValue = Number(p.led_intensity);\n        if (p.value !== undefined)\n          this.currentLedValue = Number(p.value);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // --------------------------------------------\n    // LED CONTROL\n    // --------------------------------------------\n    adjustLed(step) {\n      let v = this.currentLedValue + step;\n      v = Math.max(0, Math.min(1, v));\n      this.currentLedValue = v;\n      this.onSliderRelease();\n    },\n\n    onSliderRelease() {\n      this.sendUpdate(\"light\", {\n        action: \"on\",\n        value: Number(this.currentLedValue.toFixed(5)),\n      });\n    },\n\n    sendUpdate(topic, payload) {\n      const msg = { topic, payload };\n      if (this.$emit) this.$emit(\"msg-input\", msg);\n      if (this.send) this.send(msg);\n    },\n\n    // --------------------------------------------\n    // AUTO CAPTURE CONTROL (Always ON)\n    // --------------------------------------------\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureLuminance();\n      }, 500); // update rate\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // --------------------------------------------\n    // PIXEL CAPTURE FROM IFRAME\n    // --------------------------------------------\n    async captureLuminance() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n\n        let sum = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          const r = pixelData[i];\n          const g = pixelData[i + 1];\n          const b = pixelData[i + 2];\n          sum += (r + g + b) / 3;\n          count++;\n        }\n\n        this.currentLuminance = count > 0 ? sum / count : 0;\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n.target-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sampling-overlay {\n  position: absolute;\n  width: calc(100% / 3); \n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red; \n  pointer-events: none; \n  z-index: 10;\n}\n\n.font-mono {\n  font-family: 'Roboto Mono', monospace;\n}\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-3\">\n              <h3 class=\"text-subtitle-1 ma-0\">1. LED Control</h3>\n              <v-chip color=\"primary\" variant=\"flat\" class=\"font-mono\">\n                {{ currentLedValue.toFixed(6) }}\n              </v-chip>\n            </div>\n\n            <v-row no-gutters class=\"align-center\">\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-minus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(-0.000001)\"\n                  class=\"mr-2\"\n                />\n              </v-col>\n\n              <v-col class=\"flex-grow-1\">\n                <v-slider\n                  v-model=\"currentLedValue\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.000001\"\n                  color=\"primary\"\n                  track-color=\"grey-lighten-2\"\n                  thumb-label\n                  hide-details\n                  @end=\"onSliderRelease\"\n                  class=\"align-center mt-0\"\n                ></v-slider>\n              </v-col>\n\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-plus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(+0.000001)\"\n                  class=\"ml-2\"\n                />\n              </v-col>\n            </v-row>\n            </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-2\">\n              <h3 class=\"text-subtitle-1 ma-0\">2. Measured Luminance</h3>\n            </div>\n\n            <div class=\"text-center mb-2\">\n              <div class=\"text-h3 font-weight-bold\">\n                {{ currentLuminance.toFixed(0) }}\n              </div>\n              <div class=\"text-caption text-grey\">\n                Measured from central region of preview\n              </div>\n            </div>\n\n            <v-progress-linear\n              :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n              color=\"primary\"\n              height=\"20\"\n              rounded\n            >\n              <template #default=\"{ value }\">\n                <strong style=\"color:white; text-shadow: 0 0 2px black;\">\n                  {{ Math.round(currentLuminance) }}\n                </strong>\n              </template>\n            </v-progress-linear>\n          </section>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      currentLedValue: 0.5,\n      currentLuminance: 0,\n      html2canvasReady: false,\n      captureInterval: null,\n    };\n  },\n\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.led_intensity !== undefined)\n          this.currentLedValue = Number(p.led_intensity);\n        if (p.value !== undefined)\n          this.currentLedValue = Number(p.value);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // --------------------------------------------\n    // LED CONTROL\n    // --------------------------------------------\n    adjustLed(step) {\n      let v = this.currentLedValue + step;\n      v = Math.max(0, Math.min(1, v));\n      this.currentLedValue = v;\n      this.onSliderRelease();\n    },\n\n    onSliderRelease() {\n      this.sendUpdate(\"light\", {\n        action: \"on\",\n        value: Number(this.currentLedValue.toFixed(5)),\n      });\n    },\n\n    sendUpdate(topic, payload) {\n      const msg = { topic, payload };\n      if (this.$emit) this.$emit(\"msg-input\", msg);\n      if (this.send) this.send(msg);\n    },\n\n    // --------------------------------------------\n    // AUTO CAPTURE CONTROL (Always ON)\n    // --------------------------------------------\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureLuminance();\n      }, 500); // update rate\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // --------------------------------------------\n    // PIXEL CAPTURE FROM IFRAME\n    // --------------------------------------------\n    async captureLuminance() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n\n        let sum = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          const r = pixelData[i];\n          const g = pixelData[i + 1];\n          const b = pixelData[i + 2];\n          sum += (r + g + b) / 3;\n          count++;\n        }\n\n        this.currentLuminance = count > 0 ? sum / count : 0;\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n.target-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sampling-overlay {\n  position: absolute;\n  width: calc(100% / 3); \n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red; \n  pointer-events: none; \n  z-index: 10;\n}\n\n.font-mono {\n  font-family: 'Roboto Mono', monospace;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -6082,5 +6212,101 @@
         "x": 470,
         "y": 1100,
         "wires": []
+    },
+    {
+        "id": "680d994257a7bd2c",
+        "type": "ui-template",
+        "z": "7c57cfad252356b9",
+        "group": "2567fe5c6e1ac69f",
+        "page": "",
+        "ui": "",
+        "name": "",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<div class=\"text-subtitle-1 mb-2\">LED Control</div>\n\n<v-btn-toggle\n  v-model=\"led_state\"\n  mandatory\n  divided\n  shaped\n  color=\"primary\"\n  variant=\"outlined\"\n  class=\"d-flex justify-space-between\"\n  @update:model-value=\"on_led_toggle\"\n>\n  <v-btn class=\"flex-grow-1\" value=\"off\">Off</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"on\">On</v-btn>\n</v-btn-toggle>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 380,
+        "y": 320,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "1ed9a730b3a79981",
+        "type": "ui-template",
+        "z": "7c57cfad252356b9",
+        "group": "ec5fe3d2a48f9c58",
+        "page": "",
+        "ui": "",
+        "name": "",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<!-- Label -->\n<div class=\"text-subtitle-1 mb-2\">Focus Distance</div>\n\n<!-- Distance slider + input -->\n<v-row align=\"center\">\n  <v-col :cols=\"isTablet ? 4 : 7\">\n    <v-slider\n      v-model.number=\"focus_distance\"\n      :min=\"minFocus\"\n      :max=\"maxFocus\"\n      :step=\"25\"\n      hide-details\n      :thumb-size=\"isTablet ? 12 : 20\"\n      :track-size=\"isTablet ? 2 : 4\"\n    />\n  </v-col>\n\n  <v-col :cols=\"isTablet ? 8 : 5\">\n    <v-text-field\n      v-model.number=\"focus_distance\"\n      type=\"number\"\n      variant=\"outlined\"\n      hide-details\n      suffix=\"μm\"\n      append-icon=\"mdi-information\"\n      @click:append=\"showInfo('focus_speed')\"\n    />\n  </v-col>\n</v-row>\n\n<!-- Presets -->\n<v-btn-toggle\n  class=\"d-flex justify-space-between\"\n  v-model=\"focus_distance_preset\"\n  divided\n  shaped\n  mandatory\n  variant=\"outlined\"\n  color=\"primary\"\n  @update:model-value=\"on_focus_distance_toggle\"\n>\n  <v-btn\n    v-for=\"value in focus_distance_presets\"\n    :key=\"'preset-'+value\"\n    :value=\"value\"\n    class=\"flex-grow-1\"\n  >\n    {{ value }}\n  </v-btn>\n</v-btn-toggle>\n\n<!-- Direction -->\n<v-btn-toggle\n  v-model=\"focus_direction\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between mt-4\"\n  @update:model-value=\"on_focus_direction_change\"\n>\n  <v-btn class=\"flex-grow-1\" value=\"UP\">Up</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"stop\">Stop</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"DOWN\">Down</v-btn>\n</v-btn-toggle>\n\n<!-- Info Dialog -->\n<v-dialog v-model=\"infoDialog\" max-width=\"500\">\n  <v-card>\n    <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n    <v-card-text>\n      <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n      <p><strong>Description:</strong> {{ infoContent.description }}</p>\n    </v-card-text>\n    <v-card-actions>\n      <v-spacer></v-spacer>\n      <v-btn color=\"primary\" text @click=\"infoDialog=false\">Close</v-btn>\n    </v-card-actions>\n  </v-card>\n</v-dialog>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 400,
+        "y": 360,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "cebd60d90d7e3995",
+        "type": "ui-template",
+        "z": "7c57cfad252356b9",
+        "group": "8ab8d09f947dced4",
+        "page": "",
+        "ui": "",
+        "name": "Streaming",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 370,
+        "y": 280,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "365c9ec67e3efa9a",
+        "type": "ui-template",
+        "z": "7c57cfad252356b9",
+        "group": "fbdbc0b5e681eb9d",
+        "page": "",
+        "ui": "",
+        "name": "",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<!-- FLOWRATE -->\n<div class=\"text-subtitle-1 mb-2\">Pump Flowrate</div>\n\n<v-row align=\"center\">\n  <v-col :cols=\"isTablet ? 4 : 7\">\n    <v-slider\n      v-model.number=\"pump_flowrate\"\n      :min=\"minFlow\"\n      :max=\"maxFlow\"\n      :step=\"0.2\"\n      hide-details\n    />\n  </v-col>\n\n  <v-col :cols=\"isTablet ? 8 : 5\">\n    <v-text-field\n      v-model.number=\"pump_flowrate\"\n      type=\"number\"\n      variant=\"outlined\"\n      hide-details\n      suffix=\"ml/min\"\n      append-icon=\"mdi-information\"\n      @click:append=\"showInfo('pump_flowrate')\"\n    />\n  </v-col>\n</v-row>\n\n<!-- Flowrate presets -->\n<v-btn-toggle\n  v-model=\"pump_flowrate_preset\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between\"\n  @update:model-value=\"onFlowrateToggle\"\n>\n  <v-btn\n    v-for=\"value in pump_flowrate_presets\"\n    :key=\"'fr-'+value\"\n    :value=\"value\"\n    class=\"flex-grow-1\"\n  >\n    {{ value }}\n  </v-btn>\n</v-btn-toggle>\n\n<!-- VOLUME -->\n<div class=\"text-subtitle-1 mt-4 mb-2\">Pump Volume</div>\n\n<v-row align=\"center\">\n  <v-col :cols=\"isTablet ? 4 : 7\">\n    <v-slider\n      v-model.number=\"pump_manual_volume\"\n      :min=\"minFlow\"\n      :max=\"maxFlow\"\n      :step=\"0.2\"\n      hide-details\n    />\n  </v-col>\n\n  <v-col :cols=\"isTablet ? 8 : 5\">\n    <v-text-field\n      v-model.number=\"pump_manual_volume\"\n      type=\"number\"\n      variant=\"outlined\"\n      hide-details\n      suffix=\"ml\"\n      append-icon=\"mdi-information\"\n      @click:append=\"showInfo('pump_manual_volume')\"\n    />\n  </v-col>\n</v-row>\n\n<!-- Volume presets -->\n<v-btn-toggle\n  v-model=\"pump_volume_preset\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between\"\n  @update:model-value=\"onVolumeToggle\"\n>\n  <v-btn\n    v-for=\"value in pump_volume_presets\"\n    :key=\"'vol-'+value\"\n    :value=\"value\"\n    class=\"flex-grow-1\"\n  >\n    {{ value }}\n  </v-btn>\n</v-btn-toggle>\n\n<!-- Direction -->\n<v-btn-toggle\n  v-model=\"pump_direction\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between mt-4\"\n  @update:model-value=\"on_pump_direction_change\"\n>\n  <v-btn class=\"flex-grow-1\" value=\"backward\">Backward</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"stop\">Stop</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"forward\">Forward</v-btn>\n</v-btn-toggle>\n\n<!-- Info Dialog -->\n<v-dialog v-model=\"infoDialog\" max-width=\"500\">\n  <v-card>\n    <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n    <v-card-text>\n      <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n      <p><strong>Description:</strong> {{ infoContent.description }}</p>\n    </v-card-text>\n    <v-card-actions>\n      <v-spacer></v-spacer>\n      <v-btn color=\"primary\" text @click=\"infoDialog=false\">Close</v-btn>\n    </v-card-actions>\n  </v-card>\n</v-dialog>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 420,
+        "y": 420,
+        "wires": [
+            []
+        ]
     }
 ]
\ No newline at end of file

From f6f22e5006557a05430473b0a90155488661b511 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sat, 29 Nov 2025 21:42:09 +0000
Subject: [PATCH 15/36] update

---
 node-red/projects/dashboard/flows.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 601153df1..13d4590b6 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -694,7 +694,7 @@
             "density": "default",
             "pagePadding": "1.5rem",
             "groupGap": "1.5rem",
-            "groupBorderRadius": "12px",
+            "groupBorderRadius": "8px",
             "widgetGap": "0px"
         }
     },
@@ -2195,7 +2195,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "  .v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n  }\n\n\n.v-row+.v-row {\n    margin-top: 0px !important;\n}\n\n.v-row {\n    margin: 0px !important;\n}\n\n\n    .v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n    }\n    .v-btn-group .v-btn, .v-field__overlay {\n    background: #eef3ff;\n    }\n    \n\n    .v-container{\n          padding: 0 !important;\n    }",
+        "format": ".v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n}\n\n\n.v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n}\n\n.v-btn-group .v-btn, .v-field__overlay {\n    background: #eef3ff;\n}\n    \n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2453,7 +2453,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n                <v-card class=\"pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n                    <div class=\"d-flex justify-space-between align-center mb-4\">\n                        <div class=\"text-h6\">Camera Preview</div>\n                    </div>\n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n                </v-card>\n\n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2497,7 +2497,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0 \">\n    <v-row align=\"center\" class=\"px-2 py-0\" no-gutters>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn to=\"home\" color=\"primary\" rounded=\"lg\" class=\"px-4\" variant=\"text\" size=\"large\">\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Preview\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" class=\"px-4\" variant=\"text\" size=\"large\">\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n\n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0 rounded-lg border\" \n      no-gutters variant=\"flat\" color=\"white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2697,7 +2697,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text><!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        LED Control\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n<v-card class=\"mb-6\" variant=\"outlined\">\n  <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6\" variant=\"outlined\">\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n<v-card \n          variant=\"flat\"\n          color=\"grey-darken-3\"> <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        LED Control\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2763,7 +2763,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Home -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Metadata -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2849,7 +2849,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Project Metadata Inputs -->\n  <v-row class=\"mt-2\">\n    <!-- Project Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_project\" label=\"Name of the project\" placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Sample ID -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n      v-model.number=\"sample_id\"\n      type=\"number\"\n      label=\"Sample ID\"\n      prefix=\"S_\"\n      placeholder=\"ex : S001\"\n      variant=\"outlined\"\n      density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Operator Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_operator\" label=\"Operator name\" placeholder=\"ex : Manu Prakash\" variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <!-- Sampling Gear Selector -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"sample_gear\" variant=\"outlined\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"sendUpdate\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n\n    </v-col>\n  </v-row>\n\n  <!-- Hint Popup -->\n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", // single topic\n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) {\n          // Supprime le préfixe éventuel avant d'afficher\n          this.sample_id = String(p.sample_id).replace(/^S[_-]?/, \"\");\n        }\n\n        if (p.sample_operator !== undefined)\n          this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send grouped payload for all fields under one topic.\n     */\n    sendUpdate(extra = {}) {\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
+        "format": "<template>\n  <!-- Project Metadata Inputs -->\n  <v-row class=\"mt-2\">\n    <!-- Project Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_project\" label=\"Name of the project\" placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Sample ID -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n      v-model.number=\"sample_id\"\n      type=\"number\"\n      label=\"Sample ID\"\n      prefix=\"S_\"\n      placeholder=\"ex : S001\"\n      variant=\"outlined\"\n      density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Operator Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_operator\" label=\"Operator name\" placeholder=\"ex : Manu Prakash\" variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <!-- Sampling Gear Selector -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"sample_gear\" variant=\"outlined\"  color=\"primary\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"sendUpdate\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n\n    </v-col>\n  </v-row>\n\n  <!-- Hint Popup -->\n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", // single topic\n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) {\n          // Supprime le préfixe éventuel avant d'afficher\n          this.sample_id = String(p.sample_id).replace(/^S[_-]?/, \"\");\n        }\n\n        if (p.sample_operator !== undefined)\n          this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send grouped payload for all fields under one topic.\n     */\n    sendUpdate(extra = {}) {\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2979,7 +2979,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"preview\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Preview\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"acquisition\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Acquisition\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 4e94cb249f9b190d5a48f31fb56c3602cdd3b4f1 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sat, 29 Nov 2025 22:06:16 +0000
Subject: [PATCH 16/36] update

---
 node-red/projects/dashboard/flows.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 13d4590b6..49cc2d927 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2497,7 +2497,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0 rounded-lg border\" \n      no-gutters variant=\"flat\" color=\"white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-6 py-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2697,7 +2697,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        LED Control\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Focus Distance\n    </div>\n\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n    <div class=\"text-subtitle-1 mb-2\">\n      Pump Flowrate\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n      <div class=\"text-subtitle-1 mb-2\">\n        Pump Volume\n      </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">LED Control</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      \n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2763,7 +2763,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-6 py-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 8e80405d06531c34582fe80c1aaf9456a2c70e5b Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sat, 29 Nov 2025 22:41:35 +0000
Subject: [PATCH 17/36] update

---
 node-red/projects/dashboard/flows.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 49cc2d927..5b5ee8c9d 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2105,7 +2105,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid>\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n          <v-col cols=\"12\" md=\"4\">\n\n            <v-row no-gutters class=\"align-center\">\n\n              <!-- Colonne logo : largeur fixe -->\n              <v-col class=\"d-flex justify-center pa-0 pr-4\" style=\"width: 40px; max-width: 40px;\">\n                <v-icon size=\"40\">\n                  <svg viewBox=\"0 0 52.916666 52.916666\" width=\"40\" height=\"40\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                      style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                      d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                      fill=\"#674ea7\" />\n                  </svg>\n                </v-icon>\n              </v-col>\n\n              <!-- Colonne texte : occupe tout l'espace restant -->\n              <v-col class=\"d-flex flex-column justify-center\" style=\"flex: 1;\">\n\n                <a href=\"https://www.planktoscope.org\" target=\"_blank\" class=\"text-decoration-none\" style=\"color: inherit;\">\n                  <h4 class=\"font-weight-bold mb-1\">PlanktoScope</h4>\n                </a>\n\n                <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n\n              </v-col>\n\n            </v-row>\n\n          </v-col>\n\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
+        "format": "<template>\n  <v-footer class=\"pa-6\">\n    <v-container fluid style=\"background:white\">\n      <!-- Top Section -->\n      <v-row justify=\"space-between\" align=\"start\">\n        <!-- Branding -->\n\n          <v-col cols=\"12\" md=\"4\">\n\n            <v-row no-gutters class=\"align-center\">\n\n              <!-- Colonne logo : largeur fixe -->\n              <v-col class=\"d-flex justify-center pa-0 pr-4\" style=\"width: 40px; max-width: 40px;\">\n                <v-icon size=\"40\">\n                  <svg viewBox=\"0 0 52.916666 52.916666\" width=\"40\" height=\"40\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                      style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                    <path\n                      d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                      fill=\"#674ea7\" />\n                  </svg>\n                </v-icon>\n              </v-col>\n\n              <!-- Colonne texte : occupe tout l'espace restant -->\n              <v-col class=\"d-flex flex-column justify-center\" style=\"flex: 1;\">\n\n                <a href=\"https://www.planktoscope.org\" target=\"_blank\" class=\"text-decoration-none\" style=\"color: inherit;\">\n                  <h4 class=\"font-weight-bold mb-1\">PlanktoScope</h4>\n                </a>\n\n                <p class=\"mb-0\">Open and Affordable Quantitative Imaging Platform.</p>\n\n              </v-col>\n\n            </v-row>\n\n          </v-col>\n\n\n        <!-- Action Links -->\n        <v-col cols=\"12\" md=\"8\" class=\"d-flex flex-wrap justify-end\">\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://www.planktoscope.org/join\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"primary\" class=\"mr-1\">mdi-slack</v-icon>\n            Ask the community\n          </v-chip>\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/issues/new?template=software-bug-report.md\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"red\" class=\"mr-1\">mdi-bug</v-icon>\n            Report a Bug\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/dashboard\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"black\" class=\"mr-1\">mdi-github</v-icon>\n            GitHub Repo\n          </v-chip>\n\n          <v-chip\n            size=\"small\"\n            color=\"grey-darken-3\"\n            href=\"https://github.com/PlanktoScope/PlanktoScope/graphs/contributors\"\n            target=\"_blank\"\n            class=\"mx-2 my-1\"\n          >\n            <v-icon color=\"green\" class=\"mr-1\">mdi-account-group</v-icon>\n            Contributors\n          </v-chip>\n        </v-col>\n      </v-row>\n\n      <v-divider class=\"my-2 opacity-50\"></v-divider>\n\n      <!-- Bottom Section -->\n      <v-row justify=\"space-between\" align=\"center\">\n        <v-col cols=\"12\" md=\"6\" class=\"text-caption\">\n\n          © {{ new Date().getFullYear() }} PlanktoScope GUI — made by\n          <a href=\"https://fairscope.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"text-decoration-none\" color=\"primary\">\n            FairScope\n          </a>\n        </v-col>\n\n      </v-row>\n    </v-container>\n  </v-footer>\n</template>\n\n<script>\nexport default {\n  name: 'AppFooter',\n}\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2453,7 +2453,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n                <v-card class=\"pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n                    <div class=\"d-flex justify-space-between align-center mb-4\">\n                        <div class=\"text-h6\">Camera Preview</div>\n                    </div>\n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n                </v-card>\n\n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n                <v-card class=\"pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n                    <div class=\"d-flex justify-space-between align-center mb-4\">\n                        <div class=\"text-h6\">Camera Preview</div>\n                    </div>\n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n                </v-card>\n\n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2497,7 +2497,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-6 py-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2697,7 +2697,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">LED Control</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      \n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2763,7 +2763,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-6 py-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 6ce95d2b1ba867950fbeac67f3f57841f2d5b8a5 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 11:47:58 +0000
Subject: [PATCH 18/36] update

---
 node-red/projects/dashboard/flows.json | 494 ++++++++++++++++---------
 1 file changed, 315 insertions(+), 179 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 5b5ee8c9d..e5c001aef 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -111,14 +111,6 @@
         "info": "",
         "env": []
     },
-    {
-        "id": "7c57cfad252356b9",
-        "type": "tab",
-        "label": "Test",
-        "disabled": false,
-        "info": "",
-        "env": []
-    },
     {
         "id": "4ed26b8b.253504",
         "type": "subflow",
@@ -729,7 +721,7 @@
                 "cols": "12"
             }
         ],
-        "order": 5,
+        "order": 4,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -863,7 +855,7 @@
                 "cols": "12"
             }
         ],
-        "order": 7,
+        "order": 6,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -913,7 +905,7 @@
                 "cols": "12"
             }
         ],
-        "order": 11,
+        "order": 10,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -963,7 +955,7 @@
                 "cols": "12"
             }
         ],
-        "order": 12,
+        "order": 11,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1013,7 +1005,7 @@
                 "cols": "12"
             }
         ],
-        "order": 13,
+        "order": 12,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1063,7 +1055,7 @@
                 "cols": "12"
             }
         ],
-        "order": 10,
+        "order": 9,
         "className": "",
         "visible": "false",
         "disabled": "false"
@@ -1113,7 +1105,7 @@
                 "cols": "12"
             }
         ],
-        "order": 9,
+        "order": 8,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1177,7 +1169,7 @@
                 "cols": "12"
             }
         ],
-        "order": 4,
+        "order": 3,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1241,7 +1233,7 @@
                 "cols": "12"
             }
         ],
-        "order": 6,
+        "order": 5,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1292,12 +1284,12 @@
             {
                 "name": "Tablet",
                 "px": "576",
-                "cols": "6"
+                "cols": "3"
             },
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "12"
             },
             {
                 "name": "Desktop",
@@ -1305,7 +1297,7 @@
                 "cols": "12"
             }
         ],
-        "order": 3,
+        "order": 2,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1439,7 +1431,7 @@
                 "cols": "12"
             }
         ],
-        "order": 8,
+        "order": 7,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1531,7 +1523,7 @@
                 "cols": "12"
             }
         ],
-        "order": 2,
+        "order": 1,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1593,92 +1585,112 @@
         "groupType": "default"
     },
     {
-        "id": "e6c6c12fea382047",
-        "type": "ui-page",
-        "name": "Test",
-        "ui": "e6ae26617c24c3ea",
-        "path": "/test",
-        "icon": "home",
-        "layout": "grid",
-        "theme": "f7770f0b818c3a67",
-        "breakpoints": [
-            {
-                "name": "Default",
-                "px": "0",
-                "cols": "3"
-            },
-            {
-                "name": "Tablet",
-                "px": "576",
-                "cols": "6"
-            },
-            {
-                "name": "Small Desktop",
-                "px": "768",
-                "cols": "6"
-            },
-            {
-                "name": "Desktop",
-                "px": "1024",
-                "cols": "12"
-            }
-        ],
-        "order": 1,
+        "id": "36931a9722892790",
+        "type": "ui-group",
+        "name": "Software Version",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 6,
+        "showTitle": false,
         "className": "",
         "visible": "true",
-        "disabled": "false"
+        "disabled": "false",
+        "groupType": "default"
     },
     {
-        "id": "8ab8d09f947dced4",
+        "id": "2aa235120084abe4",
         "type": "ui-group",
-        "name": "Group 34",
-        "page": "e6c6c12fea382047",
-        "width": "6",
+        "name": "Images Acquired",
+        "page": "632260133d581caa",
+        "width": "3",
         "height": 1,
-        "order": 1,
-        "showTitle": true,
+        "order": 7,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "df7c60bd8b265e48",
+        "type": "ui-group",
+        "name": "Objects Segmented",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 8,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
         "groupType": "default"
     },
     {
-        "id": "2567fe5c6e1ac69f",
+        "id": "dc304678d9a6b53b",
         "type": "ui-group",
-        "name": "Group 35",
-        "page": "e6c6c12fea382047",
-        "width": 6,
+        "name": "Storage",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 9,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "8a113b6c8e1eadb7",
+        "type": "ui-group",
+        "name": "Learn the basic",
+        "page": "632260133d581caa",
+        "width": "12",
+        "height": 1,
+        "order": 5,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "97e552a2d05b0800",
+        "type": "ui-group",
+        "name": "Lanch the preview",
+        "page": "632260133d581caa",
+        "width": "4",
         "height": 1,
         "order": 2,
-        "showTitle": true,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
         "groupType": "default"
     },
     {
-        "id": "ec5fe3d2a48f9c58",
+        "id": "82480e386ed6f8bd",
         "type": "ui-group",
-        "name": "Group 36",
-        "page": "e6c6c12fea382047",
-        "width": 6,
+        "name": "Explore your data",
+        "page": "632260133d581caa",
+        "width": "4",
         "height": 1,
         "order": 3,
-        "showTitle": true,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
         "groupType": "default"
     },
     {
-        "id": "fbdbc0b5e681eb9d",
+        "id": "9d3e8bdd535f0e0d",
         "type": "ui-group",
-        "name": "Group 37",
-        "page": "e6c6c12fea382047",
-        "width": 6,
+        "name": "Run the Calibration",
+        "page": "632260133d581caa",
+        "width": "4",
         "height": 1,
         "order": 4,
-        "showTitle": true,
+        "showTitle": false,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -2112,7 +2124,7 @@
         "templateScope": "widget:ui",
         "className": "",
         "x": 510,
-        "y": 540,
+        "y": 700,
         "wires": [
             []
         ]
@@ -2310,8 +2322,12 @@
         "y": 280,
         "wires": [
             [
-                "cd5cd3a0277b8dba",
-                "04386808e694e97e"
+                "04386808e694e97e",
+                "e68b686e94d78c9d",
+                "e431a9253416f9eb",
+                "b50dce0a86c2668c",
+                "07c889f3fa18b15b",
+                "ae546211d7d4413c"
             ]
         ]
     },
@@ -2383,14 +2399,14 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to your PlanktoScope\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n\n    <!-- MAIN ACTIONS -->\n    <v-row justify=\"center\" dense>\n      <!-- Launch the Preview -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"preview\"\n          variant=\"flat\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n          <span class=\"text-h6\">Launch the Preview</span>\n        </v-btn>\n      </v-col>\n\n      <!-- Explore Your Data -->\n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"visualization\"\n          target=\"_blank\"\n          variant=\"outlined\"\n          color=\"primary\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"text-h6\">Explore your data</span>\n        </v-btn>\n      </v-col>\n      \n      <v-col cols=\"12\" md=\"4\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"calibration\"\n          variant=\"flat\"\n          color=\"grey-darken-3\"\n          size=\"large\"\n          stacked\n          class=\"text-none w-100 py-6 flex-column\"\n        >\n          <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n          <span class=\"text-h6\">Run the Calibration</span>\n        </v-btn>\n      </v-col>\n    </v-row>\n\n    <!-- SECONDARY ACTIONS -->\n    <v-row justify=\"center\" dense class=\"py-6\">\n      <!-- Learn the Basics -->\n      <v-col cols=\"12\" md=\"12\" class=\"d-flex pa-3\">\n        <v-btn\n          href=\"/ps/docs/operation/protocol-v4.pdf\"\n          target=\"_blank\"\n          color=\"primary\"\n          variant=\"tonal\"\n          size=\"large\"\n          class=\"text-none w-100 text-subtitle-1 py-3\"\n        >\n          <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n          Learn the Basics\n        </v-btn>\n      </v-col>\n\n    </v-row>\n\n<v-divider ></v-divider>\n    <!-- STAT CARDS -->\n    <v-row class=\"py-6\">\n\n      <!-- Software Version -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Software Version</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.software_version }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Images acquired -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-image-multiple-outline</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Images Acquired</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.image_acquired }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Objects segmented -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n          <div class=\"d-flex align-center\">\n            <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-crop</v-icon>\n            <span class=\"text-subtitle-3 font-weight-medium\">Objects Segmented</span>\n          </div>\n          <div class=\"text-subtitle-3 font-weight-bold\">\n            {{ msg.payload.object_segmented }}\n          </div>\n        </v-card>\n      </v-col>\n\n      <!-- Storage (single-line layout: icon → progress bar → value) -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card variant=\"outlined\" class=\"pa-4 d-flex align-center justify-space-between\">\n\n          <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n          <span class=\"text-subtitle-3 font-weight-medium\">Storage</span>\n\n          <v-progress-linear\n            :model-value=\"msg.payload.storage_percent_used\"\n            height=\"12\"\n            rounded\n            class=\"flex-grow-1 mx-3\"\n            :color=\"\n              msg.payload.storage_percent_used > 90\n                ? 'error'\n                : msg.payload.storage_percent_used > 70\n                ? 'warning'\n                : 'success'\n            \"\n          ></v-progress-linear>\n\n          <div class=\"text-subtitle-3 font-weight-bold d-flex justify-end\" style=\"min-width: 48px;\">\n            {{ msg.payload.storage_percent_used }}%\n          </div>\n\n        </v-card>\n\n      </v-col>\n    </v-row>\n\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid>\n    <!-- HEADER -->\n    <v-row justify=\"center\" dense class=\"py-8\">\n              <svg viewBox=\"0 0 52.916666 52.916666\" width=\"150\" height=\"150\" xmlns=\"http://www.w3.org/2000/svg\">\n                <ellipse cx=\"26.222767\" cy=\"27.404638\" rx=\"23.859026\" ry=\"23.268091\"\n                  style=\"fill:#ffffff;stroke:#adadad;stroke-width:0.255058;stroke-dasharray:0.255058,0.510117\" />\n                <path\n                  d=\"M 25.235172,52.886866 C 18.788363,52.603542 12.618867,49.920327 7.9862278,45.385011 5.7884865,43.233443 4.126863,40.96322 2.7783721,38.269687 -0.69951435,31.3228 -0.92413866,23.055533 2.1714608,15.932226 4.2927656,11.050887 7.8775566,6.8759872 12.379084,4.0442925 16.268483,1.5976551 20.749011,0.2041208 25.311296,0.02211622 32.912028,-0.28110313 40.068898,2.5428839 45.330004,7.921181 c 1.394211,1.4252635 2.203509,2.427764 3.254874,4.031906 3.067465,4.680258 4.533514,10.016501 4.301182,15.65584 -0.24014,5.828764 -2.396645,11.365031 -6.195763,15.90599 -0.609303,0.728286 -2.000689,2.145321 -2.779528,2.830762 -3.92791,3.456901 -8.899105,5.69775 -14.107867,6.359358 -0.842019,0.106946 -1.343409,0.141442 -3.0145,0.207349 -0.281856,0.0112 -0.980811,-3.6e-4 -1.55323,-0.02554 z m -8.730149,-9.822631 c 0.109695,-0.04173 0.154655,-0.103087 0.154655,-0.211139 0,-0.298316 -0.854772,-0.812893 -2.806491,-1.689537 C 11.53131,40.120648 10.3078,39.367878 9.3006669,38.362582 7.0517974,36.117829 5.8601816,33.216131 6.2543214,30.944446 6.3887402,30.169737 6.5434509,29.871103 6.901246,29.695768 c 0.4841667,-0.23727 0.995125,-0.338007 1.7097068,-0.337072 0.9709729,0.0014 1.5470122,0.171079 2.0152092,0.594067 0.283418,0.256043 0.560221,0.375098 0.989405,0.425544 0.510426,0.05997 0.82424,-0.0134 1.252715,-0.292743 1.01939,-0.664717 5.540491,-2.409825 6.233136,-2.405942 0.165803,6.88e-4 0.423543,-0.03619 0.57276,-0.08247 0.631382,-0.195875 2.844992,-0.422152 4.954857,-0.506488 1.239664,-0.04953 3.354525,-0.02172 8.097936,0.106687 1.127421,0.03052 3.605179,0.06097 5.506133,0.06763 1.900954,0.0064 3.745833,0.03853 4.099724,0.07075 0.353899,0.03222 1.498055,0.07329 2.542584,0.09127 1.898992,0.03272 2.911755,-0.0184 3.397943,-0.171558 0.573761,-0.180697 0.764411,-0.672624 0.353353,-0.911762 -0.248676,-0.144681 -1.481535,-0.21537 -3.82899,-0.219564 -2.488027,-0.0042 -5.224909,-0.131603 -11.075963,-0.514612 -3.222986,-0.210967 -5.937562,-0.378602 -8.802349,-0.543559 -3.976844,-0.228997 -4.985076,-0.481342 -5.999512,-1.501557 -0.167847,-0.168804 -0.600666,-0.673184 -0.961825,-1.120835 -0.92504,-1.146598 -2.832132,-3.036395 -3.740139,-3.706229 -0.397915,-0.293538 -0.804872,-0.61865 -0.904352,-0.722468 -0.09948,-0.103824 -0.333374,-0.262472 -0.519766,-0.352557 -1.28055,-0.618905 -1.618906,-1.875722 -0.853693,-3.170983 0.461938,-0.781901 1.523215,-1.660846 2.748294,-2.276117 1.13425,-0.569655 2.255356,-0.975853 4.382863,-1.587996 2.089099,-0.60109 2.927546,-0.9311702 3.077629,-1.2115953 0.08554,-0.1598279 0.0077,-0.4070348 -0.163425,-0.5191737 -0.239138,-0.1566868 -0.614968,-0.1939369 -1.316519,-0.130482 -0.852279,0.077088 -1.490305,0.2163293 -3.131411,0.6833976 -1.418582,0.403736 -1.911513,0.5888334 -3.108608,1.1672844 -2.333261,1.127465 -3.264923,1.941987 -4.698402,4.107681 -0.4611363,0.696689 -0.8715706,1.36878 -0.9120808,1.49354 -0.1059747,0.32644 -0.6208078,1.341941 -1.5210083,3.000179 -1.9466021,3.585797 -2.6241442,5.326854 -3.0597521,7.862531 -0.066004,0.384261 -0.1606715,0.902139 -0.2103378,1.150829 -0.04968,0.248696 -0.1069963,0.926964 -0.1273797,1.507254 -0.081086,2.308272 0.2512527,4.04802 1.0944559,5.729316 1.2878816,2.567957 3.2322337,4.503921 5.8597418,5.834441 2.243901,1.136279 5.019803,2.001753 5.650844,1.761829 z\"\n                  fill=\"#076eca\" />\n              </svg>\n    </v-row>\n    <v-row justify=\"center\" dense>\n      <v-empty-state \n      headline=\"Welcome to your PlanktoScope\" \n      title=\"What would you like to do today?\"\n    />\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
         "x": 510,
-        "y": 180,
+        "y": 280,
         "wires": [
             []
         ]
@@ -2433,14 +2449,230 @@
         "resendOnRefresh": true,
         "templateScope": "widget:ui",
         "className": "",
-        "x": 820,
-        "y": 240,
+        "x": 800,
+        "y": 180,
         "wires": [
             [
                 "1db1c2e3e19e85ff"
             ]
         ]
     },
+    {
+        "id": "e68b686e94d78c9d",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "36931a9722892790",
+        "page": "",
+        "ui": "",
+        "name": "Software Version",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">Software Version</span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold\">\n      {{ msg.payload.software_version }}\n    </v-col>\n  </v-row>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 480,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "e431a9253416f9eb",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "2aa235120084abe4",
+        "page": "",
+        "ui": "",
+        "name": "Images Acquired",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-image-multiple-outline\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Images Acquired\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold\">\n      {{ msg.payload.image_acquired }}\n    </v-col>\n  </v-row>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 520,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "b50dce0a86c2668c",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "df7c60bd8b265e48",
+        "page": "",
+        "ui": "",
+        "name": "Objects Segmented",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-crop\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Objects Segmented\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold\">\n      {{ msg.payload.object_segmented }}\n    </v-col>\n  </v-row>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 560,
+        "y": 560,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "07c889f3fa18b15b",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "dc304678d9a6b53b",
+        "page": "",
+        "ui": "",
+        "name": "Storage",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <!-- Icon + Label -->\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-sd</v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">Storage</span>\n    </v-col>\n\n    <!-- Progress bar -->\n    <v-col>\n      <v-progress-linear :model-value=\"msg.payload.storage_percent_used\" height=\"12\" rounded class=\"mx-3\" :color=\"\n          msg.payload.storage_percent_used > 90\n            ? 'error'\n            : msg.payload.storage_percent_used > 70\n            ? 'warning'\n            : 'success'\n        \" />\n    </v-col>\n\n    <!-- Percentage -->\n    <v-col cols=\"auto\" class=\"text-subtitle-2 font-weight-bold text-right\" style=\"min-width: 48px;\">\n      {{ msg.payload.storage_percent_used }}%\n    </v-col>\n  </v-row>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 520,
+        "y": 600,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ae546211d7d4413c",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "8a113b6c8e1eadb7",
+        "page": "",
+        "ui": "",
+        "name": "Learn the basic",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n      <v-btn\n        href=\"/ps/docs/operation/protocol-v4.pdf\"\n        target=\"_blank\"\n        color=\"primary\"\n        variant=\"tonal\"\n        size=\"large\"\n        class=\"text-none w-100 text-subtitle-1 py-3\"\n      >\n        <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n        Learn the Basics\n      </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 540,
+        "y": 440,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "6440d3bb6107d79d",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "97e552a2d05b0800",
+        "page": "",
+        "ui": "",
+        "name": "Lanch the preview",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-btn\n      href=\"preview\"\n      variant=\"flat\"\n      color=\"primary\"\n      size=\"large\"\n      stacked\n      class=\"text-none w-100 py-6 flex-column\"\n    >\n      <v-icon size=\"50\" class=\"mb-2\">mdi-eye</v-icon>\n      <span class=\"text-h6\">Launch the Preview</span>\n    </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 320,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "19ee8d1758dd9c06",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "82480e386ed6f8bd",
+        "page": "",
+        "ui": "",
+        "name": "Explore your data",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-btn\n      href=\"visualization\"\n      target=\"_blank\"\n      variant=\"outlined\"\n      color=\"primary\"\n      size=\"large\"\n      stacked\n      class=\"text-none w-100 py-6 flex-column\"\n    >\n      <v-icon size=\"50\" class=\"mb-2\">mdi-chart-scatter-plot-hexbin</v-icon>\n      <span class=\"text-h6\">Explore your data</span>\n    </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 360,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "0152d19f6346a058",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "9d3e8bdd535f0e0d",
+        "page": "",
+        "ui": "",
+        "name": "Run the Calibration",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-btn\n      href=\"calibration\"\n      variant=\"flat\"\n      color=\"grey-darken-3\"\n      size=\"large\"\n      stacked\n      class=\"text-none w-100 py-6 flex-column\"\n    >\n      <v-icon size=\"50\" class=\"mb-2\">mdi-tune</v-icon>\n      <span class=\"text-h6\">Run the Calibration</span>\n    </v-btn>\n</template>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 400,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "683fec6ef9b340f7",
+        "type": "ui-template",
+        "z": "1b667c6443413ced",
+        "group": "",
+        "page": "632260133d581caa",
+        "ui": "",
+        "name": "CSS (All Pages)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": ".v-card-text{\n    padding : 0 !important;\n}\n\n\n    \n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 1300,
+        "y": 80,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "a57a165cd0ce511b",
         "type": "ui-template",
@@ -2697,7 +2929,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n<v-divider class=\"py-2\"></v-divider>\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -6212,101 +6444,5 @@
         "x": 470,
         "y": 1100,
         "wires": []
-    },
-    {
-        "id": "680d994257a7bd2c",
-        "type": "ui-template",
-        "z": "7c57cfad252356b9",
-        "group": "2567fe5c6e1ac69f",
-        "page": "",
-        "ui": "",
-        "name": "",
-        "order": 1,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "<div class=\"text-subtitle-1 mb-2\">LED Control</div>\n\n<v-btn-toggle\n  v-model=\"led_state\"\n  mandatory\n  divided\n  shaped\n  color=\"primary\"\n  variant=\"outlined\"\n  class=\"d-flex justify-space-between\"\n  @update:model-value=\"on_led_toggle\"\n>\n  <v-btn class=\"flex-grow-1\" value=\"off\">Off</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"on\">On</v-btn>\n</v-btn-toggle>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 380,
-        "y": 320,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "1ed9a730b3a79981",
-        "type": "ui-template",
-        "z": "7c57cfad252356b9",
-        "group": "ec5fe3d2a48f9c58",
-        "page": "",
-        "ui": "",
-        "name": "",
-        "order": 1,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "<!-- Label -->\n<div class=\"text-subtitle-1 mb-2\">Focus Distance</div>\n\n<!-- Distance slider + input -->\n<v-row align=\"center\">\n  <v-col :cols=\"isTablet ? 4 : 7\">\n    <v-slider\n      v-model.number=\"focus_distance\"\n      :min=\"minFocus\"\n      :max=\"maxFocus\"\n      :step=\"25\"\n      hide-details\n      :thumb-size=\"isTablet ? 12 : 20\"\n      :track-size=\"isTablet ? 2 : 4\"\n    />\n  </v-col>\n\n  <v-col :cols=\"isTablet ? 8 : 5\">\n    <v-text-field\n      v-model.number=\"focus_distance\"\n      type=\"number\"\n      variant=\"outlined\"\n      hide-details\n      suffix=\"μm\"\n      append-icon=\"mdi-information\"\n      @click:append=\"showInfo('focus_speed')\"\n    />\n  </v-col>\n</v-row>\n\n<!-- Presets -->\n<v-btn-toggle\n  class=\"d-flex justify-space-between\"\n  v-model=\"focus_distance_preset\"\n  divided\n  shaped\n  mandatory\n  variant=\"outlined\"\n  color=\"primary\"\n  @update:model-value=\"on_focus_distance_toggle\"\n>\n  <v-btn\n    v-for=\"value in focus_distance_presets\"\n    :key=\"'preset-'+value\"\n    :value=\"value\"\n    class=\"flex-grow-1\"\n  >\n    {{ value }}\n  </v-btn>\n</v-btn-toggle>\n\n<!-- Direction -->\n<v-btn-toggle\n  v-model=\"focus_direction\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between mt-4\"\n  @update:model-value=\"on_focus_direction_change\"\n>\n  <v-btn class=\"flex-grow-1\" value=\"UP\">Up</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"stop\">Stop</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"DOWN\">Down</v-btn>\n</v-btn-toggle>\n\n<!-- Info Dialog -->\n<v-dialog v-model=\"infoDialog\" max-width=\"500\">\n  <v-card>\n    <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n    <v-card-text>\n      <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n      <p><strong>Description:</strong> {{ infoContent.description }}</p>\n    </v-card-text>\n    <v-card-actions>\n      <v-spacer></v-spacer>\n      <v-btn color=\"primary\" text @click=\"infoDialog=false\">Close</v-btn>\n    </v-card-actions>\n  </v-card>\n</v-dialog>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 400,
-        "y": 360,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "cebd60d90d7e3995",
-        "type": "ui-template",
-        "z": "7c57cfad252356b9",
-        "group": "8ab8d09f947dced4",
-        "page": "",
-        "ui": "",
-        "name": "Streaming",
-        "order": 1,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 370,
-        "y": 280,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "365c9ec67e3efa9a",
-        "type": "ui-template",
-        "z": "7c57cfad252356b9",
-        "group": "fbdbc0b5e681eb9d",
-        "page": "",
-        "ui": "",
-        "name": "",
-        "order": 1,
-        "width": "0",
-        "height": "0",
-        "head": "",
-        "format": "<!-- FLOWRATE -->\n<div class=\"text-subtitle-1 mb-2\">Pump Flowrate</div>\n\n<v-row align=\"center\">\n  <v-col :cols=\"isTablet ? 4 : 7\">\n    <v-slider\n      v-model.number=\"pump_flowrate\"\n      :min=\"minFlow\"\n      :max=\"maxFlow\"\n      :step=\"0.2\"\n      hide-details\n    />\n  </v-col>\n\n  <v-col :cols=\"isTablet ? 8 : 5\">\n    <v-text-field\n      v-model.number=\"pump_flowrate\"\n      type=\"number\"\n      variant=\"outlined\"\n      hide-details\n      suffix=\"ml/min\"\n      append-icon=\"mdi-information\"\n      @click:append=\"showInfo('pump_flowrate')\"\n    />\n  </v-col>\n</v-row>\n\n<!-- Flowrate presets -->\n<v-btn-toggle\n  v-model=\"pump_flowrate_preset\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between\"\n  @update:model-value=\"onFlowrateToggle\"\n>\n  <v-btn\n    v-for=\"value in pump_flowrate_presets\"\n    :key=\"'fr-'+value\"\n    :value=\"value\"\n    class=\"flex-grow-1\"\n  >\n    {{ value }}\n  </v-btn>\n</v-btn-toggle>\n\n<!-- VOLUME -->\n<div class=\"text-subtitle-1 mt-4 mb-2\">Pump Volume</div>\n\n<v-row align=\"center\">\n  <v-col :cols=\"isTablet ? 4 : 7\">\n    <v-slider\n      v-model.number=\"pump_manual_volume\"\n      :min=\"minFlow\"\n      :max=\"maxFlow\"\n      :step=\"0.2\"\n      hide-details\n    />\n  </v-col>\n\n  <v-col :cols=\"isTablet ? 8 : 5\">\n    <v-text-field\n      v-model.number=\"pump_manual_volume\"\n      type=\"number\"\n      variant=\"outlined\"\n      hide-details\n      suffix=\"ml\"\n      append-icon=\"mdi-information\"\n      @click:append=\"showInfo('pump_manual_volume')\"\n    />\n  </v-col>\n</v-row>\n\n<!-- Volume presets -->\n<v-btn-toggle\n  v-model=\"pump_volume_preset\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between\"\n  @update:model-value=\"onVolumeToggle\"\n>\n  <v-btn\n    v-for=\"value in pump_volume_presets\"\n    :key=\"'vol-'+value\"\n    :value=\"value\"\n    class=\"flex-grow-1\"\n  >\n    {{ value }}\n  </v-btn>\n</v-btn-toggle>\n\n<!-- Direction -->\n<v-btn-toggle\n  v-model=\"pump_direction\"\n  mandatory\n  divided\n  shaped\n  variant=\"outlined\"\n  color=\"primary\"\n  class=\"d-flex justify-space-between mt-4\"\n  @update:model-value=\"on_pump_direction_change\"\n>\n  <v-btn class=\"flex-grow-1\" value=\"backward\">Backward</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"stop\">Stop</v-btn>\n  <v-btn class=\"flex-grow-1\" value=\"forward\">Forward</v-btn>\n</v-btn-toggle>\n\n<!-- Info Dialog -->\n<v-dialog v-model=\"infoDialog\" max-width=\"500\">\n  <v-card>\n    <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n    <v-card-text>\n      <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n      <p><strong>Description:</strong> {{ infoContent.description }}</p>\n    </v-card-text>\n    <v-card-actions>\n      <v-spacer></v-spacer>\n      <v-btn color=\"primary\" text @click=\"infoDialog=false\">Close</v-btn>\n    </v-card-actions>\n  </v-card>\n</v-dialog>\n",
-        "storeOutMessages": true,
-        "passthru": true,
-        "resendOnRefresh": true,
-        "templateScope": "local",
-        "className": "",
-        "x": 420,
-        "y": 420,
-        "wires": [
-            []
-        ]
     }
 ]
\ No newline at end of file

From 055274ce6aa69b981a19d38e724e47e18fb57d9d Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 11:52:42 +0000
Subject: [PATCH 19/36] update

---
 node-red/projects/dashboard/flows.json | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index e5c001aef..fcce4739d 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2326,8 +2326,7 @@
                 "e68b686e94d78c9d",
                 "e431a9253416f9eb",
                 "b50dce0a86c2668c",
-                "07c889f3fa18b15b",
-                "ae546211d7d4413c"
+                "07c889f3fa18b15b"
             ]
         ]
     },
@@ -2565,7 +2564,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n      <v-btn\n        href=\"/ps/docs/operation/protocol-v4.pdf\"\n        target=\"_blank\"\n        color=\"primary\"\n        variant=\"tonal\"\n        size=\"large\"\n        class=\"text-none w-100 text-subtitle-1 py-3\"\n      >\n        <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n        Learn the Basics\n      </v-btn>\n</template>\n",
+        "format": "<template>\n      <v-btn\n        href=\"/ps/docs/operation/protocol-v4.pdf\"\n        target=\"_blank\"\n        color=\"grey-darken-3\"\n        variant=\"tonal\"\n        size=\"large\"\n        class=\"text-none w-100 text-subtitle-1 py-3\"\n      >\n        <v-icon start size=\"30\">mdi-book-open-variant</v-icon>\n        Learn the Basics\n      </v-btn>\n</template>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2685,7 +2684,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n                <v-card class=\"pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n                    <div class=\"d-flex justify-space-between align-center mb-4\">\n                        <div class=\"text-h6\">Camera Preview</div>\n                    </div>\n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n                </v-card>\n\n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2929,7 +2928,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n<v-divider class=\"py-2\"></v-divider>\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n<v-divider class=\"py-2\"></v-divider>\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3594,7 +3593,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<div class=\"iframe-container\">\n  <iframe src=\"/preview/node-red\"></iframe>\n</div>\n\n<style>\n  /* 1. STYLES FOR THE CONTAINER (WHERE YOUR BORDER IS APPLIED) */\n  .iframe-container {\n    /* YOUR REQUESTED STYLES: Border and border-radius */\n    border-radius: 4px; \n    \n    /* Responsive Setup */\n    position: relative;\n    width: 100%;\n    /* Set a proportion, e.g., 4:3 (75% height relative to width) */\n    padding-top: 75%; \n    overflow: hidden; \n  }\n    \n  /* 2. STYLES FOR THE IFRAME ITSELF */\n  .iframe-container iframe {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    \n    /* Ensure the iframe itself has no border or margin, as the container provides the frame */\n    border: none;\n    margin: 0;\n  }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 951abb2b97f428476b7730d25b20157cf33528f5 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 11:53:31 +0000
Subject: [PATCH 20/36] update

---
 node-red/projects/dashboard/flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index fcce4739d..bbd6886de 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2728,7 +2728,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 py-0 px-2\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2994,7 +2994,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0  py-0 px-2\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 06ef9b510ef75c590227fdb9f3dc9d66a7c8d43e Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 19:06:40 +0000
Subject: [PATCH 21/36] update

---
 node-red/projects/dashboard/flows.json | 870 ++++++++++++++++++++-----
 1 file changed, 712 insertions(+), 158 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index bbd6886de..013285c41 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -863,12 +863,12 @@
     {
         "id": "bfd4acb7b243514f",
         "type": "ui-group",
-        "name": "Table",
+        "name": "List of Acquisitions",
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
         "order": 3,
-        "showTitle": false,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1105,7 +1105,7 @@
                 "cols": "12"
             }
         ],
-        "order": 8,
+        "order": 7,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1431,7 +1431,7 @@
                 "cols": "12"
             }
         ],
-        "order": 7,
+        "order": 8,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1457,7 +1457,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 6,
+        "order": 15,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1472,7 +1472,7 @@
         "width": "12",
         "height": 1,
         "order": 2,
-        "showTitle": false,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1486,7 +1486,7 @@
         "width": "12",
         "height": 1,
         "order": 2,
-        "showTitle": false,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1542,29 +1542,15 @@
         "disabled": "false",
         "groupType": "default"
     },
-    {
-        "id": "3d290173d833fd04",
-        "type": "ui-group",
-        "name": "Experiment",
-        "page": "d129fac8e7742d5b",
-        "width": "12",
-        "height": 1,
-        "order": 5,
-        "showTitle": false,
-        "className": "",
-        "visible": "true",
-        "disabled": "false",
-        "groupType": "default"
-    },
     {
         "id": "c5651e1a3e56f3f5",
         "type": "ui-group",
-        "name": "Plots",
+        "name": "Explorer",
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 3,
-        "showTitle": false,
+        "order": 13,
+        "showTitle": true,
         "className": "",
         "visible": "true",
         "disabled": "false",
@@ -1577,7 +1563,7 @@
         "page": "d129fac8e7742d5b",
         "width": "12",
         "height": 1,
-        "order": 4,
+        "order": 14,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1696,6 +1682,146 @@
         "disabled": "false",
         "groupType": "default"
     },
+    {
+        "id": "53490f9c39e2065d",
+        "type": "ui-group",
+        "name": "Informations",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "90b33e458dd29d04",
+        "type": "ui-group",
+        "name": "Heat Map",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "47800358cf7cee25",
+        "type": "ui-group",
+        "name": "ESD Histogram",
+        "page": "d129fac8e7742d5b",
+        "width": 6,
+        "height": 1,
+        "order": 5,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1d9c6927a0e0a71b",
+        "type": "ui-group",
+        "name": "Timeline",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 6,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "03ad1c8f517e8769",
+        "type": "ui-group",
+        "name": "Colorspace",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 7,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "0be15f8190e6fd43",
+        "type": "ui-group",
+        "name": "Aspect",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 8,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1edc962c44888abc",
+        "type": "ui-group",
+        "name": "Greenness",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 9,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "67c63cc92c23c4b1",
+        "type": "ui-group",
+        "name": "Complexity",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 10,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "95a152a68b7ba779",
+        "type": "ui-group",
+        "name": "Texture",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 11,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1baa943e505febf1",
+        "type": "ui-group",
+        "name": "Solidity",
+        "page": "d129fac8e7742d5b",
+        "width": "4",
+        "height": 1,
+        "order": 12,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
     {
         "id": "82099021.9ceb08",
         "type": "file",
@@ -2059,28 +2185,9 @@
         "x": 370,
         "y": 140,
         "wires": [
-            [
-                "b49055c50dca065a"
-            ]
+            []
         ]
     },
-    {
-        "id": "b49055c50dca065a",
-        "type": "debug",
-        "z": "07f3b717f2a2c8c7",
-        "name": "debug 2",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 660,
-        "y": 140,
-        "wires": []
-    },
     {
         "id": "c8caad8136e6c5e3",
         "type": "ui-template",
@@ -2684,7 +2791,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2728,7 +2835,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 py-0 px-2\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Preview\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2994,7 +3101,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0  py-0 px-2\">\n    <v-row \n      align=\"center\" \n      class=\"pa-4 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"home\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Home\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Metadata\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3593,7 +3700,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 4px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4486,8 +4593,8 @@
         "y": 40,
         "wires": [
             [
-                "164baa371893de7a",
-                "d9c0cf13cfa21a19"
+                "384aa9ab83bfe566",
+                "164baa371893de7a"
             ]
         ]
     },
@@ -4584,11 +4691,23 @@
         "sendError": false,
         "encoding": "none",
         "allProps": false,
-        "x": 860,
-        "y": 180,
+        "x": 180,
+        "y": 380,
         "wires": [
             [
-                "c66ff37635c5da7a"
+                "4caf5c846b3b9d01",
+                "a5ef1df890e7bb36",
+                "8cdf3c5527b9cb21",
+                "e26832811411f850",
+                "448a5c6830c6514f",
+                "ac9d555964747130",
+                "11323481847790c0",
+                "8425012e07c3700f",
+                "512e86195d14e773",
+                "9be1cc713ac79a7b",
+                "63ce87d36ae8f172",
+                "9abf70a949e76eaf",
+                "bdf84e9e1e0caa90"
             ]
         ]
     },
@@ -4604,207 +4723,642 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 710,
+        "x": 790,
         "y": 180,
         "wires": [
             [
-                "5ec998719a884cfe"
-            ]
-        ]
-    },
-    {
-        "id": "c66ff37635c5da7a",
-        "type": "function",
-        "z": "14f8c9b5ce1235cc",
-        "name": "Data Processor",
-        "func": "// 1. Parse TSV\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\n// Need at least header + 1 data line\nif (lines.length < 2) return null; \n\nconst headers = lines[0].split('\\t');\n// Helper to safely get value\nconst val = (row, colName) => {\n    const idx = headers.indexOf(colName);\n    return idx > -1 ? row[idx] : null;\n};\n\n// 2. Extract Metadata from the first valid data row (skipping [f]/[t] lines)\nlet firstRow = null;\nfor(let i=1; i<lines.length; i++) {\n    if(!lines[i].trim().startsWith('[')) {\n        firstRow = lines[i].split('\\t');\n        break;\n    }\n}\n\nconst meta = {\n    sample_id: 'N/A',\n    project: 'N/A',\n    acq_id: 'N/A',\n    vol_imaged: 1, // avoid div by zero default\n    resolution: 0\n};\n\nif (firstRow) {\n    meta.sample_id = val(firstRow, 'sample_id');\n    meta.project = val(firstRow, 'sample_project');\n    meta.acq_id = val(firstRow, 'acq_id');\n    meta.vol_imaged = parseFloat(val(firstRow, 'acq_imaged_volume')) || 0;\n    meta.resolution = parseFloat(val(firstRow, 'process_pixel')) || 0.75;\n}\n\n// 3. Define useful variables\nconst usefulKeys = [\n    'object_area', 'object_equivalent_diameter', 'object_perim.',\n    'object_major', 'object_minor', 'object_width', 'object_height',\n    'object_circ.', 'object_elongation', 'object_solidity', 'object_eccentricity',\n    'object_MeanHue', 'object_MeanSaturation', 'object_MeanValue', 'object_StdValue',\n    'object_x', 'object_y'\n];\n\n// 4. Process Rows\nconst items = [];\nlet totalBiovolume = 0;\n\nfor (let i = 1; i < lines.length; i++) {\n    const row = lines[i].split('\\t');\n    // Skip empty/bad lines\n    if (row.length < headers.length || row[0].trim().startsWith('[')) continue;\n\n    const url = `/ps/data/browse/api/preview/big/objects/${val(row, 'object_date')}/${val(row, 'sample_id')}/${val(row, 'acq_id')}/${val(row, 'img_file_name')}`;\n\n    const item = {\n        id: val(row, 'object_id'),\n        url: url\n    };\n\n    usefulKeys.forEach(key => {\n        const v = parseFloat(val(row, key));\n        item[key] = isNaN(v) ? 0 : v;\n    });\n\n    // Biovolume estimate (Sphere from ESD): 4/3 * pi * (r)^3\n    if(item.object_equivalent_diameter) {\n        const r = item.object_equivalent_diameter / 2;\n        totalBiovolume += (4/3) * Math.PI * Math.pow(r, 3);\n    }\n\n    items.push(item);\n}\n\n// 5. Final calculations for Header\nmeta.total_objects = items.length;\nmeta.abundance = meta.vol_imaged > 0 ? (items.length / meta.vol_imaged).toFixed(0) : 0;\n// Biovolume in Millions of µm³ per mL\nmeta.est_biovolume = meta.vol_imaged > 0 ? ((totalBiovolume / 1000000) / meta.vol_imaged).toFixed(2) : 0;\n\nmsg.payload = {\n    data: items,\n    keys: usefulKeys,\n    meta: meta\n};\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 1060,
-        "y": 320,
-        "wires": [
-            [
-                "bff00eae3f65f644",
-                "bbb2d0709f064549",
-                "45375ce0b837d4fb",
-                "4244d2ed880cca66"
+                "d77ed8081a657507",
+                "384aa9ab83bfe566"
             ]
         ]
     },
     {
-        "id": "bff00eae3f65f644",
+        "id": "4244d2ed880cca66",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "c5651e1a3e56f3f5",
+        "group": "0c1537ce71affc2b",
         "page": "",
         "ui": "",
-        "name": "Plots",
+        "name": "Gallery",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <div style=\"height: 100%; position: relative; min-height: 100vh;\">\n        \n        <v-overlay \n            :value=\"showOverlay\" \n            absolute \n            color=\"white\" \n            opacity=\"0.95\" \n            style=\"z-index: 9999; justify-content: center; align-items: center;\"\n        >\n            <div class=\"text-center\">\n                <div v-if=\"isLoading\">\n                    <v-progress-circular indeterminate color=\"primary\" size=\"64\" width=\"6\"></v-progress-circular>\n                    <div class=\"mt-4 primary--text text-h6 font-weight-light\">Processing Sample Data...</div>\n                </div>\n\n                <div v-else>\n                    <v-icon size=\"80\" color=\"grey lighten-2\">mdi-chart-scatter-plot</v-icon>\n                    <div class=\"mt-4 grey--text text--darken-1 text-h6 font-weight-light\">Waiting for Data...</div>\n                    <div class=\"caption grey--text\">Send a payload to visualize the dashboard</div>\n                </div>\n            </div>\n        </v-overlay>\n\n        <v-card outlined class=\"grey lighten-5\">\n            <v-card-text class=\"px-0\">\n                <v-row align=\"center\">\n                    \n                    <v-col cols=\"12\" md=\"9\" class=\"border-right\">\n                        <div class=\"caption grey--text text-uppercase font-weight-bold mb-1\">Sample Identity</div>\n                        <div class=\"text-h4 primary--text font-weight-bold\">\n                            {{ meta.sample_id || '--' }}\n                        </div>\n                        <div class=\"subtitle-1 grey--text text--darken-3 mt-1\">\n                            <strong>Project:</strong> {{ meta.project || '--' }}<br>\n                            <span class=\"caption\">Acq ID: {{ meta.acq_id || '--' }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\" md=\"3\" class=\"text-right\">\n                        <v-btn \n                            color=\"success\" \n                            large \n                            depressed \n                            :href=\"downloadUrl\" \n                            target=\"_blank\"\n                            :disabled=\"!meta.sample_id\"\n                        >\n                            <v-icon left>mdi-download</v-icon>\n                            Download EcoTaxa .zip\n                        </v-btn>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n        </v-card>\n\n        <v-row class=\"pa-0\">\n            <v-col class=\"pa-0\" cols=\"12\">\n                <v-row>\n                    \n                    <v-col class=\"pa-0\" cols=\"12\" md=\"6\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">1. Flowcell Distribution</div>\n                            <div id=\"chart-heatmap\" style=\"height: 300px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Check:</strong> Are particles evenly spread? 'Hotspots' indicate stuck dirt.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"6\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">2. Size Spectrum (ESD)</div>\n                            <div id=\"chart-esd\" style=\"height: 300px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Check:</strong> The dominant size class. A steep slope is typical for marine samples.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"12\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">\n                                3. Acquisition Stability (Timeline)\n                            </div>\n                            <div id=\"chart-timeline\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Look for gaps (clogs) or spikes (bubbles) over time.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">4. Color vs. Brightness</div>\n                            <div id=\"chart-colorspace\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Separates colorful/opaque (Living) from pale (Ghost).\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">5. Aspect Ratio</div>\n                            <div id=\"chart-aspect\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Points far from diagonal are chains/filaments.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">6. Greenness vs. Shape</div>\n                            <div id=\"chart-green\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> High Green + High Circ = Phytoplankton.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">7. Complexity</div>\n                            <div id=\"chart-complexity\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Deviations indicate spines or appendages.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">8. Focus Quality</div>\n                            <div id=\"chart-texture\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Low std dev indicates blurry objects.\n                            </div>\n                        </v-card>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"4\">\n                        <v-card outlined class=\"pa-1 fill-height\">\n                            <div class=\"caption font-weight-bold text-uppercase pa-2 primary--text\">9. Solidity</div>\n                            <div id=\"chart-solidity\" style=\"height: 250px;\"></div>\n                            <div class=\"px-3 pb-2 caption grey--text\">\n                                <strong>Insight:</strong> Low solidity indicates fluffy aggregates.\n                            </div>\n                        </v-card>\n                    </v-col>\n                </v-row>\n            </v-col>\n        </v-row>\n\n\n        <v-card outlined class=\"mb-8 elevation-1\">\n            \n            <div>\n                <v-row>\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"9\">\n                        <div style=\"height: 600px; border: 1px solid #e0e0e0; border-radius: 4px;\">\n                            <div id=\"explorerPlot\" style=\"width:100%; height:100%;\"></div>\n                        </div>\n                    </v-col>\n\n                    <v-col class=\"pa-0\" cols=\"12\" md=\"3\">\n                        <v-card class=\"pa-4\" outlined height=\"auto\" class=\"d-flex flex-column grey lighten-5\">\n                            <v-card-title class=\"subtitle-2 grey--text text--darken-2\">Explorer Details</v-card-title>\n                            \n                            <div v-if=\"!hoveredItem\" class=\"d-flex flex-column justify-center align-center flex-grow-1 grey--text\">\n                                <v-icon size=\"48\" color=\"grey lighten-2\">mdi-cursor-default-click-outline</v-icon>\n                                <div class=\"caption mt-2\">Hover over a point</div>\n                            </div>\n                            \n                            <div v-else class=\"d-flex flex-column\" style=\"height: 100%; overflow-y: auto;\">\n                                <v-card flat class=\"mb-3 white border-sm\">\n                                    <v-img :src=\"hoveredItem.url\" aspect-ratio=\"1\" contain class=\"grey lighten-4\">\n                                        <template v-slot:placeholder>\n                                            <v-row class=\"fill-height ma-0\" align=\"center\" justify=\"center\">\n                                                <v-progress-circular indeterminate color=\"primary\" size=\"20\"></v-progress-circular>\n                                            </v-row>\n                                        </template>\n                                        <template v-slot:error>\n                                            <v-icon color=\"grey lighten-1\">mdi-image-off</v-icon>\n                                        </template>\n                                    </v-img>\n                                </v-card>\n                                \n                                <div class=\"text-center mb-2\">\n                                    <v-chip x-small color=\"primary\" dark>ID: {{ hoveredItem.id }}</v-chip>\n                                </div>\n                                <v-divider class=\"mb-2\"></v-divider>\n                                <div class=\"caption\">\n                                    <v-row dense>\n                                        <v-col cols=\"6\" class=\"grey--text text--darken-1 font-weight-bold\">X ({{ xAxis }})</v-col>\n                                        <v-col cols=\"6\" class=\"text-right\">{{ formatVal(hoveredItem[xAxis]) }}</v-col>\n                                        <v-col cols=\"6\" class=\"grey--text text--darken-1 font-weight-bold\">Y ({{ yAxis }})</v-col>\n                                        <v-col cols=\"6\" class=\"text-right\">{{ formatVal(hoveredItem[yAxis]) }}</v-col>\n                                    </v-row>\n                                </div>\n                            </div>\n                        </v-card>\n                    </v-col>\n                </v-row>\n\n            <v-row class=\"mb-4\" align=\"center\" justify=\"space-between\" >\n\n                <v-col cols=\"12\" md=\"5\">\n                    <v-select v-model=\"xAxis\" :items=\"keys\" label=\"X Axis\" variant=\"outlined\" density=\"compact\" hide-details\n                        bg-color=\"white\" />\n                </v-col>\n\n                <v-col cols=\"12\" md=\"5\">\n                    <v-select v-model=\"yAxis\" :items=\"keys\" label=\"Y Axis\" variant=\"outlined\" density=\"compact\" hide-details\n                        bg-color=\"white\" />\n                </v-col>\n\n                <v-col cols=\"12\" md=\"2\">\n                    <v-btn color=\"primary\" block size=\"small\" @click=\"updateExplorer\">\n                        <v-icon start>mdi-chart-scatter-plot-hexbin</v-icon>\n                        Load the plot\n                    </v-btn>\n                </v-col>\n            </v-row>\n            </div>\n        </v-card>\n\n        <v-card\n            v-if=\"reportTooltip.show\"\n            class=\"elevation-10 rounded-lg\"\n            :style=\"{\n                position: 'fixed',\n                top: reportTooltip.y + 15 + 'px',\n                left: reportTooltip.x + 15 + 'px',\n                zIndex: 9999,\n                width: '200px',\n                pointerEvents: 'none'\n            }\"\n        >\n            <v-img :src=\"reportTooltip.url\" aspect-ratio=\"1\" contain class=\"grey lighten-4 rounded-t-lg\"></v-img>\n            <div class=\"caption pa-2 text-center white font-weight-bold primary--text\">\n                ID: {{ reportTooltip.id }}\n            </div>\n        </v-card>\n\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            isLoading: false,\n            dataset: [],\n            keys: [],\n            meta: {\n                sample_id: '', project: '', acq_id: '',\n                abundance: 0, total_objects: 0, est_biovolume: 0,\n                vol_imaged: 0, resolution: 0\n            },\n            xAxis: 'object_elongation',\n            yAxis: 'object_circularity',\n            \n            hoveredItem: null,\n            reportTooltip: { show: false, url: '', id: '', x: 0, y: 0 },\n            dialogs: { abundance: false, biovolume: false }\n        }\n    },\n    watch: {\n        msg: {\n            handler(val) {\n                if (val.payload && val.payload.data) {\n                    this.isLoading = true;\n                    \n                    setTimeout(() => {\n                        this.meta = val.payload.meta || {};\n                        \n                        this.dataset = val.payload.data.map((d, i) => {\n                            const h = d.object_MeanHue || 0;\n                            const greenDist = Math.abs(h - 80); \n                            d.custom_greenness = Math.max(0, 100 - greenDist); \n                            d.sequence_index = i; \n                            return d;\n                        });\n                        \n                        this.keys = val.payload.keys || [];\n                        \n                        if (this.keys.includes('object_elongation')) this.xAxis = 'object_elongation';\n                        if (this.keys.includes('object_area')) this.yAxis = 'object_area';\n                        \n                        this.$nextTick(() => {\n                            this.updateExplorer();\n                            this.generateReport();\n                            this.isLoading = false;\n                        });\n                    }, 50);\n                }\n            },\n            deep: true\n        }\n    },\n    computed: {\n        // Logic to show overlay if loading OR if data is empty\n        showOverlay() {\n            return this.isLoading || this.dataset.length === 0;\n        },\n        totalCount() { return this.dataset.length; },\n        downloadUrl() {\n            if (!this.meta.sample_id) return '#';\n            return `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.meta.sample_id}.zip`;\n        }\n    },\n    mounted() {\n        if (!window.Plotly) {\n            const script = document.createElement('script');\n            script.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n            script.onload = () => { /* Loaded */ };\n            document.head.appendChild(script);\n        }\n    },\n    methods: {\n        formatVal(val) {\n            return typeof val === 'number' ? val.toFixed(2) : val;\n        },\n        \n        updateExplorer() {\n            const divId = 'explorerPlot';\n            if (!window.Plotly || !document.getElementById(divId)) return;\n\n            // CLEAR PLOT if no data\n            if (this.dataset.length === 0) {\n                Plotly.purge(divId);\n                this.hoveredItem = null;\n                return;\n            }\n\n            const trace = {\n                x: this.dataset.map(d => d[this.xAxis]),\n                y: this.dataset.map(d => d[this.yAxis]),\n                mode: 'markers',\n                type: 'scatter',\n                marker: { size: 8, color: '#1976D2', opacity: 0.6, line: {width:1, color:'white'} },\n                hoverinfo: 'none'\n            };\n\n            const layout = {\n                margin: { t: 20, b: 40, l: 60, r: 20 },\n                xaxis: { title: this.xAxis },\n                yaxis: { title: this.yAxis },\n                plot_bgcolor: '#eef3ff',\n                hovermode: 'closest',\n                dragmode: 'zoom'\n            };\n\n            Plotly.newPlot(divId, [trace], layout, { responsive: true, displayModeBar: true }).then(() => {\n                document.getElementById(divId).on('plotly_hover', (data) => {\n                    this.hoveredItem = this.dataset[data.points[0].pointIndex];\n                });\n            });\n        },\n\n        generateReport() {\n            const chartIds = [\n                'chart-heatmap', 'chart-esd', 'chart-timeline', \n                'chart-colorspace', 'chart-aspect', 'chart-green', \n                'chart-complexity', 'chart-texture', 'chart-solidity'\n            ];\n\n            if (!window.Plotly) return;\n\n            // CLEAR ALL PLOTS if no data\n            if (this.dataset.length === 0) {\n                chartIds.forEach(id => {\n                    const el = document.getElementById(id);\n                    if(el) Plotly.purge(el);\n                });\n                return;\n            }\n            \n            const commonLayout = {\n                margin: {t:10,b:30,l:40,r:10},\n                plot_bgcolor: '#eef3ff'\n            };\n\n            // 1. Heatmap (Portland)\n            Plotly.newPlot('chart-heatmap', [{\n                x: this.dataset.map(d => d.object_x),\n                y: this.dataset.map(d => d.object_y),\n                type: 'histogram2d', \n                colorscale: 'Plotly3',\n                nbinsx: 100, nbinsy: 80\n            }], { \n                ...commonLayout, \n                hovermode: false, \n                xaxis: { title: 'X (px)' }, \n                yaxis: { title: 'Y (px)', autorange: 'reversed' } \n            }, {responsive:true});\n\n            // 2. ESD\n            Plotly.newPlot('chart-esd', [{\n                x: this.dataset.map(d => d.object_equivalent_diameter),\n                type: 'histogram',\n                marker: { color: 'teal' }\n            }], { ...commonLayout, xaxis: {title: 'ESD'} }, {responsive:true});\n\n            // 3. Timeline (Blue)\n            this.createScatter('chart-timeline', 'sequence_index', 'object_area', 'Acq Sequence', 'Area', 'blue');\n\n            // 4. Color Space (Magenta)\n            this.createScatter('chart-colorspace', 'object_MeanSaturation', 'object_MeanValue', 'Saturation', 'Brightness', 'magenta');\n\n            // 5. Aspect\n            this.createScatter('chart-aspect', 'object_width', 'object_height', 'Width', 'Height', 'orange');\n\n            // 6. Greenness\n            this.createScatter('chart-green', 'custom_greenness', 'object_circ.', 'Green Index', 'Circularity', '#4CAF50');\n\n            // 7. Complexity\n            this.createScatter('chart-complexity', 'object_area', 'object_perim.', 'Area', 'Perimeter', 'purple');\n\n            // 8. Texture\n            this.createScatter('chart-texture', 'object_area', 'object_StdValue', 'Area', 'Texture (Std Dev)', 'brown');\n\n            // 9. Solidity (Histo)\n            Plotly.newPlot('chart-solidity', [{\n                x: this.dataset.map(d => d.object_solidity),\n                type: 'histogram',\n                marker: { color: '#3F51B5' }\n            }], { ...commonLayout, xaxis: {title: 'Solidity'} }, {responsive:true});\n        },\n\n        createScatter(divId, xKey, yKey, xTitle, yTitle, color) {\n             const el = document.getElementById(divId);\n             if (!el) return;\n             \n             const trace = {\n                x: this.dataset.map(d => d[xKey]),\n                y: this.dataset.map(d => d[yKey]),\n                mode: 'markers',\n                type: 'scatter',\n                marker: { size: 10, color: color, opacity: 0.5 },\n                hoverinfo: 'none'\n            };\n\n            const layout = {\n                margin: {t:10,b:30,l:50,r:10},\n                xaxis: {title: xTitle},\n                yaxis: {title: yTitle},\n                plot_bgcolor: '#eef3ff',\n                hovermode: 'closest'\n            };\n\n            Plotly.newPlot(divId, [trace], layout, {responsive:true}).then(() => {\n                el.on('plotly_hover', (data) => {\n                    const idx = data.points[0].pointIndex;\n                    this.reportTooltip = {\n                        show: true,\n                        url: this.dataset[idx].url,\n                        id: this.dataset[idx].id,\n                        x: data.event.clientX,\n                        y: data.event.clientY\n                    };\n                });\n                \n                el.on('plotly_unhover', () => {\n                    this.reportTooltip.show = false;\n                });\n            });\n        }\n    }\n}\n</script>",
+        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            loading: true,\n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let arr = [...this.rawData];\n            arr.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return arr;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            return this.filteredItems.slice(start, start + this.itemsPerPage);\n        }\n    },\n\n    watch: {\n        msg: {\n            deep: true,\n            handler(m) {\n                if (!m || !m.payload) return;\n                if (m.payload.meta) this.meta = m.payload.meta;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} µm` };\n            } else {\n                // For Modal: Calculate Percentage of the total image width\n                // (Bar Microns / Total Image Microns) * 100\n                const percent = (finalMicrons / realWidthMicrons) * 100;\n                return { width: percent, label: `${finalMicrons} µm` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n\n        formatMeta(item) {\n            const out = {};\n            for (let k of this.keys) {\n                if (k === \"url\" || k === \"id\") continue;\n                let v = item[k];\n                if (typeof v === \"number\") v = v.toFixed(2);\n                let unit = \"\";\n                const KL = k.toLowerCase();\n                if (KL.includes(\"area\")) unit = \" px²\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"°\";\n                out[k.replace(\"object_\", \"\")] = v + unit;\n            }\n            return out;\n        },\n\n        downloadImage(url, id) {\n            const a = document.createElement(\"a\");\n            a.href = url;\n            a.download = `object_${id}.jpg`;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n        }\n    }\n}\n</script>\n\n\n<style scoped>\n/* GALLERY GRID */\n.gallery-scroll-area {\n    overflow-y: auto;\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n    align-items: flex-end;\n}\n\n/* SKELETON LOADER */\n.gallery-skeleton {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n}\n.skeleton-box {\n    width: 120px;\n    height: 120px;\n    border-radius: 6px;\n    background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n    background-size: 200% 100%;\n    animation: sk 1.2s infinite;\n}\n@keyframes sk {\n    0% { background-position:200% 0; }\n    100% { background-position:-200% 0; }\n}\n\n.gallery-item-wrapper { display: flex; flex-direction: column; align-items: center; }\n.gallery-card { transition: transform 0.2s; cursor: pointer; }\n.gallery-card:hover { transform: translateY(-2px); border-color: #1976D2 !important; }\n.img-container { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n\n/* --- THUMBNAIL SCALE BAR --- */\n.mini-scale-bar {\n    position:absolute; bottom:2px; right:2px;\n    height:3px; \n    background: rgba(255,255,255,0);\n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.mini-scale-text {\n    position:absolute; bottom:6px; right:2px;\n    font-size: 10px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n\n/* --- MODAL SCALE BAR (NEW) --- */\n.modal-scale-bar {\n    position:absolute; \n    bottom: 10px; \n    right: 10px;\n    height: 6px; \n    background: rgba(255,255,255,0); \n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.modal-scale-text {\n    position:absolute; \n    bottom: 18px; \n    right: 10px;\n    font-size: 14px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1230,
-        "y": 320,
+        "x": 820,
+        "y": 960,
         "wires": [
             []
         ]
     },
     {
-        "id": "bbb2d0709f064549",
+        "id": "92e2ed9f115c3991",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "3d290173d833fd04",
+        "group": "fa6393a7d7e3b7d7",
         "page": "",
         "ui": "",
-        "name": "UMAP",
+        "name": "List of Segmentation",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <div class=\"pa-4\" style=\"height: 100vh; display: flex; flex-direction: column;\">\n        \n        <v-row style=\"height: 100%;\">\n            \n            <v-col cols=\"12\" md=\"3\" class=\"d-flex flex-column\" style=\"height: 100%;\">\n                <v-card outlined class=\"grey lighten-5 flex-grow-1 d-flex flex-column\">\n                    <v-card-title class=\"primary white--text py-3 subtitle-1 font-weight-bold\">\n                        <v-icon left color=\"white\">mdi-graph-outline</v-icon>\n                        UMAP Parameters\n                    </v-card-title>\n                    \n                    <div class=\"pa-4 flex-grow-1\" style=\"overflow-y: auto;\">\n                        \n                        <v-alert dense type=\"info\" outlined class=\"mb-6 caption\">\n                            <strong>{{ totalCount }}</strong> Objects<br>\n                            Clustering based on <strong>{{ availableKeys.length }}</strong> variables.\n                        </v-alert>\n\n                        <div class=\"mb-6\">\n                            <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Neighbors ({{ params.n_neighbors }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.n_neighbors\"\n                                min=\"2\" max=\"100\" step=\"1\"\n                                dense hide-details\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-2\" style=\"line-height: 1.3;\">\n                                <strong>Insight:</strong> Controls the balance between local and global structure.\n                                <ul class=\"pl-3 mt-1\">\n                                    <li><strong>Low (2-10):</strong> Focuses on very local details (micro-clusters).</li>\n                                    <li><strong>High (30-100):</strong> Preserves the overall global shape of the data.</li>\n                                </ul>\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                             <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Min Distance ({{ params.min_dist }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.min_dist\"\n                                min=\"0.01\" max=\"0.99\" step=\"0.01\"\n                                dense hide-details\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-2\" style=\"line-height: 1.3;\">\n                                <strong>Insight:</strong> Controls how tightly points are packed together.\n                                <ul class=\"pl-3 mt-1\">\n                                    <li><strong>Low (0.01):</strong> Creates tight, dense clumps.</li>\n                                    <li><strong>High (0.5+):</strong> Spreads points out, revealing structure within clumps.</li>\n                                </ul>\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                            <div class=\"caption font-weight-bold grey--text text--darken-2 mb-1\">\n                                Image Zoom ({{ imageSize }})\n                            </div>\n                            <v-slider\n                                v-model=\"imageSize\"\n                                min=\"0.02\" max=\"0.5\" step=\"0.01\"\n                                dense hide-details\n                                color=\"secondary\"\n                                track-color=\"grey lighten-2\"\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-2\">\n                                Adjusts the size of the images projected on the plot.\n                            </div>\n                        </div>\n\n                    </div>\n\n                    <div class=\"pa-4 white elevation-2\">\n                        <v-btn \n                            color=\"primary\" \n                            block \n                            large\n                            depressed\n                            :loading=\"isCalculating\"\n                            @click=\"runUMAP\"\n                        >\n                            <v-icon left>mdi-play</v-icon>\n                            Run UMAP Calculation\n                        </v-btn>\n                    </div>\n                </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"9\" style=\"height: 100%;\">\n                <v-card outlined style=\"height: 100%; position: relative;\">\n                    \n                    <v-overlay \n                        absolute \n                        :value=\"isCalculating\"\n                        opacity=\"0.8\"\n                        color=\"white\"\n                        style=\"z-index: 10;\"\n                        class=\"d-flex justify-center align-center\"\n                    >\n                        <div class=\"text-center\">\n                            <v-progress-circular indeterminate color=\"primary\" size=\"64\" width=\"6\"></v-progress-circular>\n                            <div class=\"mt-4 primary--text text-h5 font-weight-light\">Calculating UMAP...</div>\n                            <div class=\"caption grey--text mt-1\">Processing {{ availableKeys.length }} dimensions for {{ totalCount }} objects.</div>\n                        </div>\n                    </v-overlay>\n\n                    <div v-if=\"!umapResult && !isCalculating\" class=\"d-flex justify-center align-center\" style=\"height: 100%;\">\n                        <div class=\"text-center grey--text\">\n                            <v-icon size=\"64\" color=\"grey lighten-2\">mdi-chart-bubble</v-icon>\n                            <div class=\"text-h6 mt-2\">Ready to Cluster</div>\n                            <p>Click \"Run UMAP Calculation\" to generate the map.</p>\n                        </div>\n                    </div>\n\n                    <div id=\"umapPlot\" style=\"width:100%; height:100%;\"></div>\n\n                </v-card>\n            </v-col>\n\n        </v-row>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            availableKeys: [],\n            isCalculating: false,\n            params: {\n                n_neighbors: 15,\n                min_dist: 0.15,\n                spread: 1.0\n            },\n            imageSize: 0.3, // Default image scale\n            umapResult: null\n        }\n    },\n    computed: {\n        totalCount() { return this.rawData.length; }\n    },\n    watch: {\n        msg: {\n            handler(val) {\n                if (val.payload && val.payload.data) {\n                    this.rawData = val.payload.data;\n                    this.availableKeys = val.payload.keys || [];\n                    \n                    // Reset result on new data\n                    this.umapResult = null;\n\n                    // Auto-run if small dataset\n                    if(this.totalCount > 0 && this.totalCount < 200) {\n                        this.runUMAP();\n                    }\n                }\n            },\n            deep: true\n        },\n        // Re-draw plot instantly when image size changes\n        imageSize() {\n            if (this.umapResult) this.drawPlot();\n        }\n    },\n    mounted() {\n        // Load Plotly\n        if (!window.Plotly) {\n            const s1 = document.createElement('script');\n            s1.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n            document.head.appendChild(s1);\n        }\n        \n        // Load UMAP-JS\n        if (!window.UMAP) {\n            const s2 = document.createElement('script');\n            s2.src = \"https://cdn.jsdelivr.net/npm/umap-js@1.3.3/lib/umap-js.min.js\";\n            document.head.appendChild(s2);\n        }\n    },\n    methods: {\n        async runUMAP() {\n            if (!window.UMAP || this.rawData.length === 0) return;\n\n            this.isCalculating = true;\n\n            // UI update delay\n            await new Promise(resolve => setTimeout(resolve, 100));\n\n            try {\n                const matrix = this.normalizeData(this.rawData, this.availableKeys);\n\n                const umap = new window.UMAP({\n                    nNeighbors: this.params.n_neighbors,\n                    minDist: this.params.min_dist,\n                    spread: this.params.spread,\n                    nComponents: 2, \n                    random: Math.random\n                });\n\n                const embedding = await umap.fit(matrix);\n\n                this.umapResult = this.rawData.map((item, i) => ({\n                    ...item,\n                    umapX: embedding[i][0],\n                    umapY: embedding[i][1]\n                }));\n\n                this.drawPlot();\n\n            } catch (e) {\n                console.error(\"UMAP Calculation Error\", e);\n            } finally {\n                this.isCalculating = false;\n            }\n        },\n\n        normalizeData(data, features) {\n            const stats = {};\n            features.forEach(f => {\n                const vals = data.map(row => row[f] || 0);\n                stats[f] = {\n                    min: Math.min(...vals),\n                    max: Math.max(...vals)\n                };\n                if (stats[f].max === stats[f].min) stats[f].max += 1; \n            });\n\n            return data.map(row => {\n                return features.map(f => {\n                    const val = row[f] || 0;\n                    return (val - stats[f].min) / (stats[f].max - stats[f].min);\n                });\n            });\n        },\n\n        drawPlot() {\n            const divId = 'umapPlot';\n            if (!window.Plotly || !this.umapResult) return;\n\n            // 1. Hidden Scatter Trace\n            const trace = {\n                x: this.umapResult.map(d => d.umapX),\n                y: this.umapResult.map(d => d.umapY),\n                mode: 'markers',\n                type: 'scatter',\n                text: this.umapResult.map(d => `ID: ${d.id}`),\n                marker: { \n                    size: 2, \n                    color: 'rgba(0,0,0,0)' \n                },\n                hoverinfo: 'text'\n            };\n\n            // 2. Image Layout Array\n            const images = this.umapResult.map(d => ({\n                source: d.url,\n                xref: 'x',\n                yref: 'y',\n                x: d.umapX,\n                y: d.umapY,\n                sizex: this.imageSize,\n                sizey: this.imageSize,\n                xanchor: 'center',\n                yanchor: 'middle',\n                layer: 'above'\n            }));\n\n            // 3. Shapes (Contours/Borders)\n            // We create a rectangle shape behind each image to act as a border\n            const shapes = this.umapResult.map(d => ({\n                type: 'rect',\n                xref: 'x',\n                yref: 'y',\n                x0: d.umapX - (this.imageSize / 2),\n                y0: d.umapY - (this.imageSize / 2),\n                x1: d.umapX + (this.imageSize / 2),\n                y1: d.umapY + (this.imageSize / 2),\n                line: {\n                    color: '#bdbdbd', // Light grey contour\n                    width: 1\n                }\n            }));\n\n            const layout = {\n                title: {\n                    text: 'Morphological Similarity Map',\n                    font: { size: 14, color: 'grey' }\n                },\n                xaxis: { showgrid: false, zeroline: false, showticklabels: false },\n                yaxis: { showgrid: false, zeroline: false, showticklabels: false },\n                plot_bgcolor: 'black',\n                margin: { t: 30, b: 10, l: 10, r: 10 },\n                hovermode: 'closest',\n                dragmode: 'pan',\n                images: images,\n            };\n\n            const config = {\n                responsive: true,\n                scrollZoom: true,\n                displayModeBar: true,\n                modeBarButtonsToRemove: ['lasso2d', 'select2d']\n            };\n\n            Plotly.newPlot(divId, [trace], layout, config);\n        }\n    }\n}\n</script>",
+        "format": "<template>\n\n        <v-data-table\n            :headers=\"headers\"\n            :items=\"items\"\n            :search=\"search\"\n            item-value=\"acquisition_id\"\n            density=\"compact\"\n            class=\"elevation-1\"\n        >\n            <template v-slot:item.image_acquired_count=\"{ item }\">\n                <v-chip size=\"small\" color=\"primary\" variant=\"tonal\">\n                    {{ item.image_acquired_count }}\n                </v-chip>\n            </template>\n\n            <template v-slot:item.links=\"{ item }\">\n                \n                <v-tooltip text=\"View Gallery\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-image-multiple\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"blue-darken-2\" \n                            :href=\"item.gallery\" \n                            target=\"_blank\"\n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n\n                <v-tooltip text=\"Download Zip\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-download\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"orange-darken-2\" \n                            :href=\"item.export\" \n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n            </template>\n\n            <template v-slot:item.actions=\"{ item }\">\n                        <v-btn \n                            icon=\"mdi-chart-scatter-plot-hexbin\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"primary\" \n                            @click=\"selectAcquisition(item)\"\n                        ></v-btn>\n            </template>\n        </v-data-table>\n</template>\n\n<script>\n    export default {\n        data() { \n            return {\n                search: '',\n                items: [],\n                headers: [\n                    { title: 'Project', key: 'project_name', sortable: true },\n                    { title: 'Sample ID', key: 'sample_id', sortable: true },\n                    { title: 'Acquisition ID', key: 'acquisition_id', sortable: true },\n                    { title: 'Images', key: 'image_acquired_count', sortable: true, align: 'end' },\n                    { title: 'Resources', key: 'links', sortable: false, align: 'center' }, // New Column\n                    { title: 'Select', key: 'actions', sortable: false, align: 'end' },\n                ]\n            }\n        },\n        watch: {\n            msg: {\n                handler(newValue) {\n                    if (newValue && Array.isArray(newValue.payload)) {\n                        this.items = newValue.payload;\n                    }\n                },\n                deep: true\n            }\n        },\n        mounted() {\n            if (this.msg && Array.isArray(this.msg.payload)) {\n                this.items = this.msg.payload;\n            }\n        },\n        methods: {\n            selectAcquisition(item) {\n                this.send({\n                    topic: \"selected_acquisition\",\n                    payload: item\n                });\n            }\n        }\n    }\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1290,
-        "y": 400,
-        "wires": [
-            []
-        ]
-    },
-    {
-        "id": "4b133307e9244dd1",
-        "type": "function",
-        "z": "14f8c9b5ce1235cc",
-        "name": "Eraser",
-        "func": "// Construct a \"Blank\" payload structure\n// This matches the structure the UI expects, preventing \"undefined\" errors.\n\nmsg.payload = {\n    // 1. Empty Data Array (Clears all plots and the explorer)\n    data: [],\n    \n    // 2. Empty Keys (Clears dropdown selectors)\n    keys: [],\n    \n    // 3. Reset Metadata (Sets header text to default/zero)\n    meta: {\n        sample_id: 'Select a sample from the table',\n        project: '-',\n        acq_id: '-',\n        vol_imaged: 0,\n        resolution: 0,\n        \n        // Computed stats reset\n        total_objects: 0,\n        abundance: 0,\n        est_biovolume: 0\n    }\n};\n\nreturn msg;",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 1090,
-        "y": 360,
+        "x": 600,
+        "y": 180,
         "wires": [
             [
-                "bff00eae3f65f644",
-                "bbb2d0709f064549",
-                "45375ce0b837d4fb",
-                "4244d2ed880cca66"
+                "aefbf6f96248c398"
             ]
         ]
     },
     {
-        "id": "45375ce0b837d4fb",
+        "id": "2ca2f83cc939607f",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "3d290173d833fd04",
+        "group": "53490f9c39e2065d",
         "page": "",
         "ui": "",
-        "name": "t-sne",
-        "order": 2,
+        "name": "Infos",
+        "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <div class=\"pa-4\" style=\"height: 100vh; display: flex; flex-direction: column;\">\n        \n        <v-row style=\"height: 100%;\">\n            \n            <v-col cols=\"12\" md=\"3\" class=\"d-flex flex-column\" style=\"height: 100%;\">\n                <v-card outlined class=\"grey lighten-5 flex-grow-1 d-flex flex-column\">\n                    <v-card-title class=\"deep-purple white--text py-3 subtitle-1 font-weight-bold\">\n                        <v-icon left color=\"white\">mdi-scatter-plot-outline</v-icon>\n                        t-SNE Parameters\n                    </v-card-title>\n                    \n                    <div class=\"pa-4 flex-grow-1\" style=\"overflow-y: auto;\">\n                        \n                        <v-alert dense type=\"success\" outlined class=\"mb-6 caption\">\n                            <strong>{{ totalCount }}</strong> Objects<br>\n                            Library: <strong>Embedded (Offline)</strong>\n                        </v-alert>\n\n                        <div class=\"mb-6\">\n                            <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Perplexity ({{ params.perplexity }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.perplexity\"\n                                min=\"5\" max=\"50\" step=\"1\"\n                                dense hide-details\n                                color=\"deep-purple\"\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-1\">\n                                Guess of neighbors per point.\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                             <div class=\"d-flex justify-space-between align-center mb-1\">\n                                <span class=\"caption font-weight-bold grey--text text--darken-2\">Epsilon ({{ params.epsilon }})</span>\n                            </div>\n                            <v-slider\n                                v-model=\"params.epsilon\"\n                                min=\"1\" max=\"20\" step=\"1\"\n                                dense hide-details\n                                color=\"deep-purple\"\n                                track-color=\"grey lighten-2\"\n                                thumb-label\n                            ></v-slider>\n                            <div class=\"caption grey--text mt-1\">\n                                Learning rate (speed).\n                            </div>\n                        </div>\n\n                        <v-divider class=\"my-4\"></v-divider>\n\n                        <div class=\"mb-6\">\n                            <div class=\"caption font-weight-bold grey--text text--darken-2 mb-1\">\n                                Image Zoom ({{ imageSize }})\n                            </div>\n                            <v-slider\n                                v-model=\"imageSize\"\n                                min=\"0.02\" max=\"0.8\" step=\"0.01\"\n                                dense hide-details\n                                color=\"secondary\"\n                                track-color=\"grey lighten-2\"\n                            ></v-slider>\n                        </div>\n\n                    </div>\n\n                    <div class=\"pa-4 white elevation-2\">\n                        <v-btn \n                            color=\"deep-purple\" \n                            dark\n                            block \n                            large\n                            depressed\n                            :loading=\"isCalculating\"\n                            :disabled=\"totalCount === 0\"\n                            @click=\"runTSNE\"\n                        >\n                            <v-icon left>mdi-play</v-icon>\n                            Run t-SNE Calculation\n                        </v-btn>\n                    </div>\n                </v-card>\n            </v-col>\n\n            <v-col cols=\"12\" md=\"9\" style=\"height: 100%;\">\n                <v-card outlined style=\"height: 100%; position: relative;\">\n                    \n                    <v-overlay \n                        absolute \n                        :value=\"isCalculating\"\n                        opacity=\"0.8\"\n                        color=\"white\"\n                        style=\"z-index: 10;\"\n                        class=\"d-flex justify-center align-center\"\n                    >\n                        <div class=\"text-center\">\n                            <v-progress-circular indeterminate color=\"deep-purple\" size=\"64\" width=\"6\"></v-progress-circular>\n                            <div class=\"mt-4 deep-purple--text text-h5 font-weight-light\">Calculating t-SNE...</div>\n                            <div class=\"caption grey--text mt-1\">\n                                Iteration {{ currentIteration }} / {{ totalIterations }}\n                            </div>\n                        </div>\n                    </v-overlay>\n\n                    <div v-if=\"!tsneResult && !isCalculating\" class=\"d-flex justify-center align-center\" style=\"height: 100%;\">\n                        <div class=\"text-center grey--text\">\n                            <v-icon size=\"64\" color=\"grey lighten-2\">mdi-chart-scatter-plot</v-icon>\n                            <div class=\"text-h6 mt-2\">Ready to Cluster</div>\n                            <p v-if=\"totalCount > 0\">Click \"Run t-SNE Calculation\" to generate the map.</p>\n                            <p v-else class=\"orange--text\">Waiting for data...</p>\n                        </div>\n                    </div>\n\n                    <div id=\"tsnePlot\" style=\"width:100%; height:100%;\"></div>\n\n                </v-card>\n            </v-col>\n\n        </v-row>\n    </div>\n</template>\n\n<script>\nexport default {\n    props: ['msg'],\n    data() {\n        return {\n            rawData: [],\n            availableKeys: [],\n            isCalculating: false,\n            \n            params: {\n                perplexity: 30,\n                epsilon: 10,\n            },\n            totalIterations: 500,\n            currentIteration: 0,\n            imageSize: 0.3, \n            tsneResult: null,\n            embeddedTSNE: null // We store the library instance here\n        }\n    },\n    computed: {\n        totalCount() { return this.rawData ? this.rawData.length : 0; }\n    },\n    watch: {\n        msg: {\n            handler(val) {\n                if (val && val.payload && val.payload.data) {\n                    this.rawData = val.payload.data;\n                    this.availableKeys = val.payload.keys || [];\n                    this.tsneResult = null;\n                }\n            },\n            deep: true,\n            immediate: true\n        },\n        imageSize() {\n            if (this.tsneResult) this.drawPlot();\n        }\n    },\n    mounted() {\n        // 1. Initialize our internal t-SNE engine immediately\n        this.initEmbeddedLibrary();\n\n        // 2. Load Plotly (Standard Visual Library)\n        if (!window.Plotly) {\n            const s1 = document.createElement('script');\n            s1.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n            document.head.appendChild(s1);\n        }\n    },\n    methods: {\n        async runTSNE() {\n            if (this.totalCount === 0) return;\n\n            this.isCalculating = true;\n            this.currentIteration = 0;\n\n            // Yield to UI\n            await new Promise(resolve => setTimeout(resolve, 100));\n\n            try {\n                // Prepare Data\n                const matrix = this.normalizeData(this.rawData, this.availableKeys);\n\n                // Initialize Engine\n                const opt = {\n                    epsilon: this.params.epsilon, \n                    perplexity: this.params.perplexity,\n                    dim: 2\n                };\n                \n                // Use our embedded engine\n                const tsne = new this.embeddedTSNE.tSNE(opt);\n                tsne.initDataRaw(matrix);\n\n                const stepSize = 50; \n                \n                // Calculation Loop\n                for(let i = 0; i < this.totalIterations; i += stepSize) {\n                    for(let j = 0; j < stepSize; j++) {\n                        tsne.step();\n                    }\n                    this.currentIteration = i + stepSize;\n                    await new Promise(r => setTimeout(r, 10)); \n                }\n\n                // Get Results\n                const embedding = tsne.getSolution();\n\n                this.tsneResult = this.rawData.map((item, i) => ({\n                    ...item,\n                    tsneX: embedding[i][0],\n                    tsneY: embedding[i][1]\n                }));\n\n                this.drawPlot();\n\n            } catch (e) {\n                console.error(\"t-SNE Error\", e);\n            } finally {\n                this.isCalculating = false;\n            }\n        },\n\n        normalizeData(data, features) {\n            if(!features || features.length === 0) return [];\n            const stats = {};\n            features.forEach(f => {\n                const vals = data.map(row => row[f] || 0);\n                stats[f] = { min: Math.min(...vals), max: Math.max(...vals) };\n                if (stats[f].max === stats[f].min) stats[f].max += 1; \n            });\n            return data.map(row => {\n                return features.map(f => {\n                    const val = row[f] || 0;\n                    return (val - stats[f].min) / (stats[f].max - stats[f].min);\n                });\n            });\n        },\n\n        drawPlot() {\n        const divId = 'tsnePlot';\n        if (!window.Plotly || !this.tsneResult) return;\n        \n        const trace = {\n        x: this.tsneResult.map(d => d.tsneX),\n        y: this.tsneResult.map(d => d.tsneY),\n        mode: 'markers',\n        type: 'scatter',\n        text: this.tsneResult.map(d => `ID: ${d.id}`),\n        marker: { size: 2, color: 'rgba(0,0,0,0)' }, // Invisible markers, just for hover\n        hoverinfo: 'text'\n        };\n        \n        const images = this.tsneResult.map(d => ({\n        source: d.url,\n        xref: 'x',\n        yref: 'y',\n        x: d.tsneX,\n        y: d.tsneY,\n        sizex: this.imageSize,\n        sizey: this.imageSize,\n        // --- THE FIX ---\n        sizing: \"contain\", // Prevents stretching; keeps original aspect ratio\n        // ----------------\n        xanchor: 'center',\n        yanchor: 'middle',\n        layer: 'above'\n        }));\n        \n        const layout = {\n        title: { text: 't-SNE Morphological Map' },\n        xaxis: { showgrid: false, zeroline: false, showticklabels: false },\n        yaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        scaleanchor: 'x', // Keeps the plot aspect ratio 1:1\n        scaleratio: 1\n        },\n        plot_bgcolor: 'black',\n        margin: { t: 30, b: 10, l: 10, r: 10 },\n        hovermode: 'closest',\n        dragmode: 'pan',\n        images: images,\n        };\n        \n        const config = { responsive: true, scrollZoom: true, displayModeBar: true };\n        Plotly.newPlot(divId, [trace], layout, config);\n        },\n\n        // --- EMBEDDED LIBRARY (Minified Implementation of Karpathy's t-SNE) ---\n        initEmbeddedLibrary() {\n            const tsnejs = {};\n            \n            // Utility functions\n            const return_v = false;\n            const v_val = 0.0;\n            const gaussRandom = function() {\n                if(return_v) { return_v = false; return v_val; }\n                var u = 2*Math.random()-1; var v = 2*Math.random()-1; var r = u*u + v*v;\n                if(r == 0 || r > 1) return gaussRandom();\n                var c = Math.sqrt(-2*Math.log(r)/r);\n                return u*c; // stripped v logic for brevity in strict mode\n            };\n            const randn = function(mu, std) { return mu+gaussRandom()*std; };\n            const distL2 = function(a, b) { var d=0; for(var i=0;i<a.length;i++) { d+=(a[i]-b[i])*(a[i]-b[i]); } return d; };\n\n            // The Logic\n            tsnejs.tSNE = function(opt) {\n                opt = opt || {};\n                this.perplexity = opt.perplexity || 30;\n                this.dim = opt.dim || 2;\n                this.epsilon = opt.epsilon || 10;\n                this.iter = 0;\n            };\n\n            tsnejs.tSNE.prototype = {\n                initDataRaw: function(X) {\n                    var N = X.length; var D = X[0].length;\n                    this.P = new Float64Array(N*N);\n                    this.Y = new Float64Array(N*this.dim);\n                    this.gains = new Float64Array(N*this.dim);\n                    this.ystep = new Float64Array(N*this.dim);\n                    for(var i=0;i<N*this.dim;i++) { this.Y[i] = randn(0.0, 1e-4); this.gains[i]=1.0; this.ystep[i]=0.0;}\n                    \n                    // Compute P-values (Gaussian Kernel)\n                    var Htarget = Math.log(this.perplexity);\n                    for(var i=0;i<N;i++) {\n                        var betas = 1.0; var min_beta = -Infinity; var max_beta = Infinity; var tol = 1e-4;\n                        for(var iter=0;iter<50;iter++) {\n                            var p_sum = 0.0;\n                            for(var j=0;j<N;j++) {\n                                var d = 0.0;\n                                if(i!=j) d = distL2(X[i], X[j]);\n                                var p = 0.0;\n                                if(i!=j) p = Math.exp(-d * betas);\n                                this.P[i*N+j] = p;\n                                if(i!=j) p_sum += p;\n                            }\n                            var H = 0.0;\n                            for(var j=0;j<N;j++) {\n                                var pj = 0.0;\n                                if(i!=j) pj = this.P[i*N+j] / p_sum;\n                                if(pj > 1e-7) H -= pj * Math.log(pj);\n                            }\n                            if(Math.abs(H - Htarget) < tol) break;\n                            if(H > Htarget) { min_beta = betas; if(max_beta == Infinity) betas *= 2; else betas = (betas + max_beta) / 2; }\n                            else { max_beta = betas; if(min_beta == -Infinity) betas /= 2; else betas = (betas + min_beta) / 2; }\n                        }\n                        var p_sum_final = 0.0;\n                        for(var j=0;j<N;j++) {\n                            if(i!=j) p_sum_final += this.P[i*N+j];\n                        }\n                        for(var j=0;j<N;j++) {\n                            if(i!=j) this.P[i*N+j] /= p_sum_final;\n                        }\n                    }\n                    // Symmetrize P\n                    var N2 = N*2;\n                    for(var i=0;i<N;i++) {\n                        for(var j=i+1;j<N;j++) {\n                            var p = (this.P[i*N+j] + this.P[j*N+i]) / N2;\n                            this.P[i*N+j] = p; this.P[j*N+i] = p;\n                        }\n                    }\n                },\n                getSolution: function() {\n                    var N = this.P.length > 0 ? Math.sqrt(this.P.length) : 0;\n                    var res = [];\n                    for(var i=0; i<N; i++) {\n                        res.push([this.Y[i*this.dim], this.Y[i*this.dim+1]]);\n                    }\n                    return res;\n                },\n                step: function() {\n                    var N = Math.sqrt(this.P.length); var dim = this.dim;\n                    var cost = 0.0;\n                    var Q = new Float64Array(N*N);\n                    var qu_sum = 0.0;\n                    \n                    for(var i=0;i<N;i++) {\n                        for(var j=i+1;j<N;j++) {\n                            var dsum = 0.0;\n                            for(var d=0;d<dim;d++) {\n                                var dhere = this.Y[i*dim+d] - this.Y[j*dim+d];\n                                dsum += dhere * dhere;\n                            }\n                            var qu = 1.0 / (1.0 + dsum);\n                            Q[i*N+j] = qu; Q[j*N+i] = qu;\n                            qu_sum += 2 * qu;\n                        }\n                    }\n                    \n                    // Gradient\n                    var grad = new Float64Array(N*dim);\n                    for(var i=0;i<N;i++) {\n                        for(var j=0;j<N;j++) {\n                            if(i!=j) {\n                                var qu = Q[i*N+j];\n                                var q = qu / qu_sum;\n                                var p = this.P[i*N+j];\n                                // Prevent NaNs (Exaggeration is standard in early iter but simplified here)\n                                var premult = 4.0 * (p - q) * qu;\n                                for(var d=0;d<dim;d++) {\n                                    grad[i*dim+d] += premult * (this.Y[i*dim+d] - this.Y[j*dim+d]);\n                                }\n                            }\n                        }\n                    }\n\n                    // Update\n                    for(var i=0;i<N*dim;i++) {\n                        var g = grad[i];\n                        if((g > 0.0) != (this.ystep[i] > 0.0)) this.gains[i] += 0.2;\n                        else this.gains[i] *= 0.8;\n                        if(this.gains[i] < 0.01) this.gains[i] = 0.01;\n                        \n                        var momentum = (this.iter < 250) ? 0.5 : 0.8;\n                        this.ystep[i] = momentum * this.ystep[i] - this.epsilon * this.gains[i] * g;\n                        this.Y[i] += this.ystep[i];\n                        \n                        // Center Y\n                        // (Skipping rigorous centering for performance, rely on final map)\n                    }\n                    this.iter++;\n                }\n            };\n            \n            this.embeddedTSNE = tsnejs;\n        }\n    }\n}\n</script>",
+        "format": "<template>\n  <div>\n\n    <!-- SKELETON WHEN LOADING OR CLEARED -->\n    <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:90px; margin-bottom:12px;\"></div>\n\n    <!-- INVITE MESSAGE -->\n    <div\n      v-else-if=\"!meta.sample_id\"\n      style=\"\n        border-left:4px solid #1976d2;\n        background:#e3f2fd;\n        padding:12px;\n        border-radius:6px;\n        margin-bottom:12px;\n        color:#0d47a1;\n        font-size:14px;\n        display:flex;\n        align-items:center;\n        gap:8px;\n      \"\n    >\n      <v-icon color=\"primary\">mdi-information-outline</v-icon>\n      Select a dataset in the table above to display its information.\n    </div>\n\n    <!-- SAMPLE INFO -->\n    <v-row v-else align=\"center\">\n\n      <v-col cols=\"12\" md=\"9\" class=\"border-right\">\n        <div class=\"caption grey--text text-uppercase font-weight-bold mb-1\">\n          Sample Identity\n        </div>\n\n        <div class=\"text-h4 primary--text font-weight-bold\">\n          {{ meta.sample_id }}\n        </div>\n\n        <div class=\"subtitle-1 grey--text text--darken-3 mt-1\">\n          <strong>Project:</strong> {{ meta.project || '--' }}<br>\n          <span class=\"caption\">Acq ID: {{ meta.acq_id || '--' }}</span>\n        </div>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"3\" class=\"text-right\">\n        <a\n          :href=\"downloadUrl\"\n          target=\"_blank\"\n          :style=\"{\n            display:'inline-flex',\n            alignItems:'center',\n            gap:'6px',\n            padding:'10px 16px',\n            background: meta.sample_id ? '#1976d2' : '#90caf9',\n            color:'white',\n            borderRadius:'6px',\n            textDecoration:'none',\n            cursor: meta.sample_id ? 'pointer' : 'not-allowed'\n          }\"\n        >\n          <v-icon left>mdi-download</v-icon>\n          Download EcoTaxa .zip\n        </a>\n      </v-col>\n\n    </v-row>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      loading: true,\n      meta: {\n        sample_id: '',\n        project: '',\n        acq_id: ''\n      }\n    }\n  },\n\n  watch: {\n    msg: {\n      immediate: true,\n      deep: true,\n      handler(val) {\n\n        // --- CLEARING ---\n        if (!val?.payload?.meta || !val.payload.meta.sample_id) {\n          this.loading = false;\n          this.meta = {\n            sample_id: '',\n            project: '',\n            acq_id: ''\n          };\n          return;\n        }\n\n        // --- NORMAL UPDATE ---\n        this.loading = false;\n        this.meta = val.payload.meta;\n      }\n    }\n  },\n\n  computed: {\n    downloadUrl() {\n      if (!this.meta.sample_id) return '#';\n      return `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${this.meta.sample_id}.zip`;\n    }\n  }\n}\n</script>\n\n<style>\n/* Skeleton loader consistent with other widgets */\n\n.ps-skeleton {\n  width: 100%;\n  border-radius: 6px;\n  background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n  background-size: 200% 100%;\n  animation: psSkeletonAnim 1.2s infinite;\n}\n\n@keyframes psSkeletonAnim {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1290,
+        "x": 810,
         "y": 440,
         "wires": [
             []
         ]
     },
     {
-        "id": "d9c0cf13cfa21a19",
-        "type": "delay",
+        "id": "4caf5c846b3b9d01",
+        "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "name": "",
-        "pauseType": "delay",
-        "timeout": "1",
-        "timeoutUnits": "seconds",
-        "rate": "1",
-        "nbRateUnits": "1",
-        "rateUnits": "second",
-        "randomFirst": "1",
-        "randomLast": "5",
-        "randomUnits": "seconds",
-        "drop": false,
-        "allowrate": false,
+        "name": "HEATMAP (object_x, object_y)",
+        "func": "// Heatmap – Flowcell distribution\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\n// Meta from first valid row\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n  if (!lines[i].trim().startsWith(\"[\")) {\n    firstRow = lines[i].split(\"\\t\");\n    break;\n  }\n}\nif (!firstRow) return null;\n\nconst meta = {\n  sample_id: val(firstRow, \"sample_id\") || \"\",\n  project: val(firstRow, \"sample_project\") || \"\",\n  acq_id: val(firstRow, \"acq_id\") || \"\"\n};\n\n// Data: x/y for heatmap\nconst data = lines.slice(1)\n  .filter(l => !l.trim().startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      x: parseFloat(val(r, \"object_x\")),\n      y: parseFloat(val(r, \"object_y\"))\n    };\n  });\n\nmsg.payload = { meta, data };\nreturn msg;\n",
         "outputs": 1,
-        "x": 780,
-        "y": 360,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 500,
         "wires": [
             [
-                "4b133307e9244dd1"
+                "0c90eb450c8d9b01"
             ]
         ]
     },
     {
-        "id": "4244d2ed880cca66",
-        "type": "ui-template",
+        "id": "a5ef1df890e7bb36",
+        "type": "function",
         "z": "14f8c9b5ce1235cc",
-        "group": "0c1537ce71affc2b",
-        "page": "",
-        "ui": "",
-        "name": "Gallery",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "head": "",
-        "format": "<template>\n    <div class=\"pa-0 d-flex flex-column\">\n        <v-card class=\"mb-4 flex-grow-0\" elevation=\"1\">\n            <v-card-text class=\"py-2\">\n                <v-row align=\"center\" justify=\"space-between\">\n                    <v-col cols=\"12\" md=\"3\">\n                        <div class=\"d-flex align-center\">\n                            <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" class=\"mr-2\"></v-icon>\n                            <v-slider\n                                v-model=\"zoom\"\n                                min=\"0.1\"\n                                max=\"3\"\n                                step=\"0.1\"\n                                density=\"compact\"\n                                hide-details\n                                thumb-label\n                                color=\"primary\"\n                            ></v-slider>\n                            <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" class=\"ml-2\"></v-icon>\n                        </div>\n                        <div class=\"text-caption text-center text-grey\">Zoom x{{ zoom.toFixed(1) }}</div>\n                    </v-col>\n\n                    <v-col cols=\"12\" md=\"3\">\n                        <v-select\n                            v-model=\"sortBy\"\n                            :items=\"sortOptions\"\n                            label=\"Sort By\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                            prepend-inner-icon=\"mdi-sort\"\n                        ></v-select>\n                    </v-col>\n\n                    <v-col cols=\"6\" md=\"3\">\n                         <v-select\n                            v-model=\"itemsPerPage\"\n                            :items=\"[12, 24, 48, 100]\"\n                            label=\"Per Page\"\n                            density=\"compact\"\n                            hide-details\n                            variant=\"outlined\"\n                        ></v-select>\n                    </v-col>\n                    \n                    <v-col cols=\"6\" md=\"3\" class=\"text-right\">\n                        <v-chip size=\"small\" variant=\"flat\">\n                            Total: {{ filteredItems.length }}\n                        </v-chip>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n        </v-card>\n\n        <div class=\"gallery-scroll-area flex-grow-1\">\n            <div class=\"gallery-grid\">\n                <div \n                    v-for=\"(item, index) in paginatedItems\" \n                    :key=\"item.id\" \n                    class=\"gallery-item-wrapper\"\n                >\n                    <v-card \n                        class=\"gallery-card\" \n                        hover \n                        variant=\"outlined\" \n                        @click=\"openDetails(item)\"\n                        style=\"border-color: #e0e0e0;\"\n                    >\n                        <div \n                            class=\"img-container\"\n                            :style=\"{ \n                                width: (Math.max(item.object_width * zoom, 40)) + 'px', \n                                height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                                backgroundColor: '#f5f5f5' \n                            }\"\n                        >\n                            <img \n                                :src=\"item.url\" \n                                :style=\"{\n                                    width: (item.object_width * zoom) + 'px',\n                                    height: (item.object_height * zoom) + 'px',\n                                    objectFit: 'contain',\n                                    imageRendering: 'pixelated'\n                                }\"\n                            />\n                            \n                            <div \n                                class=\"mini-scale-bar\" \n                                :style=\"{ width: getScaleBar(item).width + 'px' }\"\n                            ></div>\n                            <div class=\"mini-scale-text\">\n                                {{ getScaleBar(item).label }}\n                            </div>\n                        </div>\n\n                        <v-divider></v-divider>\n                        <div class=\"d-flex justify-center pa-0 bg-white\">\n                            <v-btn \n                                icon=\"mdi-download\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"grey-darken-1\"\n                                @click.stop=\"downloadImage(item.url, item.id)\"\n                                title=\"Download\"\n                            ></v-btn>\n                             <v-btn \n                                icon=\"mdi-eye\" \n                                size=\"x-small\" \n                                variant=\"text\" \n                                color=\"primary\"\n                                @click.stop=\"openDetails(item)\"\n                                title=\"View Details\"\n                            ></v-btn>\n                        </div>\n                    </v-card>\n                </div>\n                \n                <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                    No objects found.\n                </div>\n            </div>\n        </div>\n\n        <div class=\"text-center pt-2 flex-grow-0\">\n            <v-pagination\n                v-model=\"page\"\n                :length=\"totalPages\"\n                :total-visible=\"7\"\n                density=\"compact\"\n                rounded=\"circle\"\n                color=\"primary\"\n            ></v-pagination>\n        </div>\n\n        <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n            <v-card v-if=\"selectedItem\">\n                <v-toolbar color=\"primary\" density=\"compact\">\n                    <v-toolbar-title class=\"text-subtitle-1\">Object Analysis</v-toolbar-title>\n                    <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\"></v-btn>\n                </v-toolbar>\n                <v-card-text class=\"pa-4\">\n                    <v-row>\n                        <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                            <img :src=\"selectedItem.url\" style=\"max-width: 100%; max-height: 300px; image-rendering: pixelated;\" />\n                            <div class=\"text-caption text-grey mt-1\">\n                                Resolution: {{ meta.resolution }} units/px\n                            </div>\n                        </v-col>\n                        <v-col cols=\"12\">\n                            <v-table density=\"compact\">\n                                <thead>\n                                    <tr><th class=\"text-left\">Metric</th><th class=\"text-right\">Value</th></tr>\n                                </thead>\n                                <tbody>\n                                    <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                        <td>{{ formatKeyName(key) }}</td>\n                                        <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                    </tr>\n                                </tbody>\n                            </v-table>\n                        </v-col>\n                    </v-row>\n                </v-card-text>\n            </v-card>\n        </v-dialog>\n    </div>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5, // Default zoom set to 0.5\n            \n            // Pagination & Sorting\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            \n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let result = [...this.rawData];\n            result.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return result;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            const end = start + this.itemsPerPage;\n            return this.filteredItems.slice(start, end);\n        }\n    },\n    watch: {\n        msg: {\n            handler(newValue) {\n                if (newValue && newValue.payload && newValue.payload.data) {\n                    this.rawData = newValue.payload.data;\n                    this.meta = newValue.payload.meta || { resolution: 1 };\n                    this.keys = newValue.payload.keys || [];\n                    this.page = 1;\n                }\n            },\n            deep: true\n        },\n        sortBy() { this.page = 1; }, \n        totalPages(newVal) {\n            if (this.page > newVal && newVal > 0) {\n                this.page = newVal;\n            }\n        }\n    },\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n        // --- NEW ADAPTIVE SCALE BAR LOGIC ---\n        getScaleBar(item) {\n            const res = this.meta.resolution || 1; // e.g., 0.75 um/px\n            const realWidth = item.object_width * res; // The real world width of the object\n            \n            // We want a bar that is roughly 1/3rd to 1/4th of the object's visual width\n            // This prevents a 100px bar on a 20px image.\n            const targetSize = realWidth / 3;\n\n            // Algorithm to find the nearest \"Nice Number\" (1, 2, 5, 10, 20, 50, 100...)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(targetSize)));\n            const residual = targetSize / magnitude;\n            \n            let niceNumber;\n            if (residual > 5) niceNumber = 5 * magnitude;       // e.g. 80 -> 50\n            else if (residual > 2) niceNumber = 2 * magnitude;  // e.g. 40 -> 20\n            else niceNumber = 1 * magnitude;                    // e.g. 15 -> 10\n            \n            // Fallback for very small objects to ensure at least 1 unit\n            if (niceNumber === 0) niceNumber = 1;\n\n            // Calculate how many pixels this \"Nice Number\" takes up\n            // pixels = real_units / resolution\n            const barPixels = niceNumber / res;\n\n            return {\n                width: barPixels * this.zoom, // Adjust for the current UI zoom level\n                label: niceNumber\n            };\n        },\n        formatKeyName(key) {\n            return key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n        formatMeta(item) {\n            const display = {};\n            const keysToUse = this.keys.length ? this.keys : Object.keys(item);\n            \n            keysToUse.forEach(k => {\n                if (k === 'url' || k === 'id') return; \n                let val = item[k];\n                if (typeof val === 'number') val = val.toFixed(2);\n                \n                let unit = '';\n                const keyLower = k.toLowerCase();\n                if (keyLower.includes('area')) unit = ' px²';\n                else if (keyLower.includes('width') || keyLower.includes('height') || keyLower.includes('major') || keyLower.includes('minor') || keyLower.includes('perim') || keyLower.includes('diameter') || keyLower.includes('_x') || keyLower.includes('_y')) unit = ' px';\n                else if (keyLower.includes('hue') || keyLower.includes('angle')) unit = '°';\n                else if (keyLower.includes('saturation')) unit = '%';\n                \n                const cleanKey = k.replace('object_', '');\n                display[cleanKey] = val + unit;\n            });\n            return display;\n        },\n        downloadImage(url, id) {\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `object_${id}.jpg`;\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n        }\n    }\n}\n</script>\n\n<style scoped>\n.full-height-container {\n    height: 100%;\n    max-height: 100vh; \n}\n\n.gallery-scroll-area {\n    overflow-y: auto;\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-end; \n    justify-content: center;\n}\n\n.gallery-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n\n.gallery-card {\n    transition: transform 0.2s;\n    cursor: pointer;\n}\n.gallery-card:hover {\n    transform: translateY(-2px);\n    border-color: #2196F3 !important;\n}\n\n.img-container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    margin: 0 auto;\n    border-bottom: 1px solid #eee;\n}\n\n/* Individual Scale Bar Styles */\n.mini-scale-bar {\n    position: absolute;\n    bottom: 2px;\n    right: 2px;\n    height: 3px;\n    background-color: white;\n    border: 1px solid black;\n    pointer-events: none;\n    z-index: 2;\n    transition: width 0.3s ease; /* Smooth transition when zooming */\n}\n\n.mini-scale-text {\n    position: absolute;\n    bottom: 5px;\n    right: 2px;\n    font-size: 9px;\n    color: black;\n    text-shadow: 0px 0px 2px white;\n    font-weight: 700;\n    line-height: 1;\n    z-index: 2;\n}\n</style>",
-        "storeOutMessages": true,
-        "passthru": true,
+        "name": "ESD Histogram (object_equivalent_diameter)",
+        "func": "// ESD Size Spectrum – TSV → {meta, data[{d}]}\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n  if (!lines[i].startsWith(\"[\")) {\n    firstRow = lines[i].split(\"\\t\");\n    break;\n  }\n}\nconst meta = {\n  sample_id: firstRow ? (val(firstRow, \"sample_id\") || \"\") : \"\"\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      d: parseFloat(val(r, \"object_equivalent_diameter\"))\n    };\n  });\n\nmsg.payload = { meta, data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 550,
+        "y": 540,
+        "wires": [
+            [
+                "0a559ab05af2548e"
+            ]
+        ]
+    },
+    {
+        "id": "8cdf3c5527b9cb21",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "TIMELINE (sequence index + area)",
+        "func": "// Timeline – seq index vs object_area\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nlet seq = 0;\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      seq: seq++,\n      area: parseFloat(val(r, \"object_area\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 520,
+        "y": 580,
+        "wires": [
+            [
+                "7b9d103ec5981051"
+            ]
+        ]
+    },
+    {
+        "id": "e26832811411f850",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "COLORSPACE (Saturation vs Value)",
+        "func": "// Colorspace – MeanSaturation vs MeanValue\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      s: parseFloat(val(r, \"object_MeanSaturation\")),\n      v: parseFloat(val(r, \"object_MeanValue\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 530,
+        "y": 620,
+        "wires": [
+            [
+                "23a78a078fa1eca8"
+            ]
+        ]
+    },
+    {
+        "id": "448a5c6830c6514f",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "ASPECT (Width vs Height)",
+        "func": "// Aspect – width vs height\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      w: parseFloat(val(r, \"object_width\")),\n      h: parseFloat(val(r, \"object_height\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 500,
+        "y": 660,
+        "wires": [
+            [
+                "09f4914fc0a54566"
+            ]
+        ]
+    },
+    {
+        "id": "ac9d555964747130",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "GREENNESS (custom index + circularity)",
+        "func": "// Greenness vs Circularity – custom_greenness + object_circ.\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    const hue = parseFloat(val(r, \"object_MeanHue\")) || 0;\n    const circ = parseFloat(val(r, \"object_circ.\")) || 0;\n    const greenDist = Math.abs(hue - 80);\n    const g = Math.max(0, 100 - greenDist);\n    return { g, circ };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 540,
+        "y": 700,
+        "wires": [
+            [
+                "7f4d047a4c73eb61"
+            ]
+        ]
+    },
+    {
+        "id": "11323481847790c0",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "COMPLEXITY (Area vs Perimeter)",
+        "func": "// Complexity – Area vs Perimeter\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      area: parseFloat(val(r, \"object_area\")),\n      per: parseFloat(val(r, \"object_perim.\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 520,
+        "y": 740,
+        "wires": [
+            [
+                "a7c8654291022da1"
+            ]
+        ]
+    },
+    {
+        "id": "8425012e07c3700f",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "TEXTURE (Area vs StdValue)",
+        "func": "// Texture – Area vs StdValue\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n  const idx = headers.indexOf(col);\n  return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n  .filter(l => !l.startsWith(\"[\"))\n  .map(l => {\n    const r = l.split(\"\\t\");\n    return {\n      area: parseFloat(val(r, \"object_area\")),\n      std: parseFloat(val(r, \"object_StdValue\"))\n    };\n  });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 500,
+        "y": 780,
+        "wires": [
+            [
+                "ed9d6e31cc3a01b1"
+            ]
+        ]
+    },
+    {
+        "id": "512e86195d14e773",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "SOLIDITY (Histogram)",
+        "func": "// Solidity – histogram of object_solidity\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const idx = headers.indexOf(col);\n    return idx >= 0 ? row[idx] : null;\n};\n\nconst data = lines.slice(1)\n    .filter(l => !l.startsWith(\"[\"))\n    .map(l => {\n        const r = l.split(\"\\t\");\n        return {\n            sol: parseFloat(val(r, \"object_solidity\"))\n        };\n    });\n\nmsg.payload = { data };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 480,
+        "y": 820,
+        "wires": [
+            [
+                "c15ef66d7e115bd3"
+            ]
+        ]
+    },
+    {
+        "id": "0c90eb450c8d9b01",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "90b33e458dd29d04",
+        "page": "",
+        "ui": "",
+        "name": "Heatmap",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:300px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0 0%,#f5f5f5 50%,#e0e0e0 100%);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk {\n  0% { background-position:200% 0; }\n  100% { background-position:-200% 0; }\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, points:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0){\n          this.loading = true;\n          this.points = [];\n          if(this.$refs.plot && window.Plotly) window.Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.points = m.payload.data || [];\n        this.loading = this.points.length === 0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n      if(!el) return;\n\n      if(!this.points.length){\n        this.loading=true;\n        window.Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.points.map(p=>p.x),\n        y:this.points.map(p=>p.y),\n        type:'histogram2d',\n        colorscale:'Plotly3',\n        nbinsx:100,\n        nbinsy:80\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:40,r:20},\n        xaxis:{title:\"X (px)\"},\n        yaxis:{title:\"Y (px)\",autorange:\"reversed\"},\n        hovermode:false,\n        plot_bgcolor:\"#eef3ff\"\n      };\n\n      window.Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 1300,
-        "y": 360,
+        "x": 820,
+        "y": 500,
         "wires": [
             []
         ]
     },
     {
-        "id": "92e2ed9f115c3991",
+        "id": "9be1cc713ac79a7b",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "Sample Identity Metadata Only",
+        "func": "// FUNCTION: Extract minimal metadata for the “Sample Identity” panel\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const idx = headers.indexOf(col);\n    return idx >= 0 ? row[idx] : null;\n};\n\n// --- 1. Find first data row (skip [f] / [t] metadata-like lines) ---\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    if (!lines[i].trim().startsWith(\"[\")) {\n        firstRow = lines[i].split(\"\\t\");\n        break;\n    }\n}\nif (!firstRow) return null;\n\n// --- 2. Extract minimal metadata ---\nconst meta = {\n    sample_id: val(firstRow, \"sample_id\") || \"\",\n    project: val(firstRow, \"sample_project\") || \"\",\n    acq_id: val(firstRow, \"acq_id\") || \"\"\n};\n\n// --- 3. Output ONLY the metadata ---\nmsg.payload = { meta };\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 440,
+        "wires": [
+            [
+                "2ca2f83cc939607f"
+            ]
+        ]
+    },
+    {
+        "id": "0a559ab05af2548e",
         "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "group": "fa6393a7d7e3b7d7",
+        "group": "47800358cf7cee25",
         "page": "",
         "ui": "",
-        "name": "Selector",
+        "name": "ESD Histogram",
         "order": 1,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <v-card>\n        <v-card-title>\n            <span class=\"text-h6\">Select Acquisition</span>\n            <v-spacer></v-spacer>\n            <v-text-field\n                v-model=\"search\"\n                append-inner-icon=\"mdi-magnify\"\n                label=\"Search...\"\n                single-line\n                hide-details\n                variant=\"outlined\"\n                density=\"compact\"\n                style=\"max-width: 300px;\"\n            ></v-text-field>\n        </v-card-title>\n\n        <v-data-table\n            :headers=\"headers\"\n            :items=\"items\"\n            :search=\"search\"\n            item-value=\"acquisition_id\"\n            density=\"compact\"\n            class=\"elevation-1\"\n        >\n            <template v-slot:item.image_acquired_count=\"{ item }\">\n                <v-chip size=\"small\" color=\"primary\" variant=\"tonal\">\n                    {{ item.image_acquired_count }}\n                </v-chip>\n            </template>\n\n            <template v-slot:item.links=\"{ item }\">\n                \n                <v-tooltip text=\"View Gallery\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-image-multiple\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"blue-darken-2\" \n                            :href=\"item.gallery\" \n                            target=\"_blank\"\n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n\n                <v-tooltip text=\"Download Zip\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-download\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"orange-darken-2\" \n                            :href=\"item.export\" \n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n            </template>\n\n            <template v-slot:item.actions=\"{ item }\">\n                        <v-btn \n                            icon=\"mdi-chart-scatter-plot-hexbin\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"primary\" \n                            @click=\"selectAcquisition(item)\"\n                        ></v-btn>\n            </template>\n        </v-data-table>\n    </v-card>\n</template>\n\n<script>\n    export default {\n        data() { \n            return {\n                search: '',\n                items: [],\n                headers: [\n                    { title: 'Project', key: 'project_name', sortable: true },\n                    { title: 'Sample ID', key: 'sample_id', sortable: true },\n                    { title: 'Acquisition ID', key: 'acquisition_id', sortable: true },\n                    { title: 'Images', key: 'image_acquired_count', sortable: true, align: 'end' },\n                    { title: 'Resources', key: 'links', sortable: false, align: 'center' }, // New Column\n                    { title: 'Select', key: 'actions', sortable: false, align: 'end' },\n                ]\n            }\n        },\n        watch: {\n            msg: {\n                handler(newValue) {\n                    if (newValue && Array.isArray(newValue.payload)) {\n                        this.items = newValue.payload;\n                    }\n                },\n                deep: true\n            }\n        },\n        mounted() {\n            if (this.msg && Array.isArray(this.msg.payload)) {\n                this.items = this.msg.payload;\n            }\n        },\n        methods: {\n            selectAcquisition(item) {\n                this.send({\n                    topic: \"selected_acquisition\",\n                    payload: item\n                });\n            }\n        }\n    }\n</script>",
+        "format": "<template>\n  <div style=\"width:100%; height:300px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) window.Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        window.Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.d),\n        type:\"histogram\",\n        marker:{color:\"teal\"}\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:40,r:20},\n        xaxis:{title:\"ESD\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 560,
-        "y": 180,
+        "x": 840,
+        "y": 540,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "7b9d103ec5981051",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "1d9c6927a0e0a71b",
+        "page": "",
+        "ui": "",
+        "name": "Timeline",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.seq),\n        y:this.rows.map(r=>r.area),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{size:10,color:\"blue\",opacity:0.5},\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Acq Sequence\"},\n        yaxis:{title:\"Area\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 820,
+        "y": 580,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "23a78a078fa1eca8",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "03ad1c8f517e8769",
+        "page": "",
+        "ui": "",
+        "name": "Colorspace (Saturation vs Value)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0 0%,#f5f5f5 50%,#e0e0e0 100%);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk {\n  0% {background-position:200% 0;}\n  100% {background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot && window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.s),\n        y:this.pts.map(p=>p.v),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"magenta\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Saturation\"},\n        yaxis:{title:\"Brightness\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 890,
+        "y": 620,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "09f4914fc0a54566",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "0be15f8190e6fd43",
+        "page": "",
+        "ui": "",
+        "name": "Aspect (Width vs Height)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk {\n  0% {background-position:200% 0;}\n  100% {background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.w),\n        y:this.pts.map(p=>p.h),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"orange\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Width\"},\n        yaxis:{title:\"Height\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 870,
+        "y": 660,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "7f4d047a4c73eb61",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "1edc962c44888abc",
+        "page": "",
+        "ui": "",
+        "name": "Greenness",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton {\n  width:100%;\n  height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite;\n  border-radius:6px;\n}\n@keyframes psk { \n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.g),\n        y:this.pts.map(p=>p.circ),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"#4CAF50\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Green Index\"},\n        yaxis:{title:\"Circularity\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 830,
+        "y": 700,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "a7c8654291022da1",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "67c63cc92c23c4b1",
+        "page": "",
+        "ui": "",
+        "name": "Complexity (Area vs Perimeter)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton{\n  width:100%; height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite; border-radius:6px;\n}\n@keyframes psk{\n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true; this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.area),\n        y:this.pts.map(p=>p.per),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"purple\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Area\"},\n        yaxis:{title:\"Perimeter\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 890,
+        "y": 740,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ed9d6e31cc3a01b1",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "95a152a68b7ba779",
+        "page": "",
+        "ui": "",
+        "name": "Texture (Area vs Std)",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton{\n  width:100%; height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite; border-radius:6px;\n}\n@keyframes psk{\n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.area),\n        y:this.pts.map(p=>p.std),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{ size:10, color:\"brown\", opacity:0.5 },\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Area\"},\n        yaxis:{title:\"Texture (Std Dev)\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 860,
+        "y": 780,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "c15ef66d7e115bd3",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "1baa943e505febf1",
+        "page": "",
+        "ui": "",
+        "name": "Solidity Histogram",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<style>\n.ps-skeleton{\n  width:100%; height:100%;\n  background:linear-gradient(90deg,#e0e0e0,#f5f5f5,#e0e0e0);\n  background-size:200% 100%;\n  animation:psk 1.2s infinite; border-radius:6px;\n}\n@keyframes psk{ \n  0%{background-position:200% 0;}\n  100%{background-position:-200% 0;}\n}\n</style>\n\n<script>\nexport default {\n  data(){ return { loading:true, pts:[] } },\n\n  watch:{\n    msg:{ immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.pts=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.pts = m.payload.data || [];\n        this.loading = this.pts.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.pts.length){ this.loading=true; Plotly.purge(el); return; }\n\n      this.loading=false;\n\n      const trace={\n        x:this.pts.map(p=>p.sol),\n        type:\"histogram\",\n        marker:{color:\"#3F51B5\"}\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Solidity\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n}\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 850,
+        "y": 820,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "63ce87d36ae8f172",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "EXPLORER",
+        "func": "// Explorer Function Node\n// TSV → {meta, keys, data: [{id, url, ...keys}]}\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\n// 1. Parse Headers\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const i = headers.indexOf(col);\n    return i >= 0 ? row[i] : null;\n};\n\n// 2. Extract Meta from first valid data row\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    // Skip rows starting with '[' (metadata comments)\n    if (!lines[i].trim().startsWith(\"[\")) {\n        firstRow = lines[i].split(\"\\t\");\n        break;\n    }\n}\n\n// Default meta\nconst meta = {\n    sample_id: \"\",\n    project: \"\",\n    acq_id: \"\",\n    resolution: 1.0 // Default fallback\n};\n\nif (firstRow) {\n    meta.sample_id = val(firstRow, \"sample_id\") || \"\";\n    meta.project = val(firstRow, \"sample_project\") || \"\";\n    meta.acq_id = val(firstRow, \"acq_id\") || \"\";\n    \n    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\"\n];\n\nlet seq = 0;\nconst data = [];\n\n// 4. Process Data Lines\nfor (let i = 1; i < lines.length; i++) {\n    const line = lines[i];\n    if (line.trim().startsWith(\"[\")) continue;\n\n    const row = line.split(\"\\t\");\n\n    const item = {\n        id: val(row, \"object_id\"),\n        // Construct URL\n        url: `/ps/data/browse/api/preview/big/objects/${val(row,\"object_date\")}/${val(row,\"sample_id\")}/${val(row,\"acq_id\")}/${val(row,\"img_file_name\")}`,\n        sequence_index: seq++\n    };\n\n    // Parse numeric keys\n    explorerKeys.forEach(k => {\n        let v = parseFloat(val(row, k));\n        item[k] = isNaN(v) ? 0 : v;\n    });\n\n    // Custom calc for greenness (example)\n    const hue = item.object_MeanHue || 0;\n    const dist = Math.abs(hue - 80);\n    item.custom_greenness = Math.max(0, 100 - dist);\n\n    data.push(item);\n}\n\nmsg.payload = {\n    meta,\n    keys: explorerKeys,\n    data\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 450,
+        "y": 900,
         "wires": [
             [
-                "aefbf6f96248c398"
+                "d57a5bca66c04989"
+            ]
+        ]
+    },
+    {
+        "id": "d57a5bca66c04989",
+        "type": "ui-template",
+        "z": "14f8c9b5ce1235cc",
+        "group": "c5651e1a3e56f3f5",
+        "page": "",
+        "ui": "",
+        "name": "Explorer",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              contain\n              class=\"mb-3\"\n            >\n              <template #placeholder>\n                <div class=\"d-flex align-center justify-center fill-height\">\n                  <v-progress-circular indeterminate color=\"primary\"></v-progress-circular>\n                </div>\n              </template>\n            </v-img>\n\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n            <div class=\"text-caption text-grey text-right\">\n              Res: {{ meta.resolution }} µm/px\n            </div>\n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    v-if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\"\n      s.onload = () => this.draw()\n      document.head.appendChild(s)\n    } else this.draw()\n  },\n\n  computed: {\n    // Calculate a nice round number for the scale bar length (e.g. 50um, 100um)\n    // based on the size of the current object.\n    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      // 1. Get real width of object in microns\n      // Fallback to 100px if object_width is missing\n      const objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * this.meta.resolution;\n\n      // 2. Target bar size ~ 25% of the object width\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\n      // 3. Snap to nearest nice number (10, 20, 50, 100, 200, 500...)\n      const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n      const residual = target / magnitude;\n      \n      let niceScalar = 1;\n      if (residual > 5) niceScalar = 10;\n      else if (residual > 2) niceScalar = 5;\n      else niceScalar = 2;\n\n      return niceScalar * magnitude;\n    },\n\n    scaleBarPixels() {\n      // Resolution = Microns per Pixel\n      // Pixels = Microns / Resolution\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} µm`\n    }\n  },\n\n  methods: {\n    fmt(v) { return typeof v === \"number\" ? v.toFixed(2) : v },\n\n    draw() {\n      if (!window.Plotly || !this.items.length) return\n\n      this.loading = false\n      const el = this.$refs.plot\n\n      const trace = {\n        x: this.items.map(d => d[this.xAxis]),\n        y: this.items.map(d => d[this.yAxis]),\n        mode: 'markers',\n        type: 'scatter',\n        hoverinfo: 'none',\n        marker: {\n          size: 8,\n          color: '#1976D2',\n          opacity: 0.6,\n          line: { width: 1, color: 'white' }\n        }\n      }\n\n      const layout = {\n        margin: { t: 20, b: 40, l: 50, r: 20 },\n        xaxis: { title: this.xAxis },\n        yaxis: { title: this.yAxis },\n        hovermode: 'closest',\n        dragmode: 'zoom',\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff'\n      }\n\n      Plotly.newPlot(el, [trace], layout, { responsive: true })\n        .then(() => {\n          el.on(\"plotly_hover\", ev => {\n            const i = ev.points[0].pointIndex\n            this.hovered = this.items[i]\n          })\n          el.on(\"plotly_unhover\", () => {\n            this.tooltip.show = false\n          })\n        })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.plot-container {\n  width: 100%;\n  height: 600px;\n}\n\n.ps-skeleton {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  animation: shimmer 1.5s infinite;\n  border-radius: 4px;\n}\n\n@keyframes shimmer {\n  0% { background-position: -200px 0; }\n  100% { background-position: 200px 0; }\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* Prevent the bar from shrinking */\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\n  /* Add tick marks */\n  border-left: 1px solid #333;\n  border-right: 1px solid #333;\n}\n\n.scale-label {\n  font-size: 11px;\n  text-align: center;\n  color: #555;\n  font-weight: 600;\n}\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 820,
+        "y": 900,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "384aa9ab83bfe566",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "Clearing plots",
+        "func": "// This function clears the plot by sending an empty data array.\n// Any template using msg.payload.data will immediately purge the plot.\n\nmsg.payload = {\n    data: []\n};\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 580,
+        "y": 380,
+        "wires": [
+            [
+                "0c90eb450c8d9b01",
+                "0a559ab05af2548e",
+                "7b9d103ec5981051",
+                "23a78a078fa1eca8",
+                "09f4914fc0a54566",
+                "7f4d047a4c73eb61",
+                "a7c8654291022da1",
+                "ed9d6e31cc3a01b1",
+                "c15ef66d7e115bd3",
+                "2ca2f83cc939607f",
+                "d57a5bca66c04989",
+                "4244d2ed880cca66"
+            ]
+        ]
+    },
+    {
+        "id": "9abf70a949e76eaf",
+        "type": "function",
+        "z": "14f8c9b5ce1235cc",
+        "name": "GALLERY",
+        "func": "// GALLERY Function Node\n// TSV → { data: [], meta: { resolution: ... }, keys: ... }\n\n// 1. Handle Clear Signals\nif (msg.clear === true || (msg.payload && msg.payload.clear === true)) {\n    msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n    return msg;\n}\n\n// 2. Validate Payload\nif (!msg.payload) return null;\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) {\n    msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n    return msg;\n}\n\n// 3. Parse Headers\nconst headers = lines[0].split('\\t');\nconst get = (row, key) => {\n    const idx = headers.indexOf(key);\n    return idx >= 0 ? row[idx] : null;\n};\n\n// 4. Extract Meta (Resolution is key here)\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    const L = lines[i].trim();\n    if (!L.startsWith('[') && L !== '') {\n        firstRow = lines[i].split('\\t');\n        break;\n    }\n}\n\nconst meta = {\n    sample_id: 'N/A',\n    project: 'N/A',\n    acq_id: 'N/A',\n    resolution: 1.0 // Default fallback\n};\n\nif (firstRow) {\n    meta.sample_id = get(firstRow, 'sample_id') || \"\";\n    meta.project   = get(firstRow, 'sample_project') || \"\";\n    meta.acq_id    = get(firstRow, 'acq_id') || \"\";\n\n    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\"\n];\n\nconst data = [];\n\n// 6. Process Rows\nfor (let i = 1; i < lines.length; i++) {\n    const rowLine = lines[i].trim();\n    if (rowLine.startsWith('[') || rowLine === '') continue;\n\n    const row = rowLine.split('\\t');\n    if (row.length !== headers.length) continue;\n\n    const item = {\n        id: get(row, 'object_id'),\n        // Construct Image URL\n        url: `/ps/data/browse/api/preview/big/objects/${get(row, 'object_date')}/${get(row, 'sample_id')}/${get(row, 'acq_id')}/${get(row, 'img_file_name')}`\n    };\n\n    // Parse numeric values\n    usefulKeys.forEach(k => {\n        let v = parseFloat(get(row, k));\n        item[k] = isNaN(v) ? 0 : v;\n    });\n\n    data.push(item);\n}\n\nmsg.payload = {\n    data,\n    keys: usefulKeys,\n    meta\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 440,
+        "y": 960,
+        "wires": [
+            [
+                "4244d2ed880cca66"
             ]
         ]
     },
+    {
+        "id": "d77ed8081a657507",
+        "type": "delay",
+        "z": "14f8c9b5ce1235cc",
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "1",
+        "timeoutUnits": "seconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 180,
+        "y": 320,
+        "wires": [
+            [
+                "5ec998719a884cfe"
+            ]
+        ]
+    },
+    {
+        "id": "bdf84e9e1e0caa90",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 2",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 380,
+        "y": 360,
+        "wires": []
+    },
     {
         "id": "8e11bb014b9664be",
         "type": "ui-template",

From 392b194ea1c4487990ae9122c3898afce492dec6 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 19:17:34 +0000
Subject: [PATCH 22/36] update

---
 node-red/projects/dashboard/flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 013285c41..95802682e 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -4744,7 +4744,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            loading: true,\n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let arr = [...this.rawData];\n            arr.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return arr;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            return this.filteredItems.slice(start, start + this.itemsPerPage);\n        }\n    },\n\n    watch: {\n        msg: {\n            deep: true,\n            handler(m) {\n                if (!m || !m.payload) return;\n                if (m.payload.meta) this.meta = m.payload.meta;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} µm` };\n            } else {\n                // For Modal: Calculate Percentage of the total image width\n                // (Bar Microns / Total Image Microns) * 100\n                const percent = (finalMicrons / realWidthMicrons) * 100;\n                return { width: percent, label: `${finalMicrons} µm` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n\n        formatMeta(item) {\n            const out = {};\n            for (let k of this.keys) {\n                if (k === \"url\" || k === \"id\") continue;\n                let v = item[k];\n                if (typeof v === \"number\") v = v.toFixed(2);\n                let unit = \"\";\n                const KL = k.toLowerCase();\n                if (KL.includes(\"area\")) unit = \" px²\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"°\";\n                out[k.replace(\"object_\", \"\")] = v + unit;\n            }\n            return out;\n        },\n\n        downloadImage(url, id) {\n            const a = document.createElement(\"a\");\n            a.href = url;\n            a.download = `object_${id}.jpg`;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n        }\n    }\n}\n</script>\n\n\n<style scoped>\n/* GALLERY GRID */\n.gallery-scroll-area {\n    overflow-y: auto;\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n    align-items: flex-end;\n}\n\n/* SKELETON LOADER */\n.gallery-skeleton {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n}\n.skeleton-box {\n    width: 120px;\n    height: 120px;\n    border-radius: 6px;\n    background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n    background-size: 200% 100%;\n    animation: sk 1.2s infinite;\n}\n@keyframes sk {\n    0% { background-position:200% 0; }\n    100% { background-position:-200% 0; }\n}\n\n.gallery-item-wrapper { display: flex; flex-direction: column; align-items: center; }\n.gallery-card { transition: transform 0.2s; cursor: pointer; }\n.gallery-card:hover { transform: translateY(-2px); border-color: #1976D2 !important; }\n.img-container { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n\n/* --- THUMBNAIL SCALE BAR --- */\n.mini-scale-bar {\n    position:absolute; bottom:2px; right:2px;\n    height:3px; \n    background: rgba(255,255,255,0);\n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.mini-scale-text {\n    position:absolute; bottom:6px; right:2px;\n    font-size: 10px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n\n/* --- MODAL SCALE BAR (NEW) --- */\n.modal-scale-bar {\n    position:absolute; \n    bottom: 10px; \n    right: 10px;\n    height: 6px; \n    background: rgba(255,255,255,0); \n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.modal-scale-text {\n    position:absolute; \n    bottom: 18px; \n    right: 10px;\n    font-size: 14px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n</style>",
+        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            loading: true,\n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' }\n            ]\n        }\n    },\n\n    computed: {\n        filteredItems() {\n            if (!this.rawData) return [];\n            let arr = [...this.rawData];\n            arr.sort((a, b) => b[this.sortBy] - a[this.sortBy]);\n            return arr;\n        },\n        totalPages() {\n            return Math.ceil(this.filteredItems.length / this.itemsPerPage);\n        },\n        paginatedItems() {\n            const start = (this.page - 1) * this.itemsPerPage;\n            return this.filteredItems.slice(start, start + this.itemsPerPage);\n        }\n    },\n\n    watch: {\n        msg: {\n            deep: true,\n            handler(m) {\n                if (!m || !m.payload) return;\n                if (m.payload.meta) this.meta = m.payload.meta;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} µm` };\n            } else {\n                // For Modal: Calculate Percentage of the total image width\n                // (Bar Microns / Total Image Microns) * 100\n                const percent = (finalMicrons / realWidthMicrons) * 100;\n                return { width: percent, label: `${finalMicrons} µm` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n\n        formatMeta(item) {\n            const out = {};\n            for (let k of this.keys) {\n                if (k === \"url\" || k === \"id\") continue;\n                let v = item[k];\n                if (typeof v === \"number\") v = v.toFixed(2);\n                let unit = \"\";\n                const KL = k.toLowerCase();\n                if (KL.includes(\"area\")) unit = \" px²\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"°\";\n                out[k.replace(\"object_\", \"\")] = v + unit;\n            }\n            return out;\n        },\n\n        downloadImage(url, id) {\n            const a = document.createElement(\"a\");\n            a.href = url;\n            a.download = `object_${id}.jpg`;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n        }\n    }\n}\n</script>\n\n\n<style scoped>\n/* GALLERY GRID */\n.gallery-scroll-area {\n    min-height:600px;\n    overflow-y: auto;\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n    align-items: flex-end;\n}\n\n/* SKELETON LOADER */\n.gallery-skeleton {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n}\n.skeleton-box {\n    width: 120px;\n    height: 120px;\n    border-radius: 6px;\n    background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n    background-size: 200% 100%;\n    animation: sk 1.2s infinite;\n}\n@keyframes sk {\n    0% { background-position:200% 0; }\n    100% { background-position:-200% 0; }\n}\n\n.gallery-item-wrapper { display: flex; flex-direction: column; align-items: center; }\n.gallery-card { transition: transform 0.2s; cursor: pointer; }\n.gallery-card:hover { transform: translateY(-2px); border-color: #1976D2 !important; }\n.img-container { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n\n/* --- THUMBNAIL SCALE BAR --- */\n.mini-scale-bar {\n    position:absolute; bottom:2px; right:2px;\n    height:3px; \n    background: rgba(255,255,255,0);\n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.mini-scale-text {\n    position:absolute; bottom:6px; right:2px;\n    font-size: 10px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n\n/* --- MODAL SCALE BAR (NEW) --- */\n.modal-scale-bar {\n    position:absolute; \n    bottom: 10px; \n    right: 10px;\n    height: 6px; \n    background: rgba(255,255,255,0); \n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.modal-scale-text {\n    position:absolute; \n    bottom: -15px;\n    right: 0px;\n    font-size: 14px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -5254,7 +5254,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              contain\n              class=\"mb-3\"\n            >\n              <template #placeholder>\n                <div class=\"d-flex align-center justify-center fill-height\">\n                  <v-progress-circular indeterminate color=\"primary\"></v-progress-circular>\n                </div>\n              </template>\n            </v-img>\n\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n            <div class=\"text-caption text-grey text-right\">\n              Res: {{ meta.resolution }} µm/px\n            </div>\n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    v-if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\"\n      s.onload = () => this.draw()\n      document.head.appendChild(s)\n    } else this.draw()\n  },\n\n  computed: {\n    // Calculate a nice round number for the scale bar length (e.g. 50um, 100um)\n    // based on the size of the current object.\n    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      // 1. Get real width of object in microns\n      // Fallback to 100px if object_width is missing\n      const objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * this.meta.resolution;\n\n      // 2. Target bar size ~ 25% of the object width\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\n      // 3. Snap to nearest nice number (10, 20, 50, 100, 200, 500...)\n      const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n      const residual = target / magnitude;\n      \n      let niceScalar = 1;\n      if (residual > 5) niceScalar = 10;\n      else if (residual > 2) niceScalar = 5;\n      else niceScalar = 2;\n\n      return niceScalar * magnitude;\n    },\n\n    scaleBarPixels() {\n      // Resolution = Microns per Pixel\n      // Pixels = Microns / Resolution\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} µm`\n    }\n  },\n\n  methods: {\n    fmt(v) { return typeof v === \"number\" ? v.toFixed(2) : v },\n\n    draw() {\n      if (!window.Plotly || !this.items.length) return\n\n      this.loading = false\n      const el = this.$refs.plot\n\n      const trace = {\n        x: this.items.map(d => d[this.xAxis]),\n        y: this.items.map(d => d[this.yAxis]),\n        mode: 'markers',\n        type: 'scatter',\n        hoverinfo: 'none',\n        marker: {\n          size: 8,\n          color: '#1976D2',\n          opacity: 0.6,\n          line: { width: 1, color: 'white' }\n        }\n      }\n\n      const layout = {\n        margin: { t: 20, b: 40, l: 50, r: 20 },\n        xaxis: { title: this.xAxis },\n        yaxis: { title: this.yAxis },\n        hovermode: 'closest',\n        dragmode: 'zoom',\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff'\n      }\n\n      Plotly.newPlot(el, [trace], layout, { responsive: true })\n        .then(() => {\n          el.on(\"plotly_hover\", ev => {\n            const i = ev.points[0].pointIndex\n            this.hovered = this.items[i]\n          })\n          el.on(\"plotly_unhover\", () => {\n            this.tooltip.show = false\n          })\n        })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.plot-container {\n  width: 100%;\n  height: 600px;\n}\n\n.ps-skeleton {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  animation: shimmer 1.5s infinite;\n  border-radius: 4px;\n}\n\n@keyframes shimmer {\n  0% { background-position: -200px 0; }\n  100% { background-position: 200px 0; }\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* Prevent the bar from shrinking */\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\n  /* Add tick marks */\n  border-left: 1px solid #333;\n  border-right: 1px solid #333;\n}\n\n.scale-label {\n  font-size: 11px;\n  text-align: center;\n  color: #555;\n  font-weight: 600;\n}\n</style>",
+        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              contain\n              class=\"mb-3\"\n            >\n              <template #placeholder>\n                <div class=\"d-flex align-center justify-center fill-height\">\n                  <v-progress-circular indeterminate color=\"primary\"></v-progress-circular>\n                </div>\n              </template>\n            </v-img>\n\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    v-if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src = \"https://cdn.plot.ly/plotly-2.27.0.min.js\"\n      s.onload = () => this.draw()\n      document.head.appendChild(s)\n    } else this.draw()\n  },\n\n  computed: {\n    // Calculate a nice round number for the scale bar length (e.g. 50um, 100um)\n    // based on the size of the current object.\n    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      // 1. Get real width of object in microns\n      // Fallback to 100px if object_width is missing\n      const objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * this.meta.resolution;\n\n      // 2. Target bar size ~ 25% of the object width\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\n      // 3. Snap to nearest nice number (10, 20, 50, 100, 200, 500...)\n      const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n      const residual = target / magnitude;\n      \n      let niceScalar = 1;\n      if (residual > 5) niceScalar = 10;\n      else if (residual > 2) niceScalar = 5;\n      else niceScalar = 2;\n\n      return niceScalar * magnitude;\n    },\n\n    scaleBarPixels() {\n      // Resolution = Microns per Pixel\n      // Pixels = Microns / Resolution\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} µm`\n    }\n  },\n\n  methods: {\n    fmt(v) { return typeof v === \"number\" ? v.toFixed(2) : v },\n\n    draw() {\n      if (!window.Plotly || !this.items.length) return\n\n      this.loading = false\n      const el = this.$refs.plot\n\n      const trace = {\n        x: this.items.map(d => d[this.xAxis]),\n        y: this.items.map(d => d[this.yAxis]),\n        mode: 'markers',\n        type: 'scatter',\n        hoverinfo: 'none',\n        marker: {\n          size: 8,\n          color: '#1976D2',\n          opacity: 0.6,\n          line: { width: 1, color: 'white' }\n        }\n      }\n\n      const layout = {\n        margin: { t: 20, b: 40, l: 50, r: 20 },\n        xaxis: { title: this.xAxis },\n        yaxis: { title: this.yAxis },\n        hovermode: 'closest',\n        dragmode: 'zoom',\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff'\n      }\n\n      Plotly.newPlot(el, [trace], layout, { responsive: true })\n        .then(() => {\n          el.on(\"plotly_hover\", ev => {\n            const i = ev.points[0].pointIndex\n            this.hovered = this.items[i]\n          })\n          el.on(\"plotly_unhover\", () => {\n            this.tooltip.show = false\n          })\n        })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.plot-container {\n  width: 100%;\n  height: 600px;\n}\n\n.ps-skeleton {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  animation: shimmer 1.5s infinite;\n  border-radius: 4px;\n}\n\n@keyframes shimmer {\n  0% { background-position: -200px 0; }\n  100% { background-position: 200px 0; }\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* Prevent the bar from shrinking */\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\n  /* Add tick marks */\n  border-left: 1px solid #333;\n  border-right: 1px solid #333;\n}\n\n.scale-label {\n  font-size: 11px;\n  text-align: center;\n  color: #555;\n  font-weight: 600;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From c0757033c654095d8595e9da3b5253d865b1b3ce Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 21:33:54 +0000
Subject: [PATCH 23/36] update

---
 node-red/projects/dashboard/flows.json | 230 +++++++++----------------
 1 file changed, 84 insertions(+), 146 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 95802682e..37843f6f8 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -1413,17 +1413,17 @@
             {
                 "name": "Default",
                 "px": "0",
-                "cols": "3"
+                "cols": "4"
             },
             {
                 "name": "Tablet",
                 "px": "576",
-                "cols": "6"
+                "cols": "4"
             },
             {
                 "name": "Small Desktop",
                 "px": "768",
-                "cols": "9"
+                "cols": "12"
             },
             {
                 "name": "Desktop",
@@ -2762,7 +2762,7 @@
         "group": "",
         "page": "632260133d581caa",
         "ui": "",
-        "name": "CSS (All Pages)",
+        "name": "CSS (This page)",
         "order": 0,
         "width": 0,
         "height": 0,
@@ -3724,7 +3724,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"0\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"1\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\" :min=\"1\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4162,99 +4162,6 @@
             ]
         ]
     },
-    {
-        "id": "61c2c281b1c6e055",
-        "type": "ui-table",
-        "z": "0fd76ac156d78937",
-        "group": "bfd4acb7b243514f",
-        "name": "List of acq",
-        "label": "",
-        "order": 1,
-        "width": 0,
-        "height": 0,
-        "maxrows": "100",
-        "passthru": false,
-        "autocols": false,
-        "showSearch": false,
-        "deselect": true,
-        "selectionType": "click",
-        "columns": [
-            {
-                "title": "Project name",
-                "key": "project_name",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Sample ID",
-                "key": "sample_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Acquisition ID",
-                "key": "acquisition_id",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Operator Name",
-                "key": "operator_name",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Number of images",
-                "key": "image_acquired_count",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Path",
-                "key": "path",
-                "keyType": "key",
-                "type": "text",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "Segmented",
-                "key": "is_segmented",
-                "keyType": "key",
-                "type": "tickcross",
-                "width": "",
-                "align": "start"
-            },
-            {
-                "title": "",
-                "key": "",
-                "keyType": "str",
-                "type": "html",
-                "width": "",
-                "align": "start"
-            }
-        ],
-        "mobileBreakpoint": "sm",
-        "mobileBreakpointType": "defaults",
-        "action": "replace",
-        "x": 330,
-        "y": 140,
-        "wires": [
-            [
-                "cdb586337f186494"
-            ]
-        ]
-    },
     {
         "id": "d4129bf3f5622aa6",
         "type": "list acquisitions",
@@ -4264,7 +4171,7 @@
         "y": 140,
         "wires": [
             [
-                "61c2c281b1c6e055"
+                "e23cbd161ffb9970"
             ]
         ]
     },
@@ -4376,7 +4283,8 @@
         "y": 260,
         "wires": [
             [
-                "33c0d1b8251b5d00"
+                "33c0d1b8251b5d00",
+                "6a279f9f754e8ead"
             ]
         ]
     },
@@ -4392,7 +4300,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <!-- Dataset Info: shown only when segmentation is currently active -->\n  <v-list density=\"compact\" v-if=\"isSegmenting && segment.dataset.project_name\">\n    <v-list-item>\n      <v-list-item-title>\n        <b>Project:</b> {{ segment.dataset.project_name }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Sample:</b> {{ segment.dataset.sample_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Acquisition:</b> {{ segment.dataset.acquisition_id }}\n      </v-list-item-title>\n    </v-list-item>\n    <v-list-item>\n      <v-list-item-title>\n        <b>Path:</b> {{ segment.dataset.path }}\n      </v-list-item-title>\n    </v-list-item>\n  </v-list>\n\n  <v-divider class=\"my-4\" v-if=\"isSegmenting && segment.dataset.project_name\"></v-divider>\n\n  <!-- Error Message -->\n  <v-alert v-if=\"errorMessage\" type=\"error\" variant=\"outlined\" border=\"start\" prominent class=\"mb-4\">\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Generic Info / Other Messages -->\n  <v-alert v-else-if=\"infoMessage\" type=\"info\" variant=\"outlined\" border=\"start\" class=\"mb-4\">\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress Info -->\n  <div v-if=\"statusText && !errorMessage\">\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear :model-value=\"progressPercent\" height=\"10\" color=\"primary\" rounded striped></v-progress-linear>\n\n    <p class=\"mt-3 mb-0 text-body-2\" v-if=\"currentImage\">\n      Currently segmenting:\n      <strong>{{ currentImage }}</strong>\n    </p>\n  </div>\n\n  <div v-else-if=\"!errorMessage\" class=\"text-disabled mt-4\">\n    Awaiting segmentation status...\n  </div>\n</template>\n\n<script>\n  export default {\n  props: {\n    msg: Object,\n  },\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n  computed: {\n    // Active segmentation means: we have a status and it isn't \"Done\"\n    isSegmenting() {\n      return (\n        this.statusText &&\n        !this.statusText.toLowerCase().includes(\"done\") &&\n        !this.statusText.toLowerCase().includes(\"idle\") &&\n        !this.errorMessage\n      );\n    },\n  },\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg || !msg.topic || !msg.payload) return;\n\n        const p = msg.payload;\n\n        // Reset message fields\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.statusText = \"\";\n\n        // 1️⃣ Load dataset info from message payload if available\n        if (\n          p.seg_project_name ||\n          p.seg_sample_id ||\n          p.seg_acquisition_id ||\n          p.seg_path\n        ) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        // 2️⃣ Handle status/segmenter messages\n        if (msg.topic === \"status/segmenter\") {\n          const status = p.status || \"\";\n\n          // Detect error messages\n          if (status.toLowerCase().includes(\"exception\")) {\n            this.errorMessage = status;\n            this.statusText = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n            return;\n          }\n\n          // Detect \"done\" or \"idle\"\n          if (status.toLowerCase().includes(\"done\") || status.toLowerCase().includes(\"idle\")) {\n            this.statusText = status;\n            this.segment.dataset = {\n              project_name: \"\",\n              sample_id: \"\",\n              acquisition_id: \"\",\n              path: \"\",\n            };\n            this.currentImage = \"\";\n            this.progressPercent = 0;\n            this.progressText = \"\";\n            return;\n          }\n\n          // Handle other status or info messages\n          if (!status.toLowerCase().includes(\"image\")) {\n            this.infoMessage = status;\n            return;\n          }\n\n          // 3️⃣ Extract progress info if available\n          this.statusText = status;\n\n          const imgMatch = this.statusText.match(/image ([\\w\\-\\_\\.]+),/);\n          this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n          const progressMatch = this.statusText.match(/image (\\d+)\\/(\\d+)/);\n          if (progressMatch) {\n            this.currentIndex = Number(progressMatch[1]);\n            this.totalImages = Number(progressMatch[2]);\n            this.progressPercent = Math.round(\n              (this.currentIndex / this.totalImages) * 100\n            );\n            this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n          } else {\n            this.progressPercent = 0;\n            this.progressText = \"\";\n          }\n        }\n      },\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .text-disabled {\n    color: rgba(0, 0, 0, 0.4);\n  }\n</style>",
+        "format": "<template>\n\n  <!-- Error Message -->\n  <v-alert\n    v-if=\"errorMessage\"\n    type=\"error\"\n    variant=\"outlined\"\n    border=\"start\"\n    prominent\n    class=\"mb-4\"\n  >\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Info Message -->\n  <v-alert\n    v-else-if=\"infoMessage\"\n    type=\"info\"\n    variant=\"outlined\"\n    border=\"start\"\n    class=\"mb-4\"\n  >\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress -->\n  <v-card\n    v-else-if=\"statusText\"\n    variant=\"flat\"\n    class=\"pa-8\"\n  >\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear\n      :model-value=\"progressPercent\"\n      height=\"10\"\n      color=\"primary\"\n      rounded\n      striped\n    />\n\n    <p v-if=\"currentImage\" class=\"mt-3 mb-0 text-body-2\">\n      Currently segmenting: <strong>{{ currentImage }}</strong>\n    </p>\n  </v-card>\n\n  <!-- Waiting -->\n  <div v-else class=\"text-disabled mt-4\">\n    Awaiting segmentation status…\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: {\n    msg: Object,\n  },\n\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n\n  computed: {\n    isSegmenting() {\n      if (!this.statusText || this.errorMessage) return false;\n      const s = this.statusText.toLowerCase();\n      return !(s.includes(\"done\") || s.includes(\"idle\"));\n    },\n  },\n\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg?.topic || !msg.payload) return;\n\n        const p = msg.payload;\n        const lowerStatus = (p.status || \"\").toLowerCase();\n\n        // Reset transient messages\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.progressText = \"\";\n\n        // Update dataset info if present\n        if (p.seg_project_name || p.seg_sample_id || p.seg_acquisition_id || p.seg_path) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        if (msg.topic !== \"status/segmenter\") return;\n\n        // --- ERROR ---\n        if (lowerStatus.includes(\"exception\")) {\n          this.errorMessage = p.status;\n          this.statusText = \"\";\n          this.resetProgress();\n          return;\n        }\n\n        // --- DONE / IDLE ---\n        if (lowerStatus.includes(\"done\") || lowerStatus.includes(\"idle\")) {\n          this.statusText = p.status;\n          this.segment.dataset = { project_name: \"\", sample_id: \"\", acquisition_id: \"\", path: \"\" };\n          this.resetProgress();\n          return;\n        }\n\n        // --- SIMPLE INFO (no \"image\" token) ---\n        if (!lowerStatus.includes(\"image\")) {\n          this.infoMessage = p.status;\n          this.statusText = \"\";\n          return;\n        }\n\n        // --- IMAGE PROGRESS ---\n        this.statusText = p.status;\n\n        const imgMatch = p.status.match(/image ([\\w\\-\\_\\.]+),/);\n        this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n        const progressMatch = p.status.match(/image (\\d+)\\/(\\d+)/);\n        if (progressMatch) {\n          this.currentIndex = Number(progressMatch[1]);\n          this.totalImages = Number(progressMatch[2]);\n          this.progressPercent = Math.round((this.currentIndex / this.totalImages) * 100);\n          this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n        } else {\n          this.resetProgress();\n        }\n      },\n    },\n  },\n\n  methods: {\n    resetProgress() {\n      this.currentImage = \"\";\n      this.currentIndex = 0;\n      this.totalImages = 0;\n      this.progressPercent = 0;\n      this.progressText = \"\";\n    },\n  },\n};\n</script>\n\n<style scoped>\n.text-disabled {\n  color: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4485,28 +4393,10 @@
         "y": 140,
         "wires": [
             [
-                "0ec6b9337acadf6f",
                 "7fde0897e436c334"
             ]
         ]
     },
-    {
-        "id": "0ec6b9337acadf6f",
-        "type": "debug",
-        "z": "0fd76ac156d78937",
-        "name": "debug 1",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 880,
-        "y": 180,
-        "wires": []
-    },
     {
         "id": "7fde0897e436c334",
         "type": "ui-template",
@@ -4525,14 +4415,56 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 850,
-        "y": 380,
+        "x": 870,
+        "y": 140,
         "wires": [
             [
                 "24c71b69e60e41bd"
             ]
         ]
     },
+    {
+        "id": "e23cbd161ffb9970",
+        "type": "ui-template",
+        "z": "0fd76ac156d78937",
+        "group": "bfd4acb7b243514f",
+        "page": "",
+        "ui": "",
+        "name": "List of Acquisitions",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-data-table\n    fluid\n    :headers=\"headers\"\n    :items=\"filteredItems\"\n    :search=\"search\"\n    :loading=\"loading\"\n    item-value=\"acquisition_id\"\n    density=\"comfortable\"\n    hover\n    :item-class=\"getRowClass\"\n  >\n\n    <template v-slot:loading>\n      <v-skeleton-loader type=\"table-row@5\" />\n    </template>\n\n    <template v-slot:item.project_name=\"{ item }\">\n      <span class=\"text-body-2 font-weight-medium text-high-emphasis\">\n        {{ item.project_name }}\n      </span>\n    </template>\n\n    <template v-slot:item.sample_id=\"{ item }\">\n      <span class=\"text-body-2 text-high-emphasis\">\n        {{ item.sample_id }}\n      </span>\n    </template>\n\n    <template v-slot:item.acquisition_id=\"{ item }\">\n      <code class=\"bg-grey-lighten-4 px-2 py-1 rounded text-caption text-grey-darken-3\">\n        {{ item.acquisition_id }}\n      </code>\n    </template>\n\n    <template v-slot:item.operator_name=\"{ item }\">\n      <span class=\"text-body-2 text-high-emphasis\">\n        {{ item.operator_name }}\n      </span>\n    </template>\n\n    <template v-slot:item.image_acquired_count=\"{ item }\">\n      <div class=\"d-flex align-center justify-end text-medium-emphasis\">\n        <v-icon size=\"small\" class=\"mr-2\">mdi-image-outline</v-icon>\n        <span class=\"font-weight-bold text-high-emphasis\">\n          {{ Number(item.image_acquired_count || 0).toLocaleString() }}\n        </span>\n      </div>\n    </template>\n\n    <template v-slot:item.gallery=\"{ item }\">\n      <v-btn\n        variant=\"text\"\n        size=\"small\"\n        color=\"grey-darken-1\"\n        :href=\"item.gallery\"\n        target=\"_blank\"\n      >\n        <v-icon start>mdi-folder-image</v-icon>\n        Gallery\n      </v-btn>\n    </template>\n\n    <template v-slot:item.actions=\"{ item }\">\n      <div class=\"d-flex justify-end\">\n        <v-btn\n          v-if=\"!item.is_segmented\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"primary\"\n          @click=\"segment(item)\"\n        >\n          <v-icon start>mdi-vector-polyline</v-icon>\n          Segment\n        </v-btn>\n\n        <v-btn\n          v-else\n          variant=\"text\"\n          size=\"small\"\n          disabled\n          color=\"grey-darken-1\"\n        >\n          <v-icon start>mdi-check</v-icon>\n          Done\n        </v-btn>\n      </div>\n    </template>\n\n    <template v-slot:no-data>\n      <div class=\"pa-8 text-center text-medium-emphasis\">\n        <v-icon icon=\"mdi-database-off\" size=\"x-large\" class=\"mb-3 text-grey-lighten-1\" />\n        <div class=\"text-body-1\">No acquisitions found</div>\n      </div>\n    </template>\n\n  </v-data-table>\n</template>\n\n\n<script>\nexport default {\n  // Assuming 'msg' is a prop or injected value from the environment\n  props: {\n    msg: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null,\n\n      headers: [\n        { title: \"Project\", key: \"project_name\", sortable: false },\n        { title: \"Sample\", key: \"sample_id\", sortable: false },\n        { title: \"Acq ID\", key: \"acquisition_id\", sortable: false },\n        { title: \"Operator\", key: \"operator_name\", sortable: false },\n        { title: \"Count\", key: \"image_acquired_count\", sortable: false, align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Actions\", key: \"actions\", sortable: false, align: \"end\", width: \"150px\" }\n      ]\n    };\n  },\n\n  computed: {\n    /** Filters out rows with 0 images, which can prevent sorting/rendering issues. */\n    filteredItems() {\n      // NOTE: If you are encountering duplicated rows, consider adding a check here\n      // to ensure `acquisition_id` is unique across all filtered items.\n      return this.items.filter(i => Number(i.image_acquired_count) > 0);\n    }\n  },\n\n  mounted() {\n    if (this.msg?.payload && Array.isArray(this.msg.payload)) {\n      this.items = this.msg.payload;\n      this.loading = false;\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(value) {\n        if (!value?.payload) return;\n        const payload = value.payload;\n\n        const clearing =\n          payload === \"clear\" ||\n          payload?.clear === true ||\n          (Array.isArray(payload) && payload.length === 0);\n\n        if (clearing) {\n          this.items = [];\n          this.selectedRow = null;\n          this.loading = true;\n          setTimeout(() => (this.loading = false), 300);\n          return;\n        }\n\n        if (Array.isArray(payload)) {\n          this.items = payload;\n          this.loading = false;\n        }\n      }\n    }\n  },\n\n  methods: {\n    /** Handles the action when the 'Segment' button is clicked */\n    segment(item) {\n      this.selectedRow = item.acquisition_id;\n\n      // Assuming 'this.send' is a method available in the environment (e.g., from a mixin or parent)\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"segment_request\",\n          payload: item\n        });\n      } else {\n         console.warn(\"The 'send' method is not defined.\");\n      }\n    },\n\n    /** Returns the CSS class to apply to a row, used for highlighting the selected row */\n    getRowClass(wrapper) {\n      // Use wrapper.raw to get the item instance reliably in v3\n      const item = wrapper.raw ?? wrapper;\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 310,
+        "y": 140,
+        "wires": [
+            [
+                "cdb586337f186494"
+            ]
+        ]
+    },
+    {
+        "id": "6a279f9f754e8ead",
+        "type": "debug",
+        "z": "0fd76ac156d78937",
+        "name": "debug 1",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 340,
+        "y": 360,
+        "wires": []
+    },
     {
         "id": "77bb783e65c3ffd6",
         "type": "ui-event",
@@ -4664,7 +4596,7 @@
         "type": "function",
         "z": "14f8c9b5ce1235cc",
         "name": "Insert export column",
-        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\n\nreturn msg;\n",
+        "func": "msg.payload = msg.payload.map(item => {\n    // extraction de l'acquisition_id\n    const acq = item.acquisition_id;   // ex: \"A_2\"\n\n    // création du chemin export\n    item.export = `/ps/data/browse/api/raw/export/ecotaxa/ecotaxa_${acq}.zip`;\n\n    return item;\n});\nreturn msg;\n",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -4706,8 +4638,7 @@
                 "512e86195d14e773",
                 "9be1cc713ac79a7b",
                 "63ce87d36ae8f172",
-                "9abf70a949e76eaf",
-                "bdf84e9e1e0caa90"
+                "9abf70a949e76eaf"
             ]
         ]
     },
@@ -4723,7 +4654,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 930,
         "y": 180,
         "wires": [
             [
@@ -4764,17 +4695,17 @@
         "page": "",
         "ui": "",
         "name": "List of Segmentation",
-        "order": 1,
+        "order": 2,
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n\n        <v-data-table\n            :headers=\"headers\"\n            :items=\"items\"\n            :search=\"search\"\n            item-value=\"acquisition_id\"\n            density=\"compact\"\n            class=\"elevation-1\"\n        >\n            <template v-slot:item.image_acquired_count=\"{ item }\">\n                <v-chip size=\"small\" color=\"primary\" variant=\"tonal\">\n                    {{ item.image_acquired_count }}\n                </v-chip>\n            </template>\n\n            <template v-slot:item.links=\"{ item }\">\n                \n                <v-tooltip text=\"View Gallery\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-image-multiple\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"blue-darken-2\" \n                            :href=\"item.gallery\" \n                            target=\"_blank\"\n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n\n                <v-tooltip text=\"Download Zip\" location=\"top\">\n                    <template v-slot:activator=\"{ props }\">\n                        <v-btn \n                            icon=\"mdi-download\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"orange-darken-2\" \n                            :href=\"item.export\" \n                            v-bind=\"props\"\n                        ></v-btn>\n                    </template>\n                </v-tooltip>\n            </template>\n\n            <template v-slot:item.actions=\"{ item }\">\n                        <v-btn \n                            icon=\"mdi-chart-scatter-plot-hexbin\" \n                            variant=\"text\" \n                            size=\"small\" \n                            color=\"primary\" \n                            @click=\"selectAcquisition(item)\"\n                        ></v-btn>\n            </template>\n        </v-data-table>\n</template>\n\n<script>\n    export default {\n        data() { \n            return {\n                search: '',\n                items: [],\n                headers: [\n                    { title: 'Project', key: 'project_name', sortable: true },\n                    { title: 'Sample ID', key: 'sample_id', sortable: true },\n                    { title: 'Acquisition ID', key: 'acquisition_id', sortable: true },\n                    { title: 'Images', key: 'image_acquired_count', sortable: true, align: 'end' },\n                    { title: 'Resources', key: 'links', sortable: false, align: 'center' }, // New Column\n                    { title: 'Select', key: 'actions', sortable: false, align: 'end' },\n                ]\n            }\n        },\n        watch: {\n            msg: {\n                handler(newValue) {\n                    if (newValue && Array.isArray(newValue.payload)) {\n                        this.items = newValue.payload;\n                    }\n                },\n                deep: true\n            }\n        },\n        mounted() {\n            if (this.msg && Array.isArray(this.msg.payload)) {\n                this.items = this.msg.payload;\n            }\n        },\n        methods: {\n            selectAcquisition(item) {\n                this.send({\n                    topic: \"selected_acquisition\",\n                    payload: item\n                });\n            }\n        }\n    }\n</script>",
+        "format": "<template>\n  <!-- Data Table -->\n  <v-data-table\n      fluid\n      :headers=\"headers\"\n      :items=\"items\"\n      :search=\"search\"\n      :loading=\"loading\"\n      item-value=\"acquisition_id\"\n      item-key=\"acquisition_id\"  \n      density=\"comfortable\"\n      hover\n      :item-class=\"getRowClass\"\n  >\n      \n      <template v-slot:loading>\n        <v-skeleton-loader type=\"table-row@5\"></v-skeleton-loader>\n      </template>\n\n      <!-- Project -->\n      <template v-slot:item.project_name=\"{ item }\">\n        <span class=\"font-weight-medium text-body-2 text-high-emphasis\">\n          {{ item.project_name }}\n        </span>\n      </template>\n\n      <!-- Sample -->\n      <template v-slot:item.sample_id=\"{ item }\">\n        <span class=\"text-body-2 text-high-emphasis\">\n          {{ item.sample_id }}\n        </span>\n      </template>\n\n      <!-- Acquisition ID -->\n      <template v-slot:item.acquisition_id=\"{ item }\">\n        <code class=\"text-grey-darken-3 bg-grey-lighten-4 px-2 py-1 rounded text-caption font-weight-medium\">\n          {{ item.acquisition_id }}\n        </code>\n      </template>\n\n      <!-- Image Count -->\n      <template v-slot:item.image_acquired_count=\"{ item }\">\n        <div class=\"d-flex align-center justify-end text-medium-emphasis\">\n          <v-icon size=\"small\" class=\"mr-2\">mdi-image-outline</v-icon>\n          <span class=\"font-weight-bold text-high-emphasis\">\n            {{ Number(item.image_acquired_count || 0).toLocaleString() }}\n          </span>\n        </div>\n      </template>\n\n      <!-- View Gallery -->\n      <template v-slot:item.gallery=\"{ item }\">\n        <v-btn\n          v-if=\"item.gallery\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.gallery\"\n          target=\"_blank\"\n        >\n          <v-icon start>mdi-image-multiple</v-icon>\n          Gallery\n        </v-btn>\n      </template>\n\n      <!-- Download Zip -->\n      <template v-slot:item.export=\"{ item }\">\n        <v-btn\n          v-if=\"item.export\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.export\"\n        >\n          <v-icon start>mdi-download</v-icon>\n          .zip\n        </v-btn>\n      </template>\n\n      <!-- Visualize -->\n      <template v-slot:item.actions=\"{ item }\">\n        <v-btn\n          variant=\"text\"\n          size=\"small\"\n          color=\"primary\"\n          class=\"text-capitalize font-weight-medium\"\n          @click=\"selectAcquisition(item)\"\n        >\n          <v-icon start>mdi-chart-scatter-plot-hexbin</v-icon>\n          Visualize\n        </v-btn>\n      </template>\n\n      <!-- No data -->\n      <template v-slot:no-data>\n        <div class=\"pa-8 text-center text-medium-emphasis\">\n          <v-icon icon=\"mdi-database-off\" size=\"x-large\" class=\"mb-3 text-grey-lighten-1\"></v-icon>\n          <div class=\"text-body-1\">No acquisitions found</div>\n        </div>\n      </template>\n\n  </v-data-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null, \n\n      headers: [\n        { title: \"Project\", key: \"project_name\", sortable: false, align: \"start\" },\n        { title: \"Sample\", key: \"sample_id\", sortable: false, align: \"start\" },\n        { title: \"Acquisition ID\", key: \"acquisition_id\", sortable: false, align: \"start\" },\n        { title: \"Count\", key: \"image_acquired_count\", sortable: false, align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Download\", key: \"export\", sortable: false, align: \"end\" },\n        { title: \"Visualize\", key: \"actions\", sortable: false, align: \"end\", width: \"140px\" }\n      ]\n    };\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(val) {\n        if (!val || !val.payload) return;\n\n        const payload = val.payload;\n        const isClearing =\n          payload === \"clear\" ||\n          payload?.clear === true ||\n          (Array.isArray(payload) && payload.length === 0);\n\n        if (isClearing) {\n          this.items = [];\n          this.loading = true;\n          this.selectedRow = null;\n          setTimeout(() => { this.loading = false; }, 300);\n          return;\n        }\n\n        if (Array.isArray(payload)) {\n          this.items = payload;\n          this.loading = false;\n        }\n      }\n    }\n  },\n\n  mounted() {\n    if (this.msg && Array.isArray(this.msg.payload)) {\n      this.items = this.msg.payload;\n      this.loading = false;\n    }\n  },\n\n  methods: {\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    // Prevent ghost row + highlight selection\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;   // Vuetify wrapper-safe\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 600,
+        "x": 740,
         "y": 180,
         "wires": [
             [
@@ -5066,7 +4997,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" style=\"width:100%; height:100%;\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.seq),\n        y:this.rows.map(r=>r.area),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{size:10,color:\"blue\",opacity:0.5},\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Acq Sequence\"},\n        yaxis:{title:\"Area\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
+        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" ></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.seq),\n        y:this.rows.map(r=>r.area),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{size:10,color:\"blue\",opacity:0.5},\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Acq Sequence\"},\n        yaxis:{title:\"Area\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -5335,7 +5266,7 @@
         "allowrate": false,
         "outputs": 1,
         "x": 180,
-        "y": 320,
+        "y": 280,
         "wires": [
             [
                 "5ec998719a884cfe"
@@ -5343,21 +5274,28 @@
         ]
     },
     {
-        "id": "bdf84e9e1e0caa90",
-        "type": "debug",
+        "id": "9e5c5ec670e343cf",
+        "type": "ui-template",
         "z": "14f8c9b5ce1235cc",
-        "name": "debug 2",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 380,
-        "y": 360,
-        "wires": []
+        "group": "",
+        "page": "d129fac8e7742d5b",
+        "ui": "",
+        "name": "CSS (This page)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": ".plot-container.plotly {\n      height: 100%;\n}\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 1300,
+        "y": 100,
+        "wires": [
+            []
+        ]
     },
     {
         "id": "8e11bb014b9664be",
@@ -5368,8 +5306,8 @@
         "ui": "",
         "name": "body",
         "order": 1,
-        "width": "12",
-        "height": "6",
+        "width": "0",
+        "height": "0",
         "head": "",
         "format": "<template>\n  <v-container>\n    <v-row>\n      <!-- Step 1: White Balance -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_saturation_level\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-eyedropper-variant</v-icon>\n          <v-card-title class=\"text-h6\">White Balance</v-card-title>\n          <v-card-text>\n            Use the color picker to measure the current color values and adjust the white balance accordingly.\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n      <!-- Step 2: Lightness -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_lightness\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-brightness-6</v-icon>\n          <v-card-title class=\"text-h6\">Lightness</v-card-title>\n          <v-card-text>\n            Measure the current lightness value and update the LED intensity or ISO if below optimal levels.\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n      <!-- Step 3: Pixel Size -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_pixel_size\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-ruler</v-icon>\n          <v-card-title class=\"text-h6\">Pixel Size</v-card-title>\n          <v-card-text>\n            Place markers on the micrometric ruler image to calculate the pixel size in microns per pixel.\n          </v-card-text>\n        </v-card>\n      </v-col>\n\n      <!-- Step 4: Pump Calibration -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-card\n          href=\"calibration_pump\"\n          class=\"text-center py-2\"\n        >\n          <v-icon size=\"64\" color=\"primary\">mdi-water-pump</v-icon>\n          <v-card-title class=\"text-h6\">Pump Calibration</v-card-title>\n          <v-card-text>\n            Measure the transferred volume and adjust pump steps to improve accuracy in fluid handling.\n          </v-card-text>\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
         "storeOutMessages": true,

From 451f99b4afe4b091d15ba53e8b9b5a01d495b2e1 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 21:41:59 +0000
Subject: [PATCH 24/36] update

---
 node-red/projects/dashboard/flows.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 37843f6f8..f6f3f0131 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -4300,7 +4300,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n\n  <!-- Error Message -->\n  <v-alert\n    v-if=\"errorMessage\"\n    type=\"error\"\n    variant=\"outlined\"\n    border=\"start\"\n    prominent\n    class=\"mb-4\"\n  >\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Info Message -->\n  <v-alert\n    v-else-if=\"infoMessage\"\n    type=\"info\"\n    variant=\"outlined\"\n    border=\"start\"\n    class=\"mb-4\"\n  >\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress -->\n  <v-card\n    v-else-if=\"statusText\"\n    variant=\"flat\"\n    class=\"pa-8\"\n  >\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear\n      :model-value=\"progressPercent\"\n      height=\"10\"\n      color=\"primary\"\n      rounded\n      striped\n    />\n\n    <p v-if=\"currentImage\" class=\"mt-3 mb-0 text-body-2\">\n      Currently segmenting: <strong>{{ currentImage }}</strong>\n    </p>\n  </v-card>\n\n  <!-- Waiting -->\n  <div v-else class=\"text-disabled mt-4\">\n    Awaiting segmentation status…\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: {\n    msg: Object,\n  },\n\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n\n  computed: {\n    isSegmenting() {\n      if (!this.statusText || this.errorMessage) return false;\n      const s = this.statusText.toLowerCase();\n      return !(s.includes(\"done\") || s.includes(\"idle\"));\n    },\n  },\n\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg?.topic || !msg.payload) return;\n\n        const p = msg.payload;\n        const lowerStatus = (p.status || \"\").toLowerCase();\n\n        // Reset transient messages\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.progressText = \"\";\n\n        // Update dataset info if present\n        if (p.seg_project_name || p.seg_sample_id || p.seg_acquisition_id || p.seg_path) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        if (msg.topic !== \"status/segmenter\") return;\n\n        // --- ERROR ---\n        if (lowerStatus.includes(\"exception\")) {\n          this.errorMessage = p.status;\n          this.statusText = \"\";\n          this.resetProgress();\n          return;\n        }\n\n        // --- DONE / IDLE ---\n        if (lowerStatus.includes(\"done\") || lowerStatus.includes(\"idle\")) {\n          this.statusText = p.status;\n          this.segment.dataset = { project_name: \"\", sample_id: \"\", acquisition_id: \"\", path: \"\" };\n          this.resetProgress();\n          return;\n        }\n\n        // --- SIMPLE INFO (no \"image\" token) ---\n        if (!lowerStatus.includes(\"image\")) {\n          this.infoMessage = p.status;\n          this.statusText = \"\";\n          return;\n        }\n\n        // --- IMAGE PROGRESS ---\n        this.statusText = p.status;\n\n        const imgMatch = p.status.match(/image ([\\w\\-\\_\\.]+),/);\n        this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n        const progressMatch = p.status.match(/image (\\d+)\\/(\\d+)/);\n        if (progressMatch) {\n          this.currentIndex = Number(progressMatch[1]);\n          this.totalImages = Number(progressMatch[2]);\n          this.progressPercent = Math.round((this.currentIndex / this.totalImages) * 100);\n          this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n        } else {\n          this.resetProgress();\n        }\n      },\n    },\n  },\n\n  methods: {\n    resetProgress() {\n      this.currentImage = \"\";\n      this.currentIndex = 0;\n      this.totalImages = 0;\n      this.progressPercent = 0;\n      this.progressText = \"\";\n    },\n  },\n};\n</script>\n\n<style scoped>\n.text-disabled {\n  color: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
+        "format": "<template>\n\n  <!-- Error Message -->\n  <v-alert\n    v-if=\"errorMessage\"\n    type=\"error\"\n    variant=\"outlined\"\n    border=\"start\"\n    prominent\n    class=\"mb-4\"\n  >\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Info Message -->\n  <v-alert\n    v-else-if=\"infoMessage\"\n    type=\"info\"\n    variant=\"outlined\"\n    border=\"start\"\n    class=\"mb-4\"\n  >\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress -->\n  <v-card\n    v-else-if=\"statusText\"\n    variant=\"flat\"\n    class=\"pa-8\"\n  >\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear\n      :model-value=\"progressPercent\"\n      height=\"30\"\n      color=\"primary\"\n      rounded\n      striped\n    />\n\n    <p v-if=\"currentImage\" class=\"mt-3 mb-0 text-body-2\">\n      Currently segmenting: <strong>{{ currentImage }}</strong>\n    </p>\n  </v-card>\n\n  <!-- Waiting -->\n  <div v-else class=\"text-disabled mt-4\">\n    Awaiting segmentation status…\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: {\n    msg: Object,\n  },\n\n  data() {\n    return {\n      segment: {\n        dataset: {\n          project_name: \"\",\n          sample_id: \"\",\n          acquisition_id: \"\",\n          path: \"\",\n        },\n      },\n      statusText: \"\",\n      currentImage: \"\",\n      currentIndex: 0,\n      totalImages: 0,\n      progressPercent: 0,\n      progressText: \"\",\n      errorMessage: \"\",\n      infoMessage: \"\",\n    };\n  },\n\n  computed: {\n    isSegmenting() {\n      if (!this.statusText || this.errorMessage) return false;\n      const s = this.statusText.toLowerCase();\n      return !(s.includes(\"done\") || s.includes(\"idle\"));\n    },\n  },\n\n  watch: {\n    msg: {\n      immediate: true,\n      handler(msg) {\n        if (!msg?.topic || !msg.payload) return;\n\n        const p = msg.payload;\n        const lowerStatus = (p.status || \"\").toLowerCase();\n\n        // Reset transient messages\n        this.errorMessage = \"\";\n        this.infoMessage = \"\";\n        this.progressText = \"\";\n\n        // Update dataset info if present\n        if (p.seg_project_name || p.seg_sample_id || p.seg_acquisition_id || p.seg_path) {\n          this.segment.dataset = {\n            project_name: p.seg_project_name || \"\",\n            sample_id: p.seg_sample_id || \"\",\n            acquisition_id: p.seg_acquisition_id || \"\",\n            path: p.seg_path || \"\",\n          };\n        }\n\n        if (msg.topic !== \"status/segmenter\") return;\n\n        // --- ERROR ---\n        if (lowerStatus.includes(\"exception\")) {\n          this.errorMessage = p.status;\n          this.statusText = \"\";\n          this.resetProgress();\n          return;\n        }\n\n        // --- DONE / IDLE ---\n        if (lowerStatus.includes(\"done\") || lowerStatus.includes(\"idle\")) {\n          this.statusText = p.status;\n          this.segment.dataset = { project_name: \"\", sample_id: \"\", acquisition_id: \"\", path: \"\" };\n          this.resetProgress();\n          return;\n        }\n\n        // --- SIMPLE INFO (no \"image\" token) ---\n        if (!lowerStatus.includes(\"image\")) {\n          this.infoMessage = p.status;\n          this.statusText = \"\";\n          return;\n        }\n\n        // --- IMAGE PROGRESS ---\n        this.statusText = p.status;\n\n        const imgMatch = p.status.match(/image ([\\w\\-\\_\\.]+),/);\n        this.currentImage = imgMatch ? imgMatch[1] : \"\";\n\n        const progressMatch = p.status.match(/image (\\d+)\\/(\\d+)/);\n        if (progressMatch) {\n          this.currentIndex = Number(progressMatch[1]);\n          this.totalImages = Number(progressMatch[2]);\n          this.progressPercent = Math.round((this.currentIndex / this.totalImages) * 100);\n          this.progressText = `${this.currentIndex} / ${this.totalImages} (${this.progressPercent}%)`;\n        } else {\n          this.resetProgress();\n        }\n      },\n    },\n  },\n\n  methods: {\n    resetProgress() {\n      this.currentImage = \"\";\n      this.currentIndex = 0;\n      this.totalImages = 0;\n      this.progressPercent = 0;\n      this.progressText = \"\";\n    },\n  },\n};\n</script>\n\n<style scoped>\n.text-disabled {\n  color: rgba(0, 0, 0, 0.4);\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 74627f034d895cbdf598ed463b2072009e2fd2f2 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 22:26:43 +0000
Subject: [PATCH 25/36] update

---
 node-red/projects/dashboard/flows.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index f6f3f0131..c519c2e69 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2791,7 +2791,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n        background:white;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3035,7 +3035,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n<v-divider class=\"py-2\"></v-divider>\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
+        "format": "<template>\n  <v-container fluid  class=\"pa-0\">\n    <!-- LED CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"led_state\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_led_toggle\">\n              <v-btn class=\"flex-grow-1\" :value=\"'off'\">Off</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'on'\">On</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- FOCUS CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n    <v-card-text>\n\n    <!-- Label -->\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Focus Distance</div>\n    </div>\n    <!-- Focus slider + input -->\n    <v-row align=\"center\">\n      <v-col :cols=\"isTablet ? 4 : 7\">\n        <v-slider\n          v-model.number=\"focus_distance\"\n          :max=\"maxFocus\"\n          :min=\"minFocus\"\n          :step=\"25\"\n          hide-details\n          :thumb-size=\"isTablet ? 12 : 20\"\n          :track-size=\"isTablet ? 2 : 4\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 8 : 5\">\n        <v-text-field\n          v-model.number=\"focus_distance\"\n          type=\"number\"\n          variant=\"outlined\"\n          hide-details\n          suffix=\"μm\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n          append-icon=\"mdi-information\"\n          @click:append=\"showInfo('focus_speed')\"\n        />\n      </v-col>\n    </v-row>\n\n    <!-- Presets -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_distance_preset\"\n          divided\n          shaped\n          color=\"primary\"\n          class=\"d-flex justify-space-between\"\n          mandatory\n          @update:model-value=\"on_focus_distance_toggle\"\n        >\n          <v-btn\n            v-for=\"value in focus_distance_presets\"\n            :key=\"'distance-' + value\"\n            :value=\"value\"\n            class=\"flex-grow-1\"\n          >\n            {{ value }}\n          </v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <!-- Focus direction -->\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle\n          variant=\"outlined\"\n          v-model=\"focus_direction\"\n          color=\"primary\"\n          mandatory\n          divided\n          shaped\n          class=\"d-flex justify-space-between\"\n          @update:model-value=\"on_focus_direction_change\"\n        >\n          <v-btn class=\"flex-grow-1\" :value=\"'UP'\">Up</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Down</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n  </v-card-text>\n</v-card>\n\n    <!-- PUMP CONTROL -->\n    <v-card class=\"mb-6 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n\n    <!-- Label -->\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Flowrate</div>\n    </div>\n        <!-- Flowrate -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml/min\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_flowrate')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Flowrate presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_flowrate_preset\" class=\"d-flex justify-space-between\" color=\"primary\"\n              variant=\"outlined\" divided shaped mandatory @update:model-value=\"onFlowrateToggle\">\n              <v-btn v-for=\"value in pump_flowrate_presets\" :key=\"'flowrate-' + value\" :value=\"value\"\n                class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n      <!-- Label -->\n<v-divider class=\"py-2\"></v-divider>\n\n    <div class=\"d-flex justify-space-between align-center mb-4\">\n      <div class=\"text-h6\">Pump Volume</div>\n    </div>\n        <!-- Volume -->\n        <v-row align=\"center\">\n          <v-col :cols=\"isTablet ? 4 : 7\">\n            <v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.2\" hide-details\n              :thumb-size=\"isTablet ? 12 : 20\" :track-size=\"isTablet ? 2 : 4\" />\n          </v-col>\n          <v-col :cols=\"isTablet ? 8 : 5\">\n            <v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" hide-details suffix=\"ml\"\n              :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size: 1.3rem; width: 100%;' : ''\"\n              append-icon=\"mdi-information\" @click:append=\"showInfo('pump_manual_volume')\" />\n          </v-col>\n        </v-row>\n\n        <!-- Volume presets -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"pump_volume_preset\" class=\"d-flex justify-space-between\" variant=\"outlined\"\n              color=\"primary\" divided shaped mandatory @update:model-value=\"onVolumeToggle\">\n              <v-btn v-for=\"value in pump_volume_presets\" :key=\"'volume-' + value\" :value=\"value\" class=\"flex-grow-1\">\n                {{ value }}\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <!-- Pump direction -->\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"pump_direction\" color=\"primary\" mandatory divided shaped\n              class=\"d-flex justify-space-between\" @update:model-value=\"on_pump_direction_change\">\n              <v-btn class=\"flex-grow-1\" :value=\"'backward'\">Backward</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'forward'\">Forward</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <!-- CALIBRATION INFO -->\n    <v-card class=\"pa-6 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n          \n    <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-4\">\n    <template v-slot:prepend>\n      <v-icon size=\"x-large\">mdi-tune</v-icon>\n    </template>\n\n    <v-list-item-title class=\"text-h6\">\n      Calibration\n    </v-list-item-title>\n\n    <v-list-item-subtitle>\n      Modify camera settings and optical parameters for accurate imaging.\n    </v-list-item-subtitle>\n\n    <template v-slot:append>\n      <v-icon >mdi-chevron-right</v-icon>\n    </template>\n  </v-list-item>\n</v-card>\n\n    <!-- INFO DIALOG -->\n    <v-dialog v-model=\"infoDialog\" max-width=\"500\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ infoContent.title }}</v-card-title>\n        <v-card-text>\n          <p><strong>Unit:</strong> {{ infoContent.unit }}</p>\n          <p><strong>Description:</strong> {{ infoContent.description }}</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"infoDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02,\n      maxFlow: 30,\n      pump_flowrate: 0,\n      pump_manual_volume: 0,\n      pump_flowrate_presets: [0.02, 0.2, 2, 20],\n      pump_volume_presets: [0.004, 0.2, 2, 20],\n      pump_flowrate_preset: null,\n      pump_volume_preset: null,\n      pump_direction: \"stop\",\n\n      minFocus: 25,\n      maxFocus: 5000,\n      focus_distance: 25,\n      focus_distance_presets: [25, 150, 500, 5000],\n      focus_distance_preset: null,\n      focus_direction: \"stop\",\n\n      led_state: \"off\",\n\n      infoDialog: false,\n      infoContent: { title: \"\", unit: \"\", description: \"\" },\n    };\n  },\n\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n  },\n\n  created() {\n    this.hydrateFromMsg(this.msg);\n  },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n\n    pump_flowrate(newVal) {\n      this.pump_flowrate_preset =\n        this.pump_flowrate_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    pump_manual_volume(newVal) {\n      this.pump_volume_preset =\n        this.pump_volume_presets.find((v) => v === newVal) ?? null;\n      this.sendPumpParams();\n    },\n    focus_distance(newVal) {\n      this.focus_distance_preset =\n        this.focus_distance_presets.find((v) => v === newVal) ?? null;\n      this.sendFocusParams();\n    },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n\n      // --- STATUS MESSAGES (ne bloquent plus les autres updates !) ---\n      if (m.topic === \"status/pump\" && p.status === \"Done\") {\n        this.pump_direction = \"stop\";\n      }\n\n      if (m.topic === \"status/focus\" && p.status === \"Done\") {\n        this.focus_direction = \"stop\";\n      }\n\n      // --- LED STATE (ne bloque plus le reste du payload) ---\n      if (\"led_status\" in p) {\n        const s = String(p.led_status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      if (m.topic === \"status/light\" && \"status\" in p) {\n        const s = String(p.status).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // --- GLOBAL / ACTUATOR PARAMS ---\n      this.pump_flowrate =\n        p.flowrate ?? p.pump_flowrate ?? this.pump_flowrate;\n\n      this.pump_manual_volume =\n        p.volume ?? p.pump_manual_volume ?? this.pump_manual_volume;\n\n      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) {\n        this.pump_direction = p.command;\n      }\n\n      if (typeof p.focus_distance === \"number\") {\n        this.focus_distance = p.focus_distance;\n      }\n\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) {\n        this.focus_direction = p.command;\n      }\n\n      if (typeof p.ledState === \"string\") {\n        this.led_state = p.ledState;\n      }\n\n      if (typeof p.action === \"string\" && [\"on\", \"off\"].includes(p.action)) {\n        this.led_state = p.action;\n      }\n    },\n\n    // --- PUMP PARAMS ---\n    onFlowrateToggle(val) {\n      if (val != null) this.pump_flowrate = val;\n    },\n\n    onVolumeToggle(val) {\n      if (val != null) this.pump_manual_volume = val;\n    },\n\n    sendPumpParams() {\n      this.send({\n        topic: \"set_global/pump\",\n        payload: {\n          pump_flowrate: Number(this.pump_flowrate) || 0,\n          pump_manual_volume: Number(this.pump_manual_volume) || 0,\n        },\n      });\n    },\n\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      } else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({\n          topic: \"actuator/pump\",\n          payload: {\n            action: \"move\",\n            direction: dir,\n            volume: Number(this.pump_manual_volume) || 0,\n            flowrate: Number(this.pump_flowrate) || 0,\n          },\n        });\n      }\n    },\n\n    // --- FOCUS PARAMS ---\n    on_focus_distance_toggle(val) {\n      if (val != null) this.focus_distance = val;\n    },\n\n    speedFromDistance(d) {\n      const x1 = 100, y1 = 1000;\n      const x2 = 1000, y2 = 2000;\n      const x3 = 5000, y3 = 5000;\n\n      if (d <= x1) return y1;\n      if (d >= x3) return y3;\n\n      if (d <= x2) {\n        const m = (y2 - y1) / (x2 - x1);\n        return Math.round(y1 + m * (d - x1));\n      }\n\n      const m = (y3 - y2) / (x3 - x2);\n      return Math.round(y2 + m * (d - x2));\n    },\n\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      const speed = this.speedFromDistance(d);\n\n      this.send({\n        topic: \"set_global/focus\",\n        payload: {\n          focus_distance: d,\n          focus_speed: speed,\n        },\n      });\n    },\n\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n\n      if (val === \"stop\") {\n        this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } });\n      } else {\n        const d = Number(this.focus_distance) || 25;\n        const speed = this.speedFromDistance(d);\n\n        this.send({\n          topic: \"actuator/focus\",\n          payload: {\n            action: \"move\",\n            direction: val,\n            distance: d / 1000,\n            speed: speed / 1000,\n          },\n        });\n      }\n    },\n\n    // --- LED ---\n    on_led_toggle(val) {\n      if (!val) return;\n      this.led_state = val;\n      this.send({ topic: \"light\", payload: { action: val } });\n    },\n\n    // --- INFO POPUP ---\n    showInfo(type) {\n      const infoMap = {\n        pump_flowrate: {\n          title: \"Flowrate (ml/min)\",\n          unit: \"ml/min\",\n          description: \"Flowrate of the pump during manual exploration\",\n        },\n        pump_manual_volume: {\n          title: \"Volume to pass (ml)\",\n          unit: \"ml\",\n          description: \"Volume displaced by the pump during manual exploration\",\n        },\n        focus_speed: {\n          title: \"Focus Speed (µm/sec)\",\n          unit: \"μm/s\",\n          description: \"Speed of the displacement by the focus plate during manual exploration\",\n        },\n      };\n      this.infoContent = infoMap[type] || {};\n      this.infoDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n\n  @media (max-width: 1024px) {\n    .v-text-field input {\n      font-size: 1.3rem !important;\n    }\n\n    .v-slider {\n      height: 2px !important;\n    }\n  }\n\n.v-card-text{\n  padding : 0 !important;\n}\n.v-card{\n  border:none;\n}\n.v-container{\n  background: #eef3ff;\n}\n\n\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3700,7 +3700,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n                \n\n                    <div class=\"iframe-container border\">\n                        <!-- \n                            Replace '/preview/node-red' with your actual target URL. \n                            Ensure the target URL allows iframe embedding (X-Frame-Options).\n                        -->\n                        <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\"></iframe>\n                    </div>\n                    \n    </v-container>\n</template>\n\n<style>\n    /* Scoped styles for the iframe container \n      Force a 4:3 aspect ratio\n    */\n    .iframe-container {\n        position: relative;\n        width: 100%;\n        padding-top: 75%; /* 4:3 Aspect Ratio */\n        overflow: hidden;\n        border-radius: 8px;\n        background:white;\n    }\n\n    .iframe-container iframe {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        border: none;\n        margin: 0;\n    }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3724,7 +3724,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"1\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\" :min=\"1\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n        <!-- LED CONTROL -->\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"1\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\" :min=\"1\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n.v-card-text{\npadding : 0 !important;\n}\n.v-card{\nborder:none;\n}\n.v-container{\nbackground: #eef3ff;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3750,7 +3750,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"px-2 py-0\" \n      no-gutters\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n        <h1 class=\"text-h5 font-weight-bold text-primary my-0 text-truncate\">\n          Acquisition\n        </h1>\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3929,7 +3929,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "\n<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" justify=\"space-between\" class=\"px-2\">\n      <!-- Back to Preview -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <!-- Forward to Acquisition -->\n      <v-col cols=\"auto\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"py-4 px-6 rounded-lg border\" \n      no-gutters variant=\"flat\" style=\"background:white\"\n    >\n      \n      <v-col cols=\"3\" class=\"py-0 d-flex justify-start\">\n        <v-btn\n          to=\"metadata\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          <v-icon start>mdi-chevron-left</v-icon>\n          Metadata\n        </v-btn>\n      </v-col>\n\n      <v-col cols=\"6\" class=\"text-center py-0\">\n\n      </v-col>\n\n      <v-col cols=\"3\" class=\"py-0 d-flex justify-end\">\n        <v-btn\n          to=\"segmentation\"\n          color=\"primary\"\n          rounded=\"lg\"\n          class=\"px-4\" variant=\"text\" size=\"large\"\n        >\n          Segmentation\n          <v-icon end>mdi-chevron-right</v-icon>\n        </v-btn>\n      </v-col>\n      \n    </v-row>\n  </v-container>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4695,7 +4695,7 @@
         "page": "",
         "ui": "",
         "name": "List of Segmentation",
-        "order": 2,
+        "order": 1,
         "width": 0,
         "height": 0,
         "head": "",

From 89ec927b82083c69b4ca2157f34c74901d7d38bf Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Sun, 30 Nov 2025 22:33:17 +0000
Subject: [PATCH 26/36] update

---
 node-red/projects/dashboard/flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index c519c2e69..299e449b0 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -3724,7 +3724,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n        <!-- LED CONTROL -->\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">LED Control</div>\n      </div>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"1\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\" :min=\"1\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n.v-card-text{\npadding : 0 !important;\n}\n.v-card{\nborder:none;\n}\n.v-container{\nbackground: #eef3ff;\n}\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n        <!-- Acquisition CONTROL -->\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">Acquisition</div>\n      </div>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"1\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\" :min=\"1\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n.v-card-text{\npadding : 0 !important;\n}\n.v-card{\nborder:none;\n}\n.v-container{\nbackground: #eef3ff;\n}\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4997,7 +4997,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <div style=\"width:100%; height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" ></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.seq),\n        y:this.rows.map(r=>r.area),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{size:10,color:\"blue\",opacity:0.5},\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Acq Sequence\"},\n        yaxis:{title:\"Area\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
+        "format": "<template>\n  <div style=\"width:100%; min-height:250px; position:relative;\">\n    <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n    <div v-show=\"!loading\" ref=\"plot\" ></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data(){ return { loading:true, rows:[] } },\n\n  watch:{\n    msg:{\n      immediate:true, deep:true,\n      handler(m){\n        if(!m?.payload) return;\n\n        if(m.payload.data?.length===0){\n          this.loading=true;\n          this.rows=[];\n          if(this.$refs.plot&&window.Plotly) Plotly.purge(this.$refs.plot);\n          return;\n        }\n\n        this.rows = m.payload.data || [];\n        this.loading = this.rows.length===0;\n        this.$nextTick(()=>this.draw());\n      }\n    }\n  },\n\n  mounted(){\n    if(!window.Plotly){\n      const s=document.createElement(\"script\");\n      s.src=\"https://cdn.plot.ly/plotly-2.27.0.min.js\";\n      s.onload=()=>this.draw();\n      document.head.appendChild(s);\n    } else this.draw();\n  },\n\n  methods:{\n    draw(){\n      if(!window.Plotly) return;\n      const el=this.$refs.plot;\n\n      if(!this.rows.length){\n        this.loading=true;\n        Plotly.purge(el);\n        return;\n      }\n\n      this.loading=false;\n\n      const trace={\n        x:this.rows.map(r=>r.seq),\n        y:this.rows.map(r=>r.area),\n        mode:\"markers\",\n        type:\"scatter\",\n        marker:{size:10,color:\"blue\",opacity:0.5},\n        hoverinfo:\"none\"\n      };\n\n      const layout={\n        margin:{t:10,b:30,l:50,r:20},\n        xaxis:{title:\"Acq Sequence\"},\n        yaxis:{title:\"Area\"}\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 7be00355330cd24f2aa6c1b4cbdfe564d11bf8cc Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Mon, 1 Dec 2025 08:52:30 +0000
Subject: [PATCH 27/36] update

---
 node-red/projects/dashboard/flows.json | 82 +++++++++++++-------------
 1 file changed, 40 insertions(+), 42 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 299e449b0..bec1b29d4 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -3975,8 +3975,7 @@
         "y": 200,
         "wires": [
             [
-                "46b98c54eb680c2e",
-                "b162f94dfd6bfdad"
+                "46b98c54eb680c2e"
             ]
         ]
     },
@@ -4075,28 +4074,10 @@
         "y": 280,
         "wires": [
             [
-                "46b98c54eb680c2e",
-                "b162f94dfd6bfdad"
+                "46b98c54eb680c2e"
             ]
         ]
     },
-    {
-        "id": "b162f94dfd6bfdad",
-        "type": "debug",
-        "z": "35d7387466dd0bc0",
-        "name": "debug 3",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1080,
-        "y": 140,
-        "wires": []
-    },
     {
         "id": "250979b4672d81b6",
         "type": "ui-event",
@@ -4283,8 +4264,7 @@
         "y": 260,
         "wires": [
             [
-                "33c0d1b8251b5d00",
-                "6a279f9f754e8ead"
+                "33c0d1b8251b5d00"
             ]
         ]
     },
@@ -4409,7 +4389,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\nexport default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 0,\n      // 1. Add a flag to track if page is fully loaded\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    // 2. Wait 1 second after the component loads before accepting \"Open\" commands.\n    // This effectively ignores the \"History\" message sent by Node-RED on refresh.\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        // 3. If the page is still loading (first 1 sec), IGNORE the message\n        if (!this.isReady) return;\n\n        // Safety check\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        // 4. Check conditions\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 0;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
+        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\nexport default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 20,\n      // 1. Add a flag to track if page is fully loaded\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    // 2. Wait 1 second after the component loads before accepting \"Open\" commands.\n    // This effectively ignores the \"History\" message sent by Node-RED on refresh.\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        // 3. If the page is still loading (first 1 sec), IGNORE the message\n        if (!this.isReady) return;\n\n        // Safety check\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        // 4. Check conditions\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 0;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4449,22 +4429,6 @@
             ]
         ]
     },
-    {
-        "id": "6a279f9f754e8ead",
-        "type": "debug",
-        "z": "0fd76ac156d78937",
-        "name": "debug 1",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 340,
-        "y": 360,
-        "wires": []
-    },
     {
         "id": "77bb783e65c3ffd6",
         "type": "ui-event",
@@ -4526,7 +4490,8 @@
         "wires": [
             [
                 "384aa9ab83bfe566",
-                "164baa371893de7a"
+                "164baa371893de7a",
+                "b8e4f06f40c63fd2"
             ]
         ]
     },
@@ -4587,7 +4552,8 @@
         "y": 180,
         "wires": [
             [
-                "18a10804663dbaa1"
+                "18a10804663dbaa1",
+                "ca563bd4bf522cf9"
             ]
         ]
     },
@@ -5297,6 +5263,38 @@
             []
         ]
     },
+    {
+        "id": "b8e4f06f40c63fd2",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 2",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 920,
+        "y": 60,
+        "wires": []
+    },
+    {
+        "id": "ca563bd4bf522cf9",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 4",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 360,
+        "y": 140,
+        "wires": []
+    },
     {
         "id": "8e11bb014b9664be",
         "type": "ui-template",

From a7a0a5940d5d44b19e483e816a2c254539981180 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Thu, 4 Dec 2025 10:00:30 +0000
Subject: [PATCH 28/36] update

---
 node-red/projects/dashboard/flows.json | 509 +++++++------------------
 1 file changed, 139 insertions(+), 370 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index bec1b29d4..b437ada7a 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -867,7 +867,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 3,
+        "order": 4,
         "showTitle": true,
         "className": "",
         "visible": "true",
@@ -1379,7 +1379,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 1,
+        "order": 2,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1393,7 +1393,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 4,
+        "order": 5,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1471,7 +1471,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 2,
+        "order": 3,
         "showTitle": true,
         "className": "",
         "visible": "true",
@@ -2097,7 +2097,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 570,
+        "x": 310,
         "y": 40,
         "wires": [
             [
@@ -2105,31 +2105,6 @@
             ]
         ]
     },
-    {
-        "id": "f49d711b2738e87e",
-        "type": "switch",
-        "z": "07f3b717f2a2c8c7",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "7e7d02f3ea356eff"
-            ]
-        ]
-    },
     {
         "id": "b1f5b8b5f26121e6",
         "type": "ui-event",
@@ -2140,7 +2115,7 @@
         "y": 40,
         "wires": [
             [
-                "f49d711b2738e87e"
+                "7e7d02f3ea356eff"
             ]
         ]
     },
@@ -2253,7 +2228,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 570,
+        "x": 310,
         "y": 40,
         "wires": [
             [
@@ -2263,31 +2238,6 @@
             ]
         ]
     },
-    {
-        "id": "e74e4d04e4a79458",
-        "type": "switch",
-        "z": "1b667c6443413ced",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "67b871e8f9c64c2b"
-            ]
-        ]
-    },
     {
         "id": "7c16cbd0b2c40ea4",
         "type": "ui-event",
@@ -2298,7 +2248,7 @@
         "y": 40,
         "wires": [
             [
-                "e74e4d04e4a79458"
+                "67b871e8f9c64c2b"
             ]
         ]
     },
@@ -2314,7 +2264,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": ".v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n}\n\n\n.v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n}\n\n.v-btn-group .v-btn, .v-field__overlay {\n    background: #eef3ff;\n}\n    \n",
+        "format": ".v-btn--variant-outlined.v-btn--active {\n    background-color: #1976d2 !important;\n    color: white !important;\n}\n\n\n.v-field__field {\n    background: #eef3ff;\n    border-radius: 4px;\n}\n\n.v-btn-group .v-btn, .v-field__overlay {\n    background: #eef3ff;\n}\n    \n.v-row {\n        margin: 0;\n}",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2405,8 +2355,8 @@
         "drop": false,
         "allowrate": false,
         "outputs": 1,
-        "x": 180,
-        "y": 140,
+        "x": 140,
+        "y": 180,
         "wires": [
             [
                 "74f8dad75cdd3c16"
@@ -2425,8 +2375,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 200,
-        "y": 280,
+        "x": 320,
+        "y": 180,
         "wires": [
             [
                 "04386808e694e97e",
@@ -2485,8 +2435,7 @@
         "y": 200,
         "wires": [
             [
-                "39c7e4b018ce16cb",
-                "1044b154a90406dc"
+                "39c7e4b018ce16cb"
             ],
             [
                 "8efc52e6ee9206f6"
@@ -2500,7 +2449,7 @@
         "group": "5d39a98563150f22",
         "page": "",
         "ui": "",
-        "name": "body",
+        "name": "empty-state",
         "order": 1,
         "width": "0",
         "height": "0",
@@ -2511,32 +2460,12 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 510,
+        "x": 530,
         "y": 280,
         "wires": [
             []
         ]
     },
-    {
-        "id": "1044b154a90406dc",
-        "type": "exec",
-        "z": "1b667c6443413ced",
-        "command": "sudo reboot now",
-        "addpay": "",
-        "append": "",
-        "useSpawn": "false",
-        "timer": "",
-        "winHide": false,
-        "oldrc": false,
-        "name": "",
-        "x": 1190,
-        "y": 300,
-        "wires": [
-            [],
-            [],
-            []
-        ]
-    },
     {
         "id": "04386808e694e97e",
         "type": "ui-template",
@@ -2779,6 +2708,62 @@
             []
         ]
     },
+    {
+        "id": "e9eca3996df4f4a2",
+        "type": "ui-event",
+        "z": "1b667c6443413ced",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 920,
+        "y": 600,
+        "wires": [
+            [
+                "feda608d3423af51"
+            ]
+        ]
+    },
+    {
+        "id": "feda608d3423af51",
+        "type": "switch",
+        "z": "1b667c6443413ced",
+        "name": "msg.payload.page.path === \"/home\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/home",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 1170,
+        "y": 600,
+        "wires": [
+            [
+                "790b19154efc45c3"
+            ]
+        ]
+    },
+    {
+        "id": "790b19154efc45c3",
+        "type": "debug",
+        "z": "1b667c6443413ced",
+        "name": "debug 2",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 1100,
+        "y": 700,
+        "wires": []
+    },
     {
         "id": "a57a165cd0ce511b",
         "type": "ui-template",
@@ -2847,31 +2832,6 @@
             []
         ]
     },
-    {
-        "id": "8d5eadf60a2fd54b",
-        "type": "switch",
-        "z": "ab58b3fd0e6bcd77",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
-        "wires": [
-            [
-                "6074fc31218f9a74"
-            ]
-        ]
-    },
     {
         "id": "da4fbaab826b0d62",
         "type": "ui-event",
@@ -2882,7 +2842,7 @@
         "y": 40,
         "wires": [
             [
-                "8d5eadf60a2fd54b"
+                "6074fc31218f9a74"
             ]
         ]
     },
@@ -2903,7 +2863,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 580,
+        "x": 320,
         "y": 40,
         "wires": [
             [
@@ -3187,7 +3147,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Project Metadata Inputs -->\n  <v-row class=\"mt-2\">\n    <!-- Project Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_project\" label=\"Name of the project\" placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Sample ID -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n      v-model.number=\"sample_id\"\n      type=\"number\"\n      label=\"Sample ID\"\n      prefix=\"S_\"\n      placeholder=\"ex : S001\"\n      variant=\"outlined\"\n      density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Operator Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_operator\" label=\"Operator name\" placeholder=\"ex : Manu Prakash\" variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <!-- Sampling Gear Selector -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"sample_gear\" variant=\"outlined\"  color=\"primary\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"sendUpdate\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n\n    </v-col>\n  </v-row>\n\n  <!-- Hint Popup -->\n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", // single topic\n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) {\n          // Supprime le préfixe éventuel avant d'afficher\n          this.sample_id = String(p.sample_id).replace(/^S[_-]?/, \"\");\n        }\n\n        if (p.sample_operator !== undefined)\n          this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Send grouped payload for all fields under one topic.\n     */\n    sendUpdate(extra = {}) {\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          ...extra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
+        "format": "<template>\n  <!-- Project Metadata Inputs -->\n  <v-row class=\"mt-2\">\n    <!-- Project Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_project\" label=\"Name of the project\" placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Sample ID -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n      v-model.number=\"sample_id\"\n      type=\"number\"\n      label=\"Sample ID\"\n      prefix=\"S_\"\n      placeholder=\"ex : 001\"\n      variant=\"outlined\"\n      density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Operator Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_operator\" label=\"Operator name\" placeholder=\"ex : Manu Prakash\" variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <!-- Sampling Gear Selector -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"sample_gear\" variant=\"outlined\"  color=\"primary\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"sendUpdate\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n\n    </v-col>\n  </v-row>\n  \n  <!-- NEW: Fraction Size Selector and Acquisition Settings -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Fraction Size / Acquisition Settings\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Fraction Size / Acquisition Settings',\n            'Select a fraction size range. This automatically sets the flowcell thickness and lens combination for acquisition.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"fraction_size_preset\" variant=\"outlined\" color=\"secondary\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"updateAcquisitionSettings\">\n\n          <v-btn :value=\"1\" stacked class=\"flex-grow-1\">\n            <span class=\"font-weight-bold\">10 to 100 μm</span>\n            <span class=\"text-caption\">Flowcell: 100 μm, Lenses: 25/4</span>\n          </v-btn>\n          <v-btn :value=\"2\" stacked class=\"flex-grow-1\">\n            <span class=\"font-weight-bold\">50 to 200 μm</span>\n            <span class=\"text-caption\">Flowcell: 300 μm, Lenses: 25/12</span>\n          </v-btn>\n          <v-btn :value=\"3\" stacked class=\"flex-grow-1\">\n            <span class=\"font-weight-bold\">100 to 500 μm</span>\n            <span class=\"text-caption\">Flowcell: 600 μm, Lenses: 25/16</span>\n          </v-btn>\n\n        </v-btn-toggle>\n      </div>\n    </v-col>\n    \n    <!-- The read-only preset display block has been removed -->\n\n  </v-row>\n\n  <!-- Hint Popup -->\n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      \n      // NEW ACQUISITION SETTINGS\n      fraction_size_preset: 1, // Default to preset 1\n      acq_flowcell_thickness: \"100 um\", // Initial default for preset 1\n      acq_lenses: \"25/4\", // Initial default for preset 1\n      \n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", // single topic\n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) {\n          // Supprime le préfixe éventuel avant d'afficher\n          this.sample_id = String(p.sample_id).replace(/^S[_-]?/, \"\");\n        }\n\n        if (p.sample_operator !== undefined)\n          this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        \n        // NEW: Handle incoming acquisition settings\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = p.acq_flowcell_thickness;\n        if (p.acq_lenses !== undefined)\n          this.acq_lenses = p.acq_lenses;\n          \n        // NEW: Deduce the preset based on the incoming values\n        this.deducePreset(p.acq_flowcell_thickness, p.acq_lenses);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Define the constant values for each fraction size preset.\n     */\n    acquisitionPresets() {\n      return {\n        1: { flowcell: \"100 um\", lenses: \"25/4\", range: \"10 to 100 μm\" },\n        2: { flowcell: \"300 um\", lenses: \"25/12\", range: \"50 to 200 μm\" },\n        3: { flowcell: \"600 um\", lenses: \"25/16\", range: \"100 to 500 μm\" },\n      };\n    },\n    \n    /**\n     * Determines which preset matches the incoming flowcell and lenses values.\n     * If no match (e.g., it was previously set to a custom value), it forces it back to preset 1.\n     */\n    deducePreset(flowcell, lenses) {\n      if (flowcell === undefined && lenses === undefined) return;\n      \n      const presets = this.acquisitionPresets();\n      let found = false;\n      for (const key in presets) {\n        if (presets[key].flowcell === flowcell && presets[key].lenses === lenses) {\n          this.fraction_size_preset = Number(key);\n          found = true;\n          break;\n        }\n      }\n      \n      // If no match found (meaning an invalid or old custom value was sent), revert to Preset 1\n      if (!found) {\n        this.fraction_size_preset = 1;\n        this.acq_flowcell_thickness = presets[1].flowcell;\n        this.acq_lenses = presets[1].lenses;\n        // The watch handler will re-run sendUpdate implicitly if the values change.\n      }\n    },\n    \n    /**\n     * Update flowcell and lenses based on selected preset value (1, 2, or 3).\n     */\n    updateAcquisitionSettings(presetValue) {\n      const preset = this.acquisitionPresets()[presetValue];\n      this.acq_flowcell_thickness = preset.flowcell;\n      this.acq_lenses = preset.lenses;\n      // Automatically send update when a preset is selected\n      this.sendUpdate();\n    },\n    \n    /**\n     * Send grouped payload for all fields under one topic.\n     */\n    sendUpdate(extra = {}) {\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          \n          // NEW ACQUISITION FIELDS\n          acq_flowcell_thickness: this.acq_flowcell_thickness || \"\",\n          acq_lenses: this.acq_lenses || \"\",\n          \n          ...extra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n  mounted() {\n    // Initial data send on mount\n    this.sendUpdate();\n  }\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .bg-blue-grey-lighten-5 {\n    background-color: #ECEFF1; /* Light gray background for readonly fields */\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3361,31 +3321,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "a68e52177173f690"
-            ]
-        ]
-    },
-    {
-        "id": "a68e52177173f690",
-        "type": "switch",
-        "z": "190b0c9aa75e8843",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "b1a74fe5569d418a"
@@ -3409,7 +3344,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 580,
+        "x": 320,
         "y": 40,
         "wires": [
             [
@@ -3724,7 +3659,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n        <!-- Acquisition CONTROL -->\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text><!-- Label -->\n\n      <div class=\"d-flex justify-space-between align-center mb-4\">\n        <div class=\"text-h6\">Acquisition</div>\n      </div>\n    <v-row>\n      <v-col cols=\"12\">\n        <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n          placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\" hide-details\n          @update:model-value=\"autoCalculateVolumes\" />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"img\"\n          class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" sm=\"8\">\n        <v-slider :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\" :min=\"1\"\n          :step=\"1\" label=\"Volume between images\" hide-details />\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\">\n        <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n          @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" type=\"number\" :min=\"1\"\n          variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\" @input=\"sendUpdate()\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\"\n              @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-textarea>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n          <template #default=\"{ value }\">\n            <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n          </template>\n        </v-progress-linear>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"aligned-row\">\n      <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n        <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n      </v-col>\n      <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n        <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n          class=\"aligned-input\" />\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n          class=\"text-subtitle-1\" prominent>\n          {{ formattedStatus }}\n        </v-alert>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\">\n        <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n          class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n          <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n          <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n        </v-btn-toggle>\n      </v-col>\n    </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n.v-card-text{\npadding : 0 !important;\n}\n.v-card{\nborder:none;\n}\n.v-container{\nbackground: #eef3ff;\n}\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels class=\"my-4\" variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n\n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3821,31 +3756,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "5bea829ec02ded61"
-            ]
-        ]
-    },
-    {
-        "id": "5bea829ec02ded61",
-        "type": "switch",
-        "z": "35d7387466dd0bc0",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "54ae95ca6088f307"
@@ -3869,7 +3779,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 590,
+        "x": 330,
         "y": 40,
         "wires": [
             [
@@ -4086,31 +3996,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "72421c36bb0418bc"
-            ]
-        ]
-    },
-    {
-        "id": "72421c36bb0418bc",
-        "type": "switch",
-        "z": "0fd76ac156d78937",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "66d295cc27d69cec"
@@ -4134,7 +4019,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 590,
+        "x": 330,
         "y": 40,
         "wires": [
             [
@@ -4437,31 +4322,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "55814595d9207e95"
-            ]
-        ]
-    },
-    {
-        "id": "55814595d9207e95",
-        "type": "switch",
-        "z": "14f8c9b5ce1235cc",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "90c920ecdab16908"
@@ -4485,13 +4345,12 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 590,
+        "x": 330,
         "y": 40,
         "wires": [
             [
                 "384aa9ab83bfe566",
-                "164baa371893de7a",
-                "b8e4f06f40c63fd2"
+                "164baa371893de7a"
             ]
         ]
     },
@@ -4553,7 +4412,7 @@
         "wires": [
             [
                 "18a10804663dbaa1",
-                "ca563bd4bf522cf9"
+                "bdeb6f634e7ecffd"
             ]
         ]
     },
@@ -4624,8 +4483,8 @@
         "y": 180,
         "wires": [
             [
-                "d77ed8081a657507",
-                "384aa9ab83bfe566"
+                "384aa9ab83bfe566",
+                "9a10d9afb1a0b1ca"
             ]
         ]
     },
@@ -4648,7 +4507,7 @@
         "templateScope": "local",
         "className": "",
         "x": 820,
-        "y": 960,
+        "y": 1000,
         "wires": [
             []
         ]
@@ -4665,7 +4524,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Data Table -->\n  <v-data-table\n      fluid\n      :headers=\"headers\"\n      :items=\"items\"\n      :search=\"search\"\n      :loading=\"loading\"\n      item-value=\"acquisition_id\"\n      item-key=\"acquisition_id\"  \n      density=\"comfortable\"\n      hover\n      :item-class=\"getRowClass\"\n  >\n      \n      <template v-slot:loading>\n        <v-skeleton-loader type=\"table-row@5\"></v-skeleton-loader>\n      </template>\n\n      <!-- Project -->\n      <template v-slot:item.project_name=\"{ item }\">\n        <span class=\"font-weight-medium text-body-2 text-high-emphasis\">\n          {{ item.project_name }}\n        </span>\n      </template>\n\n      <!-- Sample -->\n      <template v-slot:item.sample_id=\"{ item }\">\n        <span class=\"text-body-2 text-high-emphasis\">\n          {{ item.sample_id }}\n        </span>\n      </template>\n\n      <!-- Acquisition ID -->\n      <template v-slot:item.acquisition_id=\"{ item }\">\n        <code class=\"text-grey-darken-3 bg-grey-lighten-4 px-2 py-1 rounded text-caption font-weight-medium\">\n          {{ item.acquisition_id }}\n        </code>\n      </template>\n\n      <!-- Image Count -->\n      <template v-slot:item.image_acquired_count=\"{ item }\">\n        <div class=\"d-flex align-center justify-end text-medium-emphasis\">\n          <v-icon size=\"small\" class=\"mr-2\">mdi-image-outline</v-icon>\n          <span class=\"font-weight-bold text-high-emphasis\">\n            {{ Number(item.image_acquired_count || 0).toLocaleString() }}\n          </span>\n        </div>\n      </template>\n\n      <!-- View Gallery -->\n      <template v-slot:item.gallery=\"{ item }\">\n        <v-btn\n          v-if=\"item.gallery\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.gallery\"\n          target=\"_blank\"\n        >\n          <v-icon start>mdi-image-multiple</v-icon>\n          Gallery\n        </v-btn>\n      </template>\n\n      <!-- Download Zip -->\n      <template v-slot:item.export=\"{ item }\">\n        <v-btn\n          v-if=\"item.export\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.export\"\n        >\n          <v-icon start>mdi-download</v-icon>\n          .zip\n        </v-btn>\n      </template>\n\n      <!-- Visualize -->\n      <template v-slot:item.actions=\"{ item }\">\n        <v-btn\n          variant=\"text\"\n          size=\"small\"\n          color=\"primary\"\n          class=\"text-capitalize font-weight-medium\"\n          @click=\"selectAcquisition(item)\"\n        >\n          <v-icon start>mdi-chart-scatter-plot-hexbin</v-icon>\n          Visualize\n        </v-btn>\n      </template>\n\n      <!-- No data -->\n      <template v-slot:no-data>\n        <div class=\"pa-8 text-center text-medium-emphasis\">\n          <v-icon icon=\"mdi-database-off\" size=\"x-large\" class=\"mb-3 text-grey-lighten-1\"></v-icon>\n          <div class=\"text-body-1\">No acquisitions found</div>\n        </div>\n      </template>\n\n  </v-data-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null, \n\n      headers: [\n        { title: \"Project\", key: \"project_name\", sortable: false, align: \"start\" },\n        { title: \"Sample\", key: \"sample_id\", sortable: false, align: \"start\" },\n        { title: \"Acquisition ID\", key: \"acquisition_id\", sortable: false, align: \"start\" },\n        { title: \"Count\", key: \"image_acquired_count\", sortable: false, align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Download\", key: \"export\", sortable: false, align: \"end\" },\n        { title: \"Visualize\", key: \"actions\", sortable: false, align: \"end\", width: \"140px\" }\n      ]\n    };\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(val) {\n        if (!val || !val.payload) return;\n\n        const payload = val.payload;\n        const isClearing =\n          payload === \"clear\" ||\n          payload?.clear === true ||\n          (Array.isArray(payload) && payload.length === 0);\n\n        if (isClearing) {\n          this.items = [];\n          this.loading = true;\n          this.selectedRow = null;\n          setTimeout(() => { this.loading = false; }, 300);\n          return;\n        }\n\n        if (Array.isArray(payload)) {\n          this.items = payload;\n          this.loading = false;\n        }\n      }\n    }\n  },\n\n  mounted() {\n    if (this.msg && Array.isArray(this.msg.payload)) {\n      this.items = this.msg.payload;\n      this.loading = false;\n    }\n  },\n\n  methods: {\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    // Prevent ghost row + highlight selection\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;   // Vuetify wrapper-safe\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
+        "format": "<template>\n  <!-- Data Table -->\n  <v-data-table\n      fluid\n      :headers=\"headers\"\n      :items=\"items\"\n      :search=\"search\"\n      :loading=\"loading\"\n      item-value=\"acquisition_id\"\n      item-key=\"acquisition_id\"  \n      density=\"comfortable\"\n      hover\n      :item-class=\"getRowClass\"\n  >\n      \n      <template v-slot:loading>\n        <v-skeleton-loader type=\"table-row@5\"></v-skeleton-loader>\n      </template>\n\n      <!-- Project -->\n      <template v-slot:item.project_name=\"{ item }\">\n        <span class=\"font-weight-medium text-body-2 text-high-emphasis\">\n          {{ item.project_name }}\n        </span>\n      </template>\n\n      <!-- Sample -->\n      <template v-slot:item.sample_id=\"{ item }\">\n        <span class=\"text-body-2 text-high-emphasis\">\n          {{ item.sample_id }}\n        </span>\n      </template>\n\n      <!-- Acquisition ID -->\n      <template v-slot:item.acquisition_id=\"{ item }\">\n        <code class=\"text-grey-darken-3 bg-grey-lighten-4 px-2 py-1 rounded text-caption font-weight-medium\">\n          {{ item.acquisition_id }}\n        </code>\n      </template>\n\n      <!-- Objects Count -->\n      <template v-slot:item.image_acquired_count=\"{ item }\">\n        <div class=\"d-flex align-center justify-end text-medium-emphasis\">\n          <v-icon size=\"small\" class=\"mr-2\">mdi-image-outline</v-icon>\n          <span class=\"font-weight-bold text-high-emphasis\">\n            {{ Number(item.image_acquired_count || 0).toLocaleString() }}\n          </span>\n        </div>\n      </template>\n\n      <!-- View Gallery -->\n      <template v-slot:item.gallery=\"{ item }\">\n        <v-btn\n          v-if=\"item.gallery\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.gallery\"\n          target=\"_blank\"\n        >\n          <v-icon start>mdi-image-multiple</v-icon>\n          Gallery\n        </v-btn>\n      </template>\n\n      <!-- Download Zip -->\n      <template v-slot:item.export=\"{ item }\">\n        <v-btn\n          v-if=\"item.export\"\n          variant=\"text\"\n          size=\"small\"\n          color=\"grey-darken-1\"\n          :href=\"item.export\"\n        >\n          <v-icon start>mdi-download</v-icon>\n          .zip\n        </v-btn>\n      </template>\n\n      <!-- Visualize -->\n      <template v-slot:item.actions=\"{ item }\">\n        <v-btn\n          variant=\"text\"\n          size=\"small\"\n          color=\"primary\"\n          class=\"text-capitalize font-weight-medium\"\n          @click=\"selectAcquisition(item)\"\n        >\n          <v-icon start>mdi-chart-scatter-plot-hexbin</v-icon>\n          Visualize\n        </v-btn>\n      </template>\n\n      <!-- No data -->\n      <template v-slot:no-data>\n        <div class=\"pa-8 text-center text-medium-emphasis\">\n          <v-icon icon=\"mdi-database-off\" size=\"x-large\" class=\"mb-3 text-grey-lighten-1\"></v-icon>\n          <div class=\"text-body-1\">No acquisitions found</div>\n        </div>\n      </template>\n\n  </v-data-table>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null, \n\n      headers: [\n        { title: \"Project\", key: \"project_name\", sortable: false, align: \"start\" },\n        { title: \"Sample\", key: \"sample_id\", sortable: false, align: \"start\" },\n        { title: \"Acquisition ID\", key: \"acquisition_id\", sortable: false, align: \"start\" },\n        { title: \"Objects Count\", key: \"image_acquired_count\", sortable: false, align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Download\", key: \"export\", sortable: false, align: \"end\" },\n        { title: \"Visualize\", key: \"actions\", sortable: false, align: \"end\", width: \"140px\" }\n      ]\n    };\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(val) {\n        if (!val || !val.payload) return;\n\n        const payload = val.payload;\n        const isClearing =\n          payload === \"clear\" ||\n          payload?.clear === true ||\n          (Array.isArray(payload) && payload.length === 0);\n\n        if (isClearing) {\n          this.items = [];\n          this.loading = true;\n          this.selectedRow = null;\n          setTimeout(() => { this.loading = false; }, 300);\n          return;\n        }\n\n        if (Array.isArray(payload)) {\n          this.items = payload;\n          this.loading = false;\n        }\n      }\n    }\n  },\n\n  mounted() {\n    if (this.msg && Array.isArray(this.msg.payload)) {\n      this.items = this.msg.payload;\n      this.loading = false;\n    }\n  },\n\n  methods: {\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    // Prevent ghost row + highlight selection\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;   // Vuetify wrapper-safe\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4716,7 +4575,7 @@
         "finalize": "",
         "libs": [],
         "x": 510,
-        "y": 500,
+        "y": 520,
         "wires": [
             [
                 "0c90eb450c8d9b01"
@@ -4736,7 +4595,7 @@
         "finalize": "",
         "libs": [],
         "x": 550,
-        "y": 540,
+        "y": 560,
         "wires": [
             [
                 "0a559ab05af2548e"
@@ -4756,7 +4615,7 @@
         "finalize": "",
         "libs": [],
         "x": 520,
-        "y": 580,
+        "y": 600,
         "wires": [
             [
                 "7b9d103ec5981051"
@@ -4776,7 +4635,7 @@
         "finalize": "",
         "libs": [],
         "x": 530,
-        "y": 620,
+        "y": 640,
         "wires": [
             [
                 "23a78a078fa1eca8"
@@ -4796,7 +4655,7 @@
         "finalize": "",
         "libs": [],
         "x": 500,
-        "y": 660,
+        "y": 680,
         "wires": [
             [
                 "09f4914fc0a54566"
@@ -4816,7 +4675,7 @@
         "finalize": "",
         "libs": [],
         "x": 540,
-        "y": 700,
+        "y": 720,
         "wires": [
             [
                 "7f4d047a4c73eb61"
@@ -4836,7 +4695,7 @@
         "finalize": "",
         "libs": [],
         "x": 520,
-        "y": 740,
+        "y": 760,
         "wires": [
             [
                 "a7c8654291022da1"
@@ -4856,7 +4715,7 @@
         "finalize": "",
         "libs": [],
         "x": 500,
-        "y": 780,
+        "y": 800,
         "wires": [
             [
                 "ed9d6e31cc3a01b1"
@@ -4876,7 +4735,7 @@
         "finalize": "",
         "libs": [],
         "x": 480,
-        "y": 820,
+        "y": 840,
         "wires": [
             [
                 "c15ef66d7e115bd3"
@@ -4902,7 +4761,7 @@
         "templateScope": "local",
         "className": "",
         "x": 820,
-        "y": 500,
+        "y": 520,
         "wires": [
             []
         ]
@@ -4946,7 +4805,7 @@
         "templateScope": "local",
         "className": "",
         "x": 840,
-        "y": 540,
+        "y": 560,
         "wires": [
             []
         ]
@@ -4970,7 +4829,7 @@
         "templateScope": "local",
         "className": "",
         "x": 820,
-        "y": 580,
+        "y": 600,
         "wires": [
             []
         ]
@@ -4994,7 +4853,7 @@
         "templateScope": "local",
         "className": "",
         "x": 890,
-        "y": 620,
+        "y": 640,
         "wires": [
             []
         ]
@@ -5018,7 +4877,7 @@
         "templateScope": "local",
         "className": "",
         "x": 870,
-        "y": 660,
+        "y": 680,
         "wires": [
             []
         ]
@@ -5042,7 +4901,7 @@
         "templateScope": "local",
         "className": "",
         "x": 830,
-        "y": 700,
+        "y": 720,
         "wires": [
             []
         ]
@@ -5066,7 +4925,7 @@
         "templateScope": "local",
         "className": "",
         "x": 890,
-        "y": 740,
+        "y": 760,
         "wires": [
             []
         ]
@@ -5090,7 +4949,7 @@
         "templateScope": "local",
         "className": "",
         "x": 860,
-        "y": 780,
+        "y": 800,
         "wires": [
             []
         ]
@@ -5114,7 +4973,7 @@
         "templateScope": "local",
         "className": "",
         "x": 850,
-        "y": 820,
+        "y": 840,
         "wires": [
             []
         ]
@@ -5132,7 +4991,7 @@
         "finalize": "",
         "libs": [],
         "x": 450,
-        "y": 900,
+        "y": 920,
         "wires": [
             [
                 "d57a5bca66c04989"
@@ -5158,7 +5017,7 @@
         "templateScope": "local",
         "className": "",
         "x": 820,
-        "y": 900,
+        "y": 920,
         "wires": [
             []
         ]
@@ -5207,7 +5066,7 @@
         "finalize": "",
         "libs": [],
         "x": 440,
-        "y": 960,
+        "y": 1000,
         "wires": [
             [
                 "4244d2ed880cca66"
@@ -5232,7 +5091,7 @@
         "allowrate": false,
         "outputs": 1,
         "x": 180,
-        "y": 280,
+        "y": 340,
         "wires": [
             [
                 "5ec998719a884cfe"
@@ -5264,31 +5123,41 @@
         ]
     },
     {
-        "id": "b8e4f06f40c63fd2",
-        "type": "debug",
+        "id": "9a10d9afb1a0b1ca",
+        "type": "switch",
         "z": "14f8c9b5ce1235cc",
-        "name": "debug 2",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "false",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 920,
-        "y": 60,
-        "wires": []
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "neq",
+                "v": "$pageview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 170,
+        "y": 300,
+        "wires": [
+            [
+                "d77ed8081a657507"
+            ]
+        ]
     },
     {
-        "id": "ca563bd4bf522cf9",
+        "id": "bdeb6f634e7ecffd",
         "type": "debug",
         "z": "14f8c9b5ce1235cc",
-        "name": "debug 4",
+        "name": "debug 1",
         "active": true,
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "false",
+        "complete": "true",
+        "targetType": "full",
         "statusVal": "",
         "statusType": "auto",
         "x": 360,
@@ -5392,31 +5261,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "a0df077ddbb184e3"
-            ]
-        ]
-    },
-    {
-        "id": "a0df077ddbb184e3",
-        "type": "switch",
-        "z": "6426e7bea6900426",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "874fd69a5398300e"
@@ -5440,7 +5284,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 640,
+        "x": 380,
         "y": 40,
         "wires": [
             [
@@ -5600,31 +5444,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "068b250f8668e3ea"
-            ]
-        ]
-    },
-    {
-        "id": "068b250f8668e3ea",
-        "type": "switch",
-        "z": "14c685bd04db8be5",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "72dd2876e74c3ef2"
@@ -5648,7 +5467,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 620,
+        "x": 360,
         "y": 40,
         "wires": [
             [
@@ -5688,7 +5507,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-3\">\n              <h3 class=\"text-subtitle-1 ma-0\">1. LED Control</h3>\n              <v-chip color=\"primary\" variant=\"flat\" class=\"font-mono\">\n                {{ currentLedValue.toFixed(6) }}\n              </v-chip>\n            </div>\n\n            <v-row no-gutters class=\"align-center\">\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-minus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(-0.000001)\"\n                  class=\"mr-2\"\n                />\n              </v-col>\n\n              <v-col class=\"flex-grow-1\">\n                <v-slider\n                  v-model=\"currentLedValue\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.000001\"\n                  color=\"primary\"\n                  track-color=\"grey-lighten-2\"\n                  thumb-label\n                  hide-details\n                  @end=\"onSliderRelease\"\n                  class=\"align-center mt-0\"\n                ></v-slider>\n              </v-col>\n\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-plus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(+0.000001)\"\n                  class=\"ml-2\"\n                />\n              </v-col>\n            </v-row>\n            </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-2\">\n              <h3 class=\"text-subtitle-1 ma-0\">2. Measured Luminance</h3>\n            </div>\n\n            <div class=\"text-center mb-2\">\n              <div class=\"text-h3 font-weight-bold\">\n                {{ currentLuminance.toFixed(0) }}\n              </div>\n              <div class=\"text-caption text-grey\">\n                Measured from central region of preview\n              </div>\n            </div>\n\n            <v-progress-linear\n              :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n              color=\"primary\"\n              height=\"20\"\n              rounded\n            >\n              <template #default=\"{ value }\">\n                <strong style=\"color:white; text-shadow: 0 0 2px black;\">\n                  {{ Math.round(currentLuminance) }}\n                </strong>\n              </template>\n            </v-progress-linear>\n          </section>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      currentLedValue: 0.5,\n      currentLuminance: 0,\n      html2canvasReady: false,\n      captureInterval: null,\n    };\n  },\n\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.led_intensity !== undefined)\n          this.currentLedValue = Number(p.led_intensity);\n        if (p.value !== undefined)\n          this.currentLedValue = Number(p.value);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // --------------------------------------------\n    // LED CONTROL\n    // --------------------------------------------\n    adjustLed(step) {\n      let v = this.currentLedValue + step;\n      v = Math.max(0, Math.min(1, v));\n      this.currentLedValue = v;\n      this.onSliderRelease();\n    },\n\n    onSliderRelease() {\n      this.sendUpdate(\"light\", {\n        action: \"on\",\n        value: Number(this.currentLedValue.toFixed(5)),\n      });\n    },\n\n    sendUpdate(topic, payload) {\n      const msg = { topic, payload };\n      if (this.$emit) this.$emit(\"msg-input\", msg);\n      if (this.send) this.send(msg);\n    },\n\n    // --------------------------------------------\n    // AUTO CAPTURE CONTROL (Always ON)\n    // --------------------------------------------\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureLuminance();\n      }, 500); // update rate\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // --------------------------------------------\n    // PIXEL CAPTURE FROM IFRAME\n    // --------------------------------------------\n    async captureLuminance() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n\n        let sum = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          const r = pixelData[i];\n          const g = pixelData[i + 1];\n          const b = pixelData[i + 2];\n          sum += (r + g + b) / 3;\n          count++;\n        }\n\n        this.currentLuminance = count > 0 ? sum / count : 0;\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n.target-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sampling-overlay {\n  position: absolute;\n  width: calc(100% / 3); \n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red; \n  pointer-events: none; \n  z-index: 10;\n}\n\n.font-mono {\n  font-family: 'Roboto Mono', monospace;\n}\n</style>",
+        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- -------------------------------------------------------------\n               LED CONTROL\n          -------------------------------------------------------------- -->\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-3\">\n              <h3 class=\"text-subtitle-1 ma-0\">1. LED Control</h3>\n              <v-chip color=\"primary\" variant=\"flat\" class=\"font-mono\">\n                {{ currentLedValue.toFixed(12) }}\n              </v-chip>\n            </div>\n\n            <!-- DYNAMIC PRECISION BUTTONS (10⁻¹ → 10⁻¹⁵) -->\n            <div class=\"d-flex flex-wrap mb-4\" style=\"gap:6px;\">\n              <v-btn\n                v-for=\"(v, i) in stepList\"\n                :key=\"i\"\n                size=\"small\"\n                variant=\"outlined\"\n                :color=\"stepSize === v ? 'primary' : ''\"\n                @click=\"setStep(v)\"\n              >\n                {{ formatStep(v) }}\n              </v-btn>\n            </div>\n\n            <!-- SLIDER + BUTTONS -->\n            <v-row no-gutters class=\"align-center\">\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-minus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(-stepSize)\"\n                  class=\"mr-2\"\n                />\n              </v-col>\n\n              <v-col class=\"flex-grow-1\">\n                <v-slider\n                  v-model=\"currentLedValue\"\n                  min=\"0\"\n                  max=\"1\"\n                  step=\"0.000001\"\n                  color=\"primary\"\n                  track-color=\"grey-lighten-2\"\n                  thumb-label\n                  hide-details\n                  @end=\"onSliderRelease\"\n                  class=\"align-center mt-0\"\n                ></v-slider>\n              </v-col>\n\n              <v-col cols=\"auto\">\n                <v-btn\n                  icon=\"mdi-plus\"\n                  density=\"comfortable\"\n                  variant=\"outlined\"\n                  color=\"primary\"\n                  @click=\"adjustLed(+stepSize)\"\n                  class=\"ml-2\"\n                />\n              </v-col>\n            </v-row>\n          </section>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- -------------------------------------------------------------\n               LUMINANCE MEASUREMENT\n          -------------------------------------------------------------- -->\n          <section class=\"mb-6\">\n            <div class=\"d-flex justify-space-between align-center mb-2\">\n              <h3 class=\"text-subtitle-1 ma-0\">2. Measured Luminance</h3>\n            </div>\n\n            <div class=\"text-center mb-2\">\n              <div class=\"text-h3 font-weight-bold\">\n                {{ currentLuminance.toFixed(0) }}\n              </div>\n              <div class=\"text-caption text-grey\">\n                Measured from central region of preview\n              </div>\n            </div>\n\n            <v-progress-linear\n              :model-value=\"Math.min(Math.max((currentLuminance / 255) * 100, 0), 100)\"\n              color=\"primary\"\n              height=\"20\"\n              rounded\n            >\n              <template #default=\"{ value }\">\n                <strong style=\"color:white; text-shadow: 0 0 2px black;\">\n                  {{ Math.round(currentLuminance) }}\n                </strong>\n              </template>\n            </v-progress-linear>\n          </section>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    // Generate steps: [1e-1, 1e-2, ..., 1e-15]\n    const list = [];\n    for (let i = 1; i <= 15; i++) {\n      list.push(Math.pow(10, -i));\n    }\n\n    return {\n      currentLedValue: 0.5,\n      currentLuminance: 0,\n      html2canvasReady: false,\n      captureInterval: null,\n\n      stepList: list,   // dynamic digit steps\n      stepSize: list[5] // default = 1e-6\n    };\n  },\n\n  watch: {\n    msg: {\n      handler(n) {\n        const p = n?.payload || {};\n        if (p.led_intensity !== undefined)\n          this.currentLedValue = Number(p.led_intensity);\n        if (p.value !== undefined)\n          this.currentLedValue = Number(p.value);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n  },\n\n  methods: {\n    // DISPLAY FORMATTER\n    formatStep(v) {\n      return v < 0.000001 ? v.toExponential() : v.toString();\n    },\n\n    // PRECISION SELECTION\n    setStep(v) {\n      this.stepSize = v;\n    },\n\n    // LED CONTROL\n    adjustLed(step) {\n      let v = Number(this.currentLedValue) + Number(step);\n      v = Math.max(0, Math.min(1, v));\n      this.currentLedValue = Number(v);\n      this.onSliderRelease();\n    },\n\n    onSliderRelease() {\n      this.sendUpdate(\"light\", {\n        action: \"on\",\n        value: Number(this.currentLedValue.toFixed(12)),\n      });\n    },\n\n    sendUpdate(topic, payload) {\n      const msg = { topic, payload };\n      if (this.$emit) this.$emit(\"msg-input\", msg);\n      if (this.send) this.send(msg);\n    },\n\n    // AUTO CAPTURE\n    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureLuminance();\n      }, 500);\n    },\n\n    stopAutoCapture() {\n      if (this.captureInterval) {\n        clearInterval(this.captureInterval);\n        this.captureInterval = null;\n      }\n    },\n\n    loadHtml2Canvas() {\n      if (window.html2canvas) {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n        return;\n      }\n\n      const script = document.createElement(\"script\");\n      script.src =\n        \"https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js\";\n      script.async = true;\n      script.onload = () => {\n        this.html2canvasReady = true;\n        this.startAutoCapture();\n      };\n      document.head.appendChild(script);\n    },\n\n    // LUMINANCE CAPTURE\n    async captureLuminance() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      if (!iframe?.contentDocument) return;\n\n      const iframeDoc = iframe.contentDocument;\n      const target = iframeDoc.body;\n\n      try {\n        const snapshotCanvas = await window.html2canvas(target);\n\n        const analysisCanvas = this.$refs.captureCanvas;\n        const ctx = analysisCanvas.getContext(\"2d\");\n        const w = analysisCanvas.width;\n        const h = analysisCanvas.height;\n\n        ctx.clearRect(0, 0, w, h);\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 100;\n        const x = (w - regionSize) / 2;\n        const y = (h - regionSize) / 2;\n\n        const pixelData = ctx.getImageData(x, y, regionSize, regionSize).data;\n        let sum = 0;\n        let count = 0;\n\n        for (let i = 0; i < pixelData.length; i += 4) {\n          const r = pixelData[i];\n          const g = pixelData[i + 1];\n          const b = pixelData[i + 2];\n          sum += (r + g + b) / 3;\n          count++;\n        }\n\n        this.currentLuminance = count > 0 ? sum / count : 0;\n      } catch (e) {\n        console.warn(\"Error capturing iframe:\", e);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped>\n.calibration-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n.target-overlay {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  opacity: 0.5;\n}\n.sampling-overlay {\n  position: absolute;\n  width: calc(100% / 3);\n  height: calc(100% / 3);\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid red;\n  pointer-events: none;\n  z-index: 10;\n}\n.font-mono {\n  font-family: 'Roboto Mono', monospace;\n}\n</style>\n",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -5834,31 +5653,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "78cf0ca00b9e1214"
-            ]
-        ]
-    },
-    {
-        "id": "78cf0ca00b9e1214",
-        "type": "switch",
-        "z": "3afb1d2b21be9114",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "943c62c18d43f2a6"
@@ -5882,7 +5676,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 620,
+        "x": 360,
         "y": 40,
         "wires": [
             [
@@ -6002,31 +5796,6 @@
         "name": "UI Event",
         "x": 80,
         "y": 40,
-        "wires": [
-            [
-                "2e99999b7cf152b7"
-            ]
-        ]
-    },
-    {
-        "id": "2e99999b7cf152b7",
-        "type": "switch",
-        "z": "d5b2c64b84f8ed4f",
-        "name": "msg.topic === \"$pageview\"",
-        "property": "topic",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "$pageview",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 280,
-        "y": 40,
         "wires": [
             [
                 "138136e6a1917e49"
@@ -6050,7 +5819,7 @@
         "checkall": "true",
         "repair": false,
         "outputs": 1,
-        "x": 610,
+        "x": 350,
         "y": 40,
         "wires": [
             []

From 2d9c33c26b2a48cd6f61dbfb7e2af7adf2093f39 Mon Sep 17 00:00:00 2001
From: Sonny Piers <sonny@fairscope.com>
Date: Tue, 2 Dec 2025 10:03:40 +0100
Subject: [PATCH 29/36] controller: Increase range for LED value on 2.6

---
 controller/light/LM36011.py | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/controller/light/LM36011.py b/controller/light/LM36011.py
index 3216e0eba..78da079dd 100644
--- a/controller/light/LM36011.py
+++ b/controller/light/LM36011.py
@@ -90,6 +90,15 @@ def set_torch_current(self, current):
         value = int(current * 0.34)
         self._write_byte(self.Register.torch, value)
 
+    # 0 - 127
+    # 0 is ~ 2.4 mA
+    # 128 is ~ 376 mA
+    def set_torch_value(self, value: int) -> None:
+        self._write_byte(self.Register.torch, int(value))
+
+    def get_torch_value(self) -> int:
+        return self._read_byte(self.Register.torch)
+
     def get_torch_current(self):
         return self._read_byte(self.Register.torch)
 
@@ -152,9 +161,9 @@ def deinit() -> None:
 
 
 def get_value() -> float:
-    return int(round(led.get_torch_current() / 20))
+    return led.get_torch_current() / 127
 
 
 def set_value(value: float) -> None:
-    led.set_torch_current(int(round(value * 20)))
+    led.set_torch_value(int(value * 127))
     return

From 699c45934fe88fc2fbf3dce6ea28245c7c7d8c83 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Mon, 8 Dec 2025 15:39:57 +0000
Subject: [PATCH 30/36] update

---
 node-red/projects/dashboard/flows.json | 267 ++++++++++++++++---------
 1 file changed, 170 insertions(+), 97 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index b437ada7a..8010ae6dc 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -867,7 +867,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 4,
+        "order": 3,
         "showTitle": true,
         "className": "",
         "visible": "true",
@@ -1379,7 +1379,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 2,
+        "order": 1,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1393,7 +1393,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 5,
+        "order": 4,
         "showTitle": false,
         "className": "",
         "visible": "true",
@@ -1471,7 +1471,7 @@
         "page": "7a4e042a60b734a6",
         "width": "12",
         "height": 1,
-        "order": 3,
+        "order": 2,
         "showTitle": true,
         "className": "",
         "visible": "true",
@@ -2160,7 +2160,9 @@
         "x": 370,
         "y": 140,
         "wires": [
-            []
+            [
+                "0470c8bd5e2507dc"
+            ]
         ]
     },
     {
@@ -2187,6 +2189,24 @@
             []
         ]
     },
+    {
+        "id": "0470c8bd5e2507dc",
+        "type": "function",
+        "z": "07f3b717f2a2c8c7",
+        "name": "set general settings",
+        "func": "if (msg.topic) {\n    global.set(\"countries\", msg.payload.countries);\n    global.set(\"timezone\", msg.payload.timezone);\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 590,
+        "y": 140,
+        "wires": [
+            []
+        ]
+    },
     {
         "id": "1cf1b20e425ec126",
         "type": "ui-template",
@@ -2504,7 +2524,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">Software Version</span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold\">\n      {{ msg.payload.software_version }}\n    </v-col>\n  </v-row>\n</template>\n",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">mdi-github</v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">Software Version</span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ msg.payload.software_version }}\n    </v-col>\n  </v-row>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2528,7 +2548,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-image-multiple-outline\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Images Acquired\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold\">\n      {{ msg.payload.image_acquired }}\n    </v-col>\n  </v-row>\n</template>\n",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-image-multiple-outline\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Images Acquired\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ msg.payload.image_acquired }}\n    </v-col>\n  </v-row>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2552,7 +2572,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-crop\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Objects Segmented\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold\">\n      {{ msg.payload.object_segmented }}\n    </v-col>\n  </v-row>\n</template>",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-crop\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Objects Segmented\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ msg.payload.object_segmented }}\n    </v-col>\n  </v-row>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2708,62 +2728,6 @@
             []
         ]
     },
-    {
-        "id": "e9eca3996df4f4a2",
-        "type": "ui-event",
-        "z": "1b667c6443413ced",
-        "ui": "e6ae26617c24c3ea",
-        "name": "UI Event",
-        "x": 920,
-        "y": 600,
-        "wires": [
-            [
-                "feda608d3423af51"
-            ]
-        ]
-    },
-    {
-        "id": "feda608d3423af51",
-        "type": "switch",
-        "z": "1b667c6443413ced",
-        "name": "msg.payload.page.path === \"/home\"",
-        "property": "payload.page.path",
-        "propertyType": "msg",
-        "rules": [
-            {
-                "t": "eq",
-                "v": "/home",
-                "vt": "str"
-            }
-        ],
-        "checkall": "true",
-        "repair": false,
-        "outputs": 1,
-        "x": 1170,
-        "y": 600,
-        "wires": [
-            [
-                "790b19154efc45c3"
-            ]
-        ]
-    },
-    {
-        "id": "790b19154efc45c3",
-        "type": "debug",
-        "z": "1b667c6443413ced",
-        "name": "debug 2",
-        "active": true,
-        "tosidebar": true,
-        "console": false,
-        "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
-        "statusVal": "",
-        "statusType": "auto",
-        "x": 1100,
-        "y": 700,
-        "wires": []
-    },
     {
         "id": "a57a165cd0ce511b",
         "type": "ui-template",
@@ -3147,7 +3111,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Project Metadata Inputs -->\n  <v-row class=\"mt-2\">\n    <!-- Project Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_project\" label=\"Name of the project\" placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Sample ID -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n      v-model.number=\"sample_id\"\n      type=\"number\"\n      label=\"Sample ID\"\n      prefix=\"S_\"\n      placeholder=\"ex : 001\"\n      variant=\"outlined\"\n      density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <!-- Operator Name -->\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field v-model=\"sample_operator\" label=\"Operator name\" placeholder=\"ex : Manu Prakash\" variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" @input=\"sendUpdate\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <!-- Sampling Gear Selector -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"sample_gear\" variant=\"outlined\"  color=\"primary\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"sendUpdate\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n\n    </v-col>\n  </v-row>\n  \n  <!-- NEW: Fraction Size Selector and Acquisition Settings -->\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Fraction Size / Acquisition Settings\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Fraction Size / Acquisition Settings',\n            'Select a fraction size range. This automatically sets the flowcell thickness and lens combination for acquisition.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle v-model=\"fraction_size_preset\" variant=\"outlined\" color=\"secondary\" mandatory divided shaped class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" @update:model-value=\"updateAcquisitionSettings\">\n\n          <v-btn :value=\"1\" stacked class=\"flex-grow-1\">\n            <span class=\"font-weight-bold\">10 to 100 μm</span>\n            <span class=\"text-caption\">Flowcell: 100 μm, Lenses: 25/4</span>\n          </v-btn>\n          <v-btn :value=\"2\" stacked class=\"flex-grow-1\">\n            <span class=\"font-weight-bold\">50 to 200 μm</span>\n            <span class=\"text-caption\">Flowcell: 300 μm, Lenses: 25/12</span>\n          </v-btn>\n          <v-btn :value=\"3\" stacked class=\"flex-grow-1\">\n            <span class=\"font-weight-bold\">100 to 500 μm</span>\n            <span class=\"text-caption\">Flowcell: 600 μm, Lenses: 25/16</span>\n          </v-btn>\n\n        </v-btn-toggle>\n      </div>\n    </v-col>\n    \n    <!-- The read-only preset display block has been removed -->\n\n  </v-row>\n\n  <!-- Hint Popup -->\n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      \n      // NEW ACQUISITION SETTINGS\n      fraction_size_preset: 1, // Default to preset 1\n      acq_flowcell_thickness: \"100 um\", // Initial default for preset 1\n      acq_lenses: \"25/4\", // Initial default for preset 1\n      \n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", // single topic\n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) {\n          // Supprime le préfixe éventuel avant d'afficher\n          this.sample_id = String(p.sample_id).replace(/^S[_-]?/, \"\");\n        }\n\n        if (p.sample_operator !== undefined)\n          this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        \n        // NEW: Handle incoming acquisition settings\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = p.acq_flowcell_thickness;\n        if (p.acq_lenses !== undefined)\n          this.acq_lenses = p.acq_lenses;\n          \n        // NEW: Deduce the preset based on the incoming values\n        this.deducePreset(p.acq_flowcell_thickness, p.acq_lenses);\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    /**\n     * Define the constant values for each fraction size preset.\n     */\n    acquisitionPresets() {\n      return {\n        1: { flowcell: \"100 um\", lenses: \"25/4\", range: \"10 to 100 μm\" },\n        2: { flowcell: \"300 um\", lenses: \"25/12\", range: \"50 to 200 μm\" },\n        3: { flowcell: \"600 um\", lenses: \"25/16\", range: \"100 to 500 μm\" },\n      };\n    },\n    \n    /**\n     * Determines which preset matches the incoming flowcell and lenses values.\n     * If no match (e.g., it was previously set to a custom value), it forces it back to preset 1.\n     */\n    deducePreset(flowcell, lenses) {\n      if (flowcell === undefined && lenses === undefined) return;\n      \n      const presets = this.acquisitionPresets();\n      let found = false;\n      for (const key in presets) {\n        if (presets[key].flowcell === flowcell && presets[key].lenses === lenses) {\n          this.fraction_size_preset = Number(key);\n          found = true;\n          break;\n        }\n      }\n      \n      // If no match found (meaning an invalid or old custom value was sent), revert to Preset 1\n      if (!found) {\n        this.fraction_size_preset = 1;\n        this.acq_flowcell_thickness = presets[1].flowcell;\n        this.acq_lenses = presets[1].lenses;\n        // The watch handler will re-run sendUpdate implicitly if the values change.\n      }\n    },\n    \n    /**\n     * Update flowcell and lenses based on selected preset value (1, 2, or 3).\n     */\n    updateAcquisitionSettings(presetValue) {\n      const preset = this.acquisitionPresets()[presetValue];\n      this.acq_flowcell_thickness = preset.flowcell;\n      this.acq_lenses = preset.lenses;\n      // Automatically send update when a preset is selected\n      this.sendUpdate();\n    },\n    \n    /**\n     * Send grouped payload for all fields under one topic.\n     */\n    sendUpdate(extra = {}) {\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          \n          // NEW ACQUISITION FIELDS\n          acq_flowcell_thickness: this.acq_flowcell_thickness || \"\",\n          acq_lenses: this.acq_lenses || \"\",\n          \n          ...extra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n  mounted() {\n    // Initial data send on mount\n    this.sendUpdate();\n  }\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .bg-blue-grey-lighten-5 {\n    background-color: #ECEFF1; /* Light gray background for readonly fields */\n  }\n</style>",
+        "format": "<template>\n  <v-row class=\"mt-2\">\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n        v-model=\"sample_project\" \n        label=\"Name of the project\" \n        placeholder=\"ex : Tara Pacifique\"\n        variant=\"outlined\" \n        hint=\"Enter the research project or expedition name this sample is part of.\"\n        @input=\"() => sendUpdate()\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Name of the project',\n              'Enter the research project or expedition name this sample is part of.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n        v-model.number=\"sample_id\"\n        type=\"number\"\n        label=\"Sample ID\"\n        prefix=\"S_\"\n        placeholder=\"ex : 001\"\n        variant=\"outlined\"\n        density=\"compact\"\n        hint=\"Provide a unique identifier for this sample (e.g., S001).\" \n        @input=\"() => sendUpdate()\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Sample ID',\n              'Provide a unique identifier for this sample (e.g., S001).'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-text-field \n        v-model=\"sample_operator\" \n        label=\"Operator name\" \n        placeholder=\"ex : Manu Prakash\" \n        variant=\"outlined\"\n        hint=\"Name of the person who collected the sample.\" \n        @input=\"() => sendUpdate()\">\n        <template #append>\n          <v-icon class=\"cursor-pointer\" @click=\"openHint(\n              'Operator name',\n              'Name of the person who collected the sample.'\n            )\">\n            mdi-information\n          </v-icon>\n        </template>\n      </v-text-field>\n    </v-col>\n  </v-row>\n\n  <v-row class=\"mt-4\">\n    <v-col cols=\"12\">\n      <div class=\"d-flex align-center mb-2\">\n        <label class=\"text-subtitle-2 font-weight-medium me-2\">\n          Sampling Gear\n        </label>\n        <v-icon class=\"cursor-pointer\" color=\"#666666\" @click=\"openHint(\n            'Sampling Gear',\n            'The type of gear used to collect the sample. This field describes the specific equipment used during the sampling process and provides context about the sampling method and conditions.'\n          )\">\n          mdi-information\n        </v-icon>\n      </div>\n\n      <div style=\"overflow-x: auto;\">\n        <v-btn-toggle \n          v-model=\"sample_gear\" \n          variant=\"outlined\" \n          color=\"primary\" \n          mandatory \n          divided \n          shaped \n          class=\"d-flex\"\n          style=\"min-width: max-content; min-height: 100px\" \n          @update:model-value=\"() => sendUpdate()\">\n          <v-btn value=\"Horizontal Net\" prepend-icon=\"mdi-arrow-right-bold\" stacked>\n            Horizontal Net\n          </v-btn>\n          <v-btn value=\"Vertical Net\" prepend-icon=\"mdi-arrow-up-bold\" stacked>\n            Vertical Net\n          </v-btn>\n          <v-btn value=\"Niskin bottle\" prepend-icon=\"mdi-bottle-tonic\" stacked>\n            Niskin bottle\n          </v-btn>\n          <v-btn value=\"Lab culture\" prepend-icon=\"mdi-flask-outline\" stacked>\n            Lab culture\n          </v-btn>\n          <v-btn value=\"Demo / Test\" prepend-icon=\"mdi-beaker-outline\" stacked>\n            Demo / Test\n          </v-btn>\n        </v-btn-toggle>\n      </div>\n    </v-col>\n  </v-row>\n  \n  <v-dialog v-model=\"hintDialog\" max-width=\"400\">\n    <v-card>\n      <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n      <v-card-text>{{ hintText }}</v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn text color=\"primary\" @click=\"hintDialog = false\">Close</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      \n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", \n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // CHECK IF VALUE CHANGED before assigning to avoid overwriting user input loop\n        if (p.sample_project !== undefined && p.sample_project !== this.sample_project) {\n           this.sample_project = p.sample_project;\n        }\n        \n        if (p.sample_id !== undefined) {\n          const cleanId = String(p.sample_id).replace(/^S[_-]?/, \"\");\n          // Only update if different (converting both to string to be safe)\n          if (String(this.sample_id) !== cleanId) {\n             this.sample_id = cleanId;\n          }\n        }\n\n        if (p.sample_operator !== undefined && p.sample_operator !== this.sample_operator) {\n           this.sample_operator = p.sample_operator;\n        }\n\n        if (p.sample_gear !== undefined && p.sample_gear !== this.sample_gear) {\n           this.sample_gear = p.sample_gear;\n        }\n      },\n      deep: true,\n    },\n  },\n  methods: {\n    sendUpdate(extra) {\n      const safeExtra = (extra && typeof extra === 'object') ? extra : {};\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: this.sample_id ? `S_${this.sample_id}` : \"\",\n          sample_operator: this.sample_operator || \"\",\n          sample_gear: this.sample_gear || \"\",\n          ...safeExtra,\n        },\n      });\n    },\n\n    openHint(title, text) {\n      this.hintTitle = title;\n      this.hintText = text;\n      this.hintDialog = true;\n    },\n  },\n  mounted() {\n    // CRITICAL FIX: Do NOT sendUpdate on mount. \n    // This prevents overwriting the database with empty strings on page load.\n  }\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3157,7 +3121,8 @@
         "y": 140,
         "wires": [
             [
-                "13f96cf49ae6d6a6"
+                "13f96cf49ae6d6a6",
+                "1185f4705f9643a3"
             ]
         ]
     },
@@ -3199,7 +3164,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Le conteneur principal devient désactivé si sample_gear n'est pas \"Horizontal Net\" -->\n  <v-container\n    :disabled=\"isDisabled\"\n    :style=\"{\n      pointerEvents: isDisabled ? 'none' : 'auto',\n      opacity: isDisabled ? 0.5 : 1,\n    }\"\n  >\n    <!-- Date & Time (End) -->\n    <v-row>\n      <v-col cols=\"12\"><strong>End Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_date_end\"\n          label=\"Date (UTC)\"\n          variant=\"outlined\"\n          type=\"date\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field\n          v-model=\"object_time_end\"\n          label=\"Time (UTC)\"\n          variant=\"outlined\"\n          type=\"time\"\n          hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\"\n          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LATITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"90\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"latitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"latDir_end\"\n          :items=\"['N','S']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Latitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lat_end\"\n          label=\"Latitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-90\"\n          max=\"90\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lat')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- LONGITUDE END SECTION -->\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_D_end\"\n          label=\"°\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"180\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_M_end\"\n          label=\"′\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field\n          v-model=\"longitude_S_end\"\n          label=\"″\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"0\"\n          max=\"59\"\n          step=\"0.001\"\n          @input=\"syncDecimalEnd\"\n        />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select\n          v-model=\"lonDir_end\"\n          :items=\"['E','W']\"\n          label=\"Dir\"\n          variant=\"outlined\"\n          hide-details\n          @update:model-value=\"syncDecimalEnd\"\n        />\n      </v-col>\n\n      <!-- Longitude Decimal -->\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field\n          v-model.number=\"object_lon_end\"\n          label=\"Longitude (decimal)\"\n          variant=\"outlined\"\n          hide-details\n          type=\"number\"\n          min=\"-180\"\n          max=\"180\"\n          step=\"0.000001\"\n          @input=\"updateFromDecimalEnd('lon')\"\n        >\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <!-- Canvas Map (End) -->\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas\n          id=\"mapCanvas_end\"\n          width=\"800\"\n          height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheelEnd\"\n        ></canvas>\n\n        <!-- Zoom controls -->\n        <div\n          style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\"\n        >\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOutEnd\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <!-- MID-INFO POPUP -->\n    <v-dialog v-model=\"hintDialogEnd\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitleEnd }}</v-card-title>\n        <v-card-text>{{ hintTextEnd }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialogEnd = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n      latitude_D_end: \"0\",\n      latitude_M_end: \"0\",\n      latitude_S_end: \"0\",\n      latDir_end: \"N\",\n      longitude_D_end: \"0\",\n      longitude_M_end: \"0\",\n      longitude_S_end: \"0\",\n      lonDir_end: \"E\",\n      ctx_end: null,\n      mapImage_end: null,\n      imageLoaded_end: false,\n      zoom_end: 1,\n      offsetX_end: 0,\n      offsetY_end: 0,\n      sample_gear: \"\", // <-- ajouté ici\n      // Popup fields\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Désactive tout le formulaire si sample_gear n’est pas \"Horizontal Net\"\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear; // <-- surveille la valeur reçue\n        if (p.object_date_end !== undefined) this.object_date_end = p.object_date_end;\n        if (p.object_time_end !== undefined) {\n          // Conversion \"HHMM\" → \"HH:MM\" pour affichage dans le champ <input type=\"time\">\n          const t = p.object_time_end.toString();\n          if (t.length === 4) this.object_time_end = `${t.slice(0, 2)}:${t.slice(2, 4)}`;\n          else this.object_time_end = t; // si déjà au format HH:MM\n        }\n\n        if (p.object_lat_end !== undefined)\n          this.object_lat_end = parseFloat(p.object_lat_end.toFixed(6));\n        if (p.object_lon_end !== undefined)\n          this.object_lon_end = parseFloat(p.object_lon_end.toFixed(6));\n        if (p.object_lat_end !== undefined || p.object_lon_end !== undefined) {\n          this.updateFromDecimalEnd(\"lat\");\n          this.updateFromDecimalEnd(\"lon\");\n        }\n        this.centerOnMarkerEnd();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas_end\");\n    this.ctx_end = canvas.getContext(\"2d\");\n    this.mapImage_end = new Image();\n    this.mapImage_end.src = \"/world-map.svg\";\n    this.mapImage_end.onload = () => {\n      this.imageLoaded_end = true;\n      this.centerOnMarkerEnd();\n    };\n  },\n  methods: {\n    /** Info Popup **/\n    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd =\n          \"Enter the end time of your observation in Coordinated Universal Time (UTC). \" +\n          \"Use YYYY-MM-DD for date and HH:MM (24-hour) for time.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd =\n          \"Latitude specifies how far north or south your end location is from the equator. \" +\n          \"Use degrees (°), minutes (′), and seconds (″) with N/S direction, or directly enter a decimal between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd =\n          \"Longitude specifies how far east or west your end location is from the Prime Meridian. \" +\n          \"You can enter DMS (° ′ ″) with E/W direction or a decimal between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n\n    sendUpdateEnd(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\" avant sauvegarde\n      const formattedTimeEnd = this.object_time_end\n        ? this.object_time_end.replace(\":\", \"\")\n        : \"\";      \n      this.send({\n        topic,\n        payload: {\n          object_date_end: this.object_date_end,\n          object_time_end: formattedTimeEnd,\n          ...extra,\n        },\n      });\n    },\n    syncDecimalEnd() {\n      this.object_lon_end = parseFloat(\n        this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6)\n      );\n      this.object_lat_end = parseFloat(\n        this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6)\n      );\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    updateFromDecimalEnd(which) {\n      if (which === \"lon\") {\n        this.object_lon_end = parseFloat(this.object_lon_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon_end, \"lon\");\n        this.longitude_D_end = D;\n        this.longitude_M_end = M;\n        this.longitude_S_end = S;\n        this.lonDir_end = dir;\n      } else {\n        this.object_lat_end = parseFloat(this.object_lat_end.toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat_end, \"lat\");\n        this.latitude_D_end = D;\n        this.latitude_M_end = M;\n        this.latitude_S_end = S;\n        this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) {\n      if (e.deltaY < 0) this.zoomInEnd();\n      else this.zoomOutEnd();\n    },\n    zoomInEnd() {\n      this.zoom_end = Math.min(this.zoom_end * 1.25, 10);\n      this.centerOnMarkerEnd();\n    },\n    zoomOutEnd() {\n      this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5);\n      this.centerOnMarkerEnd();\n    },\n    centerOnMarkerEnd() {\n      const w = 800;\n      const h = 500;\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX_end = w / 2 - x;\n      this.offsetY_end = h / 2 - y;\n      this.drawPointEnd();\n    },\n    drawMapEnd(w, h) {\n      const ctx = this.ctx_end;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end;\n      const lon = this.object_lon_end;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>\n\n<style scoped>\n@media (max-width: 1024px) {\n  .v-text-field input,\n  .v-select input {\n    font-size: 1.2rem !important;\n  }\n}\n</style>\n",
+        "format": "<template>\n  <v-container :disabled=\"isDisabled\" :style=\"{\n      pointerEvents: isDisabled ? 'none' : 'auto',\n      opacity: isDisabled ? 0.5 : 1,\n    }\">\n    <v-row>\n      <v-col cols=\"12\"><strong>End Date and Time</strong></v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field v-model=\"object_date_end\" label=\"Date (UTC)\" variant=\"outlined\" type=\"date\" hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\" />\n      </v-col>\n\n      <v-col cols=\"12\" md=\"6\">\n        <v-text-field v-model=\"object_time_end\" label=\"Time (UTC)\" variant=\"outlined\" type=\"time\" hide-details=\"auto\"\n          :density=\"isTablet ? 'comfortable' : 'default'\" :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\"\n          @input=\"sendUpdateEnd('object_datetime_end')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('datetime')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\"><strong>Latitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"latitude_D_end\" label=\"°\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"90\"\n          @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"latitude_M_end\" label=\"′\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"latitude_S_end\" label=\"″\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          step=\"0.001\" @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select v-model=\"latDir_end\" :items=\"['N','S']\" label=\"Dir\" variant=\"outlined\" hide-details\n          @update:model-value=\"syncDecimalEnd\" />\n      </v-col>\n\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field v-model.number=\"object_lat_end\" label=\"Latitude (decimal)\" variant=\"outlined\" hide-details\n          type=\"number\" min=\"-90\" max=\"90\" step=\"0.000001\" @input=\"updateFromDecimalEnd('lat')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('latitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row>\n      <v-col cols=\"12\"><strong>Longitude (End)</strong></v-col>\n    </v-row>\n    <v-row class=\"mt-4\" align=\"start\">\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"longitude_D_end\" label=\"°\" variant=\"outlined\" hide-details type=\"number\" min=\"0\"\n          max=\"180\" @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"longitude_M_end\" label=\"′\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-text-field v-model=\"longitude_S_end\" label=\"″\" variant=\"outlined\" hide-details type=\"number\" min=\"0\" max=\"59\"\n          step=\"0.001\" @input=\"syncDecimalEnd\" />\n      </v-col>\n      <v-col :cols=\"isTablet ? 3 : 2\">\n        <v-select v-model=\"lonDir_end\" :items=\"['E','W']\" label=\"Dir\" variant=\"outlined\" hide-details\n          @update:model-value=\"syncDecimalEnd\" />\n      </v-col>\n\n      <v-col cols=\"12\" lg=\"4\">\n        <v-text-field v-model.number=\"object_lon_end\" label=\"Longitude (decimal)\" variant=\"outlined\" hide-details\n          type=\"number\" min=\"-180\" max=\"180\" step=\"0.000001\" @input=\"updateFromDecimalEnd('lon')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHintEnd('longitude')\">\n              mdi-information\n            </v-icon>\n          </template>\n        </v-text-field>\n      </v-col>\n    </v-row>\n\n    <v-row class=\"mt-6\" style=\"position: relative;\">\n      <v-col cols=\"12\" class=\"text-center\" style=\"position: relative;\">\n        <canvas id=\"mapCanvas_end\" width=\"800\" height=\"500\"\n          style=\"width:100%;max-width:1200px;border:1px solid #999;border-radius:8px;background:#c5ecff;cursor:grab;\"\n          @wheel.prevent=\"onWheelEnd\"></canvas>\n\n        <div style=\"position:absolute;bottom:25px;right:18px;display:flex;flex-direction:column;gap:6px;\">\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon :size=\"isTablet ? 'large' : 'default'\" @click=\"zoomOutEnd\"><span>−</span></v-btn>\n        </div>\n      </v-col>\n    </v-row>\n\n    <v-dialog v-model=\"hintDialogEnd\" max-width=\"500\">\n      <v-card>\n        <v-card-title class=\"text-h6\">{{ hintTitleEnd }}</v-card-title>\n        <v-card-text>{{ hintTextEnd }}</v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" text @click=\"hintDialogEnd = false\">Got it</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      // START Variables (nécessaires pour la copie)\n      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n\n      // END Variables\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n\n      // DMS Fields\n      latitude_D_end: \"0\",\n      latitude_M_end: \"0\",\n      latitude_S_end: \"0\",\n      latDir_end: \"N\",\n      longitude_D_end: \"0\",\n      longitude_M_end: \"0\",\n      longitude_S_end: \"0\",\n      lonDir_end: \"E\",\n\n      // Map & Canvas\n      ctx_end: null,\n      mapImage_end: null,\n      imageLoaded_end: false,\n      zoom_end: 1,\n      offsetX_end: 0,\n      offsetY_end: 0,\n\n      // Logic Control\n      sample_gear: \"\",\n\n      // Popup fields\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // 1. Récupération des données START (si présentes)\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\n          // Formatage HHMM -> HH:MM pour stockage interne\n          let t = p.object_time.toString();\n          if (t.length === 4) t = `${t.slice(0, 2)}:${t.slice(2, 4)}`;\n          this.object_time = t;\n        }\n        if (p.object_lat !== undefined) this.object_lat = parseFloat(p.object_lat);\n        if (p.object_lon !== undefined) this.object_lon = parseFloat(p.object_lon);\n\n        // 2. Mise à jour du type d'équipement\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n\n        // 3. Récupération des données END (si le message force déjà des valeurs End)\n        // Note: Cela sera écrasé par la logique ci-dessous si Horizontal Net, ou vidé sinon.\n        // Si vous voulez que la logique prime, on laisse les valeurs msg s'appliquer uniquement si nécessaire.\n        // Pour l'instant, appliquons la logique demandée strictement.\n\n        // --- LOGIQUE DEMANDÉE ---\n        if (this.sample_gear === \"Horizontal Net\") {\n          // Remplissage avec Starting Point\n          this.object_date_end = this.object_date;\n          this.object_time_end = this.object_time;\n          this.object_lat_end = this.object_lat;\n          this.object_lon_end = this.object_lon;\n        } else {\n          // Vidage des champs\n          this.object_date_end = \"\";\n          this.object_time_end = \"\";\n          this.object_lat_end = 0;\n          this.object_lon_end = 0;\n        }\n        // ------------------------\n\n        // 4. Conversion Decimal -> DMS pour affichage (peuple latDir_end, etc.)\n        this.updateFromDecimalEnd(\"lat\");\n        this.updateFromDecimalEnd(\"lon\");\n\n        // 5. Centrage carte\n        this.centerOnMarkerEnd();\n      },\n      deep: true,\n    },\n  },\n  mounted() {\n    const canvas = document.getElementById(\"mapCanvas_end\");\n    this.ctx_end = canvas.getContext(\"2d\");\n    this.mapImage_end = new Image();\n    this.mapImage_end.src = \"/world-map.svg\";\n    this.mapImage_end.onload = () => {\n      this.imageLoaded_end = true;\n      this.centerOnMarkerEnd();\n    };\n  },\n  methods: {\n    /** Info Popup **/\n    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd =\n          \"Enter the end time of your observation in Coordinated Universal Time (UTC). \" +\n          \"Use YYYY-MM-DD for date and HH:MM (24-hour) for time.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd =\n          \"Latitude specifies how far north or south your end location is from the equator. \" +\n          \"Use degrees (°), minutes (′), and seconds (″) with N/S direction, or directly enter a decimal between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd =\n          \"Longitude specifies how far east or west your end location is from the Prime Meridian. \" +\n          \"You can enter DMS (° ′ ″) with E/W direction or a decimal between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n\n    sendUpdateEnd(topic, extra = {}) {\n      // Conversion \"HH:MM\" → \"HHMM\" avant sauvegarde\n      const formattedTimeEnd = this.object_time_end\n        ? this.object_time_end.replace(\":\", \"\")\n        : \"\";      \n      this.send({\n        topic,\n        payload: {\n          object_date_end: this.object_date_end,\n          object_time_end: formattedTimeEnd,\n          ...extra,\n        },\n      });\n    },\n    syncDecimalEnd() {\n      this.object_lon_end = parseFloat(\n        this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6)\n      );\n      this.object_lat_end = parseFloat(\n        this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6)\n      );\n      this.centerOnMarkerEnd();\n      this.sendUpdateEnd(\"object_latlon_end\", {\n        object_lat_end: this.object_lat_end,\n        object_lon_end: this.object_lon_end,\n      });\n    },\n    updateFromDecimalEnd(which) {\n      if (which === \"lon\") {\n        this.object_lon_end = parseFloat((this.object_lon_end || 0).toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lon_end, \"lon\");\n        this.longitude_D_end = D;\n        this.longitude_M_end = M;\n        this.longitude_S_end = S;\n        this.lonDir_end = dir;\n      } else {\n        this.object_lat_end = parseFloat((this.object_lat_end || 0).toFixed(6));\n        const { D, M, S, dir } = this.fromDecimal(this.object_lat_end, \"lat\");\n        this.latitude_D_end = D;\n        this.latitude_M_end = M;\n        this.latitude_S_end = S;\n        this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n      // On n'envoie pas de mise à jour ici pour éviter des boucles infinies si c'est déclenché par le watcher\n    },\n    toDecimal(D, M, S, dir) {\n      const d = parseFloat(D) || 0;\n      const m = parseFloat(M) || 0;\n      const s = parseFloat(S) || 0;\n      let val = d + m / 60 + s / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\n      const dirPositive = type === \"lat\" ? \"N\" : \"E\";\n      const dirNegative = type === \"lat\" ? \"S\" : \"W\";\n      const absVal = Math.abs(dec);\n      const D = Math.floor(absVal);\n      const M = Math.floor((absVal - D) * 60);\n      const S = ((absVal - D - M / 60) * 3600).toFixed(3);\n      const dir = dec >= 0 ? dirPositive : dirNegative;\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) {\n      if (e.deltaY < 0) this.zoomInEnd();\n      else this.zoomOutEnd();\n    },\n    zoomInEnd() {\n      this.zoom_end = Math.min(this.zoom_end * 1.25, 10);\n      this.centerOnMarkerEnd();\n    },\n    zoomOutEnd() {\n      this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5);\n      this.centerOnMarkerEnd();\n    },\n    centerOnMarkerEnd() {\n      const w = 800;\n      const h = 500;\n      // Protection contre NaN si lat/lon sont vides\n      const lat = this.object_lat_end || 0;\n      const lon = this.object_lon_end || 0;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      this.offsetX_end = w / 2 - x;\n      this.offsetY_end = h / 2 - y;\n      this.drawPointEnd();\n    },\n    drawMapEnd(w, h) {\n      const ctx = this.ctx_end;\n      ctx.clearRect(0, 0, w, h);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      else {\n        ctx.fillStyle = \"#000\";\n        ctx.fillRect(0, 0, w, h);\n      }\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800;\n      const h = 500;\n      const ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end || 0;\n      const lon = this.object_lon_end || 0;\n      const x = w / 2 + (lon / 180) * (w / 2);\n      const y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(\n        this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end),\n        this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end)\n      );\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\";\n      ctx.beginPath();\n      ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI);\n      ctx.fill();\n      ctx.fillStyle = \"black\";\n      ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}°, ${lon.toFixed(4)}°`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>\n\n<style scoped>\n  @media (max-width: 1024px) {\n\n    .v-text-field input,\n    .v-select input {\n      font-size: 1.2rem !important;\n    }\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -3309,7 +3274,8 @@
                 "96550b272e3da513",
                 "1c90e219a749e53e",
                 "09b551fa202d8029",
-                "93a68ffbce74d70d"
+                "93a68ffbce74d70d",
+                "c04c3055a84e7597"
             ]
         ]
     },
@@ -3397,7 +3363,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 760,
+        "x": 960,
         "y": 240,
         "wires": [
             []
@@ -3415,7 +3381,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 770,
+        "x": 970,
         "y": 200,
         "wires": [
             []
@@ -3466,7 +3432,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 780,
+        "x": 980,
         "y": 340,
         "wires": [
             []
@@ -3477,14 +3443,14 @@
         "type": "function",
         "z": "190b0c9aa75e8843",
         "name": "set object_datetime_end",
-        "func": "if (msg.topic) {\n    global.set(\"object_date_end\", msg.payload.object_date_end);\n    global.set(\"object_time_end\", msg.payload.object_time_end);\n}\nreturn msg;\n",
+        "func": "if (msg.topic) {\n    global.set(\"object_date_end\", msg.payload.object_date_end);\n    global.set(\"object_time_end\", msg.payload.object_time_end);\n}\n\nif (msg.payload.sample_gear !== \"Horizontal Net\") {\n    global.set(\"object_date_end\", undefined);\n    global.set(\"object_time_end\", undefined);\n}\n\nreturn msg;\n",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 990,
         "y": 300,
         "wires": [
             []
@@ -3527,7 +3493,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 990,
         "y": 400,
         "wires": [
             []
@@ -3570,7 +3536,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 800,
+        "x": 1000,
         "y": 460,
         "wires": [
             []
@@ -3617,12 +3583,102 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 790,
+        "x": 990,
         "y": 140,
         "wires": [
             []
         ]
     },
+    {
+        "id": "f495c897b992cb33",
+        "type": "debug",
+        "z": "190b0c9aa75e8843",
+        "name": "debug 3",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 900,
+        "y": 760,
+        "wires": []
+    },
+    {
+        "id": "c04c3055a84e7597",
+        "type": "debug",
+        "z": "190b0c9aa75e8843",
+        "name": "debug 4",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "payload",
+        "targetType": "msg",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 140,
+        "y": 280,
+        "wires": []
+    },
+    {
+        "id": "1185f4705f9643a3",
+        "type": "switch",
+        "z": "190b0c9aa75e8843",
+        "name": "",
+        "property": "payload.sample_gear",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "Horizontal Net",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Vertical Net",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Niskin bottle",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Lab culture",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "Demo / Test",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 5,
+        "x": 510,
+        "y": 640,
+        "wires": [
+            [],
+            [
+                "42d27ae01c6fd201",
+                "f495c897b992cb33"
+            ],
+            [
+                "42d27ae01c6fd201"
+            ],
+            [
+                "42d27ae01c6fd201"
+            ],
+            [
+                "42d27ae01c6fd201"
+            ]
+        ]
+    },
     {
         "id": "ffe728d961068c62",
         "type": "ui-template",
@@ -3659,7 +3715,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels class=\"my-4\" variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n\n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels class=\"my-4\" variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        \n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n        \n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n        \n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4274,7 +4330,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimum ESD (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"Set minimum Equivalent Spherical Diameter in microns\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\nexport default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 20,\n      // 1. Add a flag to track if page is fully loaded\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    // 2. Wait 1 second after the component loads before accepting \"Open\" commands.\n    // This effectively ignores the \"History\" message sent by Node-RED on refresh.\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        // 3. If the page is still loading (first 1 sec), IGNORE the message\n        if (!this.isReady) return;\n\n        // Safety check\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        // 4. Check conditions\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 0;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
+        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"Minimal area-equivalent diameter (µm)\"\n          type=\"number\"\n          min=\"0\"\n          step=\"1\"\n          hint=\"The Area-Equivalent Diameter is the calculated diameter of a circle that has the exact same area as the particle's silhouette area. This field sets the minimum size threshold (in μm) for particles to be included in the analysis.\"\n          persistent-hint\n        ></v-text-field>\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn color=\"grey\" variant=\"tonal\" @click=\"showDialog = false\">\n          Cancel\n        </v-btn>\n        <v-btn color=\"primary\" variant=\"flat\" @click=\"sendSegment\">\n          Segment\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\nexport default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 20,\n      // 1. Add a flag to track if page is fully loaded\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    // 2. Wait 1 second after the component loads before accepting \"Open\" commands.\n    // This effectively ignores the \"History\" message sent by Node-RED on refresh.\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        // 3. If the page is still loading (first 1 sec), IGNORE the message\n        if (!this.isReady) return;\n\n        // Safety check\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        // 4. Check conditions\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 0;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      const outMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n          action: \"segment\",\n          path: [this.payload.path],\n          settings: {\n            force: false,\n            recursive: true,\n            ecotaxa: true,\n            keep: true,\n            process_id: 1,\n            process_min_ESD: this.process_min_ESD,\n          },\n          dataset: {\n            project_name: this.payload.project_name,\n            sample_id: this.payload.sample_id,\n            acquisition_id: this.payload.acquisition_id,\n            operator_name: this.payload.operator_name,\n            image_acquired_count: this.payload.image_acquired_count,\n            path: this.payload.path,\n          },\n        },\n      };\n\n      this.send(outMsg);\n      this.showDialog = false;\n    },\n  },\n};\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4350,7 +4406,8 @@
         "wires": [
             [
                 "384aa9ab83bfe566",
-                "164baa371893de7a"
+                "164baa371893de7a",
+                "543715b9199cdb72"
             ]
         ]
     },
@@ -4412,7 +4469,7 @@
         "wires": [
             [
                 "18a10804663dbaa1",
-                "bdeb6f634e7ecffd"
+                "72c774fc51af957b"
             ]
         ]
     },
@@ -4428,7 +4485,7 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 380,
+        "x": 440,
         "y": 180,
         "wires": [
             [
@@ -4506,7 +4563,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 820,
+        "x": 920,
         "y": 1000,
         "wires": [
             []
@@ -4556,7 +4613,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 810,
+        "x": 910,
         "y": 440,
         "wires": [
             []
@@ -4760,7 +4817,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 820,
+        "x": 920,
         "y": 520,
         "wires": [
             []
@@ -4804,7 +4861,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 840,
+        "x": 940,
         "y": 560,
         "wires": [
             []
@@ -4828,7 +4885,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 820,
+        "x": 920,
         "y": 600,
         "wires": [
             []
@@ -4852,7 +4909,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 890,
+        "x": 990,
         "y": 640,
         "wires": [
             []
@@ -4876,7 +4933,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 870,
+        "x": 970,
         "y": 680,
         "wires": [
             []
@@ -4900,7 +4957,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 830,
+        "x": 930,
         "y": 720,
         "wires": [
             []
@@ -4924,7 +4981,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 890,
+        "x": 990,
         "y": 760,
         "wires": [
             []
@@ -4948,7 +5005,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 860,
+        "x": 960,
         "y": 800,
         "wires": [
             []
@@ -4972,7 +5029,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 850,
+        "x": 950,
         "y": 840,
         "wires": [
             []
@@ -5016,7 +5073,7 @@
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 820,
+        "x": 920,
         "y": 920,
         "wires": [
             []
@@ -5148,7 +5205,23 @@
         ]
     },
     {
-        "id": "bdeb6f634e7ecffd",
+        "id": "543715b9199cdb72",
+        "type": "debug",
+        "z": "14f8c9b5ce1235cc",
+        "name": "debug 5",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 700,
+        "y": 40,
+        "wires": []
+    },
+    {
+        "id": "72c774fc51af957b",
         "type": "debug",
         "z": "14f8c9b5ce1235cc",
         "name": "debug 1",
@@ -5156,11 +5229,11 @@
         "tosidebar": true,
         "console": false,
         "tostatus": false,
-        "complete": "true",
-        "targetType": "full",
+        "complete": "payload",
+        "targetType": "msg",
         "statusVal": "",
         "statusType": "auto",
-        "x": 360,
+        "x": 400,
         "y": 140,
         "wires": []
     },

From a6bb031f6d0ba30df105e2e04848d31e7a97379f Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Mon, 8 Dec 2025 15:48:30 +0000
Subject: [PATCH 31/36] update

---
 node-red/projects/dashboard/flows.json | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 8010ae6dc..96b803d74 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2548,7 +2548,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-image-multiple-outline\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Images Acquired\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ msg.payload.image_acquired }}\n    </v-col>\n  </v-row>\n</template>",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-image-multiple-outline\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Images Acquired\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ Number(msg.payload.image_acquired).toLocaleString('fr-FR') }}\n    </v-col>\n  </v-row>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -2572,7 +2572,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-crop\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Objects Segmented\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ msg.payload.object_segmented }}\n    </v-col>\n  </v-row>\n</template>",
+        "format": "<template>\n  <v-row class=\"align-center pa-4\">\n    <v-col cols=\"auto\" class=\"d-flex align-center\">\n      <v-icon size=\"32\" color=\"primary\" class=\"mr-4\">\n        mdi-crop\n      </v-icon>\n      <span class=\"text-subtitle-2 font-weight-medium\">\n        Objects Segmented\n      </span>\n    </v-col>\n\n    <v-col class=\"text-subtitle-2 font-weight-bold text-right\">\n      {{ Number(msg.payload.object_segmented).toLocaleString('fr-FR') }}\n    </v-col>\n  </v-row>\n</template>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
@@ -4380,7 +4380,8 @@
         "y": 40,
         "wires": [
             [
-                "90c920ecdab16908"
+                "90c920ecdab16908",
+                "384aa9ab83bfe566"
             ]
         ]
     },
@@ -4405,7 +4406,6 @@
         "y": 40,
         "wires": [
             [
-                "384aa9ab83bfe566",
                 "164baa371893de7a",
                 "543715b9199cdb72"
             ]
@@ -4540,7 +4540,6 @@
         "y": 180,
         "wires": [
             [
-                "384aa9ab83bfe566",
                 "9a10d9afb1a0b1ca"
             ]
         ]

From ea9d6c4e0a5764a4acc1c56428b5228b8b956c97 Mon Sep 17 00:00:00 2001
From: Thibaut Pollina <thibaut@fairscope.com>
Date: Tue, 9 Dec 2025 08:31:25 +0000
Subject: [PATCH 32/36] f

---
 controller/light/LM36011.py | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/controller/light/LM36011.py b/controller/light/LM36011.py
index 78da079dd..3216e0eba 100644
--- a/controller/light/LM36011.py
+++ b/controller/light/LM36011.py
@@ -90,15 +90,6 @@ def set_torch_current(self, current):
         value = int(current * 0.34)
         self._write_byte(self.Register.torch, value)
 
-    # 0 - 127
-    # 0 is ~ 2.4 mA
-    # 128 is ~ 376 mA
-    def set_torch_value(self, value: int) -> None:
-        self._write_byte(self.Register.torch, int(value))
-
-    def get_torch_value(self) -> int:
-        return self._read_byte(self.Register.torch)
-
     def get_torch_current(self):
         return self._read_byte(self.Register.torch)
 
@@ -161,9 +152,9 @@ def deinit() -> None:
 
 
 def get_value() -> float:
-    return led.get_torch_current() / 127
+    return int(round(led.get_torch_current() / 20))
 
 
 def set_value(value: float) -> None:
-    led.set_torch_value(int(value * 127))
+    led.set_torch_current(int(round(value * 20)))
     return

From c13ecedebd2d91095244818de851cd361fd768b3 Mon Sep 17 00:00:00 2001
From: Thibaut Polina <thibaut@fairscope.com>
Date: Mon, 2 Feb 2026 15:55:10 +0000
Subject: [PATCH 33/36] save

---
 node-red/projects/dashboard/flows.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 96b803d74..0d998c8da 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -3715,7 +3715,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels class=\"my-4\" variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        \n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n        \n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n        \n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        \n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n        \n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n        \n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From e4c28dbd10ff6a863c5a3a41451e95cdba040314 Mon Sep 17 00:00:00 2001
From: Sonny Piers <sonny@fairscope.com>
Date: Mon, 2 Feb 2026 16:48:50 +0000
Subject: [PATCH 34/36] update

---
 node-red/projects/dashboard/flows.json | 122 ++++++++++++++++++-------
 1 file changed, 87 insertions(+), 35 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index 0d998c8da..fc4feefab 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -533,7 +533,7 @@
     {
         "id": "e6ae26617c24c3ea",
         "type": "ui-base",
-        "name": "PlanktoScope",
+        "name": "PlanktoScope Dashboard",
         "path": "/dashboard",
         "appIcon": "",
         "includeClientData": true,
@@ -563,6 +563,7 @@
         "protocolVersion": 4,
         "keepalive": "60",
         "cleansession": true,
+        "autoUnsubscribe": true,
         "birthTopic": "",
         "birthQos": "0",
         "birthPayload": "",
@@ -1297,7 +1298,7 @@
                 "cols": "12"
             }
         ],
-        "order": 2,
+        "order": 1,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -1523,7 +1524,7 @@
                 "cols": "12"
             }
         ],
-        "order": 1,
+        "order": 2,
         "className": "",
         "visible": "true",
         "disabled": "false"
@@ -2084,13 +2085,13 @@
         "id": "7e7d02f3ea356eff",
         "type": "switch",
         "z": "07f3b717f2a2c8c7",
-        "name": "msg.payload.page.path === \"/home\"",
+        "name": "msg.payload.page.path === \"/setup\"",
         "property": "payload.page.path",
         "propertyType": "msg",
         "rules": [
             {
                 "t": "eq",
-                "v": "/home",
+                "v": "/setup",
                 "vt": "str"
             }
         ],
@@ -2101,7 +2102,7 @@
         "y": 40,
         "wires": [
             [
-                "d55333906aeb7517"
+                "46b27e4a0a66d96d"
             ]
         ]
     },
@@ -2119,26 +2120,6 @@
             ]
         ]
     },
-    {
-        "id": "d55333906aeb7517",
-        "type": "function",
-        "z": "07f3b717f2a2c8c7",
-        "name": "Get Global Variables",
-        "func": "const keys = global.keys(); // Get all global variable keys\nmsg.payload = {}; // Initialize the payload object\n\nkeys.forEach(key => {\n    // Ignore keys that start with \"$\"\n    if (!key.startsWith('$')) {\n        msg.payload[key] = global.get(key);\n    }\n});\n\nreturn msg;\n",
-        "outputs": 1,
-        "timeout": 0,
-        "noerr": 0,
-        "initialize": "",
-        "finalize": "",
-        "libs": [],
-        "x": 120,
-        "y": 140,
-        "wires": [
-            [
-                "87b0cc67cfa07120"
-            ]
-        ]
-    },
     {
         "id": "87b0cc67cfa07120",
         "type": "ui-template",
@@ -2151,17 +2132,18 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n    <v-container fluid>\n        <v-card elevation=\"4\">\n            <!-- Header -->\n            <v-card-item class=\"bg-primary pa-4\">\n                <template v-slot:prepend>\n                    <v-icon icon=\"mdi-microscope\" size=\"large\" class=\"mr-2\"></v-icon>\n                </template>\n                <v-card-title class=\"text-h6 font-weight-bold\">\n                    Welcome to the PlanktoScope GUI\n                </v-card-title>\n            </v-card-item>\n\n            <v-card-text>\n                <div class=\"text-h6 my-4\">Enter your information</div>\n\n                <v-form ref=\"form\" v-model=\"valid\">\n                    <v-row>\n                        <!-- Region / Country Select -->\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete v-model=\"formData.country\" :items=\"countries\" item-title=\"label\"\n                                item-value=\"value\" label=\"Region\" placeholder=\"Please select\" variant=\"outlined\"\n                                density=\"compact\" clearable></v-autocomplete>\n                        </v-col>\n\n                        <!-- Timezone Select -->\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete v-model=\"formData.timezone\" :items=\"timezones\" label=\"Timezone\"\n                                placeholder=\"Please select\" variant=\"outlined\" density=\"compact\"\n                                clearable></v-autocomplete>\n                        </v-col>\n                    </v-row>\n                </v-form>\n            </v-card-text>\n\n            <!-- Actions -->\n            <v-card-actions class=\"pa-4\" >\n                <v-spacer></v-spacer>\n                <v-btn variant=\"flat\" class=\"px-4\" size=\"large\" color=\"primary\" @click=\"submitForm\" :disabled=\"!isValid\">\n                    <v-icon start>mdi-content-save</v-icon>\n                    Save Configuration\n                </v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-container>\n</template>\n\n<script>\n    export default {\n    data() {\n        return {\n            valid: true,\n            formData: {\n                country: \"\",\n                timezone: \"UTC\", // Valeur par défaut modifiée\n            },\n            // Large lists are loaded in mounted to keep data cleaner\n            countries: [],\n            timezones: []\n        };\n    },\n    computed: {\n        isValid() {\n            return this.formData.country && this.formData.timezone;\n        }\n    },\n    methods: {\n        submitForm() {\n            // Send the form data to Node-RED\n            this.send({ payload: this.formData });\n        }\n    },\n    mounted() {\n        // Populating the massive lists provided in the prompt\n        this.countries = [\n            { value: \"AF\", label: \"Afghanistan\" },\n            { value: \"AX\", label: \"Åland Islands\" },\n            { value: \"AL\", label: \"Albania\" },\n            { value: \"DZ\", label: \"Algeria\" },\n            { value: \"AD\", label: \"Andorra\" },\n            { value: \"AO\", label: \"Angola\" },\n            { value: \"AI\", label: \"Anguilla\" },\n            { value: \"AQ\", label: \"Antarctica\" },\n            { value: \"AG\", label: \"Antigua & Barbuda\" },\n            { value: \"AR\", label: \"Argentina\" },\n            { value: \"AM\", label: \"Armenia\" },\n            { value: \"AW\", label: \"Aruba\" },\n            { value: \"AU\", label: \"Australia\" },\n            { value: \"AT\", label: \"Austria\" },\n            { value: \"AZ\", label: \"Azerbaijan\" },\n            { value: \"BS\", label: \"Bahamas\" },\n            { value: \"BH\", label: \"Bahrain\" },\n            { value: \"BD\", label: \"Bangladesh\" },\n            { value: \"BB\", label: \"Barbados\" },\n            { value: \"BY\", label: \"Belarus\" },\n            { value: \"BE\", label: \"Belgium\" },\n            { value: \"BZ\", label: \"Belize\" },\n            { value: \"BJ\", label: \"Benin\" },\n            { value: \"BM\", label: \"Bermuda\" },\n            { value: \"BT\", label: \"Bhutan\" },\n            { value: \"BO\", label: \"Bolivia\" },\n            { value: \"BA\", label: \"Bosnia & Herzegovina\" },\n            { value: \"BW\", label: \"Botswana\" },\n            { value: \"BV\", label: \"Bouvet Island\" },\n            { value: \"BR\", label: \"Brazil\" },\n            { value: \"GB\", label: \"Britain (UK)\" },\n            { value: \"IO\", label: \"British Indian Ocean Territory\" },\n            { value: \"BN\", label: \"Brunei\" },\n            { value: \"BG\", label: \"Bulgaria\" },\n            { value: \"BF\", label: \"Burkina Faso\" },\n            { value: \"BI\", label: \"Burundi\" },\n            { value: \"KH\", label: \"Cambodia\" },\n            { value: \"CM\", label: \"Cameroon\" },\n            { value: \"CA\", label: \"Canada\" },\n            { value: \"CV\", label: \"Cape Verde\" },\n            { value: \"BQ\", label: \"Caribbean NL\" },\n            { value: \"KY\", label: \"Cayman Islands\" },\n            { value: \"CF\", label: \"Central African Rep.\" },\n            { value: \"TD\", label: \"Chad\" },\n            { value: \"CL\", label: \"Chile\" },\n            { value: \"CN\", label: \"China\" },\n            { value: \"CX\", label: \"Christmas Island\" },\n            { value: \"CC\", label: \"Cocos (Keeling) Islands\" },\n            { value: \"CO\", label: \"Colombia\" },\n            { value: \"KM\", label: \"Comoros\" },\n            { value: \"CD\", label: \"Congo (Dem. Rep.)\" },\n            { value: \"CG\", label: \"Congo (Rep.)\" },\n            { value: \"CK\", label: \"Cook Islands\" },\n            { value: \"CR\", label: \"Costa Rica\" },\n            { value: \"CI\", label: \"Côte d'Ivoire\" },\n            { value: \"HR\", label: \"Croatia\" },\n            { value: \"CU\", label: \"Cuba\" },\n            { value: \"CW\", label: \"Curaçao\" },\n            { value: \"CY\", label: \"Cyprus\" },\n            { value: \"CZ\", label: \"Czech Republic\" },\n            { value: \"DK\", label: \"Denmark\" },\n            { value: \"DJ\", label: \"Djibouti\" },\n            { value: \"DM\", label: \"Dominica\" },\n            { value: \"DO\", label: \"Dominican Republic\" },\n            { value: \"TL\", label: \"East Timor\" },\n            { value: \"EC\", label: \"Ecuador\" },\n            { value: \"EG\", label: \"Egypt\" },\n            { value: \"SV\", label: \"El Salvador\" },\n            { value: \"GQ\", label: \"Equatorial Guinea\" },\n            { value: \"ER\", label: \"Eritrea\" },\n            { value: \"EE\", label: \"Estonia\" },\n            { value: \"SZ\", label: \"Eswatini (Swaziland)\" },\n            { value: \"ET\", label: \"Ethiopia\" },\n            { value: \"FK\", label: \"Falkland Islands\" },\n            { value: \"FO\", label: \"Faroe Islands\" },\n            { value: \"FJ\", label: \"Fiji\" },\n            { value: \"FI\", label: \"Finland\" },\n            { value: \"FR\", label: \"France\" },\n            { value: \"GF\", label: \"French Guiana\" },\n            { value: \"PF\", label: \"French Polynesia\" },\n            { value: \"TF\", label: \"French S. Terr.\" },\n            { value: \"GA\", label: \"Gabon\" },\n            { value: \"GM\", label: \"Gambia\" },\n            { value: \"GE\", label: \"Georgia\" },\n            { value: \"DE\", label: \"Germany\" },\n            { value: \"GH\", label: \"Ghana\" },\n            { value: \"GI\", label: \"Gibraltar\" },\n            { value: \"GR\", label: \"Greece\" },\n            { value: \"GL\", label: \"Greenland\" },\n            { value: \"GD\", label: \"Grenada\" },\n            { value: \"GP\", label: \"Guadeloupe\" },\n            { value: \"GU\", label: \"Guam\" },\n            { value: \"GT\", label: \"Guatemala\" },\n            { value: \"GG\", label: \"Guernsey\" },\n            { value: \"GN\", label: \"Guinea\" },\n            { value: \"GW\", label: \"Guinea-Bissau\" },\n            { value: \"GY\", label: \"Guyana\" },\n            { value: \"HT\", label: \"Haiti\" },\n            { value: \"HM\", label: \"Heard Island & McDonald Islands\" },\n            { value: \"HN\", label: \"Honduras\" },\n            { value: \"HK\", label: \"Hong Kong\" },\n            { value: \"HU\", label: \"Hungary\" },\n            { value: \"IS\", label: \"Iceland\" },\n            { value: \"IN\", label: \"India\" },\n            { value: \"ID\", label: \"Indonesia\" },\n            { value: \"IR\", label: \"Iran\" },\n            { value: \"IQ\", label: \"Iraq\" },\n            { value: \"IE\", label: \"Ireland\" },\n            { value: \"IM\", label: \"Isle of Man\" },\n            { value: \"IL\", label: \"Israel\" },\n            { value: \"IT\", label: \"Italy\" },\n            { value: \"JM\", label: \"Jamaica\" },\n            { value: \"JP\", label: \"Japan\" },\n            { value: \"JE\", label: \"Jersey\" },\n            { value: \"JO\", label: \"Jordan\" },\n            { value: \"KZ\", label: \"Kazakhstan\" },\n            { value: \"KE\", label: \"Kenya\" },\n            { value: \"KI\", label: \"Kiribati\" },\n            { value: \"KP\", label: \"Korea (North)\" },\n            { value: \"KR\", label: \"Korea (South)\" },\n            { value: \"KW\", label: \"Kuwait\" },\n            { value: \"KG\", label: \"Kyrgyzstan\" },\n            { value: \"LA\", label: \"Laos\" },\n            { value: \"LV\", label: \"Latvia\" },\n            { value: \"LB\", label: \"Lebanon\" },\n            { value: \"LS\", label: \"Lesotho\" },\n            { value: \"LR\", label: \"Liberia\" },\n            { value: \"LY\", label: \"Libya\" },\n            { value: \"LI\", label: \"Liechtenstein\" },\n            { value: \"LT\", label: \"Lithuania\" },\n            { value: \"LU\", label: \"Luxembourg\" },\n            { value: \"MO\", label: \"Macau\" },\n            { value: \"MG\", label: \"Madagascar\" },\n            { value: \"MW\", label: \"Malawi\" },\n            { value: \"MY\", label: \"Malaysia\" },\n            { value: \"MV\", label: \"Maldives\" },\n            { value: \"ML\", label: \"Mali\" },\n            { value: \"MT\", label: \"Malta\" },\n            { value: \"MH\", label: \"Marshall Islands\" },\n            { value: \"MQ\", label: \"Martinique\" },\n            { value: \"MR\", label: \"Mauritania\" },\n            { value: \"MU\", label: \"Mauritius\" },\n            { value: \"YT\", label: \"Mayotte\" },\n            { value: \"MX\", label: \"Mexico\" },\n            { value: \"FM\", label: \"Micronesia\" },\n            { value: \"MD\", label: \"Moldova\" },\n            { value: \"MC\", label: \"Monaco\" },\n            { value: \"MN\", label: \"Mongolia\" },\n            { value: \"ME\", label: \"Montenegro\" },\n            { value: \"MS\", label: \"Montserrat\" },\n            { value: \"MA\", label: \"Morocco\" },\n            { value: \"MZ\", label: \"Mozambique\" },\n            { value: \"MM\", label: \"Myanmar (Burma)\" },\n            { value: \"NA\", label: \"Namibia\" },\n            { value: \"NR\", label: \"Nauru\" },\n            { value: \"NP\", label: \"Nepal\" },\n            { value: \"NL\", label: \"Netherlands\" },\n            { value: \"NC\", label: \"New Caledonia\" },\n            { value: \"NZ\", label: \"New Zealand\" },\n            { value: \"NI\", label: \"Nicaragua\" },\n            { value: \"NE\", label: \"Niger\" },\n            { value: \"NG\", label: \"Nigeria\" },\n            { value: \"NU\", label: \"Niue\" },\n            { value: \"NF\", label: \"Norfolk Island\" },\n            { value: \"MK\", label: \"North Macedonia\" },\n            { value: \"MP\", label: \"Northern Mariana Islands\" },\n            { value: \"NO\", label: \"Norway\" },\n            { value: \"OM\", label: \"Oman\" },\n            { value: \"PK\", label: \"Pakistan\" },\n            { value: \"PW\", label: \"Palau\" },\n            { value: \"PS\", label: \"Palestine\" },\n            { value: \"PA\", label: \"Panama\" },\n            { value: \"PG\", label: \"Papua New Guinea\" },\n            { value: \"PY\", label: \"Paraguay\" },\n            { value: \"PE\", label: \"Peru\" },\n            { value: \"PH\", label: \"Philippines\" },\n            { value: \"PN\", label: \"Pitcairn\" },\n            { value: \"PL\", label: \"Poland\" },\n            { value: \"PT\", label: \"Portugal\" },\n            { value: \"PR\", label: \"Puerto Rico\" },\n            { value: \"QA\", label: \"Qatar\" },\n            { value: \"RE\", label: \"Réunion\" },\n            { value: \"RO\", label: \"Romania\" },\n            { value: \"RU\", label: \"Russia\" },\n            { value: \"RW\", label: \"Rwanda\" },\n            { value: \"AS\", label: \"Samoa (American)\" },\n            { value: \"WS\", label: \"Samoa (western)\" },\n            { value: \"SM\", label: \"San Marino\" },\n            { value: \"ST\", label: \"Sao Tome & Principe\" },\n            { value: \"SA\", label: \"Saudi Arabia\" },\n            { value: \"SN\", label: \"Senegal\" },\n            { value: \"RS\", label: \"Serbia\" },\n            { value: \"SC\", label: \"Seychelles\" },\n            { value: \"SL\", label: \"Sierra Leone\" },\n            { value: \"SG\", label: \"Singapore\" },\n            { value: \"SK\", label: \"Slovakia\" },\n            { value: \"SI\", label: \"Slovenia\" },\n            { value: \"SB\", label: \"Solomon Islands\" },\n            { value: \"SO\", label: \"Somalia\" },\n            { value: \"ZA\", label: \"South Africa\" },\n            { value: \"GS\", label: \"South Georgia & the South Sandwich Islands\" },\n            { value: \"SS\", label: \"South Sudan\" },\n            { value: \"ES\", label: \"Spain\" },\n            { value: \"LK\", label: \"Sri Lanka\" },\n            { value: \"BL\", label: \"St Barthelemy\" },\n            { value: \"SH\", label: \"St Helena\" },\n            { value: \"KN\", label: \"St Kitts & Nevis\" },\n            { value: \"LC\", label: \"St Lucia\" },\n            { value: \"SX\", label: \"St Maarten (Dutch)\" },\n            { value: \"MF\", label: \"St Martin (French)\" },\n            { value: \"PM\", label: \"St Pierre & Miquelon\" },\n            { value: \"VC\", label: \"St Vincent\" },\n            { value: \"SD\", label: \"Sudan\" },\n            { value: \"SR\", label: \"Suriname\" },\n            { value: \"SJ\", label: \"Svalbard & Jan Mayen\" },\n            { value: \"SE\", label: \"Sweden\" },\n            { value: \"CH\", label: \"Switzerland\" },\n            { value: \"SY\", label: \"Syria\" },\n            { value: \"TW\", label: \"Taiwan\" },\n            { value: \"TJ\", label: \"Tajikistan\" },\n            { value: \"TZ\", label: \"Tanzania\" },\n            { value: \"TH\", label: \"Thailand\" },\n            { value: \"TG\", label: \"Togo\" },\n            { value: \"TK\", label: \"Tokelau\" },\n            { value: \"TO\", label: \"Tonga\" },\n            { value: \"TT\", label: \"Trinidad & Tobago\" },\n            { value: \"TN\", label: \"Tunisia\" },\n            { value: \"TR\", label: \"Turkey\" },\n            { value: \"TM\", label: \"Turkmenistan\" },\n            { value: \"TC\", label: \"Turks & Caicos Is\" },\n            { value: \"TV\", label: \"Tuvalu\" },\n            { value: \"UG\", label: \"Uganda\" },\n            { value: \"UA\", label: \"Ukraine\" },\n            { value: \"AE\", label: \"United Arab Emirates\" },\n            { value: \"US\", label: \"United States\" },\n            { value: \"UY\", label: \"Uruguay\" },\n            { value: \"UM\", label: \"US minor outlying islands\" },\n            { value: \"UZ\", label: \"Uzbekistan\" },\n            { value: \"VU\", label: \"Vanuatu\" },\n            { value: \"VA\", label: \"Vatican City\" },\n            { value: \"VE\", label: \"Venezuela\" },\n            { value: \"VN\", label: \"Vietnam\" },\n            { value: \"VG\", label: \"Virgin Islands (UK)\" },\n            { value: \"VI\", label: \"Virgin Islands (US)\" },\n            { value: \"WF\", label: \"Wallis & Futuna\" },\n            { value: \"EH\", label: \"Western Sahara\" },\n            { value: \"YE\", label: \"Yemen\" },\n            { value: \"ZM\", label: \"Zambia\" },\n            { value: \"ZW\", label: \"Zimbabwe\" }\n        ];\n        \n        this.timezones = [\n            \"Africa/Abidjan\", \"Africa/Accra\", \"Africa/Addis_Ababa\", \"Africa/Algiers\", \"Africa/Asmara\", \"Africa/Asmera\", \"Africa/Bamako\", \"Africa/Bangui\", \"Africa/Banjul\", \"Africa/Bissau\", \"Africa/Blantyre\", \"Africa/Brazzaville\", \"Africa/Bujumbura\", \"Africa/Cairo\", \"Africa/Casablanca\", \"Africa/Ceuta\", \"Africa/Conakry\", \"Africa/Dakar\", \"Africa/Dar_es_Salaam\", \"Africa/Djibouti\", \"Africa/Douala\", \"Africa/El_Aaiun\", \"Africa/Freetown\", \"Africa/Gaborone\", \"Africa/Harare\", \"Africa/Johannesburg\", \"Africa/Juba\", \"Africa/Kampala\", \"Africa/Khartoum\", \"Africa/Kigali\", \"Africa/Kinshasa\", \"Africa/Lagos\", \"Africa/Libreville\", \"Africa/Lome\", \"Africa/Luanda\", \"Africa/Lubumbashi\", \"Africa/Lusaka\", \"Africa/Malabo\", \"Africa/Maputo\", \"Africa/Maseru\", \"Africa/Mbabane\", \"Africa/Mogadishu\", \"Africa/Monrovia\", \"Africa/Nairobi\", \"Africa/Ndjamena\", \"Africa/Niamey\", \"Africa/Nouakchott\", \"Africa/Ouagadougou\", \"Africa/Porto-Novo\", \"Africa/Sao_Tome\", \"Africa/Timbuktu\", \"Africa/Tripoli\", \"Africa/Tunis\", \"Africa/Windhoek\", \"America/Adak\", \"America/Anchorage\", \"America/Anguilla\", \"America/Antigua\", \"America/Araguaina\", \"America/Argentina/Buenos_Aires\", \"America/Argentina/Catamarca\", \"America/Argentina/ComodRivadavia\", \"America/Argentina/Cordoba\", \"America/Argentina/Jujuy\", \"America/Argentina/La_Rioja\", \"America/Argentina/Mendoza\", \"America/Argentina/Rio_Gallegos\", \"America/Argentina/Salta\", \"America/Argentina/San_Juan\", \"America/Argentina/San_Luis\", \"America/Argentina/Tucuman\", \"America/Argentina/Ushuaia\", \"America/Aruba\", \"America/Asuncion\", \"America/Atikokan\", \"America/Atka\", \"America/Bahia\", \"America/Bahia_Banderas\", \"America/Barbados\", \"America/Belem\", \"America/Belize\", \"America/Blanc-Sablon\", \"America/Boa_Vista\", \"America/Bogota\", \"America/Boise\", \"America/Buenos_Aires\", \"America/Cambridge_Bay\", \"America/Campo_Grande\", \"America/Cancun\", \"America/Caracas\", \"America/Catamarca\", \"America/Cayenne\", \"America/Cayman\", \"America/Chicago\", \"America/Chihuahua\", \"America/Ciudad_Juarez\", \"America/Coral_Harbour\", \"America/Cordoba\", \"America/Costa_Rica\", \"America/Coyhaique\", \"America/Creston\", \"America/Cuiaba\", \"America/Curacao\", \"America/Danmarkshavn\", \"America/Dawson\", \"America/Dawson_Creek\", \"America/Denver\", \"America/Detroit\", \"America/Dominica\", \"America/Edmonton\", \"America/Eirunepe\", \"America/El_Salvador\", \"America/Ensenada\", \"America/Fort_Nelson\", \"America/Fort_Wayne\", \"America/Fortaleza\", \"America/Glace_Bay\", \"America/Godthab\", \"America/Goose_Bay\", \"America/Grand_Turk\", \"America/Grenada\", \"America/Guadeloupe\", \"America/Guatemala\", \"America/Guayaquil\", \"America/Guyana\", \"America/Halifax\", \"America/Havana\", \"America/Hermosillo\", \"America/Indiana/Indianapolis\", \"America/Indiana/Knox\", \"America/Indiana/Marengo\", \"America/Indiana/Petersburg\", \"America/Indiana/Tell_City\", \"America/Indiana/Vevay\", \"America/Indiana/Vincennes\", \"America/Indiana/Winamac\", \"America/Indianapolis\", \"America/Inuvik\", \"America/Iqaluit\", \"America/Jamaica\", \"America/Jujuy\", \"America/Juneau\", \"America/Kentucky/Louisville\", \"America/Kentucky/Monticello\", \"America/Knox_IN\", \"America/Kralendijk\", \"America/La_Paz\", \"America/Lima\", \"America/Los_Angeles\", \"America/Louisville\", \"America/Lower_Princes\", \"America/Maceio\", \"America/Managua\", \"America/Manaus\", \"America/Marigot\", \"America/Martinique\", \"America/Matamoros\", \"America/Mazatlan\", \"America/Mendoza\", \"America/Menominee\", \"America/Merida\", \"America/Metlakatla\", \"America/Mexico_City\", \"America/Miquelon\", \"America/Moncton\", \"America/Monterrey\", \"America/Montevideo\", \"America/Montreal\", \"America/Montserrat\", \"America/Nassau\", \"America/New_York\", \"America/Nipigon\", \"America/Nome\", \"America/Noronha\", \"America/North_Dakota/Beulah\", \"America/North_Dakota/Center\", \"America/North_Dakota/New_Salem\", \"America/Nuuk\", \"America/Ojinaga\", \"America/Panama\", \"America/Pangnirtung\", \"America/Paramaribo\", \"America/Phoenix\", \"America/Port-au-Prince\", \"America/Port_of_Spain\", \"America/Porto_Acre\", \"America/Porto_Velho\", \"America/Puerto_Rico\", \"America/Punta_Arenas\", \"America/Rainy_River\", \"America/Rankin_Inlet\", \"America/Recife\", \"America/Regina\", \"America/Resolute\", \"America/Rio_Branco\", \"America/Rosario\", \"America/Santa_Isabel\", \"America/Santarem\", \"America/Santiago\", \"America/Santo_Domingo\", \"America/Sao_Paulo\", \"America/Scoresbysund\", \"America/Shiprock\", \"America/Sitka\", \"America/St_Barthelemy\", \"America/St_Johns\", \"America/St_Kitts\", \"America/St_Lucia\", \"America/St_Thomas\", \"America/St_Vincent\", \"America/Swift_Current\", \"America/Tegucigalpa\", \"America/Thule\", \"America/Thunder_Bay\", \"America/Tijuana\", \"America/Toronto\", \"America/Tortola\", \"America/Vancouver\", \"America/Virgin\", \"America/Whitehorse\", \"America/Winnipeg\", \"America/Yakutat\", \"America/Yellowknife\", \"Antarctica/Casey\", \"Antarctica/Davis\", \"Antarctica/DumontDUrville\", \"Antarctica/Macquarie\", \"Antarctica/Mawson\", \"Antarctica/McMurdo\", \"Antarctica/Palmer\", \"Antarctica/Rothera\", \"Antarctica/South_Pole\", \"Antarctica/Syowa\", \"Antarctica/Troll\", \"Antarctica/Vostok\", \"Arctic/Longyearbyen\", \"Asia/Aden\", \"Asia/Almaty\", \"Asia/Amman\", \"Asia/Anadyr\", \"Asia/Aqtau\", \"Asia/Aqtobe\", \"Asia/Ashgabat\", \"Asia/Ashkhabad\", \"Asia/Atyrau\", \"Asia/Baghdad\", \"Asia/Bahrain\", \"Asia/Baku\", \"Asia/Bangkok\", \"Asia/Barnaul\", \"Asia/Beirut\", \"Asia/Bishkek\", \"Asia/Brunei\", \"Asia/Calcutta\", \"Asia/Chita\", \"Asia/Choibalsan\", \"Asia/Chongqing\", \"Asia/Chungking\", \"Asia/Colombo\", \"Asia/Dacca\", \"Asia/Damascus\", \"Asia/Dhaka\", \"Asia/Dili\", \"Asia/Dubai\", \"Asia/Dushanbe\", \"Asia/Famagusta\", \"Asia/Gaza\", \"Asia/Harbin\", \"Asia/Hebron\", \"Asia/Ho_Chi_Minh\", \"Asia/Hong_Kong\", \"Asia/Hovd\", \"Asia/Irkutsk\", \"Asia/Istanbul\", \"Asia/Jakarta\", \"Asia/Jayapura\", \"Asia/Jerusalem\", \"Asia/Kabul\", \"Asia/Kamchatka\", \"Asia/Karachi\", \"Asia/Kashgar\", \"Asia/Kathmandu\", \"Asia/Katmandu\", \"Asia/Khandyga\", \"Asia/Kolkata\", \"Asia/Krasnoyarsk\", \"Asia/Kuala_Lumpur\", \"Asia/Kuching\", \"Asia/Kuwait\", \"Asia/Macao\", \"Asia/Macau\", \"Asia/Magadan\", \"Asia/Makassar\", \"Asia/Manila\", \"Asia/Muscat\", \"Asia/Nicosia\", \"Asia/Novokuznetsk\", \"Asia/Novosibirsk\", \"Asia/Omsk\", \"Asia/Oral\", \"Asia/Phnom_Penh\", \"Asia/Pontianak\", \"Asia/Pyongyang\", \"Asia/Qatar\", \"Asia/Qostanay\", \"Asia/Qyzylorda\", \"Asia/Rangoon\", \"Asia/Riyadh\", \"Asia/Saigon\", \"Asia/Sakhalin\", \"Asia/Samarkand\", \"Asia/Seoul\", \"Asia/Shanghai\", \"Asia/Singapore\", \"Asia/Srednekolymsk\", \"Asia/Taipei\", \"Asia/Tashkent\", \"Asia/Tbilisi\", \"Asia/Tehran\", \"Asia/Tel_Aviv\", \"Asia/Thimbu\", \"Asia/Thimphu\", \"Asia/Tokyo\", \"Asia/Tomsk\", \"Asia/Ujung_Pandang\", \"Asia/Ulaanbaatar\", \"Asia/Ulan_Bator\", \"Asia/Urumqi\", \"Asia/Ust-Nera\", \"Asia/Vientiane\", \"Asia/Vladivostok\", \"Asia/Yakutsk\", \"Asia/Yangon\", \"Asia/Yekaterinburg\", \"Asia/Yerevan\", \"Atlantic/Azores\", \"Atlantic/Bermuda\", \"Atlantic/Canary\", \"Atlantic/Cape_Verde\", \"Atlantic/Faeroe\", \"Atlantic/Faroe\", \"Atlantic/Jan_Mayen\", \"Atlantic/Madeira\", \"Atlantic/Reykjavik\", \"Atlantic/South_Georgia\", \"Atlantic/St_Helena\", \"Atlantic/Stanley\", \"Australia/ACT\", \"Australia/Adelaide\", \"Australia/Brisbane\", \"Australia/Broken_Hill\", \"Australia/Canberra\", \"Australia/Currie\", \"Australia/Darwin\", \"Australia/Eucla\", \"Australia/Hobart\", \"Australia/LHI\", \"Australia/Lindeman\", \"Australia/Lord_Howe\", \"Australia/Melbourne\", \"Australia/NSW\", \"Australia/North\", \"Australia/Perth\", \"Australia/Queensland\", \"Australia/South\", \"Australia/Sydney\", \"Australia/Tasmania\", \"Australia/Victoria\", \"Australia/West\", \"Australia/Yancowinna\", \"Brazil/Acre\", \"Brazil/DeNoronha\", \"Brazil/East\", \"Brazil/West\", \"CET\", \"CST6CDT\", \"Canada/Atlantic\", \"Canada/Central\", \"Canada/Eastern\", \"Canada/Mountain\", \"Canada/Newfoundland\", \"Canada/Pacific\", \"Canada/Saskatchewan\", \"Canada/Yukon\", \"Chile/Continental\", \"Chile/EasterIsland\", \"Cuba\", \"EET\", \"EST\", \"EST5EDT\", \"Egypt\", \"Eire\", \"Etc/GMT\", \"Etc/GMT+0\", \"Etc/GMT+1\", \"Etc/GMT+10\", \"Etc/GMT+11\", \"Etc/GMT+12\", \"Etc/GMT+2\", \"Etc/GMT+3\", \"Etc/GMT+4\", \"Etc/GMT+5\", \"Etc/GMT+6\", \"Etc/GMT+7\", \"Etc/GMT+8\", \"Etc/GMT+9\", \"Etc/GMT-0\", \"Etc/GMT-1\", \"Etc/GMT-10\", \"Etc/GMT-11\", \"Etc/GMT-12\", \"Etc/GMT-13\", \"Etc/GMT-14\", \"Etc/GMT-2\", \"Etc/GMT-3\", \"Etc/GMT-4\", \"Etc/GMT-5\", \"Etc/GMT-6\", \"Etc/GMT-7\", \"Etc/GMT-8\", \"Etc/GMT-9\", \"Etc/GMT0\", \"Etc/Greenwich\", \"Etc/UCT\", \"Etc/UTC\", \"Etc/Universal\", \"Etc/Zulu\", \"Europe/Amsterdam\", \"Europe/Andorra\", \"Europe/Astrakhan\", \"Europe/Athens\", \"Europe/Belfast\", \"Europe/Belgrade\", \"Europe/Berlin\", \"Europe/Bratislava\", \"Europe/Brussels\", \"Europe/Bucharest\", \"Europe/Budapest\", \"Europe/Busingen\", \"Europe/Chisinau\", \"Europe/Copenhagen\", \"Europe/Dublin\", \"Europe/Gibraltar\", \"Europe/Guernsey\", \"Europe/Helsinki\", \"Europe/Isle_of_Man\", \"Europe/Istanbul\", \"Europe/Jersey\", \"Europe/Kaliningrad\", \"Europe/Kiev\", \"Europe/Kirov\", \"Europe/Kyiv\", \"Europe/Lisbon\", \"Europe/Ljubljana\", \"Europe/London\", \"Europe/Luxembourg\", \"Europe/Madrid\", \"Europe/Malta\", \"Europe/Mariehamn\", \"Europe/Minsk\", \"Europe/Monaco\", \"Europe/Moscow\", \"Europe/Nicosia\", \"Europe/Oslo\", \"Europe/Paris\", \"Europe/Podgorica\", \"Europe/Prague\", \"Europe/Riga\", \"Europe/Rome\", \"Europe/Samara\", \"Europe/San_Marino\", \"Europe/Sarajevo\", \"Europe/Saratov\", \"Europe/Simferopol\", \"Europe/Skopje\", \"Europe/Sofia\", \"Europe/Stockholm\", \"Europe/Tallinn\", \"Europe/Tirane\", \"Europe/Tiraspol\", \"Europe/Ulyanovsk\", \"Europe/Uzhgorod\", \"Europe/Vaduz\", \"Europe/Vatican\", \"Europe/Vienna\", \"Europe/Vilnius\", \"Europe/Volgograd\", \"Europe/Warsaw\", \"Europe/Zagreb\", \"Europe/Zaporozhye\", \"Europe/Zurich\", \"Factory\", \"GB\", \"GB-Eire\", \"GMT\", \"GMT+0\", \"GMT-0\", \"GMT0\", \"Greenwich\", \"HST\", \"Hongkong\", \"Iceland\", \"Indian/Antananarivo\", \"Indian/Chagos\", \"Indian/Christmas\", \"Indian/Cocos\", \"Indian/Comoro\", \"Indian/Kerguelen\", \"Indian/Mahe\", \"Indian/Maldives\", \"Indian/Mauritius\", \"Indian/Mayotte\", \"Indian/Reunion\", \"Iran\", \"Israel\", \"Jamaica\", \"Japan\", \"Kwajalein\", \"Libya\", \"MET\", \"MST\", \"MST7MDT\", \"Mexico/BajaNorte\", \"Mexico/BajaSur\", \"Mexico/General\", \"NZ\", \"NZ-CHAT\", \"Navajo\", \"PRC\", \"PST8PDT\", \"Pacific/Apia\", \"Pacific/Auckland\", \"Pacific/Bougainville\", \"Pacific/Chatham\", \"Pacific/Chuuk\", \"Pacific/Easter\", \"Pacific/Efate\", \"Pacific/Enderbury\", \"Pacific/Fakaofo\", \"Pacific/Fiji\", \"Pacific/Funafuti\", \"Pacific/Galapagos\", \"Pacific/Gambier\", \"Pacific/Guadalcanal\", \"Pacific/Guam\", \"Pacific/Honolulu\", \"Pacific/Johnston\", \"Pacific/Kanton\", \"Pacific/Kiritimati\", \"Pacific/Kosrae\", \"Pacific/Kwajalein\", \"Pacific/Majuro\", \"Pacific/Marquesas\", \"Pacific/Midway\", \"Pacific/Nauru\", \"Pacific/Niue\", \"Pacific/Norfolk\", \"Pacific/Noumea\", \"Pacific/Pago_Pago\", \"Pacific/Palau\", \"Pacific/Pitcairn\", \"Pacific/Pohnpei\", \"Pacific/Ponape\", \"Pacific/Port_Moresby\", \"Pacific/Rarotonga\", \"Pacific/Saipan\", \"Pacific/Samoa\", \"Pacific/Tahiti\", \"Pacific/Tarawa\", \"Pacific/Tongatapu\", \"Pacific/Truk\", \"Pacific/Wake\", \"Pacific/Wallis\", \"Pacific/Yap\", \"Poland\", \"Portugal\", \"ROC\", \"ROK\", \"Singapore\", \"Turkey\", \"UCT\", \"US/Alaska\", \"US/Aleutian\", \"US/Arizona\", \"US/Central\", \"US/East-Indiana\", \"US/Eastern\", \"US/Hawaii\", \"US/Indiana-Starke\", \"US/Michigan\", \"US/Mountain\", \"US/Pacific\", \"US/Samoa\", \"UTC\", \"Universal\", \"W-SU\", \"WET\", \"Zulu\"\n        ];\n    }\n}\n</script>",
+        "format": "<template>\n    <v-container fluid>\n        <v-card elevation=\"4\">\n            <v-card-item class=\"bg-primary pa-4\">\n                <template v-slot:prepend>\n                    <v-icon icon=\"mdi-microscope\" size=\"large\" class=\"mr-2\"></v-icon>\n                </template>\n                <v-card-title class=\"text-h6 font-weight-bold\">\n                    Welcome to the PlanktoScope GUI\n                </v-card-title>\n            </v-card-item>\n\n            <v-card-text>\n                <div class=\"text-h6 my-4\">Enter your information</div>\n\n                <v-alert v-if=\"regionsList.length === 0\" type=\"info\" variant=\"tonal\" class=\"mb-4\">\n                    Waiting for configuration data...\n                </v-alert>\n\n                <v-form ref=\"form\" v-model=\"valid\">\n                    <v-row>\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete \n                                v-model=\"formData.region\" \n                                :items=\"regionsList\" \n                                item-title=\"label\"\n                                item-value=\"value\" \n                                label=\"Region\" \n                                placeholder=\"Select your region\" \n                                variant=\"outlined\"\n                                density=\"compact\" \n                                clearable\n                                :loading=\"regionsList.length === 0\"\n                                :disabled=\"isSaving\"\n                            ></v-autocomplete>\n                        </v-col>\n\n                        <v-col cols=\"12\" md=\"12\" class=\"pa-0\">\n                            <v-autocomplete \n                                v-model=\"formData.timezone\" \n                                :items=\"timezonesList\" \n                                item-title=\"label\"\n                                item-value=\"value\"\n                                label=\"Timezone\"\n                                placeholder=\"Select your timezone\" \n                                variant=\"outlined\" \n                                density=\"compact\"\n                                clearable\n                                :loading=\"timezonesList.length === 0\"\n                                :disabled=\"isSaving\"\n                            ></v-autocomplete>\n                        </v-col>\n                    </v-row>\n                </v-form>\n            </v-card-text>\n\n            <v-card-actions class=\"pa-4\">\n                <v-spacer></v-spacer>\n                <v-btn \n                    variant=\"flat\" \n                    class=\"px-4\" \n                    size=\"large\" \n                    color=\"primary\" \n                    @click=\"submitForm\" \n                    :loading=\"isSaving\"\n                    :disabled=\"!isValid || isSaving\"\n                >\n                    <v-icon start>mdi-content-save</v-icon>\n                    Save Configuration\n                </v-btn>\n            </v-card-actions>\n        </v-card>\n    </v-container>\n</template>\n\n<script>\nexport default {\n    data() {\n        return {\n            valid: true,\n            isSaving: false, // Controls the loader state\n            formData: {\n                region: null,\n                timezone: null,\n            },\n            regionsList: [],\n            timezonesList: []\n        };\n    },\n    computed: {\n        isValid() {\n            return this.formData.region && this.formData.timezone;\n        }\n    },\n    watch: {\n        msg: {\n            handler(newMsg) {\n                if (!newMsg) return;\n\n                // --- Scenario 1: Received Configuration Data ---\n                if (newMsg.payload && (newMsg.payload.regions || newMsg.payload.timezones)) {\n                    const p = newMsg.payload;\n                    if (Array.isArray(p.regions)) this.regionsList = p.regions;\n                    if (Array.isArray(p.timezones)) this.timezonesList = p.timezones;\n                    if (p.region !== undefined) this.formData.region = p.region;\n                    if (p.timezone !== undefined) this.formData.timezone = p.timezone;\n                }\n\n                // --- Scenario 2: Received Confirmation to Redirect ---\n                // Topic must be \"setup/ready\"\n                if (newMsg.topic === \"setup/ready\") {\n                    // Check if payload is \"empty\" (null, undefined, empty string, or empty object)\n                    const p = newMsg.payload;\n                    const isEmpty = !p || (typeof p === 'object' && Object.keys(p).length === 0);\n\n                    if (isEmpty) {\n                        this.redirectToHome();\n                    }\n                }\n            },\n            deep: true,\n            immediate: true\n        }\n    },\n    methods: {\n        submitForm() {\n            // 1. Activate Loader\n            this.isSaving = true;\n\n            // 2. Send Data to Node-RED\n            this.send({ \n                payload: this.formData,\n                topic: \"setup/saved\"\n            });\n            \n            // NOTE: We do NOT redirect here anymore. \n            // We wait for the watcher to catch \"setup/ready\".\n        },\n        redirectToHome() {\n            const currentUrl = window.location.href;\n            const targetUrl = currentUrl.replace(/\\/setup\\/?$/, '/home');\n            window.location.href = targetUrl;\n        }\n    }\n}\n</script>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,
         "templateScope": "local",
         "className": "",
-        "x": 370,
-        "y": 140,
+        "x": 310,
+        "y": 180,
         "wires": [
             [
-                "0470c8bd5e2507dc"
+                "0470c8bd5e2507dc",
+                "6f65cb84146c90a6"
             ]
         ]
     },
@@ -2194,19 +2176,89 @@
         "type": "function",
         "z": "07f3b717f2a2c8c7",
         "name": "set general settings",
-        "func": "if (msg.topic) {\n    global.set(\"countries\", msg.payload.countries);\n    global.set(\"timezone\", msg.payload.timezone);\n}\nreturn msg;",
+        "func": "if (msg.topic) {\n    global.set(\"region\", msg.payload.region);\n    global.set(\"timezone\", msg.payload.timezone);\n}\nreturn msg;",
         "outputs": 1,
         "timeout": "",
         "noerr": 0,
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 590,
-        "y": 140,
+        "x": 650,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "46b27e4a0a66d96d",
+        "type": "read setup",
+        "z": "07f3b717f2a2c8c7",
+        "name": "",
+        "x": 150,
+        "y": 180,
+        "wires": [
+            [
+                "87b0cc67cfa07120"
+            ]
+        ]
+    },
+    {
+        "id": "55194d8dcc16d7d7",
+        "type": "write setup",
+        "z": "07f3b717f2a2c8c7",
+        "name": "",
+        "x": 670,
+        "y": 240,
         "wires": [
             []
         ]
     },
+    {
+        "id": "6f65cb84146c90a6",
+        "type": "switch",
+        "z": "07f3b717f2a2c8c7",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "setup/saved",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 470,
+        "y": 240,
+        "wires": [
+            [
+                "55194d8dcc16d7d7"
+            ]
+        ]
+    },
+    {
+        "id": "647c53658f239b9f",
+        "type": "mqtt in",
+        "z": "07f3b717f2a2c8c7",
+        "name": "",
+        "topic": "setup/ready",
+        "qos": "2",
+        "datatype": "auto-detect",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": true,
+        "rh": 0,
+        "inputs": 0,
+        "x": 150,
+        "y": 240,
+        "wires": [
+            [
+                "87b0cc67cfa07120"
+            ]
+        ]
+    },
     {
         "id": "1cf1b20e425ec126",
         "type": "ui-template",
@@ -2505,7 +2557,7 @@
         "templateScope": "widget:ui",
         "className": "",
         "x": 800,
-        "y": 180,
+        "y": 200,
         "wires": [
             [
                 "1db1c2e3e19e85ff"
@@ -3715,7 +3767,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        \n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n        \n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n        \n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-text-field v-model.number=\"acq_id\" type=\"number\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Acquisition ID','Unique identifier for each acquisition run.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-row>\n          <v-col cols=\"12\" sm=\"8\">\n            <v-slider v-model.number=\"acq_nb_frame\" :max=\"10000\" :min=\"1\" :step=\"1\" label=\"Number of Images\"\n              hide-details @update:model-value=\"autoCalculateVolumes\" />\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\" hide-details\n              suffix=\"img\" class=\"aligned-input\" @input=\"autoCalculateVolumes\">\n              <template #append>\n                <v-icon class=\"cursor-pointer\"\n                  @click=\"openHint('Number of Images','Total number of images captured during acquisition.')\">\n                  mdi-information\n                </v-icon>\n              </template>\n            </v-text-field>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels class=\"my-4\" variant=\"accordion\" elevation=\"0\" color=\"primary\">\n          <v-expansion-panel>\n            <v-expansion-panel-title class=\"py-2\">Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-4\">\n\n              <v-row>\n                <v-col cols=\"12\" sm=\"8\">\n                  <v-slider :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\" :max=\"100\"\n                    :min=\"1\" :step=\"1\" label=\"Volume between images\" hide-details />\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"acq_interframe_volume * 1000\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(); }\"\n                    type=\"number\" :min=\"1\" variant=\"outlined\" hide-details suffix=\"µL\" class=\"aligned-input\"\n                    @input=\"autoCalculateVolumes\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (µL).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row class=\"aligned-row\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    class=\"aligned-input\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-row>\n                <v-col cols=\"12\">\n                  <v-textarea v-model=\"acq_comment\" label=\"Acquisition Comment\" variant=\"outlined\" rows=\"2\"\n                    @input=\"sendUpdate()\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Acquisition Comment','Notes or remarks about this acquisition.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-textarea>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n        \n\n        <v-row>\n          <v-col cols=\"12\">\n            <v-btn-toggle v-model=\"acq_status\" variant=\"outlined\" mandatory divided shaped\n              class=\"d-flex justify-space-between mt-4\" @update:model-value=\"handleAcqStatusChange\">\n              <v-btn class=\"flex-grow-1\" value=\"off\" color=\"red\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" value=\"on\" color=\"green\">Start</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row>\n          <v-col cols=\"12\">\n            <v-progress-linear :model-value=\"progression\" color=\"primary\" height=\"24\" rounded striped class=\"mt-2 mb-2\">\n              <template #default=\"{ value }\">\n                <strong>{{ Math.min(100, Math.ceil(value || 0)) }}%</strong>\n              </template>\n            </v-progress-linear>\n          </v-col>\n        </v-row>\n        \n        <v-row class=\"aligned-row\">\n          <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n            <span class=\"text-subtitle-1 text-medium-emphasis ma-2\">Estimated duration left :</span>\n          </v-col>\n          <v-col cols=\"12\" sm=\"4\" class=\"d-flex align-center\">\n            <v-text-field :model-value=\"formatDuration(duration_left)\" variant=\"flat\" hide-details readonly\n              class=\"aligned-input\" />\n          </v-col>\n        </v-row>\n        \n        <v-row>\n          <v-col cols=\"12\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"text-h6\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2\"></v-card-text>\n        <v-card-actions>\n          <v-spacer></v-spacer>\n          <v-btn text @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n  </v-container>\n</template>\n\n<script>\n  // ... (The script section remains the same)\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      acq_nb_frame: 1,\n      acq_interframe_volume: 8,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      progression: 0,\n      duration_left: 0,\n      acq_status: \"off\",\n      acq_status_message: \"\",\n      \n      // Values that are not changing anymore (Constants)\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n\n      // This is dynamic and used for calculation\n      calibration_pixel_size: 0,\n      \n      acq_flowcell_thickness: 300,\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      lastUpdateTime: null,\n      acq_start_timestamp: null,\n    };\n  },\n\n  computed: {\n    sensor_width_um() { return (this.calibration_sensor_width || 0) * (this.calibration_pixel_size || 0); },\n    sensor_height_um() { return (this.calibration_sensor_height || 0) * (this.calibration_pixel_size || 0); },\n    frame_volume_ml() { return this.frame_volume_um3 / 1e12; },\n\n    formattedStatus() {\n      const s = this.acq_status_message;\n      if (s === \"Started\") return \"Image capture process has started successfully.\";\n      if (s === \"Done\") return \"Acquisition completed successfully.\";\n      return s;\n    },\n\n    statusColor() {\n      const s = this.acq_status_message || \"\";\n      if (!s) return \"grey\";\n      if (s.startsWith(\"Error\")) return \"red\";\n      if (s.startsWith(\"Configuration update error\")) return \"orange\";\n      if (s.includes(\"WAS NOT CAPTURED\")) return \"red\";\n      if ([\"Started\", \"Done\"].includes(s)) return \"green\";\n      return \"grey\";\n    },\n\n    statusType() {\n      if (this.statusColor === \"green\") return \"success\";\n      if (this.statusColor === \"orange\") return \"warning\";\n      if (this.statusColor === \"red\") return \"error\";\n      return \"info\";\n    },\n  },\n\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n        const topic = newMsg?.topic;\n\n        if (p.acq_id !== undefined)\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n\n        if (\"acq_comment\" in p) {\n          this.acq_comment = p.acq_comment ?? \"\";\n        }\n\n        if (p.acq_nb_frame !== undefined)\n          this.acq_nb_frame = Number(p.acq_nb_frame);\n\n        if (p.acq_interframe_volume !== undefined)\n          this.acq_interframe_volume = Number(p.acq_interframe_volume);\n\n        if (p.calibration_pixel_size !== undefined)\n          this.calibration_pixel_size = Number(p.calibration_pixel_size);\n\n        // NOTE: calibration_sensor_width and height removed from watcher \n        // to prevent overwriting constant values (4056/3040)\n\n        if (p.acq_flowcell_thickness !== undefined)\n          this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n\n        if (p.acq_start_timestamp !== undefined && p.acq_start_timestamp !== null) {\n          this.acq_start_timestamp = Number(p.acq_start_timestamp);\n        }\n\n        if (p.status && /Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status))\n          this.acq_status = \"on\";\n\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          const s = String(p.status).toLowerCase();\n\n          if (!/Image\\s+\\d+\\s*\\/\\s*\\d+/i.test(p.status)) {\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\"))\n              this.acq_status = \"on\";\n          }\n\n          if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\"))\n            this.acq_status = \"off\";\n\n          this.extractProgressFromMessage();\n        }\n\n        if (topic === \"status/imager\" && p.status === \"Done\") {\n          this.incrementAcqId();\n          this.resetProgress();\n        }\n        \n        if (topic === \"status/imager\" && p.status === \"Configuration update error: Chosen id are already in use!\") {\n        this.incrementAcqId();\n        this.resetProgress();\n        }\n\n        this.autoCalculateVolumes();\n      },\n      deep: true,\n    },\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    formatDuration(mins) {\n      const totalSeconds = Math.max(0, Math.round(mins * 60));\n      const h = String(Math.floor(totalSeconds / 3600)).padStart(2, \"0\");\n      const m = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, \"0\");\n      const s = String(totalSeconds % 60).padStart(2, \"0\");\n      return `${h}:${m}:${s}`;\n    },\n\n    resetProgress() {\n      this.progression = 0;\n      this.duration_left = 0;\n      this.lastUpdateTime = Date.now();\n    },\n\n    incrementAcqId() {\n      const next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\n      this.sendUpdate();\n    },\n\n    autoCalculateVolumes() {\n      // Logic adjusted to ensure constants are used even if pixel size is 0 initially\n      const w_px = this.calibration_sensor_width;\n      const h_px = this.calibration_sensor_height;\n      \n      if (w_px > 0 && h_px > 0 && this.calibration_pixel_size > 0 && this.acq_flowcell_thickness > 0) {\n        \n        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        const t = this.acq_flowcell_thickness;\n\n        this.frame_volume_um3 = w_um * h_um * t;\n        const frame_ml = this.frame_volume_um3 / 1e12;\n        this.acq_imaged_volume = frame_ml * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3 = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      const interimage_total_ml = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n      this.acq_pumped_volume = this.acq_imaged_volume + interimage_total_ml;\n\n      this.updateProgress();\n      this.sendUpdate();\n    },\n\n    extractProgressFromMessage() {\n      const s = this.acq_status_message || \"\";\n      const match = s.match(/Image\\s+(\\d+)\\s*\\/\\s*(\\d+)/i);\n      if (!match) return;\n\n      const current = Number(match[1]);\n      const total = Number(match[2]);\n      this.progression = Math.min(100, (current / total) * 100);\n\n      if (!this.acq_start_timestamp) return;\n\n      const now = Date.now();\n      const elapsedSec = (now - this.acq_start_timestamp) / 1000;\n      if (elapsedSec <= 0 || current === 0) return;\n\n      const avgPerFrameSec = elapsedSec / current;\n      this.duration_left = ((total - current) * avgPerFrameSec) / 60;\n    },\n\n    updateProgress() {\n      if (this.acq_status === \"on\" && this.acq_nb_frame > 0) {\n        const elapsed = (Date.now() - (this.lastUpdateTime || Date.now())) / 1000;\n        if (elapsed > 0) {\n          this.progression = Math.min(100, this.progression + (elapsed / this.acq_nb_frame) * 100);\n          this.duration_left = ((100 - this.progression) / 100) * (this.acq_nb_frame / 60);\n        }\n        this.lastUpdateTime = Date.now();\n      }\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"on\") {\n        this.resetProgress();\n        this.acq_start_timestamp = Date.now();\n      }\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n      }\n\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"imager/image\",\n          payload: { status: value }\n        });\n      }\n\n      this.sendUpdate();\n    },\n\n    showVolumeImagedHint() {\n      const area = this.sensor_width_um * this.sensor_height_um;\n      const pSize = this.calibration_pixel_size || 0;\n\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\">\n          <strong>Volume Imaged</strong> is the fluid volume captured by the optics.\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <ul class=\"ml-4\">\n          <li class=\"mb-1\">\n            <strong>Sensor Width:</strong><br/>\n            ${this.calibration_sensor_width} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_width_um)} µm</strong>\n          </li>\n          <li class=\"mb-1\">\n            <strong>Sensor Height:</strong><br/>\n            ${this.calibration_sensor_height} px × ${pSize} µm/px = \n            <strong>${Math.round(this.sensor_height_um)} µm</strong>\n          </li>\n          <li>\n            <strong>Flowcell thickness:</strong>\n            ${Math.round(this.acq_flowcell_thickness)} µm\n          </li>\n        </ul>\n\n        <p class=\"mt-4 mb-2\">\n          <strong>Step-by-step calculation:</strong>\n        </p>\n\n        <ol class=\"ml-4\">\n          <li>\n            Area = ${Math.round(this.sensor_width_um)} × ${Math.round(this.sensor_height_um)} =\n            ${Math.round(area)} µm²\n          </li>\n          <li>\n            Vol./img = Area × Thickness =\n            ${Math.round(area * this.acq_flowcell_thickness)} µm³\n          </li>\n          <li>\n            Convert → mL: ${this.fmt(this.frame_volume_ml)} mL/img\n          </li>\n          <li>\n            Total = ${this.acq_nb_frame} images × ${this.fmt(this.frame_volume_ml)} =\n            <strong>${this.fmt(this.acq_imaged_volume)} mL</strong>\n          </li>\n        </ol>\n      </div>`;\n\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const inter_ml = (this.acq_nb_frame * this.acq_interframe_volume) / 1000;\n\n      const html = `\n        <p><b>Total Volume Displaced</b> includes both the imaged volume and the extra fluid moved between images.</p>\n        <hr>\n        <ul>\n          <li><b>Interimage displacement:</b> ${this.acq_nb_frame} × ${this.fmt(this.acq_interframe_volume)} µL = ${this.fmt(inter_ml)} mL</li>\n          <li><b>Imaged volume:</b> ${this.fmt(this.acq_imaged_volume)} mL</li>\n        </ul>\n        <p><b>Total:</b> ${this.fmt(this.acq_imaged_volume)} + ${this.fmt(inter_ml)} = \n        <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>\n      `;\n\n      this.openHint(\"Total Volume Displaced\", html);\n    },\n\n    openHint(title, text) {\n      this.hintDialog = true;\n      this.hintTitle = title;\n      this.hintText = text;\n    },\n\n    sendUpdate(extra = {}) {\n      if (typeof this.send !== \"function\") return;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          acq_id: `A_${this.acq_id}`,\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_imaged_volume: Number(this.acq_imaged_volume.toFixed(2)),\n          acq_pumped_volume: Number(this.acq_pumped_volume.toFixed(2)),\n          acq_comment: this.acq_comment,\n          progression: this.progression,\n          duration_left: this.duration_left,\n          status: this.acq_status_message,\n          \n          calibration_pixel_size: this.calibration_pixel_size,\n          // Sending constants back to confirm configuration\n          calibration_sensor_width: this.calibration_sensor_width,\n          calibration_sensor_height: this.calibration_sensor_height,\n          \n          acq_flowcell_thickness: this.acq_flowcell_thickness,\n          acq_start_timestamp: this.acq_start_timestamp,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .v-card-text {\n    padding: 0 !important;\n  }\n\n  .v-card {\n    border: none;\n  }\n\n  .v-container {\n    background: #eef3ff;\n  }\n  .v-expansion-panel-text {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  }\n\n  .v-expansion-panel-text {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n  }\n</style>",
         "storeOutMessages": true,
         "passthru": true,
         "resendOnRefresh": true,

From 698f8a2fe3007b225a5cb176db81718cbe7f8a26 Mon Sep 17 00:00:00 2001
From: Sonny Piers <sonny@fairscope.com>
Date: Mon, 2 Feb 2026 16:50:29 +0000
Subject: [PATCH 35/36] update

---
 node-red/projects/dashboard/flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/node-red/projects/dashboard/flows.json b/node-red/projects/dashboard/flows.json
index fc4feefab..a1a57414b 100644
--- a/node-red/projects/dashboard/flows.json
+++ b/node-red/projects/dashboard/flows.json
@@ -2183,8 +2183,8 @@
         "initialize": "",
         "finalize": "",
         "libs": [],
-        "x": 650,
-        "y": 180,
+        "x": 710,
+        "y": 140,
         "wires": [
             []
         ]

From dbf0ce114f8115df42f3a1eed5ee82ed9aee350c Mon Sep 17 00:00:00 2001
From: Adam <aglarson@gmail.com>
Date: Mon, 2 Feb 2026 15:31:46 -0800
Subject: [PATCH 36/36] feat: live segmentation with acquisition
 synchronization fixes

Add real-time segmentation preview during image acquisition with robust synchronization to prevent race conditions and interference.

Features:
- Live segmentation with blur metrics and object detection preview
- Real-time feedback during acquisition

Fixes:
- Prevent retained MQTT "Done" messages from skipping pump cycles
- Tag acquisition pump commands with from_acquisition flag
- Acquisition lock prevents UI pump controls from interfering
- fsync ensures file is written before announcing via MQTT
- File stability check before reading captured images
---
 controller/imager/main.py                |  16 +-
 controller/imager/stopflow.py            |   5 +-
 controller/pump/main.py                  |  23 +
 segmenter/planktoscope/segmenter/live.py | 738 +++++++++++++++++++++++
 4 files changed, 780 insertions(+), 2 deletions(-)
 create mode 100644 segmenter/planktoscope/segmenter/live.py

diff --git a/controller/imager/main.py b/controller/imager/main.py
index f69df8430..eae1932c3 100644
--- a/controller/imager/main.py
+++ b/controller/imager/main.py
@@ -382,6 +382,7 @@ def __init__(self) -> None:
         self._stop_receiving_mqtt = threading.Event()  # close() was called
         self._done = threading.Event()  # run_discrete() finished or stop() was called
         self._discrete_run = threading.Lock()  # mutex on starting the pump
+        self._waiting_for_pump = False  # FIX: Only accept Done after pump command sent
 
     def open(self) -> None:
         """Start the pump MQTT client.
@@ -412,7 +413,17 @@ def _receive_messages(self) -> None:
                 self._mqtt.read_message()
                 continue
 
+            # FIX: Only process Done if we are actually waiting for pump to finish
+            # This prevents retained/stale Done messages from triggering early return
+            if not self._waiting_for_pump:
+                loguru.logger.debug(
+                    f"Ignoring pump Done (not waiting for pump): {self._mqtt.msg['payload']}"
+                )
+                self._mqtt.read_message()
+                continue
+
             loguru.logger.debug(f"The pump has stopped: {self._mqtt.msg['payload']}")
+            self._waiting_for_pump = False  # FIX: Clear waiting flag
             self._mqtt.client.unsubscribe("status/pump")
             self._mqtt.read_message()
             self._done.set()
@@ -436,6 +447,7 @@ def run_discrete(self, settings: stopflow.DiscretePumpSettings) -> None:
         # We ignore the pylint error here because the lock can only be released from a different
         # thread (the thread which calls the `handle_status_update()` method):
         self._discrete_run.acquire()  # pylint: disable=consider-using-with
+        self._waiting_for_pump = False  # FIX: Not waiting yet (ignore retained messages)
         self._done.clear()
         self._mqtt.client.subscribe("status/pump")
         self._mqtt.client.publish(
@@ -446,9 +458,11 @@ def run_discrete(self, settings: stopflow.DiscretePumpSettings) -> None:
                     "direction": settings.direction.value,
                     "flowrate": settings.flowrate,
                     "volume": settings.volume,
+                    "from_acquisition": True,  # FIX: Tag as acquisition command
                 }
             ),
         )
+        self._waiting_for_pump = True  # FIX: NOW we're waiting for pump Done
         self._done.wait()
 
     def stop(self) -> None:
@@ -457,7 +471,7 @@ def stop(self) -> None:
             raise RuntimeError("MQTT client was not initialized yet!")
 
         self._mqtt.client.subscribe("status/pump")
-        self._mqtt.client.publish("actuator/pump", '{"action": "stop"}')
+        self._mqtt.client.publish("actuator/pump", '{"action": "stop", "from_acquisition": true}')
 
     def close(self) -> None:
         """Close the pump MQTT client, if it's currently open.
diff --git a/controller/imager/stopflow.py b/controller/imager/stopflow.py
index c64b48c1c..a11e8ae14 100644
--- a/controller/imager/stopflow.py
+++ b/controller/imager/stopflow.py
@@ -133,7 +133,10 @@ def run_step(self) -> typing.Optional[tuple[int, str]]:
                 + f"{capture_path}...",
             )
             self._camera.capture_file(capture_path)
-            os.sync()
+            # FIX: Use fsync on specific file to ensure write completes before MQTT publish
+            # os.sync() is system-wide and async - doesn't guarantee this file is written
+            with open(capture_path, "rb") as f:
+                os.fsync(f.fileno())
             # Note(ethanjli): updating the integrity file is the responsibility of the code which
             # calls this `run_step()` method.
 
diff --git a/controller/pump/main.py b/controller/pump/main.py
index 68b27806c..448c1f82f 100644
--- a/controller/pump/main.py
+++ b/controller/pump/main.py
@@ -21,6 +21,8 @@
 pump_max_speed = 50
 
 pump_started = False
+# FIX: Track acquisition state to prevent UI commands from interrupting acquisition
+acquisition_in_progress = False
 
 pump_stepper = Motor(pin=23, spi_bus=0, spi_device=0)
 pump_stepper.acceleration = 2000
@@ -52,6 +54,7 @@ async def start() -> None:
     async with client, task_group:
         _ = await asyncio.gather(
             client.subscribe("actuator/pump"),
+            client.subscribe("status/imager"),  # FIX: Track acquisition state
             # publish_status(),
         )
         async for message in client.messages:
@@ -59,12 +62,32 @@ async def start() -> None:
 
 
 async def handle_message(message) -> None:
+    global acquisition_in_progress
+
+    # FIX: Handle imager status messages to track acquisition state
+    if message.topic.matches("status/imager"):
+        payload = json.loads(message.payload.decode("utf-8"))
+        status = payload.get("status", "")
+        if status == "Started":
+            print("Acquisition started - locking pump for acquisition commands only")
+            acquisition_in_progress = True
+        elif status in ("Done", "Interrupted"):
+            print("Acquisition ended - unlocking pump for manual control")
+            acquisition_in_progress = False
+        return
+
     if not message.topic.matches("actuator/pump"):
         return
 
     payload = json.loads(message.payload.decode("utf-8"))
     pprint(payload)
 
+    # FIX: During acquisition, only accept commands tagged with from_acquisition
+    is_from_acquisition = payload.get("from_acquisition", False)
+    if acquisition_in_progress and not is_from_acquisition:
+        print(f"Ignoring pump command during acquisition (use from_acquisition flag): {payload}")
+        return
+
     action = payload.get("action")
     if action is not None:
         await handle_action(action, payload)
diff --git a/segmenter/planktoscope/segmenter/live.py b/segmenter/planktoscope/segmenter/live.py
new file mode 100644
index 000000000..062835ddb
--- /dev/null
+++ b/segmenter/planktoscope/segmenter/live.py
@@ -0,0 +1,738 @@
+# Copyright (C) 2021 Romain Bazile
+#
+# This file is part of the PlanktoScope software.
+#
+# PlanktoScope is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# PlanktoScope is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with PlanktoScope.  If not, see <http://www.gnu.org/licenses/>.
+
+"""Live segmentation module for acquisition overlay analysis.
+
+This module provides real-time segmentation during acquisition. When enabled,
+it listens for image captures from the imager and segments each frame as it
+is captured, publishing results for overlay display.
+
+Features:
+- Real-time segmentation overlay for preview
+- Saves object crops to /home/pi/data/objects for visualization
+- Writes EcoTaxa-compatible TSV incrementally
+- Publishes MQTT updates for live dashboard refresh
+"""
+
+import base64
+import io
+import json
+import math
+import multiprocessing
+import os
+import time
+from datetime import datetime
+from pathlib import Path
+
+import cv2
+import numpy as np
+import PIL.Image
+import skimage.measure
+from loguru import logger
+
+import planktoscope.mqtt
+import planktoscope.segmenter.operations
+import planktoscope.segmenter.encoder
+
+logger.info("planktoscope.segmenter.live is loaded")
+
+# Hardware config path (same as used by controller)
+HARDWARE_CONFIG_PATH = "/home/pi/PlanktoScope/hardware.json"
+
+# Paths for visualization output
+IMG_BASE = "/home/pi/data/img"
+OBJECTS_BASE = "/home/pi/data/objects"
+LIVE_STATS_FILE = "/tmp/live_seg_stats.json"
+
+# EcoTaxa TSV column headers
+ECOTAXA_COLUMNS = [
+    "object_id", "object_date", "object_time",
+    "object_x", "object_y", "object_width", "object_height",
+    "object_area", "object_perim.", "object_major", "object_minor",
+    "object_circ.", "object_elongation", "object_solidity",
+    "object_equivalent_diameter",
+    "object_MeanHue", "object_MeanSaturation", "object_MeanValue",
+    "object_blur_laplacian",
+    "sample_id", "acq_id", "img_file_name"
+]
+
+
+class LiveSegmenterProcess(multiprocessing.Process):
+    """Live segmentation worker that analyzes frames during acquisition.
+
+    This process listens for image captures from the imager during acquisition
+    and performs real-time segmentation on each captured frame. Results are
+    published via MQTT for overlay display on the frontend.
+    """
+
+    @logger.catch
+    def __init__(self, event, data_path):
+        """Initialize the LiveSegmenter class.
+
+        Args:
+            event (multiprocessing.Event): shutdown event
+            data_path (str): base data path
+        """
+        super(LiveSegmenterProcess, self).__init__(name="live_segmenter")
+
+        logger.info("planktoscope.segmenter.live is initialising")
+
+        self.stop_event = event
+        self.live_client = None
+        self.imager_client = None
+        self.__data_path = data_path
+        self.__enabled = False  # Whether live segmentation overlay is enabled
+        self.__overlay_mode = "bbox"  # bbox, mask, or both
+        self.__min_area = 100  # Minimum area in pixels for detected objects
+        self.__pixel_size_um = self._load_pixel_size()  # Load from hardware config
+        self.__remove_static = False  # Remove objects that appear in same position across frames
+        self.__static_tracker = {}  # Track objects by position: {(cx, cy): frame_count}
+        self.__static_threshold = 2  # FIX: Reduced from 3 to 2 for faster debris detection
+
+        # Visualization state
+        self.__save_crops = True  # Save object crops for visualization gallery
+        self.__current_acq_folder = None
+        self.__object_counter = 0
+        self.__frame_counter = 0
+
+        logger.success("planktoscope.segmenter.live is initialised and ready to go!")
+
+    def _load_pixel_size(self):
+        """Load pixel size from hardware config file.
+
+        Reads process_pixel_fixed from /home/pi/PlanktoScope/hardware.json.
+        This ensures consistency with the calibration value set in the dashboard.
+
+        Returns:
+            float: Pixel size in micrometers per pixel. Defaults to 0.75 if not found.
+        """
+        default_pixel_size = 0.75
+        try:
+            with open(HARDWARE_CONFIG_PATH, "r") as f:
+                config = json.load(f)
+                pixel_size = config.get("process_pixel_fixed", default_pixel_size)
+                logger.info(f"Loaded pixel size from hardware config: {pixel_size} µm/pixel")
+                return float(pixel_size)
+        except FileNotFoundError:
+            logger.warning(
+                f"Hardware config not found at {HARDWARE_CONFIG_PATH}, "
+                f"using default pixel size: {default_pixel_size} µm/pixel"
+            )
+            return default_pixel_size
+        except (json.JSONDecodeError, ValueError) as e:
+            logger.error(
+                f"Error reading hardware config: {e}, "
+                f"using default pixel size: {default_pixel_size} µm/pixel"
+            )
+            return default_pixel_size
+
+    def _get_acquisition_info(self, image_path):
+        """Extract acquisition info from image path.
+
+        Path format: /home/pi/data/img/DATE/SAMPLE_ID/ACQ_ID/image.jpg
+        """
+        try:
+            parts = image_path.split("/")
+            if "img" in parts:
+                idx = parts.index("img")
+                date_folder = parts[idx + 1] if len(parts) > idx + 1 else ""
+                sample_folder = parts[idx + 2] if len(parts) > idx + 2 else ""
+                acq_folder = parts[idx + 3] if len(parts) > idx + 3 else ""
+
+                return {
+                    "date": date_folder,
+                    "sample_id": sample_folder,
+                    "acq_id": acq_folder,
+                    "acq_folder": acq_folder,
+                }
+        except Exception:
+            pass
+
+        return {
+            "date": datetime.now().strftime("%Y-%m-%d"),
+            "sample_id": "unknown",
+            "acq_id": "A_0",
+            "acq_folder": "unknown",
+        }
+
+    def _derive_output_dir(self, image_path):
+        """Get output directory for object crops, mirroring img structure."""
+        abs_path = os.path.abspath(image_path)
+        img_dir = os.path.dirname(abs_path)
+
+        if img_dir.startswith(IMG_BASE):
+            rel_path = os.path.relpath(img_dir, IMG_BASE)
+            return os.path.join(OBJECTS_BASE, rel_path)
+        return os.path.join(img_dir, "objects")
+
+    def _write_tsv_header(self, tsv_path):
+        """Write EcoTaxa TSV header."""
+        try:
+            with open(tsv_path, "w") as f:
+                f.write("\t".join(ECOTAXA_COLUMNS) + "\n")
+                types = ["[t]"] * len(ECOTAXA_COLUMNS)
+                f.write("\t".join(types) + "\n")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to write TSV header: {e}")
+            return False
+
+    def _append_tsv_row(self, tsv_path, row_data):
+        """Append a single row to the TSV file."""
+        try:
+            with open(tsv_path, "a") as f:
+                values = []
+                for col in ECOTAXA_COLUMNS:
+                    val = row_data.get(col, "")
+                    if isinstance(val, float):
+                        values.append(f"{val:.4f}")
+                    else:
+                        values.append(str(val))
+                f.write("\t".join(values) + "\n")
+            return True
+        except Exception as e:
+            logger.error(f"Failed to append TSV row: {e}")
+            return False
+
+    def _extract_object_features(self, img, region, bbox):
+        """Extract morphological features from an object for TSV."""
+        x, y, w, h = bbox
+
+        # Extract ROI
+        roi_img = img[y:y+h, x:x+w]
+
+        # Area and perimeter from region
+        area = int(region.area)
+        perimeter = float(region.perimeter)
+
+        # Major/minor axes
+        major = float(region.major_axis_length) if region.major_axis_length else max(w, h)
+        minor = float(region.minor_axis_length) if region.minor_axis_length else min(w, h)
+
+        # Derived metrics
+        circularity = (4 * math.pi * area / (perimeter ** 2)) if perimeter > 0 else 0
+        elongation = major / minor if minor > 0 else 1.0
+        solidity = float(region.solidity) if region.solidity else 1.0
+        equivalent_diameter = float(region.equivalent_diameter) if region.equivalent_diameter else (4 * area / math.pi) ** 0.5
+
+        # HSV color statistics
+        mean_hue, mean_sat, mean_val = 0, 0, 0
+        try:
+            roi_hsv = cv2.cvtColor(roi_img, cv2.COLOR_BGR2HSV)
+            mean_hue = float(np.mean(roi_hsv[:, :, 0]))
+            mean_sat = float(np.mean(roi_hsv[:, :, 1]))
+            mean_val = float(np.mean(roi_hsv[:, :, 2]))
+        except Exception:
+            pass
+
+        # Blur metric
+        blur_laplacian = planktoscope.segmenter.operations.calculate_blur(roi_img)
+
+        return {
+            "object_x": x + w / 2,
+            "object_y": y + h / 2,
+            "object_width": w,
+            "object_height": h,
+            "object_area": area,
+            "object_perim.": perimeter,
+            "object_major": major,
+            "object_minor": minor,
+            "object_circ.": circularity,
+            "object_elongation": elongation,
+            "object_solidity": solidity,
+            "object_equivalent_diameter": equivalent_diameter,
+            "object_MeanHue": mean_hue,
+            "object_MeanSaturation": mean_sat,
+            "object_MeanValue": mean_val,
+            "object_blur_laplacian": blur_laplacian,
+        }
+
+    def _publish_visualization_update(self, output_dir, total_objects, total_frames):
+        """Publish MQTT update for visualization dashboard refresh."""
+        try:
+            message = {
+                "status": "segmenting",
+                "total_objects": total_objects,
+                "total_images": total_frames,
+                "output_dir": output_dir,
+                "timestamp": time.time(),
+            }
+            self.live_client.client.publish(
+                "status/segmentation",
+                json.dumps(message),
+            )
+        except Exception as e:
+            logger.debug(f"Failed to publish visualization update: {e}")
+
+    def _esd_um_to_min_area(self, esd_um):
+        """Convert ESD in micrometers to minimum area in pixels.
+
+        Args:
+            esd_um (float): Equivalent spherical diameter in micrometers
+
+        Returns:
+            int: Minimum area in pixels
+        """
+        # Convert ESD from micrometers to pixels
+        esd_pixels = esd_um / self.__pixel_size_um
+        # Calculate area of a circle with this diameter
+        area = math.pi * (esd_pixels / 2) ** 2
+        return int(area)
+
+    def _create_simple_mask(self, img):
+        """Create a mask using simple thresholding.
+
+        Args:
+            img (np.array): BGR image
+
+        Returns:
+            np.array: binary mask
+        """
+        mask = planktoscope.segmenter.operations.simple_threshold(img)
+        mask = planktoscope.segmenter.operations.erode(mask)
+        mask = planktoscope.segmenter.operations.dilate(mask)
+        return mask
+
+    def _get_bbox_key(self, bbox):
+        """Get a grid key for a bounding box center for tracking.
+
+        Uses 100px grid cells - large enough to tolerate detection variation
+        in elongated objects while still distinguishing separate small objects.
+
+        Args:
+            bbox: [x, y, w, h] bounding box
+
+        Returns:
+            tuple: (grid_x, grid_y) key
+        """
+        cx = bbox[0] + bbox[2] / 2
+        cy = bbox[1] + bbox[3] / 2
+        grid_size = 100  # FIX: Larger grid (was 60) tolerates detection jitter for stuck objects
+        return (int(cx / grid_size), int(cy / grid_size))
+
+    def _update_static_tracker(self, current_bboxes):
+        """Update the static object tracker with current frame's objects.
+
+        Objects that appear in the same grid cell across multiple frames
+        get their count incremented. Objects not seen are removed.
+
+        Args:
+            current_bboxes: list of [x, y, w, h] bounding boxes from current frame
+        """
+        # Get all current grid positions
+        current_keys = set()
+        for bbox in current_bboxes:
+            key = self._get_bbox_key(bbox)
+            current_keys.add(key)
+
+        # Update tracker: increment seen, remove unseen
+        new_tracker = {}
+        for key in current_keys:
+            if key in self.__static_tracker:
+                new_tracker[key] = self.__static_tracker[key] + 1
+            else:
+                new_tracker[key] = 1
+
+        self.__static_tracker = new_tracker
+
+    def _is_static_object(self, bbox):
+        """Check if an object has been static for multiple frames.
+
+        Args:
+            bbox: [x, y, w, h] bounding box
+
+        Returns:
+            bool: True if object is static (appeared in same position for N+ frames)
+        """
+        key = self._get_bbox_key(bbox)
+        count = self.__static_tracker.get(key, 0)
+        return count >= self.__static_threshold
+
+    def _encode_mask_png(self, mask):
+        """Encode a binary mask as base64 PNG with alpha transparency.
+
+        Args:
+            mask (np.array): binary mask
+
+        Returns:
+            str: base64 encoded PNG string with alpha channel
+        """
+        # Convert binary mask to RGBA with alpha transparency
+        # Object pixels = white with full opacity, background = transparent
+        height, width = mask.shape
+        rgba = np.zeros((height, width, 4), dtype=np.uint8)
+        rgba[mask, :3] = 255  # White RGB for object pixels
+        rgba[mask, 3] = 255   # Full opacity for object pixels
+        # Background pixels remain (0,0,0,0) = transparent
+
+        img = PIL.Image.fromarray(rgba, mode="RGBA")
+        buffer = io.BytesIO()
+        img.save(buffer, format="PNG")
+        return base64.b64encode(buffer.getvalue()).decode("utf-8")
+
+    def segment_single_frame(self, img):
+        """Segment a single frame and return object data.
+
+        Args:
+            img (np.array): BGR image
+
+        Returns:
+            dict: segmentation results with objects, frame_blur, and image dimensions
+        """
+        # Get image dimensions for frontend scaling
+        img_height, img_width = img.shape[:2]
+
+        # Calculate frame-level blur
+        frame_blur = planktoscope.segmenter.operations.calculate_blur(img)
+
+        # Calculate regional blur for heatmap visualization (4x4 grid)
+        blur_grid = planktoscope.segmenter.operations.calculate_regional_blur(img, 4, 4)
+
+        # Create mask
+        mask = self._create_simple_mask(img)
+
+        # Find objects
+        labels, nlabels = skimage.measure.label(mask, return_num=True)
+        regionprops = skimage.measure.regionprops(labels)
+
+        # Filter by minimum area and sort by area (largest first)
+        regionprops_filtered = [
+            region for region in regionprops if region.area >= self.__min_area
+        ]
+        regionprops_filtered.sort(key=lambda r: r.area, reverse=True)
+
+        # Build list of all bboxes and regions for this frame
+        all_bboxes = []
+        bbox_region_pairs = []
+        for region in regionprops_filtered:
+            bbox = [
+                int(region.bbox[1]),  # x
+                int(region.bbox[0]),  # y
+                int(region.bbox[3] - region.bbox[1]),  # width
+                int(region.bbox[2] - region.bbox[0]),  # height
+            ]
+            all_bboxes.append(bbox)
+            bbox_region_pairs.append((bbox, region))
+
+        # Update static tracker with all detected objects BEFORE filtering
+        if self.__remove_static:
+            self._update_static_tracker(all_bboxes)
+
+        # Build output objects, filtering static ones if enabled
+        objects = []
+        max_masks = 100
+
+        for bbox, region in bbox_region_pairs:
+            # Skip static objects (only if they've been seen for N+ consecutive frames)
+            if self.__remove_static and self._is_static_object(bbox):
+                continue
+
+            obj_data = {
+                "bbox": bbox,
+            }
+
+            # Include mask for objects
+            if self.__overlay_mode in ("mask", "both") and len(objects) < max_masks:
+                obj_data["mask"] = self._encode_mask_png(region.filled_image)
+
+            objects.append(obj_data)
+
+            # Limit total objects for performance
+            if len(objects) >= 300:
+                break
+
+        return {
+            "objects": objects,
+            "frame_blur": float(frame_blur),
+            "blur_grid": blur_grid,  # 4x4 regional blur heatmap
+            "object_count": len(objects),  # Count after static filtering
+            "image_width": img_width,
+            "image_height": img_height,
+        }
+
+    def _process_captured_image(self, img_path):
+        """Process a captured image from acquisition.
+
+        Segments the image, saves object crops for visualization,
+        writes TSV data, and publishes results via MQTT.
+
+        Args:
+            img_path (str): path to the captured image file
+        """
+        if not self.__enabled:
+            return
+
+        try:
+            if not os.path.exists(img_path):
+                logger.warning(f"Image file not found: {img_path}")
+                return
+
+            # FIX: Wait for file to be fully written before reading
+            # The imager uses fsync, but we add a stability check as defense-in-depth
+            prev_size = -1
+            for _ in range(10):  # Max 500ms wait (10 * 50ms)
+                try:
+                    curr_size = os.path.getsize(img_path)
+                    if curr_size > 0 and curr_size == prev_size:
+                        break  # File size stable, safe to read
+                    prev_size = curr_size
+                    time.sleep(0.05)
+                except OSError:
+                    time.sleep(0.05)
+
+            # Load the captured image
+            frame = cv2.imread(img_path)
+            if frame is None:
+                logger.warning(f"Failed to load image: {img_path}")
+                return
+
+            logger.debug(f"Processing captured image: {img_path}")
+
+            # Get acquisition info
+            acq_info = self._get_acquisition_info(img_path)
+            acq_folder = acq_info.get("acq_folder", "")
+
+            # Reset counters if new acquisition
+            if acq_folder != self.__current_acq_folder:
+                self.__current_acq_folder = acq_folder
+                self.__object_counter = 0
+                self.__frame_counter = 0
+                self.__static_tracker = {}
+
+            self.__frame_counter += 1
+
+            # Segment the frame (returns objects with bbox, mask data)
+            result = self.segment_single_frame(frame)
+
+            # Setup output directory for crops
+            output_dir = self._derive_output_dir(img_path)
+            if self.__save_crops:
+                Path(output_dir).mkdir(parents=True, exist_ok=True)
+
+            # Setup TSV file
+            tsv_path = os.path.join(output_dir, f"ecotaxa_{acq_info['acq_id']}.tsv")
+            if self.__save_crops and not os.path.exists(tsv_path):
+                self._write_tsv_header(tsv_path)
+
+            # Get base name for crops
+            base_name = os.path.splitext(os.path.basename(img_path))[0]
+            img_date = acq_info.get("date", "")
+            img_time = "00:00:00"
+            if "_" in base_name:
+                time_part = base_name.split("_")[1] if len(base_name.split("_")) > 1 else ""
+                if time_part:
+                    img_time = time_part.replace("-", ":")[:8]
+
+            # Re-segment to get regions for feature extraction and crop saving
+            mask = self._create_simple_mask(frame)
+            labels, _ = skimage.measure.label(mask, return_num=True)
+            regionprops = skimage.measure.regionprops(labels)
+
+            # Process each object in the result
+            saved_crops = 0
+            for obj in result.get("objects", []):
+                bbox = obj.get("bbox")
+                if not bbox:
+                    continue
+
+                x, y, w, h = bbox
+
+                # Find matching region for this bbox
+                matching_region = None
+                for region in regionprops:
+                    rx = int(region.bbox[1])
+                    ry = int(region.bbox[0])
+                    if abs(rx - x) < 5 and abs(ry - y) < 5:
+                        matching_region = region
+                        break
+
+                if not matching_region:
+                    continue
+
+                self.__object_counter += 1
+                obj_id = self.__object_counter
+
+                # Save crop with padding
+                pad = max(5, int(max(w, h) * 0.1))
+                x1 = max(0, x - pad)
+                y1 = max(0, y - pad)
+                x2 = min(frame.shape[1], x + w + pad)
+                y2 = min(frame.shape[0], y + h + pad)
+                crop = frame[y1:y2, x1:x2]
+
+                if self.__save_crops and crop.size > 0:
+                    crop_filename = f"{base_name}_{obj_id}.jpg"
+                    crop_path = os.path.join(output_dir, crop_filename)
+                    cv2.imwrite(crop_path, crop)
+                    saved_crops += 1
+
+                    # Extract features and write TSV row
+                    features = self._extract_object_features(frame, matching_region, bbox)
+                    row_data = {
+                        "object_id": f"{acq_info['sample_id']}_{acq_info['acq_id']}_{obj_id}",
+                        "object_date": img_date,
+                        "object_time": img_time,
+                        "sample_id": acq_info["sample_id"],
+                        "acq_id": acq_info["acq_id"],
+                        "img_file_name": crop_filename,
+                        **features,
+                    }
+                    self._append_tsv_row(tsv_path, row_data)
+
+            # Encode the image as base64 JPEG for frontend display
+            _, jpeg_buffer = cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 80])
+            result["image"] = base64.b64encode(jpeg_buffer).decode("utf-8")
+
+            # Publish results for overlay display
+            self.live_client.client.publish(
+                "status/segmenter/live",
+                json.dumps(result, cls=planktoscope.segmenter.encoder.NpEncoder),
+            )
+
+            # Publish visualization update
+            if self.__save_crops:
+                self._publish_visualization_update(
+                    output_dir,
+                    self.__object_counter,
+                    self.__frame_counter
+                )
+
+            logger.debug(f"Published segmentation: {result['object_count']} objects, {saved_crops} crops saved")
+
+        except Exception as e:
+            logger.error(f"Error processing captured image: {e}")
+            import traceback
+            logger.error(traceback.format_exc())
+
+    def _check_imager_messages(self):
+        """Check for new messages from the imager.
+
+        Polls the imager MQTT client for progress events during acquisition
+        and triggers segmentation when live segmentation is enabled.
+        """
+        if not self.imager_client.new_message_received():
+            return
+
+        try:
+            message = self.imager_client.msg["payload"]
+            logger.debug(f"Imager message received: {message}")
+            self.imager_client.read_message()
+
+            # Check if this is a progress event during acquisition
+            # The imager publishes {"type": "progress", "path": "/path/to/image.jpeg", ...}
+            if message.get("type") == "progress" and "path" in message:
+                self._process_captured_image(message["path"])
+
+        except Exception as e:
+            logger.error(f"Error processing imager message: {e}")
+
+    @logger.catch
+    def treat_message(self):
+        """Process incoming MQTT messages for live segmentation control."""
+        if self.live_client.new_message_received():
+            logger.info("Live segmenter received a new message")
+            last_message = self.live_client.msg["payload"]
+            logger.debug(last_message)
+            self.live_client.read_message()
+
+            if "action" in last_message:
+                if last_message["action"] == "start":
+                    logger.info("Enabling live segmentation overlay")
+                    self.__overlay_mode = last_message.get("overlay", "bbox")
+
+                    # Handle min_esd_um (micrometers) or fall back to min_area (pixels)
+                    if "min_esd_um" in last_message:
+                        min_esd = last_message.get("min_esd_um", 20)
+                        self.__min_area = self._esd_um_to_min_area(min_esd)
+                        logger.info(f"Minimum ESD: {min_esd} µm = {self.__min_area} pixels²")
+                    else:
+                        self.__min_area = last_message.get("min_area", 100)
+
+                    # Handle remove_static option (subtract objects in same position across frames)
+                    self.__remove_static = last_message.get("remove_static", True)
+                    self.__static_tracker = {}  # Reset tracker on start
+                    if self.__remove_static:
+                        logger.info("Static object removal enabled (filtering after 3+ consecutive frames)")
+
+                    self.__enabled = True
+
+                    # Publish status
+                    self.live_client.client.publish(
+                        "status/segmenter/live",
+                        json.dumps({
+                            "status": "Enabled",
+                            "overlay": self.__overlay_mode,
+                            "min_area": self.__min_area,
+                            "remove_static": self.__remove_static
+                        }),
+                    )
+
+                elif last_message["action"] == "stop":
+                    logger.info("Disabling live segmentation overlay")
+                    self.__enabled = False
+                    self.__static_tracker = {}  # Clear static tracker
+
+                    # Clear the overlay by publishing empty objects
+                    self.live_client.client.publish(
+                        "status/segmenter/live",
+                        json.dumps({
+                            "status": "Disabled",
+                            "objects": [],
+                            "object_count": 0
+                        }),
+                    )
+
+    @logger.catch
+    def run(self):
+        """Main process loop."""
+        logger.info(
+            f"The live segmenter control thread has been started in process {os.getpid()}"
+        )
+
+        # MQTT Client for receiving commands
+        self.live_client = planktoscope.mqtt.MQTT_Client(
+            topic="segmenter/live", name="live_segmenter_client"
+        )
+
+        # MQTT Client for imager status - listen for capture events
+        self.imager_client = planktoscope.mqtt.MQTT_Client(
+            topic="status/imager", name="live_imager_client"
+        )
+
+        # Publish ready status
+        self.live_client.client.publish(
+            "status/segmenter/live", '{"status":"Ready"}'
+        )
+
+        logger.success("Live Segmenter is READY!")
+
+        # Main loop - process control messages and imager events
+        while not self.stop_event.is_set():
+            self.treat_message()
+            self._check_imager_messages()
+            time.sleep(0.05)
+
+        logger.info("Shutting down the live segmenter process")
+        self.live_client.client.publish("status/segmenter/live", '{"status":"Dead"}')
+        self.live_client.shutdown()
+        self.imager_client.shutdown()
+        logger.success("Live segmenter process shut down! See you!")
+
+
+# This guy is called if this script is launched directly
+if __name__ == "__main__":
+    pass