diff --git a/flows.json b/flows.json
index 3385e87..c1b9e90 100644
--- a/flows.json
+++ b/flows.json
@@ -1,7823 +1,7944 @@
 [
-  {
-    "id": "b2bf18a0f40a5d72",
-    "type": "tab",
-    "label": "Setup",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "f90406ba2da5932f",
-    "type": "tab",
-    "label": "Home",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "6d6a011bf1913637",
-    "type": "tab",
-    "label": "Preview",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "f7ff9c0e54da4b8e",
-    "type": "tab",
-    "label": "Metadata",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "71ede8b7dd88d90e",
-    "type": "tab",
-    "label": "Acquisition",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "524b7620431210e8",
-    "type": "tab",
-    "label": "Segmentation",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "4fdbd7bacb797c5a",
-    "type": "tab",
-    "label": "Visualization",
-    "disabled": true,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "a7825c4c81ad20a0",
-    "type": "tab",
-    "label": "Visualization",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "6fac9fa6a894b293",
-    "type": "tab",
-    "label": "Calibration",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "d70bc885c4bf46d4",
-    "type": "tab",
-    "label": "Calibration - Saturation Level",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "9dfa8db7ce31208f",
-    "type": "tab",
-    "label": "Calibration - Lightness",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "e597cdc71d5a9d33",
-    "type": "tab",
-    "label": "Calibration - Pixel size",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "b8e6b9dc69aa3f56",
-    "type": "tab",
-    "label": "Calibration - Pump",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "f8d7305edb3dce2c",
-    "type": "tab",
-    "label": "[TEST] EcoTaxa",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "e6d820ba0f4f184e",
-    "type": "tab",
-    "label": "[TEST] PlanktoScope nodes",
-    "disabled": false,
-    "info": "",
-    "env": []
-  },
-  {
-    "id": "b7861ce703215a01",
-    "type": "subflow",
-    "name": "Load hardware config",
-    "info": "",
-    "category": "",
-    "in": [
-      {
-        "x": 40,
-        "y": 40,
-        "wires": [
-          {
-            "id": "0f16258953fae292"
-          }
-        ]
-      }
-    ],
-    "out": [
-      {
-        "x": 900,
-        "y": 40,
-        "wires": [
-          {
-            "id": "d0fbcd200cd09981",
-            "port": 0
-          }
-        ]
-      }
-    ],
-    "env": [],
-    "meta": {},
-    "color": "#DDAA99"
-  },
-  {
-    "id": "63c85b96537b7355",
-    "type": "subflow",
-    "name": "Config",
-    "info": "An input to this subflow will get the configuration to be saved to disk.\n\nOn startup, this node outputs the loaded configuration",
-    "category": "",
-    "in": [
-      {
-        "x": 220,
-        "y": 160,
-        "wires": [
-          {
-            "id": "5248e5e225d854d1"
-          }
-        ]
-      }
-    ],
-    "out": [
-      {
-        "x": 1040,
-        "y": 60,
-        "wires": [
-          {
-            "id": "f1c0a882a9e3d927",
-            "port": 0
-          }
-        ]
-      }
-    ],
-    "env": [],
-    "color": "#DDAA99"
-  },
-  {
-    "id": "c398718e1269dc31",
-    "type": "group",
-    "z": "d70bc885c4bf46d4",
-    "name": "Step Bar",
-    "style": {
-      "label": true
-    },
-    "nodes": [
-      "f5ecfcfd42bb61f0",
-      "c1c7cc675878b0f3"
-    ],
-    "x": 994,
-    "y": 19,
-    "w": 372,
-    "h": 82
-  },
-  {
-    "id": "f2d9c0f9aabc0a63",
-    "type": "group",
-    "z": "e597cdc71d5a9d33",
-    "name": "Step Bar",
-    "style": {
-      "label": true
-    },
-    "nodes": [
-      "9d60b1bdff1a8058",
-      "48d61ea72d468010"
-    ],
-    "x": 994,
-    "y": 19,
-    "w": 372,
-    "h": 82
-  },
-  {
-    "id": "a75dd1f78f8f991a",
-    "type": "group",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "Step Bar",
-    "style": {
-      "label": true
-    },
-    "nodes": [
-      "07e989594965ab7d",
-      "5e94860de36e0a1c"
-    ],
-    "x": 994,
-    "y": 19,
-    "w": 372,
-    "h": 82
-  },
-  {
-    "id": "3f734d83a7327043",
-    "type": "group",
-    "z": "9dfa8db7ce31208f",
-    "name": "Step Bar",
-    "style": {
-      "label": true
-    },
-    "nodes": [
-      "5331fa94d1b90654",
-      "5f823fb3b1c49c65"
-    ],
-    "x": 994,
-    "y": 19,
-    "w": 372,
-    "h": 82
-  },
-  {
-    "id": "14cb9ab4b149e2b5",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "9975b01cde700ae1",
-      "b72d81f258ab6ed1",
-      "8773c66a58ecab21",
-      "fe5a0dc78ca52e26",
-      "80b749ee1cbdf98e"
-    ],
-    "x": 14,
-    "y": 19,
-    "w": 752,
-    "h": 202
-  },
-  {
-    "id": "e25bae849bace7c6",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "655adc853a6956f6",
-      "fec9c2aca5437f85",
-      "c63068f9aa421f2c",
-      "5f77688682c97241",
-      "e49db28bb805280e"
-    ],
-    "x": 14,
-    "y": 239,
-    "w": 812,
-    "h": 202
-  },
-  {
-    "id": "034aca701dd2a256",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "4f9158d3ed8eadd3",
-      "287f7112bac18c51",
-      "0820acd0d3b628d4",
-      "327e3da2b7e9e50b",
-      "c80721a372673baf"
-    ],
-    "x": 14,
-    "y": 459,
-    "w": 932,
-    "h": 182
-  },
-  {
-    "id": "e5f0bc40b541e13f",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "ec2b56583e1703f0",
-      "078727b344f7e34a",
-      "3e333d969e41b545"
-    ],
-    "x": 14,
-    "y": 659,
-    "w": 372,
-    "h": 142
-  },
-  {
-    "id": "329d175baf2183b1",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "3058d95dae6eea1f",
-      "355d4990f8958d65",
-      "a6c33b2025837058"
-    ],
-    "x": 14,
-    "y": 819,
-    "w": 372,
-    "h": 142
-  },
-  {
-    "id": "62930a749d014d90",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "528f6ce911af8982",
-      "baac40d3e7a8fcb2",
-      "660f8462d674baea"
-    ],
-    "x": 414,
-    "y": 819,
-    "w": 352,
-    "h": 142
-  },
-  {
-    "id": "039d9046b10d6840",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "f941634f9acf1e65",
-      "8d538b74ac03964b",
-      "3cb007c279dceed0",
-      "05d4bd56d2b42da1",
-      "8972c5887d7de2dc",
-      "8283323ac1aca81a",
-      "13bdc8d028ab9063"
-    ],
-    "x": 934,
-    "y": 39,
-    "w": 352,
-    "h": 262
-  },
-  {
-    "id": "0a51b211ebbb9873",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "d5950445bf78c0c6",
-      "36a787c8463c3fab",
-      "d25760aa70fd1524"
-    ],
-    "x": 994,
-    "y": 499,
-    "w": 412,
-    "h": 142
-  },
-  {
-    "id": "ef4667eb73b18227",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "9203a825fc1c63e4",
-      "110801015a0ec067",
-      "9d2be08e52de0394"
-    ],
-    "x": 994,
-    "y": 659,
-    "w": 412,
-    "h": 142
-  },
-  {
-    "id": "693296edc15d81c2",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "3973105e8c349a38",
-      "b8a021de6b15a728",
-      "e2c7db0aef7f64ef",
-      "d96066c662742119"
-    ],
-    "x": 14,
-    "y": 979,
-    "w": 562,
-    "h": 162
-  },
-  {
-    "id": "68e954becfafbf7b",
-    "type": "group",
-    "z": "e6d820ba0f4f184e",
-    "style": {
-      "stroke": "#999999",
-      "stroke-opacity": "1",
-      "fill": "none",
-      "fill-opacity": "1",
-      "label": true,
-      "label-position": "nw",
-      "color": "#a4a4a4"
-    },
-    "nodes": [
-      "47dce78fa2e5973b",
-      "9f0db647f3595ef9",
-      "e14a82906a749dc5"
-    ],
-    "x": 994,
-    "y": 819,
-    "w": 412,
-    "h": 142
-  },
-  {
-    "id": "e6ae26617c24c3ea",
-    "type": "ui-base",
-    "name": "PlanktoScope Dashboard",
-    "path": "/dashboard",
-    "appIcon": "",
-    "includeClientData": true,
-    "acceptsClientConfig": [
-      "ui-notification",
-      "ui-control"
-    ],
-    "showPathInSidebar": true,
-    "headerContent": "dashboard",
-    "navigationStyle": "none",
-    "titleBarStyle": "fixed",
-    "showReconnectNotification": true,
-    "notificationDisplayTime": "1",
-    "showDisconnectNotification": true,
-    "allowInstall": true
-  },
-  {
-    "id": "8dc3722c.06efa8",
-    "type": "mqtt-broker",
-    "name": "",
-    "broker": "0.0.0.0",
-    "port": "1883",
-    "clientid": "Client_node",
-    "autoConnect": true,
-    "usetls": false,
-    "compatmode": false,
-    "protocolVersion": 4,
-    "keepalive": "60",
-    "cleansession": true,
-    "autoUnsubscribe": true,
-    "birthTopic": "",
-    "birthQos": "0",
-    "birthPayload": "",
-    "closeTopic": "",
-    "closeQos": "0",
-    "closePayload": "",
-    "willTopic": "",
-    "willQos": "0",
-    "willPayload": ""
-  },
-  {
-    "id": "81a80e32347ff991",
-    "type": "ui_base",
-    "theme": {
-      "name": "theme-light",
-      "lightTheme": {
-        "default": "#0094CE",
-        "baseColor": "#5900ce",
-        "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
-        "edited": true,
-        "reset": false
-      },
-      "darkTheme": {
-        "default": "#097479",
-        "baseColor": "#097479",
-        "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
-        "edited": true,
-        "reset": false
-      },
-      "customTheme": {
-        "name": "Untitled Theme 1",
-        "default": "#4B7930",
-        "baseColor": "#4B7930",
-        "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
-      },
-      "themeState": {
-        "base-color": {
-          "default": "#0094CE",
-          "value": "#0094CE",
-          "edited": true
+    {
+        "id": "b2bf18a0f40a5d72",
+        "type": "tab",
+        "label": "Setup",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "f90406ba2da5932f",
+        "type": "tab",
+        "label": "Home",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "6d6a011bf1913637",
+        "type": "tab",
+        "label": "Preview",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "f7ff9c0e54da4b8e",
+        "type": "tab",
+        "label": "Metadata",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "71ede8b7dd88d90e",
+        "type": "tab",
+        "label": "Acquisition",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "524b7620431210e8",
+        "type": "tab",
+        "label": "Segmentation",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "4fdbd7bacb797c5a",
+        "type": "tab",
+        "label": "Visualization",
+        "disabled": true,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "a7825c4c81ad20a0",
+        "type": "tab",
+        "label": "Visualization",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "6fac9fa6a894b293",
+        "type": "tab",
+        "label": "Calibration",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "d70bc885c4bf46d4",
+        "type": "tab",
+        "label": "Calibration - Saturation Level",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "9dfa8db7ce31208f",
+        "type": "tab",
+        "label": "Calibration - Lightness",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "e597cdc71d5a9d33",
+        "type": "tab",
+        "label": "Calibration - Pixel size",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "b8e6b9dc69aa3f56",
+        "type": "tab",
+        "label": "Calibration - Pump",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "f8d7305edb3dce2c",
+        "type": "tab",
+        "label": "[TEST] EcoTaxa",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "e6d820ba0f4f184e",
+        "type": "tab",
+        "label": "[TEST] PlanktoScope nodes",
+        "disabled": false,
+        "info": "",
+        "env": []
+    },
+    {
+        "id": "b7861ce703215a01",
+        "type": "subflow",
+        "name": "Load hardware config",
+        "info": "",
+        "category": "",
+        "in": [
+            {
+                "x": 40,
+                "y": 40,
+                "wires": [
+                    {
+                        "id": "0f16258953fae292"
+                    }
+                ]
+            }
+        ],
+        "out": [
+            {
+                "x": 900,
+                "y": 40,
+                "wires": [
+                    {
+                        "id": "d0fbcd200cd09981",
+                        "port": 0
+                    }
+                ]
+            }
+        ],
+        "env": [],
+        "meta": {},
+        "color": "#DDAA99"
+    },
+    {
+        "id": "63c85b96537b7355",
+        "type": "subflow",
+        "name": "Config",
+        "info": "An input to this subflow will get the configuration to be saved to disk.\n\nOn startup, this node outputs the loaded configuration",
+        "category": "",
+        "in": [
+            {
+                "x": 220,
+                "y": 160,
+                "wires": [
+                    {
+                        "id": "5248e5e225d854d1"
+                    }
+                ]
+            }
+        ],
+        "out": [
+            {
+                "x": 1040,
+                "y": 60,
+                "wires": [
+                    {
+                        "id": "f1c0a882a9e3d927",
+                        "port": 0
+                    }
+                ]
+            }
+        ],
+        "env": [],
+        "color": "#DDAA99"
+    },
+    {
+        "id": "c398718e1269dc31",
+        "type": "group",
+        "z": "d70bc885c4bf46d4",
+        "name": "Step Bar",
+        "style": {
+            "label": true
+        },
+        "nodes": [
+            "f5ecfcfd42bb61f0",
+            "c1c7cc675878b0f3"
+        ],
+        "x": 994,
+        "y": 19,
+        "w": 372,
+        "h": 82
+    },
+    {
+        "id": "f2d9c0f9aabc0a63",
+        "type": "group",
+        "z": "e597cdc71d5a9d33",
+        "name": "Step Bar",
+        "style": {
+            "label": true
+        },
+        "nodes": [
+            "9d60b1bdff1a8058",
+            "48d61ea72d468010"
+        ],
+        "x": 994,
+        "y": 19,
+        "w": 372,
+        "h": 82
+    },
+    {
+        "id": "a75dd1f78f8f991a",
+        "type": "group",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "Step Bar",
+        "style": {
+            "label": true
+        },
+        "nodes": [
+            "07e989594965ab7d",
+            "5e94860de36e0a1c"
+        ],
+        "x": 994,
+        "y": 19,
+        "w": 372,
+        "h": 82
+    },
+    {
+        "id": "3f734d83a7327043",
+        "type": "group",
+        "z": "9dfa8db7ce31208f",
+        "name": "Step Bar",
+        "style": {
+            "label": true
+        },
+        "nodes": [
+            "5331fa94d1b90654",
+            "5f823fb3b1c49c65"
+        ],
+        "x": 994,
+        "y": 19,
+        "w": 372,
+        "h": 82
+    },
+    {
+        "id": "14cb9ab4b149e2b5",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
+        },
+        "nodes": [
+            "9975b01cde700ae1",
+            "b72d81f258ab6ed1",
+            "8773c66a58ecab21",
+            "fe5a0dc78ca52e26",
+            "80b749ee1cbdf98e"
+        ],
+        "x": 14,
+        "y": 19,
+        "w": 752,
+        "h": 202
+    },
+    {
+        "id": "e25bae849bace7c6",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
+        },
+        "nodes": [
+            "655adc853a6956f6",
+            "fec9c2aca5437f85",
+            "c63068f9aa421f2c",
+            "5f77688682c97241",
+            "e49db28bb805280e"
+        ],
+        "x": 14,
+        "y": 239,
+        "w": 812,
+        "h": 202
+    },
+    {
+        "id": "034aca701dd2a256",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
+        },
+        "nodes": [
+            "4f9158d3ed8eadd3",
+            "287f7112bac18c51",
+            "0820acd0d3b628d4",
+            "327e3da2b7e9e50b",
+            "c80721a372673baf"
+        ],
+        "x": 14,
+        "y": 459,
+        "w": 932,
+        "h": 182
+    },
+    {
+        "id": "e5f0bc40b541e13f",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "page-titlebar-backgroundColor": {
-          "value": "#5900ce",
-          "edited": false
+        "nodes": [
+            "ec2b56583e1703f0",
+            "078727b344f7e34a",
+            "3e333d969e41b545"
+        ],
+        "x": 14,
+        "y": 659,
+        "w": 372,
+        "h": 142
+    },
+    {
+        "id": "329d175baf2183b1",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "page-backgroundColor": {
-          "value": "#fafafa",
-          "edited": false
+        "nodes": [
+            "3058d95dae6eea1f",
+            "355d4990f8958d65",
+            "a6c33b2025837058"
+        ],
+        "x": 14,
+        "y": 819,
+        "w": 372,
+        "h": 142
+    },
+    {
+        "id": "62930a749d014d90",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "page-sidebar-backgroundColor": {
-          "value": "#333333",
-          "edited": false
+        "nodes": [
+            "528f6ce911af8982",
+            "baac40d3e7a8fcb2",
+            "660f8462d674baea"
+        ],
+        "x": 414,
+        "y": 819,
+        "w": 352,
+        "h": 142
+    },
+    {
+        "id": "039d9046b10d6840",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "group-textColor": {
-          "value": "#7e1bff",
-          "edited": false
+        "nodes": [
+            "f941634f9acf1e65",
+            "8d538b74ac03964b",
+            "3cb007c279dceed0",
+            "05d4bd56d2b42da1",
+            "8972c5887d7de2dc",
+            "8283323ac1aca81a",
+            "13bdc8d028ab9063"
+        ],
+        "x": 934,
+        "y": 39,
+        "w": 352,
+        "h": 262
+    },
+    {
+        "id": "0a51b211ebbb9873",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "group-borderColor": {
-          "value": "#ffffff",
-          "edited": false
+        "nodes": [
+            "d5950445bf78c0c6",
+            "36a787c8463c3fab",
+            "d25760aa70fd1524"
+        ],
+        "x": 994,
+        "y": 499,
+        "w": 412,
+        "h": 142
+    },
+    {
+        "id": "ef4667eb73b18227",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "group-backgroundColor": {
-          "value": "#ffffff",
-          "edited": false
+        "nodes": [
+            "9203a825fc1c63e4",
+            "110801015a0ec067",
+            "9d2be08e52de0394"
+        ],
+        "x": 994,
+        "y": 659,
+        "w": 412,
+        "h": 142
+    },
+    {
+        "id": "693296edc15d81c2",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "widget-textColor": {
-          "value": "#111111",
-          "edited": false
+        "nodes": [
+            "3973105e8c349a38",
+            "b8a021de6b15a728",
+            "e2c7db0aef7f64ef",
+            "d96066c662742119"
+        ],
+        "x": 14,
+        "y": 979,
+        "w": 562,
+        "h": 162
+    },
+    {
+        "id": "68e954becfafbf7b",
+        "type": "group",
+        "z": "e6d820ba0f4f184e",
+        "style": {
+            "stroke": "#999999",
+            "stroke-opacity": "1",
+            "fill": "none",
+            "fill-opacity": "1",
+            "label": true,
+            "label-position": "nw",
+            "color": "#a4a4a4"
         },
-        "widget-backgroundColor": {
-          "value": "#5900ce",
-          "edited": false
+        "nodes": [
+            "47dce78fa2e5973b",
+            "9f0db647f3595ef9",
+            "e14a82906a749dc5"
+        ],
+        "x": 994,
+        "y": 819,
+        "w": 412,
+        "h": 142
+    },
+    {
+        "id": "e6ae26617c24c3ea",
+        "type": "ui-base",
+        "name": "PlanktoScope Dashboard",
+        "path": "/dashboard",
+        "appIcon": "",
+        "includeClientData": true,
+        "acceptsClientConfig": [
+            "ui-notification",
+            "ui-control"
+        ],
+        "showPathInSidebar": true,
+        "headerContent": "dashboard",
+        "navigationStyle": "none",
+        "titleBarStyle": "fixed",
+        "showReconnectNotification": true,
+        "notificationDisplayTime": "1",
+        "showDisconnectNotification": true,
+        "allowInstall": true
+    },
+    {
+        "id": "8dc3722c.06efa8",
+        "type": "mqtt-broker",
+        "name": "",
+        "broker": "0.0.0.0",
+        "port": "1883",
+        "clientid": "Client_node",
+        "autoConnect": true,
+        "usetls": false,
+        "compatmode": false,
+        "protocolVersion": 4,
+        "keepalive": "60",
+        "cleansession": true,
+        "autoUnsubscribe": true,
+        "birthTopic": "",
+        "birthQos": "0",
+        "birthPayload": "",
+        "closeTopic": "",
+        "closeQos": "0",
+        "closePayload": "",
+        "willTopic": "",
+        "willQos": "0",
+        "willPayload": ""
+    },
+    {
+        "id": "81a80e32347ff991",
+        "type": "ui_base",
+        "theme": {
+            "name": "theme-light",
+            "lightTheme": {
+                "default": "#0094CE",
+                "baseColor": "#5900ce",
+                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
+                "edited": true,
+                "reset": false
+            },
+            "darkTheme": {
+                "default": "#097479",
+                "baseColor": "#097479",
+                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
+                "edited": true,
+                "reset": false
+            },
+            "customTheme": {
+                "name": "Untitled Theme 1",
+                "default": "#4B7930",
+                "baseColor": "#4B7930",
+                "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
+            },
+            "themeState": {
+                "base-color": {
+                    "default": "#0094CE",
+                    "value": "#0094CE",
+                    "edited": true
+                },
+                "page-titlebar-backgroundColor": {
+                    "value": "#5900ce",
+                    "edited": false
+                },
+                "page-backgroundColor": {
+                    "value": "#fafafa",
+                    "edited": false
+                },
+                "page-sidebar-backgroundColor": {
+                    "value": "#333333",
+                    "edited": false
+                },
+                "group-textColor": {
+                    "value": "#7e1bff",
+                    "edited": false
+                },
+                "group-borderColor": {
+                    "value": "#ffffff",
+                    "edited": false
+                },
+                "group-backgroundColor": {
+                    "value": "#ffffff",
+                    "edited": false
+                },
+                "widget-textColor": {
+                    "value": "#111111",
+                    "edited": false
+                },
+                "widget-backgroundColor": {
+                    "value": "#5900ce",
+                    "edited": false
+                },
+                "widget-borderColor": {
+                    "value": "#ffffff",
+                    "edited": false
+                },
+                "base-font": {
+                    "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
+                }
+            },
+            "angularTheme": {
+                "primary": "indigo",
+                "accents": "blue",
+                "warn": "red",
+                "background": "grey",
+                "palette": "light"
+            }
         },
-        "widget-borderColor": {
-          "value": "#ffffff",
-          "edited": false
+        "site": {
+            "name": "PlanktoScope",
+            "hideToolbar": "false",
+            "allowSwipe": "false",
+            "lockMenu": "false",
+            "allowTempTheme": "true",
+            "dateFormat": "Y-MM-DD",
+            "sizes": {
+                "sx": 55,
+                "sy": 55,
+                "gx": 4,
+                "gy": 4,
+                "cx": 4,
+                "cy": 4,
+                "px": 4,
+                "py": 4
+            }
+        }
+    },
+    {
+        "id": "f7770f0b818c3a67",
+        "type": "ui-theme",
+        "name": "PlanktoScope GUI 2",
+        "colors": {
+            "surface": "#ffffff",
+            "primary": "#1976d2",
+            "bgPage": "#eef3ff",
+            "groupBg": "#ffffff",
+            "groupOutline": "#cccccc"
         },
-        "base-font": {
-          "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
+        "sizes": {
+            "density": "comfortable",
+            "pagePadding": "1.5rem",
+            "groupGap": "1.5rem",
+            "groupBorderRadius": "8px",
+            "widgetGap": "0px"
         }
-      },
-      "angularTheme": {
-        "primary": "indigo",
-        "accents": "blue",
-        "warn": "red",
-        "background": "grey",
-        "palette": "light"
-      }
-    },
-    "site": {
-      "name": "PlanktoScope",
-      "hideToolbar": "false",
-      "allowSwipe": "false",
-      "lockMenu": "false",
-      "allowTempTheme": "true",
-      "dateFormat": "Y-MM-DD",
-      "sizes": {
-        "sx": 55,
-        "sy": 55,
-        "gx": 4,
-        "gy": 4,
-        "cx": 4,
-        "cy": 4,
-        "px": 4,
-        "py": 4
-      }
-    }
-  },
-  {
-    "id": "f7770f0b818c3a67",
-    "type": "ui-theme",
-    "name": "PlanktoScope GUI 2",
-    "colors": {
-      "surface": "#ffffff",
-      "primary": "#1976d2",
-      "bgPage": "#eef3ff",
-      "groupBg": "#ffffff",
-      "groupOutline": "#cccccc"
-    },
-    "sizes": {
-      "density": "comfortable",
-      "pagePadding": "1.5rem",
-      "groupGap": "1.5rem",
-      "groupBorderRadius": "8px",
-      "widgetGap": "0px"
+    },
+    {
+        "id": "73070e06474249b4",
+        "type": "ui-page",
+        "name": "Metadata",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/metadata",
+        "icon": "information-outline",
+        "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": 4,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "dd015fda7456b9b0",
+        "type": "ui-group",
+        "name": "Navigation Top",
+        "page": "73070e06474249b4",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "69c772603e9cec0d",
+        "type": "ui-group",
+        "name": "Sample Information",
+        "page": "73070e06474249b4",
+        "width": "12",
+        "height": 1,
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "6fab47af451c6d95",
+        "type": "ui-group",
+        "name": "Starting point",
+        "page": "73070e06474249b4",
+        "width": "6",
+        "height": 1,
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "1cfe3062a8353012",
+        "type": "ui-group",
+        "name": "Ending point",
+        "page": "73070e06474249b4",
+        "width": "6",
+        "height": 1,
+        "order": 4,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "cb3521392eb4e9ed",
+        "type": "ui-group",
+        "name": "Net Specificity",
+        "page": "73070e06474249b4",
+        "width": "12",
+        "height": 1,
+        "order": 5,
+        "showTitle": true,
+        "className": "",
+        "visible": true,
+        "disabled": false,
+        "groupType": "default"
+    },
+    {
+        "id": "dd4d9707051041c9",
+        "type": "ui-group",
+        "name": "Other informations",
+        "page": "73070e06474249b4",
+        "width": "12",
+        "height": 1,
+        "order": 6,
+        "showTitle": true,
+        "className": "",
+        "visible": true,
+        "disabled": false,
+        "groupType": "default"
+    },
+    {
+        "id": "7a4e042a60b734a6",
+        "type": "ui-page",
+        "name": "Segmentation",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/segmentation",
+        "icon": "crop",
+        "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": 6,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "bfd4acb7b243514f",
+        "type": "ui-group",
+        "name": "List of Acquisitions",
+        "page": "7a4e042a60b734a6",
+        "width": "12",
+        "height": 1,
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "f22f627015431032",
+        "type": "ui-page",
+        "name": "Calibration - Lightness",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/calibration_lightness",
+        "icon": "target-variant",
+        "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": 10,
+        "className": "",
+        "visible": "false",
+        "disabled": "false"
+    },
+    {
+        "id": "728c7ed3d63dfcee",
+        "type": "ui-group",
+        "name": "Settings",
+        "page": "f22f627015431032",
+        "width": "12",
+        "height": "1",
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "aa9ba6cedf56d2cd",
+        "type": "ui-page",
+        "name": "Calibration - Pixel size",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/calibration_pixel_size",
+        "icon": "target-variant",
+        "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": 11,
+        "className": "",
+        "visible": "false",
+        "disabled": "false"
+    },
+    {
+        "id": "c966455a52d121c0",
+        "type": "ui-group",
+        "name": "Settings",
+        "page": "aa9ba6cedf56d2cd",
+        "width": "12",
+        "height": "1",
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "48216bc1f7c53a75",
+        "type": "ui-page",
+        "name": "Calibration - Pump",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/calibration_pump",
+        "icon": "target-variant",
+        "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": 12,
+        "className": "",
+        "visible": "false",
+        "disabled": "false"
+    },
+    {
+        "id": "6039d653304537af",
+        "type": "ui-group",
+        "name": "Settings",
+        "page": "48216bc1f7c53a75",
+        "width": "12",
+        "height": "1",
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "803aa402d5c66b73",
+        "type": "ui-page",
+        "name": "Calibration - Saturation Level",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/calibration_saturation_level",
+        "icon": "target-variant",
+        "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": 9,
+        "className": "",
+        "visible": "false",
+        "disabled": "false"
+    },
+    {
+        "id": "af8acdfe9afbad74",
+        "type": "ui-group",
+        "name": "Settings",
+        "page": "803aa402d5c66b73",
+        "width": "12",
+        "height": "1",
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "f8dd620721c6d70b",
+        "type": "ui-page",
+        "name": "Calibration",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/calibration",
+        "icon": "mdi-tune",
+        "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": "c29c835a70533b69",
+        "type": "ui-group",
+        "name": "header",
+        "page": "f8dd620721c6d70b",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "822cdc5b6ef13f39",
+        "type": "ui-group",
+        "name": "body",
+        "page": "f8dd620721c6d70b",
+        "width": "12",
+        "height": 1,
+        "order": 2,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "bcc78241b99ba27f",
+        "type": "ui-page",
+        "name": "Preview",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/preview",
+        "icon": "mdi-eye",
+        "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": 3,
+        "className": "",
+        "visible": true,
+        "disabled": false
+    },
+    {
+        "id": "58ab4d5e3dd68192",
+        "type": "ui-group",
+        "name": "Streaming",
+        "page": "bcc78241b99ba27f",
+        "width": "6",
+        "height": 1,
+        "order": 2,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "39cbd2658f16d608",
+        "type": "ui-group",
+        "name": "Settings",
+        "page": "bcc78241b99ba27f",
+        "width": "6",
+        "height": 1,
+        "order": 3,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "5c3e73c675caac42",
+        "type": "ui-page",
+        "name": "Acquisition",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/acquisition",
+        "icon": "video-image",
+        "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": 5,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "b274327af3807b79",
+        "type": "ui-group",
+        "name": "Streaming",
+        "page": "5c3e73c675caac42",
+        "width": "4",
+        "height": 1,
+        "order": 2,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "d2f77573ed4317e4",
+        "type": "ui-group",
+        "name": "Acquisition settings",
+        "page": "5c3e73c675caac42",
+        "width": "8",
+        "height": 1,
+        "order": 3,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "632260133d581caa",
+        "type": "ui-page",
+        "name": "Home",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/home",
+        "icon": "home",
+        "layout": "grid",
+        "theme": "f7770f0b818c3a67",
+        "breakpoints": [
+            {
+                "name": "Default",
+                "px": "0",
+                "cols": "3"
+            },
+            {
+                "name": "Tablet",
+                "px": "576",
+                "cols": "3"
+            },
+            {
+                "name": "Small Desktop",
+                "px": "768",
+                "cols": "12"
+            },
+            {
+                "name": "Desktop",
+                "px": "1024",
+                "cols": "12"
+            }
+        ],
+        "order": 1,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "5d39a98563150f22",
+        "type": "ui-group",
+        "name": "body",
+        "page": "632260133d581caa",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "7572915171e440cd",
+        "type": "ui-group",
+        "name": "Navigation Top",
+        "page": "bcc78241b99ba27f",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "3ae252a2e5abca89",
+        "type": "ui-group",
+        "name": "Navigation Top",
+        "page": "5c3e73c675caac42",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "9b992ca6515ed058",
+        "type": "ui-group",
+        "name": "Navigation Top",
+        "page": "7a4e042a60b734a6",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "d129fac8e7742d5b",
+        "type": "ui-page",
+        "name": "Visualization",
+        "ui": "e6ae26617c24c3ea",
+        "path": "/visualization",
+        "icon": "chart-scatter-plot",
+        "layout": "grid",
+        "theme": "f7770f0b818c3a67",
+        "breakpoints": [
+            {
+                "name": "Default",
+                "px": "0",
+                "cols": "4"
+            },
+            {
+                "name": "Tablet",
+                "px": "576",
+                "cols": "4"
+            },
+            {
+                "name": "Small Desktop",
+                "px": "768",
+                "cols": "12"
+            },
+            {
+                "name": "Desktop",
+                "px": "1024",
+                "cols": "12"
+            }
+        ],
+        "order": 8,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "b570f76ef526af45",
+        "type": "ui-group",
+        "name": "Navigation Top",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "402b3d24c87ab0d2",
+        "type": "ui-group",
+        "name": "Informations",
+        "page": "7a4e042a60b734a6",
+        "width": "12",
+        "height": 1,
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "fa6393a7d7e3b7d7",
+        "type": "ui-group",
+        "name": "List of Segmentation",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 2,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "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": 2,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "de680effc3e27451",
+        "type": "ui-group",
+        "name": "body",
+        "page": "34112984a39c35bd",
+        "width": "12",
+        "height": 1,
+        "order": 1,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "c5651e1a3e56f3f5",
+        "type": "ui-group",
+        "name": "Explorer",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 13,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "0c1537ce71affc2b",
+        "type": "ui-group",
+        "name": "Gallery",
+        "page": "d129fac8e7742d5b",
+        "width": "12",
+        "height": 1,
+        "order": 14,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "36931a9722892790",
+        "type": "ui-group",
+        "name": "Software Version",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "order": 6,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "2aa235120084abe4",
+        "type": "ui-group",
+        "name": "Images Acquired",
+        "page": "632260133d581caa",
+        "width": "3",
+        "height": 1,
+        "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": "dc304678d9a6b53b",
+        "type": "ui-group",
+        "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": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "82480e386ed6f8bd",
+        "type": "ui-group",
+        "name": "Explore your data",
+        "page": "632260133d581caa",
+        "width": "4",
+        "height": 1,
+        "order": 3,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "disabled": "false",
+        "groupType": "default"
+    },
+    {
+        "id": "9d3e8bdd535f0e0d",
+        "type": "ui-group",
+        "name": "Run the Calibration",
+        "page": "632260133d581caa",
+        "width": "4",
+        "height": 1,
+        "order": 4,
+        "showTitle": false,
+        "className": "",
+        "visible": "true",
+        "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": "0f16258953fae292",
+        "type": "file in",
+        "z": "b7861ce703215a01",
+        "name": "",
+        "filename": "/home/pi/PlanktoScope/hardware.json",
+        "filenameType": "str",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "allProps": false,
+        "x": 250,
+        "y": 40,
+        "wires": [
+            [
+                "81c516291ab19acd"
+            ]
+        ],
+        "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
+    },
+    {
+        "id": "81c516291ab19acd",
+        "type": "json",
+        "z": "b7861ce703215a01",
+        "name": "Parse JSON",
+        "property": "payload",
+        "action": "",
+        "pretty": false,
+        "x": 510,
+        "y": 40,
+        "wires": [
+            [
+                "d0fbcd200cd09981"
+            ]
+        ]
+    },
+    {
+        "id": "d0fbcd200cd09981",
+        "type": "change",
+        "z": "b7861ce703215a01",
+        "name": "",
+        "rules": [
+            {
+                "t": "set",
+                "p": "hardware_conf",
+                "pt": "global",
+                "to": "payload",
+                "tot": "msg"
+            }
+        ],
+        "action": "",
+        "property": "",
+        "from": "",
+        "to": "",
+        "reg": false,
+        "x": 730,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "730b2780ac215a52",
+        "type": "file in",
+        "z": "63c85b96537b7355",
+        "name": "",
+        "filename": "/home/pi/PlanktoScope/config.json",
+        "filenameType": "str",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "x": 560,
+        "y": 60,
+        "wires": [
+            [
+                "e0b7238a0c5d4ed0"
+            ]
+        ],
+        "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
+    },
+    {
+        "id": "e0b7238a0c5d4ed0",
+        "type": "json",
+        "z": "63c85b96537b7355",
+        "name": "config.json",
+        "property": "payload",
+        "action": "",
+        "pretty": false,
+        "x": 730,
+        "y": 60,
+        "wires": [
+            [
+                "f1c0a882a9e3d927"
+            ]
+        ]
+    },
+    {
+        "id": "b8109badf5f39d35",
+        "type": "file",
+        "z": "63c85b96537b7355",
+        "name": "",
+        "filename": "/home/pi/PlanktoScope/config.json",
+        "appendNewline": true,
+        "createDir": true,
+        "overwriteFile": "true",
+        "encoding": "none",
+        "x": 990,
+        "y": 160,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "31ae9b857627673c",
+        "type": "json",
+        "z": "63c85b96537b7355",
+        "name": "config.json",
+        "property": "payload",
+        "action": "str",
+        "pretty": true,
+        "x": 730,
+        "y": 160,
+        "wires": [
+            [
+                "b8109badf5f39d35"
+            ]
+        ]
+    },
+    {
+        "id": "f1c0a882a9e3d927",
+        "type": "function",
+        "z": "63c85b96537b7355",
+        "name": "Global Set",
+        "func": "global.set(\"config_keys\", Object.keys(msg.payload));\n\nfor (const key in msg.payload) {\n    global.set(key, msg.payload[key]);\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 910,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "24ea99bb02eeffa2",
+        "type": "inject",
+        "z": "63c85b96537b7355",
+        "name": "Load config",
+        "props": [
+            {
+                "p": "topic",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": true,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payloadType": "str",
+        "x": 230,
+        "y": 60,
+        "wires": [
+            [
+                "730b2780ac215a52"
+            ]
+        ]
+    },
+    {
+        "id": "5248e5e225d854d1",
+        "type": "function",
+        "z": "63c85b96537b7355",
+        "name": "get config payload",
+        "func": "keys = global.get(\"config_keys\")\n\nvar payload = {}\n\nkeys.forEach(function(item, index, array) {\n  payload[item] = global.get(item);\n})\n\nreturn {\"payload\": payload};",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 410,
+        "y": 160,
+        "wires": [
+            [
+                "31ae9b857627673c"
+            ]
+        ]
+    },
+    {
+        "id": "97f8a94e71055782",
+        "type": "ui_ui_control",
+        "z": "63c85b96537b7355",
+        "name": "Connect Event",
+        "events": "connect",
+        "x": 220,
+        "y": 100,
+        "wires": [
+            [
+                "730b2780ac215a52"
+            ]
+        ]
+    },
+    {
+        "id": "852522a716e4156e",
+        "type": "switch",
+        "z": "b2bf18a0f40a5d72",
+        "name": "msg.payload.page.path === \"/setup\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/setup",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 310,
+        "y": 40,
+        "wires": [
+            [
+                "7af8cd00e8938727"
+            ]
+        ]
+    },
+    {
+        "id": "49857517dd9e15f7",
+        "type": "ui-event",
+        "z": "b2bf18a0f40a5d72",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "852522a716e4156e"
+            ]
+        ]
+    },
+    {
+        "id": "fc5a4760cc3ea824",
+        "type": "ui-template",
+        "z": "b2bf18a0f40a5d72",
+        "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            <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": 310,
+        "y": 180,
+        "wires": [
+            [
+                "c36ed08fac3fccc0",
+                "0b71d7e104148283"
+            ]
+        ]
+    },
+    {
+        "id": "cf5275898273cd61",
+        "type": "ui-template",
+        "z": "b2bf18a0f40a5d72",
+        "group": "",
+        "page": "34112984a39c35bd",
+        "ui": "",
+        "name": "CSS (All Pages)",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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,
+        "templateScope": "page:style",
+        "className": "",
+        "x": 940,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "c36ed08fac3fccc0",
+        "type": "function",
+        "z": "b2bf18a0f40a5d72",
+        "name": "set general settings",
+        "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": 710,
+        "y": 140,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "7af8cd00e8938727",
+        "type": "read setup",
+        "z": "b2bf18a0f40a5d72",
+        "name": "",
+        "x": 150,
+        "y": 180,
+        "wires": [
+            [
+                "fc5a4760cc3ea824"
+            ]
+        ]
+    },
+    {
+        "id": "6c2762dad373862b",
+        "type": "write setup",
+        "z": "b2bf18a0f40a5d72",
+        "name": "",
+        "x": 670,
+        "y": 240,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "0b71d7e104148283",
+        "type": "switch",
+        "z": "b2bf18a0f40a5d72",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "setup/saved",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 470,
+        "y": 240,
+        "wires": [
+            [
+                "6c2762dad373862b"
+            ]
+        ]
+    },
+    {
+        "id": "b3754a3e5ae5e0ed",
+        "type": "mqtt in",
+        "z": "b2bf18a0f40a5d72",
+        "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": [
+            [
+                "fc5a4760cc3ea824"
+            ]
+        ]
+    },
+    {
+        "id": "d525e948816e36b6",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "group": "",
+        "page": "",
+        "ui": "e6ae26617c24c3ea",
+        "name": "footer",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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,
+        "templateScope": "widget:ui",
+        "className": "",
+        "x": 510,
+        "y": 700,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "2a99cafa2c36383b",
+        "type": "ui-event",
+        "z": "f90406ba2da5932f",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "9df0c4431f8b8f31",
+                "ba7e7f61401c14d5",
+                "9dc57d3fe40c1d43"
+            ]
+        ]
+    },
+    {
+        "id": "d6311499f71b7440",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "group": "",
+        "page": "",
+        "ui": "e6ae26617c24c3ea",
+        "name": "CSS (All Pages)",
+        "order": 0,
+        "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.v-row {\n        margin: 0;\n}",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "site:style",
+        "className": "",
+        "x": 1300,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ba7e7f61401c14d5",
+        "type": "get machine info",
+        "z": "f90406ba2da5932f",
+        "name": "",
+        "x": 850,
+        "y": 40,
+        "wires": [
+            [
+                "362b4428729ebcac"
+            ]
+        ]
+    },
+    {
+        "id": "9dc57d3fe40c1d43",
+        "type": "storage info",
+        "z": "f90406ba2da5932f",
+        "name": "",
+        "x": 830,
+        "y": 80,
+        "wires": [
+            [
+                "751e338fd9e7b365"
+            ]
+        ]
+    },
+    {
+        "id": "751e338fd9e7b365",
+        "type": "function",
+        "z": "f90406ba2da5932f",
+        "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": "362b4428729ebcac",
+        "type": "function",
+        "z": "f90406ba2da5932f",
+        "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": "9df0c4431f8b8f31",
+        "type": "delay",
+        "z": "f90406ba2da5932f",
+        "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": 140,
+        "y": 180,
+        "wires": [
+            [
+                "7326fb7c646235e5"
+            ]
+        ]
+    },
+    {
+        "id": "7326fb7c646235e5",
+        "type": "function",
+        "z": "f90406ba2da5932f",
+        "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": 320,
+        "y": 180,
+        "wires": [
+            [
+                "17d6595dfa9d0cee",
+                "f4c3442da54320e3",
+                "d0eacab77771ef43",
+                "ed7e8648519251ad",
+                "bfd0d1b9f4c7141c"
+            ]
+        ]
+    },
+    {
+        "id": "825ecb1183edc16b",
+        "type": "poweroff",
+        "z": "f90406ba2da5932f",
+        "name": "",
+        "x": 1160,
+        "y": 240,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "f0a002fc31fbe9f9",
+        "type": "reboot",
+        "z": "f90406ba2da5932f",
+        "name": "",
+        "x": 1160,
+        "y": 200,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "9cbcd71938e6162d",
+        "type": "switch",
+        "z": "f90406ba2da5932f",
+        "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": [
+            [
+                "f0a002fc31fbe9f9"
+            ],
+            [
+                "825ecb1183edc16b"
+            ]
+        ]
+    },
+    {
+        "id": "d5cd40c81ac86e7a",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "group": "5d39a98563150f22",
+        "page": "",
+        "ui": "",
+        "name": "empty-state",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "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": 530,
+        "y": 280,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "17d6595dfa9d0cee",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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    /* --- Masquage de l'horloge sous 700px --- */\n    @media (max-width: 700px) {\n    #pks-clock {\n    display: none !important;\n    }\n    \n    /* Optionnel : Réduire la marge du bouton machine pour gagner encore plus de place */\n    #pks-machine-button {\n    margin-right: 0.5rem;\n    padding: 6px 8px;\n    }\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 = \"/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": 800,
+        "y": 200,
+        "wires": [
+            [
+                "9cbcd71938e6162d"
+            ]
+        ]
+    },
+    {
+        "id": "f4c3442da54320e3",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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 text-right\">\n      {{ msg.payload.software_version }}\n    </v-col>\n  </v-row>\n</template>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 480,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "d0eacab77771ef43",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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 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,
+        "templateScope": "local",
+        "className": "",
+        "x": 550,
+        "y": 520,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ed7e8648519251ad",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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 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,
+        "templateScope": "local",
+        "className": "",
+        "x": 560,
+        "y": 560,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "bfd0d1b9f4c7141c",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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": "b8d1e9bc6daa3cd0",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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=\"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,
+        "templateScope": "local",
+        "className": "",
+        "x": 540,
+        "y": 440,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "b298c238c9fb0b58",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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": "e7f40c244808dbd4",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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": "4369716b2a45c769",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "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": "a3a7ac5089d5d8e6",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "group": "",
+        "page": "632260133d581caa",
+        "ui": "",
+        "name": "CSS (This page)",
+        "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": "5fedc522b345193c",
+        "type": "ui-template",
+        "z": "6d6a011bf1913637",
+        "group": "58ab4d5e3dd68192",
+        "page": "",
+        "ui": "",
+        "name": "Streaming",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n    <v-container fluid class=\"pa-0\">\n        <v-responsive :aspect-ratio=\"3/4\" class=\"iframe-wrapper border\">\n            <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\" class=\"responsive-iframe\" allowfullscreen></iframe>\n        </v-responsive>\n    </v-container>\n</template>\n\n<style scoped>\n    .iframe-wrapper {\n        width: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        overflow: hidden;\n        border-radius: 8px;\n        background-color: #fff;\n    }\n\n    .responsive-iframe {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        \n        /* Dimensions ajustées pour le ratio inversé */\n        width: 133.33%;\n        height: 75%;\n        \n        border: none;\n        pointer-events: auto;\n        \n        /* Rotation anti-horaire (-90deg) */\n        transform: translate(-50%, -50%) rotate(-90deg);\n        transform-origin: center center;\n    }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1310,
+        "y": 120,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "8452566c16d26f45",
+        "type": "function",
+        "z": "6d6a011bf1913637",
+        "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": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "67e05ec4078fd100",
+        "type": "ui-event",
+        "z": "6d6a011bf1913637",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "b1e37de2e8a49f29"
+            ]
+        ]
+    },
+    {
+        "id": "b1e37de2e8a49f29",
+        "type": "switch",
+        "z": "6d6a011bf1913637",
+        "name": "msg.payload.page.path === \"/preview\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/preview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 320,
+        "y": 40,
+        "wires": [
+            [
+                "8452566c16d26f45"
+            ]
+        ]
+    },
+    {
+        "id": "d119a802cf4c3f2d",
+        "type": "function",
+        "z": "6d6a011bf1913637",
+        "name": "set pump settings",
+        "func": "if (msg.topic) {\n    global.set(\"pump_flowrate\", msg.payload.pump_flowrate);\n    global.set(\"pump_manual_volume\", msg.payload.pump_manual_volume);\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 790,
+        "y": 80,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "8dfac8c9adafc76f",
+        "type": "function",
+        "z": "6d6a011bf1913637",
+        "name": "set focus settings",
+        "func": "if (msg.topic) {\n    global.set(\"focus_distance\", msg.payload.focus_distance);\n\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 790,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "24077d432cd6db62",
+        "type": "switch",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "set_global/pump",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "actuator/pump",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "set_global/focus",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "actuator/focus",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "set_global/light",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "light",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "set_global/bubbler",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "actuator/bubbler",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "imager/image",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 9,
+        "x": 550,
+        "y": 220,
+        "wires": [
+            [
+                "d119a802cf4c3f2d"
+            ],
+            [
+                "7acd371a3e8d58c7"
+            ],
+            [
+                "8dfac8c9adafc76f"
+            ],
+            [
+                "ddbbc347dd314885"
+            ],
+            [
+                "2655836d55c8c00e"
+            ],
+            [
+                "f4e92faafd5a967d"
+            ],
+            [
+                "85505c259d234540"
+            ],
+            [
+                "69f0e0fd86f25833",
+                "8eecfc6543bf944c"
+            ],
+            [
+                "a56a8820702f4610"
+            ]
+        ]
+    },
+    {
+        "id": "db1ef284071e60a1",
+        "type": "ui-template",
+        "z": "6d6a011bf1913637",
+        "group": "39cbd2658f16d608",
+        "page": "",
+        "ui": "",
+        "name": "body",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"pa-0\">\n    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Light</div>\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'off' ? 'grey-lighten-2' : 'white'\"\n            @click=\"on_led_toggle('off')\">\n            Off\n          </v-btn>\n          <v-divider vertical></v-divider>\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'on' ? 'primary' : 'white'\"\n            @click=\"on_led_toggle('on')\">\n            On\n          </v-btn>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Focus</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\">\n            <v-label class=\"text-body-2\">Distance</v-label>\n          </v-col>\n          <v-col cols=\"5\" sm=\"6\">\n            <v-slider v-model.number=\"focus_distance\" :max=\"maxFocus\" :min=\"minFocus\" :step=\"25\" hide-details\n              :thumb-size=\"15\" :track-size=\"3\" />\n          </v-col>\n          <v-col cols=\"4\">\n            <v-text-field v-model.number=\"focus_distance\" type=\"number\" variant=\"outlined\" hide-details suffix=\"μm\"\n              :step=\"25\" :min=\"minFocus\" />\n          </v-col>\n        </v-row>\n\n        <v-row dense class=\"mt-1\">\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_distance_preset\" min=\"0\" 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        <v-row dense class=\"mt-1\">\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'\">Near</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\" color=\"grey-lighten-2\" variant=\"flat\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Far</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Pump</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Flowrate</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.1\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" :step=\"0.1\"\n              hide-details suffix=\"ml/min\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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\">{{ value }}</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-divider class=\"my-3\"></v-divider>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Volume</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.1\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" :step=\"0.1\"\n              hide-details suffix=\"ml\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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 }}</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row dense class=\"mt-2\">\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'\" color=\"grey-lighten-2\" variant=\"flat\">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    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Bubbler</div>\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"bubbler_state === 'off' ? 'grey-lighten-2' : 'white'\"\n            @click=\"on_bubbler_toggle('off')\">\n            Off\n          </v-btn>\n          <v-divider vertical></v-divider>\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"bubbler_state === 'on' ? 'primary' : 'white'\"\n            @click=\"on_bubbler_toggle('on')\">\n            On\n          </v-btn>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"pa-2 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n      <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-2\">\n        <template v-slot:prepend><v-icon size=\"large\">mdi-tune</v-icon></template>\n        <v-list-item-title class=\"text-subtitle-1 font-weight-bold\">Calibration</v-list-item-title>\n        <v-list-item-subtitle class=\"text-caption\">Modify camera and optical parameters.</v-list-item-subtitle>\n        <template v-slot:append><v-icon size=\"small\">mdi-chevron-right</v-icon></template>\n      </v-list-item>\n    </v-card>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02, maxFlow: 30, pump_flowrate: 0, pump_manual_volume: 0, pump_flowrate_presets: [0.02, 0.2, 2, 20], pump_volume_presets: [0.004, 0.2, 2, 20], pump_flowrate_preset: null, pump_volume_preset: null, pump_direction: \"stop\",\n      minFocus: 25, maxFocus: 5000, focus_distance: 25, focus_distance_presets: [25, 150, 500, 5000], focus_distance_preset: null, focus_direction: \"stop\",\n      led_state: \"off\", bubbler_state: \"off\", calibration_led_intensity: null,\n      imageSnackbar: false, imageSnackbarText: \"\",\n    };\n  },\n\n  created() { this.hydrateFromMsg(this.msg); },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) { this.pump_flowrate_preset = this.pump_flowrate_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    pump_manual_volume(newVal) { this.pump_volume_preset = this.pump_volume_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    focus_distance(newVal) { this.focus_distance_preset = this.focus_distance_presets.find((v) => v === newVal) ?? null; this.sendFocusParams(); },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n      \n      // Update LED intensity if it exists in payload (prevents nulling out when other topics arrive)\n      if (p.calibration_led_intensity !== undefined) {\n        this.calibration_led_intensity = p.calibration_led_intensity;\n      }\n\n      // Sync Pump/Focus UI state on completion\n      if (m.topic === \"status/pump\" && p.status === \"Done\") this.pump_direction = \"stop\";\n      if (m.topic === \"status/focus\" && p.status === \"Done\") this.focus_direction = \"stop\";\n      \n      // Hydrate LED status\n      if (\"led_status\" in p || (m.topic === \"status/light\" && \"status\" in p)) {\n        const rawVal = p.led_status !== undefined ? p.led_status : p.status;\n        const s = String(rawVal).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n      \n      // Hydrate Bubbler state\n      if (\"bubbler_status\" in p || m.topic === \"status/actuator\") {\n        // On récupère la valeur soit dans la clé dédiée, soit directement dans p\n        const rawBubbler = p.bubbler_status !== undefined ? p.bubbler_status : p;\n        \n        const s = String(rawBubbler).toLowerCase().trim();\n        this.bubbler_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // Sync other parameters\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      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) this.pump_direction = p.command;\n      if (typeof p.focus_distance === \"number\") this.focus_distance = p.focus_distance;\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) this.focus_direction = p.command;\n    },\n\n    on_led_toggle(val) {\n      this.led_state = val;\n      \n      // Construct the specific light command\n      const lightCommandPayload = { action: val };\n      if (val === \"on\" && this.calibration_led_intensity !== null) {\n        lightCommandPayload.value = this.calibration_led_intensity;\n      }\n      this.send({ topic: \"light\", payload: lightCommandPayload });\n\n      // Update the global state\n      this.send({\n        topic: \"set_global/light\",\n        payload: {\n          led_status: val,\n          calibration_led_intensity: this.calibration_led_intensity\n        }\n      });\n    },\n\n    on_bubbler_toggle(val) {\n      this.bubbler_state = val;\n      \n      // Create an object that matches what your Python script expects\n      const messagePayload = {\n        action: val // This will result in {\"action\": \"on\"} or {\"action\": \"off\"}\n      };\n      \n      this.send({ topic: \"actuator/bubbler\", payload: messagePayload });\n      this.send({ topic: \"set_global/bubbler\", payload: messagePayload });\n    },\n\n    // Pump Methods\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() { this.send({ topic: \"set_global/pump\", payload: { pump_flowrate: Number(this.pump_flowrate) || 0, pump_manual_volume: Number(this.pump_manual_volume) || 0 } }); },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (val === \"stop\") { this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } }); }\n      else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({ topic: \"actuator/pump\", payload: { action: \"move\", direction: dir, volume: Number(this.pump_manual_volume) || 0, flowrate: Number(this.pump_flowrate) || 0 } });\n      }\n    },\n\n    // Focus Methods\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; if (d >= x3) return y3;\n      if (d <= x2) return Math.round(y1 + ((y2 - y1) / (x2 - x1)) * (d - x1));\n      return Math.round(y2 + ((y3 - y2) / (x3 - x2)) * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      this.send({ topic: \"set_global/focus\", payload: { focus_distance: d, focus_speed: this.speedFromDistance(d) } });\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (val === \"stop\") { this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } }); }\n      else {\n        const d = Number(this.focus_distance) || 25;\n        this.send({ topic: \"actuator/focus\", payload: { action: \"move\", direction: val, distance: d / 1000, speed: this.speedFromDistance(d) / 1000 } });\n      }\n    }\n  },\n};\n</script>\n\n<style scoped>\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\n  .border {\n    border: 1px solid #cccccc !important;\n  }\n\n  .v-text-field--suffixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input {\n    padding-top: 10px;\n  }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 370,
+        "y": 220,
+        "wires": [
+            [
+                "24077d432cd6db62"
+            ]
+        ]
+    },
+    {
+        "id": "27a2b425848bce6f",
+        "type": "mqtt in",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "topic": "status/pump",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 90,
+        "y": 200,
+        "wires": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "d53b5bacd6d4c3ac",
+        "type": "mqtt in",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "topic": "status/focus",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 90,
+        "y": 260,
+        "wires": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "2655836d55c8c00e",
+        "type": "function",
+        "z": "6d6a011bf1913637",
+        "name": "set light settings",
+        "func": "// On vérifie si le message contient les propriétés attendues\n// avant de mettre à jour les variables globales.\n\nif (msg.payload) {\n    \n    // Si led_status est présent dans le payload, on stocke\n    if (msg.payload.led_status !== undefined) {\n        global.set(\"led_status\", msg.payload.led_status);\n    }\n\n    // Si calibration_led_intensity est présent dans le payload, on stocke\n    if (msg.payload.calibration_led_intensity !== undefined) {\n        global.set(\"calibration_led_intensity\", msg.payload.calibration_led_intensity);\n    }\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 780,
+        "y": 280,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "20547adfe07c39d4",
+        "type": "mqtt in",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "topic": "status/light",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 80,
+        "y": 320,
+        "wires": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "364762649f9df51a",
+        "type": "mqtt in",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "topic": "status/imager",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 90,
+        "y": 380,
+        "wires": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "85505c259d234540",
+        "type": "function",
+        "z": "6d6a011bf1913637",
+        "name": "set bubbler settings",
+        "func": "if (msg.topic) {\n    global.set(\"bubbler_status\", msg.payload.action);\n\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 800,
+        "y": 380,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "f49d224aa87cdc35",
+        "type": "mqtt in",
+        "z": "6d6a011bf1913637",
+        "name": "",
+        "topic": "status/bubbler",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 100,
+        "y": 380,
+        "wires": [
+            [
+                "db1ef284071e60a1"
+            ]
+        ]
+    },
+    {
+        "id": "daae7bb94e6bd36d",
+        "type": "ui-template",
+        "z": "6d6a011bf1913637",
+        "group": "7572915171e440cd",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"mx-0 py-1 px-1 rounded-lg border overflow-hidden bg-white\" \n      no-gutters\n    >\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n/* Conteneur principal */\n.nav-wrapper {\n  justify-content: space-around;\n  overflow-x: auto;\n  scrollbar-width: none; \n}\n\n.nav-wrapper::-webkit-scrollbar { display: none; }\n\n/* Le Bouton de base */\n.step-btn {\n  flex: 1 1 auto;\n  min-width: 50px;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0 12px !important;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n/* Animation du texte */\n.btn-text {\n  max-width: 200px; /* Valeur arbitraire haute */\n  opacity: 1;\n  margin-left: 8px;\n  white-space: nowrap;\n  transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n/* État actif */\n.v-btn--active.step-btn {\n  background-color: rgba(var(--v-theme-primary), 0.08) !important;\n  font-weight: bold;\n}\n\n/* Séparateurs */\n.separator-sign {\n  color: #eeeeee;\n  font-size: 1.2rem;\n  user-select: none;\n  flex: 0 0 auto;\n}\n\n/* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n@media (max-width: 700px) {\n  .btn-text {\n    max-width: 0;\n    opacity: 0;\n    margin-left: 0;\n    overflow: hidden;\n  }\n  \n  .step-btn {\n    min-width: 44px;\n    padding: 0 !important;\n    /* On garde le bouton actif un peu plus large ou coloré pour le repère visuel */\n  }\n\n  /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF même sur mobile */\n  .v-btn--active.step-btn .btn-text {\n    max-width: 100px;\n    opacity: 1;\n    margin-left: 4px;\n  }\n}\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 80,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "7acd371a3e8d58c7",
+        "type": "mqtt out",
+        "z": "6d6a011bf1913637",
+        "name": "MQTT - pump",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 780,
+        "y": 120,
+        "wires": []
+    },
+    {
+        "id": "ddbbc347dd314885",
+        "type": "mqtt out",
+        "z": "6d6a011bf1913637",
+        "name": "MQTT - focus",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 780,
+        "y": 220,
+        "wires": []
+    },
+    {
+        "id": "f4e92faafd5a967d",
+        "type": "mqtt out",
+        "z": "6d6a011bf1913637",
+        "name": "MQTT - light",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 770,
+        "y": 320,
+        "wires": []
+    },
+    {
+        "id": "a56a8820702f4610",
+        "type": "mqtt out",
+        "z": "6d6a011bf1913637",
+        "name": "MQTT - Imager",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 780,
+        "y": 480,
+        "wires": []
+    },
+    {
+        "id": "8eecfc6543bf944c",
+        "type": "debug",
+        "z": "6d6a011bf1913637",
+        "name": "debug 1",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 480,
+        "y": 560,
+        "wires": []
+    },
+    {
+        "id": "69f0e0fd86f25833",
+        "type": "mqtt out",
+        "z": "6d6a011bf1913637",
+        "name": "MQTT - bubbler",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 780,
+        "y": 420,
+        "wires": []
+    },
+    {
+        "id": "29b0ee7d77b1b373",
+        "type": "ui-template",
+        "z": "f7ff9c0e54da4b8e",
+        "group": "dd015fda7456b9b0",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* État actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* Séparateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou coloré pour le repère visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF même sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "4893b2624925b10a",
+        "type": "ui-template",
+        "z": "f7ff9c0e54da4b8e",
+        "group": "69c772603e9cec0d",
+        "page": "",
+        "ui": "",
+        "name": "Sample Information",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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=\"sample_id\"\n        label=\"Sample ID\"\n        placeholder=\"ex : S001\"\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\n  <v-snackbar v-model=\"savedSnackbar\" :timeout=\"2000\" color=\"success\" location=\"bottom\">Metadata saved</v-snackbar>\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      savedSnackbar: 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 && String(p.sample_id) !== String(this.sample_id)) {\n           this.sample_id = p.sample_id;\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      this.savedSnackbar = true;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: String(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,
+        "templateScope": "local",
+        "className": "",
+        "x": 410,
+        "y": 140,
+        "wires": [
+            [
+                "23f16f4437be7a5f",
+                "38f795adc7ce566d"
+            ]
+        ]
+    },
+    {
+        "id": "e7f23192557851e0",
+        "type": "ui-template",
+        "z": "f7ff9c0e54da4b8e",
+        "group": "6fab47af451c6d95",
+        "page": "",
+        "ui": "",
+        "name": "Starting point",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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,
+        "templateScope": "local",
+        "className": "",
+        "x": 400,
+        "y": 200,
+        "wires": [
+            [
+                "943a452f8c2720fe"
+            ]
+        ]
+    },
+    {
+        "id": "ba461390e1455794",
+        "type": "ui-template",
+        "z": "f7ff9c0e54da4b8e",
+        "group": "1cfe3062a8353012",
+        "page": "",
+        "ui": "",
+        "name": "Ending point",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\" @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          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\" @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 @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon @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      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n\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      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      sample_gear: \"\",\n\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Container is enabled ONLY if gear is Horizontal Net\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // 1. Update Start Variables\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\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. Update Gear Type\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n\n        // 3. Logic for End Fields based on Gear Type\n        if (this.sample_gear === \"Horizontal Net\") {\n          // If the message contains specific end values, use them. Otherwise, copy start values.\n          this.object_date_end = p.object_date_end !== undefined ? p.object_date_end : this.object_date;\n          \n          if (p.object_time_end !== undefined) {\n            let te = p.object_time_end.toString();\n            if (te.length === 4) te = `${te.slice(0, 2)}:${te.slice(2, 4)}`;\n            this.object_time_end = te;\n          } else {\n            this.object_time_end = this.object_time;\n          }\n\n          this.object_lat_end = p.object_lat_end !== undefined ? parseFloat(p.object_lat_end) : this.object_lat;\n          this.object_lon_end = p.object_lon_end !== undefined ? parseFloat(p.object_lon_end) : this.object_lon;\n        } else {\n          // Reset fields if gear is changed to something else\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        // 4. Update UI Display (DMS and Map)\n        this.updateFromDecimalEnd(\"lat\");\n        this.updateFromDecimalEnd(\"lon\");\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    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd = \"Enter the end time in UTC. Use YYYY-MM-DD and HH:MM.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd = \"Latitude between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd = \"Longitude between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n    sendUpdateEnd(topic, extra = {}) {\n      const formattedTimeEnd = this.object_time_end ? this.object_time_end.replace(\":\", \"\") : \"\";      \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(this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6));\n      this.object_lat_end = parseFloat(this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6));\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; this.longitude_M_end = M; this.longitude_S_end = S; 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; this.latitude_M_end = M; this.latitude_S_end = S; this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n    },\n    toDecimal(D, M, S, dir) {\n      let val = (parseFloat(D) || 0) + (parseFloat(M) || 0) / 60 + (parseFloat(S) || 0) / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\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 ? (type === \"lat\" ? \"N\" : \"E\") : (type === \"lat\" ? \"S\" : \"W\");\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) { e.deltaY < 0 ? this.zoomInEnd() : this.zoomOutEnd(); },\n    zoomInEnd() { this.zoom_end = Math.min(this.zoom_end * 1.25, 10); this.centerOnMarkerEnd(); },\n    zoomOutEnd() { this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5); this.centerOnMarkerEnd(); },\n    centerOnMarkerEnd() {\n      const w = 800, h = 500;\n      const lat = this.object_lat_end || 0, 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(this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end), this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end));\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800, h = 500, ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end || 0, lon = this.object_lon_end || 0;\n      const x = w / 2 + (lon / 180) * (w / 2), y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end), this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end));\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\"; ctx.beginPath(); ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI); ctx.fill();\n      ctx.fillStyle = \"black\"; 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>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 390,
+        "y": 300,
+        "wires": [
+            [
+                "8f1721c5616582cc"
+            ]
+        ]
+    },
+    {
+        "id": "9ddd0fbe2670f626",
+        "type": "ui-template",
+        "z": "f7ff9c0e54da4b8e",
+        "group": "cb3521392eb4e9ed",
+        "page": "",
+        "ui": "",
+        "name": "Net Specificity",
+        "order": 1,
+        "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 fluid :disabled=\"isDisabled\" :style=\"{\n        pointerEvents: isDisabled ? 'none' : 'auto',\n        opacity: isDisabled ? 0.5 : 1,\n        width: '100%',\n      }\">\n\n    <v-row class=\"mt-2\">\n      <!-- Net Mouth Diameter -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field label=\"Mouth Opening Diameter\" v-model.number=\"sample_net_mouth_diameter\" :min=\"0\" :max=\"1000\"\n          :step=\"1\" suffix=\"cm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\"\n          @input=\"sendUpdate('sample_net_params')\">\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 label=\"Length of the Net\" v-model.number=\"sample_net_length\" :min=\"0\" :max=\"1000\" :step=\"1\"\n          suffix=\"cm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" @input=\"sendUpdate('sample_net_params')\">\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 label=\"Net Mesh Size\" v-model.number=\"sample_net_mesh_size\" :min=\"0\" :max=\"1000\" :step=\"1\"\n          suffix=\"μm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" @input=\"sendUpdate('sample_net_params')\">\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 label=\"Filtered volume\" v-model.number=\"sample_filtered_volume\" :min=\"0\" :max=\"1000\"\n          :step=\"1\" suffix=\"L\" type=\"number\" variant=\"outlined\" hide-details=\"auto\"\n          @input=\"sendUpdate('sample_net_params')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('Collected_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>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_net_mouth_diameter: \"\",\n      sample_net_length: \"\",\n      sample_net_mesh_size: \"\",\n      sample_filtered_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_filtered_volume !== undefined)\n          this.sample_filtered_volume = Number(p.sample_filtered_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_filtered_volume: Number(this.sample_filtered_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 === \"Collected_volume\") {\n        this.hintTitle = \"Filtered volume\";\n        this.hintText =\n          \"Help me\";\n      }\n      this.hintDialog = true;\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,
+        "templateScope": "local",
+        "className": "",
+        "x": 400,
+        "y": 400,
+        "wires": [
+            [
+                "ad434c2ca4b52cf4"
+            ]
+        ]
+    },
+    {
+        "id": "e4d9d690aa12d09c",
+        "type": "ui-template",
+        "z": "f7ff9c0e54da4b8e",
+        "group": "dd4d9707051041c9",
+        "page": "",
+        "ui": "",
+        "name": "Other Informations",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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 label=\"Collected Volume\" v-model.number=\"sample_collected_volume\" :min=\"0\" :max=\"100000\" :step=\"1\"\n          suffix=\"mL\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Concentration Factor\" v-model.number=\"sample_concentration_factor\" :min=\"0\" :max=\"100\"\n          :step=\"0.01\" suffix=\"×\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Sieve Mesh Size\" v-model.number=\"sample_sieve_mesh_size\" :min=\"1\" :max=\"1000\" :step=\"10\"\n          suffix=\"μm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Depth of the Sample\" v-model.number=\"sample_depth\" :min=\"0\" :max=\"10935\" :step=\"1\"\n          suffix=\"m\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Sample Comment\" v-model=\"sample_comment\" variant=\"outlined\" rows=\"2\"\n          @input=\"sendUpdate('sample_water_params')\">\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>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_collected_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_collected_volume !== undefined)\n          this.sample_collected_volume = Number(p.sample_collected_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_collected_volume: Number(this.sample_collected_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 === \"collected_volume\") {\n        this.hintTitle = \"Collected Volume\";\n        this.hintText =\n          \"Help me define\";\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\n    .v-text-field input,\n    .v-textarea textarea {\n      font-size: 1.2rem !important;\n    }\n  }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 410,
+        "y": 460,
+        "wires": [
+            [
+                "b993c6289d67f56d"
+            ]
+        ]
+    },
+    {
+        "id": "990f1d12e47028f3",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "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": [
+            [
+                "4893b2624925b10a",
+                "e7f23192557851e0",
+                "ba461390e1455794",
+                "9ddd0fbe2670f626",
+                "e4d9d690aa12d09c"
+            ]
+        ]
+    },
+    {
+        "id": "7eb3f9c16325dd59",
+        "type": "ui-event",
+        "z": "f7ff9c0e54da4b8e",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "b729150cff31a0ff"
+            ]
+        ]
+    },
+    {
+        "id": "b729150cff31a0ff",
+        "type": "switch",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "msg.payload.page.path === \"/metadata\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/metadata",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 320,
+        "y": 40,
+        "wires": [
+            [
+                "990f1d12e47028f3"
+            ]
+        ]
+    },
+    {
+        "id": "943a452f8c2720fe",
+        "type": "switch",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "object_datetime",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "object_latlon",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 570,
+        "y": 200,
+        "wires": [
+            [
+                "e01c2d986929b8ed"
+            ],
+            [
+                "ddd635a300595387"
+            ]
+        ]
+    },
+    {
+        "id": "ddd635a300595387",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set object_latlon",
+        "func": "if (msg.topic) {\n    global.set(\"object_lat\", msg.payload.object_lat);\n    global.set(\"object_lon\", msg.payload.object_lon);\n    if (msg.payload.object_date !== undefined) {\n        global.set(\"object_date\", msg.payload.object_date);\n    }\n    if (msg.payload.object_time !== undefined) {\n        global.set(\"object_time\", msg.payload.object_time);\n    }\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 960,
+        "y": 240,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "e01c2d986929b8ed",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set object_datetime",
+        "func": "if (msg.topic) {\n    global.set(\"object_date\", msg.payload.object_date);\n    global.set(\"object_time\", msg.payload.object_time);\n    if (msg.payload.object_lat !== undefined) {\n        global.set(\"object_lat\", msg.payload.object_lat);\n    }\n    if (msg.payload.object_lon !== undefined) {\n        global.set(\"object_lon\", msg.payload.object_lon);\n    }\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 970,
+        "y": 200,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "8f1721c5616582cc",
+        "type": "switch",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "object_datetime_end",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "object_latlon_end",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 570,
+        "y": 300,
+        "wires": [
+            [
+                "e4efaec99ee5c172"
+            ],
+            [
+                "4790ca87c9ebf492"
+            ]
+        ]
+    },
+    {
+        "id": "4790ca87c9ebf492",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set object_latlon_end",
+        "func": "if (msg.topic) {\n    global.set(\"object_lat_end\", msg.payload.object_lat_end);\n    global.set(\"object_lon_end\", msg.payload.object_lon_end);\n}\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 980,
+        "y": 340,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "e4efaec99ee5c172",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "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}\n\n\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 990,
+        "y": 300,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ad434c2ca4b52cf4",
+        "type": "switch",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "sample_net_params",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 570,
+        "y": 400,
+        "wires": [
+            [
+                "fb90be363fcaf2e5"
+            ]
+        ]
+    },
+    {
+        "id": "fb90be363fcaf2e5",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set sample_net_params",
+        "func": "if (msg.topic) {\n    global.set(\"sample_net_mouth_diameter\", msg.payload.sample_net_mouth_diameter);\n    global.set(\"sample_net_length\", msg.payload.sample_net_length);\n    global.set(\"sample_net_mesh_size\", msg.payload.sample_net_mesh_size);\n    global.set(\"sample_filtered_volume\", msg.payload.sample_filtered_volume);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 990,
+        "y": 400,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "b993c6289d67f56d",
+        "type": "switch",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "sample_water_params",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 570,
+        "y": 460,
+        "wires": [
+            [
+                "01dbd7f8f0e8cc4b"
+            ]
+        ]
+    },
+    {
+        "id": "01dbd7f8f0e8cc4b",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set sample_water_params",
+        "func": "if (msg.topic) {\n    global.set(\"sample_collected_volume\", msg.payload.sample_collected_volume);\n    global.set(\"sample_concentration_factor\", msg.payload.sample_concentration_factor);\n    global.set(\"sample_sieve_mesh_size\", msg.payload.sample_sieve_mesh_size);\n    global.set(\"sample_depth\", msg.payload.sample_depth);\n    global.set(\"sample_comment\", msg.payload.sample_comment);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1000,
+        "y": 460,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "23f16f4437be7a5f",
+        "type": "switch",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "sample_project_meta",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 570,
+        "y": 140,
+        "wires": [
+            [
+                "815b79480bdb6864",
+                "ba461390e1455794",
+                "9ddd0fbe2670f626",
+                "e7f23192557851e0",
+                "e4d9d690aa12d09c"
+            ]
+        ]
+    },
+    {
+        "id": "815b79480bdb6864",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set sample_project_meta",
+        "func": "if (msg.topic) {\n    global.set(\"sample_project\", msg.payload.sample_project);\n    global.set(\"sample_operator\", msg.payload.sample_operator);\n    global.set(\"sample_id\", msg.payload.sample_id);\n    global.set(\"sample_gear\", msg.payload.sample_gear);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 990,
+        "y": 140,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "38f795adc7ce566d",
+        "type": "function",
+        "z": "f7ff9c0e54da4b8e",
+        "name": "set data",
+        "func": "// 1. Setup Base Variables\nconst gear = msg.payload.sample_gear;\nconst now = new Date();\nconst dateStr = now.toISOString().split('T')[0]; // YYYY-MM-DD\n// Time as HHMM (no colons, no seconds) — matches sendUpdate format\nconst hh = String(now.getUTCHours()).padStart(2, '0');\nconst mm = String(now.getUTCMinutes()).padStart(2, '0');\nconst timeStr = hh + mm;\n\n// Helper to get global or fallback\nconst getG = (key, fallback) => global.get(key) ?? fallback;\n\n// 2. Define the Full Schema Template (All keys)\nconst allKeys = [\n    \"object_date\", \"object_time\", \"object_lat\", \"object_lon\",\n    \"object_date_end\", \"object_time_end\", \"object_lat_end\", \"object_lon_end\",\n    \"sample_net_mouth_diameter\", \"sample_net_length\", \"sample_net_mesh_size\",\n    \"sample_filtered_volume\", \"sample_concentration_factor\", \"sample_sieve_mesh_size\",\n    \"sample_depth\", \"sample_collected_volume\"\n];\n\nlet updates = {};\n\n// 3. Logic by Gear Type\n// All gears use getG() so user-entered values are preserved.\n// Defaults are only used when no value exists in globals.\nif (gear === \"Horizontal Net\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0),\n        object_date_end: getG(\"object_date_end\", getG(\"object_date\", dateStr)),\n        object_time_end: getG(\"object_time_end\", getG(\"object_time\", timeStr)),\n        object_lat_end: getG(\"object_lat_end\", getG(\"object_lat\", 0)),\n        object_lon_end: getG(\"object_lon_end\", getG(\"object_lon\", 0)),\n        sample_net_mouth_diameter: getG(\"sample_net_mouth_diameter\", 30),\n        sample_net_length: getG(\"sample_net_length\", 120),\n        sample_net_mesh_size: getG(\"sample_net_mesh_size\", 20),\n        sample_filtered_volume: getG(\"sample_filtered_volume\", 2000),\n        sample_concentration_factor: getG(\"sample_concentration_factor\", 1),\n        sample_sieve_mesh_size: getG(\"sample_sieve_mesh_size\", 200),\n        sample_depth: getG(\"sample_depth\", 1),\n        sample_collected_volume: getG(\"sample_collected_volume\", 50)\n    };\n}\nelse if (gear === \"Vertical Net\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0),\n        sample_net_mouth_diameter: getG(\"sample_net_mouth_diameter\", 30),\n        sample_net_length: getG(\"sample_net_length\", 120),\n        sample_net_mesh_size: getG(\"sample_net_mesh_size\", 20),\n        sample_filtered_volume: getG(\"sample_filtered_volume\", 2000),\n        sample_concentration_factor: getG(\"sample_concentration_factor\", 1),\n        sample_sieve_mesh_size: getG(\"sample_sieve_mesh_size\", 200),\n        sample_depth: getG(\"sample_depth\", 1),\n        sample_collected_volume: getG(\"sample_collected_volume\", 50)\n    };\n}\nelse if (gear === \"Niskin bottle\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0),\n        sample_concentration_factor: getG(\"sample_concentration_factor\", 1),\n        sample_sieve_mesh_size: getG(\"sample_sieve_mesh_size\", 200),\n        sample_depth: getG(\"sample_depth\", 1),\n        sample_collected_volume: getG(\"sample_collected_volume\", 50)\n    };\n}\nelse if (gear === \"Lab culture\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0)\n    };\n}\nelse if (gear === \"Demo / Test\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 48.587440060782704),\n        object_lon: getG(\"object_lon\", -3.838189224660975)\n    };\n}\n\n// 4. Final Processing: Sync to Global & Build Payload\nlet finalPayload = {};\n\nallKeys.forEach(key => {\n    if (updates.hasOwnProperty(key)) {\n        // Key is relevant to current gear type - use value (from getG with fallback)\n        finalPayload[key] = updates[key];\n        global.set(key, updates[key]);\n    } else {\n        // Key is NOT relevant to current gear type.\n        // Send null in payload (disabled fields show empty),\n        // but preserve global so user values survive gear switches.\n        finalPayload[key] = null;\n    }\n});\n\nmsg.payload = finalPayload;\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 100,
+        "y": 340,
+        "wires": [
+            [
+                "e7f23192557851e0",
+                "ba461390e1455794",
+                "9ddd0fbe2670f626",
+                "e4d9d690aa12d09c"
+            ]
+        ]
+    },
+    {
+        "id": "6a0b3b7b9f767135",
+        "type": "ui-template",
+        "z": "71ede8b7dd88d90e",
+        "group": "b274327af3807b79",
+        "page": "",
+        "ui": "",
+        "name": "Streaming",
+        "order": 1,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"pa-0 fill-height rounded-lg border\">\n    <v-row no-gutters class=\"fill-height justify-center align-center rounded-lg\">\n      <v-col cols=\"12\" class=\"d-flex align-center justify-center\">\n\n        <v-responsive :aspect-ratio=\"3/4\" class=\"iframe-wrapper\">\n          <v-card class=\"calibration-container rounded-lg\">\n\n            <!-- ── Stop Button ── -->\n            <v-btn v-if=\"status === 'running'\" color=\"error\" variant=\"elevated\"\n              class=\"position-absolute top-0 right-0 ma-4\" style=\"z-index: 1000;\" @click=\"stopCalibration\">\n              Stop Calibration\n            </v-btn>\n\n            <!-- ── Video Feed ── -->\n            <iframe src=\"/preview/node-red\" class=\"responsive-iframe\" @load=\"onIframeLoad\" ref=\"videoIframe\"></iframe>\n\n            <!-- ── Step 2: Colour-analysis focus zone ── -->\n            <div v-if=\"step === 2\" class=\"focus-overlay\">\n              <div class=\"crosshair\"></div>\n              <div class=\"focus-label\">ZONE ANALYSE COULEUR</div>\n            </div>\n\n            <!-- ── Step 3: Smart-grid overlay ── -->\n            <div v-show=\"step === 3\" class=\"smart-grid\">\n              <div v-for=\"(zone, i) in gridZones\" :key=\"i\" class=\"grid-cell\"\n                :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"></div>\n            </div>\n\n            <!-- ── Step 1: Init info card ── -->\n            <div v-if=\"step === 1\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title\">Initialization</div>\n                <div class=\"info-value\">{{ (led * 100).toFixed(1) }}%</div>\n                <div class=\"info-label\">LED Power</div>\n                <div class=\"info-row\"><span>Red gain:</span><span>{{ gains.red }}</span></div>\n                <div class=\"info-row\"><span>Blue gain:</span><span>{{ gains.blue }}</span></div>\n              </div>\n            </div>\n\n            <!-- ── Step 2: Saturation info card ── -->\n            <div v-if=\"step === 2\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title\">Desaturation</div>\n                <div class=\"info-value\" :class=\"satClass\">{{ currentSat.toFixed(1) }}%</div>\n                <div class=\"info-label\">Saturation</div>\n                <div class=\"progress-bar\">\n                  <div class=\"progress-fill\" :style=\"{ width: Math.max(0, 100 - currentSat * 10) + '%' }\"></div>\n                </div>\n                <div class=\"info-row\"><span>Red gain:</span><span>{{ gains.red }}</span></div>\n                <div class=\"info-row\"><span>Blue gain:</span><span>{{ gains.blue }}</span></div>\n                <div class=\"info-target\">Target: under 1.0%</div>\n              </div>\n            </div>\n\n            <!-- ── Step 3: Exposure info card ── -->\n            <div v-if=\"step === 3\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title\">Exposure</div>\n                <div class=\"info-value\" :class=\"lumClass\">{{ currentLum.toFixed(1) }}</div>\n                <div class=\"info-label\">Luminosity</div>\n                <div class=\"progress-bar\">\n                  <div class=\"progress-fill\" :style=\"{ width: (currentLum / 255) * 100 + '%' }\"></div>\n                </div>\n                <div class=\"info-row\"><span>LED:</span><span>{{ (led * 100).toFixed(1) }}%</span></div>\n                <div class=\"info-row\"><span>Zones:</span><span>{{ activeZonesCount }} / 400</span></div>\n                <div class=\"info-target\">Target: 230 ± 5</div>\n              </div>\n            </div>\n\n            <!-- ── Step 4: Complete info card ── -->\n            <div v-if=\"step === 4\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title success\">Complete</div>\n                <div class=\"info-row\"><span>LED:</span><span>{{ (led * 100).toFixed(1) }}%</span></div>\n                <div class=\"info-row\"><span>Luminosity:</span><span>{{ currentLum.toFixed(1) }}</span></div>\n                <div class=\"info-row\"><span>Saturation:</span><span>{{ currentSat.toFixed(1) }}%</span></div>\n                <div class=\"info-row\"><span>Red gain:</span><span>{{ gains.red }}</span></div>\n                <div class=\"info-row\"><span>Blue gain:</span><span>{{ gains.blue }}</span></div>\n                <div class=\"info-row\"><span>Valid zones:</span><span>{{ activeZonesCount }} / 400</span></div>\n              </div>\n            </div>\n\n            <!-- ── Error info card ── -->\n            <div v-if=\"status === 'error'\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title error\">ERROR</div>\n                <div class=\"info-label\">{{ lastError }}</div>\n              </div>\n            </div>\n\n            <!-- ── Hidden analysis canvas ── -->\n            <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n\n          </v-card>\n        </v-responsive>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  // ─────────────────────────────────────────────\n  // Node-RED UIBuilder / Dashboard bridge\n  // ─────────────────────────────────────────────\n  props: ['msg', 'send'],\n\n  data() {\n    return {\n      // ── Sequence state ──\n      status: 'idle',   // idle | running | success | error\n      step: 0,          // 0=idle  1=init  2=sat  3=lum  4=done\n      lastError: '',\n\n      // ── Live metrics ──\n      currentSat: 0,\n      currentLum: 0,\n\n      // ── Hardware state (reference preset) ──\n      led: 0.1,\n      gains: { red: 200, blue: 180 },\n\n      // ── Smart-grid config (4:3 canvas) ──\n      gridN: 20,\n      analysisW: 1200,\n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill(null).map((_, i) => ({ id: i, lum: 0, active: false })),\n\n      logs: []\n    };\n  },\n\n  computed: {\n    activeZonesCount() {\n      return this.gridZones.filter(z => z.active).length;\n    },\n    satClass() {\n      return this.currentSat < 1.0 ? 'value-ok' : 'value-wait';\n    },\n    lumClass() {\n      return Math.abs(this.currentLum - 230) <= 5 ? 'value-ok' : 'value-wait';\n    }\n  },\n\n  // ─────────────────────────────────────────────\n  // Incoming command listener (Node-RED → UI)\n  // ─────────────────────────────────────────────\n  watch: {\n    msg: {\n      handler(newMsg) {\n        if (!newMsg) return;\n        const p = newMsg?.payload ?? {};\n\n        if (p.acq_status === 'on')    this.startSequence();\n        else if (p.acq_status === 'off')   this.stopCalibration();\n        else if (p.acq_status === 'reset') this.resetState();\n      },\n      deep: true\n    }\n  },\n\n  methods: {\n\n    // ─────────────────────────────────────────────\n    // STATE MANAGEMENT\n    // ─────────────────────────────────────────────\n    resetState() {\n      this.status = 'idle';\n      this.step = 0;\n      this.lastError = '';\n      this.currentSat = 0;\n      this.currentLum = 0;\n      this.logs = [];\n      this.log('Reset complete.');\n    },\n\n    stopCalibration() {\n      this.status = 'idle';\n      this.step = 0;\n      this.log('Manual stop.');\n      this.sendStatus('stopped');\n    },\n\n    // ─────────────────────────────────────────────\n    // MAIN SEQUENCE\n    // ─────────────────────────────────────────────\n    async startSequence() {\n      if (this.status === 'running') {\n        this.stopCalibration();\n        return;\n      }\n\n      this.status  = 'running';\n      this.step    = 1;\n      this.logs    = [];\n      this.lastError = '';\n      this.log('Starting sequence...');\n      this.sendStatus('started');\n\n      try {\n        // ── Step 1: Hardware preset ──\n        await this.runInit();\n\n        // ── Step 2: Desaturation loop ──\n        this.step = 2;\n        await this.runSaturationLoop();\n\n        // ── Step 3: Smart-grid exposure loop ──\n        this.step = 3;\n        this.gridZones.forEach(z => { z.active = false; });\n        await this.runLightnessLoop();\n\n        // ── Done ──\n        this.status = 'success';\n        this.step   = 4;\n        this.log('Calibration complete!');\n\n        // Report final values back to Node-RED\n        if (this.send) {\n          this.send({\n            topic: 'calibration',\n            payload: {\n              status:           'complete',\n              led:              this.led,\n              gains:            this.gains,\n              finalLuminosity:  this.currentLum,\n              finalSaturation:  this.currentSat,\n              validZones:       this.activeZonesCount,\n              timestamp:        new Date().toISOString()\n            }\n          });\n        }\n\n        // Auto-return to idle after showing the complete card\n        await this.wait(2000);\n        if (this.status === 'success') this.resetState();\n\n      } catch (e) {\n        if (this.status !== 'idle') {\n          this.status    = 'error';\n          this.lastError = String(e);\n          this.log('ERROR: ' + e);\n\n          if (this.send) {\n            this.send({\n              topic: 'calibration',\n              payload: { status: 'error', error: String(e), step: this.step }\n            });\n          }\n        }\n      }\n    },\n\n    // ─────────────────────────────────────────────\n    // STEP 1 — INITIALISATION\n    // Preset: LED 0.1 / R200 B180  |  wait 2500 ms\n    // ─────────────────────────────────────────────\n    async runInit() {\n      this.log('Step 1: Preset → LED 0.1 / R200 B180');\n      this.led   = 0.1;\n      this.gains = { red: 200, blue: 180 };\n      this.sendIO();\n      await this.wait(2500);\n    },\n\n    // ─────────────────────────────────────────────\n    // STEP 2 — DESATURATION LOOP\n    // Zone: 100×100 px centre canvas\n    // Target: sat < 1.0 %  |  Kp = 0.8  |  2000 ms  |  25 iter max\n    // ─────────────────────────────────────────────\n    async runSaturationLoop() {\n      this.log('Step 2: Start desaturation...');\n      let iter = 0;\n\n      while (iter < 25 && this.status === 'running') {\n        const stats = await this.analyzeFrame(true);\n        this.currentSat = stats.sat;\n\n        if (stats.sat < 1.0) {\n          this.log(`Saturation OK: ${stats.sat.toFixed(1)}%`);\n          return;\n        }\n\n        const Kp   = 0.8;\n        const rErr = stats.g - stats.r;\n        const bErr = stats.g - stats.b;\n\n        this.gains.red  = Math.max(0, Math.min(255, Math.round(this.gains.red  + rErr * Kp)));\n        this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + bErr * Kp)));\n\n        this.sendIO();\n        this.log(`Iter ${iter}: Sat=${stats.sat.toFixed(1)}% (R${this.gains.red}/B${this.gains.blue})`);\n\n        await this.wait(2000);\n        iter++;\n      }\n\n      if (this.status === 'running') throw 'Saturation timeout';\n    },\n\n    // ─────────────────────────────────────────────\n    // STEP 3 — SMART-GRID EXPOSURE LOOP\n    // Grid: 20×20  |  Target: lum = 230 ± 5  |  600 ms  |  40 iter max\n    // Double-check confirmation at +200 ms before exiting\n    // ─────────────────────────────────────────────\n    async runLightnessLoop() {\n      this.log('Step 3: Start smart-grid exposure...');\n      let iter = 0;\n\n      while (iter < 40 && this.status === 'running') {\n        const stats = await this.analyzeFrame(false);\n        this.currentLum = stats.lum;\n\n        // Target reached? — double-check before declaring success\n        if (Math.abs(stats.lum - 230) <= 5) {\n          await this.wait(200);\n          const check = await this.analyzeFrame(false);\n          this.currentLum = check.lum;\n          if (Math.abs(check.lum - 230) <= 5) {\n            this.log(`Luminosity target met: ${check.lum.toFixed(1)}`);\n            return;\n          }\n        }\n\n        // LED correction\n        let nextLed;\n        if (stats.lum < 5) {\n          nextLed = Math.max(0.005, this.led * 4);           // Aggressive rescue\n        } else if (stats.lum > 252) {\n          nextLed = this.led * 0.5;                          // Hard clamp down\n        } else {\n          const ratio = 230 / (stats.lum || 1);\n          nextLed = (this.led * ratio * 0.9) + (this.led * 0.1); // 90% corrective + 10% current\n        }\n\n        this.led = Math.max(0, Math.min(1, nextLed));\n        this.sendIO();\n        this.log(`Iter ${iter}: Lum=${stats.lum.toFixed(1)} → LED=${(this.led * 100).toFixed(2)}%`);\n\n        await this.wait(600);\n        iter++;\n      }\n\n      if (this.status === 'running') throw 'Brightness timeout';\n    },\n\n    // ─────────────────────────────────────────────\n    // ANALYSIS ENGINE\n    // Captures video frame from iframe onto hidden canvas,\n    // then reads pixel data for saturation or smart-grid lum.\n    // ─────────────────────────────────────────────\n    async analyzeFrame(isSaturationStep) {\n      const iframe = this.$refs.videoIframe;\n      if (!iframe?.contentDocument) return { sat: 99, lum: 0, r: 0, g: 0, b: 0 };\n\n      const video = iframe.contentDocument.querySelector('video');\n      if (!video || video.videoWidth === 0) return { sat: 99, lum: 0, r: 0, g: 0, b: 0 };\n\n      const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n      ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n      // ── Saturation analysis: 100×100 centre patch ──\n      if (isSaturationStep) {\n        const size = 100;\n        const cx   = (this.analysisW - size) / 2;\n        const cy   = (this.analysisH - size) / 2;\n        const data = ctx.getImageData(cx, cy, size, size).data;\n\n        let r = 0, g = 0, b = 0, c = 0;\n        for (let i = 0; i < data.length; i += 4) {\n          r += data[i]; g += data[i + 1]; b += data[i + 2]; c++;\n        }\n        const avgR = r / c, avgG = g / c, avgB = b / c;\n        const max  = Math.max(avgR, avgG, avgB);\n        const min  = Math.min(avgR, avgG, avgB);\n        const sat  = max === 0 ? 0 : ((max - min) / max) * 100;\n\n        return { sat: parseFloat(sat.toFixed(1)), r: avgR, g: avgG, b: avgB };\n      }\n\n      // ── Luminosity analysis: 20×20 smart grid ──\n      const cellW = this.analysisW / this.gridN;\n      const cellH = this.analysisH / this.gridN;\n      const offX  = (cellW - this.sampleSize) / 2;\n      const offY  = (cellH - this.sampleSize) / 2;\n\n      let validLumSum = 0;\n      let validCount  = 0;\n\n      for (let i = 0; i < this.gridN; i++) {\n        for (let j = 0; j < this.gridN; j++) {\n          const idx  = i * this.gridN + j;\n          const x    = (j * cellW) + offX;\n          const y    = (i * cellH) + offY;\n          const data = ctx.getImageData(x, y, this.sampleSize, this.sampleSize).data;\n\n          let sum = 0, minP = 255;\n          for (let k = 0; k < data.length; k += 4) {\n            const l = (data[k] + data[k + 1] + data[k + 2]) / 3;\n            if (l < minP) minP = l;\n            sum += l;\n          }\n          const avg     = sum / (data.length / 4);\n          // Valid zone: uniform (avg - min ≤ 8) AND non-black (avg > 2)\n          const isValid = (avg - minP) <= this.sensitivityThreshold && avg > 2;\n\n          this.gridZones[idx].active = isValid;\n          this.gridZones[idx].lum    = avg;\n\n          if (isValid) {\n            validLumSum += avg;\n            validCount++;\n          }\n        }\n      }\n\n      return { lum: validCount > 0 ? validLumSum / validCount : 0 };\n    },\n\n    // ─────────────────────────────────────────────\n    // I/O — Hardware commands (UI → Node-RED)\n    // ─────────────────────────────────────────────\n\n    /** Send LED level + WB gains to hardware */\n    sendIO() {\n      if (!this.send) return;\n\n      // Light command\n      this.send({\n        topic: 'light',\n        payload: { action: 'on', value: Number(this.led.toFixed(12)) }\n      });\n\n      // Camera white-balance gains\n      this.send({\n        topic: 'imager/image',\n        payload: { action: 'settings', settings: { white_balance_gain: this.gains } }\n      });\n    },\n\n    /** Send a status-only message back to Node-RED */\n    sendStatus(status) {\n      if (!this.send) return;\n      this.send({\n        topic: 'calibration',\n        payload: { status, step: this.step, timestamp: new Date().toISOString() }\n      });\n    },\n\n    // ─────────────────────────────────────────────\n    // IFRAME STYLE INJECTION\n    // Cleans up Node-RED preview chrome so only the raw\n    // video fill is visible inside the rotated iframe.\n    // ─────────────────────────────────────────────\n    onIframeLoad() {\n      try {\n        const doc = this.$refs.videoIframe.contentDocument;\n        const s   = doc.createElement('style');\n        s.textContent = `\n          html { border: none; background: white; }\n          body { margin:0; width:100%; height:100%; overflow:hidden; background:black; }\n          img, video { width:100%; height:100%; object-fit:fill; display:block; }\n          #root { background: rgb(230,229,231); border: none; }\n          .zoomist-slider, .zoomist-zoomer { display: none !important; }\n          button { display: none !important; }\n        `;\n        doc.head.appendChild(s);\n      } catch (e) {\n        console.error('Iframe style injection failed:', e);\n      }\n    },\n\n    // ─────────────────────────────────────────────\n    // UTILS\n    // ─────────────────────────────────────────────\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n\n    log(txt) {\n      const time = new Date().toLocaleTimeString().split(' ')[0];\n      this.logs.unshift({ time, txt });\n      if (this.logs.length > 20) this.logs.pop();\n    }\n  }\n};\n</script>\n\n<style scoped>\n  /* ── Layout ── */\n  .iframe-wrapper {\n    width: 100%;\n    margin: 0 auto;\n    font-family: 'Roboto', sans-serif;\n  }\n\n  .calibration-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background-color: rgb(230 229 231);\n    border-radius: 4px;\n  }\n\n  /* ── Video feed (rotated 90° to compensate physical camera orientation) ── */\n  .responsive-iframe {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 133.33%;\n    height: 75%;\n    border: none;\n    pointer-events: none;\n    transform: translate(-50%, -50%) rotate(-90deg);\n    z-index: 1;\n  }\n\n  /* ── Saturation focus box ── */\n  .focus-overlay {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100px;\n    height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);\n    z-index: 5;\n    pointer-events: none;\n  }\n\n  .crosshair {\n    width: 10px;\n    height: 10px;\n    background: orange;\n    border-radius: 50%;\n  }\n\n  .focus-label {\n    position: absolute;\n    top: -25px;\n    width: 200px;\n    text-align: center;\n    color: orange;\n    font-size: 10px;\n    font-weight: bold;\n    letter-spacing: 1px;\n  }\n\n  /* ── Smart grid ── */\n  .smart-grid {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 5;\n    pointer-events: none;\n  }\n\n  .grid-cell {\n    border: 0.5px solid rgba(62, 135, 216, 0.1);\n  }\n\n  .cell-active {\n    background-color: rgba(62, 135, 216, 0.15);\n    border: 1px solid #3e87d8;\n  }\n\n  .cell-rejected {\n    background-color: rgba(255, 0, 0, 0.15);\n  }\n\n  /* ── Info cards ── */\n  .overlay-center {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10;\n    pointer-events: none;\n  }\n\n  .info-card {\n    background: #fff;\n    border-radius: 4px;\n    padding: 16px 24px;\n    min-width: 260px;\n    text-align: center;\n    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);\n    pointer-events: auto;\n  }\n\n  .info-title {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #3e87d8;\n    margin-bottom: 8px;\n    letter-spacing: 0.089em;\n    text-transform: uppercase;\n  }\n\n  .info-title.success {\n    color: #4CAF50;\n  }\n\n  .info-title.error {\n    color: #FF5252;\n  }\n\n  .info-value {\n    font-size: 2.125rem;\n    font-weight: 400;\n    color: rgba(0, 0, 0, 0.87);\n    margin-bottom: 4px;\n  }\n\n  .value-ok {\n    color: #4CAF50;\n  }\n\n  .value-wait {\n    color: #FB8C00;\n  }\n\n  .info-label {\n    font-size: 0.75rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 16px;\n  }\n\n  .info-row {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.8125rem;\n    color: rgba(0, 0, 0, 0.7);\n    margin: 4px 0;\n  }\n\n  .info-target {\n    font-size: 0.75rem;\n    color: #3e87d8;\n    margin-top: 16px;\n    padding-top: 8px;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    font-weight: 500;\n  }\n\n  .progress-bar {\n    width: 100%;\n    height: 4px;\n    background: rgba(0, 0, 0, 0.05);\n    border-radius: 4px;\n    overflow: hidden;\n    margin: 12px 0;\n  }\n\n  .progress-fill {\n    height: 100%;\n    background: #3e87d8;\n    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 750,
+        "y": 340,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "79bccc0355eb5d87",
+        "type": "ui-template",
+        "z": "71ede8b7dd88d90e",
+        "group": "d2f77573ed4317e4",
+        "page": "",
+        "ui": "",
+        "name": "body",
+        "order": 1,
+        "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\n        <v-alert v-if=\"sample_project || sample_id\" type=\"info\" variant=\"tonal\" density=\"compact\" class=\"mb-4\">\n          <div class=\"d-flex flex-wrap ga-4 text-body-2\">\n            <span v-if=\"sample_project\"><strong>Project:</strong> {{ sample_project }}</span>\n            <span v-if=\"sample_id\"><strong>Sample:</strong> {{ sample_id }}</span>\n            <span v-if=\"sample_operator\"><strong>Operator:</strong> {{ sample_operator }}</span>\n            <span v-if=\"sample_gear\"><strong>Gear:</strong> {{ sample_gear }}</span>\n          </div>\n        </v-alert>\n\n        <v-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pr-sm-2\">\n            <v-text-field v-model=\"acq_id\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\"\n              :disabled=\"acq_status === 'on'\">\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\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pl-sm-2\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\"\n              label=\"Number of Images\" suffix=\"img\" density=\"compact\"\n              @update:model-value=\"autoCalculateVolumes(true)\"\n              :disabled=\"acq_status === 'on'\">\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 class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-btn-toggle v-model=\"tempMag\" mandatory divided variant=\"outlined\" color=\"primary\"\n              class=\"w-100 font-weight-bold d-flex flex-wrap\" style=\"height: 80px !important\"\n              @update:model-value=\"confirmMagChange\" :disabled=\"acq_status === 'on'\">\n              <v-btn value=\"high\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-small</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">High Mag (100µm)</span>\n              </v-btn>\n              <v-btn value=\"medium\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-medium</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Medium Mag (300µm)</span>\n              </v-btn>\n              <v-btn value=\"low\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Low Mag (500µm)</span>\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels variant=\"accordion\" class=\"border rounded pa-0 mt-4\">\n          <v-expansion-panel elevation=\"0\">\n            <v-expansion-panel-title class=\"pa-4 bg-primary text-subtitle-1 font-weight-bold\">\n              Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-0 bg-grey-lighten-5\">\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowcell Thickness :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_flowcell_thickness\" suffix=\"µm\" variant=\"flat\" readonly\n                    bg-color=\"bg-grey-lighten-5\" hide-details>\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowcell Thickness', 'Thickness of the flowcell used in this configuration (µm).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowrate between images :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_interframe_flowrate\" :min=\"1\" :step=\"1\" suffix=\"mL/min\" variant=\"outlined\"\n                    type=\"number\" bg-color=\"white\" hide-details\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowrate between images','Speed of the flow 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-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Stabilization Delay :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model.number=\"acq_stabilization_delay\" :min=\"0\" :step=\"0.1\" suffix=\"s\"\n                    variant=\"outlined\" type=\"number\" bg-color=\"white\" hide-details @input=\"sendUpdate()\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Stabilization Delay','Time to wait for flow stabilization before taking an image.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex flex-column justify-center\">\n                  <div class=\"d-flex align-center mb-1\">\n                    <span class=\"text-subtitle-1 text-medium-emphasis\">Volume between images :</span>\n                  </div>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"Number((acq_interframe_volume * 1000).toFixed(2))\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(true); }\"\n                    type=\"number\" :min=\"0.1\" :step=\"0.1\" variant=\"outlined\" hide-details suffix=\"µL\" bg-color=\"white\"\n                    :disabled=\"acq_status === 'on'\">\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-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n\n        <v-row class=\"align-center pa-0 mt-4\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-textarea v-model=\"acq_comment\" label=\"Acquisition comment\" variant=\"outlined\" rows=\"3\" auto-grow\n              hide-details placeholder=\"Optional notes...\" bg-color=\"white\" @input=\"sendUpdate()\"\n              :disabled=\"acq_status === 'on'\">\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 class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\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              style=\"height: 60px !important\">\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-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1 mt-4\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-6 rounded-lg\">\n        <v-card-title class=\"text-h6 px-0\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2 px-0 pt-2\"></v-card-text>\n        <v-card-actions class=\"px-0 pb-0\">\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"text\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n    <v-dialog v-model=\"magConfirmDialog\" max-width=\"500\" persistent>\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"d-flex align-center text-h5 font-weight-bold\">\n          <v-icon color=\"primary\" size=\"large\" class=\"mr-3\">mdi-cog-sync</v-icon>\n          Hardware Setup\n        </v-card-title>\n        <v-card-text class=\"pa-4\">\n          <p class=\"text-body-1 mb-6\">\n            Switching to <v-chip color=\"primary\" size=\"small\" label class=\"font-weight-bold\">{{ tempMag?.toUpperCase() }}</v-chip>.\n          </p>\n          <div class=\"bg-grey-lighten-4 rounded-lg pa-4 mb-4\">\n            <p class=\"text-subtitle-2 mb-3 font-weight-bold text-primary\">System configuration:</p>\n            <ul class=\"ml-6 text-body-2\">\n              <li class=\"mb-1\"><strong>Lens:</strong> {{ getPreviewSettings(tempMag).tube }} / {{ getPreviewSettings(tempMag).obj }}</li>\n              <li class=\"mb-1\"><strong>Pixel:</strong> {{ getPreviewSettings(tempMag).pixel }} µm</li>\n              <li class=\"mb-1\"><strong>Flowcell:</strong> {{ getPreviewSettings(tempMag).thickness }} µm</li>\n              <li class=\"mb-1\"><strong>Flowrate:</strong> {{ getPreviewSettings(tempMag).flowrate }} mL/min</li>\n            </ul>\n          </div>\n          <p class=\"text-caption text-medium-emphasis\">Parameters will be updated automatically.</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-btn variant=\"text\" @click=\"cancelMagChange\">Cancel</v-btn>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"flat\" @click=\"applyMagChange\">Confirm & Update</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: \"\",\n      acq_nb_frame: 10,\n      acq_interframe_volume: 0.010,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      acq_status: \"off\",\n      acq_status_message: \"\",\n\n      currentMag: \"medium\",\n      tempMag: \"medium\",\n      magConfirmDialog: false,\n\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n      calibration_pixel_size: 0.75,\n      acq_flowcell_thickness: 300,\n      acq_tube_lens_reference: \"25mm_F1.8\",\n      acq_objective_lens_reference: \"12mm_F1.8\",\n      acq_interframe_flowrate: 2,\n      acq_stabilization_delay: 0.5,\n\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\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        // Hydrate acq_id from payload, stripping the \"A_\" prefix for the UI model\n        if (p.acq_id !== undefined) {\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        }\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) this.sample_id = p.sample_id;\n        if (p.sample_operator !== undefined) this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        \n        if (\"acq_comment\" in p) this.acq_comment = p.acq_comment ?? \"\";\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\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.acq_tube_lens_reference !== undefined) this.acq_tube_lens_reference = p.acq_tube_lens_reference;\n        if (p.acq_objective_lens_reference !== undefined) this.acq_objective_lens_reference = p.acq_objective_lens_reference;\n        if (p.acq_interframe_flowrate !== undefined) this.acq_interframe_flowrate = Number(p.acq_interframe_flowrate);\n        if (p.acq_stabilization_delay !== undefined) this.acq_stabilization_delay = Number(p.acq_stabilization_delay);\n\n        if (p.acq_magnification) {\n          this.currentMag = p.acq_magnification;\n          this.tempMag = p.acq_magnification;\n        } else if (p.process_pixel_size || p.calibration_pixel_size) {\n          const size = Number(p.process_pixel_size || p.calibration_pixel_size);\n          if (Math.abs(size - 0.53) < 0.1) { this.currentMag = \"high\"; this.tempMag = \"high\"; }\n          else if (Math.abs(size - 1.34) < 0.1) { this.currentMag = \"low\"; this.tempMag = \"low\"; }\n          else { this.currentMag = \"medium\"; this.tempMag = \"medium\"; }\n        }\n\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.process_pixel_size !== undefined) this.calibration_pixel_size = Number(p.process_pixel_size);\n\n        // --- NEW LOGIC: Safely parse acq_status to guarantee strict \"on\" or \"off\" ---\n        if (p.acq_status !== undefined) {\n          const statusStr = String(p.acq_status).toLowerCase();\n          if (statusStr === 'on' || statusStr === 'true' || statusStr === '1') {\n            this.acq_status = 'on';\n          } else {\n            this.acq_status = 'off';\n          }\n        }\n\n        // Handle the status message and infer toggle state ONLY if acq_status wasn't explicitly provided\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          \n          if (p.acq_status === undefined) {\n            const s = String(p.status).toLowerCase();\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\")) this.acq_status = \"on\";\n            if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\")) this.acq_status = \"off\";\n          }\n        }\n\n        if (topic === \"status/imager\" && (p.status === \"Done\" || p.status?.includes(\"error\"))) {\n          this.incrementAcqId();\n          this.sendUpdate();\n        }\n\n        this.autoCalculateVolumes(false);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.autoCalculateVolumes(false);\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    confirmMagChange() {\n      this.magConfirmDialog = true;\n    },\n\n    cancelMagChange() {\n      this.magConfirmDialog = false;\n      this.tempMag = this.currentMag;\n    },\n\n    getPreviewSettings(mag) {\n      const settings = {\n        high:   { tube: \"35mm_F2.4\", obj: \"12mm_F2\",     pixel: 0.53, thickness: 100, flowrate: 1 },\n        medium: { tube: \"25mm_F1.8\", obj: \"12mm_F1.8\",   pixel: 0.75, thickness: 300, flowrate: 2 },\n        low:    { tube: \"25mm_F2.0\", obj: \"21.8mm_F2.8\", pixel: 1.34, thickness: 500, flowrate: 3 }\n      };\n      return settings[mag] || settings.medium;\n    },\n\n    applyMagChange() {\n      this.currentMag = this.tempMag;\n\n      const settings = {\n        high:   { tube_lens: \"35mm_F2.4\", obj_lens: \"12mm_F2\",     pixel_size: 0.53, thickness: 100, inter_vol_ul: 3,  flowrate: 1, stabilization: 1.5 },\n        medium: { tube_lens: \"25mm_F1.8\", obj_lens: \"12mm_F1.8\",   pixel_size: 0.75, thickness: 300, inter_vol_ul: 6,  flowrate: 3, stabilization: 0.5 },\n        low:    { tube_lens: \"25mm_F2.0\", obj_lens: \"21.8mm_F2.8\", pixel_size: 1.34, thickness: 500, inter_vol_ul: 15, flowrate: 3, stabilization: 0.5 }\n      };\n\n      const config = settings[this.currentMag];\n      if (config) {\n        this.acq_tube_lens_reference      = config.tube_lens;\n        this.acq_objective_lens_reference = config.obj_lens;\n        this.calibration_pixel_size       = config.pixel_size;\n        this.acq_flowcell_thickness       = config.thickness;\n        this.acq_interframe_flowrate      = config.flowrate;\n        this.acq_interframe_volume        = config.inter_vol_ul / 1000;\n        this.acq_stabilization_delay      = config.stabilization;\n      }\n\n      this.magConfirmDialog = false;\n      this.autoCalculateVolumes(true);\n      this.sendUpdate({ magnification_change: this.currentMag });\n    },\n\n    incrementAcqId() {\n      const current = String(this.acq_id || \"0\");\n      const num = parseInt(current, 10);\n      const padLen = current.length > 0 ? current.length : 1;\n      this.acq_id = String((isNaN(num) ? 0 : num) + 1).padStart(padLen, \"0\");\n    },\n\n    autoCalculateVolumes(emit = true) {\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        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        this.frame_volume_um3  = w_um * h_um * this.acq_flowcell_thickness;\n        this.acq_imaged_volume = (this.frame_volume_um3 / 1e12) * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3  = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      this.acq_pumped_volume = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      if (emit) this.sendUpdate();\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n        this.sendUpdate();\n        this.acq_status_message = \"Acquisition stopped. ID incremented.\";\n      } else {\n        this.sendUpdate({\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_stabilization_delay: this.acq_stabilization_delay,\n          acq_interframe_flowrate: this.acq_interframe_flowrate\n        });\n      }\n    },\n    showVolumeImagedHint() {\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\"><strong>Volume Imaged</strong> is the fluid volume captured by the optics.</p>\n        <v-divider class=\"my-3\"></v-divider>\n        <ul class=\"ml-4\">\n          <li><strong>Width:</strong> ${Math.round(this.sensor_width_um)} µm</li>\n          <li><strong>Height:</strong> ${Math.round(this.sensor_height_um)} µm</li>\n          <li><strong>Thickness:</strong> ${this.acq_flowcell_thickness} µm</li>\n          <li><strong>Pixel Size:</strong> ${this.calibration_pixel_size} µm</li>\n        </ul>\n        <p class=\"mt-4\">Total = ${this.acq_nb_frame} imgs × ${this.fmt(this.frame_volume_ml)} mL = <strong>${this.fmt(this.acq_imaged_volume)} mL</strong></p>\n      </div>`;\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const html = `<p><b>Total Volume Displaced</b> corresponds to the volume displaced between images.</p>\n        <ul>\n          <li><b>Inter-frame Volume:</b> ${this.fmt(this.acq_interframe_volume)} mL</li>\n          <li><b>Number of Images:</b> ${this.acq_nb_frame}</li>\n        </ul>\n        <p><b>Calculation:</b> ${this.fmt(this.acq_interframe_volume)} mL × ${this.acq_nb_frame} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\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      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(Number(this.acq_imaged_volume).toFixed(3)),\n          acq_pumped_volume:              Number(Number(this.acq_pumped_volume).toFixed(3)),\n          acq_comment:                    this.acq_comment,\n          acq_status:                     this.acq_status,\n          acq_magnification:              this.currentMag,\n          acq_tube_lens_reference:        this.acq_tube_lens_reference,\n          acq_objective_lens_reference:   this.acq_objective_lens_reference,\n          process_pixel_size:             this.calibration_pixel_size,\n          calibration_pixel_size:         this.calibration_pixel_size,\n          sensor_width_um:                this.sensor_width_um,\n          sensor_height_um:               this.sensor_height_um,\n          acq_flowcell_thickness:         this.acq_flowcell_thickness,\n          acq_interframe_flowrate:        this.acq_interframe_flowrate,\n          acq_stabilization_delay:        this.acq_stabilization_delay,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer { cursor: pointer; }\n  .v-card-text { padding: 0 !important; }\n  .v-card { border: none; }\n  .v-container { background: #eef3ff; }\n  .v-expansion-panel-text { padding-left: 0 !important; padding-right: 0 !important; }\n  :deep(.v-field__prefix) { align-self: center; padding-top: 0 !important; margin-top: 0 !important; }\n  :deep(.v-field__field) { align-items: center; }\n  .nrdb-app .v-field--variant-outlined {\n    --v-field-input-padding-top: 12px;\n    --v-field-input-padding-bottom: 12px;\n  }\n  .border { border: 1px solid #cccccc !important; }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 310,
+        "y": 140,
+        "wires": [
+            [
+                "e44fd64f57f48140"
+            ]
+        ]
+    },
+    {
+        "id": "6001550c3befb6ea",
+        "type": "ui-template",
+        "z": "71ede8b7dd88d90e",
+        "group": "3ae252a2e5abca89",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden border bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* État actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* Séparateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou coloré pour le repère visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF même sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "74aa092817adc6f0",
+        "type": "function",
+        "z": "71ede8b7dd88d90e",
+        "name": "set acq_params",
+        "func": "// On récupère le payload\nconst p = msg.payload;\n\n// On ne procède que si le payload est un objet\nif (p && typeof p === 'object') {\n\n    // Liste des paramètres à surveiller et à stocker\n    // On boucle sur les clés pour éviter de répéter 20 fois \"if(p.x !== undefined)\"\n    const keys = [\n        \"acq_id\", \"acq_nb_frame\", \"acq_interframe_volume\", \n        \"acq_imaged_volume\", \"acq_pumped_volume\", \"acq_comment\",\n        \"acq_status\", \"acq_magnification\", \"acq_tube_lens_reference\",\n        \"acq_objective_lens_reference\", \"process_pixel_size\",\n        \"calibration_pixel_size\", \"calibration_led_intensity\",\n        \"sensor_width_um\", \"sensor_height_um\", \"acq_flowcell_thickness\",\n        \"acq_interframe_flowrate\", \"acq_stabilization_delay\",\n        \"acq_start_timestamp\"\n    ];\n\n    keys.forEach(key => {\n        if (p[key] !== undefined) {\n            global.set(key, p[key]);\n        }\n    });\n\n    // Cas particuliers (noms de propriétés différents entre msg et global)\n    if (p.progression !== undefined) global.set(\"acq_progression\", p.progression);\n    if (p.duration_left !== undefined) global.set(\"acq_duration_left\", p.duration_left);\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 120,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ab83c951efd3e647",
+        "type": "ui-event",
+        "z": "71ede8b7dd88d90e",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "5a65f683c152b736"
+            ]
+        ]
+    },
+    {
+        "id": "5a65f683c152b736",
+        "type": "switch",
+        "z": "71ede8b7dd88d90e",
+        "name": "msg.payload.page.path === \"/acquisition\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/acquisition",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 330,
+        "y": 40,
+        "wires": [
+            [
+                "31fab063b7078fe6"
+            ]
+        ]
+    },
+    {
+        "id": "31fab063b7078fe6",
+        "type": "function",
+        "z": "71ede8b7dd88d90e",
+        "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": [
+            [
+                "79bccc0355eb5d87"
+            ]
+        ]
+    },
+    {
+        "id": "740af1e4fccda6b3",
+        "type": "mqtt in",
+        "z": "71ede8b7dd88d90e",
+        "name": "",
+        "topic": "status/imager",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 90,
+        "y": 200,
+        "wires": [
+            [
+                "79bccc0355eb5d87"
+            ]
+        ]
+    },
+    {
+        "id": "ff1fcb16bcb6619e",
+        "type": "mqtt out",
+        "z": "71ede8b7dd88d90e",
+        "name": "MQTT",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 1110,
+        "y": 220,
+        "wires": []
+    },
+    {
+        "id": "4a02deeb69a27d00",
+        "type": "function",
+        "z": "71ede8b7dd88d90e",
+        "name": "update_config",
+        "func": "const keys = global.keys();\nlet config = {};\n\nkeys.forEach(key => {\n    if (!key.startsWith('$')) {\n        if (\n            key.startsWith('sample_') ||\n            key.startsWith('acq_') ||\n            key.startsWith('object_') ||\n            key.startsWith('process_') ||\n            key.startsWith('img_')\n        ) {\n            config[key] = global.get(key);\n        }\n    }\n});\n\n// Compose fully-qualified IDs for unique EcoTaxa naming\nconst project = config.sample_project || \"\";\nconst sampleRaw = String(config.sample_id || \"\");\nconst acqRaw = String(config.acq_id || \"\");\n\nif (project && !sampleRaw.startsWith(project + \"_\")) {\n    config.sample_id = project + \"_\" + sampleRaw;\n}\nconst finalSample = String(config.sample_id || \"\");\nif (finalSample && !acqRaw.startsWith(finalSample + \"_\")) {\n    config.acq_id = finalSample + \"_\" + acqRaw;\n}\n\n// Sanitize spaces in IDs to match filesystem paths\n// (the Python imager replaces spaces with underscores in directory names)\nconfig.sample_id = String(config.sample_id || \"\").replace(/ /g, \"_\");\nconfig.acq_id = String(config.acq_id || \"\").replace(/ /g, \"_\");\n\nmsg.topic = \"imager/image\";\n\nmsg.payload = {\n    action: \"update_config\",\n    config: config\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 220,
+        "wires": [
+            [
+                "ff1fcb16bcb6619e"
+            ]
+        ]
+    },
+    {
+        "id": "908239a5c01e9061",
+        "type": "function",
+        "z": "71ede8b7dd88d90e",
+        "name": "start acquisition",
+        "func": "const acq_interframe_volume = msg.payload.acq_interframe_volume\n  || global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = msg.payload.acq_nb_frame\n  || global.get(\"acq_nb_frame\") || 0;\nconst acq_stabilization_delay = msg.payload.acq_stabilization_delay\n  || global.get(\"acq_stabilization_delay\") || 0;\nconst acq_interframe_flowrate = msg.payload.acq_interframe_flowrate\n  || global.get(\"acq_interframe_flowrate\") || 0;\n\nmsg.payload = {\n    action: \"image\",\n    pump_direction: \"FORWARD\",\n    volume: acq_interframe_volume,\n    nb_frame: acq_nb_frame,\n    sleep: acq_stabilization_delay,\n    flowrate: acq_interframe_flowrate,\n};\n\nmsg.topic = \"imager/image\";\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 280,
+        "wires": [
+            [
+                "51e3db016f2cdf07"
+            ]
+        ]
+    },
+    {
+        "id": "5eb0686bb01d4643",
+        "type": "mqtt out",
+        "z": "71ede8b7dd88d90e",
+        "name": "MQTT",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 1110,
+        "y": 280,
+        "wires": []
+    },
+    {
+        "id": "98dde1119867adf0",
+        "type": "switch",
+        "z": "71ede8b7dd88d90e",
+        "name": "",
+        "property": "payload.acq_status",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "off",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "on",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 550,
+        "y": 220,
+        "wires": [
+            [
+                "7c4e3258ef8f22c0"
+            ],
+            [
+                "4a02deeb69a27d00",
+                "908239a5c01e9061"
+            ]
+        ]
+    },
+    {
+        "id": "7c4e3258ef8f22c0",
+        "type": "function",
+        "z": "71ede8b7dd88d90e",
+        "name": "stop acquisition",
+        "func": "// Stop the imager acquisition\nvar stopImager = { topic: \"imager/image\", payload: { action: \"stop\" } };\n\n// Also send pump stop command as failsafe\nvar stopPump = { topic: \"actuator/pump\", payload: { action: \"stop\" } };\n\n// Return both messages to be sent\nreturn [[stopImager, stopPump]];\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 760,
+        "y": 160,
+        "wires": [
+            [
+                "687e8f43fbf72b84"
+            ]
+        ]
+    },
+    {
+        "id": "687e8f43fbf72b84",
+        "type": "mqtt out",
+        "z": "71ede8b7dd88d90e",
+        "name": "MQTT",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 1110,
+        "y": 160,
+        "wires": []
+    },
+    {
+        "id": "7814ecbf379005bd",
+        "type": "switch",
+        "z": "71ede8b7dd88d90e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "neq",
+                "v": "$pageview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 310,
+        "y": 220,
+        "wires": [
+            [
+                "98dde1119867adf0",
+                "74aa092817adc6f0"
+            ]
+        ]
+    },
+    {
+        "id": "51e3db016f2cdf07",
+        "type": "delay",
+        "z": "71ede8b7dd88d90e",
+        "name": "",
+        "pauseType": "delay",
+        "timeout": "200",
+        "timeoutUnits": "milliseconds",
+        "rate": "1",
+        "nbRateUnits": "1",
+        "rateUnits": "second",
+        "randomFirst": "1",
+        "randomLast": "5",
+        "randomUnits": "seconds",
+        "drop": false,
+        "allowrate": false,
+        "outputs": 1,
+        "x": 950,
+        "y": 280,
+        "wires": [
+            [
+                "5eb0686bb01d4643"
+            ]
+        ]
+    },
+    {
+        "id": "e44fd64f57f48140",
+        "type": "switch",
+        "z": "71ede8b7dd88d90e",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "neq",
+                "v": "$pageleave",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 310,
+        "y": 180,
+        "wires": [
+            [
+                "7814ecbf379005bd"
+            ]
+        ]
+    },
+    {
+        "id": "3841297f254854cf",
+        "type": "ui-event",
+        "z": "524b7620431210e8",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "66f970bece31600d"
+            ]
+        ]
+    },
+    {
+        "id": "66f970bece31600d",
+        "type": "switch",
+        "z": "524b7620431210e8",
+        "name": "msg.payload.page.path === \"/segmentation\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/segmentation",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 330,
+        "y": 40,
+        "wires": [
+            [
+                "773960d6099cab47",
+                "aa1309fda7fde8f2",
+                "a1b2c3d4e5f60005"
+            ]
+        ]
+    },
+    {
+        "id": "773960d6099cab47",
+        "type": "list acquisitions",
+        "z": "524b7620431210e8",
+        "name": "",
+        "x": 100,
+        "y": 140,
+        "wires": [
+            [
+                "8a22543633712279"
+            ]
+        ]
+    },
+    {
+        "id": "3ad2613862513bb0",
+        "type": "ui-template",
+        "z": "524b7620431210e8",
+        "group": "9b992ca6515ed058",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* État actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* Séparateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou coloré pour le repère visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF même sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1520,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "f9e776957dfa61b0",
+        "type": "mqtt out",
+        "z": "524b7620431210e8",
+        "name": "MQTT",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "respTopic": "",
+        "contentType": "",
+        "userProps": "",
+        "correl": "",
+        "expiry": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 1210,
+        "y": 140,
+        "wires": []
+    },
+    {
+        "id": "60ae065050fc2ad3",
+        "type": "switch",
+        "z": "524b7620431210e8",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "segmenter/segment",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 1030,
+        "y": 140,
+        "wires": [
+            [
+                "f9e776957dfa61b0",
+                "3314fac880c6a656"
+            ]
+        ]
+    },
+    {
+        "id": "9a2e04f65e0432e1",
+        "type": "mqtt in",
+        "z": "524b7620431210e8",
+        "name": "",
+        "topic": "status/segmenter",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 100,
+        "y": 260,
+        "wires": [
+            [
+                "e2db15bb9c3c254f",
+                "a1b2c3d4e5f60003"
+            ]
+        ]
+    },
+    {
+        "id": "e2db15bb9c3c254f",
+        "type": "ui-template",
+        "z": "524b7620431210e8",
+        "group": "402b3d24c87ab0d2",
+        "page": "",
+        "ui": "",
+        "name": "Details of Segmentation",
+        "order": 1,
+        "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=\"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 pa-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,
+        "templateScope": "local",
+        "className": "",
+        "x": 370,
+        "y": 300,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "312de75fd2144c81",
+        "type": "switch",
+        "z": "524b7620431210e8",
+        "name": "",
+        "property": "payload.is_segmented",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "true"
+            },
+            {
+                "t": "false"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 510,
+        "y": 140,
+        "wires": [
+            [],
+            [
+                "6e43a35e8dcf2b3b"
+            ]
+        ]
+    },
+    {
+        "id": "3314fac880c6a656",
+        "type": "function",
+        "z": "524b7620431210e8",
+        "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    global.set(\"process_min_ESD\", msg.payload.settings.process_min_ESD);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1220,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "aa1309fda7fde8f2",
+        "type": "function",
+        "z": "524b7620431210e8",
+        "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": 200,
+        "wires": [
+            [
+                "e2db15bb9c3c254f"
+            ]
+        ]
+    },
+    {
+        "id": "6e43a35e8dcf2b3b",
+        "type": "function",
+        "z": "524b7620431210e8",
+        "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;\nmsg.payload.open_dialog = true;\n\n// Return the modified message\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 700,
+        "y": 140,
+        "wires": [
+            [
+                "60bfa71a5e7fc2d5"
+            ]
+        ]
+    },
+    {
+        "id": "60bfa71a5e7fc2d5",
+        "type": "ui-template",
+        "z": "524b7620431210e8",
+        "group": "bfd4acb7b243514f",
+        "page": "",
+        "ui": "",
+        "name": "Dialog",
+        "order": 2,
+        "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        {{ batchMode ? 'Batch Segmentation' : 'Segmentation Required' }}\n      </v-card-title>\n\n      <v-card-text>\n        <p v-if=\"batchMode\">\n          You are about to segment <strong>{{ batchCount }}</strong> acquisitions.<br>\n          Do you want to start the segmentation queue?\n        </p>\n        <p v-else>\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        <!-- Single acquisition details -->\n        <v-list v-if=\"!batchMode\" 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        <!-- Batch acquisition summary -->\n        <v-list v-else density=\"compact\">\n          <v-list-item v-for=\"(item, idx) in batchItems.slice(0, 5)\" :key=\"idx\">\n            <v-list-item-title>{{ item.project_name }} / {{ item.sample_id }} / {{ item.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item v-if=\"batchItems.length > 5\">\n            <v-list-item-title class=\"text-grey\">...and {{ batchItems.length - 5 }} more</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=\"1\"\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          {{ batchMode ? 'Start Queue' : 'Segment' }}\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n<script>\n  export default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false,\n      process_min_ESD: 20,\n      isReady: false,\n      batchMode: false,\n      batchCount: 0,\n      batchItems: [],\n    };\n  },\n\n  mounted() {\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        if (!this.isReady) return;\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n\n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          this.batchMode = p.batch_mode === true;\n          this.batchCount = p.batch_count || 0;\n          this.batchItems = p.batch_items || [];\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 20;\n          this.showDialog = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    sendSegment() {\n      if (this.batchMode) {\n        // Batch mode: send queue_confirmed to the Queue Processor\n        const outMsg = {\n          topic: \"queue_confirmed\",\n          payload: {\n            items: this.batchItems,\n            process_min_ESD: this.process_min_ESD,\n          },\n        };\n        this.send(outMsg);\n      } else {\n        // Single mode: existing behavior\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        this.send(outMsg);\n      }\n      this.showDialog = false;\n      this.batchMode = false;\n    },\n  },\n};\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 870,
+        "y": 140,
+        "wires": [
+            [
+                "60ae065050fc2ad3",
+                "a1b2c3d4e5f60002"
+            ]
+        ]
+    },
+    {
+        "id": "8a22543633712279",
+        "type": "ui-template",
+        "z": "524b7620431210e8",
+        "group": "bfd4acb7b243514f",
+        "page": "",
+        "ui": "",
+        "name": "List of Acquisitions",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <!-- Selection toolbar -->\n  <div v-if=\"selected.length > 0\" class=\"d-flex align-center pa-2 bg-blue-lighten-5 rounded mb-2\">\n    <span class=\"text-body-2 font-weight-medium mr-4\">\n      {{ selected.length }} selected\n    </span>\n    <v-btn color=\"primary\" variant=\"flat\" size=\"small\" @click=\"segmentSelected\" :disabled=\"queueActive\">\n      <v-icon start>mdi-play-box-multiple-outline</v-icon>\n      Segment Selected\n    </v-btn>\n    <v-btn variant=\"text\" size=\"small\" class=\"ml-2\" @click=\"selected = []\">\n      Clear selection\n    </v-btn>\n  </div>\n\n  <!-- Queue summary bar -->\n  <v-alert v-if=\"queueActive\" type=\"info\" variant=\"tonal\" density=\"compact\" class=\"mb-2\">\n    <div class=\"d-flex align-center justify-space-between\">\n      <span>\n        Queue: {{ queueResults.filter(r => r.status === 'done').length }} done,\n        {{ queueCurrentPath ? '1 processing' : '0 processing' }},\n        {{ queuePending.length }} pending\n      </span>\n      <v-btn v-if=\"queuePending.length > 0\" variant=\"text\" size=\"small\" color=\"warning\" @click=\"cancelAll\">\n        Cancel pending\n      </v-btn>\n    </div>\n  </v-alert>\n\n  <v-data-table fluid :headers=\"headers\" :items=\"filteredItems\" :search=\"search\" :loading=\"loading\"\n    item-value=\"path\" density=\"comfortable\" hover :item-class=\"getRowClass\"\n    v-model:items-per-page=\"itemsPerPage\"\n    show-select v-model=\"selected\" return-object>\n\n    <template v-slot:loading>\n      <v-skeleton-loader type=\"table-row@5\" />\n    </template>\n\n    <template v-slot:item.date=\"{ item }\">\n      <span class=\"text-body-2 font-weight-medium text-high-emphasis\">\n        {{ formatDate(item.date) }}\n      </span>\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 variant=\"text\" size=\"small\" color=\"grey-darken-1\" :href=\"item.gallery\" target=\"_blank\">\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 align-center\">\n        <!-- Queue status chips -->\n        <v-chip v-if=\"getQueueStatus(item) === 'processing'\" color=\"primary\" size=\"small\" variant=\"flat\" class=\"mr-2\">\n          <v-progress-circular indeterminate size=\"12\" width=\"2\" class=\"mr-1\"></v-progress-circular>\n          Segmenting\n        </v-chip>\n        <v-chip v-else-if=\"getQueueStatus(item) === 'queued'\" color=\"grey\" size=\"small\" variant=\"tonal\" class=\"mr-2\">\n          <v-icon start size=\"small\">mdi-clock-outline</v-icon>\n          Queued\n          <v-btn icon variant=\"text\" size=\"x-small\" class=\"ml-1\" @click.stop=\"cancelQueued(item)\">\n            <v-icon size=\"small\">mdi-close</v-icon>\n          </v-btn>\n        </v-chip>\n        <v-chip v-else-if=\"getQueueStatus(item) === 'done'\" color=\"success\" size=\"small\" variant=\"tonal\" class=\"mr-2\">\n          <v-icon start size=\"small\">mdi-check</v-icon>\n          Done\n        </v-chip>\n        <v-chip v-else-if=\"getQueueStatus(item) === 'error'\" color=\"error\" size=\"small\" variant=\"tonal\" class=\"mr-2\">\n          <v-icon start size=\"small\">mdi-alert</v-icon>\n          Error\n        </v-chip>\n\n        <!-- Single segment button (disabled when queue active) -->\n        <v-btn v-if=\"!item.is_segmented && !getQueueStatus(item)\" variant=\"text\" size=\"small\" color=\"primary\"\n          @click=\"segment(item)\" :disabled=\"queueActive\">\n          <v-icon start>mdi-vector-polyline</v-icon>\n          Segment\n        </v-btn>\n        <v-btn v-else-if=\"item.is_segmented && !getQueueStatus(item)\" variant=\"text\" size=\"small\" disabled color=\"grey-darken-1\">\n          <v-icon start>mdi-check</v-icon>\n          Done\n        </v-btn>\n\n        <v-tooltip location=\"top\" text=\"Delete Acquisition\">\n          <template v-slot:activator=\"{ props }\">\n            <v-btn v-bind=\"props\" icon variant=\"text\" size=\"small\" color=\"error\" class=\"ml-1\" @click=\"deleteItem(item)\">\n              <v-icon>mdi-delete-outline</v-icon>\n            </v-btn>\n          </template>\n        </v-tooltip>\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>\n  export default {\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      selected: [],\n      itemsPerPage: 100,\n\n      // Queue state (updated via messages from Queue Processor)\n      queueActive: false,\n      queueCurrentPath: null,\n      queuePending: [],\n      queueResults: [],\n\n      headers: [\n        { title: \"Date\", sortable: false, key: \"date\" },\n        { title: \"Project\", sortable: false, key: \"project_name\" },\n        { title: \"Sample\", sortable: false, key: \"sample_id\" },\n        { title: \"Acq ID\", sortable: false, key: \"acquisition_id\" },\n        { title: \"Operator\", sortable: false, key: \"operator_name\" },\n        { title: \"Count\", sortable: false, key: \"image_acquired_count\", align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Actions\", key: \"actions\", sortable: false, align: \"end\", width: \"280px\" }\n      ]\n    };\n  },\n\n  computed: {\n    filteredItems() {\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        // Handle queue status messages\n        if (value.topic === \"queue_status\") {\n          this.queueActive = payload.active;\n          this.queueCurrentPath = payload.current_path;\n          this.queuePending = payload.queued_paths || [];\n          this.queueResults = payload.results || [];\n          if (!payload.active) {\n            this.selected = [];\n          }\n          return;\n        }\n\n        // Handle queue progress messages\n        if (value.topic === \"queue_progress\") {\n          if (payload.current_path) {\n            this.queueCurrentPath = payload.current_path;\n          }\n          return;\n        }\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    formatDate(dateString) {\n      if (!dateString) return '';\n      const date = new Date(dateString);\n      if (isNaN(date.getTime())) return dateString;\n\n      return date.toLocaleString('en-US', {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n        hour: '2-digit',\n        minute: '2-digit',\n      });\n    },\n\n    segment(item) {\n      this.selectedRow = item.acquisition_id;\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"segment_request\",\n          payload: item\n        });\n      }\n    },\n\n    segmentSelected() {\n      const unsegmented = this.selected.filter(item => !item.is_segmented);\n      if (unsegmented.length === 0) return;\n\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"queue_segment_request\",\n          payload: { items: unsegmented }\n        });\n      }\n    },\n\n    getQueueStatus(item) {\n      if (this.queueCurrentPath === item.path) return \"processing\";\n      if (this.queuePending.includes(item.path)) return \"queued\";\n      const result = this.queueResults.find(r => r.path === item.path);\n      if (result) return result.status;\n      return null;\n    },\n\n    cancelQueued(item) {\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"queue_cancel\",\n          payload: { path: item.path }\n        });\n      }\n    },\n\n    cancelAll() {\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"queue_cancel_all\",\n          payload: {}\n        });\n      }\n    },\n\n    deleteItem(item) {\n      const index = this.items.indexOf(item);\n      if (index > -1) {\n        this.items.splice(index, 1);\n      }\n\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"delete_request\",\n          payload: {\n            acquisition_id: item.acquisition_id,\n            ...item\n          }\n        });\n      }\n    },\n\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;\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": 310,
+        "y": 140,
+        "wires": [
+            [
+                "98b980828cac388b"
+            ]
+        ]
+    },
+    {
+        "id": "98b980828cac388b",
+        "type": "switch",
+        "z": "524b7620431210e8",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "segment_request",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "delete_request",
+                "vt": "str"
+            },
+            {
+                "t": "regex",
+                "v": "^queue_",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 3,
+        "x": 430,
+        "y": 220,
+        "wires": [
+            [
+                "312de75fd2144c81"
+            ],
+            [
+                "20e38293b7b4fca8"
+            ],
+            [
+                "a1b2c3d4e5f60001"
+            ]
+        ]
+    },
+    {
+        "id": "20e38293b7b4fca8",
+        "type": "exec",
+        "z": "524b7620431210e8",
+        "command": "rm -rf ",
+        "addpay": "payload.path",
+        "append": "",
+        "useSpawn": "false",
+        "timer": "",
+        "winHide": false,
+        "oldrc": false,
+        "name": "",
+        "x": 590,
+        "y": 240,
+        "wires": [
+            [],
+            [],
+            []
+        ]
+    },
+    {
+        "id": "b3a9d14bbb081aa8",
+        "type": "ui-event",
+        "z": "4fdbd7bacb797c5a",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "843d34f5d30962ab",
+                "69ce53c2079b63a0"
+            ]
+        ]
+    },
+    {
+        "id": "843d34f5d30962ab",
+        "type": "switch",
+        "z": "4fdbd7bacb797c5a",
+        "name": "msg.payload.page.path === \"/visualization\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/visualization",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 330,
+        "y": 40,
+        "wires": [
+            [
+                "2f62fc38be1bfe69"
+            ]
+        ]
+    },
+    {
+        "id": "0425c18c1a9ca1ca",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "group": "b570f76ef526af45",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* État actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* Séparateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou coloré pour le repère visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF même sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "2f62fc38be1bfe69",
+        "type": "list segmentations",
+        "z": "4fdbd7bacb797c5a",
+        "name": "",
+        "x": 170,
+        "y": 180,
+        "wires": [
+            [
+                "40a54312ad6d20c1"
+            ]
+        ]
+    },
+    {
+        "id": "40a54312ad6d20c1",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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});\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 440,
+        "y": 180,
+        "wires": [
+            [
+                "205e01594aafdf52"
+            ]
+        ]
+    },
+    {
+        "id": "bb7e84695ec2b24c",
+        "type": "file in",
+        "z": "4fdbd7bacb797c5a",
+        "name": "",
+        "filename": "payload.path",
+        "filenameType": "msg",
+        "format": "utf8",
+        "chunk": false,
+        "sendError": false,
+        "encoding": "none",
+        "allProps": false,
+        "x": 180,
+        "y": 380,
+        "wires": [
+            [
+                "1e51a51e73c8f2a5",
+                "8f1bf6abf93d9587",
+                "a67c2c1c9523ec54",
+                "9f4a3d23a3c4ba43",
+                "836d93ca31e11fc8",
+                "03188ea81f8f748d",
+                "1db541fc5717964a",
+                "109aacc68888f0b1",
+                "27ebeb1895528a1d",
+                "2aa2c7cb2ba901a0",
+                "8fc92b69ced53cf2",
+                "88371b41526bbd18",
+                "93ac167a60a35472",
+                "72065cd82cb87df5"
+            ]
+        ]
+    },
+    {
+        "id": "51fa556f38fcfaa4",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "name": "Get tsv path",
+        "func": "// 1. On s'assure que le path existe\nif (msg.payload.path) {\n\n    const currentPath = msg.payload.path;\n    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;\n    const acqId = cleanPath.split('/').pop();\n\n    // Try expected filename first\n    const expectedTsv = `${cleanPath}/ecotaxa_${acqId}.tsv`;\n\n    if (fs.existsSync(expectedTsv)) {\n        msg.payload.path = expectedTsv;\n    } else {\n        // Fallback: find any ecotaxa_*.tsv in the directory\n        try {\n            const files = fs.readdirSync(cleanPath);\n            const tsvFile = files.find(f => f.startsWith('ecotaxa_') && f.endsWith('.tsv'));\n            if (tsvFile) {\n                msg.payload.path = `${cleanPath}/${tsvFile}`;\n            } else {\n                node.warn('No ecotaxa TSV found in ' + cleanPath);\n                return null;\n            }\n        } catch(e) {\n            node.error('Cannot read directory: ' + e.message);\n            return null;\n        }\n    }\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [
+            {
+                "var": "fs",
+                "module": "fs"
+            }
+        ],
+        "x": 930,
+        "y": 180,
+        "wires": [
+            [
+                "c4a624fe9c464cda"
+            ]
+        ]
+    },
+    {
+        "id": "9b4aa58f8a37a9d9",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "group": "0c1537ce71affc2b",
+        "page": "",
+        "ui": "",
+        "name": "Gallery",
+        "order": 1,
+        "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(displayPx(item.object_width) * zoom, 40)) + 'px',\n                            height: (Math.max(displayPx(item.object_height) * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (displayPx(item.object_width) * zoom) + 'px',\n                                height: (displayPx(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, process_pixel_applied: false },\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                { title: 'Sharpest', value: 'object_blur_laplacian' }\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, process_pixel_applied: !!m.payload.meta.process_pixel_applied };\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        // Convert object dimension to display pixels\n        // When process_pixel_applied, values are in microns - divide by resolution to get pixels\n        displayPx(val) {\n            if (this.meta.process_pixel_applied) {\n                return val / (this.meta.resolution || 1);\n            }\n            return val;\n        },\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const widthRaw = item.object_width || 100;\n            const realWidthMicrons = this.meta.process_pixel_applied ? widthRaw : widthRaw * res;\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\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,
+        "templateScope": "local",
+        "className": "",
+        "x": 920,
+        "y": 1000,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "205e01594aafdf52",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "group": "fa6393a7d7e3b7d7",
+        "page": "",
+        "ui": "",
+        "name": "List of Segmentation",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n\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<style scoped>\n.live-pulse {\n  animation: pulse 2s infinite;\n}\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null,\n      selectedItem: null,\n      liveMode: false,\n      refreshInterval: 5,\n      refreshTimer: 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  beforeUnmount() {\n    this.stopLiveRefresh();\n  },\n\n  methods: {\n    manualRefresh() {\n      this.loading = true;\n      this.send({ topic: \"refresh_list\", payload: true });\n      setTimeout(() => { this.loading = false; }, 500);\n    },\n\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n      this.selectedItem = item;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    toggleLiveMode(enabled) {\n      if (enabled) {\n        this.startLiveRefresh();\n      } else {\n        this.stopLiveRefresh();\n      }\n    },\n\n    startLiveRefresh() {\n      this.stopLiveRefresh();\n      // Refresh gallery immediately if an acquisition is selected\n      if (this.selectedItem) {\n        this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n      }\n      // Periodically re-read the TSV to pick up new objects\n      this.refreshTimer = setInterval(() => {\n        if (this.selectedItem) {\n          this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n        }\n      }, this.refreshInterval * 1000);\n    },\n\n    stopLiveRefresh() {\n      if (this.refreshTimer) {\n        clearInterval(this.refreshTimer);\n        this.refreshTimer = null;\n      }\n    },\n\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
+        "storeOutMessages": true,
+        "passthru": false,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 740,
+        "y": 180,
+        "wires": [
+            [
+                "82532431827450f2"
+            ]
+        ]
+    },
+    {
+        "id": "82532431827450f2",
+        "type": "switch",
+        "z": "4fdbd7bacb797c5a",
+        "name": "Route Live Messages",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "refresh_list",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "selected_acquisition",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 960,
+        "y": 180,
+        "wires": [
+            [
+                "2f62fc38be1bfe69"
+            ],
+            [
+                "51fa556f38fcfaa4"
+            ]
+        ]
+    },
+    {
+        "id": "0c7765fa696e0717",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "group": "53490f9c39e2065d",
+        "page": "",
+        "ui": "",
+        "name": "Infos",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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: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.acq_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": 910,
+        "y": 480,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "1e51a51e73c8f2a5",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 520,
+        "wires": [
+            [
+                "d49dc2cc9f8eeaab"
+            ]
+        ]
+    },
+    {
+        "id": "8f1bf6abf93d9587",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 560,
+        "wires": [
+            [
+                "1631167b67b37d25"
+            ]
+        ]
+    },
+    {
+        "id": "a67c2c1c9523ec54",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 600,
+        "wires": [
+            [
+                "9bb69f94e4855a16"
+            ]
+        ]
+    },
+    {
+        "id": "9f4a3d23a3c4ba43",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 640,
+        "wires": [
+            [
+                "731608304eeaa5f3"
+            ]
+        ]
+    },
+    {
+        "id": "836d93ca31e11fc8",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 680,
+        "wires": [
+            [
+                "a6c62b4b3da492e9"
+            ]
+        ]
+    },
+    {
+        "id": "03188ea81f8f748d",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 720,
+        "wires": [
+            [
+                "fc22ad681d25523b"
+            ]
+        ]
+    },
+    {
+        "id": "1db541fc5717964a",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 760,
+        "wires": [
+            [
+                "2905bc12edeef503"
+            ]
+        ]
+    },
+    {
+        "id": "109aacc68888f0b1",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 800,
+        "wires": [
+            [
+                "5fe97b4a564498ea"
+            ]
+        ]
+    },
+    {
+        "id": "27ebeb1895528a1d",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 840,
+        "wires": [
+            [
+                "565c6d0f098e5be0"
+            ]
+        ]
+    },
+    {
+        "id": "d49dc2cc9f8eeaab",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 920,
+        "y": 520,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "2aa2c7cb2ba901a0",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 480,
+        "wires": [
+            [
+                "0c7765fa696e0717"
+            ]
+        ]
+    },
+    {
+        "id": "1631167b67b37d25",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "group": "47800358cf7cee25",
+        "page": "",
+        "ui": "",
+        "name": "ESD Histogram",
+        "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<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=\"/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": 940,
+        "y": 560,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "9bb69f94e4855a16",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "group": "1d9c6927a0e0a71b",
+        "page": "",
+        "ui": "",
+        "name": "Timeline",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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=\"/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": 920,
+        "y": 600,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "731608304eeaa5f3",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 990,
+        "y": 640,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "a6c62b4b3da492e9",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 970,
+        "y": 680,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "fc22ad681d25523b",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 930,
+        "y": 720,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "2905bc12edeef503",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 990,
+        "y": 760,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "5fe97b4a564498ea",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 960,
+        "y": 800,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "565c6d0f098e5be0",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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=\"/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": 950,
+        "y": 840,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "8fc92b69ced53cf2",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = val(firstRow, \"process_pixel_applied\");\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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: `/api/files/objects/${(val(row,\"object_date\")||\"\").replace(/ /g,\"_\")}/${(val(row,\"sample_id\")||\"\").replace(/ /g,\"_\")}/${(val(row,\"acq_id\")||\"\").replace(/ /g,\"_\")}/${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": 920,
+        "wires": [
+            [
+                "131aae14607d4830"
+            ]
+        ]
+    },
+    {
+        "id": "131aae14607d4830",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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            <div style=\"position:relative;\">\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              <div style=\"position:absolute; bottom:16px; left:0; right:0; pointer-events:none;\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPercent + '%', marginLeft: 'auto', marginRight: '8px' }\"></div>\n                <div class=\"scale-label\" style=\"text-align:right; padding-right:8px;\">{{ formattedScale }}</div>\n              </div>\n            </div>\n\n            <div class=\"d-flex justify-center align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\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, process_pixel_applied: false },\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        this.meta.process_pixel_applied = !!m.payload.meta?.process_pixel_applied\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=\"/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 objWidthRaw = this.hovered.object_width || 100;\n      const realWidthMicrons = this.meta.process_pixel_applied ? objWidthRaw : objWidthRaw * 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    scaleBarPercent() {\n      if (!this.hovered) return 10;\n      const w = this.hovered.object_width || 100;\n      const h = this.hovered.object_height || 100;\n      const res = this.meta.resolution || 1;\n      // Get dimensions in native pixels for display scaling\n      const wPx = this.meta.process_pixel_applied ? w / res : w;\n      const hPx = this.meta.process_pixel_applied ? h / res : h;\n      // Scale bar width in native image pixels\n      const scaleBarNativePx = this.adaptiveScaleMicrons / res;\n      // In a square container with contain, image is scaled by 1/max(w,h)\n      // So percentage of container = scaleBarNativePx / max(wPx, hPx) * 100\n      const maxDim = Math.max(wPx, hPx);\n      if (maxDim <= 0) return 10;\n      return (scaleBarNativePx / maxDim) * 100;\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": 920,
+        "y": 920,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "69ce53c2079b63a0",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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": 460,
+        "y": 440,
+        "wires": [
+            [
+                "d49dc2cc9f8eeaab",
+                "1631167b67b37d25",
+                "9bb69f94e4855a16",
+                "731608304eeaa5f3",
+                "a6c62b4b3da492e9",
+                "fc22ad681d25523b",
+                "2905bc12edeef503",
+                "5fe97b4a564498ea",
+                "565c6d0f098e5be0",
+                "0c7765fa696e0717",
+                "131aae14607d4830",
+                "9b4aa58f8a37a9d9"
+            ]
+        ]
+    },
+    {
+        "id": "88371b41526bbd18",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = get(firstRow, 'process_pixel_applied');\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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')||'').replace(/ /g,'_')}/${(get(row, 'sample_id')||'').replace(/ /g,'_')}/${(get(row, 'acq_id')||'').replace(/ /g,'_')}/${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": 1000,
+        "wires": [
+            [
+                "9b4aa58f8a37a9d9"
+            ]
+        ]
+    },
+    {
+        "id": "e16e3dace2bb507f",
+        "type": "delay",
+        "z": "4fdbd7bacb797c5a",
+        "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": 340,
+        "wires": [
+            [
+                "bb7e84695ec2b24c"
+            ]
+        ]
+    },
+    {
+        "id": "ebb2567bdaf69c8e",
+        "type": "ui-template",
+        "z": "4fdbd7bacb797c5a",
+        "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": "c4a624fe9c464cda",
+        "type": "switch",
+        "z": "4fdbd7bacb797c5a",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "neq",
+                "v": "$pageview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 170,
+        "y": 300,
+        "wires": [
+            [
+                "e16e3dace2bb507f"
+            ]
+        ]
+    },
+    {
+        "id": "d365c80d0854bab7",
+        "type": "debug",
+        "z": "4fdbd7bacb797c5a",
+        "name": "debug 5",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "true",
+        "targetType": "full",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 940,
+        "y": 400,
+        "wires": []
+    },
+    {
+        "id": "93ac167a60a35472",
+        "type": "function",
+        "z": "4fdbd7bacb797c5a",
+        "name": "Sample Identity Metadata Only",
+        "func": "// FUNCTION: Extract all data and metadata\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\n\n// Fonction utilitaire pour mapper les colonnes\nconst rowToObject = (rowCells) => {\n    const obj = {};\n    headers.forEach((header, index) => {\n        obj[header] = rowCells[index] || \"\";\n    });\n    return obj;\n};\n\nlet allRows = [];\nlet firstDataRow = null;\n\n// --- 1. Parser toutes les lignes ---\nfor (let i = 1; i < lines.length; i++) {\n    const cells = lines[i].split(\"\\t\");\n    const rowObj = rowToObject(cells);\n\n    allRows.push(rowObj);\n\n    // Identifier la première vraie ligne de données pour les métadonnées globales\n    if (!firstDataRow && !lines[i].trim().startsWith(\"[\")) {\n        firstDataRow = rowObj;\n    }\n}\n\n// --- 2. Extraire les métadonnées (basées sur la première ligne valide) ---\nconst meta = {\n    sample_id: firstDataRow ? firstDataRow[\"sample_id\"] : \"\",\n    project: firstDataRow ? firstDataRow[\"sample_project\"] : \"\",\n    acq_id: firstDataRow ? firstDataRow[\"acq_id\"] : \"\"\n};\n\n// --- 3. Output : Métadonnées + l'intégralité des données ---\nmsg.payload = {\n    meta: meta,\n    data: allRows // Contient maintenant tous les enregistrements\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 400,
+        "wires": [
+            [
+                "d365c80d0854bab7"
+            ]
+        ]
+    },
+    {
+        "id": "72065cd82cb87df5",
+        "type": "debug",
+        "z": "4fdbd7bacb797c5a",
+        "name": "debug 2",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 440,
+        "y": 340,
+        "wires": []
+    },
+    {
+        "id": "b2958e4a07a87cad",
+        "type": "ui-event",
+        "z": "a7825c4c81ad20a0",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "b4515f99c5e5e2da",
+                "26ec7d57f8231752"
+            ]
+        ]
+    },
+    {
+        "id": "b4515f99c5e5e2da",
+        "type": "switch",
+        "z": "a7825c4c81ad20a0",
+        "name": "msg.payload.page.path === \"/visualization\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/visualization",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 330,
+        "y": 40,
+        "wires": [
+            [
+                "a15937db31847a11",
+                "99d07bf34db5693f"
+            ]
+        ]
+    },
+    {
+        "id": "82cee7ccf168f572",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "b570f76ef526af45",
+        "page": "",
+        "ui": "",
+        "name": "Navigation Top",
+        "order": 2,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* État actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* Séparateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou coloré pour le repère visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF même sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1300,
+        "y": 40,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "a15937db31847a11",
+        "type": "list segmentations",
+        "z": "a7825c4c81ad20a0",
+        "name": "",
+        "x": 170,
+        "y": 180,
+        "wires": [
+            [
+                "4f4d57c070b89857",
+                "adc7e075bda50785"
+            ]
+        ]
+    },
+    {
+        "id": "4f4d57c070b89857",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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});\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 440,
+        "y": 180,
+        "wires": [
+            [
+                "eb62a19058171fa8"
+            ]
+        ]
+    },
+    {
+        "id": "1802e96dd833363b",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "name": "Size-safe file read",
+        "func": "const MAX_LINES = 5001;\nconst MAX_SIZE = 10 * 1024 * 1024;\n\nconst filePath = msg.payload.path || msg.filename;\nif (!filePath) { return null; }\n\ntry {\n    const stats = fs.statSync(filePath);\n    if (stats.size > MAX_SIZE) {\n        const fd = fs.openSync(filePath, \"r\");\n        const buf = Buffer.alloc(Math.min(stats.size, 2 * 1024 * 1024));\n        const bytesRead = fs.readSync(fd, buf, 0, buf.length, 0);\n        fs.closeSync(fd);\n        const partial = buf.toString(\"utf8\", 0, bytesRead);\n        const lines = partial.split(\"\\n\");\n        msg.payload = lines.slice(0, MAX_LINES).join(\"\\n\");\n        node.warn(\"Large TSV (\" + Math.round(stats.size/1024/1024) + \"MB) - limited to \" + MAX_LINES + \" lines\");\n    } else {\n        msg.payload = fs.readFileSync(filePath, \"utf8\");\n    }\n    return msg;\n} catch(e) {\n    node.error(\"File read error: \" + e.message, msg);\n    return null;\n}",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [
+            {
+                "var": "fs",
+                "module": "fs"
+            }
+        ],
+        "x": 180,
+        "y": 380,
+        "wires": [
+            [
+                "82d199f05a6f0af2",
+                "248999e928a14aa9",
+                "09b02605b198b2f4",
+                "897140ab8ebde04d",
+                "ea4aa3af0f18be63",
+                "42b7f7bec1d2da57",
+                "09203894702cf830",
+                "db14c860ad4ab4ec",
+                "eb793dfbf316c8d9",
+                "63e7888198376e77",
+                "da58d147efe428ea",
+                "f8b996c6c3c8e77a",
+                "a351f0483ac3a747"
+            ]
+        ]
+    },
+    {
+        "id": "63121349be3135fd",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "name": "Get tsv path",
+        "func": "// 1. On s'assure que le path existe\nif (msg.payload.path) {\n\n    const currentPath = msg.payload.path;\n    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;\n    const acqId = cleanPath.split('/').pop();\n\n    // Save the actual directory path relative to objects root for image URL construction\n    // e.g. \"/home/pi/data/objects/2023-10-12/SomeName_A1\" -> \"2023-10-12/SomeName_A1\"\n    const objRoot = \"/home/pi/data/objects/\";\n    msg.tsvDir = cleanPath.startsWith(objRoot) ? cleanPath.slice(objRoot.length) : cleanPath;\n\n    // Try expected filename first\n    const expectedTsv = `${cleanPath}/ecotaxa_${acqId}.tsv`;\n\n    if (fs.existsSync(expectedTsv)) {\n        msg.payload.path = expectedTsv;\n    } else {\n        // Fallback: find any ecotaxa_*.tsv in the directory\n        try {\n            const files = fs.readdirSync(cleanPath);\n            const tsvFile = files.find(f => f.startsWith('ecotaxa_') && f.endsWith('.tsv'));\n            if (tsvFile) {\n                msg.payload.path = `${cleanPath}/${tsvFile}`;\n            } else {\n                node.warn('No ecotaxa TSV found in ' + cleanPath);\n                return null;\n            }\n        } catch(e) {\n            node.error('Cannot read directory: ' + e.message);\n            return null;\n        }\n    }\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [
+            {
+                "var": "fs",
+                "module": "fs"
+            }
+        ],
+        "x": 930,
+        "y": 180,
+        "wires": [
+            [
+                "aa474626711fa5b6"
+            ]
+        ]
+    },
+    {
+        "id": "2133c934126655d8",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "0c1537ce71affc2b",
+        "page": "",
+        "ui": "",
+        "name": "Gallery",
+        "order": 2,
+        "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(displayPx(item.object_width) * zoom, 40)) + 'px',\n                            height: (Math.max(displayPx(item.object_height) * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (displayPx(item.object_width) * zoom) + 'px',\n                                height: (displayPx(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, process_pixel_applied: false },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 100,\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                { title: 'Sharpest', value: 'object_blur_laplacian' }\n                \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, process_pixel_applied: !!m.payload.meta.process_pixel_applied };\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        // Convert object dimension to display pixels\n        // When process_pixel_applied, values are in microns - divide by resolution to get pixels\n        displayPx(val) {\n            if (this.meta.process_pixel_applied) {\n                return val / (this.meta.resolution || 1);\n            }\n            return val;\n        },\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const widthRaw = item.object_width || 100;\n            const realWidthMicrons = this.meta.process_pixel_applied ? widthRaw : widthRaw * res;\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,
+        "templateScope": "local",
+        "className": "",
+        "x": 920,
+        "y": 1000,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "eb62a19058171fa8",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "fa6393a7d7e3b7d7",
+        "page": "",
+        "ui": "",
+        "name": "List of Segmentation",
+        "order": 2,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n\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<style scoped>\n.live-pulse {\n  animation: pulse 2s infinite;\n}\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null,\n      selectedItem: null,\n      liveMode: false,\n      refreshInterval: 5,\n      refreshTimer: 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  beforeUnmount() {\n    this.stopLiveRefresh();\n  },\n\n  methods: {\n    manualRefresh() {\n      this.loading = true;\n      this.send({ topic: \"refresh_list\", payload: true });\n      setTimeout(() => { this.loading = false; }, 500);\n    },\n\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n      this.selectedItem = item;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    toggleLiveMode(enabled) {\n      if (enabled) {\n        this.startLiveRefresh();\n      } else {\n        this.stopLiveRefresh();\n      }\n    },\n\n    startLiveRefresh() {\n      this.stopLiveRefresh();\n      // Refresh gallery immediately if an acquisition is selected\n      if (this.selectedItem) {\n        this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n      }\n      // Periodically re-read the TSV to pick up new objects\n      this.refreshTimer = setInterval(() => {\n        if (this.selectedItem) {\n          this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n        }\n      }, this.refreshInterval * 1000);\n    },\n\n    stopLiveRefresh() {\n      if (this.refreshTimer) {\n        clearInterval(this.refreshTimer);\n        this.refreshTimer = null;\n      }\n    },\n\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
+        "storeOutMessages": true,
+        "passthru": false,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 700,
+        "y": 180,
+        "wires": [
+            [
+                "63121349be3135fd",
+                "68ec210262cb873a"
+            ]
+        ]
+    },
+    {
+        "id": "ce136c26883f5d99",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "53490f9c39e2065d",
+        "page": "",
+        "ui": "",
+        "name": "Infos",
+        "order": 2,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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: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.acq_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": 910,
+        "y": 440,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "82d199f05a6f0af2",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 520,
+        "wires": [
+            [
+                "fa3836bcb90f19fd"
+            ]
+        ]
+    },
+    {
+        "id": "248999e928a14aa9",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 560,
+        "wires": [
+            [
+                "884695dfb99afa9c"
+            ]
+        ]
+    },
+    {
+        "id": "09b02605b198b2f4",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 600,
+        "wires": [
+            [
+                "6d881dec33245014"
+            ]
+        ]
+    },
+    {
+        "id": "897140ab8ebde04d",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 640,
+        "wires": [
+            [
+                "d7416bf20b4dc8bc"
+            ]
+        ]
+    },
+    {
+        "id": "ea4aa3af0f18be63",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 680,
+        "wires": [
+            [
+                "14cc9379f5c5c333"
+            ]
+        ]
+    },
+    {
+        "id": "42b7f7bec1d2da57",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 720,
+        "wires": [
+            [
+                "cd8b19e450d40ff7"
+            ]
+        ]
+    },
+    {
+        "id": "09203894702cf830",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 760,
+        "wires": [
+            [
+                "5267a7f80cdf6c6f"
+            ]
+        ]
+    },
+    {
+        "id": "db14c860ad4ab4ec",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 800,
+        "wires": [
+            [
+                "a6df52a13d3d310f"
+            ]
+        ]
+    },
+    {
+        "id": "eb793dfbf316c8d9",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": 840,
+        "wires": [
+            [
+                "31ba1239ad82a60c"
+            ]
+        ]
+    },
+    {
+        "id": "fa3836bcb90f19fd",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "90b33e458dd29d04",
+        "page": "",
+        "ui": "",
+        "name": "Heatmap",
+        "order": 2,
+        "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=\"/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": 920,
+        "y": 520,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "63e7888198376e77",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": [
+            [
+                "ce136c26883f5d99"
+            ]
+        ]
+    },
+    {
+        "id": "884695dfb99afa9c",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "47800358cf7cee25",
+        "page": "",
+        "ui": "",
+        "name": "ESD Histogram",
+        "order": 2,
+        "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<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=\"/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        yaxis:{type:\"log\"} // <-- Added log scale to the Y-axis\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 940,
+        "y": 560,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "6d881dec33245014",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "1d9c6927a0e0a71b",
+        "page": "",
+        "ui": "",
+        "name": "Timeline",
+        "order": 2,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "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=\"/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": 920,
+        "y": 600,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "d7416bf20b4dc8bc",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "03ad1c8f517e8769",
+        "page": "",
+        "ui": "",
+        "name": "Colorspace (Saturation vs Value)",
+        "order": 2,
+        "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=\"/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": 990,
+        "y": 640,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "14cc9379f5c5c333",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "0be15f8190e6fd43",
+        "page": "",
+        "ui": "",
+        "name": "Aspect (Width vs Height)",
+        "order": 2,
+        "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=\"/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": 970,
+        "y": 680,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "cd8b19e450d40ff7",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "1edc962c44888abc",
+        "page": "",
+        "ui": "",
+        "name": "Greenness",
+        "order": 2,
+        "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=\"/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": 930,
+        "y": 720,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "5267a7f80cdf6c6f",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "67c63cc92c23c4b1",
+        "page": "",
+        "ui": "",
+        "name": "Complexity (Area vs Perimeter)",
+        "order": 2,
+        "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=\"/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": 990,
+        "y": 760,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "a6df52a13d3d310f",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "95a152a68b7ba779",
+        "page": "",
+        "ui": "",
+        "name": "Texture (Area vs Std)",
+        "order": 2,
+        "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=\"/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": 960,
+        "y": 800,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "31ba1239ad82a60c",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "1baa943e505febf1",
+        "page": "",
+        "ui": "",
+        "name": "Solidity Histogram",
+        "order": 2,
+        "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=\"/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": 950,
+        "y": 840,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "da58d147efe428ea",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = val(firstRow, \"process_pixel_applied\");\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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: msg.tsvDir ? `/api/files/objects/${msg.tsvDir}/${val(row,\"img_file_name\")}` : `/api/files/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\n// Cap rows to prevent browser crash on huge datasets\nconst MAX_ROWS = 5000;\nif (data.length > MAX_ROWS) data.length = MAX_ROWS;\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": 920,
+        "wires": [
+            [
+                "3d4c586bf5742617"
+            ]
+        ]
+    },
+    {
+        "id": "3d4c586bf5742617",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "group": "c5651e1a3e56f3f5",
+        "page": "",
+        "ui": "",
+        "name": "Explorer",
+        "order": 2,
+        "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            <div style=\"position:relative;\">\n              <v-img\n                :src=\"hovered.url\"\n                aspect-ratio=\"1\"\n                bg-color=\"grey-lighten-3\"\n                class=\"mb-3 img-scale-down\"\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              <div style=\"position:absolute; bottom:16px; left:0; right:0; pointer-events:none;\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPercent + '%', marginLeft: 'auto', marginRight: '8px' }\"></div>\n                <div class=\"scale-label\" style=\"text-align:right; padding-right:8px;\">{{ formattedScale }}</div>\n              </div>\n            </div>\n\n            <div class=\"d-flex justify-center align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    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, process_pixel_applied: false },\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        this.meta.process_pixel_applied = !!m.payload.meta?.process_pixel_applied\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=\"/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    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      const objWidthRaw = this.hovered.object_width || 100;\n      const realWidthMicrons = this.meta.process_pixel_applied ? objWidthRaw : objWidthRaw * this.meta.resolution;\n\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\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    scaleBarPercent() {\n      if (!this.hovered) return 10;\n      const w = this.hovered.object_width || 100;\n      const h = this.hovered.object_height || 100;\n      const res = this.meta.resolution || 1;\n      // Get dimensions in native pixels for display scaling\n      const wPx = this.meta.process_pixel_applied ? w / res : w;\n      const hPx = this.meta.process_pixel_applied ? h / res : h;\n      // Scale bar width in native image pixels\n      const scaleBarNativePx = this.adaptiveScaleMicrons / res;\n      // In a square container with contain, image is scaled by 1/max(w,h)\n      // So percentage of container = scaleBarNativePx / max(wPx, hPx) * 100\n      const maxDim = Math.max(wPx, hPx);\n      if (maxDim <= 0) return 10;\n      return (scaleBarNativePx / maxDim) * 100;\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/* Force the image to shrink if too big, but never zoom in beyond 1:1 scale */\n.img-scale-down :deep(img) {\n  object-fit: scale-down !important;\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\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": 920,
+        "y": 920,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "26ec7d57f8231752",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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": [
+            [
+                "fa3836bcb90f19fd",
+                "884695dfb99afa9c",
+                "6d881dec33245014",
+                "d7416bf20b4dc8bc",
+                "14cc9379f5c5c333",
+                "cd8b19e450d40ff7",
+                "5267a7f80cdf6c6f",
+                "a6df52a13d3d310f",
+                "31ba1239ad82a60c",
+                "ce136c26883f5d99",
+                "3d4c586bf5742617",
+                "2133c934126655d8"
+            ]
+        ]
+    },
+    {
+        "id": "f8b996c6c3c8e77a",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = get(firstRow, 'process_pixel_applied');\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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: msg.tsvDir ? `/api/files/objects/${msg.tsvDir}/${get(row, 'img_file_name')}` : `/api/files/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\n// Cap rows to prevent browser crash on huge datasets\nconst MAX_ROWS = 5000;\nif (data.length > MAX_ROWS) data.length = MAX_ROWS;\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": 1000,
+        "wires": [
+            [
+                "2133c934126655d8"
+            ]
+        ]
+    },
+    {
+        "id": "59c2b02e7b50171f",
+        "type": "delay",
+        "z": "a7825c4c81ad20a0",
+        "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": 340,
+        "wires": [
+            [
+                "1802e96dd833363b"
+            ]
+        ]
+    },
+    {
+        "id": "8c6d06345732ad31",
+        "type": "ui-template",
+        "z": "a7825c4c81ad20a0",
+        "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": "aa474626711fa5b6",
+        "type": "switch",
+        "z": "a7825c4c81ad20a0",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "neq",
+                "v": "$pageview",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 170,
+        "y": 300,
+        "wires": [
+            [
+                "59c2b02e7b50171f"
+            ]
+        ]
+    },
+    {
+        "id": "a351f0483ac3a747",
+        "type": "function",
+        "z": "a7825c4c81ad20a0",
+        "name": "Sample Identity Metadata Only",
+        "func": "// FUNCTION: Extract all data and metadata\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\n\n// Fonction utilitaire pour mapper les colonnes\nconst rowToObject = (rowCells) => {\n    const obj = {};\n    headers.forEach((header, index) => {\n        obj[header] = rowCells[index] || \"\";\n    });\n    return obj;\n};\n\nlet allRows = [];\nlet firstDataRow = null;\n\n// --- 1. Parser toutes les lignes ---\nfor (let i = 1; i < lines.length; i++) {\n    const cells = lines[i].split(\"\\t\");\n    const rowObj = rowToObject(cells);\n\n    allRows.push(rowObj);\n\n    // Identifier la première vraie ligne de données pour les métadonnées globales\n    if (!firstDataRow && !lines[i].trim().startsWith(\"[\")) {\n        firstDataRow = rowObj;\n    }\n}\n\n// --- 2. Extraire les métadonnées (basées sur la première ligne valide) ---\nconst meta = {\n    sample_id: firstDataRow ? firstDataRow[\"sample_id\"] : \"\",\n    project: firstDataRow ? firstDataRow[\"sample_project\"] : \"\",\n    acq_id: firstDataRow ? firstDataRow[\"acq_id\"] : \"\"\n};\n\n// --- 3. Output : Métadonnées + l'intégralité des données ---\nmsg.payload = {\n    meta: meta,\n    data: allRows // Contient maintenant tous les enregistrements\n};\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 510,
+        "y": 340,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "68ec210262cb873a",
+        "type": "debug",
+        "z": "a7825c4c81ad20a0",
+        "name": "debug 3",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 960,
+        "y": 140,
+        "wires": []
+    },
+    {
+        "id": "adc7e075bda50785",
+        "type": "debug",
+        "z": "a7825c4c81ad20a0",
+        "name": "debug 6",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 380,
+        "y": 140,
+        "wires": []
+    },
+    {
+        "id": "99d07bf34db5693f",
+        "type": "debug",
+        "z": "a7825c4c81ad20a0",
+        "name": "debug 7",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 660,
+        "y": 60,
+        "wires": []
+    },
+    {
+        "id": "314a079a9f687b5f",
+        "type": "ui-template",
+        "z": "6fac9fa6a894b293",
+        "group": "822cdc5b6ef13f39",
+        "page": "",
+        "ui": "",
+        "name": "body",
+        "order": 1,
+        "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,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 490,
+        "y": 320,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "4f3bb4938e8a4db6",
+        "type": "ui-template",
+        "z": "6fac9fa6a894b293",
+        "group": "c29c835a70533b69",
+        "page": "",
+        "ui": "",
+        "name": "header",
+        "order": 1,
+        "width": "12",
+        "height": "6",
+        "head": "",
+        "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,
+        "templateScope": "local",
+        "className": "",
+        "x": 490,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "aa79e9d1d4c21a2b",
+        "type": "mqtt out",
+        "z": "6fac9fa6a894b293",
+        "name": "",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 710,
+        "y": 320,
+        "wires": []
+    },
+    {
+        "id": "2ca7d039baf0651d",
+        "type": "inject",
+        "z": "6fac9fa6a894b293",
+        "name": "",
+        "props": [
+            {
+                "p": "topic",
+                "vt": "str"
+            },
+            {
+                "p": "payload"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "calibration",
+        "payload": "{   \"action\": \"start\" }",
+        "payloadType": "json",
+        "x": 290,
+        "y": 280,
+        "wires": [
+            [
+                "97634d7d17fefdeb"
+            ]
+        ]
+    },
+    {
+        "id": "97634d7d17fefdeb",
+        "type": "ui-template",
+        "z": "6fac9fa6a894b293",
+        "group": "c29c835a70533b69",
+        "page": "",
+        "ui": "",
+        "name": "Calibration",
+        "order": 2,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container fluid class=\"pa-0 fill-height bg-grey-lighten-4\">\n    <v-row no-gutters class=\"fill-height\">\n      \n      <v-col cols=\"12\" md=\"9\" class=\"d-flex align-center justify-center position-relative\">\n        <div class=\"ratio-box\">\n            <v-card class=\"calibration-container\">\n              <iframe \n                src=\"/preview/node-red\" \n                class=\"calibration-iframe\"\n                @load=\"onIframeLoad\" \n                ref=\"videoIframe\"\n              ></iframe>\n              \n              <div v-if=\"step === 2\" class=\"focus-overlay\">\n                  <div class=\"crosshair\"></div>\n                  <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n              </div>\n\n              <div v-show=\"step === 3\" class=\"smart-grid\">\n                <div \n                    v-for=\"(zone, i) in gridZones\" \n                    :key=\"i\"\n                    class=\"grid-cell\"\n                    :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"\n                ></div>\n              </div>\n              \n              <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n            </v-card>\n        </div>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"3\" class=\"bg-white d-flex flex-column pa-4 border-s\">\n        \n        <div class=\"d-flex align-center justify-space-between mb-4\">\n          <h2 class=\"text-h6 font-weight-bold text-grey-darken-3\">CALIBRATION</h2>\n          <v-chip size=\"small\" :color=\"ledStatusColor\" variant=\"flat\" class=\"font-weight-bold\">\n            LED: {{ status === 'running' ? 'ON' : 'OFF' }}\n          </v-chip>\n        </div>\n\n        <v-btn \n            block size=\"x-large\" height=\"70\"\n            :color=\"btnColor\"\n            @click=\"toggleSequence\"\n            class=\"mb-6 font-weight-black elevation-2\"\n            :loading=\"status === 'running' && step === 0\"\n        >\n            {{ btnText }}\n        </v-btn>\n\n        <div class=\"d-flex flex-column gap-3\">\n            <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(1)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"text-subtitle-2 font-weight-bold\">1. Initialization</div>\n                    <div class=\"text-caption\">Preset (0.1 / R200 B180)</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(2)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">2. Desaturation</span>\n                        <span v-if=\"step===2\" class=\"font-mono font-weight-black\">{{ currentSat }}%</span>\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===2\" \n                        :model-value=\"Math.max(0, 100 - (currentSat*10))\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Target: 0%</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(3)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">3. Exposure</span>\n                        <span v-if=\"step===3\" class=\"font-mono font-weight-black\">{{ currentLum.toFixed(0) }}/230</span>\n                    </div>\n                    <div v-if=\"step===3\" class=\"text-caption font-mono text-green-darken-2 mt-1\">\n                        {{ activeZonesCount }} valid zones\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===3\" \n                        :model-value=\"(currentLum/255)*100\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Smart Grid Target: 230</div>\n                </div>\n            </v-card>\n        </div>\n\n        <div class=\"mt-auto pt-4 border-t\">\n            <div class=\"font-mono text-caption text-grey-darken-2\" style=\"height:150px; overflow-y:auto; font-size:10px !important;\">\n                <div v-for=\"(l,i) in logs\" :key=\"i\" class=\"mb-1 border-b pb-1\">\n                    <span class=\"text-grey-darken-1 font-weight-bold\">{{l.time}}</span> {{ l.txt }}\n                </div>\n            </div>\n        </div>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      status: 'idle', // idle, running, success, error\n      step: 0,        \n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1, \n      gains: { red: 200, blue: 180 },\n      gridN: 20,       \n      analysisW: 1200, \n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false })),\n      logs: []\n    };\n  },\n  computed: {\n    btnText() {\n        if(this.status === 'running') return 'EMERGENCY STOP';\n        if(this.status === 'success') return 'SUCCESS (RESTART)';\n        return 'START SEQUENCE';\n    },\n    btnColor() {\n        if(this.status === 'running') return 'error';\n        if(this.status === 'success') return 'success';\n        return 'primary';\n    },\n    ledStatusColor() {\n        return this.status === 'running' ? 'orange' : 'grey';\n    },\n    activeZonesCount() {\n        return this.gridZones.filter(z => z.active).length;\n    }\n  },\n  methods: {\n    getStepColor(s) {\n        if (this.status === 'success' || this.step > s) return 'green';\n        if (this.step === s) return 'orange-darken-2';\n        return 'grey-lighten-2';\n    },\n    getStepIcon(s) {\n        if (this.status === 'success' || this.step > s) return 'mdi-check-bold';\n        if (this.step === s) return 'mdi-loading mdi-spin';\n        return 'mdi-numeric-'+s+'-circle';\n    },\n\n    async toggleSequence() {\n        if(this.status === 'running') {\n            this.status = 'idle'; \n            this.step = 0; \n            this.log(\"Manual stop requested.\");\n            this.stopHardware();\n            return;\n        }\n        \n        this.status = 'running';\n        this.step = 1;\n        this.logs = [];\n        this.log(\"Sequence start: LED status ON\");\n\n        try {\n            await this.runInit();\n            this.step = 2;\n            await this.runSaturationLoop();\n            this.step = 3;\n            this.gridZones.forEach(z => z.active = false); \n            await this.runLightnessLoop();\n            \n            this.status = 'success';\n            this.step = 4;\n            this.log(\"Calibration successful.\");\n        } catch(e) {\n            this.status = 'error';\n            this.log(\"ERROR: \" + e);\n            this.stopHardware();\n        }\n    },\n\n    async runInit() {\n        this.log(\"Init: Preset LED 0.1 / R200 B180\");\n        this.led = 0.1; \n        this.gains = { red: 200, blue: 180 };\n        this.sendIO();\n        await this.wait(2500);\n    },\n\n    async runSaturationLoop() {\n        this.log(\"Desaturation starting...\");\n        let iter = 0;\n        while(iter < 25 && this.status === 'running') {\n            const stats = await this.analyzeFrame(true);\n            this.currentSat = stats.sat;\n            if(stats.sat < 1.0) return;\n\n            const Kp = 0.8;\n            this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n            this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n\n            this.sendIO();\n            await this.wait(2000); \n            iter++;\n        }\n    },\n\n    async runLightnessLoop() {\n        this.log(\"Exposure adjustment...\");\n        let iter = 0;\n        while(iter < 40 && this.status === 'running') {\n            const stats = await this.analyzeFrame(false);\n            this.currentLum = stats.lum;\n            if(Math.abs(stats.lum - 230) <= 5) return;\n\n            let nextLed = this.led;\n            if(stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n            else if(stats.lum > 252) nextLed = this.led * 0.5;\n            else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n            \n            this.led = Math.max(0, Math.min(1, nextLed));\n            this.sendIO();\n            await this.wait(600);\n            iter++;\n        }\n    },\n\n    async analyzeFrame(isSaturationStep) {\n        const iframe = this.$refs.videoIframe;\n        if(!iframe?.contentDocument) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const video = iframe.contentDocument.querySelector('video');\n        if(!video || video.videoWidth === 0) return { sat:99, lum:0, r:0, g:0, b:0 };\n\n        const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n        ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n        if(isSaturationStep) {\n            const size = 100;\n            const data = ctx.getImageData((this.analysisW-size)/2, (this.analysisH-size)/2, size, size).data;\n            let r=0, g=0, b=0, c=0;\n            for(let i=0; i<data.length; i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; c++; }\n            const avgR=r/c, avgG=g/c, avgB=b/c;\n            const max=Math.max(avgR, avgG, avgB), min=Math.min(avgR, avgG, avgB);\n            return { sat: parseFloat((max===0?0:((max-min)/max)*100).toFixed(1)), r:avgR, g:avgG, b:avgB };\n        } else {\n            const cellW = this.analysisW / this.gridN; \n            const cellH = this.analysisH / this.gridN;\n            let vL=0, vC=0;\n            for(let i=0; i<this.gridN; i++) {\n                for(let j=0; j<this.gridN; j++) {\n                    const data = ctx.getImageData((j*cellW)+(cellW-15)/2, (i*cellH)+(cellH-15)/2, 15, 15).data;\n                    let s=0, mP=255;\n                    for(let k=0; k<data.length; k+=4) { \n                        const l=(data[k]+data[k+1]+data[k+2])/3; \n                        if(l<mP) mP=l; s+=l; \n                    }\n                    const avg=s/(data.length/4);\n                    const isValid=(avg-mP)<=this.sensitivityThreshold && avg>2;\n                    this.gridZones[i*this.gridN+j] = { active: isValid, lum: avg };\n                    if(isValid){ vL+=avg; vC++; }\n                }\n            }\n            return { lum: vC > 0 ? vL/vC : 0 };\n        }\n    },\n\n    sendIO() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { \n                    action: \"on\", \n                    value: Number(this.led.toFixed(12)),\n                    calibration_led_intensity: Number(this.led.toFixed(6)),\n                    led_status: \"on\" \n                } \n            });\n            this.send({ \n                topic: \"imager/image\", \n                payload: { \n                    action: \"settings\", \n                    settings: { white_balance_gain: this.gains } \n                } \n            });\n        }\n    },\n\n    stopHardware() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { action: \"off\", value: 0, led_status: \"off\" } \n            });\n        }\n    },\n\n    onIframeLoad() {\n        try {\n            const doc = this.$refs.videoIframe.contentDocument;\n            const s = doc.createElement('style');\n            s.textContent = `body{margin:0;overflow:hidden;background:black;} img,video{width:100%;height:100%;object-fit:fill;display:block;}`;\n            doc.head.appendChild(s);\n        } catch(e){}\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n    log(txt) { \n        const time = new Date().toLocaleTimeString().split(' ')[0];\n        this.logs.unshift({time, txt}); \n        if(this.logs.length>20) this.logs.pop(); \n    }\n  }\n};\n</script>\n\n<style scoped>\n.calibration-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; pointer-events: none; }\n.focus-overlay {\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n    width: 100px; height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.8);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); \n    z-index: 10;\n    pointer-events: none;\n}\n.smart-grid {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    display: grid; \n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 10;\n    pointer-events: none;\n}\n.ratio-box {\n    width: 100%;\n    max-width: 1000px;\n    aspect-ratio: 4 / 3;\n    margin: 0 auto;\n    position: relative;\n    border: 1px solid #ccc;\n    background: #000;\n}\n.crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n.focus-label {\n    position: absolute; top: -25px; width: 200px; text-align: center;\n    color: orange; font-size: 10px; font-weight: bold; letter-spacing: 1px;\n}\n.grid-cell { border: 1px solid rgba(255,255,255,0.15); transition: background 0.1s; }\n.cell-active { background-color: rgba(0, 255, 0, 0.15); border-color: rgba(0,255,0,0.4); }\n.cell-rejected { background-color: rgba(255, 0, 0, 0.15); }\n.gap-3 { display: flex; flex-direction: column; gap: 12px; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 510,
+        "y": 280,
+        "wires": [
+            [
+                "aa79e9d1d4c21a2b",
+                "3ec78b1561245371"
+            ]
+        ]
+    },
+    {
+        "id": "3ec78b1561245371",
+        "type": "function",
+        "z": "6fac9fa6a894b293",
+        "name": "set light settings",
+        "func": "// On vérifie si le message contient les propriétés attendues\n// avant de mettre à jour les variables globales.\n\nif (msg.payload) {\n\n    // Si led_status est présent dans le payload, on stocke\n    if (msg.payload.led_status !== undefined) {\n        global.set(\"led_status\", msg.payload.led_status);\n    }\n\n    // Si calibration_led_intensity est présent dans le payload, on stocke\n    if (msg.payload.calibration_led_intensity !== undefined) {\n        global.set(\"calibration_led_intensity\", msg.payload.calibration_led_intensity);\n    }\n}\n\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 740,
+        "y": 280,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "f5ecfcfd42bb61f0",
+        "type": "ui-template",
+        "z": "d70bc885c4bf46d4",
+        "g": "c398718e1269dc31",
+        "group": "af8acdfe9afbad74",
+        "page": "",
+        "ui": "",
+        "name": "Step Bar",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"1\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" class=\"selected-step\" color=\"primary\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" color=\"grey\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" color=\"grey\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" color=\"grey\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1080,
+        "y": 60,
+        "wires": [
+            [
+                "c1c7cc675878b0f3"
+            ]
+        ]
+    },
+    {
+        "id": "c1c7cc675878b0f3",
+        "type": "ui-control",
+        "z": "d70bc885c4bf46d4",
+        "g": "c398718e1269dc31",
+        "name": "",
+        "ui": "e6ae26617c24c3ea",
+        "events": "all",
+        "x": 1280,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "90e29d79c8074c17",
+        "type": "ui-event",
+        "z": "d70bc885c4bf46d4",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "82a9fd78e0554323"
+            ]
+        ]
+    },
+    {
+        "id": "82a9fd78e0554323",
+        "type": "switch",
+        "z": "d70bc885c4bf46d4",
+        "name": "msg.payload.page.path === \"/calibration_saturation_level\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/calibration_saturation_level",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 380,
+        "y": 40,
+        "wires": [
+            [
+                "6219b9a464bc8109"
+            ]
+        ]
+    },
+    {
+        "id": "6219b9a464bc8109",
+        "type": "function",
+        "z": "d70bc885c4bf46d4",
+        "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": [
+            [
+                "10c29a65226c0da4"
+            ]
+        ]
+    },
+    {
+        "id": "10951f5abc907b1d",
+        "type": "mqtt out",
+        "z": "d70bc885c4bf46d4",
+        "name": "",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 850,
+        "y": 100,
+        "wires": []
+    },
+    {
+        "id": "d1b0704bd6aeb092",
+        "type": "function",
+        "z": "d70bc885c4bf46d4",
+        "name": "set wb 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;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 980,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "2da968133f63a1fe",
+        "type": "switch",
+        "z": "d70bc885c4bf46d4",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "imager/image",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 590,
+        "y": 140,
+        "wires": [
+            [
+                "d1b0704bd6aeb092",
+                "10951f5abc907b1d"
+            ]
+        ]
+    },
+    {
+        "id": "10c29a65226c0da4",
+        "type": "ui-template",
+        "z": "d70bc885c4bf46d4",
+        "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 ref=\"captureCanvas\" width=\"300\" height=\"300\" style=\"display:none;\"></canvas>\n\n          <v-overlay v-model=\"isAutoRunning\" contained class=\"align-center justify-center\">\n            <v-card class=\"pa-4 text-center\" width=\"300\">\n              <v-progress-circular indeterminate color=\"primary\" size=\"64\" class=\"mb-4\"></v-progress-circular>\n              <h3 class=\"text-h6\">Calibrating...</h3>\n              <p class=\"text-caption\">Saturation: {{ hsl.s }}% | Iteration: {{ loopCount }}</p>\n              <v-btn color=\"error\" variant=\"text\" @click=\"stopAutoCalibration\">Stop</v-btn>\n            </v-card>\n          </v-overlay>\n\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100 d-flex flex-column\">\n          <div>\n            <v-card-title class=\"text-left text-primary\">\n              White Balance Calibration\n            </v-card-title>\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 to defaults.\n              </p>\n              <v-btn block color=\"error\" variant=\"tonal\" class=\"mb-4\" @click=\"refreshGain\" :disabled=\"isAutoRunning\">\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. Current Analysis</h3>\n              <div class=\"d-flex align-center justify-space-between mb-3\">\n                <div class=\"d-flex align-center\">\n                  <div :style=\"{ 'background-color': `rgb(${sampledR}, ${sampledG}, ${sampledB})`, \n                                width: '40px', height: '40px', border: '2px solid #333', 'border-radius': '4px' }\"\n                    class=\"mr-3\"></div>\n                  <div>\n                    <div class=\"font-mono text-caption\">R:{{ sampledR }} G:{{ sampledG }} B:{{ sampledB }}</div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-h4 font-weight-bold\"\n                    :style=\"{ color: hsl.s < 2 ? '#4CAF50' : hsl.s < 10 ? '#FF9800' : '#F44336' }\">\n                    {{ hsl.s }}%\n                  </div>\n                  <div class=\"text-caption\">Saturation</div>\n                </div>\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. Manual Steps</h3>\n              <v-data-table :items=\"rows\" density=\"compact\" hide-default-footer class=\"gain-table mb-4\">\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\" density=\"compact\" hide-details\n                    variant=\"plain\" class=\"text-center centered-input\"\n                    @change=\"onManualEdit(item.channel,item.suggested)\"></v-text-field>\n                </template>\n              </v-data-table>\n              <v-btn block color=\"secondary\" variant=\"outlined\" :disabled=\"isAutoRunning\" @click=\"applySuggested\">\n                Apply Single Step\n              </v-btn>\n            </section>\n          </div>\n\n          <div class=\"mt-auto\">\n            <v-divider class=\"mb-4\"></v-divider>\n            <section>\n              <h3 class=\"text-subtitle-1 mb-2 d-flex align-center\">\n                <v-icon icon=\"mdi-magic-staff\" color=\"purple\" class=\"mr-2\"></v-icon>\n                4. Auto Zero Saturation\n              </h3>\n              <p class=\"text-caption mb-3\">\n                Automatically loops until saturation is ~0%.\n              </p>\n\n              <v-btn block size=\"large\" color=\"purple\" :loading=\"isAutoRunning\" @click=\"startAutoCalibration\">\n                {{ isAutoRunning ? 'Calibrating...' : 'Auto Calibrate (Target 0%)' }}\n              </v-btn>\n\n              <v-fade-transition>\n                <v-alert v-if=\"autoStatusMsg\" :type=\"autoStatusType\" density=\"compact\" variant=\"tonal\" class=\"mt-3\">\n                  {{ autoStatusMsg }}\n                </v-alert>\n              </v-fade-transition>\n            </section>\n          </div>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      // Gain State\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      \n      // Analysis State\n      sampledR: 0, sampledG: 0, sampledB: 0,\n      hsl: { h: 0, s: 0, l: 0 },\n      \n      // Loop State\n      loopCount: 0, \n      \n      // Capture Internals\n      html2canvasReady: false,\n      captureInterval: null,\n\n      // Auto Calibration Logic\n      isAutoRunning: false,\n      autoStatusMsg: null,\n      autoStatusType: 'info'\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  \n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n    this.stopAutoCalibration();\n  },\n\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    \n    // --------------------------------------------\n    // AUTO CALIBRATION LOGIC (NEW)\n    // --------------------------------------------\n    startAutoCalibration() {\n        if(this.isAutoRunning) return;\n        \n        this.isAutoRunning = true;\n        this.loopCount = 0;\n        this.autoStatusMsg = \"Starting auto-calibration loop...\";\n        this.autoStatusType = 'info';\n\n        // Start the recursive loop\n        this.runAutoStep();\n    },\n\n    stopAutoCalibration() {\n        this.isAutoRunning = false;\n        // Status message will serve as the final report\n    },\n\n    runAutoStep() {\n        if (!this.isAutoRunning) return;\n\n        // 1. Safety Check: Max Iterations\n        if (this.loopCount > 25) {\n            this.autoStatusMsg = \"Stopped: Max iterations reached without 0% result.\";\n            this.autoStatusType = \"warning\";\n            this.stopAutoCalibration();\n            return;\n        }\n\n        // 2. Success Check: Target Saturation Reached\n        // We use < 1.0 as a safe \"effectively zero\" threshold\n        if (this.hsl.s < 1.0 && this.loopCount > 0) {\n            this.autoStatusMsg = `Success! Calibrated to ${this.hsl.s}% saturation.`;\n            this.autoStatusType = \"success\";\n            this.stopAutoCalibration();\n            return;\n        }\n\n        // 3. Apply Gains\n        // We call the existing method to send data\n        this.applySuggested();\n        \n        // 4. Wait for Camera/Stream Latency\n        // This is crucial. If we loop too fast, we calculate based on the OLD image.\n        // 2500ms is a safe buffer for Node-RED/Camera latency.\n        setTimeout(() => {\n            if(!this.isAutoRunning) return; // Check if user stopped during wait\n            this.runAutoStep(); // Recurse\n        }, 2500); \n    },\n\n    // --------------------------------------------\n    // MANUAL CONTROLS\n    // --------------------------------------------\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.autoStatusMsg = 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 we don't have suggested values (first run), calculate them based on current + defaults\n      const nextRed = this.suggested.red !== null ? parseInt(this.suggested.red) : this.current.red;\n      const nextBlue = this.suggested.blue !== null ? parseInt(this.suggested.blue) : this.current.blue;\n\n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: nextRed,\n            blue: nextBlue,\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      \n      // Update local state immediately (optimistic UI)\n      this.current = { red: nextRed, blue: nextBlue };\n      this.loopCount++;\n    },\n    \n    // --------------------------------------------\n    // UTILS & CAPTURE\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    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureColorAndCalculateGains();\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      const script = document.createElement(\"script\");\n      script.src = \"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    async captureColorAndCalculateGains() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      // Check iframe accessibility (CORS restrictions might apply if not same origin)\n      if (!iframe?.contentDocument) return; \n\n      try {\n        const snapshotCanvas = await window.html2canvas(iframe.contentDocument.body);\n        const ctx = this.$refs.captureCanvas.getContext(\"2d\");\n        const w = this.$refs.captureCanvas.width;\n        const h = this.$refs.captureCanvas.height;\n\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 80; // Sample area\n        const pixelData = ctx.getImageData((w - regionSize)/2, (h - regionSize)/2, regionSize, regionSize).data;\n\n        let sumR = 0, sumG = 0, sumB = 0, count = 0;\n        for (let i = 0; i < pixelData.length; i += 4) {\n          sumR += pixelData[i]; sumG += pixelData[i + 1]; sumB += pixelData[i + 2]; count++;\n        }\n        \n        const avgR = count ? Math.round(sumR / count) : 0;\n        const avgG = count ? Math.round(sumG / count) : 0;\n        const avgB = count ? Math.round(sumB / count) : 0;\n\n        this.sampledR = avgR; this.sampledG = avgG; this.sampledB = avgB;\n        this.hsl = this.rgbToHsl(avgR, avgG, avgB);\n        \n        // Calculate adjustments relative to Green\n        // Logic: If G > R, we need more Red gain. \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(\"Frame capture error\", 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\n  .calibration-container {\n    position: relative;\n    background: #000;\n  }\n\n  .sampling-overlay {\n    position: absolute;\n    width: 15%;\n    height: 15%;\n    /* Smaller, tighter sampling box */\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 2px dashed rgba(255, 0, 0, 0.7);\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);\n    /* Dim outside area */\n    pointer-events: none;\n    z-index: 10;\n  }\n\n  .gain-table {\n    border: 1px solid #eee;\n  }\n\n  /* Clean up input fields in table */\n  .centered-input>>>input {\n    text-align: center;\n    color: #1976D2;\n    font-weight: bold;\n  }\n\n  .font-mono {\n    font-family: 'Roboto Mono', monospace;\n  }\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 380,
+        "y": 140,
+        "wires": [
+            [
+                "2da968133f63a1fe"
+            ]
+        ]
+    },
+    {
+        "id": "5331fa94d1b90654",
+        "type": "ui-template",
+        "z": "9dfa8db7ce31208f",
+        "g": "3f734d83a7327043",
+        "group": "728c7ed3d63dfcee",
+        "page": "",
+        "ui": "",
+        "name": "Step Bar",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"2\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" color=\"grey\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" class=\"selected-step\" color=\"primary\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" color=\"grey\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" color=\"grey\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1080,
+        "y": 60,
+        "wires": [
+            [
+                "5f823fb3b1c49c65"
+            ]
+        ]
+    },
+    {
+        "id": "5f823fb3b1c49c65",
+        "type": "ui-control",
+        "z": "9dfa8db7ce31208f",
+        "g": "3f734d83a7327043",
+        "name": "",
+        "ui": "e6ae26617c24c3ea",
+        "events": "all",
+        "x": 1280,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "bd3b1d9f854c367c",
+        "type": "ui-event",
+        "z": "9dfa8db7ce31208f",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "bff2be213a3b76b2"
+            ]
+        ]
+    },
+    {
+        "id": "bff2be213a3b76b2",
+        "type": "switch",
+        "z": "9dfa8db7ce31208f",
+        "name": "msg.payload.page.path === \"/calibration_lightness\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/calibration_lightness",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 360,
+        "y": 40,
+        "wires": [
+            [
+                "43220ad00872b995"
+            ]
+        ]
+    },
+    {
+        "id": "43220ad00872b995",
+        "type": "function",
+        "z": "9dfa8db7ce31208f",
+        "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": [
+            [
+                "c9a6d6f19ff18dda"
+            ]
+        ]
+    },
+    {
+        "id": "c9a6d6f19ff18dda",
+        "type": "ui-template",
+        "z": "9dfa8db7ce31208f",
+        "group": "728c7ed3d63dfcee",
+        "page": "",
+        "ui": "",
+        "name": "Calibration - Lightness",
+        "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\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.calibration_led_intensity !== undefined)\n          this.currentLedValue = Number(p.calibration_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        \"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,
+        "templateScope": "local",
+        "className": "",
+        "x": 400,
+        "y": 140,
+        "wires": [
+            [
+                "b067a2833aee498d"
+            ]
+        ]
+    },
+    {
+        "id": "371de3becc1c4e80",
+        "type": "mqtt out",
+        "z": "9dfa8db7ce31208f",
+        "name": "",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 850,
+        "y": 100,
+        "wires": []
+    },
+    {
+        "id": "b067a2833aee498d",
+        "type": "switch",
+        "z": "9dfa8db7ce31208f",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "light",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 590,
+        "y": 140,
+        "wires": [
+            [
+                "371de3becc1c4e80"
+            ]
+        ]
+    },
+    {
+        "id": "9d60b1bdff1a8058",
+        "type": "ui-template",
+        "z": "e597cdc71d5a9d33",
+        "g": "f2d9c0f9aabc0a63",
+        "group": "c966455a52d121c0",
+        "page": "",
+        "ui": "",
+        "name": "Step Bar",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"3\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" color=\"grey\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" color=\"grey\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" class=\"selected-step\" color=\"primary\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" color=\"grey\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1080,
+        "y": 60,
+        "wires": [
+            [
+                "48d61ea72d468010"
+            ]
+        ]
+    },
+    {
+        "id": "48d61ea72d468010",
+        "type": "ui-control",
+        "z": "e597cdc71d5a9d33",
+        "g": "f2d9c0f9aabc0a63",
+        "name": "",
+        "ui": "e6ae26617c24c3ea",
+        "events": "all",
+        "x": 1280,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "f4884f6f1ea5cdb5",
+        "type": "ui-template",
+        "z": "e597cdc71d5a9d33",
+        "group": "c966455a52d121c0",
+        "page": "",
+        "ui": "",
+        "name": "Calibration - Pixel Size",
+        "order": 2,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "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,
+        "templateScope": "local",
+        "className": "",
+        "x": 400,
+        "y": 140,
+        "wires": [
+            [
+                "0327248fda7c3f7e"
+            ]
+        ]
+    },
+    {
+        "id": "472f4ba991a77e43",
+        "type": "ui-event",
+        "z": "e597cdc71d5a9d33",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "60b4a20faf7a015e"
+            ]
+        ]
+    },
+    {
+        "id": "60b4a20faf7a015e",
+        "type": "switch",
+        "z": "e597cdc71d5a9d33",
+        "name": "msg.payload.page.path === \"/calibration_pixel_size\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/calibration_pixel_size",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 360,
+        "y": 40,
+        "wires": [
+            [
+                "3e2441107949295a"
+            ]
+        ]
+    },
+    {
+        "id": "3e2441107949295a",
+        "type": "function",
+        "z": "e597cdc71d5a9d33",
+        "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": [
+            [
+                "f4884f6f1ea5cdb5"
+            ]
+        ]
+    },
+    {
+        "id": "0327248fda7c3f7e",
+        "type": "switch",
+        "z": "e597cdc71d5a9d33",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "calibration/save",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 590,
+        "y": 140,
+        "wires": [
+            [
+                "133c27ef75317205"
+            ]
+        ]
+    },
+    {
+        "id": "133c27ef75317205",
+        "type": "function",
+        "z": "e597cdc71d5a9d33",
+        "name": "set calibration_pixel_size",
+        "func": "if (msg.topic) {\n    global.set(\"process_pixel\", msg.payload.calibration_pixel_size);\n    global.set(\"process_pixel_size\", msg.payload.calibration_pixel_size);\n    global.set(\"calibration_pixel_size\", msg.payload.calibration_pixel_size);\n    global.set(\"calibration_scale_factor\", msg.payload.calibration_scale_factor);\n    global.set(\"calibration_sensor_width\", msg.payload.calibration_sensor_width);\n    global.set(\"calibration_stream_width\", msg.payload.calibration_stream_width);\n    global.set(\"calibration_known_distance\", msg.payload.calibration_known_distance);\n    global.set(\"calibration_measured_distance\", msg.payload.calibration_measured_distance);\n    global.set(\"calibration_markerA_x\", msg.payload.calibration_markerA_x);\n    global.set(\"calibration_markerA_y\", msg.payload.calibration_markerA_y);\n    global.set(\"calibration_markerB_x\", msg.payload.calibration_markerB_x);\n    global.set(\"calibration_markerB_y\", msg.payload.calibration_markerB_y);\n}\nreturn msg;",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 1010,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "07e989594965ab7d",
+        "type": "ui-template",
+        "z": "b8e6b9dc69aa3f56",
+        "g": "a75dd1f78f8f991a",
+        "group": "6039d653304537af",
+        "page": "",
+        "ui": "",
+        "name": "Step Bar",
+        "order": 1,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"4\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" color=\"grey\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" color=\"grey\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" color=\"grey\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" class=\"selected-step\" color=\"primary\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 1080,
+        "y": 60,
+        "wires": [
+            [
+                "5e94860de36e0a1c"
+            ]
+        ]
+    },
+    {
+        "id": "5e94860de36e0a1c",
+        "type": "ui-control",
+        "z": "b8e6b9dc69aa3f56",
+        "g": "a75dd1f78f8f991a",
+        "name": "",
+        "ui": "e6ae26617c24c3ea",
+        "events": "all",
+        "x": 1280,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "3430afb16e1eccf0",
+        "type": "ui-event",
+        "z": "b8e6b9dc69aa3f56",
+        "ui": "e6ae26617c24c3ea",
+        "name": "UI Event",
+        "x": 80,
+        "y": 40,
+        "wires": [
+            [
+                "4d3f1761bfaea85b"
+            ]
+        ]
+    },
+    {
+        "id": "4d3f1761bfaea85b",
+        "type": "switch",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "msg.payload.page.path === \"/calibration_pump\"",
+        "property": "payload.page.path",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "/calibration_pump",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 1,
+        "x": 350,
+        "y": 40,
+        "wires": [
+            [
+                "d578e28343d8286b"
+            ]
+        ]
+    },
+    {
+        "id": "d578e28343d8286b",
+        "type": "function",
+        "z": "b8e6b9dc69aa3f56",
+        "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": [
+            [
+                "1c11c424e6c0c405",
+                "33f590e854486a56"
+            ]
+        ]
+    },
+    {
+        "id": "33f590e854486a56",
+        "type": "ui-template",
+        "z": "b8e6b9dc69aa3f56",
+        "group": "6039d653304537af",
+        "page": "",
+        "ui": "",
+        "name": "Calibration - Pump",
+        "order": 2,
+        "width": "0",
+        "height": "0",
+        "head": "",
+        "format": "<template>\n  <v-container class=\"py-6 d-flex justify-center\">\n    <v-card width=\"450\" class=\"pa-4\" elevation=\"2\">\n      <v-card-title class=\"text-primary font-weight-bold\">\n        Pump Calibration\n      </v-card-title>\n      \n      <v-divider class=\"mb-4\"></v-divider>\n\n      <div class=\"mb-6\">\n        <div class=\"text-subtitle-1 font-weight-bold mb-1\">1. Place a scale</div>\n        <div class=\"text-body-2 text-grey-darken-1\">Place a scale ⚖️ beneath the waste container.</div>\n      </div>\n\n      <v-divider class=\"mb-6\"></v-divider>\n\n      <div class=\"mb-6\">\n        <div class=\"text-subtitle-1 font-weight-bold mb-3\">2. Run a liquid transfer</div>\n        \n        <v-text-field\n          v-model.number=\"targetVolume\"\n          label=\"Target Volume (mL)\"\n          type=\"number\"\n          variant=\"outlined\"\n          density=\"compact\"\n          suffix=\"mL\"\n          class=\"mb-3\"\n        ></v-text-field>\n\n        <div class=\"d-flex gap-2\">\n          <v-btn\n            color=\"error\"\n            variant=\"tonal\"\n            class=\"flex-grow-1 me-2\"\n            @click=\"stopPump\"\n            :disabled=\"!pumpRunning\"\n          >Stop</v-btn>\n          \n          <v-btn\n            color=\"primary\"\n            class=\"flex-grow-1\"\n            @click=\"runTransferTest\"\n            :loading=\"pumpRunning\"\n          >Run Test</v-btn>\n        </div>\n\n        <v-alert\n          v-if=\"pumpRunning || elapsedTime > 0\"\n          :color=\"pumpRunning ? 'info' : 'success'\"\n          variant=\"tonal\"\n          density=\"compact\"\n          class=\"mt-4 text-center\"\n        >\n          <span class=\"text-h6 font-weight-black\">{{ formatTime(elapsedTime) }}</span>\n          <div class=\"text-caption\" v-if=\"!pumpRunning\">Test completed</div>\n        </v-alert>\n      </div>\n\n      <v-divider class=\"mb-6\"></v-divider>\n\n      <div class=\"mb-6\">\n        <div class=\"text-subtitle-1 font-weight-bold mb-3\">3. Measure the weight</div>\n        \n        <v-text-field\n          v-model.number=\"measuredVolume\"\n          label=\"Measured Volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          density=\"compact\"\n          suffix=\"mL\"\n          :disabled=\"!pumpDone\"\n          :messages=\"pumpDone && measuredVolume > 0 ? `Delta: ${errorVolume.toFixed(2)} mL` : ''\"\n        ></v-text-field>\n        \n        <div v-if=\"pumpDone && elapsedTime > 0\" class=\"text-caption text-blue-darken-2 mt-1\">\n          ⏱ Actual speed: <b>{{ actualFlowRate }} mL/min</b>\n        </div>\n      </div>\n\n      <v-divider class=\"mb-6\"></v-divider>\n\n      <div>\n        <div class=\"text-subtitle-1 font-weight-bold mb-3\">4. Save calibration</div>\n        \n        <v-text-field\n          v-model.number=\"currentSteps\"\n          label=\"Current steps per 1 mL\"\n          variant=\"underlined\"\n          density=\"compact\"\n          readonly\n          class=\"mb-2\"\n          prepend-icon=\"mdi-history\"\n        ></v-text-field>\n\n        <v-text-field\n          v-model.number=\"suggestedSteps\"\n          label=\"Suggested steps per 1 mL\"\n          variant=\"solo-filled\"\n          density=\"comfortable\"\n          readonly\n          bg-color=\"blue-lighten-5\"\n          color=\"primary\"\n          class=\"mb-4 font-weight-bold\"\n        >\n          <template #append-inner>\n            <v-icon color=\"primary\" @click=\"dialog = true\">mdi-information-outline</v-icon>\n          </template>\n        </v-text-field>\n\n        <v-btn\n          color=\"primary\"\n          block\n          size=\"large\"\n          @click=\"validateCalibration\"\n          :disabled=\"!pumpDone || measuredVolume <= 0\"\n        >\n          Validate & Save\n        </v-btn>\n      </div>\n\n      <v-dialog v-model=\"dialog\" max-width=\"340\">\n        <v-card>\n          <v-card-title class=\"text-body-1\">Calibration Math</v-card-title>\n          <v-card-text class=\"text-caption\">\n            Formula: (Target / Measured) × Current<br><br>\n            ({{ targetVolume }} / {{ measuredVolume }}) × {{ currentSteps }} = <b>{{ suggestedSteps }}</b>\n          </v-card-text>\n          <v-card-actions>\n            <v-spacer></v-spacer>\n            <v-btn color=\"primary\" variant=\"text\" @click=\"dialog = false\">Close</v-btn>\n          </v-card-actions>\n        </v-card>\n      </v-dialog>\n    </v-card>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      targetVolume: 10,\n      measuredVolume: 0,\n      currentSteps: 507,\n      pumpRunning: false,\n      pumpDone: false,\n      dialog: false,\n      startTime: null,\n      elapsedTime: 0,\n      timerInterval: null,\n    };\n  },\n  computed: {\n    errorVolume() {\n      return this.targetVolume - this.measuredVolume;\n    },\n    suggestedSteps() {\n      if (!this.measuredVolume || this.measuredVolume <= 0) return this.currentSteps;\n      return Math.round((this.targetVolume / this.measuredVolume) * this.currentSteps);\n    },\n    actualFlowRate() {\n      if (this.elapsedTime === 0) return 0;\n      const minutes = this.elapsedTime / 60000;\n      return (this.targetVolume / minutes).toFixed(2);\n    }\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        if (!newMsg) return;\n        const payload = newMsg.payload || {};\n        \n        // Mise à jour de S quand Node-RED envoie la valeur actuelle\n        if (payload.calibration_nb_step !== undefined) {\n          this.currentSteps = payload.calibration_nb_step;\n        }\n        \n        if (newMsg.topic === \"status/pump\" && payload.status === \"Done\") {\n          this.stopTimer();\n          this.pumpRunning = false;\n          this.pumpDone = true;\n        }\n      },\n      immediate: true,\n      deep: true,\n    },\n  },\n  methods: {\n    formatTime(ms) {\n      const seconds = Math.floor(ms / 1000);\n      const m = Math.floor(seconds / 60);\n      const s = seconds % 60;\n      return `${m}:${s.toString().padStart(2, '0')}`;\n    },\n    startTimer() {\n      this.elapsedTime = 0;\n      this.startTime = Date.now();\n      this.timerInterval = setInterval(() => {\n        this.elapsedTime = Date.now() - this.startTime;\n      }, 100);\n    },\n    stopTimer() {\n      clearInterval(this.timerInterval);\n    },\n    runTransferTest() {\n      this.pumpDone = false;\n      this.measuredVolume = 0;\n      this.pumpRunning = true;\n      this.startTimer();\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"actuator/pump\",\n          payload: { action: \"move\", direction: \"FORWARD\", volume: this.targetVolume, flowrate: 10 }\n        });\n      }\n    },\n    stopPump() {\n      if (typeof this.send === \"function\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      }\n      this.stopTimer();\n      this.pumpRunning = false;\n    },\n    validateCalibration() {\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"calibration/save\",\n          payload: { calibration_nb_step: this.suggestedSteps }\n        });\n      }\n    }\n  },\n  beforeUnmount() {\n    this.stopTimer();\n  }\n};\n</script>\n\n<style scoped>\n/* Suppression des styles custom pour laisser Vuetify gérer le layout propre */\n.gap-2 {\n  gap: 8px;\n}\n</style>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resendOnRefresh": true,
+        "templateScope": "local",
+        "className": "",
+        "x": 390,
+        "y": 140,
+        "wires": [
+            [
+                "bc5e30bc7ed09916"
+            ]
+        ]
+    },
+    {
+        "id": "27489e08148cc627",
+        "type": "mqtt out",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "",
+        "topic": "",
+        "qos": "",
+        "retain": "",
+        "broker": "8dc3722c.06efa8",
+        "x": 850,
+        "y": 100,
+        "wires": []
+    },
+    {
+        "id": "bc5e30bc7ed09916",
+        "type": "switch",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "actuator/pump",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "calibration/save",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 2,
+        "x": 590,
+        "y": 140,
+        "wires": [
+            [
+                "27489e08148cc627"
+            ],
+            [
+                "6f3a85a2de771d90"
+            ]
+        ]
+    },
+    {
+        "id": "495701d383cde0e8",
+        "type": "mqtt in",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "",
+        "topic": "status/pump",
+        "qos": "0",
+        "datatype": "json",
+        "broker": "8dc3722c.06efa8",
+        "nl": false,
+        "rap": false,
+        "inputs": 0,
+        "x": 90,
+        "y": 340,
+        "wires": [
+            [
+                "33f590e854486a56"
+            ]
+        ]
+    },
+    {
+        "id": "6f3a85a2de771d90",
+        "type": "function",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "set calibration_pump",
+        "func": "if (msg.topic) {\n    global.set(\"calibration_nb_step\", msg.payload.calibration_nb_step);\n}\nreturn msg;\n",
+        "outputs": 1,
+        "timeout": "",
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 860,
+        "y": 200,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "1c11c424e6c0c405",
+        "type": "debug",
+        "z": "b8e6b9dc69aa3f56",
+        "name": "debug 4",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 360,
+        "y": 280,
+        "wires": []
+    },
+    {
+        "id": "aa4f580d98195efa",
+        "type": "ecotaxa",
+        "z": "f8d7305edb3dce2c",
+        "name": "Import to Ecotaxa Project",
+        "api_url": "https://ecotaxa.obs-vlfr.fr/api/",
+        "project_id": "9366",
+        "x": 830,
+        "y": 300,
+        "wires": [
+            [
+                "3f2db75b735b1cea"
+            ]
+        ]
+    },
+    {
+        "id": "56563df41429a63b",
+        "type": "inject",
+        "z": "f8d7305edb3dce2c",
+        "name": "Lancer import",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": "0",
+        "topic": "",
+        "x": 310,
+        "y": 300,
+        "wires": [
+            [
+                "5deb75226b490f72"
+            ]
+        ]
+    },
+    {
+        "id": "3f2db75b735b1cea",
+        "type": "debug",
+        "z": "f8d7305edb3dce2c",
+        "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": "5deb75226b490f72",
+        "type": "function",
+        "z": "f8d7305edb3dce2c",
+        "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": [
+            [
+                "aa4f580d98195efa",
+                "8f63d2d9ba29a929"
+            ]
+        ]
+    },
+    {
+        "id": "8f63d2d9ba29a929",
+        "type": "debug",
+        "z": "f8d7305edb3dce2c",
+        "name": "debug 8",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 580,
+        "y": 560,
+        "wires": []
+    },
+    {
+        "id": "655adc853a6956f6",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "e25bae849bace7c6",
+        "name": "inject",
+        "props": [
+            {
+                "p": "payload.timezone",
+                "v": "Europe/Paris",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 110,
+        "y": 280,
+        "wires": [
+            [
+                "c63068f9aa421f2c"
+            ]
+        ]
+    },
+    {
+        "id": "fec9c2aca5437f85",
+        "type": "set timezone",
+        "z": "e6d820ba0f4f184e",
+        "g": "e25bae849bace7c6",
+        "name": "",
+        "x": 340,
+        "y": 380,
+        "wires": [
+            [
+                "5f77688682c97241"
+            ]
+        ]
+    },
+    {
+        "id": "c63068f9aa421f2c",
+        "type": "list timezones",
+        "z": "e6d820ba0f4f184e",
+        "g": "e25bae849bace7c6",
+        "name": "",
+        "x": 140,
+        "y": 360,
+        "wires": [
+            [
+                "fec9c2aca5437f85"
+            ]
+        ]
+    },
+    {
+        "id": "5f77688682c97241",
+        "type": "get timezone",
+        "z": "e6d820ba0f4f184e",
+        "g": "e25bae849bace7c6",
+        "name": "",
+        "x": 540,
+        "y": 400,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "9975b01cde700ae1",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "14cb9ab4b149e2b5",
+        "name": "inject",
+        "props": [
+            {
+                "p": "payload.country",
+                "v": "FR",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 110,
+        "y": 60,
+        "wires": [
+            [
+                "b72d81f258ab6ed1"
+            ]
+        ]
+    },
+    {
+        "id": "b72d81f258ab6ed1",
+        "type": "list countries",
+        "z": "e6d820ba0f4f184e",
+        "g": "14cb9ab4b149e2b5",
+        "name": "",
+        "x": 140,
+        "y": 140,
+        "wires": [
+            [
+                "8773c66a58ecab21"
+            ]
+        ]
+    },
+    {
+        "id": "8773c66a58ecab21",
+        "type": "set country",
+        "z": "e6d820ba0f4f184e",
+        "g": "14cb9ab4b149e2b5",
+        "name": "",
+        "x": 330,
+        "y": 160,
+        "wires": [
+            [
+                "fe5a0dc78ca52e26"
+            ]
+        ]
+    },
+    {
+        "id": "fe5a0dc78ca52e26",
+        "type": "get country",
+        "z": "e6d820ba0f4f184e",
+        "g": "14cb9ab4b149e2b5",
+        "name": "",
+        "x": 510,
+        "y": 180,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "ec2b56583e1703f0",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "e5f0bc40b541e13f",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 110,
+        "y": 700,
+        "wires": [
+            [
+                "078727b344f7e34a"
+            ]
+        ]
+    },
+    {
+        "id": "078727b344f7e34a",
+        "type": "get hostname",
+        "z": "e6d820ba0f4f184e",
+        "g": "e5f0bc40b541e13f",
+        "name": "",
+        "x": 140,
+        "y": 760,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "355d4990f8958d65",
+        "type": "get name",
+        "z": "e6d820ba0f4f184e",
+        "g": "329d175baf2183b1",
+        "name": "",
+        "x": 130,
+        "y": 920,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "3058d95dae6eea1f",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "329d175baf2183b1",
+        "name": "",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 110,
+        "y": 860,
+        "wires": [
+            [
+                "355d4990f8958d65"
+            ]
+        ]
+    },
+    {
+        "id": "528f6ce911af8982",
+        "type": "storage info",
+        "z": "e6d820ba0f4f184e",
+        "g": "62930a749d014d90",
+        "name": "",
+        "x": 530,
+        "y": 920,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "baac40d3e7a8fcb2",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "62930a749d014d90",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 510,
+        "y": 860,
+        "wires": [
+            [
+                "528f6ce911af8982"
+            ]
+        ]
+    },
+    {
+        "id": "4f9158d3ed8eadd3",
+        "type": "list hardware versions",
+        "z": "e6d820ba0f4f184e",
+        "g": "034aca701dd2a256",
+        "name": "",
+        "x": 170,
+        "y": 560,
+        "wires": [
+            [
+                "0820acd0d3b628d4"
+            ]
+        ]
+    },
+    {
+        "id": "287f7112bac18c51",
+        "type": "get hardware version",
+        "z": "e6d820ba0f4f184e",
+        "g": "034aca701dd2a256",
+        "name": "",
+        "x": 660,
+        "y": 600,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "0820acd0d3b628d4",
+        "type": "set hardware version",
+        "z": "e6d820ba0f4f184e",
+        "g": "034aca701dd2a256",
+        "name": "",
+        "x": 420,
+        "y": 580,
+        "wires": [
+            [
+                "287f7112bac18c51"
+            ]
+        ]
+    },
+    {
+        "id": "327e3da2b7e9e50b",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "034aca701dd2a256",
+        "name": "inject",
+        "props": [
+            {
+                "p": "payload.hardware_version",
+                "v": "v3.0",
+                "vt": "str"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 110,
+        "y": 500,
+        "wires": [
+            [
+                "4f9158d3ed8eadd3"
+            ]
+        ]
+    },
+    {
+        "id": "80b749ee1cbdf98e",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "14cb9ab4b149e2b5",
+        "name": "country",
+        "info": "",
+        "x": 690,
+        "y": 60,
+        "wires": []
+    },
+    {
+        "id": "e49db28bb805280e",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "e25bae849bace7c6",
+        "name": "timezone",
+        "info": "",
+        "x": 740,
+        "y": 280,
+        "wires": []
+    },
+    {
+        "id": "c80721a372673baf",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "034aca701dd2a256",
+        "name": "hardware version",
+        "info": "",
+        "x": 840,
+        "y": 500,
+        "wires": []
+    },
+    {
+        "id": "3e333d969e41b545",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "e5f0bc40b541e13f",
+        "name": "hostname",
+        "info": "",
+        "x": 300,
+        "y": 700,
+        "wires": []
+    },
+    {
+        "id": "a6c33b2025837058",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "329d175baf2183b1",
+        "name": "name",
+        "info": "",
+        "x": 310,
+        "y": 860,
+        "wires": []
+    },
+    {
+        "id": "660f8462d674baea",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "62930a749d014d90",
+        "name": "storage",
+        "info": "",
+        "x": 690,
+        "y": 860,
+        "wires": []
+    },
+    {
+        "id": "f941634f9acf1e65",
+        "type": "poweroff",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "",
+        "x": 1180,
+        "y": 140,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "8d538b74ac03964b",
+        "type": "reboot",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "",
+        "x": 1180,
+        "y": 200,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "3cb007c279dceed0",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 1030,
+        "y": 140,
+        "wires": [
+            [
+                "f941634f9acf1e65"
+            ]
+        ]
+    },
+    {
+        "id": "05d4bd56d2b42da1",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 1030,
+        "y": 200,
+        "wires": [
+            [
+                "8d538b74ac03964b"
+            ]
+        ]
+    },
+    {
+        "id": "8972c5887d7de2dc",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "system ⚠️",
+        "info": "",
+        "x": 1200,
+        "y": 80,
+        "wires": []
+    },
+    {
+        "id": "13bdc8d028ab9063",
+        "type": "wake up",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "",
+        "minutes": "2",
+        "x": 1180,
+        "y": 260,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "8283323ac1aca81a",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "039d9046b10d6840",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 1030,
+        "y": 260,
+        "wires": [
+            [
+                "13bdc8d028ab9063"
+            ]
+        ]
+    },
+    {
+        "id": "d25760aa70fd1524",
+        "type": "list acquisitions",
+        "z": "e6d820ba0f4f184e",
+        "g": "0a51b211ebbb9873",
+        "name": "",
+        "x": 1120,
+        "y": 600,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "d5950445bf78c0c6",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "0a51b211ebbb9873",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 1090,
+        "y": 540,
+        "wires": [
+            [
+                "d25760aa70fd1524"
+            ]
+        ]
+    },
+    {
+        "id": "36a787c8463c3fab",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "0a51b211ebbb9873",
+        "name": "acquisitions",
+        "info": "",
+        "x": 1310,
+        "y": 540,
+        "wires": []
+    },
+    {
+        "id": "9203a825fc1c63e4",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "ef4667eb73b18227",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 1090,
+        "y": 700,
+        "wires": [
+            [
+                "9d2be08e52de0394"
+            ]
+        ]
+    },
+    {
+        "id": "110801015a0ec067",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "ef4667eb73b18227",
+        "name": "segmentations",
+        "info": "",
+        "x": 1300,
+        "y": 700,
+        "wires": []
+    },
+    {
+        "id": "9d2be08e52de0394",
+        "type": "list segmentations",
+        "z": "e6d820ba0f4f184e",
+        "g": "ef4667eb73b18227",
+        "name": "",
+        "x": 1130,
+        "y": 760,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "3973105e8c349a38",
+        "type": "get machine info",
+        "z": "e6d820ba0f4f184e",
+        "g": "693296edc15d81c2",
+        "name": "",
+        "x": 150,
+        "y": 1080,
+        "wires": [
+            [
+                "d96066c662742119"
+            ]
+        ]
+    },
+    {
+        "id": "b8a021de6b15a728",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "693296edc15d81c2",
+        "name": "inject",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 110,
+        "y": 1020,
+        "wires": [
+            [
+                "3973105e8c349a38"
+            ]
+        ]
+    },
+    {
+        "id": "e2c7db0aef7f64ef",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "693296edc15d81c2",
+        "name": "machine info",
+        "info": "",
+        "x": 290,
+        "y": 1020,
+        "wires": []
+    },
+    {
+        "id": "47dce78fa2e5973b",
+        "type": "inject",
+        "z": "e6d820ba0f4f184e",
+        "g": "68e954becfafbf7b",
+        "name": "",
+        "props": [],
+        "repeat": "",
+        "crontab": "",
+        "once": false,
+        "onceDelay": 0.1,
+        "topic": "",
+        "x": 1090,
+        "y": 860,
+        "wires": [
+            [
+                "9f0db647f3595ef9"
+            ]
+        ]
+    },
+    {
+        "id": "9f0db647f3595ef9",
+        "type": "capture",
+        "z": "e6d820ba0f4f184e",
+        "g": "68e954becfafbf7b",
+        "name": "",
+        "x": 1100,
+        "y": 920,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "e14a82906a749dc5",
+        "type": "comment",
+        "z": "e6d820ba0f4f184e",
+        "g": "68e954becfafbf7b",
+        "name": "camera",
+        "info": "",
+        "x": 1330,
+        "y": 860,
+        "wires": []
+    },
+    {
+        "id": "d96066c662742119",
+        "type": "debug",
+        "z": "e6d820ba0f4f184e",
+        "g": "693296edc15d81c2",
+        "name": "debug 10",
+        "active": true,
+        "tosidebar": true,
+        "console": false,
+        "tostatus": false,
+        "complete": "false",
+        "statusVal": "",
+        "statusType": "auto",
+        "x": 470,
+        "y": 1100,
+        "wires": []
+    },
+    {
+        "id": "df6aac39f636d1d9",
+        "type": "ui-template",
+        "z": "f90406ba2da5932f",
+        "group": "",
+        "page": "",
+        "ui": "e6ae26617c24c3ea",
+        "name": "Favicon",
+        "order": 0,
+        "width": 0,
+        "height": 0,
+        "head": "",
+        "format": "<script>\n(function() {\n    var link = document.querySelector(\"link[rel*='icon']\") || document.createElement(\"link\");\n    link.type = \"image/x-icon\";\n    link.rel = \"shortcut icon\";\n    link.href = \"/favicon.ico\";\n    document.getElementsByTagName(\"head\")[0].appendChild(link);\n})();\n</script>",
+        "storeOutMessages": true,
+        "passthru": true,
+        "resend": true,
+        "templateScope": "widget:ui",
+        "className": "",
+        "x": 200,
+        "y": 200,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "a1b2c3d4e5f60001",
+        "type": "switch",
+        "z": "524b7620431210e8",
+        "name": "Route queue topics",
+        "property": "topic",
+        "propertyType": "msg",
+        "rules": [
+            {
+                "t": "eq",
+                "v": "queue_segment_request",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "queue_cancel",
+                "vt": "str"
+            },
+            {
+                "t": "eq",
+                "v": "queue_cancel_all",
+                "vt": "str"
+            }
+        ],
+        "checkall": "true",
+        "repair": false,
+        "outputs": 3,
+        "x": 630,
+        "y": 340,
+        "wires": [
+            [
+                "a1b2c3d4e5f60002"
+            ],
+            [
+                "a1b2c3d4e5f60002"
+            ],
+            [
+                "a1b2c3d4e5f60002"
+            ]
+        ]
+    },
+    {
+        "id": "a1b2c3d4e5f60002",
+        "type": "function",
+        "z": "524b7620431210e8",
+        "name": "Queue Processor",
+        "func": "// Queue Processor - manages the segmentation queue in flow context\n//\n// Inputs: queue_segment_request, queue_confirmed, queue_status_update,\n//         queue_cancel, queue_cancel_all\n// Output 0: MQTT command -> existing segmenter/segment switch\n// Output 1: queue_status -> List of Acquisitions template\n// Output 2: dialog open -> add process_min_ESD -> Dialog\n\nconst topic = msg.topic;\nconst payload = msg.payload;\n\nlet queue = flow.get(\"seg_queue\") || [];\nlet current = flow.get(\"seg_queue_current\") || null;\nlet results = flow.get(\"seg_queue_results\") || [];\nlet active = flow.get(\"seg_queue_active\") || false;\nlet settings = flow.get(\"seg_queue_settings\") || null;\n\nfunction saveState() {\n    flow.set(\"seg_queue\", queue);\n    flow.set(\"seg_queue_current\", current);\n    flow.set(\"seg_queue_results\", results);\n    flow.set(\"seg_queue_active\", active);\n    flow.set(\"seg_queue_settings\", settings);\n}\n\nfunction buildStatusMsg() {\n    return {\n        topic: \"queue_status\",\n        payload: {\n            active: active,\n            current_path: current ? current.item.path : null,\n            queued_paths: queue.map(q => q.item.path),\n            results: results\n        }\n    };\n}\n\nfunction processNext() {\n    if (queue.length === 0) {\n        active = false;\n        current = null;\n        saveState();\n        return [[null], [buildStatusMsg()], [null]];\n    }\n\n    current = queue.shift();\n    saveState();\n\n    const mqttMsg = {\n        topic: \"segmenter/segment\",\n        payload: {\n            action: \"segment\",\n            path: [current.item.path],\n            settings: {\n                force: false,\n                recursive: true,\n                ecotaxa: true,\n                keep: true,\n                process_id: 1,\n                process_min_ESD: settings ? settings.process_min_ESD : 20,\n            },\n            dataset: {\n                project_name: current.item.project_name,\n                sample_id: current.item.sample_id,\n                acquisition_id: current.item.acquisition_id,\n                operator_name: current.item.operator_name,\n                image_acquired_count: current.item.image_acquired_count,\n                path: current.item.path,\n            }\n        }\n    };\n\n    return [[mqttMsg], [buildStatusMsg()], [null]];\n}\n\n// --- Handle incoming messages ---\n\nif (topic === \"queue_segment_request\") {\n    // Multi-select request from table. Open batch dialog for ESD confirmation.\n    flow.set(\"seg_queue_pending_items\", payload.items);\n\n    const representative = payload.items[0];\n    const dialogMsg = {\n        topic: \"segment_request\",\n        payload: {\n            ...representative,\n            is_segmented: false,\n            open_dialog: true,\n            batch_mode: true,\n            batch_count: payload.items.length,\n            batch_items: payload.items,\n            process_min_ESD: global.get(\"process_min_ESD\") || 20\n        }\n    };\n    return [[null], [null], [dialogMsg]];\n\n} else if (topic === \"queue_confirmed\") {\n    // Dialog confirmed with settings - start the queue\n    const items = payload.items;\n    const confirmedSettings = { process_min_ESD: payload.process_min_ESD };\n\n    const toQueue = items.filter(item => !item.is_segmented);\n\n    if (toQueue.length === 0) {\n        return [[null], [buildStatusMsg()], [null]];\n    }\n\n    queue = toQueue.map(item => ({ item: item }));\n    results = [];\n    active = true;\n    settings = confirmedSettings;\n    saveState();\n\n    return processNext();\n\n} else if (topic === \"queue_status_update\") {\n    const status = (payload.status || \"\").toLowerCase();\n\n    if (!active || !current) {\n        return [[null], [null], [null]];\n    }\n\n    // Handle retry after busy\n    if (flow.get(\"seg_queue_retry_pending\") && (status.includes(\"done\") || status.includes(\"ready\"))) {\n        flow.set(\"seg_queue_retry_pending\", false);\n        return processNext();\n    }\n\n    if (status.includes(\"done\")) {\n        results.push({ path: current.item.path, acquisition_id: current.item.acquisition_id, status: \"done\" });\n        current = null;\n        saveState();\n        return processNext();\n\n    } else if (status.includes(\"exception\") || status.includes(\"error\")) {\n        results.push({ path: current.item.path, acquisition_id: current.item.acquisition_id, status: \"error\", error: payload.status });\n        current = null;\n        saveState();\n        return processNext();\n\n    } else if (status.includes(\"interrupted\") || status.includes(\"dead\")) {\n        const errMsg = status.includes(\"dead\") ? \"Segmenter process died\" : \"Interrupted\";\n        results.push({ path: current.item.path, acquisition_id: current.item.acquisition_id, status: \"error\", error: errMsg });\n        active = false;\n        current = null;\n        queue = [];\n        saveState();\n        return [[null], [buildStatusMsg()], [null]];\n\n    } else if (status.includes(\"busy\")) {\n        // Segmenter busy with another task. Re-enqueue current and wait.\n        queue.unshift(current);\n        current = null;\n        flow.set(\"seg_queue_retry_pending\", true);\n        saveState();\n        return [[null], [buildStatusMsg()], [null]];\n    }\n\n    // Progress messages - just update status display\n    return [[null], [buildStatusMsg()], [null]];\n\n} else if (topic === \"queue_cancel\") {\n    queue = queue.filter(q => q.item.path !== payload.path);\n    saveState();\n    return [[null], [buildStatusMsg()], [null]];\n\n} else if (topic === \"queue_cancel_all\") {\n    queue = [];\n    saveState();\n    return [[null], [buildStatusMsg()], [null]];\n}\n\nreturn [[null], [null], [null]];",
+        "outputs": 3,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 850,
+        "y": 340,
+        "wires": [
+            [
+                "60ae065050fc2ad3"
+            ],
+            [
+                "8a22543633712279"
+            ],
+            [
+                "6e43a35e8dcf2b3b"
+            ]
+        ]
+    },
+    {
+        "id": "a1b2c3d4e5f60003",
+        "type": "function",
+        "z": "524b7620431210e8",
+        "name": "Queue Status Handler",
+        "func": "// Queue Status Handler\n// Receives status/segmenter MQTT messages, forwards to Queue Processor\n// when queue is active. Also sends progress to the table.\n\nconst active = flow.get(\"seg_queue_active\") || false;\nconst current = flow.get(\"seg_queue_current\") || null;\nconst retryPending = flow.get(\"seg_queue_retry_pending\") || false;\n\nif (!active && !current && !retryPending) {\n    return null;\n}\n\nconst queueMsg = {\n    topic: \"queue_status_update\",\n    payload: msg.payload\n};\n\nconst tableMsg = {\n    topic: \"queue_progress\",\n    payload: {\n        ...msg.payload,\n        current_path: current ? current.item.path : null\n    }\n};\n\nreturn [[queueMsg], [tableMsg]];",
+        "outputs": 2,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 370,
+        "y": 400,
+        "wires": [
+            [
+                "a1b2c3d4e5f60002"
+            ],
+            [
+                "8a22543633712279"
+            ]
+        ]
+    },
+    {
+        "id": "a1b2c3d4e5f60005",
+        "type": "function",
+        "z": "524b7620431210e8",
+        "name": "Queue Status Refresh",
+        "func": "// Queue Status Refresh - sends current queue state to the table on page load\n\nconst queue = flow.get(\"seg_queue\") || [];\nconst current = flow.get(\"seg_queue_current\") || null;\nconst results = flow.get(\"seg_queue_results\") || [];\nconst active = flow.get(\"seg_queue_active\") || false;\n\nmsg = {\n    topic: \"queue_status\",\n    payload: {\n        active: active,\n        current_path: current ? current.item.path : null,\n        queued_paths: queue.map(q => q.item.path),\n        results: results\n    }\n};\nreturn msg;",
+        "outputs": 1,
+        "timeout": 0,
+        "noerr": 0,
+        "initialize": "",
+        "finalize": "",
+        "libs": [],
+        "x": 370,
+        "y": 460,
+        "wires": [
+            [
+                "8a22543633712279"
+            ]
+        ]
     }
-  },
-  {
-    "id": "73070e06474249b4",
-    "type": "ui-page",
-    "name": "Metadata",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/metadata",
-    "icon": "information-outline",
-    "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": 4,
-    "className": "",
-    "visible": "true",
-    "disabled": "false"
-  },
-  {
-    "id": "dd015fda7456b9b0",
-    "type": "ui-group",
-    "name": "Navigation Top",
-    "page": "73070e06474249b4",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "69c772603e9cec0d",
-    "type": "ui-group",
-    "name": "Sample Information",
-    "page": "73070e06474249b4",
-    "width": "12",
-    "height": 1,
-    "order": 2,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "6fab47af451c6d95",
-    "type": "ui-group",
-    "name": "Starting point",
-    "page": "73070e06474249b4",
-    "width": "6",
-    "height": 1,
-    "order": 3,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "1cfe3062a8353012",
-    "type": "ui-group",
-    "name": "Ending point",
-    "page": "73070e06474249b4",
-    "width": "6",
-    "height": 1,
-    "order": 4,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "cb3521392eb4e9ed",
-    "type": "ui-group",
-    "name": "Net Specificity",
-    "page": "73070e06474249b4",
-    "width": "12",
-    "height": 1,
-    "order": 5,
-    "showTitle": true,
-    "className": "",
-    "visible": true,
-    "disabled": false,
-    "groupType": "default"
-  },
-  {
-    "id": "dd4d9707051041c9",
-    "type": "ui-group",
-    "name": "Other informations",
-    "page": "73070e06474249b4",
-    "width": "12",
-    "height": 1,
-    "order": 6,
-    "showTitle": true,
-    "className": "",
-    "visible": true,
-    "disabled": false,
-    "groupType": "default"
-  },
-  {
-    "id": "7a4e042a60b734a6",
-    "type": "ui-page",
-    "name": "Segmentation",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/segmentation",
-    "icon": "crop",
-    "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": 6,
-    "className": "",
-    "visible": "true",
-    "disabled": "false"
-  },
-  {
-    "id": "bfd4acb7b243514f",
-    "type": "ui-group",
-    "name": "List of Acquisitions",
-    "page": "7a4e042a60b734a6",
-    "width": "12",
-    "height": 1,
-    "order": 3,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "f22f627015431032",
-    "type": "ui-page",
-    "name": "Calibration - Lightness",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/calibration_lightness",
-    "icon": "target-variant",
-    "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": 10,
-    "className": "",
-    "visible": "false",
-    "disabled": "false"
-  },
-  {
-    "id": "728c7ed3d63dfcee",
-    "type": "ui-group",
-    "name": "Settings",
-    "page": "f22f627015431032",
-    "width": "12",
-    "height": "1",
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "aa9ba6cedf56d2cd",
-    "type": "ui-page",
-    "name": "Calibration - Pixel size",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/calibration_pixel_size",
-    "icon": "target-variant",
-    "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": 11,
-    "className": "",
-    "visible": "false",
-    "disabled": "false"
-  },
-  {
-    "id": "c966455a52d121c0",
-    "type": "ui-group",
-    "name": "Settings",
-    "page": "aa9ba6cedf56d2cd",
-    "width": "12",
-    "height": "1",
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "48216bc1f7c53a75",
-    "type": "ui-page",
-    "name": "Calibration - Pump",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/calibration_pump",
-    "icon": "target-variant",
-    "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": 12,
-    "className": "",
-    "visible": "false",
-    "disabled": "false"
-  },
-  {
-    "id": "6039d653304537af",
-    "type": "ui-group",
-    "name": "Settings",
-    "page": "48216bc1f7c53a75",
-    "width": "12",
-    "height": "1",
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "803aa402d5c66b73",
-    "type": "ui-page",
-    "name": "Calibration - Saturation Level",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/calibration_saturation_level",
-    "icon": "target-variant",
-    "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": 9,
-    "className": "",
-    "visible": "false",
-    "disabled": "false"
-  },
-  {
-    "id": "af8acdfe9afbad74",
-    "type": "ui-group",
-    "name": "Settings",
-    "page": "803aa402d5c66b73",
-    "width": "12",
-    "height": "1",
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "f8dd620721c6d70b",
-    "type": "ui-page",
-    "name": "Calibration",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/calibration",
-    "icon": "mdi-tune",
-    "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": "c29c835a70533b69",
-    "type": "ui-group",
-    "name": "header",
-    "page": "f8dd620721c6d70b",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "822cdc5b6ef13f39",
-    "type": "ui-group",
-    "name": "body",
-    "page": "f8dd620721c6d70b",
-    "width": "12",
-    "height": 1,
-    "order": 2,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "bcc78241b99ba27f",
-    "type": "ui-page",
-    "name": "Preview",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/preview",
-    "icon": "mdi-eye",
-    "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": 3,
-    "className": "",
-    "visible": true,
-    "disabled": false
-  },
-  {
-    "id": "58ab4d5e3dd68192",
-    "type": "ui-group",
-    "name": "Streaming",
-    "page": "bcc78241b99ba27f",
-    "width": "6",
-    "height": 1,
-    "order": 2,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "39cbd2658f16d608",
-    "type": "ui-group",
-    "name": "Settings",
-    "page": "bcc78241b99ba27f",
-    "width": "6",
-    "height": 1,
-    "order": 3,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "5c3e73c675caac42",
-    "type": "ui-page",
-    "name": "Acquisition",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/acquisition",
-    "icon": "video-image",
-    "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": 5,
-    "className": "",
-    "visible": "true",
-    "disabled": "false"
-  },
-  {
-    "id": "b274327af3807b79",
-    "type": "ui-group",
-    "name": "Streaming",
-    "page": "5c3e73c675caac42",
-    "width": "4",
-    "height": 1,
-    "order": 2,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "d2f77573ed4317e4",
-    "type": "ui-group",
-    "name": "Acquisition settings",
-    "page": "5c3e73c675caac42",
-    "width": "8",
-    "height": 1,
-    "order": 3,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "632260133d581caa",
-    "type": "ui-page",
-    "name": "Home",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/home",
-    "icon": "home",
-    "layout": "grid",
-    "theme": "f7770f0b818c3a67",
-    "breakpoints": [
-      {
-        "name": "Default",
-        "px": "0",
-        "cols": "3"
-      },
-      {
-        "name": "Tablet",
-        "px": "576",
-        "cols": "3"
-      },
-      {
-        "name": "Small Desktop",
-        "px": "768",
-        "cols": "12"
-      },
-      {
-        "name": "Desktop",
-        "px": "1024",
-        "cols": "12"
-      }
-    ],
-    "order": 1,
-    "className": "",
-    "visible": "true",
-    "disabled": "false"
-  },
-  {
-    "id": "5d39a98563150f22",
-    "type": "ui-group",
-    "name": "body",
-    "page": "632260133d581caa",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "7572915171e440cd",
-    "type": "ui-group",
-    "name": "Navigation Top",
-    "page": "bcc78241b99ba27f",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "3ae252a2e5abca89",
-    "type": "ui-group",
-    "name": "Navigation Top",
-    "page": "5c3e73c675caac42",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "9b992ca6515ed058",
-    "type": "ui-group",
-    "name": "Navigation Top",
-    "page": "7a4e042a60b734a6",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "d129fac8e7742d5b",
-    "type": "ui-page",
-    "name": "Visualization",
-    "ui": "e6ae26617c24c3ea",
-    "path": "/visualization",
-    "icon": "chart-scatter-plot",
-    "layout": "grid",
-    "theme": "f7770f0b818c3a67",
-    "breakpoints": [
-      {
-        "name": "Default",
-        "px": "0",
-        "cols": "4"
-      },
-      {
-        "name": "Tablet",
-        "px": "576",
-        "cols": "4"
-      },
-      {
-        "name": "Small Desktop",
-        "px": "768",
-        "cols": "12"
-      },
-      {
-        "name": "Desktop",
-        "px": "1024",
-        "cols": "12"
-      }
-    ],
-    "order": 8,
-    "className": "",
-    "visible": "true",
-    "disabled": "false"
-  },
-  {
-    "id": "b570f76ef526af45",
-    "type": "ui-group",
-    "name": "Navigation Top",
-    "page": "d129fac8e7742d5b",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "402b3d24c87ab0d2",
-    "type": "ui-group",
-    "name": "Informations",
-    "page": "7a4e042a60b734a6",
-    "width": "12",
-    "height": 1,
-    "order": 2,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "fa6393a7d7e3b7d7",
-    "type": "ui-group",
-    "name": "List of Segmentation",
-    "page": "d129fac8e7742d5b",
-    "width": "12",
-    "height": 1,
-    "order": 2,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "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": 2,
-    "className": "",
-    "visible": "true",
-    "disabled": "false"
-  },
-  {
-    "id": "de680effc3e27451",
-    "type": "ui-group",
-    "name": "body",
-    "page": "34112984a39c35bd",
-    "width": "12",
-    "height": 1,
-    "order": 1,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "c5651e1a3e56f3f5",
-    "type": "ui-group",
-    "name": "Explorer",
-    "page": "d129fac8e7742d5b",
-    "width": "12",
-    "height": 1,
-    "order": 13,
-    "showTitle": true,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "0c1537ce71affc2b",
-    "type": "ui-group",
-    "name": "Gallery",
-    "page": "d129fac8e7742d5b",
-    "width": "12",
-    "height": 1,
-    "order": 14,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "36931a9722892790",
-    "type": "ui-group",
-    "name": "Software Version",
-    "page": "632260133d581caa",
-    "width": "3",
-    "height": 1,
-    "order": 6,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "2aa235120084abe4",
-    "type": "ui-group",
-    "name": "Images Acquired",
-    "page": "632260133d581caa",
-    "width": "3",
-    "height": 1,
-    "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": "dc304678d9a6b53b",
-    "type": "ui-group",
-    "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": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "82480e386ed6f8bd",
-    "type": "ui-group",
-    "name": "Explore your data",
-    "page": "632260133d581caa",
-    "width": "4",
-    "height": 1,
-    "order": 3,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "disabled": "false",
-    "groupType": "default"
-  },
-  {
-    "id": "9d3e8bdd535f0e0d",
-    "type": "ui-group",
-    "name": "Run the Calibration",
-    "page": "632260133d581caa",
-    "width": "4",
-    "height": 1,
-    "order": 4,
-    "showTitle": false,
-    "className": "",
-    "visible": "true",
-    "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": "0f16258953fae292",
-    "type": "file in",
-    "z": "b7861ce703215a01",
-    "name": "",
-    "filename": "/home/pi/PlanktoScope/hardware.json",
-    "filenameType": "str",
-    "format": "utf8",
-    "chunk": false,
-    "sendError": false,
-    "encoding": "none",
-    "allProps": false,
-    "x": 250,
-    "y": 40,
-    "wires": [
-      [
-        "81c516291ab19acd"
-      ]
-    ],
-    "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
-  },
-  {
-    "id": "81c516291ab19acd",
-    "type": "json",
-    "z": "b7861ce703215a01",
-    "name": "Parse JSON",
-    "property": "payload",
-    "action": "",
-    "pretty": false,
-    "x": 510,
-    "y": 40,
-    "wires": [
-      [
-        "d0fbcd200cd09981"
-      ]
-    ]
-  },
-  {
-    "id": "d0fbcd200cd09981",
-    "type": "change",
-    "z": "b7861ce703215a01",
-    "name": "",
-    "rules": [
-      {
-        "t": "set",
-        "p": "hardware_conf",
-        "pt": "global",
-        "to": "payload",
-        "tot": "msg"
-      }
-    ],
-    "action": "",
-    "property": "",
-    "from": "",
-    "to": "",
-    "reg": false,
-    "x": 730,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "730b2780ac215a52",
-    "type": "file in",
-    "z": "63c85b96537b7355",
-    "name": "",
-    "filename": "/home/pi/PlanktoScope/config.json",
-    "filenameType": "str",
-    "format": "utf8",
-    "chunk": false,
-    "sendError": false,
-    "encoding": "none",
-    "x": 560,
-    "y": 60,
-    "wires": [
-      [
-        "e0b7238a0c5d4ed0"
-      ]
-    ],
-    "info": "# PlanktoScope Help\nThis Node will read the content of the file named **config.txt** containing all the input placeholders.\n"
-  },
-  {
-    "id": "e0b7238a0c5d4ed0",
-    "type": "json",
-    "z": "63c85b96537b7355",
-    "name": "config.json",
-    "property": "payload",
-    "action": "",
-    "pretty": false,
-    "x": 730,
-    "y": 60,
-    "wires": [
-      [
-        "f1c0a882a9e3d927"
-      ]
-    ]
-  },
-  {
-    "id": "b8109badf5f39d35",
-    "type": "file",
-    "z": "63c85b96537b7355",
-    "name": "",
-    "filename": "/home/pi/PlanktoScope/config.json",
-    "appendNewline": true,
-    "createDir": true,
-    "overwriteFile": "true",
-    "encoding": "none",
-    "x": 990,
-    "y": 160,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "31ae9b857627673c",
-    "type": "json",
-    "z": "63c85b96537b7355",
-    "name": "config.json",
-    "property": "payload",
-    "action": "str",
-    "pretty": true,
-    "x": 730,
-    "y": 160,
-    "wires": [
-      [
-        "b8109badf5f39d35"
-      ]
-    ]
-  },
-  {
-    "id": "f1c0a882a9e3d927",
-    "type": "function",
-    "z": "63c85b96537b7355",
-    "name": "Global Set",
-    "func": "global.set(\"config_keys\", Object.keys(msg.payload));\n\nfor (const key in msg.payload) {\n    global.set(key, msg.payload[key]);\n}\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 910,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "24ea99bb02eeffa2",
-    "type": "inject",
-    "z": "63c85b96537b7355",
-    "name": "Load config",
-    "props": [
-      {
-        "p": "topic",
-        "vt": "str"
-      }
-    ],
-    "repeat": "",
-    "crontab": "",
-    "once": true,
-    "onceDelay": 0.1,
-    "topic": "",
-    "payloadType": "str",
-    "x": 230,
-    "y": 60,
-    "wires": [
-      [
-        "730b2780ac215a52"
-      ]
-    ]
-  },
-  {
-    "id": "5248e5e225d854d1",
-    "type": "function",
-    "z": "63c85b96537b7355",
-    "name": "get config payload",
-    "func": "keys = global.get(\"config_keys\")\n\nvar payload = {}\n\nkeys.forEach(function(item, index, array) {\n  payload[item] = global.get(item);\n})\n\nreturn {\"payload\": payload};",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 410,
-    "y": 160,
-    "wires": [
-      [
-        "31ae9b857627673c"
-      ]
-    ]
-  },
-  {
-    "id": "97f8a94e71055782",
-    "type": "ui_ui_control",
-    "z": "63c85b96537b7355",
-    "name": "Connect Event",
-    "events": "connect",
-    "x": 220,
-    "y": 100,
-    "wires": [
-      [
-        "730b2780ac215a52"
-      ]
-    ]
-  },
-  {
-    "id": "852522a716e4156e",
-    "type": "switch",
-    "z": "b2bf18a0f40a5d72",
-    "name": "msg.payload.page.path === \"/setup\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/setup",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 310,
-    "y": 40,
-    "wires": [
-      [
-        "7af8cd00e8938727"
-      ]
-    ]
-  },
-  {
-    "id": "49857517dd9e15f7",
-    "type": "ui-event",
-    "z": "b2bf18a0f40a5d72",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "852522a716e4156e"
-      ]
-    ]
-  },
-  {
-    "id": "fc5a4760cc3ea824",
-    "type": "ui-template",
-    "z": "b2bf18a0f40a5d72",
-    "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            <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": 310,
-    "y": 180,
-    "wires": [
-      [
-        "c36ed08fac3fccc0",
-        "0b71d7e104148283"
-      ]
-    ]
-  },
-  {
-    "id": "cf5275898273cd61",
-    "type": "ui-template",
-    "z": "b2bf18a0f40a5d72",
-    "group": "",
-    "page": "34112984a39c35bd",
-    "ui": "",
-    "name": "CSS (All Pages)",
-    "order": 0,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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,
-    "templateScope": "page:style",
-    "className": "",
-    "x": 940,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "c36ed08fac3fccc0",
-    "type": "function",
-    "z": "b2bf18a0f40a5d72",
-    "name": "set general settings",
-    "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": 710,
-    "y": 140,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "7af8cd00e8938727",
-    "type": "read setup",
-    "z": "b2bf18a0f40a5d72",
-    "name": "",
-    "x": 150,
-    "y": 180,
-    "wires": [
-      [
-        "fc5a4760cc3ea824"
-      ]
-    ]
-  },
-  {
-    "id": "6c2762dad373862b",
-    "type": "write setup",
-    "z": "b2bf18a0f40a5d72",
-    "name": "",
-    "x": 670,
-    "y": 240,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "0b71d7e104148283",
-    "type": "switch",
-    "z": "b2bf18a0f40a5d72",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "setup/saved",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 470,
-    "y": 240,
-    "wires": [
-      [
-        "6c2762dad373862b"
-      ]
-    ]
-  },
-  {
-    "id": "b3754a3e5ae5e0ed",
-    "type": "mqtt in",
-    "z": "b2bf18a0f40a5d72",
-    "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": [
-      [
-        "fc5a4760cc3ea824"
-      ]
-    ]
-  },
-  {
-    "id": "d525e948816e36b6",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "group": "",
-    "page": "",
-    "ui": "e6ae26617c24c3ea",
-    "name": "footer",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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          \u00a9 {{ new Date().getFullYear() }} PlanktoScope GUI \u2014 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": 700,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "2a99cafa2c36383b",
-    "type": "ui-event",
-    "z": "f90406ba2da5932f",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "9df0c4431f8b8f31",
-        "ba7e7f61401c14d5",
-        "9dc57d3fe40c1d43"
-      ]
-    ]
-  },
-  {
-    "id": "d6311499f71b7440",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "group": "",
-    "page": "",
-    "ui": "e6ae26617c24c3ea",
-    "name": "CSS (All Pages)",
-    "order": 0,
-    "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.v-row {\n        margin: 0;\n}",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "site:style",
-    "className": "",
-    "x": 1300,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "ba7e7f61401c14d5",
-    "type": "get machine info",
-    "z": "f90406ba2da5932f",
-    "name": "",
-    "x": 850,
-    "y": 40,
-    "wires": [
-      [
-        "362b4428729ebcac"
-      ]
-    ]
-  },
-  {
-    "id": "9dc57d3fe40c1d43",
-    "type": "storage info",
-    "z": "f90406ba2da5932f",
-    "name": "",
-    "x": 830,
-    "y": 80,
-    "wires": [
-      [
-        "751e338fd9e7b365"
-      ]
-    ]
-  },
-  {
-    "id": "751e338fd9e7b365",
-    "type": "function",
-    "z": "f90406ba2da5932f",
-    "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": "362b4428729ebcac",
-    "type": "function",
-    "z": "f90406ba2da5932f",
-    "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": "9df0c4431f8b8f31",
-    "type": "delay",
-    "z": "f90406ba2da5932f",
-    "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": 140,
-    "y": 180,
-    "wires": [
-      [
-        "7326fb7c646235e5"
-      ]
-    ]
-  },
-  {
-    "id": "7326fb7c646235e5",
-    "type": "function",
-    "z": "f90406ba2da5932f",
-    "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": 320,
-    "y": 180,
-    "wires": [
-      [
-        "17d6595dfa9d0cee",
-        "f4c3442da54320e3",
-        "d0eacab77771ef43",
-        "ed7e8648519251ad",
-        "bfd0d1b9f4c7141c"
-      ]
-    ]
-  },
-  {
-    "id": "825ecb1183edc16b",
-    "type": "poweroff",
-    "z": "f90406ba2da5932f",
-    "name": "",
-    "x": 1160,
-    "y": 240,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "f0a002fc31fbe9f9",
-    "type": "reboot",
-    "z": "f90406ba2da5932f",
-    "name": "",
-    "x": 1160,
-    "y": 200,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "9cbcd71938e6162d",
-    "type": "switch",
-    "z": "f90406ba2da5932f",
-    "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": [
-      [
-        "f0a002fc31fbe9f9"
-      ],
-      [
-        "825ecb1183edc16b"
-      ]
-    ]
-  },
-  {
-    "id": "d5cd40c81ac86e7a",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "group": "5d39a98563150f22",
-    "page": "",
-    "ui": "",
-    "name": "empty-state",
-    "order": 1,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "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": 530,
-    "y": 280,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "17d6595dfa9d0cee",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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\u00e9 par d\u00e9faut */\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\u00e9cessaire */\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    /* --- Masquage de l'horloge sous 700px --- */\n    @media (max-width: 700px) {\n    #pks-clock {\n    display: none !important;\n    }\n    \n    /* Optionnel : R\u00e9duire la marge du bouton machine pour gagner encore plus de place */\n    #pks-machine-button {\n    margin-right: 0.5rem;\n    padding: 6px 8px;\n    }\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 = \"/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\u00e9vr.\", \"mars\", \"avr.\", \"mai\", \"juin\", \"juil.\", \"ao\u00fbt\", \"sept.\", \"oct.\", \"nov.\", \"d\u00e9c.\"];\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\u00e9c\u00e9dente) ---\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\u00e8re le lien du logo en premier enfant\n                appBarTitle.prepend(logoLink);\n            }\n\n            // --- 3. Ajout/D\u00e9placement 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\u2026\" : \"Shutting down\u2026\");\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'\u00e9l\u00e9ment 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": 800,
-    "y": 200,
-    "wires": [
-      [
-        "9cbcd71938e6162d"
-      ]
-    ]
-  },
-  {
-    "id": "f4c3442da54320e3",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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 text-right\">\n      {{ msg.payload.software_version }}\n    </v-col>\n  </v-row>\n</template>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 550,
-    "y": 480,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "d0eacab77771ef43",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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 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,
-    "templateScope": "local",
-    "className": "",
-    "x": 550,
-    "y": 520,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "ed7e8648519251ad",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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 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,
-    "templateScope": "local",
-    "className": "",
-    "x": 560,
-    "y": 560,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "bfd0d1b9f4c7141c",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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": "b8d1e9bc6daa3cd0",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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=\"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,
-    "templateScope": "local",
-    "className": "",
-    "x": 540,
-    "y": 440,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "b298c238c9fb0b58",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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": "e7f40c244808dbd4",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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": "4369716b2a45c769",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "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": "a3a7ac5089d5d8e6",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "group": "",
-    "page": "632260133d581caa",
-    "ui": "",
-    "name": "CSS (This page)",
-    "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": "5fedc522b345193c",
-    "type": "ui-template",
-    "z": "6d6a011bf1913637",
-    "group": "58ab4d5e3dd68192",
-    "page": "",
-    "ui": "",
-    "name": "Streaming",
-    "order": 1,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "format": "<template>\n    <v-container fluid class=\"pa-0\">\n        <v-responsive :aspect-ratio=\"3/4\" class=\"iframe-wrapper border\">\n            <iframe src=\"/preview/node-red\" title=\"Node-RED Preview\" class=\"responsive-iframe\" allowfullscreen></iframe>\n        </v-responsive>\n    </v-container>\n</template>\n\n<style scoped>\n    .iframe-wrapper {\n        width: 100%;\n        max-width: 100%;\n        margin: 0 auto;\n        overflow: hidden;\n        border-radius: 8px;\n        background-color: #fff;\n    }\n\n    .responsive-iframe {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        \n        /* Dimensions ajust\u00e9es pour le ratio invers\u00e9 */\n        width: 133.33%;\n        height: 75%;\n        \n        border: none;\n        pointer-events: auto;\n        \n        /* Rotation anti-horaire (-90deg) */\n        transform: translate(-50%, -50%) rotate(-90deg);\n        transform-origin: center center;\n    }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1310,
-    "y": 120,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "8452566c16d26f45",
-    "type": "function",
-    "z": "6d6a011bf1913637",
-    "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": [
-      [
-        "db1ef284071e60a1"
-      ]
-    ]
-  },
-  {
-    "id": "67e05ec4078fd100",
-    "type": "ui-event",
-    "z": "6d6a011bf1913637",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "b1e37de2e8a49f29"
-      ]
-    ]
-  },
-  {
-    "id": "b1e37de2e8a49f29",
-    "type": "switch",
-    "z": "6d6a011bf1913637",
-    "name": "msg.payload.page.path === \"/preview\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/preview",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 320,
-    "y": 40,
-    "wires": [
-      [
-        "8452566c16d26f45"
-      ]
-    ]
-  },
-  {
-    "id": "d119a802cf4c3f2d",
-    "type": "function",
-    "z": "6d6a011bf1913637",
-    "name": "set pump settings",
-    "func": "if (msg.topic) {\n    global.set(\"pump_flowrate\", msg.payload.pump_flowrate);\n    global.set(\"pump_manual_volume\", msg.payload.pump_manual_volume);\n}\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 790,
-    "y": 80,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "8dfac8c9adafc76f",
-    "type": "function",
-    "z": "6d6a011bf1913637",
-    "name": "set focus settings",
-    "func": "if (msg.topic) {\n    global.set(\"focus_distance\", msg.payload.focus_distance);\n\n}\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 790,
-    "y": 180,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "24077d432cd6db62",
-    "type": "switch",
-    "z": "6d6a011bf1913637",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "set_global/pump",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "actuator/pump",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "set_global/focus",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "actuator/focus",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "set_global/light",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "light",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "set_global/bubbler",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "actuator/bubbler",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "imager/image",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 9,
-    "x": 550,
-    "y": 220,
-    "wires": [
-      [
-        "d119a802cf4c3f2d"
-      ],
-      [
-        "7acd371a3e8d58c7"
-      ],
-      [
-        "8dfac8c9adafc76f"
-      ],
-      [
-        "ddbbc347dd314885"
-      ],
-      [
-        "2655836d55c8c00e"
-      ],
-      [
-        "f4e92faafd5a967d"
-      ],
-      [
-        "85505c259d234540"
-      ],
-      [
-        "69f0e0fd86f25833",
-        "8eecfc6543bf944c"
-      ],
-      [
-        "a56a8820702f4610"
-      ]
-    ]
-  },
-  {
-    "id": "db1ef284071e60a1",
-    "type": "ui-template",
-    "z": "6d6a011bf1913637",
-    "group": "39cbd2658f16d608",
-    "page": "",
-    "ui": "",
-    "name": "body",
-    "order": 1,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"pa-0\">\n    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Light</div>\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'off' ? 'grey-lighten-2' : 'white'\"\n            @click=\"on_led_toggle('off')\">\n            Off\n          </v-btn>\n          <v-divider vertical></v-divider>\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"led_state === 'on' ? 'primary' : 'white'\"\n            @click=\"on_led_toggle('on')\">\n            On\n          </v-btn>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Focus</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\">\n            <v-label class=\"text-body-2\">Distance</v-label>\n          </v-col>\n          <v-col cols=\"5\" sm=\"6\">\n            <v-slider v-model.number=\"focus_distance\" :max=\"maxFocus\" :min=\"minFocus\" :step=\"25\" hide-details\n              :thumb-size=\"15\" :track-size=\"3\" />\n          </v-col>\n          <v-col cols=\"4\">\n            <v-text-field v-model.number=\"focus_distance\" type=\"number\" variant=\"outlined\" hide-details suffix=\"\u03bcm\"\n              :step=\"25\" :min=\"minFocus\" />\n          </v-col>\n        </v-row>\n\n        <v-row dense class=\"mt-1\">\n          <v-col cols=\"12\">\n            <v-btn-toggle variant=\"outlined\" v-model=\"focus_distance_preset\" min=\"0\" 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        <v-row dense class=\"mt-1\">\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'\">Near</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'stop'\" color=\"grey-lighten-2\" variant=\"flat\">Stop</v-btn>\n              <v-btn class=\"flex-grow-1\" :value=\"'DOWN'\">Far</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-card class=\"mb-3 pa-4 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-2\">\n          <div class=\"text-subtitle-1 font-weight-bold\">Pump</div>\n        </div>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Flowrate</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_flowrate\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.1\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_flowrate\" type=\"number\" variant=\"outlined\" :step=\"0.1\"\n              hide-details suffix=\"ml/min\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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\">{{ value }}</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-divider class=\"my-3\"></v-divider>\n        <v-row align=\"center\" dense>\n          <v-col cols=\"3\" sm=\"2\"><v-label class=\"text-body-2\">Volume</v-label></v-col>\n          <v-col cols=\"5\" sm=\"6\"><v-slider v-model.number=\"pump_manual_volume\" :min=\"minFlow\" :max=\"maxFlow\" :step=\"0.1\"\n              hide-details :thumb-size=\"15\" :track-size=\"3\" /></v-col>\n          <v-col cols=\"4\"><v-text-field v-model.number=\"pump_manual_volume\" type=\"number\" variant=\"outlined\" :step=\"0.1\"\n              hide-details suffix=\"ml\" /></v-col>\n        </v-row>\n        <v-row dense class=\"mt-1\">\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 }}</v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n        <v-row dense class=\"mt-2\">\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'\" color=\"grey-lighten-2\" variant=\"flat\">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    <v-card class=\"mb-3 pa-3 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <div class=\"d-flex align-center\">\n        <div class=\"text-subtitle-1 font-weight-bold mr-16\">Bubbler</div>\n        <div class=\"d-flex flex-grow-1 border rounded\" style=\"overflow: hidden;\">\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"bubbler_state === 'off' ? 'grey-lighten-2' : 'white'\"\n            @click=\"on_bubbler_toggle('off')\">\n            Off\n          </v-btn>\n          <v-divider vertical></v-divider>\n          <v-btn flat class=\"flex-grow-1 rounded-0\" :color=\"bubbler_state === 'on' ? 'primary' : 'white'\"\n            @click=\"on_bubbler_toggle('on')\">\n            On\n          </v-btn>\n        </div>\n      </div>\n    </v-card>\n\n    <v-card class=\"pa-2 rounded-lg border\" variant=\"tonal\" color=\"grey-darken-3\">\n      <v-list-item lines=\"two\" href=\"calibration\" class=\"pa-2\">\n        <template v-slot:prepend><v-icon size=\"large\">mdi-tune</v-icon></template>\n        <v-list-item-title class=\"text-subtitle-1 font-weight-bold\">Calibration</v-list-item-title>\n        <v-list-item-subtitle class=\"text-caption\">Modify camera and optical parameters.</v-list-item-subtitle>\n        <template v-slot:append><v-icon size=\"small\">mdi-chevron-right</v-icon></template>\n      </v-list-item>\n    </v-card>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: { msg: { type: Object, default: () => ({}) } },\n\n  data() {\n    return {\n      minFlow: 0.02, maxFlow: 30, pump_flowrate: 0, pump_manual_volume: 0, pump_flowrate_presets: [0.02, 0.2, 2, 20], pump_volume_presets: [0.004, 0.2, 2, 20], pump_flowrate_preset: null, pump_volume_preset: null, pump_direction: \"stop\",\n      minFocus: 25, maxFocus: 5000, focus_distance: 25, focus_distance_presets: [25, 150, 500, 5000], focus_distance_preset: null, focus_direction: \"stop\",\n      led_state: \"off\", bubbler_state: \"off\", calibration_led_intensity: null,\n      imageSnackbar: false, imageSnackbarText: \"\",\n    };\n  },\n\n  created() { this.hydrateFromMsg(this.msg); },\n\n  watch: {\n    msg: { handler(newMsg) { this.hydrateFromMsg(newMsg); }, deep: true },\n    pump_flowrate(newVal) { this.pump_flowrate_preset = this.pump_flowrate_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    pump_manual_volume(newVal) { this.pump_volume_preset = this.pump_volume_presets.find((v) => v === newVal) ?? null; this.sendPumpParams(); },\n    focus_distance(newVal) { this.focus_distance_preset = this.focus_distance_presets.find((v) => v === newVal) ?? null; this.sendFocusParams(); },\n  },\n\n  methods: {\n    hydrateFromMsg(m) {\n      const p = m?.payload ?? {};\n      \n      // Update LED intensity if it exists in payload (prevents nulling out when other topics arrive)\n      if (p.calibration_led_intensity !== undefined) {\n        this.calibration_led_intensity = p.calibration_led_intensity;\n      }\n\n      // Sync Pump/Focus UI state on completion\n      if (m.topic === \"status/pump\" && p.status === \"Done\") this.pump_direction = \"stop\";\n      if (m.topic === \"status/focus\" && p.status === \"Done\") this.focus_direction = \"stop\";\n      \n      // Hydrate LED status\n      if (\"led_status\" in p || (m.topic === \"status/light\" && \"status\" in p)) {\n        const rawVal = p.led_status !== undefined ? p.led_status : p.status;\n        const s = String(rawVal).toLowerCase().trim();\n        this.led_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n      \n      // Hydrate Bubbler state\n      if (\"bubbler_status\" in p || m.topic === \"status/actuator\") {\n        // On r\u00e9cup\u00e8re la valeur soit dans la cl\u00e9 d\u00e9di\u00e9e, soit directement dans p\n        const rawBubbler = p.bubbler_status !== undefined ? p.bubbler_status : p;\n        \n        const s = String(rawBubbler).toLowerCase().trim();\n        this.bubbler_state = [\"on\", \"true\", \"1\"].includes(s) ? \"on\" : \"off\";\n      }\n\n      // Sync other parameters\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      if ([\"backward\", \"stop\", \"forward\"].includes(p.command)) this.pump_direction = p.command;\n      if (typeof p.focus_distance === \"number\") this.focus_distance = p.focus_distance;\n      if ([\"UP\", \"stop\", \"DOWN\"].includes(p.command)) this.focus_direction = p.command;\n    },\n\n    on_led_toggle(val) {\n      this.led_state = val;\n      \n      // Construct the specific light command\n      const lightCommandPayload = { action: val };\n      if (val === \"on\" && this.calibration_led_intensity !== null) {\n        lightCommandPayload.value = this.calibration_led_intensity;\n      }\n      this.send({ topic: \"light\", payload: lightCommandPayload });\n\n      // Update the global state\n      this.send({\n        topic: \"set_global/light\",\n        payload: {\n          led_status: val,\n          calibration_led_intensity: this.calibration_led_intensity\n        }\n      });\n    },\n\n    on_bubbler_toggle(val) {\n      this.bubbler_state = val;\n      \n      // Create an object that matches what your Python script expects\n      const messagePayload = {\n        action: val // This will result in {\"action\": \"on\"} or {\"action\": \"off\"}\n      };\n      \n      this.send({ topic: \"actuator/bubbler\", payload: messagePayload });\n      this.send({ topic: \"set_global/bubbler\", payload: messagePayload });\n    },\n\n    // Pump Methods\n    onFlowrateToggle(val) { if (val != null) this.pump_flowrate = val; },\n    onVolumeToggle(val) { if (val != null) this.pump_manual_volume = val; },\n    sendPumpParams() { this.send({ topic: \"set_global/pump\", payload: { pump_flowrate: Number(this.pump_flowrate) || 0, pump_manual_volume: Number(this.pump_manual_volume) || 0 } }); },\n    on_pump_direction_change(val) {\n      this.pump_direction = val;\n      if (val === \"stop\") { this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } }); }\n      else {\n        const dir = val === \"forward\" ? \"FORWARD\" : \"BACKWARD\";\n        this.send({ topic: \"actuator/pump\", payload: { action: \"move\", direction: dir, volume: Number(this.pump_manual_volume) || 0, flowrate: Number(this.pump_flowrate) || 0 } });\n      }\n    },\n\n    // Focus Methods\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; if (d >= x3) return y3;\n      if (d <= x2) return Math.round(y1 + ((y2 - y1) / (x2 - x1)) * (d - x1));\n      return Math.round(y2 + ((y3 - y2) / (x3 - x2)) * (d - x2));\n    },\n    sendFocusParams() {\n      const d = Number(this.focus_distance) || 25;\n      this.send({ topic: \"set_global/focus\", payload: { focus_distance: d, focus_speed: this.speedFromDistance(d) } });\n    },\n    on_focus_direction_change(val) {\n      this.focus_direction = val;\n      if (val === \"stop\") { this.send({ topic: \"actuator/focus\", payload: { action: \"stop\" } }); }\n      else {\n        const d = Number(this.focus_distance) || 25;\n        this.send({ topic: \"actuator/focus\", payload: { action: \"move\", direction: val, distance: d / 1000, speed: this.speedFromDistance(d) / 1000 } });\n      }\n    }\n  },\n};\n</script>\n\n<style scoped>\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\n  .border {\n    border: 1px solid #cccccc !important;\n  }\n\n  .v-text-field--suffixed.v-text-field .v-field:not(.v-field--reverse) .v-field__input {\n    padding-top: 10px;\n  }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 370,
-    "y": 220,
-    "wires": [
-      [
-        "24077d432cd6db62"
-      ]
-    ]
-  },
-  {
-    "id": "27a2b425848bce6f",
-    "type": "mqtt in",
-    "z": "6d6a011bf1913637",
-    "name": "",
-    "topic": "status/pump",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 90,
-    "y": 200,
-    "wires": [
-      [
-        "db1ef284071e60a1"
-      ]
-    ]
-  },
-  {
-    "id": "d53b5bacd6d4c3ac",
-    "type": "mqtt in",
-    "z": "6d6a011bf1913637",
-    "name": "",
-    "topic": "status/focus",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 90,
-    "y": 260,
-    "wires": [
-      [
-        "db1ef284071e60a1"
-      ]
-    ]
-  },
-  {
-    "id": "2655836d55c8c00e",
-    "type": "function",
-    "z": "6d6a011bf1913637",
-    "name": "set light settings",
-    "func": "// On v\u00e9rifie si le message contient les propri\u00e9t\u00e9s attendues\n// avant de mettre \u00e0 jour les variables globales.\n\nif (msg.payload) {\n    \n    // Si led_status est pr\u00e9sent dans le payload, on stocke\n    if (msg.payload.led_status !== undefined) {\n        global.set(\"led_status\", msg.payload.led_status);\n    }\n\n    // Si calibration_led_intensity est pr\u00e9sent dans le payload, on stocke\n    if (msg.payload.calibration_led_intensity !== undefined) {\n        global.set(\"calibration_led_intensity\", msg.payload.calibration_led_intensity);\n    }\n}\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 780,
-    "y": 280,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "20547adfe07c39d4",
-    "type": "mqtt in",
-    "z": "6d6a011bf1913637",
-    "name": "",
-    "topic": "status/light",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 80,
-    "y": 320,
-    "wires": [
-      [
-        "db1ef284071e60a1"
-      ]
-    ]
-  },
-  {
-    "id": "364762649f9df51a",
-    "type": "mqtt in",
-    "z": "6d6a011bf1913637",
-    "name": "",
-    "topic": "status/imager",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 90,
-    "y": 380,
-    "wires": [
-      [
-        "db1ef284071e60a1"
-      ]
-    ]
-  },
-  {
-    "id": "85505c259d234540",
-    "type": "function",
-    "z": "6d6a011bf1913637",
-    "name": "set bubbler settings",
-    "func": "if (msg.topic) {\n    global.set(\"bubbler_status\", msg.payload.action);\n\n}\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 800,
-    "y": 380,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "f49d224aa87cdc35",
-    "type": "mqtt in",
-    "z": "6d6a011bf1913637",
-    "name": "",
-    "topic": "status/bubbler",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 100,
-    "y": 380,
-    "wires": [
-      [
-        "db1ef284071e60a1"
-      ]
-    ]
-  },
-  {
-    "id": "daae7bb94e6bd36d",
-    "type": "ui-template",
-    "z": "6d6a011bf1913637",
-    "group": "7572915171e440cd",
-    "page": "",
-    "ui": "",
-    "name": "Navigation Top",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"mx-0 py-1 px-1 rounded-lg border overflow-hidden bg-white\" \n      no-gutters\n    >\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n/* Conteneur principal */\n.nav-wrapper {\n  justify-content: space-around;\n  overflow-x: auto;\n  scrollbar-width: none; \n}\n\n.nav-wrapper::-webkit-scrollbar { display: none; }\n\n/* Le Bouton de base */\n.step-btn {\n  flex: 1 1 auto;\n  min-width: 50px;\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0 12px !important;\n  text-transform: none;\n  letter-spacing: normal;\n}\n\n/* Animation du texte */\n.btn-text {\n  max-width: 200px; /* Valeur arbitraire haute */\n  opacity: 1;\n  margin-left: 8px;\n  white-space: nowrap;\n  transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n/* \u00c9tat actif */\n.v-btn--active.step-btn {\n  background-color: rgba(var(--v-theme-primary), 0.08) !important;\n  font-weight: bold;\n}\n\n/* S\u00e9parateurs */\n.separator-sign {\n  color: #eeeeee;\n  font-size: 1.2rem;\n  user-select: none;\n  flex: 0 0 auto;\n}\n\n/* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n@media (max-width: 700px) {\n  .btn-text {\n    max-width: 0;\n    opacity: 0;\n    margin-left: 0;\n    overflow: hidden;\n  }\n  \n  .step-btn {\n    min-width: 44px;\n    padding: 0 !important;\n    /* On garde le bouton actif un peu plus large ou color\u00e9 pour le rep\u00e8re visuel */\n  }\n\n  /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF m\u00eame sur mobile */\n  .v-btn--active.step-btn .btn-text {\n    max-width: 100px;\n    opacity: 1;\n    margin-left: 4px;\n  }\n}\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1300,
-    "y": 80,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "7acd371a3e8d58c7",
-    "type": "mqtt out",
-    "z": "6d6a011bf1913637",
-    "name": "MQTT - pump",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 780,
-    "y": 120,
-    "wires": []
-  },
-  {
-    "id": "ddbbc347dd314885",
-    "type": "mqtt out",
-    "z": "6d6a011bf1913637",
-    "name": "MQTT - focus",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 780,
-    "y": 220,
-    "wires": []
-  },
-  {
-    "id": "f4e92faafd5a967d",
-    "type": "mqtt out",
-    "z": "6d6a011bf1913637",
-    "name": "MQTT - light",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 770,
-    "y": 320,
-    "wires": []
-  },
-  {
-    "id": "a56a8820702f4610",
-    "type": "mqtt out",
-    "z": "6d6a011bf1913637",
-    "name": "MQTT - Imager",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 780,
-    "y": 480,
-    "wires": []
-  },
-  {
-    "id": "8eecfc6543bf944c",
-    "type": "debug",
-    "z": "6d6a011bf1913637",
-    "name": "debug 1",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "true",
-    "targetType": "full",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 480,
-    "y": 560,
-    "wires": []
-  },
-  {
-    "id": "69f0e0fd86f25833",
-    "type": "mqtt out",
-    "z": "6d6a011bf1913637",
-    "name": "MQTT - bubbler",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 780,
-    "y": 420,
-    "wires": []
-  },
-  {
-    "id": "29b0ee7d77b1b373",
-    "type": "ui-template",
-    "z": "f7ff9c0e54da4b8e",
-    "group": "dd015fda7456b9b0",
-    "page": "",
-    "ui": "",
-    "name": "Navigation Top",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* \u00c9tat actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* S\u00e9parateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou color\u00e9 pour le rep\u00e8re visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF m\u00eame sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1300,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "4893b2624925b10a",
-    "type": "ui-template",
-    "z": "f7ff9c0e54da4b8e",
-    "group": "69c772603e9cec0d",
-    "page": "",
-    "ui": "",
-    "name": "Sample Information",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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=\"sample_id\"\n        label=\"Sample ID\"\n        placeholder=\"ex : S001\"\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\n  <v-snackbar v-model=\"savedSnackbar\" :timeout=\"2000\" color=\"success\" location=\"bottom\">Metadata saved</v-snackbar>\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      savedSnackbar: 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 && String(p.sample_id) !== String(this.sample_id)) {\n           this.sample_id = p.sample_id;\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      this.savedSnackbar = true;\n\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: String(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,
-    "templateScope": "local",
-    "className": "",
-    "x": 410,
-    "y": 140,
-    "wires": [
-      [
-        "23f16f4437be7a5f",
-        "38f795adc7ce566d"
-      ]
-    ]
-  },
-  {
-    "id": "e7f23192557851e0",
-    "type": "ui-template",
-    "z": "f7ff9c0e54da4b8e",
-    "group": "6fab47af451c6d95",
-    "page": "",
-    "ui": "",
-    "name": "Starting point",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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=\"\u00b0\"\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=\"\u2032\"\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=\"\u2033\"\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=\"\u00b0\"\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=\"\u2032\"\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=\"\u2033\"\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>\u2212</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\u00e9\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          // \u2705 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\" \u2192 \"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\u00e9j\u00e0 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\" \u2192 \"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)}\u00b0, ${lon.toFixed(4)}\u00b0`, x + 10 / this.zoom, y - 10 / this.zoom);\n      ctx.restore();\n    },\n  },\n};\n</script>\n",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 400,
-    "y": 200,
-    "wires": [
-      [
-        "943a452f8c2720fe"
-      ]
-    ]
-  },
-  {
-    "id": "ba461390e1455794",
-    "type": "ui-template",
-    "z": "f7ff9c0e54da4b8e",
-    "group": "1cfe3062a8353012",
-    "page": "",
-    "ui": "",
-    "name": "Ending point",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\" @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          :style=\"isTablet ? 'font-size:1.2rem;width:100%;' : ''\" @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=\"\u00b0\" 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=\"\u2032\" 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=\"\u2033\" 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=\"\u00b0\" 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=\"\u2032\" 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=\"\u2033\" 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 @click=\"zoomInEnd\"><span>+</span></v-btn>\n          <v-btn icon @click=\"zoomOutEnd\"><span>\u2212</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      object_date: \"\",\n      object_time: \"\",\n      object_lat: 0,\n      object_lon: 0,\n\n      object_date_end: \"\",\n      object_time_end: \"\",\n      object_lat_end: 0,\n      object_lon_end: 0,\n\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      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      sample_gear: \"\",\n\n      hintDialogEnd: false,\n      hintTitleEnd: \"\",\n      hintTextEnd: \"\",\n    };\n  },\n  computed: {\n    isTablet() {\n      return this.$vuetify.display.mdAndDown;\n    },\n    isDisabled() {\n      // Container is enabled ONLY if gear is Horizontal Net\n      return this.sample_gear !== \"Horizontal Net\";\n    },\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // 1. Update Start Variables\n        if (p.object_date !== undefined) this.object_date = p.object_date;\n        if (p.object_time !== undefined) {\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. Update Gear Type\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n\n        // 3. Logic for End Fields based on Gear Type\n        if (this.sample_gear === \"Horizontal Net\") {\n          // If the message contains specific end values, use them. Otherwise, copy start values.\n          this.object_date_end = p.object_date_end !== undefined ? p.object_date_end : this.object_date;\n          \n          if (p.object_time_end !== undefined) {\n            let te = p.object_time_end.toString();\n            if (te.length === 4) te = `${te.slice(0, 2)}:${te.slice(2, 4)}`;\n            this.object_time_end = te;\n          } else {\n            this.object_time_end = this.object_time;\n          }\n\n          this.object_lat_end = p.object_lat_end !== undefined ? parseFloat(p.object_lat_end) : this.object_lat;\n          this.object_lon_end = p.object_lon_end !== undefined ? parseFloat(p.object_lon_end) : this.object_lon;\n        } else {\n          // Reset fields if gear is changed to something else\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        // 4. Update UI Display (DMS and Map)\n        this.updateFromDecimalEnd(\"lat\");\n        this.updateFromDecimalEnd(\"lon\");\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    openHintEnd(type) {\n      if (type === \"datetime\") {\n        this.hintTitleEnd = \"End Date and Time (UTC)\";\n        this.hintTextEnd = \"Enter the end time in UTC. Use YYYY-MM-DD and HH:MM.\";\n      } else if (type === \"latitude\") {\n        this.hintTitleEnd = \"End Latitude\";\n        this.hintTextEnd = \"Latitude between -90 and +90.\";\n      } else if (type === \"longitude\") {\n        this.hintTitleEnd = \"End Longitude\";\n        this.hintTextEnd = \"Longitude between -180 and +180.\";\n      }\n      this.hintDialogEnd = true;\n    },\n    sendUpdateEnd(topic, extra = {}) {\n      const formattedTimeEnd = this.object_time_end ? this.object_time_end.replace(\":\", \"\") : \"\";      \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(this.toDecimal(this.longitude_D_end, this.longitude_M_end, this.longitude_S_end, this.lonDir_end).toFixed(6));\n      this.object_lat_end = parseFloat(this.toDecimal(this.latitude_D_end, this.latitude_M_end, this.latitude_S_end, this.latDir_end).toFixed(6));\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; this.longitude_M_end = M; this.longitude_S_end = S; 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; this.latitude_M_end = M; this.latitude_S_end = S; this.latDir_end = dir;\n      }\n      this.centerOnMarkerEnd();\n    },\n    toDecimal(D, M, S, dir) {\n      let val = (parseFloat(D) || 0) + (parseFloat(M) || 0) / 60 + (parseFloat(S) || 0) / 3600;\n      if (dir === \"S\" || dir === \"W\") val *= -1;\n      return val;\n    },\n    fromDecimal(dec, type) {\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 ? (type === \"lat\" ? \"N\" : \"E\") : (type === \"lat\" ? \"S\" : \"W\");\n      return { D, M, S, dir };\n    },\n    onWheelEnd(e) { e.deltaY < 0 ? this.zoomInEnd() : this.zoomOutEnd(); },\n    zoomInEnd() { this.zoom_end = Math.min(this.zoom_end * 1.25, 10); this.centerOnMarkerEnd(); },\n    zoomOutEnd() { this.zoom_end = Math.max(this.zoom_end / 1.25, 0.5); this.centerOnMarkerEnd(); },\n    centerOnMarkerEnd() {\n      const w = 800, h = 500;\n      const lat = this.object_lat_end || 0, 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(this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end), this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end));\n      ctx.scale(this.zoom_end, this.zoom_end);\n      if (this.imageLoaded_end) ctx.drawImage(this.mapImage_end, 0, 0, w, h);\n      ctx.restore();\n    },\n    drawPointEnd() {\n      const w = 800, h = 500, ctx = this.ctx_end;\n      if (!ctx) return;\n      this.drawMapEnd(w, h);\n      const lat = this.object_lat_end || 0, lon = this.object_lon_end || 0;\n      const x = w / 2 + (lon / 180) * (w / 2), y = h / 2 - (lat / 90) * (h / 2);\n      ctx.save();\n      ctx.translate(this.offsetX_end * this.zoom_end + (w / 2) * (1 - this.zoom_end), this.offsetY_end * this.zoom_end + (h / 2) * (1 - this.zoom_end));\n      ctx.scale(this.zoom_end, this.zoom_end);\n      ctx.fillStyle = \"red\"; ctx.beginPath(); ctx.arc(x, y, 6 / this.zoom_end, 0, 2 * Math.PI); ctx.fill();\n      ctx.fillStyle = \"black\"; ctx.font = `${13 / this.zoom_end}px sans-serif`;\n      ctx.fillText(`${lat.toFixed(4)}\u00b0, ${lon.toFixed(4)}\u00b0`, x + 10 / this.zoom_end, y - 10 / this.zoom_end);\n      ctx.restore();\n    },\n  },\n};\n</script>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 390,
-    "y": 300,
-    "wires": [
-      [
-        "8f1721c5616582cc"
-      ]
-    ]
-  },
-  {
-    "id": "9ddd0fbe2670f626",
-    "type": "ui-template",
-    "z": "f7ff9c0e54da4b8e",
-    "group": "cb3521392eb4e9ed",
-    "page": "",
-    "ui": "",
-    "name": "Net Specificity",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <!-- Conteneur principal d\u00e9sactiv\u00e9 si sample_gear n'est ni Horizontal Net ni Vertical Net -->\n  <v-container fluid :disabled=\"isDisabled\" :style=\"{\n        pointerEvents: isDisabled ? 'none' : 'auto',\n        opacity: isDisabled ? 0.5 : 1,\n        width: '100%',\n      }\">\n\n    <v-row class=\"mt-2\">\n      <!-- Net Mouth Diameter -->\n      <v-col cols=\"12\" md=\"3\">\n        <v-text-field label=\"Mouth Opening Diameter\" v-model.number=\"sample_net_mouth_diameter\" :min=\"0\" :max=\"1000\"\n          :step=\"1\" suffix=\"cm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\"\n          @input=\"sendUpdate('sample_net_params')\">\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 label=\"Length of the Net\" v-model.number=\"sample_net_length\" :min=\"0\" :max=\"1000\" :step=\"1\"\n          suffix=\"cm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" @input=\"sendUpdate('sample_net_params')\">\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 label=\"Net Mesh Size\" v-model.number=\"sample_net_mesh_size\" :min=\"0\" :max=\"1000\" :step=\"1\"\n          suffix=\"\u03bcm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" @input=\"sendUpdate('sample_net_params')\">\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 label=\"Filtered volume\" v-model.number=\"sample_filtered_volume\" :min=\"0\" :max=\"1000\"\n          :step=\"1\" suffix=\"L\" type=\"number\" variant=\"outlined\" hide-details=\"auto\"\n          @input=\"sendUpdate('sample_net_params')\">\n          <template #append>\n            <v-icon class=\"cursor-pointer\" @click=\"openHint('Collected_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>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_net_mouth_diameter: \"\",\n      sample_net_length: \"\",\n      sample_net_mesh_size: \"\",\n      sample_filtered_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\u00e9sactiver 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\u00e9cup\u00e8re la valeur re\u00e7ue\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_filtered_volume !== undefined)\n          this.sample_filtered_volume = Number(p.sample_filtered_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_filtered_volume: Number(this.sample_filtered_volume) || 0,\n          ...extra,\n        },\n      });\n    },\n\n    /**\n     * Info popup \u2014 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\u2019s mouth \u2014 the circular opening where water enters the net \u2014 measured in centimeters (cm). \" +\n          \"Typical plankton nets range from 20\u201360 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 (\u03bcm). \" +\n          \"This defines the smallest particles or plankton that can pass through. For example, a 20 \u03bcm mesh captures microplankton but not bacteria.\";\n      } else if (type === \"Collected_volume\") {\n        this.hintTitle = \"Filtered volume\";\n        this.hintText =\n          \"Help me\";\n      }\n      this.hintDialog = true;\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,
-    "templateScope": "local",
-    "className": "",
-    "x": 400,
-    "y": 400,
-    "wires": [
-      [
-        "ad434c2ca4b52cf4"
-      ]
-    ]
-  },
-  {
-    "id": "e4d9d690aa12d09c",
-    "type": "ui-template",
-    "z": "f7ff9c0e54da4b8e",
-    "group": "dd4d9707051041c9",
-    "page": "",
-    "ui": "",
-    "name": "Other Informations",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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 label=\"Collected Volume\" v-model.number=\"sample_collected_volume\" :min=\"0\" :max=\"100000\" :step=\"1\"\n          suffix=\"mL\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Concentration Factor\" v-model.number=\"sample_concentration_factor\" :min=\"0\" :max=\"100\"\n          :step=\"0.01\" suffix=\"\u00d7\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Sieve Mesh Size\" v-model.number=\"sample_sieve_mesh_size\" :min=\"1\" :max=\"1000\" :step=\"10\"\n          suffix=\"\u03bcm\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Depth of the Sample\" v-model.number=\"sample_depth\" :min=\"0\" :max=\"10935\" :step=\"1\"\n          suffix=\"m\" type=\"number\" variant=\"outlined\" hide-details=\"auto\" :disabled=\"isDisabled\"\n          @input=\"sendUpdate('sample_water_params')\">\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 label=\"Sample Comment\" v-model=\"sample_comment\" variant=\"outlined\" rows=\"2\"\n          @input=\"sendUpdate('sample_water_params')\">\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>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_collected_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    // \u2705 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_collected_volume !== undefined)\n          this.sample_collected_volume = Number(p.sample_collected_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_collected_volume: Number(this.sample_collected_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 === \"collected_volume\") {\n        this.hintTitle = \"Collected Volume\";\n        this.hintText =\n          \"Help me define\";\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 (\u03bcm).\";\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\n    .v-text-field input,\n    .v-textarea textarea {\n      font-size: 1.2rem !important;\n    }\n  }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 410,
-    "y": 460,
-    "wires": [
-      [
-        "b993c6289d67f56d"
-      ]
-    ]
-  },
-  {
-    "id": "990f1d12e47028f3",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "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": [
-      [
-        "4893b2624925b10a",
-        "e7f23192557851e0",
-        "ba461390e1455794",
-        "9ddd0fbe2670f626",
-        "e4d9d690aa12d09c"
-      ]
-    ]
-  },
-  {
-    "id": "7eb3f9c16325dd59",
-    "type": "ui-event",
-    "z": "f7ff9c0e54da4b8e",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "b729150cff31a0ff"
-      ]
-    ]
-  },
-  {
-    "id": "b729150cff31a0ff",
-    "type": "switch",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "msg.payload.page.path === \"/metadata\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/metadata",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 320,
-    "y": 40,
-    "wires": [
-      [
-        "990f1d12e47028f3"
-      ]
-    ]
-  },
-  {
-    "id": "943a452f8c2720fe",
-    "type": "switch",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "object_datetime",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "object_latlon",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 570,
-    "y": 200,
-    "wires": [
-      [
-        "e01c2d986929b8ed"
-      ],
-      [
-        "ddd635a300595387"
-      ]
-    ]
-  },
-  {
-    "id": "ddd635a300595387",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set object_latlon",
-    "func": "if (msg.topic) {\n    global.set(\"object_lat\", msg.payload.object_lat);\n    global.set(\"object_lon\", msg.payload.object_lon);\n    if (msg.payload.object_date !== undefined) {\n        global.set(\"object_date\", msg.payload.object_date);\n    }\n    if (msg.payload.object_time !== undefined) {\n        global.set(\"object_time\", msg.payload.object_time);\n    }\n}\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 960,
-    "y": 240,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "e01c2d986929b8ed",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set object_datetime",
-    "func": "if (msg.topic) {\n    global.set(\"object_date\", msg.payload.object_date);\n    global.set(\"object_time\", msg.payload.object_time);\n    if (msg.payload.object_lat !== undefined) {\n        global.set(\"object_lat\", msg.payload.object_lat);\n    }\n    if (msg.payload.object_lon !== undefined) {\n        global.set(\"object_lon\", msg.payload.object_lon);\n    }\n}\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 970,
-    "y": 200,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "8f1721c5616582cc",
-    "type": "switch",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "object_datetime_end",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "object_latlon_end",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 570,
-    "y": 300,
-    "wires": [
-      [
-        "e4efaec99ee5c172"
-      ],
-      [
-        "4790ca87c9ebf492"
-      ]
-    ]
-  },
-  {
-    "id": "4790ca87c9ebf492",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set object_latlon_end",
-    "func": "if (msg.topic) {\n    global.set(\"object_lat_end\", msg.payload.object_lat_end);\n    global.set(\"object_lon_end\", msg.payload.object_lon_end);\n}\n\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 980,
-    "y": 340,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "e4efaec99ee5c172",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "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}\n\n\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 990,
-    "y": 300,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "ad434c2ca4b52cf4",
-    "type": "switch",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "sample_net_params",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 570,
-    "y": 400,
-    "wires": [
-      [
-        "fb90be363fcaf2e5"
-      ]
-    ]
-  },
-  {
-    "id": "fb90be363fcaf2e5",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set sample_net_params",
-    "func": "if (msg.topic) {\n    global.set(\"sample_net_mouth_diameter\", msg.payload.sample_net_mouth_diameter);\n    global.set(\"sample_net_length\", msg.payload.sample_net_length);\n    global.set(\"sample_net_mesh_size\", msg.payload.sample_net_mesh_size);\n    global.set(\"sample_filtered_volume\", msg.payload.sample_filtered_volume);\n}\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 990,
-    "y": 400,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "b993c6289d67f56d",
-    "type": "switch",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "sample_water_params",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 570,
-    "y": 460,
-    "wires": [
-      [
-        "01dbd7f8f0e8cc4b"
-      ]
-    ]
-  },
-  {
-    "id": "01dbd7f8f0e8cc4b",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set sample_water_params",
-    "func": "if (msg.topic) {\n    global.set(\"sample_collected_volume\", msg.payload.sample_collected_volume);\n    global.set(\"sample_concentration_factor\", msg.payload.sample_concentration_factor);\n    global.set(\"sample_sieve_mesh_size\", msg.payload.sample_sieve_mesh_size);\n    global.set(\"sample_depth\", msg.payload.sample_depth);\n    global.set(\"sample_comment\", msg.payload.sample_comment);\n}\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 1000,
-    "y": 460,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "23f16f4437be7a5f",
-    "type": "switch",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "sample_project_meta",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 570,
-    "y": 140,
-    "wires": [
-      [
-        "815b79480bdb6864",
-        "ba461390e1455794",
-        "9ddd0fbe2670f626",
-        "e7f23192557851e0",
-        "e4d9d690aa12d09c"
-      ]
-    ]
-  },
-  {
-    "id": "815b79480bdb6864",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set sample_project_meta",
-    "func": "if (msg.topic) {\n    global.set(\"sample_project\", msg.payload.sample_project);\n    global.set(\"sample_operator\", msg.payload.sample_operator);\n    global.set(\"sample_id\", msg.payload.sample_id);\n    global.set(\"sample_gear\", msg.payload.sample_gear);\n}\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 990,
-    "y": 140,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "38f795adc7ce566d",
-    "type": "function",
-    "z": "f7ff9c0e54da4b8e",
-    "name": "set data",
-    "func": "// 1. Setup Base Variables\nconst gear = msg.payload.sample_gear;\nconst now = new Date();\nconst dateStr = now.toISOString().split('T')[0]; // YYYY-MM-DD\n// Time as HHMM (no colons, no seconds) \u2014 matches sendUpdate format\nconst hh = String(now.getUTCHours()).padStart(2, '0');\nconst mm = String(now.getUTCMinutes()).padStart(2, '0');\nconst timeStr = hh + mm;\n\n// Helper to get global or fallback\nconst getG = (key, fallback) => global.get(key) ?? fallback;\n\n// 2. Define the Full Schema Template (All keys)\nconst allKeys = [\n    \"object_date\", \"object_time\", \"object_lat\", \"object_lon\",\n    \"object_date_end\", \"object_time_end\", \"object_lat_end\", \"object_lon_end\",\n    \"sample_net_mouth_diameter\", \"sample_net_length\", \"sample_net_mesh_size\",\n    \"sample_filtered_volume\", \"sample_concentration_factor\", \"sample_sieve_mesh_size\",\n    \"sample_depth\", \"sample_collected_volume\"\n];\n\nlet updates = {};\n\n// 3. Logic by Gear Type\n// All gears use getG() so user-entered values are preserved.\n// Defaults are only used when no value exists in globals.\nif (gear === \"Horizontal Net\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0),\n        object_date_end: getG(\"object_date_end\", getG(\"object_date\", dateStr)),\n        object_time_end: getG(\"object_time_end\", getG(\"object_time\", timeStr)),\n        object_lat_end: getG(\"object_lat_end\", getG(\"object_lat\", 0)),\n        object_lon_end: getG(\"object_lon_end\", getG(\"object_lon\", 0)),\n        sample_net_mouth_diameter: getG(\"sample_net_mouth_diameter\", 30),\n        sample_net_length: getG(\"sample_net_length\", 120),\n        sample_net_mesh_size: getG(\"sample_net_mesh_size\", 20),\n        sample_filtered_volume: getG(\"sample_filtered_volume\", 2000),\n        sample_concentration_factor: getG(\"sample_concentration_factor\", 1),\n        sample_sieve_mesh_size: getG(\"sample_sieve_mesh_size\", 200),\n        sample_depth: getG(\"sample_depth\", 1),\n        sample_collected_volume: getG(\"sample_collected_volume\", 50)\n    };\n}\nelse if (gear === \"Vertical Net\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0),\n        sample_net_mouth_diameter: getG(\"sample_net_mouth_diameter\", 30),\n        sample_net_length: getG(\"sample_net_length\", 120),\n        sample_net_mesh_size: getG(\"sample_net_mesh_size\", 20),\n        sample_filtered_volume: getG(\"sample_filtered_volume\", 2000),\n        sample_concentration_factor: getG(\"sample_concentration_factor\", 1),\n        sample_sieve_mesh_size: getG(\"sample_sieve_mesh_size\", 200),\n        sample_depth: getG(\"sample_depth\", 1),\n        sample_collected_volume: getG(\"sample_collected_volume\", 50)\n    };\n}\nelse if (gear === \"Niskin bottle\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0),\n        sample_concentration_factor: getG(\"sample_concentration_factor\", 1),\n        sample_sieve_mesh_size: getG(\"sample_sieve_mesh_size\", 200),\n        sample_depth: getG(\"sample_depth\", 1),\n        sample_collected_volume: getG(\"sample_collected_volume\", 50)\n    };\n}\nelse if (gear === \"Lab culture\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 0),\n        object_lon: getG(\"object_lon\", 0)\n    };\n}\nelse if (gear === \"Demo / Test\") {\n    updates = {\n        object_date: getG(\"object_date\", dateStr),\n        object_time: getG(\"object_time\", timeStr),\n        object_lat: getG(\"object_lat\", 48.587440060782704),\n        object_lon: getG(\"object_lon\", -3.838189224660975)\n    };\n}\n\n// 4. Final Processing: Sync to Global & Build Payload\nlet finalPayload = {};\n\nallKeys.forEach(key => {\n    if (updates.hasOwnProperty(key)) {\n        // Key is relevant to current gear type - use value (from getG with fallback)\n        finalPayload[key] = updates[key];\n        global.set(key, updates[key]);\n    } else {\n        // Key is NOT relevant to current gear type.\n        // Send null in payload (disabled fields show empty),\n        // but preserve global so user values survive gear switches.\n        finalPayload[key] = null;\n    }\n});\n\nmsg.payload = finalPayload;\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 100,
-    "y": 340,
-    "wires": [
-      [
-        "e7f23192557851e0",
-        "ba461390e1455794",
-        "9ddd0fbe2670f626",
-        "e4d9d690aa12d09c"
-      ]
-    ]
-  },
-  {
-    "id": "6a0b3b7b9f767135",
-    "type": "ui-template",
-    "z": "71ede8b7dd88d90e",
-    "group": "b274327af3807b79",
-    "page": "",
-    "ui": "",
-    "name": "Streaming",
-    "order": 1,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"pa-0 fill-height rounded-lg border\">\n    <v-row no-gutters class=\"fill-height justify-center align-center rounded-lg\">\n      <v-col cols=\"12\" class=\"d-flex align-center justify-center\">\n\n        <v-responsive :aspect-ratio=\"3/4\" class=\"iframe-wrapper\">\n          <v-card class=\"calibration-container rounded-lg\">\n\n            <!-- \u2500\u2500 Stop Button \u2500\u2500 -->\n            <v-btn v-if=\"status === 'running'\" color=\"error\" variant=\"elevated\"\n              class=\"position-absolute top-0 right-0 ma-4\" style=\"z-index: 1000;\" @click=\"stopCalibration\">\n              Stop Calibration\n            </v-btn>\n\n            <!-- \u2500\u2500 Video Feed \u2500\u2500 -->\n            <iframe src=\"/preview/node-red\" class=\"responsive-iframe\" @load=\"onIframeLoad\" ref=\"videoIframe\"></iframe>\n\n            <!-- \u2500\u2500 Step 2: Colour-analysis focus zone \u2500\u2500 -->\n            <div v-if=\"step === 2\" class=\"focus-overlay\">\n              <div class=\"crosshair\"></div>\n              <div class=\"focus-label\">ZONE ANALYSE COULEUR</div>\n            </div>\n\n            <!-- \u2500\u2500 Step 3: Smart-grid overlay \u2500\u2500 -->\n            <div v-show=\"step === 3\" class=\"smart-grid\">\n              <div v-for=\"(zone, i) in gridZones\" :key=\"i\" class=\"grid-cell\"\n                :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"></div>\n            </div>\n\n            <!-- \u2500\u2500 Step 1: Init info card \u2500\u2500 -->\n            <div v-if=\"step === 1\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title\">Initialization</div>\n                <div class=\"info-value\">{{ (led * 100).toFixed(1) }}%</div>\n                <div class=\"info-label\">LED Power</div>\n                <div class=\"info-row\"><span>Red gain:</span><span>{{ gains.red }}</span></div>\n                <div class=\"info-row\"><span>Blue gain:</span><span>{{ gains.blue }}</span></div>\n              </div>\n            </div>\n\n            <!-- \u2500\u2500 Step 2: Saturation info card \u2500\u2500 -->\n            <div v-if=\"step === 2\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title\">Desaturation</div>\n                <div class=\"info-value\" :class=\"satClass\">{{ currentSat.toFixed(1) }}%</div>\n                <div class=\"info-label\">Saturation</div>\n                <div class=\"progress-bar\">\n                  <div class=\"progress-fill\" :style=\"{ width: Math.max(0, 100 - currentSat * 10) + '%' }\"></div>\n                </div>\n                <div class=\"info-row\"><span>Red gain:</span><span>{{ gains.red }}</span></div>\n                <div class=\"info-row\"><span>Blue gain:</span><span>{{ gains.blue }}</span></div>\n                <div class=\"info-target\">Target: under 1.0%</div>\n              </div>\n            </div>\n\n            <!-- \u2500\u2500 Step 3: Exposure info card \u2500\u2500 -->\n            <div v-if=\"step === 3\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title\">Exposure</div>\n                <div class=\"info-value\" :class=\"lumClass\">{{ currentLum.toFixed(1) }}</div>\n                <div class=\"info-label\">Luminosity</div>\n                <div class=\"progress-bar\">\n                  <div class=\"progress-fill\" :style=\"{ width: (currentLum / 255) * 100 + '%' }\"></div>\n                </div>\n                <div class=\"info-row\"><span>LED:</span><span>{{ (led * 100).toFixed(1) }}%</span></div>\n                <div class=\"info-row\"><span>Zones:</span><span>{{ activeZonesCount }} / 400</span></div>\n                <div class=\"info-target\">Target: 230 \u00b1 5</div>\n              </div>\n            </div>\n\n            <!-- \u2500\u2500 Step 4: Complete info card \u2500\u2500 -->\n            <div v-if=\"step === 4\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title success\">Complete</div>\n                <div class=\"info-row\"><span>LED:</span><span>{{ (led * 100).toFixed(1) }}%</span></div>\n                <div class=\"info-row\"><span>Luminosity:</span><span>{{ currentLum.toFixed(1) }}</span></div>\n                <div class=\"info-row\"><span>Saturation:</span><span>{{ currentSat.toFixed(1) }}%</span></div>\n                <div class=\"info-row\"><span>Red gain:</span><span>{{ gains.red }}</span></div>\n                <div class=\"info-row\"><span>Blue gain:</span><span>{{ gains.blue }}</span></div>\n                <div class=\"info-row\"><span>Valid zones:</span><span>{{ activeZonesCount }} / 400</span></div>\n              </div>\n            </div>\n\n            <!-- \u2500\u2500 Error info card \u2500\u2500 -->\n            <div v-if=\"status === 'error'\" class=\"overlay-center\">\n              <div class=\"info-card\">\n                <div class=\"info-title error\">ERROR</div>\n                <div class=\"info-label\">{{ lastError }}</div>\n              </div>\n            </div>\n\n            <!-- \u2500\u2500 Hidden analysis canvas \u2500\u2500 -->\n            <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n\n          </v-card>\n        </v-responsive>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  // Node-RED UIBuilder / Dashboard bridge\n  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  props: ['msg', 'send'],\n\n  data() {\n    return {\n      // \u2500\u2500 Sequence state \u2500\u2500\n      status: 'idle',   // idle | running | success | error\n      step: 0,          // 0=idle  1=init  2=sat  3=lum  4=done\n      lastError: '',\n\n      // \u2500\u2500 Live metrics \u2500\u2500\n      currentSat: 0,\n      currentLum: 0,\n\n      // \u2500\u2500 Hardware state (reference preset) \u2500\u2500\n      led: 0.1,\n      gains: { red: 200, blue: 180 },\n\n      // \u2500\u2500 Smart-grid config (4:3 canvas) \u2500\u2500\n      gridN: 20,\n      analysisW: 1200,\n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill(null).map((_, i) => ({ id: i, lum: 0, active: false })),\n\n      logs: []\n    };\n  },\n\n  computed: {\n    activeZonesCount() {\n      return this.gridZones.filter(z => z.active).length;\n    },\n    satClass() {\n      return this.currentSat < 1.0 ? 'value-ok' : 'value-wait';\n    },\n    lumClass() {\n      return Math.abs(this.currentLum - 230) <= 5 ? 'value-ok' : 'value-wait';\n    }\n  },\n\n  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  // Incoming command listener (Node-RED \u2192 UI)\n  // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  watch: {\n    msg: {\n      handler(newMsg) {\n        if (!newMsg) return;\n        const p = newMsg?.payload ?? {};\n\n        if (p.acq_status === 'on')    this.startSequence();\n        else if (p.acq_status === 'off')   this.stopCalibration();\n        else if (p.acq_status === 'reset') this.resetState();\n      },\n      deep: true\n    }\n  },\n\n  methods: {\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // STATE MANAGEMENT\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    resetState() {\n      this.status = 'idle';\n      this.step = 0;\n      this.lastError = '';\n      this.currentSat = 0;\n      this.currentLum = 0;\n      this.logs = [];\n      this.log('Reset complete.');\n    },\n\n    stopCalibration() {\n      this.status = 'idle';\n      this.step = 0;\n      this.log('Manual stop.');\n      this.sendStatus('stopped');\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // MAIN SEQUENCE\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async startSequence() {\n      if (this.status === 'running') {\n        this.stopCalibration();\n        return;\n      }\n\n      this.status  = 'running';\n      this.step    = 1;\n      this.logs    = [];\n      this.lastError = '';\n      this.log('Starting sequence...');\n      this.sendStatus('started');\n\n      try {\n        // \u2500\u2500 Step 1: Hardware preset \u2500\u2500\n        await this.runInit();\n\n        // \u2500\u2500 Step 2: Desaturation loop \u2500\u2500\n        this.step = 2;\n        await this.runSaturationLoop();\n\n        // \u2500\u2500 Step 3: Smart-grid exposure loop \u2500\u2500\n        this.step = 3;\n        this.gridZones.forEach(z => { z.active = false; });\n        await this.runLightnessLoop();\n\n        // \u2500\u2500 Done \u2500\u2500\n        this.status = 'success';\n        this.step   = 4;\n        this.log('Calibration complete!');\n\n        // Report final values back to Node-RED\n        if (this.send) {\n          this.send({\n            topic: 'calibration',\n            payload: {\n              status:           'complete',\n              led:              this.led,\n              gains:            this.gains,\n              finalLuminosity:  this.currentLum,\n              finalSaturation:  this.currentSat,\n              validZones:       this.activeZonesCount,\n              timestamp:        new Date().toISOString()\n            }\n          });\n        }\n\n        // Auto-return to idle after showing the complete card\n        await this.wait(2000);\n        if (this.status === 'success') this.resetState();\n\n      } catch (e) {\n        if (this.status !== 'idle') {\n          this.status    = 'error';\n          this.lastError = String(e);\n          this.log('ERROR: ' + e);\n\n          if (this.send) {\n            this.send({\n              topic: 'calibration',\n              payload: { status: 'error', error: String(e), step: this.step }\n            });\n          }\n        }\n      }\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // STEP 1 \u2014 INITIALISATION\n    // Preset: LED 0.1 / R200 B180  |  wait 2500 ms\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async runInit() {\n      this.log('Step 1: Preset \u2192 LED 0.1 / R200 B180');\n      this.led   = 0.1;\n      this.gains = { red: 200, blue: 180 };\n      this.sendIO();\n      await this.wait(2500);\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // STEP 2 \u2014 DESATURATION LOOP\n    // Zone: 100\u00d7100 px centre canvas\n    // Target: sat < 1.0 %  |  Kp = 0.8  |  2000 ms  |  25 iter max\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async runSaturationLoop() {\n      this.log('Step 2: Start desaturation...');\n      let iter = 0;\n\n      while (iter < 25 && this.status === 'running') {\n        const stats = await this.analyzeFrame(true);\n        this.currentSat = stats.sat;\n\n        if (stats.sat < 1.0) {\n          this.log(`Saturation OK: ${stats.sat.toFixed(1)}%`);\n          return;\n        }\n\n        const Kp   = 0.8;\n        const rErr = stats.g - stats.r;\n        const bErr = stats.g - stats.b;\n\n        this.gains.red  = Math.max(0, Math.min(255, Math.round(this.gains.red  + rErr * Kp)));\n        this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + bErr * Kp)));\n\n        this.sendIO();\n        this.log(`Iter ${iter}: Sat=${stats.sat.toFixed(1)}% (R${this.gains.red}/B${this.gains.blue})`);\n\n        await this.wait(2000);\n        iter++;\n      }\n\n      if (this.status === 'running') throw 'Saturation timeout';\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // STEP 3 \u2014 SMART-GRID EXPOSURE LOOP\n    // Grid: 20\u00d720  |  Target: lum = 230 \u00b1 5  |  600 ms  |  40 iter max\n    // Double-check confirmation at +200 ms before exiting\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async runLightnessLoop() {\n      this.log('Step 3: Start smart-grid exposure...');\n      let iter = 0;\n\n      while (iter < 40 && this.status === 'running') {\n        const stats = await this.analyzeFrame(false);\n        this.currentLum = stats.lum;\n\n        // Target reached? \u2014 double-check before declaring success\n        if (Math.abs(stats.lum - 230) <= 5) {\n          await this.wait(200);\n          const check = await this.analyzeFrame(false);\n          this.currentLum = check.lum;\n          if (Math.abs(check.lum - 230) <= 5) {\n            this.log(`Luminosity target met: ${check.lum.toFixed(1)}`);\n            return;\n          }\n        }\n\n        // LED correction\n        let nextLed;\n        if (stats.lum < 5) {\n          nextLed = Math.max(0.005, this.led * 4);           // Aggressive rescue\n        } else if (stats.lum > 252) {\n          nextLed = this.led * 0.5;                          // Hard clamp down\n        } else {\n          const ratio = 230 / (stats.lum || 1);\n          nextLed = (this.led * ratio * 0.9) + (this.led * 0.1); // 90% corrective + 10% current\n        }\n\n        this.led = Math.max(0, Math.min(1, nextLed));\n        this.sendIO();\n        this.log(`Iter ${iter}: Lum=${stats.lum.toFixed(1)} \u2192 LED=${(this.led * 100).toFixed(2)}%`);\n\n        await this.wait(600);\n        iter++;\n      }\n\n      if (this.status === 'running') throw 'Brightness timeout';\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // ANALYSIS ENGINE\n    // Captures video frame from iframe onto hidden canvas,\n    // then reads pixel data for saturation or smart-grid lum.\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async analyzeFrame(isSaturationStep) {\n      const iframe = this.$refs.videoIframe;\n      if (!iframe?.contentDocument) return { sat: 99, lum: 0, r: 0, g: 0, b: 0 };\n\n      const video = iframe.contentDocument.querySelector('video');\n      if (!video || video.videoWidth === 0) return { sat: 99, lum: 0, r: 0, g: 0, b: 0 };\n\n      const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n      ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n      // \u2500\u2500 Saturation analysis: 100\u00d7100 centre patch \u2500\u2500\n      if (isSaturationStep) {\n        const size = 100;\n        const cx   = (this.analysisW - size) / 2;\n        const cy   = (this.analysisH - size) / 2;\n        const data = ctx.getImageData(cx, cy, size, size).data;\n\n        let r = 0, g = 0, b = 0, c = 0;\n        for (let i = 0; i < data.length; i += 4) {\n          r += data[i]; g += data[i + 1]; b += data[i + 2]; c++;\n        }\n        const avgR = r / c, avgG = g / c, avgB = b / c;\n        const max  = Math.max(avgR, avgG, avgB);\n        const min  = Math.min(avgR, avgG, avgB);\n        const sat  = max === 0 ? 0 : ((max - min) / max) * 100;\n\n        return { sat: parseFloat(sat.toFixed(1)), r: avgR, g: avgG, b: avgB };\n      }\n\n      // \u2500\u2500 Luminosity analysis: 20\u00d720 smart grid \u2500\u2500\n      const cellW = this.analysisW / this.gridN;\n      const cellH = this.analysisH / this.gridN;\n      const offX  = (cellW - this.sampleSize) / 2;\n      const offY  = (cellH - this.sampleSize) / 2;\n\n      let validLumSum = 0;\n      let validCount  = 0;\n\n      for (let i = 0; i < this.gridN; i++) {\n        for (let j = 0; j < this.gridN; j++) {\n          const idx  = i * this.gridN + j;\n          const x    = (j * cellW) + offX;\n          const y    = (i * cellH) + offY;\n          const data = ctx.getImageData(x, y, this.sampleSize, this.sampleSize).data;\n\n          let sum = 0, minP = 255;\n          for (let k = 0; k < data.length; k += 4) {\n            const l = (data[k] + data[k + 1] + data[k + 2]) / 3;\n            if (l < minP) minP = l;\n            sum += l;\n          }\n          const avg     = sum / (data.length / 4);\n          // Valid zone: uniform (avg - min \u2264 8) AND non-black (avg > 2)\n          const isValid = (avg - minP) <= this.sensitivityThreshold && avg > 2;\n\n          this.gridZones[idx].active = isValid;\n          this.gridZones[idx].lum    = avg;\n\n          if (isValid) {\n            validLumSum += avg;\n            validCount++;\n          }\n        }\n      }\n\n      return { lum: validCount > 0 ? validLumSum / validCount : 0 };\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // I/O \u2014 Hardware commands (UI \u2192 Node-RED)\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    /** Send LED level + WB gains to hardware */\n    sendIO() {\n      if (!this.send) return;\n\n      // Light command\n      this.send({\n        topic: 'light',\n        payload: { action: 'on', value: Number(this.led.toFixed(12)) }\n      });\n\n      // Camera white-balance gains\n      this.send({\n        topic: 'imager/image',\n        payload: { action: 'settings', settings: { white_balance_gain: this.gains } }\n      });\n    },\n\n    /** Send a status-only message back to Node-RED */\n    sendStatus(status) {\n      if (!this.send) return;\n      this.send({\n        topic: 'calibration',\n        payload: { status, step: this.step, timestamp: new Date().toISOString() }\n      });\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // IFRAME STYLE INJECTION\n    // Cleans up Node-RED preview chrome so only the raw\n    // video fill is visible inside the rotated iframe.\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    onIframeLoad() {\n      try {\n        const doc = this.$refs.videoIframe.contentDocument;\n        const s   = doc.createElement('style');\n        s.textContent = `\n          html { border: none; background: white; }\n          body { margin:0; width:100%; height:100%; overflow:hidden; background:black; }\n          img, video { width:100%; height:100%; object-fit:fill; display:block; }\n          #root { background: rgb(230,229,231); border: none; }\n          .zoomist-slider, .zoomist-zoomer { display: none !important; }\n          button { display: none !important; }\n        `;\n        doc.head.appendChild(s);\n      } catch (e) {\n        console.error('Iframe style injection failed:', e);\n      }\n    },\n\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // UTILS\n    // \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n\n    log(txt) {\n      const time = new Date().toLocaleTimeString().split(' ')[0];\n      this.logs.unshift({ time, txt });\n      if (this.logs.length > 20) this.logs.pop();\n    }\n  }\n};\n</script>\n\n<style scoped>\n  /* \u2500\u2500 Layout \u2500\u2500 */\n  .iframe-wrapper {\n    width: 100%;\n    margin: 0 auto;\n    font-family: 'Roboto', sans-serif;\n  }\n\n  .calibration-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n    background-color: rgb(230 229 231);\n    border-radius: 4px;\n  }\n\n  /* \u2500\u2500 Video feed (rotated 90\u00b0 to compensate physical camera orientation) \u2500\u2500 */\n  .responsive-iframe {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 133.33%;\n    height: 75%;\n    border: none;\n    pointer-events: none;\n    transform: translate(-50%, -50%) rotate(-90deg);\n    z-index: 1;\n  }\n\n  /* \u2500\u2500 Saturation focus box \u2500\u2500 */\n  .focus-overlay {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100px;\n    height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);\n    z-index: 5;\n    pointer-events: none;\n  }\n\n  .crosshair {\n    width: 10px;\n    height: 10px;\n    background: orange;\n    border-radius: 50%;\n  }\n\n  .focus-label {\n    position: absolute;\n    top: -25px;\n    width: 200px;\n    text-align: center;\n    color: orange;\n    font-size: 10px;\n    font-weight: bold;\n    letter-spacing: 1px;\n  }\n\n  /* \u2500\u2500 Smart grid \u2500\u2500 */\n  .smart-grid {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 5;\n    pointer-events: none;\n  }\n\n  .grid-cell {\n    border: 0.5px solid rgba(62, 135, 216, 0.1);\n  }\n\n  .cell-active {\n    background-color: rgba(62, 135, 216, 0.15);\n    border: 1px solid #3e87d8;\n  }\n\n  .cell-rejected {\n    background-color: rgba(255, 0, 0, 0.15);\n  }\n\n  /* \u2500\u2500 Info cards \u2500\u2500 */\n  .overlay-center {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10;\n    pointer-events: none;\n  }\n\n  .info-card {\n    background: #fff;\n    border-radius: 4px;\n    padding: 16px 24px;\n    min-width: 260px;\n    text-align: center;\n    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);\n    pointer-events: auto;\n  }\n\n  .info-title {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #3e87d8;\n    margin-bottom: 8px;\n    letter-spacing: 0.089em;\n    text-transform: uppercase;\n  }\n\n  .info-title.success {\n    color: #4CAF50;\n  }\n\n  .info-title.error {\n    color: #FF5252;\n  }\n\n  .info-value {\n    font-size: 2.125rem;\n    font-weight: 400;\n    color: rgba(0, 0, 0, 0.87);\n    margin-bottom: 4px;\n  }\n\n  .value-ok {\n    color: #4CAF50;\n  }\n\n  .value-wait {\n    color: #FB8C00;\n  }\n\n  .info-label {\n    font-size: 0.75rem;\n    color: rgba(0, 0, 0, 0.6);\n    margin-bottom: 16px;\n  }\n\n  .info-row {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.8125rem;\n    color: rgba(0, 0, 0, 0.7);\n    margin: 4px 0;\n  }\n\n  .info-target {\n    font-size: 0.75rem;\n    color: #3e87d8;\n    margin-top: 16px;\n    padding-top: 8px;\n    border-top: 1px solid rgba(0, 0, 0, 0.12);\n    font-weight: 500;\n  }\n\n  .progress-bar {\n    width: 100%;\n    height: 4px;\n    background: rgba(0, 0, 0, 0.05);\n    border-radius: 4px;\n    overflow: hidden;\n    margin: 12px 0;\n  }\n\n  .progress-fill {\n    height: 100%;\n    background: #3e87d8;\n    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 750,
-    "y": 340,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "79bccc0355eb5d87",
-    "type": "ui-template",
-    "z": "71ede8b7dd88d90e",
-    "group": "d2f77573ed4317e4",
-    "page": "",
-    "ui": "",
-    "name": "body",
-    "order": 1,
-    "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\n        <v-alert v-if=\"sample_project || sample_id\" type=\"info\" variant=\"tonal\" density=\"compact\" class=\"mb-4\">\n          <div class=\"d-flex flex-wrap ga-4 text-body-2\">\n            <span v-if=\"sample_project\"><strong>Project:</strong> {{ sample_project }}</span>\n            <span v-if=\"sample_id\"><strong>Sample:</strong> {{ sample_id }}</span>\n            <span v-if=\"sample_operator\"><strong>Operator:</strong> {{ sample_operator }}</span>\n            <span v-if=\"sample_gear\"><strong>Gear:</strong> {{ sample_gear }}</span>\n          </div>\n        </v-alert>\n\n        <v-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pr-sm-2\">\n            <v-text-field v-model=\"acq_id\" label=\"Acquisition ID\" variant=\"outlined\"\n              placeholder=\"ex : 001\" @input=\"sendUpdate()\" prefix=\"A_\" density=\"compact\"\n              :disabled=\"acq_status === 'on'\">\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\n          <v-col cols=\"12\" sm=\"6\" class=\"align-center pa-0 pl-sm-2\">\n            <v-text-field v-model.number=\"acq_nb_frame\" type=\"number\" :min=\"1\" variant=\"outlined\"\n              label=\"Number of Images\" suffix=\"img\" density=\"compact\"\n              @update:model-value=\"autoCalculateVolumes(true)\"\n              :disabled=\"acq_status === 'on'\">\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 class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-btn-toggle v-model=\"tempMag\" mandatory divided variant=\"outlined\" color=\"primary\"\n              class=\"w-100 font-weight-bold d-flex flex-wrap\" style=\"height: 80px !important\"\n              @update:model-value=\"confirmMagChange\" :disabled=\"acq_status === 'on'\">\n              <v-btn value=\"high\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-small</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">High Mag (100\u00b5m)</span>\n              </v-btn>\n              <v-btn value=\"medium\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle-medium</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Medium Mag (300\u00b5m)</span>\n              </v-btn>\n              <v-btn value=\"low\" class=\"flex-grow-1\">\n                <v-icon class=\"mr-sm-2\" size=\"24\">mdi-circle</v-icon>\n                <span class=\"d-none d-sm-inline text-subtitle-1\">Low Mag (500\u00b5m)</span>\n              </v-btn>\n            </v-btn-toggle>\n          </v-col>\n        </v-row>\n\n        <v-expansion-panels variant=\"accordion\" class=\"border rounded pa-0 mt-4\">\n          <v-expansion-panel elevation=\"0\">\n            <v-expansion-panel-title class=\"pa-4 bg-primary text-subtitle-1 font-weight-bold\">\n              Advanced Parameters\n            </v-expansion-panel-title>\n            <v-expansion-panel-text class=\"pa-0 bg-grey-lighten-5\">\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowcell Thickness :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_flowcell_thickness\" suffix=\"\u00b5m\" variant=\"flat\" readonly\n                    bg-color=\"bg-grey-lighten-5\" hide-details>\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowcell Thickness', 'Thickness of the flowcell used in this configuration (\u00b5m).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Flowrate between images :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model=\"acq_interframe_flowrate\" :min=\"1\" :step=\"1\" suffix=\"mL/min\" variant=\"outlined\"\n                    type=\"number\" bg-color=\"white\" hide-details\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Flowrate between images','Speed of the flow displaced between consecutive images (\u00b5L).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Stabilization Delay :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field v-model.number=\"acq_stabilization_delay\" :min=\"0\" :step=\"0.1\" suffix=\"s\"\n                    variant=\"outlined\" type=\"number\" bg-color=\"white\" hide-details @input=\"sendUpdate()\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Stabilization Delay','Time to wait for flow stabilization before taking an image.')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex flex-column justify-center\">\n                  <div class=\"d-flex align-center mb-1\">\n                    <span class=\"text-subtitle-1 text-medium-emphasis\">Volume between images :</span>\n                  </div>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"Number((acq_interframe_volume * 1000).toFixed(2))\"\n                    @update:model-value=\"v => { acq_interframe_volume = v / 1000; autoCalculateVolumes(true); }\"\n                    type=\"number\" :min=\"0.1\" :step=\"0.1\" variant=\"outlined\" hide-details suffix=\"\u00b5L\" bg-color=\"white\"\n                    :disabled=\"acq_status === 'on'\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\"\n                        @click=\"openHint('Volume between images','Sample volume displaced between consecutive images (\u00b5L).')\">\n                        mdi-information\n                      </v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Volume Imaged :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_imaged_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeImagedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n              <v-divider class=\"border-opacity-25 my-2\"></v-divider>\n\n              <v-row class=\"align-center my-1\">\n                <v-col cols=\"12\" sm=\"8\" class=\"d-flex align-center\">\n                  <span class=\"text-subtitle-1 text-medium-emphasis\">Total Volume Displaced :</span>\n                </v-col>\n                <v-col cols=\"12\" sm=\"4\">\n                  <v-text-field :model-value=\"fmt(acq_pumped_volume)\" suffix=\"mL\" variant=\"flat\" hide-details readonly\n                    bg-color=\"white\">\n                    <template #append>\n                      <v-icon class=\"cursor-pointer\" @click=\"showVolumeDisplacedHint()\">mdi-information</v-icon>\n                    </template>\n                  </v-text-field>\n                </v-col>\n              </v-row>\n\n            </v-expansion-panel-text>\n          </v-expansion-panel>\n        </v-expansion-panels>\n\n        <v-row class=\"align-center pa-0 mt-4\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-textarea v-model=\"acq_comment\" label=\"Acquisition comment\" variant=\"outlined\" rows=\"3\" auto-grow\n              hide-details placeholder=\"Optional notes...\" bg-color=\"white\" @input=\"sendUpdate()\"\n              :disabled=\"acq_status === 'on'\">\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 class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\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              style=\"height: 60px !important\">\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-row class=\"align-center pa-0\">\n          <v-col cols=\"12\" class=\"pa-0\">\n            <v-alert v-if=\"acq_status_message\" :type=\"statusType\" :color=\"statusColor\" border=\"start\" variant=\"tonal\"\n              class=\"text-subtitle-1 mt-4\" prominent>\n              {{ formattedStatus }}\n            </v-alert>\n          </v-col>\n        </v-row>\n      </v-card-text>\n    </v-card>\n\n    <v-dialog v-model=\"hintDialog\" max-width=\"600\">\n      <v-card class=\"pa-6 rounded-lg\">\n        <v-card-title class=\"text-h6 px-0\">{{ hintTitle }}</v-card-title>\n        <v-card-text v-html=\"hintText\" class=\"text-body-2 px-0 pt-2\"></v-card-text>\n        <v-card-actions class=\"px-0 pb-0\">\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"text\" @click=\"hintDialog = false\">Close</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n    <v-dialog v-model=\"magConfirmDialog\" max-width=\"500\" persistent>\n      <v-card class=\"pa-4\">\n        <v-card-title class=\"d-flex align-center text-h5 font-weight-bold\">\n          <v-icon color=\"primary\" size=\"large\" class=\"mr-3\">mdi-cog-sync</v-icon>\n          Hardware Setup\n        </v-card-title>\n        <v-card-text class=\"pa-4\">\n          <p class=\"text-body-1 mb-6\">\n            Switching to <v-chip color=\"primary\" size=\"small\" label class=\"font-weight-bold\">{{ tempMag?.toUpperCase() }}</v-chip>.\n          </p>\n          <div class=\"bg-grey-lighten-4 rounded-lg pa-4 mb-4\">\n            <p class=\"text-subtitle-2 mb-3 font-weight-bold text-primary\">System configuration:</p>\n            <ul class=\"ml-6 text-body-2\">\n              <li class=\"mb-1\"><strong>Lens:</strong> {{ getPreviewSettings(tempMag).tube }} / {{ getPreviewSettings(tempMag).obj }}</li>\n              <li class=\"mb-1\"><strong>Pixel:</strong> {{ getPreviewSettings(tempMag).pixel }} \u00b5m</li>\n              <li class=\"mb-1\"><strong>Flowcell:</strong> {{ getPreviewSettings(tempMag).thickness }} \u00b5m</li>\n              <li class=\"mb-1\"><strong>Flowrate:</strong> {{ getPreviewSettings(tempMag).flowrate }} mL/min</li>\n            </ul>\n          </div>\n          <p class=\"text-caption text-medium-emphasis\">Parameters will be updated automatically.</p>\n        </v-card-text>\n        <v-card-actions>\n          <v-btn variant=\"text\" @click=\"cancelMagChange\">Cancel</v-btn>\n          <v-spacer></v-spacer>\n          <v-btn color=\"primary\" variant=\"flat\" @click=\"applyMagChange\">Confirm & Update</v-btn>\n        </v-card-actions>\n      </v-card>\n    </v-dialog>\n\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      acq_id: \"\",\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: \"\",\n      acq_nb_frame: 10,\n      acq_interframe_volume: 0.010,\n      acq_imaged_volume: \"\",\n      acq_pumped_volume: \"\",\n      acq_comment: \"\",\n      acq_status: \"off\",\n      acq_status_message: \"\",\n\n      currentMag: \"medium\",\n      tempMag: \"medium\",\n      magConfirmDialog: false,\n\n      calibration_sensor_width: 4056,\n      calibration_sensor_height: 3040,\n      calibration_pixel_size: 0.75,\n      acq_flowcell_thickness: 300,\n      acq_tube_lens_reference: \"25mm_F1.8\",\n      acq_objective_lens_reference: \"12mm_F1.8\",\n      acq_interframe_flowrate: 2,\n      acq_stabilization_delay: 0.5,\n\n      frame_volume_um3: 0,\n      topic: \"acq_params\",\n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\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        // Hydrate acq_id from payload, stripping the \"A_\" prefix for the UI model\n        if (p.acq_id !== undefined) {\n          this.acq_id = String(p.acq_id).replace(/^A[_-]?/, \"\");\n        }\n        if (p.sample_project !== undefined) this.sample_project = p.sample_project;\n        if (p.sample_id !== undefined) this.sample_id = p.sample_id;\n        if (p.sample_operator !== undefined) this.sample_operator = p.sample_operator;\n        if (p.sample_gear !== undefined) this.sample_gear = p.sample_gear;\n        \n        if (\"acq_comment\" in p) this.acq_comment = p.acq_comment ?? \"\";\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\n        if (p.acq_flowcell_thickness !== undefined) this.acq_flowcell_thickness = Number(p.acq_flowcell_thickness);\n        if (p.acq_tube_lens_reference !== undefined) this.acq_tube_lens_reference = p.acq_tube_lens_reference;\n        if (p.acq_objective_lens_reference !== undefined) this.acq_objective_lens_reference = p.acq_objective_lens_reference;\n        if (p.acq_interframe_flowrate !== undefined) this.acq_interframe_flowrate = Number(p.acq_interframe_flowrate);\n        if (p.acq_stabilization_delay !== undefined) this.acq_stabilization_delay = Number(p.acq_stabilization_delay);\n\n        if (p.acq_magnification) {\n          this.currentMag = p.acq_magnification;\n          this.tempMag = p.acq_magnification;\n        } else if (p.process_pixel_size || p.calibration_pixel_size) {\n          const size = Number(p.process_pixel_size || p.calibration_pixel_size);\n          if (Math.abs(size - 0.53) < 0.1) { this.currentMag = \"high\"; this.tempMag = \"high\"; }\n          else if (Math.abs(size - 1.34) < 0.1) { this.currentMag = \"low\"; this.tempMag = \"low\"; }\n          else { this.currentMag = \"medium\"; this.tempMag = \"medium\"; }\n        }\n\n        if (p.calibration_pixel_size !== undefined) this.calibration_pixel_size = Number(p.calibration_pixel_size);\n        if (p.process_pixel_size !== undefined) this.calibration_pixel_size = Number(p.process_pixel_size);\n\n        // --- NEW LOGIC: Safely parse acq_status to guarantee strict \"on\" or \"off\" ---\n        if (p.acq_status !== undefined) {\n          const statusStr = String(p.acq_status).toLowerCase();\n          if (statusStr === 'on' || statusStr === 'true' || statusStr === '1') {\n            this.acq_status = 'on';\n          } else {\n            this.acq_status = 'off';\n          }\n        }\n\n        // Handle the status message and infer toggle state ONLY if acq_status wasn't explicitly provided\n        if (p.status !== undefined) {\n          this.acq_status_message = p.status;\n          \n          if (p.acq_status === undefined) {\n            const s = String(p.status).toLowerCase();\n            if (s.includes(\"capturing\") || s.includes(\"running\") || s.includes(\"started\")) this.acq_status = \"on\";\n            if (s.includes(\"done\") || s.includes(\"idle\") || s.includes(\"stopped\") || s.includes(\"error\")) this.acq_status = \"off\";\n          }\n        }\n\n        if (topic === \"status/imager\" && (p.status === \"Done\" || p.status?.includes(\"error\"))) {\n          this.incrementAcqId();\n          this.sendUpdate();\n        }\n\n        this.autoCalculateVolumes(false);\n      },\n      deep: true,\n    },\n  },\n\n  mounted() {\n    this.autoCalculateVolumes(false);\n  },\n\n  methods: {\n    fmt(v) { return Number(v || 0).toFixed(3); },\n\n    confirmMagChange() {\n      this.magConfirmDialog = true;\n    },\n\n    cancelMagChange() {\n      this.magConfirmDialog = false;\n      this.tempMag = this.currentMag;\n    },\n\n    getPreviewSettings(mag) {\n      const settings = {\n        high:   { tube: \"35mm_F2.4\", obj: \"12mm_F2\",     pixel: 0.53, thickness: 100, flowrate: 1 },\n        medium: { tube: \"25mm_F1.8\", obj: \"12mm_F1.8\",   pixel: 0.75, thickness: 300, flowrate: 2 },\n        low:    { tube: \"25mm_F2.0\", obj: \"21.8mm_F2.8\", pixel: 1.34, thickness: 500, flowrate: 3 }\n      };\n      return settings[mag] || settings.medium;\n    },\n\n    applyMagChange() {\n      this.currentMag = this.tempMag;\n\n      const settings = {\n        high:   { tube_lens: \"35mm_F2.4\", obj_lens: \"12mm_F2\",     pixel_size: 0.53, thickness: 100, inter_vol_ul: 3,  flowrate: 1, stabilization: 1.5 },\n        medium: { tube_lens: \"25mm_F1.8\", obj_lens: \"12mm_F1.8\",   pixel_size: 0.75, thickness: 300, inter_vol_ul: 6,  flowrate: 3, stabilization: 0.5 },\n        low:    { tube_lens: \"25mm_F2.0\", obj_lens: \"21.8mm_F2.8\", pixel_size: 1.34, thickness: 500, inter_vol_ul: 15, flowrate: 3, stabilization: 0.5 }\n      };\n\n      const config = settings[this.currentMag];\n      if (config) {\n        this.acq_tube_lens_reference      = config.tube_lens;\n        this.acq_objective_lens_reference = config.obj_lens;\n        this.calibration_pixel_size       = config.pixel_size;\n        this.acq_flowcell_thickness       = config.thickness;\n        this.acq_interframe_flowrate      = config.flowrate;\n        this.acq_interframe_volume        = config.inter_vol_ul / 1000;\n        this.acq_stabilization_delay      = config.stabilization;\n      }\n\n      this.magConfirmDialog = false;\n      this.autoCalculateVolumes(true);\n      this.sendUpdate({ magnification_change: this.currentMag });\n    },\n\n    incrementAcqId() {\n      const current = String(this.acq_id || \"0\");\n      const num = parseInt(current, 10);\n      const padLen = current.length > 0 ? current.length : 1;\n      this.acq_id = String((isNaN(num) ? 0 : num) + 1).padStart(padLen, \"0\");\n    },\n\n    autoCalculateVolumes(emit = true) {\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        const w_um = w_px * this.calibration_pixel_size;\n        const h_um = h_px * this.calibration_pixel_size;\n        this.frame_volume_um3  = w_um * h_um * this.acq_flowcell_thickness;\n        this.acq_imaged_volume = (this.frame_volume_um3 / 1e12) * (this.acq_nb_frame || 0);\n      } else {\n        this.frame_volume_um3  = 0;\n        this.acq_imaged_volume = 0;\n      }\n\n      this.acq_pumped_volume = (this.acq_interframe_volume || 0) * (this.acq_nb_frame || 0);\n\n      if (emit) this.sendUpdate();\n    },\n\n    handleAcqStatusChange(value) {\n      this.acq_status = value;\n\n      if (value === \"off\") {\n        this.incrementAcqId();\n        this.sendUpdate();\n        this.acq_status_message = \"Acquisition stopped. ID incremented.\";\n      } else {\n        this.sendUpdate({\n          acq_nb_frame: this.acq_nb_frame,\n          acq_interframe_volume: this.acq_interframe_volume,\n          acq_stabilization_delay: this.acq_stabilization_delay,\n          acq_interframe_flowrate: this.acq_interframe_flowrate\n        });\n      }\n    },\n    showVolumeImagedHint() {\n      const html = `<div class=\"text-body-2\">\n        <p class=\"mb-2\"><strong>Volume Imaged</strong> is the fluid volume captured by the optics.</p>\n        <v-divider class=\"my-3\"></v-divider>\n        <ul class=\"ml-4\">\n          <li><strong>Width:</strong> ${Math.round(this.sensor_width_um)} \u00b5m</li>\n          <li><strong>Height:</strong> ${Math.round(this.sensor_height_um)} \u00b5m</li>\n          <li><strong>Thickness:</strong> ${this.acq_flowcell_thickness} \u00b5m</li>\n          <li><strong>Pixel Size:</strong> ${this.calibration_pixel_size} \u00b5m</li>\n        </ul>\n        <p class=\"mt-4\">Total = ${this.acq_nb_frame} imgs \u00d7 ${this.fmt(this.frame_volume_ml)} mL = <strong>${this.fmt(this.acq_imaged_volume)} mL</strong></p>\n      </div>`;\n      this.openHint(\"Volume Imaged Calculation\", html);\n    },\n\n    showVolumeDisplacedHint() {\n      const html = `<p><b>Total Volume Displaced</b> corresponds to the volume displaced between images.</p>\n        <ul>\n          <li><b>Inter-frame Volume:</b> ${this.fmt(this.acq_interframe_volume)} mL</li>\n          <li><b>Number of Images:</b> ${this.acq_nb_frame}</li>\n        </ul>\n        <p><b>Calculation:</b> ${this.fmt(this.acq_interframe_volume)} mL \u00d7 ${this.acq_nb_frame} = <b>${this.fmt(this.acq_pumped_volume)} mL</b></p>`;\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      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(Number(this.acq_imaged_volume).toFixed(3)),\n          acq_pumped_volume:              Number(Number(this.acq_pumped_volume).toFixed(3)),\n          acq_comment:                    this.acq_comment,\n          acq_status:                     this.acq_status,\n          acq_magnification:              this.currentMag,\n          acq_tube_lens_reference:        this.acq_tube_lens_reference,\n          acq_objective_lens_reference:   this.acq_objective_lens_reference,\n          process_pixel_size:             this.calibration_pixel_size,\n          calibration_pixel_size:         this.calibration_pixel_size,\n          sensor_width_um:                this.sensor_width_um,\n          sensor_height_um:               this.sensor_height_um,\n          acq_flowcell_thickness:         this.acq_flowcell_thickness,\n          acq_interframe_flowrate:        this.acq_interframe_flowrate,\n          acq_stabilization_delay:        this.acq_stabilization_delay,\n          ...extra,\n        },\n      });\n    },\n  },\n};\n</script>\n\n<style scoped>\n  .cursor-pointer { cursor: pointer; }\n  .v-card-text { padding: 0 !important; }\n  .v-card { border: none; }\n  .v-container { background: #eef3ff; }\n  .v-expansion-panel-text { padding-left: 0 !important; padding-right: 0 !important; }\n  :deep(.v-field__prefix) { align-self: center; padding-top: 0 !important; margin-top: 0 !important; }\n  :deep(.v-field__field) { align-items: center; }\n  .nrdb-app .v-field--variant-outlined {\n    --v-field-input-padding-top: 12px;\n    --v-field-input-padding-bottom: 12px;\n  }\n  .border { border: 1px solid #cccccc !important; }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 310,
-    "y": 140,
-    "wires": [
-      [
-        "e44fd64f57f48140"
-      ]
-    ]
-  },
-  {
-    "id": "6001550c3befb6ea",
-    "type": "ui-template",
-    "z": "71ede8b7dd88d90e",
-    "group": "3ae252a2e5abca89",
-    "page": "",
-    "ui": "",
-    "name": "Navigation Top",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden border bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* \u00c9tat actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* S\u00e9parateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou color\u00e9 pour le rep\u00e8re visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF m\u00eame sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1300,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "74aa092817adc6f0",
-    "type": "function",
-    "z": "71ede8b7dd88d90e",
-    "name": "set acq_params",
-    "func": "// On r\u00e9cup\u00e8re le payload\nconst p = msg.payload;\n\n// On ne proc\u00e8de que si le payload est un objet\nif (p && typeof p === 'object') {\n\n    // Liste des param\u00e8tres \u00e0 surveiller et \u00e0 stocker\n    // On boucle sur les cl\u00e9s pour \u00e9viter de r\u00e9p\u00e9ter 20 fois \"if(p.x !== undefined)\"\n    const keys = [\n        \"acq_id\", \"acq_nb_frame\", \"acq_interframe_volume\", \n        \"acq_imaged_volume\", \"acq_pumped_volume\", \"acq_comment\",\n        \"acq_status\", \"acq_magnification\", \"acq_tube_lens_reference\",\n        \"acq_objective_lens_reference\", \"process_pixel_size\",\n        \"calibration_pixel_size\", \"calibration_led_intensity\",\n        \"sensor_width_um\", \"sensor_height_um\", \"acq_flowcell_thickness\",\n        \"acq_interframe_flowrate\", \"acq_stabilization_delay\",\n        \"acq_start_timestamp\"\n    ];\n\n    keys.forEach(key => {\n        if (p[key] !== undefined) {\n            global.set(key, p[key]);\n        }\n    });\n\n    // Cas particuliers (noms de propri\u00e9t\u00e9s diff\u00e9rents entre msg et global)\n    if (p.progression !== undefined) global.set(\"acq_progression\", p.progression);\n    if (p.duration_left !== undefined) global.set(\"acq_duration_left\", p.duration_left);\n}\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 760,
-    "y": 120,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "ab83c951efd3e647",
-    "type": "ui-event",
-    "z": "71ede8b7dd88d90e",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "5a65f683c152b736"
-      ]
-    ]
-  },
-  {
-    "id": "5a65f683c152b736",
-    "type": "switch",
-    "z": "71ede8b7dd88d90e",
-    "name": "msg.payload.page.path === \"/acquisition\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/acquisition",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 330,
-    "y": 40,
-    "wires": [
-      [
-        "31fab063b7078fe6"
-      ]
-    ]
-  },
-  {
-    "id": "31fab063b7078fe6",
-    "type": "function",
-    "z": "71ede8b7dd88d90e",
-    "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": [
-      [
-        "79bccc0355eb5d87"
-      ]
-    ]
-  },
-  {
-    "id": "740af1e4fccda6b3",
-    "type": "mqtt in",
-    "z": "71ede8b7dd88d90e",
-    "name": "",
-    "topic": "status/imager",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 90,
-    "y": 200,
-    "wires": [
-      [
-        "79bccc0355eb5d87"
-      ]
-    ]
-  },
-  {
-    "id": "ff1fcb16bcb6619e",
-    "type": "mqtt out",
-    "z": "71ede8b7dd88d90e",
-    "name": "MQTT",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 1110,
-    "y": 220,
-    "wires": []
-  },
-  {
-    "id": "4a02deeb69a27d00",
-    "type": "function",
-    "z": "71ede8b7dd88d90e",
-    "name": "update_config",
-    "func": "const keys = global.keys();\nlet config = {};\n\nkeys.forEach(key => {\n    if (!key.startsWith('$')) {\n        if (\n            key.startsWith('sample_') ||\n            key.startsWith('acq_') ||\n            key.startsWith('object_') ||\n            key.startsWith('process_') ||\n            key.startsWith('img_')\n        ) {\n            config[key] = global.get(key);\n        }\n    }\n});\n\n// Compose fully-qualified IDs for unique EcoTaxa naming\nconst project = config.sample_project || \"\";\nconst sampleRaw = String(config.sample_id || \"\");\nconst acqRaw = String(config.acq_id || \"\");\n\nif (project && !sampleRaw.startsWith(project + \"_\")) {\n    config.sample_id = project + \"_\" + sampleRaw;\n}\nconst finalSample = String(config.sample_id || \"\");\nif (finalSample && !acqRaw.startsWith(finalSample + \"_\")) {\n    config.acq_id = finalSample + \"_\" + acqRaw;\n}\n\n// Sanitize spaces in IDs to match filesystem paths\n// (the Python imager replaces spaces with underscores in directory names)\nconfig.sample_id = String(config.sample_id || \"\").replace(/ /g, \"_\");\nconfig.acq_id = String(config.acq_id || \"\").replace(/ /g, \"_\");\n\nmsg.topic = \"imager/image\";\n\nmsg.payload = {\n    action: \"update_config\",\n    config: config\n};\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 760,
-    "y": 220,
-    "wires": [
-      [
-        "ff1fcb16bcb6619e"
-      ]
-    ]
-  },
-  {
-    "id": "908239a5c01e9061",
-    "type": "function",
-    "z": "71ede8b7dd88d90e",
-    "name": "start acquisition",
-    "func": "const acq_interframe_volume = msg.payload.acq_interframe_volume\n  || global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = msg.payload.acq_nb_frame\n  || global.get(\"acq_nb_frame\") || 0;\nconst acq_stabilization_delay = msg.payload.acq_stabilization_delay\n  || global.get(\"acq_stabilization_delay\") || 0;\nconst acq_interframe_flowrate = msg.payload.acq_interframe_flowrate\n  || global.get(\"acq_interframe_flowrate\") || 0;\n\nmsg.payload = {\n    action: \"image\",\n    pump_direction: \"FORWARD\",\n    volume: acq_interframe_volume,\n    nb_frame: acq_nb_frame,\n    sleep: acq_stabilization_delay,\n    flowrate: acq_interframe_flowrate,\n};\n\nmsg.topic = \"imager/image\";\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 760,
-    "y": 280,
-    "wires": [
-      [
-        "51e3db016f2cdf07"
-      ]
-    ]
-  },
-  {
-    "id": "5eb0686bb01d4643",
-    "type": "mqtt out",
-    "z": "71ede8b7dd88d90e",
-    "name": "MQTT",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 1110,
-    "y": 280,
-    "wires": []
-  },
-  {
-    "id": "98dde1119867adf0",
-    "type": "switch",
-    "z": "71ede8b7dd88d90e",
-    "name": "",
-    "property": "payload.acq_status",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "off",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "on",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 550,
-    "y": 220,
-    "wires": [
-      [
-        "7c4e3258ef8f22c0"
-      ],
-      [
-        "4a02deeb69a27d00",
-        "908239a5c01e9061"
-      ]
-    ]
-  },
-  {
-    "id": "7c4e3258ef8f22c0",
-    "type": "function",
-    "z": "71ede8b7dd88d90e",
-    "name": "stop acquisition",
-    "func": "// Stop the imager acquisition\nvar stopImager = { topic: \"imager/image\", payload: { action: \"stop\" } };\n\n// Also send pump stop command as failsafe\nvar stopPump = { topic: \"actuator/pump\", payload: { action: \"stop\" } };\n\n// Return both messages to be sent\nreturn [[stopImager, stopPump]];\n",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 760,
-    "y": 160,
-    "wires": [
-      [
-        "687e8f43fbf72b84"
-      ]
-    ]
-  },
-  {
-    "id": "687e8f43fbf72b84",
-    "type": "mqtt out",
-    "z": "71ede8b7dd88d90e",
-    "name": "MQTT",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 1110,
-    "y": 160,
-    "wires": []
-  },
-  {
-    "id": "7814ecbf379005bd",
-    "type": "switch",
-    "z": "71ede8b7dd88d90e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "neq",
-        "v": "$pageview",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 310,
-    "y": 220,
-    "wires": [
-      [
-        "98dde1119867adf0",
-        "74aa092817adc6f0"
-      ]
-    ]
-  },
-  {
-    "id": "51e3db016f2cdf07",
-    "type": "delay",
-    "z": "71ede8b7dd88d90e",
-    "name": "",
-    "pauseType": "delay",
-    "timeout": "200",
-    "timeoutUnits": "milliseconds",
-    "rate": "1",
-    "nbRateUnits": "1",
-    "rateUnits": "second",
-    "randomFirst": "1",
-    "randomLast": "5",
-    "randomUnits": "seconds",
-    "drop": false,
-    "allowrate": false,
-    "outputs": 1,
-    "x": 950,
-    "y": 280,
-    "wires": [
-      [
-        "5eb0686bb01d4643"
-      ]
-    ]
-  },
-  {
-    "id": "e44fd64f57f48140",
-    "type": "switch",
-    "z": "71ede8b7dd88d90e",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "neq",
-        "v": "$pageleave",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 310,
-    "y": 180,
-    "wires": [
-      [
-        "7814ecbf379005bd"
-      ]
-    ]
-  },
-  {
-    "id": "3841297f254854cf",
-    "type": "ui-event",
-    "z": "524b7620431210e8",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "66f970bece31600d"
-      ]
-    ]
-  },
-  {
-    "id": "66f970bece31600d",
-    "type": "switch",
-    "z": "524b7620431210e8",
-    "name": "msg.payload.page.path === \"/segmentation\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/segmentation",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 330,
-    "y": 40,
-    "wires": [
-      [
-        "773960d6099cab47",
-        "aa1309fda7fde8f2"
-      ]
-    ]
-  },
-  {
-    "id": "773960d6099cab47",
-    "type": "list acquisitions",
-    "z": "524b7620431210e8",
-    "name": "",
-    "x": 100,
-    "y": 140,
-    "wires": [
-      [
-        "8a22543633712279"
-      ]
-    ]
-  },
-  {
-    "id": "3ad2613862513bb0",
-    "type": "ui-template",
-    "z": "524b7620431210e8",
-    "group": "9b992ca6515ed058",
-    "page": "",
-    "ui": "",
-    "name": "Navigation Top",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* \u00c9tat actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* S\u00e9parateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou color\u00e9 pour le rep\u00e8re visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF m\u00eame sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1520,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "f9e776957dfa61b0",
-    "type": "mqtt out",
-    "z": "524b7620431210e8",
-    "name": "MQTT",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "respTopic": "",
-    "contentType": "",
-    "userProps": "",
-    "correl": "",
-    "expiry": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 1210,
-    "y": 140,
-    "wires": []
-  },
-  {
-    "id": "60ae065050fc2ad3",
-    "type": "switch",
-    "z": "524b7620431210e8",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "segmenter/segment",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 1030,
-    "y": 140,
-    "wires": [
-      [
-        "f9e776957dfa61b0",
-        "3314fac880c6a656"
-      ]
-    ]
-  },
-  {
-    "id": "9a2e04f65e0432e1",
-    "type": "mqtt in",
-    "z": "524b7620431210e8",
-    "name": "",
-    "topic": "status/segmenter",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 100,
-    "y": 260,
-    "wires": [
-      [
-        "e2db15bb9c3c254f"
-      ]
-    ]
-  },
-  {
-    "id": "e2db15bb9c3c254f",
-    "type": "ui-template",
-    "z": "524b7620431210e8",
-    "group": "402b3d24c87ab0d2",
-    "page": "",
-    "ui": "",
-    "name": "Details of Segmentation",
-    "order": 1,
-    "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=\"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 pa-4\">\n    Awaiting segmentation status\u2026\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,
-    "templateScope": "local",
-    "className": "",
-    "x": 370,
-    "y": 300,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "312de75fd2144c81",
-    "type": "switch",
-    "z": "524b7620431210e8",
-    "name": "",
-    "property": "payload.is_segmented",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "true"
-      },
-      {
-        "t": "false"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 510,
-    "y": 140,
-    "wires": [
-      [],
-      [
-        "6e43a35e8dcf2b3b"
-      ]
-    ]
-  },
-  {
-    "id": "3314fac880c6a656",
-    "type": "function",
-    "z": "524b7620431210e8",
-    "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    global.set(\"process_min_ESD\", msg.payload.settings.process_min_ESD);\n}\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 1220,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "aa1309fda7fde8f2",
-    "type": "function",
-    "z": "524b7620431210e8",
-    "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": 200,
-    "wires": [
-      [
-        "e2db15bb9c3c254f"
-      ]
-    ]
-  },
-  {
-    "id": "6e43a35e8dcf2b3b",
-    "type": "function",
-    "z": "524b7620431210e8",
-    "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;\nmsg.payload.open_dialog = true;\n\n// Return the modified message\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 700,
-    "y": 140,
-    "wires": [
-      [
-        "60bfa71a5e7fc2d5"
-      ]
-    ]
-  },
-  {
-    "id": "60bfa71a5e7fc2d5",
-    "type": "ui-template",
-    "z": "524b7620431210e8",
-    "group": "bfd4acb7b243514f",
-    "page": "",
-    "ui": "",
-    "name": "Dialog",
-    "order": 2,
-    "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=\"Minimal area-equivalent diameter (\u00b5m)\"\n          type=\"number\"\n          min=\"1\"\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 \u03bcm) 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>\n  export default {\n  props: {\n    msg: { type: Object, default: () => ({}) },\n  },\n  data() {\n    return {\n      payload: {},\n      showDialog: false, \n      process_min_ESD: 20, // Valeur initiale correcte\n      isReady: false, \n    };\n  },\n\n  mounted() {\n    setTimeout(() => {\n      this.isReady = true;\n    }, 1000);\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      handler(newMsg) {\n        if (!this.isReady) return;\n        if (!newMsg || !newMsg.payload) return;\n\n        const p = newMsg.payload;\n        \n        const shouldOpen = p.open_dialog === true && p.is_segmented === false;\n\n        if (shouldOpen) {\n          this.payload = p;\n          // MODIFICATION ICI : Remplacez 0 par 20 \u00e0 la fin de la ligne\n          this.process_min_ESD = (typeof p.process_min_ESD === 'number') ? p.process_min_ESD : 20;\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": "local",
-    "className": "",
-    "x": 870,
-    "y": 140,
-    "wires": [
-      [
-        "60ae065050fc2ad3"
-      ]
-    ]
-  },
-  {
-    "id": "8a22543633712279",
-    "type": "ui-template",
-    "z": "524b7620431210e8",
-    "group": "bfd4acb7b243514f",
-    "page": "",
-    "ui": "",
-    "name": "List of Acquisitions",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-data-table fluid :headers=\"headers\" :items=\"filteredItems\" :search=\"search\" :loading=\"loading\"\n    item-value=\"acquisition_id\" density=\"comfortable\" hover :item-class=\"getRowClass\"\n    v-model:items-per-page=\"itemsPerPage\">\n\n    <template v-slot:loading>\n      <v-skeleton-loader type=\"table-row@5\" />\n    </template>\n\n    <template v-slot:item.date=\"{ item }\">\n      <span class=\"text-body-2 font-weight-medium text-high-emphasis\">\n        {{ formatDate(item.date) }}\n      </span>\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 variant=\"text\" size=\"small\" color=\"grey-darken-1\" :href=\"item.gallery\" target=\"_blank\">\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 align-center\">\n        <v-btn v-if=\"!item.is_segmented\" variant=\"text\" size=\"small\" color=\"primary\" @click=\"segment(item)\">\n          <v-icon start>mdi-vector-polyline</v-icon>\n          Segment\n        </v-btn>\n        <v-btn v-else variant=\"text\" size=\"small\" disabled color=\"grey-darken-1\">\n          <v-icon start>mdi-check</v-icon>\n          Done\n        </v-btn>\n\n        <v-tooltip location=\"top\" text=\"Delete Acquisition\">\n          <template v-slot:activator=\"{ props }\">\n            <v-btn v-bind=\"props\" icon variant=\"text\" size=\"small\" color=\"error\" class=\"ml-1\" @click=\"confirmDelete(item)\">\n              <v-icon>mdi-delete-outline</v-icon>\n            </v-btn>\n          </template>\n        </v-tooltip>\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\n  <v-dialog v-model=\"deleteDialog\" max-width=\"400\" persistent>\n    <v-card>\n      <v-card-title class=\"text-h6\">Delete Acquisition?</v-card-title>\n      <v-card-text>\n        <p>This will permanently delete acquisition <strong>{{ deleteTarget?.acquisition_id }}</strong> from sample <strong>{{ deleteTarget?.sample_id }}</strong>.</p>\n        <p class=\"mt-2 text-error\">This action cannot be undone.</p>\n      </v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn variant=\"text\" @click=\"deleteDialog = false\">Cancel</v-btn>\n        <v-btn color=\"error\" variant=\"flat\" @click=\"executeDelete()\">Delete</v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n\n<script>\n  export default {\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      deleteDialog: false,\n      deleteTarget: null,\n      \n      itemsPerPage: 100,\n\n      headers: [\n        { title: \"Date\", sortable: false,key: \"date\" },\n        { title: \"Project\", sortable: false,key: \"project_name\" },\n        { title: \"Sample\", sortable: false,key: \"sample_id\" },\n        { title: \"Acq ID\", sortable: false,key: \"acquisition_id\" },\n        { title: \"Operator\", sortable: false,key: \"operator_name\" },\n        { title: \"Count\", sortable: false,key: \"image_acquired_count\", align: \"end\" },\n        { title: \"Gallery\", key: \"gallery\", sortable: false, align: \"end\" },\n        { title: \"Actions\", key: \"actions\", sortable: false, align: \"end\", width: \"180px\" }\n      ]\n    };\n  },\n\n  computed: {\n    filteredItems() {\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    formatDate(dateString) {\n      if (!dateString) return '';\n      const date = new Date(dateString);\n      if (isNaN(date.getTime())) return dateString;\n      \n      return date.toLocaleString('en-US', {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n        hour: '2-digit',\n        minute: '2-digit',\n      });\n    },\n\n    segment(item) {\n      this.selectedRow = item.acquisition_id;\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    confirmDelete(item) {\n      this.deleteTarget = item;\n      this.deleteDialog = true;\n    },\n\n    executeDelete() {\n      if (!this.deleteTarget) return;\n      this.deleteDialog = false;\n      const item = this.deleteTarget;\n      this.deleteTarget = null;\n      // Call original delete logic\n      this._doDelete(item);\n    },\n\n    _doDelete(item) {\n      const index = this.items.indexOf(item);\n      if (index > -1) {\n        this.items.splice(index, 1);\n      }\n\n      if (typeof this.send === 'function') {\n        this.send({\n          topic: \"delete_request\",\n          payload: { \n            acquisition_id: item.acquisition_id,\n            ...item \n          }\n        });\n      } else {\n         console.warn(\"The 'send' method is not defined.\");\n      }\n    },\n\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;\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": 310,
-    "y": 140,
-    "wires": [
-      [
-        "98b980828cac388b"
-      ]
-    ]
-  },
-  {
-    "id": "98b980828cac388b",
-    "type": "switch",
-    "z": "524b7620431210e8",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "segment_request",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "delete_request",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 430,
-    "y": 220,
-    "wires": [
-      [
-        "312de75fd2144c81"
-      ],
-      [
-        "20e38293b7b4fca8"
-      ]
-    ]
-  },
-  {
-    "id": "20e38293b7b4fca8",
-    "type": "exec",
-    "z": "524b7620431210e8",
-    "command": "rm -rf ",
-    "addpay": "payload.path",
-    "append": "",
-    "useSpawn": "false",
-    "timer": "",
-    "winHide": false,
-    "oldrc": false,
-    "name": "",
-    "x": 590,
-    "y": 240,
-    "wires": [
-      [],
-      [],
-      []
-    ]
-  },
-  {
-    "id": "b3a9d14bbb081aa8",
-    "type": "ui-event",
-    "z": "4fdbd7bacb797c5a",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "843d34f5d30962ab",
-        "69ce53c2079b63a0"
-      ]
-    ]
-  },
-  {
-    "id": "843d34f5d30962ab",
-    "type": "switch",
-    "z": "4fdbd7bacb797c5a",
-    "name": "msg.payload.page.path === \"/visualization\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/visualization",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 330,
-    "y": 40,
-    "wires": [
-      [
-        "2f62fc38be1bfe69"
-      ]
-    ]
-  },
-  {
-    "id": "0425c18c1a9ca1ca",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "group": "b570f76ef526af45",
-    "page": "",
-    "ui": "",
-    "name": "Navigation Top",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* \u00c9tat actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* S\u00e9parateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou color\u00e9 pour le rep\u00e8re visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF m\u00eame sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1300,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "2f62fc38be1bfe69",
-    "type": "list segmentations",
-    "z": "4fdbd7bacb797c5a",
-    "name": "",
-    "x": 170,
-    "y": 180,
-    "wires": [
-      [
-        "40a54312ad6d20c1"
-      ]
-    ]
-  },
-  {
-    "id": "40a54312ad6d20c1",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "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\u00e9ation 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,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 440,
-    "y": 180,
-    "wires": [
-      [
-        "205e01594aafdf52"
-      ]
-    ]
-  },
-  {
-    "id": "bb7e84695ec2b24c",
-    "type": "file in",
-    "z": "4fdbd7bacb797c5a",
-    "name": "",
-    "filename": "payload.path",
-    "filenameType": "msg",
-    "format": "utf8",
-    "chunk": false,
-    "sendError": false,
-    "encoding": "none",
-    "allProps": false,
-    "x": 180,
-    "y": 380,
-    "wires": [
-      [
-        "1e51a51e73c8f2a5",
-        "8f1bf6abf93d9587",
-        "a67c2c1c9523ec54",
-        "9f4a3d23a3c4ba43",
-        "836d93ca31e11fc8",
-        "03188ea81f8f748d",
-        "1db541fc5717964a",
-        "109aacc68888f0b1",
-        "27ebeb1895528a1d",
-        "2aa2c7cb2ba901a0",
-        "8fc92b69ced53cf2",
-        "88371b41526bbd18",
-        "93ac167a60a35472",
-        "72065cd82cb87df5"
-      ]
-    ]
-  },
-  {
-    "id": "51fa556f38fcfaa4",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "Get tsv path",
-    "func": "// 1. On s'assure que le path existe\nif (msg.payload.path) {\n\n    const currentPath = msg.payload.path;\n    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;\n    const acqId = cleanPath.split('/').pop();\n\n    // Try expected filename first\n    const expectedTsv = `${cleanPath}/ecotaxa_${acqId}.tsv`;\n\n    if (fs.existsSync(expectedTsv)) {\n        msg.payload.path = expectedTsv;\n    } else {\n        // Fallback: find any ecotaxa_*.tsv in the directory\n        try {\n            const files = fs.readdirSync(cleanPath);\n            const tsvFile = files.find(f => f.startsWith('ecotaxa_') && f.endsWith('.tsv'));\n            if (tsvFile) {\n                msg.payload.path = `${cleanPath}/${tsvFile}`;\n            } else {\n                node.warn('No ecotaxa TSV found in ' + cleanPath);\n                return null;\n            }\n        } catch(e) {\n            node.error('Cannot read directory: ' + e.message);\n            return null;\n        }\n    }\n}\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [
-      {
-        "var": "fs",
-        "module": "fs"
-      }
-    ],
-    "x": 930,
-    "y": 180,
-    "wires": [
-      [
-        "c4a624fe9c464cda"
-      ]
-    ]
-  },
-  {
-    "id": "9b4aa58f8a37a9d9",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "group": "0c1537ce71affc2b",
-    "page": "",
-    "ui": "",
-    "name": "Gallery",
-    "order": 1,
-    "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(displayPx(item.object_width) * zoom, 40)) + 'px',\n                            height: (Math.max(displayPx(item.object_height) * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (displayPx(item.object_width) * zoom) + 'px',\n                                height: (displayPx(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, process_pixel_applied: false },\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                { title: 'Sharpest', value: 'object_blur_laplacian' }\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, process_pixel_applied: !!m.payload.meta.process_pixel_applied };\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        // Convert object dimension to display pixels\n        // When process_pixel_applied, values are in microns - divide by resolution to get pixels\n        displayPx(val) {\n            if (this.meta.process_pixel_applied) {\n                return val / (this.meta.resolution || 1);\n            }\n            return val;\n        },\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const widthRaw = item.object_width || 100;\n            const realWidthMicrons = this.meta.process_pixel_applied ? widthRaw : widthRaw * res;\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} \u00b5m` };\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} \u00b5m` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\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\u00b2\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"\u00b0\";\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,
-    "templateScope": "local",
-    "className": "",
-    "x": 920,
-    "y": 1000,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "205e01594aafdf52",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "group": "fa6393a7d7e3b7d7",
-    "page": "",
-    "ui": "",
-    "name": "List of Segmentation",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n\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<style scoped>\n.live-pulse {\n  animation: pulse 2s infinite;\n}\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null,\n      selectedItem: null,\n      liveMode: false,\n      refreshInterval: 5,\n      refreshTimer: 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  beforeUnmount() {\n    this.stopLiveRefresh();\n  },\n\n  methods: {\n    manualRefresh() {\n      this.loading = true;\n      this.send({ topic: \"refresh_list\", payload: true });\n      setTimeout(() => { this.loading = false; }, 500);\n    },\n\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n      this.selectedItem = item;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    toggleLiveMode(enabled) {\n      if (enabled) {\n        this.startLiveRefresh();\n      } else {\n        this.stopLiveRefresh();\n      }\n    },\n\n    startLiveRefresh() {\n      this.stopLiveRefresh();\n      // Refresh gallery immediately if an acquisition is selected\n      if (this.selectedItem) {\n        this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n      }\n      // Periodically re-read the TSV to pick up new objects\n      this.refreshTimer = setInterval(() => {\n        if (this.selectedItem) {\n          this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n        }\n      }, this.refreshInterval * 1000);\n    },\n\n    stopLiveRefresh() {\n      if (this.refreshTimer) {\n        clearInterval(this.refreshTimer);\n        this.refreshTimer = null;\n      }\n    },\n\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
-    "storeOutMessages": true,
-    "passthru": false,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 740,
-    "y": 180,
-    "wires": [
-      [
-        "82532431827450f2"
-      ]
-    ]
-  },
-  {
-    "id": "82532431827450f2",
-    "type": "switch",
-    "z": "4fdbd7bacb797c5a",
-    "name": "Route Live Messages",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "refresh_list",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "selected_acquisition",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 960,
-    "y": 180,
-    "wires": [
-      [
-        "2f62fc38be1bfe69"
-      ],
-      [
-        "51fa556f38fcfaa4"
-      ]
-    ]
-  },
-  {
-    "id": "0c7765fa696e0717",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "group": "53490f9c39e2065d",
-    "page": "",
-    "ui": "",
-    "name": "Infos",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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: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.acq_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": 910,
-    "y": 480,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "1e51a51e73c8f2a5",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "HEATMAP (object_x, object_y)",
-    "func": "// Heatmap \u2013 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,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 510,
-    "y": 520,
-    "wires": [
-      [
-        "d49dc2cc9f8eeaab"
-      ]
-    ]
-  },
-  {
-    "id": "8f1bf6abf93d9587",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "ESD Histogram (object_equivalent_diameter)",
-    "func": "// ESD Size Spectrum \u2013 TSV \u2192 {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": 560,
-    "wires": [
-      [
-        "1631167b67b37d25"
-      ]
-    ]
-  },
-  {
-    "id": "a67c2c1c9523ec54",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "TIMELINE (sequence index + area)",
-    "func": "// Timeline \u2013 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": 600,
-    "wires": [
-      [
-        "9bb69f94e4855a16"
-      ]
-    ]
-  },
-  {
-    "id": "9f4a3d23a3c4ba43",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "COLORSPACE (Saturation vs Value)",
-    "func": "// Colorspace \u2013 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": 640,
-    "wires": [
-      [
-        "731608304eeaa5f3"
-      ]
-    ]
-  },
-  {
-    "id": "836d93ca31e11fc8",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "ASPECT (Width vs Height)",
-    "func": "// Aspect \u2013 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": 680,
-    "wires": [
-      [
-        "a6c62b4b3da492e9"
-      ]
-    ]
-  },
-  {
-    "id": "03188ea81f8f748d",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "GREENNESS (custom index + circularity)",
-    "func": "// Greenness vs Circularity \u2013 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": 720,
-    "wires": [
-      [
-        "fc22ad681d25523b"
-      ]
-    ]
-  },
-  {
-    "id": "1db541fc5717964a",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "COMPLEXITY (Area vs Perimeter)",
-    "func": "// Complexity \u2013 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": 760,
-    "wires": [
-      [
-        "2905bc12edeef503"
-      ]
-    ]
-  },
-  {
-    "id": "109aacc68888f0b1",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "TEXTURE (Area vs StdValue)",
-    "func": "// Texture \u2013 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": 800,
-    "wires": [
-      [
-        "5fe97b4a564498ea"
-      ]
-    ]
-  },
-  {
-    "id": "27ebeb1895528a1d",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "SOLIDITY (Histogram)",
-    "func": "// Solidity \u2013 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": 840,
-    "wires": [
-      [
-        "565c6d0f098e5be0"
-      ]
-    ]
-  },
-  {
-    "id": "d49dc2cc9f8eeaab",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 920,
-    "y": 520,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "2aa2c7cb2ba901a0",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "Sample Identity Metadata Only",
-    "func": "// FUNCTION: Extract minimal metadata for the \u201cSample Identity\u201d 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": 480,
-    "wires": [
-      [
-        "0c7765fa696e0717"
-      ]
-    ]
-  },
-  {
-    "id": "1631167b67b37d25",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "group": "47800358cf7cee25",
-    "page": "",
-    "ui": "",
-    "name": "ESD Histogram",
-    "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<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=\"/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": 940,
-    "y": 560,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "9bb69f94e4855a16",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "group": "1d9c6927a0e0a71b",
-    "page": "",
-    "ui": "",
-    "name": "Timeline",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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=\"/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": 920,
-    "y": 600,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "731608304eeaa5f3",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 990,
-    "y": 640,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "a6c62b4b3da492e9",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 970,
-    "y": 680,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "fc22ad681d25523b",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 930,
-    "y": 720,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "2905bc12edeef503",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 990,
-    "y": 760,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "5fe97b4a564498ea",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 960,
-    "y": 800,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "565c6d0f098e5be0",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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=\"/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": 950,
-    "y": 840,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "8fc92b69ced53cf2",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "EXPLORER",
-    "func": "// Explorer Function Node\n// TSV \u2192 {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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = val(firstRow, \"process_pixel_applied\");\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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: `/api/files/objects/${(val(row,\"object_date\")||\"\").replace(/ /g,\"_\")}/${(val(row,\"sample_id\")||\"\").replace(/ /g,\"_\")}/${(val(row,\"acq_id\")||\"\").replace(/ /g,\"_\")}/${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": 920,
-    "wires": [
-      [
-        "131aae14607d4830"
-      ]
-    ]
-  },
-  {
-    "id": "131aae14607d4830",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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            <div style=\"position:relative;\">\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              <div style=\"position:absolute; bottom:16px; left:0; right:0; pointer-events:none;\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPercent + '%', marginLeft: 'auto', marginRight: '8px' }\"></div>\n                <div class=\"scale-label\" style=\"text-align:right; padding-right:8px;\">{{ formattedScale }}</div>\n              </div>\n            </div>\n\n            <div class=\"d-flex justify-center align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\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, process_pixel_applied: false },\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        this.meta.process_pixel_applied = !!m.payload.meta?.process_pixel_applied\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=\"/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 objWidthRaw = this.hovered.object_width || 100;\n      const realWidthMicrons = this.meta.process_pixel_applied ? objWidthRaw : objWidthRaw * 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    scaleBarPercent() {\n      if (!this.hovered) return 10;\n      const w = this.hovered.object_width || 100;\n      const h = this.hovered.object_height || 100;\n      const res = this.meta.resolution || 1;\n      // Get dimensions in native pixels for display scaling\n      const wPx = this.meta.process_pixel_applied ? w / res : w;\n      const hPx = this.meta.process_pixel_applied ? h / res : h;\n      // Scale bar width in native image pixels\n      const scaleBarNativePx = this.adaptiveScaleMicrons / res;\n      // In a square container with contain, image is scaled by 1/max(w,h)\n      // So percentage of container = scaleBarNativePx / max(wPx, hPx) * 100\n      const maxDim = Math.max(wPx, hPx);\n      if (maxDim <= 0) return 10;\n      return (scaleBarNativePx / maxDim) * 100;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} \u00b5m`\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": 920,
-    "y": 920,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "69ce53c2079b63a0",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "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": 460,
-    "y": 440,
-    "wires": [
-      [
-        "d49dc2cc9f8eeaab",
-        "1631167b67b37d25",
-        "9bb69f94e4855a16",
-        "731608304eeaa5f3",
-        "a6c62b4b3da492e9",
-        "fc22ad681d25523b",
-        "2905bc12edeef503",
-        "5fe97b4a564498ea",
-        "565c6d0f098e5be0",
-        "0c7765fa696e0717",
-        "131aae14607d4830",
-        "9b4aa58f8a37a9d9"
-      ]
-    ]
-  },
-  {
-    "id": "88371b41526bbd18",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "GALLERY",
-    "func": "// GALLERY Function Node\n// TSV \u2192 { 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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = get(firstRow, 'process_pixel_applied');\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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')||'').replace(/ /g,'_')}/${(get(row, 'sample_id')||'').replace(/ /g,'_')}/${(get(row, 'acq_id')||'').replace(/ /g,'_')}/${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": 1000,
-    "wires": [
-      [
-        "9b4aa58f8a37a9d9"
-      ]
-    ]
-  },
-  {
-    "id": "e16e3dace2bb507f",
-    "type": "delay",
-    "z": "4fdbd7bacb797c5a",
-    "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": 340,
-    "wires": [
-      [
-        "bb7e84695ec2b24c"
-      ]
-    ]
-  },
-  {
-    "id": "ebb2567bdaf69c8e",
-    "type": "ui-template",
-    "z": "4fdbd7bacb797c5a",
-    "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": "c4a624fe9c464cda",
-    "type": "switch",
-    "z": "4fdbd7bacb797c5a",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "neq",
-        "v": "$pageview",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 170,
-    "y": 300,
-    "wires": [
-      [
-        "e16e3dace2bb507f"
-      ]
-    ]
-  },
-  {
-    "id": "d365c80d0854bab7",
-    "type": "debug",
-    "z": "4fdbd7bacb797c5a",
-    "name": "debug 5",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "true",
-    "targetType": "full",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 940,
-    "y": 400,
-    "wires": []
-  },
-  {
-    "id": "93ac167a60a35472",
-    "type": "function",
-    "z": "4fdbd7bacb797c5a",
-    "name": "Sample Identity Metadata Only",
-    "func": "// FUNCTION: Extract all data and metadata\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\n\n// Fonction utilitaire pour mapper les colonnes\nconst rowToObject = (rowCells) => {\n    const obj = {};\n    headers.forEach((header, index) => {\n        obj[header] = rowCells[index] || \"\";\n    });\n    return obj;\n};\n\nlet allRows = [];\nlet firstDataRow = null;\n\n// --- 1. Parser toutes les lignes ---\nfor (let i = 1; i < lines.length; i++) {\n    const cells = lines[i].split(\"\\t\");\n    const rowObj = rowToObject(cells);\n\n    allRows.push(rowObj);\n\n    // Identifier la premi\u00e8re vraie ligne de donn\u00e9es pour les m\u00e9tadonn\u00e9es globales\n    if (!firstDataRow && !lines[i].trim().startsWith(\"[\")) {\n        firstDataRow = rowObj;\n    }\n}\n\n// --- 2. Extraire les m\u00e9tadonn\u00e9es (bas\u00e9es sur la premi\u00e8re ligne valide) ---\nconst meta = {\n    sample_id: firstDataRow ? firstDataRow[\"sample_id\"] : \"\",\n    project: firstDataRow ? firstDataRow[\"sample_project\"] : \"\",\n    acq_id: firstDataRow ? firstDataRow[\"acq_id\"] : \"\"\n};\n\n// --- 3. Output : M\u00e9tadonn\u00e9es + l'int\u00e9gralit\u00e9 des donn\u00e9es ---\nmsg.payload = {\n    meta: meta,\n    data: allRows // Contient maintenant tous les enregistrements\n};\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 510,
-    "y": 400,
-    "wires": [
-      [
-        "d365c80d0854bab7"
-      ]
-    ]
-  },
-  {
-    "id": "72065cd82cb87df5",
-    "type": "debug",
-    "z": "4fdbd7bacb797c5a",
-    "name": "debug 2",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 440,
-    "y": 340,
-    "wires": []
-  },
-  {
-    "id": "b2958e4a07a87cad",
-    "type": "ui-event",
-    "z": "a7825c4c81ad20a0",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "b4515f99c5e5e2da",
-        "26ec7d57f8231752"
-      ]
-    ]
-  },
-  {
-    "id": "b4515f99c5e5e2da",
-    "type": "switch",
-    "z": "a7825c4c81ad20a0",
-    "name": "msg.payload.page.path === \"/visualization\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/visualization",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 330,
-    "y": 40,
-    "wires": [
-      [
-        "a15937db31847a11",
-        "99d07bf34db5693f"
-      ]
-    ]
-  },
-  {
-    "id": "82cee7ccf168f572",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "b570f76ef526af45",
-    "page": "",
-    "ui": "",
-    "name": "Navigation Top",
-    "order": 2,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row align=\"center\" class=\"mx-0 py-1 px-1 rounded-lg overflow-hidden bg-white\" no-gutters>\n      <v-col cols=\"12\" class=\"d-flex align-center flex-nowrap py-1 nav-wrapper\">\n\n        <v-btn toggle to=\"preview\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-virus-outline</v-icon>\n          <span class=\"btn-text\">Preview</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"metadata\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-file-document-edit-outline</v-icon>\n          <span class=\"btn-text\">Metadata</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"acquisition\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-camera-enhance</v-icon>\n          <span class=\"btn-text\">Acquisition</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"segmentation\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-image-filter-center-focus</v-icon>\n          <span class=\"btn-text\">Segmentation</span>\n        </v-btn>\n\n        <div class=\"separator-sign\">|</div>\n\n        <v-btn to=\"visualization\" color=\"primary\" rounded=\"lg\" variant=\"text\" size=\"large\" class=\"step-btn\">\n          <v-icon>mdi-chart-scatter-plot-hexbin</v-icon>\n          <span class=\"btn-text\">Visualization</span>\n        </v-btn>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<style scoped>\n  /* Conteneur principal */\n  .nav-wrapper {\n    justify-content: space-around;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n\n  .nav-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  /* Le Bouton de base */\n  .step-btn {\n    flex: 1 1 auto;\n    min-width: 50px;\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    padding: 0 12px !important;\n    text-transform: none;\n    letter-spacing: normal;\n  }\n\n  /* Animation du texte */\n  .btn-text {\n    max-width: 200px;\n    /* Valeur arbitraire haute */\n    opacity: 1;\n    margin-left: 8px;\n    white-space: nowrap;\n    transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease;\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  /* \u00c9tat actif */\n  .v-btn--active.step-btn {\n    background-color: rgba(var(--v-theme-primary), 0.08) !important;\n    font-weight: bold;\n  }\n\n  /* S\u00e9parateurs */\n  .separator-sign {\n    color: #eeeeee;\n    font-size: 1.2rem;\n    user-select: none;\n    flex: 0 0 auto;\n  }\n\n  /* --- LA MAGIE DU SMARTPHONE (Sous 700px) --- */\n  @media (max-width: 700px) {\n    .btn-text {\n      max-width: 0;\n      opacity: 0;\n      margin-left: 0;\n      overflow: hidden;\n    }\n\n    .step-btn {\n      min-width: 44px;\n      padding: 0 !important;\n      /* On garde le bouton actif un peu plus large ou color\u00e9 pour le rep\u00e8re visuel */\n    }\n\n    /* Optionnel : on peut laisser le texte uniquement sur le bouton ACTIF m\u00eame sur mobile */\n    .v-btn--active.step-btn .btn-text {\n      max-width: 100px;\n      opacity: 1;\n      margin-left: 4px;\n    }\n  }\n.v-card-text{padding:0px}\n\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1300,
-    "y": 40,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "a15937db31847a11",
-    "type": "list segmentations",
-    "z": "a7825c4c81ad20a0",
-    "name": "",
-    "x": 170,
-    "y": 180,
-    "wires": [
-      [
-        "4f4d57c070b89857",
-        "adc7e075bda50785"
-      ]
-    ]
-  },
-  {
-    "id": "4f4d57c070b89857",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "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\u00e9ation 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,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 440,
-    "y": 180,
-    "wires": [
-      [
-        "eb62a19058171fa8"
-      ]
-    ]
-  },
-  {
-    "id": "1802e96dd833363b",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "Size-safe file read",
-    "func": "const MAX_LINES = 5001;\nconst MAX_SIZE = 10 * 1024 * 1024;\n\nconst filePath = msg.payload.path || msg.filename;\nif (!filePath) { return null; }\n\ntry {\n    const stats = fs.statSync(filePath);\n    if (stats.size > MAX_SIZE) {\n        const fd = fs.openSync(filePath, \"r\");\n        const buf = Buffer.alloc(Math.min(stats.size, 2 * 1024 * 1024));\n        const bytesRead = fs.readSync(fd, buf, 0, buf.length, 0);\n        fs.closeSync(fd);\n        const partial = buf.toString(\"utf8\", 0, bytesRead);\n        const lines = partial.split(\"\\n\");\n        msg.payload = lines.slice(0, MAX_LINES).join(\"\\n\");\n        node.warn(\"Large TSV (\" + Math.round(stats.size/1024/1024) + \"MB) - limited to \" + MAX_LINES + \" lines\");\n    } else {\n        msg.payload = fs.readFileSync(filePath, \"utf8\");\n    }\n    return msg;\n} catch(e) {\n    node.error(\"File read error: \" + e.message, msg);\n    return null;\n}",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [
-      {
-        "var": "fs",
-        "module": "fs"
-      }
-    ],
-    "x": 180,
-    "y": 380,
-    "wires": [
-      [
-        "82d199f05a6f0af2",
-        "248999e928a14aa9",
-        "09b02605b198b2f4",
-        "897140ab8ebde04d",
-        "ea4aa3af0f18be63",
-        "42b7f7bec1d2da57",
-        "09203894702cf830",
-        "db14c860ad4ab4ec",
-        "eb793dfbf316c8d9",
-        "63e7888198376e77",
-        "da58d147efe428ea",
-        "f8b996c6c3c8e77a",
-        "a351f0483ac3a747"
-      ]
-    ]
-  },
-  {
-    "id": "63121349be3135fd",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "Get tsv path",
-    "func": "// 1. On s'assure que le path existe\nif (msg.payload.path) {\n\n    const currentPath = msg.payload.path;\n    const cleanPath = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath;\n    const acqId = cleanPath.split('/').pop();\n\n    // Save the actual directory path relative to objects root for image URL construction\n    // e.g. \"/home/pi/data/objects/2023-10-12/SomeName_A1\" -> \"2023-10-12/SomeName_A1\"\n    const objRoot = \"/home/pi/data/objects/\";\n    msg.tsvDir = cleanPath.startsWith(objRoot) ? cleanPath.slice(objRoot.length) : cleanPath;\n\n    // Try expected filename first\n    const expectedTsv = `${cleanPath}/ecotaxa_${acqId}.tsv`;\n\n    if (fs.existsSync(expectedTsv)) {\n        msg.payload.path = expectedTsv;\n    } else {\n        // Fallback: find any ecotaxa_*.tsv in the directory\n        try {\n            const files = fs.readdirSync(cleanPath);\n            const tsvFile = files.find(f => f.startsWith('ecotaxa_') && f.endsWith('.tsv'));\n            if (tsvFile) {\n                msg.payload.path = `${cleanPath}/${tsvFile}`;\n            } else {\n                node.warn('No ecotaxa TSV found in ' + cleanPath);\n                return null;\n            }\n        } catch(e) {\n            node.error('Cannot read directory: ' + e.message);\n            return null;\n        }\n    }\n}\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [
-      {
-        "var": "fs",
-        "module": "fs"
-      }
-    ],
-    "x": 930,
-    "y": 180,
-    "wires": [
-      [
-        "aa474626711fa5b6"
-      ]
-    ]
-  },
-  {
-    "id": "2133c934126655d8",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "0c1537ce71affc2b",
-    "page": "",
-    "ui": "",
-    "name": "Gallery",
-    "order": 2,
-    "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(displayPx(item.object_width) * zoom, 40)) + 'px',\n                            height: (Math.max(displayPx(item.object_height) * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (displayPx(item.object_width) * zoom) + 'px',\n                                height: (displayPx(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, process_pixel_applied: false },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 100,\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                { title: 'Sharpest', value: 'object_blur_laplacian' }\n                \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, process_pixel_applied: !!m.payload.meta.process_pixel_applied };\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        // Convert object dimension to display pixels\n        // When process_pixel_applied, values are in microns - divide by resolution to get pixels\n        displayPx(val) {\n            if (this.meta.process_pixel_applied) {\n                return val / (this.meta.resolution || 1);\n            }\n            return val;\n        },\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const widthRaw = item.object_width || 100;\n            const realWidthMicrons = this.meta.process_pixel_applied ? widthRaw : widthRaw * res;\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} \u00b5m` };\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} \u00b5m` };\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\u00b2\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"\u00b0\";\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,
-    "templateScope": "local",
-    "className": "",
-    "x": 920,
-    "y": 1000,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "eb62a19058171fa8",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "fa6393a7d7e3b7d7",
-    "page": "",
-    "ui": "",
-    "name": "List of Segmentation",
-    "order": 2,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n\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<style scoped>\n.live-pulse {\n  animation: pulse 2s infinite;\n}\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.6; }\n}\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      search: \"\",\n      items: [],\n      loading: true,\n      selectedRow: null,\n      selectedItem: null,\n      liveMode: false,\n      refreshInterval: 5,\n      refreshTimer: 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  beforeUnmount() {\n    this.stopLiveRefresh();\n  },\n\n  methods: {\n    manualRefresh() {\n      this.loading = true;\n      this.send({ topic: \"refresh_list\", payload: true });\n      setTimeout(() => { this.loading = false; }, 500);\n    },\n\n    selectAcquisition(item) {\n      this.selectedRow = item.acquisition_id;\n      this.selectedItem = item;\n\n      this.send({\n        topic: \"selected_acquisition\",\n        payload: item\n      });\n    },\n\n    toggleLiveMode(enabled) {\n      if (enabled) {\n        this.startLiveRefresh();\n      } else {\n        this.stopLiveRefresh();\n      }\n    },\n\n    startLiveRefresh() {\n      this.stopLiveRefresh();\n      // Refresh gallery immediately if an acquisition is selected\n      if (this.selectedItem) {\n        this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n      }\n      // Periodically re-read the TSV to pick up new objects\n      this.refreshTimer = setInterval(() => {\n        if (this.selectedItem) {\n          this.send({ topic: \"selected_acquisition\", payload: this.selectedItem });\n        }\n      }, this.refreshInterval * 1000);\n    },\n\n    stopLiveRefresh() {\n      if (this.refreshTimer) {\n        clearInterval(this.refreshTimer);\n        this.refreshTimer = null;\n      }\n    },\n\n    getRowClass(wrapper) {\n      const item = wrapper.raw ?? wrapper;\n\n      return {\n        \"bg-blue-lighten-5\": item.acquisition_id === this.selectedRow\n      };\n    }\n  }\n};\n</script>",
-    "storeOutMessages": true,
-    "passthru": false,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 700,
-    "y": 180,
-    "wires": [
-      [
-        "63121349be3135fd",
-        "68ec210262cb873a"
-      ]
-    ]
-  },
-  {
-    "id": "ce136c26883f5d99",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "53490f9c39e2065d",
-    "page": "",
-    "ui": "",
-    "name": "Infos",
-    "order": 2,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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: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.acq_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": 910,
-    "y": 440,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "82d199f05a6f0af2",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "HEATMAP (object_x, object_y)",
-    "func": "// Heatmap \u2013 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,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 510,
-    "y": 520,
-    "wires": [
-      [
-        "fa3836bcb90f19fd"
-      ]
-    ]
-  },
-  {
-    "id": "248999e928a14aa9",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "ESD Histogram (object_equivalent_diameter)",
-    "func": "// ESD Size Spectrum \u2013 TSV \u2192 {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": 560,
-    "wires": [
-      [
-        "884695dfb99afa9c"
-      ]
-    ]
-  },
-  {
-    "id": "09b02605b198b2f4",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "TIMELINE (sequence index + area)",
-    "func": "// Timeline \u2013 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": 600,
-    "wires": [
-      [
-        "6d881dec33245014"
-      ]
-    ]
-  },
-  {
-    "id": "897140ab8ebde04d",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "COLORSPACE (Saturation vs Value)",
-    "func": "// Colorspace \u2013 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": 640,
-    "wires": [
-      [
-        "d7416bf20b4dc8bc"
-      ]
-    ]
-  },
-  {
-    "id": "ea4aa3af0f18be63",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "ASPECT (Width vs Height)",
-    "func": "// Aspect \u2013 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": 680,
-    "wires": [
-      [
-        "14cc9379f5c5c333"
-      ]
-    ]
-  },
-  {
-    "id": "42b7f7bec1d2da57",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "GREENNESS (custom index + circularity)",
-    "func": "// Greenness vs Circularity \u2013 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": 720,
-    "wires": [
-      [
-        "cd8b19e450d40ff7"
-      ]
-    ]
-  },
-  {
-    "id": "09203894702cf830",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "COMPLEXITY (Area vs Perimeter)",
-    "func": "// Complexity \u2013 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": 760,
-    "wires": [
-      [
-        "5267a7f80cdf6c6f"
-      ]
-    ]
-  },
-  {
-    "id": "db14c860ad4ab4ec",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "TEXTURE (Area vs StdValue)",
-    "func": "// Texture \u2013 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": 800,
-    "wires": [
-      [
-        "a6df52a13d3d310f"
-      ]
-    ]
-  },
-  {
-    "id": "eb793dfbf316c8d9",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "SOLIDITY (Histogram)",
-    "func": "// Solidity \u2013 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": 840,
-    "wires": [
-      [
-        "31ba1239ad82a60c"
-      ]
-    ]
-  },
-  {
-    "id": "fa3836bcb90f19fd",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "90b33e458dd29d04",
-    "page": "",
-    "ui": "",
-    "name": "Heatmap",
-    "order": 2,
-    "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=\"/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": 920,
-    "y": 520,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "63e7888198376e77",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "Sample Identity Metadata Only",
-    "func": "// FUNCTION: Extract minimal metadata for the \u201cSample Identity\u201d 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": [
-      [
-        "ce136c26883f5d99"
-      ]
-    ]
-  },
-  {
-    "id": "884695dfb99afa9c",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "47800358cf7cee25",
-    "page": "",
-    "ui": "",
-    "name": "ESD Histogram",
-    "order": 2,
-    "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<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=\"/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        yaxis:{type:\"log\"} // <-- Added log scale to the Y-axis\n      };\n\n      Plotly.newPlot(el,[trace],layout,{responsive:true});\n    }\n  }\n};\n</script>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 940,
-    "y": 560,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "6d881dec33245014",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "1d9c6927a0e0a71b",
-    "page": "",
-    "ui": "",
-    "name": "Timeline",
-    "order": 2,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "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=\"/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": 920,
-    "y": 600,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "d7416bf20b4dc8bc",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "03ad1c8f517e8769",
-    "page": "",
-    "ui": "",
-    "name": "Colorspace (Saturation vs Value)",
-    "order": 2,
-    "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=\"/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": 990,
-    "y": 640,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "14cc9379f5c5c333",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "0be15f8190e6fd43",
-    "page": "",
-    "ui": "",
-    "name": "Aspect (Width vs Height)",
-    "order": 2,
-    "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=\"/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": 970,
-    "y": 680,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "cd8b19e450d40ff7",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "1edc962c44888abc",
-    "page": "",
-    "ui": "",
-    "name": "Greenness",
-    "order": 2,
-    "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=\"/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": 930,
-    "y": 720,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "5267a7f80cdf6c6f",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "67c63cc92c23c4b1",
-    "page": "",
-    "ui": "",
-    "name": "Complexity (Area vs Perimeter)",
-    "order": 2,
-    "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=\"/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": 990,
-    "y": 760,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "a6df52a13d3d310f",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "95a152a68b7ba779",
-    "page": "",
-    "ui": "",
-    "name": "Texture (Area vs Std)",
-    "order": 2,
-    "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=\"/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": 960,
-    "y": 800,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "31ba1239ad82a60c",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "1baa943e505febf1",
-    "page": "",
-    "ui": "",
-    "name": "Solidity Histogram",
-    "order": 2,
-    "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=\"/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": 950,
-    "y": 840,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "da58d147efe428ea",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "EXPLORER",
-    "func": "// Explorer Function Node\n// TSV \u2192 {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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = val(firstRow, \"process_pixel_applied\");\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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: msg.tsvDir ? `/api/files/objects/${msg.tsvDir}/${val(row,\"img_file_name\")}` : `/api/files/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\n// Cap rows to prevent browser crash on huge datasets\nconst MAX_ROWS = 5000;\nif (data.length > MAX_ROWS) data.length = MAX_ROWS;\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": 920,
-    "wires": [
-      [
-        "3d4c586bf5742617"
-      ]
-    ]
-  },
-  {
-    "id": "3d4c586bf5742617",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "group": "c5651e1a3e56f3f5",
-    "page": "",
-    "ui": "",
-    "name": "Explorer",
-    "order": 2,
-    "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            <div style=\"position:relative;\">\n              <v-img\n                :src=\"hovered.url\"\n                aspect-ratio=\"1\"\n                bg-color=\"grey-lighten-3\"\n                class=\"mb-3 img-scale-down\"\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              <div style=\"position:absolute; bottom:16px; left:0; right:0; pointer-events:none;\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPercent + '%', marginLeft: 'auto', marginRight: '8px' }\"></div>\n                <div class=\"scale-label\" style=\"text-align:right; padding-right:8px;\">{{ formattedScale }}</div>\n              </div>\n            </div>\n\n            <div class=\"d-flex justify-center align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    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, process_pixel_applied: false },\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        this.meta.process_pixel_applied = !!m.payload.meta?.process_pixel_applied\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=\"/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    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      const objWidthRaw = this.hovered.object_width || 100;\n      const realWidthMicrons = this.meta.process_pixel_applied ? objWidthRaw : objWidthRaw * this.meta.resolution;\n\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\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    scaleBarPercent() {\n      if (!this.hovered) return 10;\n      const w = this.hovered.object_width || 100;\n      const h = this.hovered.object_height || 100;\n      const res = this.meta.resolution || 1;\n      // Get dimensions in native pixels for display scaling\n      const wPx = this.meta.process_pixel_applied ? w / res : w;\n      const hPx = this.meta.process_pixel_applied ? h / res : h;\n      // Scale bar width in native image pixels\n      const scaleBarNativePx = this.adaptiveScaleMicrons / res;\n      // In a square container with contain, image is scaled by 1/max(w,h)\n      // So percentage of container = scaleBarNativePx / max(wPx, hPx) * 100\n      const maxDim = Math.max(wPx, hPx);\n      if (maxDim <= 0) return 10;\n      return (scaleBarNativePx / maxDim) * 100;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} \u00b5m`\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/* Force the image to shrink if too big, but never zoom in beyond 1:1 scale */\n.img-scale-down :deep(img) {\n  object-fit: scale-down !important;\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\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": 920,
-    "y": 920,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "26ec7d57f8231752",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "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": [
-      [
-        "fa3836bcb90f19fd",
-        "884695dfb99afa9c",
-        "6d881dec33245014",
-        "d7416bf20b4dc8bc",
-        "14cc9379f5c5c333",
-        "cd8b19e450d40ff7",
-        "5267a7f80cdf6c6f",
-        "a6df52a13d3d310f",
-        "31ba1239ad82a60c",
-        "ce136c26883f5d99",
-        "3d4c586bf5742617",
-        "2133c934126655d8"
-      ]
-    ]
-  },
-  {
-    "id": "f8b996c6c3c8e77a",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "GALLERY",
-    "func": "// GALLERY Function Node\n// TSV \u2192 { 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    // Extract pixel size (microns per pixel) - always needed for scale bar rendering\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n    // Flag: if true, measurement values (width, height, area, etc.) are already in microns\n    const applied = get(firstRow, 'process_pixel_applied');\n    meta.process_pixel_applied = (applied && applied.toString().toLowerCase() === \"true\");\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\", \"object_blur_laplacian\"\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: msg.tsvDir ? `/api/files/objects/${msg.tsvDir}/${get(row, 'img_file_name')}` : `/api/files/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\n// Cap rows to prevent browser crash on huge datasets\nconst MAX_ROWS = 5000;\nif (data.length > MAX_ROWS) data.length = MAX_ROWS;\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": 1000,
-    "wires": [
-      [
-        "2133c934126655d8"
-      ]
-    ]
-  },
-  {
-    "id": "59c2b02e7b50171f",
-    "type": "delay",
-    "z": "a7825c4c81ad20a0",
-    "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": 340,
-    "wires": [
-      [
-        "1802e96dd833363b"
-      ]
-    ]
-  },
-  {
-    "id": "8c6d06345732ad31",
-    "type": "ui-template",
-    "z": "a7825c4c81ad20a0",
-    "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": "aa474626711fa5b6",
-    "type": "switch",
-    "z": "a7825c4c81ad20a0",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "neq",
-        "v": "$pageview",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 170,
-    "y": 300,
-    "wires": [
-      [
-        "59c2b02e7b50171f"
-      ]
-    ]
-  },
-  {
-    "id": "a351f0483ac3a747",
-    "type": "function",
-    "z": "a7825c4c81ad20a0",
-    "name": "Sample Identity Metadata Only",
-    "func": "// FUNCTION: Extract all data and metadata\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\nconst headers = lines[0].split(\"\\t\");\n\n// Fonction utilitaire pour mapper les colonnes\nconst rowToObject = (rowCells) => {\n    const obj = {};\n    headers.forEach((header, index) => {\n        obj[header] = rowCells[index] || \"\";\n    });\n    return obj;\n};\n\nlet allRows = [];\nlet firstDataRow = null;\n\n// --- 1. Parser toutes les lignes ---\nfor (let i = 1; i < lines.length; i++) {\n    const cells = lines[i].split(\"\\t\");\n    const rowObj = rowToObject(cells);\n\n    allRows.push(rowObj);\n\n    // Identifier la premi\u00e8re vraie ligne de donn\u00e9es pour les m\u00e9tadonn\u00e9es globales\n    if (!firstDataRow && !lines[i].trim().startsWith(\"[\")) {\n        firstDataRow = rowObj;\n    }\n}\n\n// --- 2. Extraire les m\u00e9tadonn\u00e9es (bas\u00e9es sur la premi\u00e8re ligne valide) ---\nconst meta = {\n    sample_id: firstDataRow ? firstDataRow[\"sample_id\"] : \"\",\n    project: firstDataRow ? firstDataRow[\"sample_project\"] : \"\",\n    acq_id: firstDataRow ? firstDataRow[\"acq_id\"] : \"\"\n};\n\n// --- 3. Output : M\u00e9tadonn\u00e9es + l'int\u00e9gralit\u00e9 des donn\u00e9es ---\nmsg.payload = {\n    meta: meta,\n    data: allRows // Contient maintenant tous les enregistrements\n};\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": 0,
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 510,
-    "y": 340,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "68ec210262cb873a",
-    "type": "debug",
-    "z": "a7825c4c81ad20a0",
-    "name": "debug 3",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 960,
-    "y": 140,
-    "wires": []
-  },
-  {
-    "id": "adc7e075bda50785",
-    "type": "debug",
-    "z": "a7825c4c81ad20a0",
-    "name": "debug 6",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 380,
-    "y": 140,
-    "wires": []
-  },
-  {
-    "id": "99d07bf34db5693f",
-    "type": "debug",
-    "z": "a7825c4c81ad20a0",
-    "name": "debug 7",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 660,
-    "y": 60,
-    "wires": []
-  },
-  {
-    "id": "314a079a9f687b5f",
-    "type": "ui-template",
-    "z": "6fac9fa6a894b293",
-    "group": "822cdc5b6ef13f39",
-    "page": "",
-    "ui": "",
-    "name": "body",
-    "order": 1,
-    "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,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 490,
-    "y": 320,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "4f3bb4938e8a4db6",
-    "type": "ui-template",
-    "z": "6fac9fa6a894b293",
-    "group": "c29c835a70533b69",
-    "page": "",
-    "ui": "",
-    "name": "header",
-    "order": 1,
-    "width": "12",
-    "height": "6",
-    "head": "",
-    "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,
-    "templateScope": "local",
-    "className": "",
-    "x": 490,
-    "y": 180,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "aa79e9d1d4c21a2b",
-    "type": "mqtt out",
-    "z": "6fac9fa6a894b293",
-    "name": "",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 710,
-    "y": 320,
-    "wires": []
-  },
-  {
-    "id": "2ca7d039baf0651d",
-    "type": "inject",
-    "z": "6fac9fa6a894b293",
-    "name": "",
-    "props": [
-      {
-        "p": "topic",
-        "vt": "str"
-      },
-      {
-        "p": "payload"
-      }
-    ],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "calibration",
-    "payload": "{   \"action\": \"start\" }",
-    "payloadType": "json",
-    "x": 290,
-    "y": 280,
-    "wires": [
-      [
-        "97634d7d17fefdeb"
-      ]
-    ]
-  },
-  {
-    "id": "97634d7d17fefdeb",
-    "type": "ui-template",
-    "z": "6fac9fa6a894b293",
-    "group": "c29c835a70533b69",
-    "page": "",
-    "ui": "",
-    "name": "Calibration",
-    "order": 2,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "format": "<template>\n  <v-container fluid class=\"pa-0 fill-height bg-grey-lighten-4\">\n    <v-row no-gutters class=\"fill-height\">\n      \n      <v-col cols=\"12\" md=\"9\" class=\"d-flex align-center justify-center position-relative\">\n        <div class=\"ratio-box\">\n            <v-card class=\"calibration-container\">\n              <iframe \n                src=\"/preview/node-red\" \n                class=\"calibration-iframe\"\n                @load=\"onIframeLoad\" \n                ref=\"videoIframe\"\n              ></iframe>\n              \n              <div v-if=\"step === 2\" class=\"focus-overlay\">\n                  <div class=\"crosshair\"></div>\n                  <div class=\"focus-label\">COLOR ANALYSIS ZONE</div>\n              </div>\n\n              <div v-show=\"step === 3\" class=\"smart-grid\">\n                <div \n                    v-for=\"(zone, i) in gridZones\" \n                    :key=\"i\"\n                    class=\"grid-cell\"\n                    :class=\"{ 'cell-active': zone.active, 'cell-rejected': !zone.active && status === 'running' }\"\n                ></div>\n              </div>\n              \n              <canvas ref=\"captureCanvas\" width=\"1200\" height=\"900\" style=\"display:none;\"></canvas>\n            </v-card>\n        </div>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"3\" class=\"bg-white d-flex flex-column pa-4 border-s\">\n        \n        <div class=\"d-flex align-center justify-space-between mb-4\">\n          <h2 class=\"text-h6 font-weight-bold text-grey-darken-3\">CALIBRATION</h2>\n          <v-chip size=\"small\" :color=\"ledStatusColor\" variant=\"flat\" class=\"font-weight-bold\">\n            LED: {{ status === 'running' ? 'ON' : 'OFF' }}\n          </v-chip>\n        </div>\n\n        <v-btn \n            block size=\"x-large\" height=\"70\"\n            :color=\"btnColor\"\n            @click=\"toggleSequence\"\n            class=\"mb-6 font-weight-black elevation-2\"\n            :loading=\"status === 'running' && step === 0\"\n        >\n            {{ btnText }}\n        </v-btn>\n\n        <div class=\"d-flex flex-column gap-3\">\n            <v-card :color=\"getStepColor(1)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(1)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"text-subtitle-2 font-weight-bold\">1. Initialization</div>\n                    <div class=\"text-caption\">Preset (0.1 / R200 B180)</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(2)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(2)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">2. Desaturation</span>\n                        <span v-if=\"step===2\" class=\"font-mono font-weight-black\">{{ currentSat }}%</span>\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===2\" \n                        :model-value=\"Math.max(0, 100 - (currentSat*10))\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Target: 0%</div>\n                </div>\n            </v-card>\n\n            <v-card :color=\"getStepColor(3)\" variant=\"tonal\" class=\"pa-3 d-flex align-center\">\n                <v-icon :icon=\"getStepIcon(3)\" class=\"mr-3\"></v-icon>\n                <div class=\"flex-grow-1\">\n                    <div class=\"d-flex justify-space-between\">\n                        <span class=\"text-subtitle-2 font-weight-bold\">3. Exposure</span>\n                        <span v-if=\"step===3\" class=\"font-mono font-weight-black\">{{ currentLum.toFixed(0) }}/230</span>\n                    </div>\n                    <div v-if=\"step===3\" class=\"text-caption font-mono text-green-darken-2 mt-1\">\n                        {{ activeZonesCount }} valid zones\n                    </div>\n                    <v-progress-linear \n                        v-if=\"step===3\" \n                        :model-value=\"(currentLum/255)*100\" \n                        height=\"4\" rounded class=\"mt-1\"\n                    ></v-progress-linear>\n                    <div v-else class=\"text-caption\">Smart Grid Target: 230</div>\n                </div>\n            </v-card>\n        </div>\n\n        <div class=\"mt-auto pt-4 border-t\">\n            <div class=\"font-mono text-caption text-grey-darken-2\" style=\"height:150px; overflow-y:auto; font-size:10px !important;\">\n                <div v-for=\"(l,i) in logs\" :key=\"i\" class=\"mb-1 border-b pb-1\">\n                    <span class=\"text-grey-darken-1 font-weight-bold\">{{l.time}}</span> {{ l.txt }}\n                </div>\n            </div>\n        </div>\n\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      status: 'idle', // idle, running, success, error\n      step: 0,        \n      currentSat: 0,\n      currentLum: 0,\n      led: 0.1, \n      gains: { red: 200, blue: 180 },\n      gridN: 20,       \n      analysisW: 1200, \n      analysisH: 900,\n      sampleSize: 15,\n      sensitivityThreshold: 8,\n      gridZones: Array(400).fill().map((_, i) => ({ id: i, lum: 0, active: false })),\n      logs: []\n    };\n  },\n  computed: {\n    btnText() {\n        if(this.status === 'running') return 'EMERGENCY STOP';\n        if(this.status === 'success') return 'SUCCESS (RESTART)';\n        return 'START SEQUENCE';\n    },\n    btnColor() {\n        if(this.status === 'running') return 'error';\n        if(this.status === 'success') return 'success';\n        return 'primary';\n    },\n    ledStatusColor() {\n        return this.status === 'running' ? 'orange' : 'grey';\n    },\n    activeZonesCount() {\n        return this.gridZones.filter(z => z.active).length;\n    }\n  },\n  methods: {\n    getStepColor(s) {\n        if (this.status === 'success' || this.step > s) return 'green';\n        if (this.step === s) return 'orange-darken-2';\n        return 'grey-lighten-2';\n    },\n    getStepIcon(s) {\n        if (this.status === 'success' || this.step > s) return 'mdi-check-bold';\n        if (this.step === s) return 'mdi-loading mdi-spin';\n        return 'mdi-numeric-'+s+'-circle';\n    },\n\n    async toggleSequence() {\n        if(this.status === 'running') {\n            this.status = 'idle'; \n            this.step = 0; \n            this.log(\"Manual stop requested.\");\n            this.stopHardware();\n            return;\n        }\n        \n        this.status = 'running';\n        this.step = 1;\n        this.logs = [];\n        this.log(\"Sequence start: LED status ON\");\n\n        try {\n            await this.runInit();\n            this.step = 2;\n            await this.runSaturationLoop();\n            this.step = 3;\n            this.gridZones.forEach(z => z.active = false); \n            await this.runLightnessLoop();\n            \n            this.status = 'success';\n            this.step = 4;\n            this.log(\"Calibration successful.\");\n        } catch(e) {\n            this.status = 'error';\n            this.log(\"ERROR: \" + e);\n            this.stopHardware();\n        }\n    },\n\n    async runInit() {\n        this.log(\"Init: Preset LED 0.1 / R200 B180\");\n        this.led = 0.1; \n        this.gains = { red: 200, blue: 180 };\n        this.sendIO();\n        await this.wait(2500);\n    },\n\n    async runSaturationLoop() {\n        this.log(\"Desaturation starting...\");\n        let iter = 0;\n        while(iter < 25 && this.status === 'running') {\n            const stats = await this.analyzeFrame(true);\n            this.currentSat = stats.sat;\n            if(stats.sat < 1.0) return;\n\n            const Kp = 0.8;\n            this.gains.red = Math.max(0, Math.min(255, Math.round(this.gains.red + ((stats.g - stats.r) * Kp))));\n            this.gains.blue = Math.max(0, Math.min(255, Math.round(this.gains.blue + ((stats.g - stats.b) * Kp))));\n\n            this.sendIO();\n            await this.wait(2000); \n            iter++;\n        }\n    },\n\n    async runLightnessLoop() {\n        this.log(\"Exposure adjustment...\");\n        let iter = 0;\n        while(iter < 40 && this.status === 'running') {\n            const stats = await this.analyzeFrame(false);\n            this.currentLum = stats.lum;\n            if(Math.abs(stats.lum - 230) <= 5) return;\n\n            let nextLed = this.led;\n            if(stats.lum < 5) nextLed = Math.max(0.005, this.led * 4);\n            else if(stats.lum > 252) nextLed = this.led * 0.5;\n            else nextLed = (this.led * (230 / (stats.lum || 1)) * 0.9) + (this.led * 0.1);\n            \n            this.led = Math.max(0, Math.min(1, nextLed));\n            this.sendIO();\n            await this.wait(600);\n            iter++;\n        }\n    },\n\n    async analyzeFrame(isSaturationStep) {\n        const iframe = this.$refs.videoIframe;\n        if(!iframe?.contentDocument) return { sat:99, lum:0, r:0, g:0, b:0 };\n        const video = iframe.contentDocument.querySelector('video');\n        if(!video || video.videoWidth === 0) return { sat:99, lum:0, r:0, g:0, b:0 };\n\n        const ctx = this.$refs.captureCanvas.getContext('2d', { willReadFrequently: true });\n        ctx.drawImage(video, 0, 0, this.analysisW, this.analysisH);\n\n        if(isSaturationStep) {\n            const size = 100;\n            const data = ctx.getImageData((this.analysisW-size)/2, (this.analysisH-size)/2, size, size).data;\n            let r=0, g=0, b=0, c=0;\n            for(let i=0; i<data.length; i+=4) { r+=data[i]; g+=data[i+1]; b+=data[i+2]; c++; }\n            const avgR=r/c, avgG=g/c, avgB=b/c;\n            const max=Math.max(avgR, avgG, avgB), min=Math.min(avgR, avgG, avgB);\n            return { sat: parseFloat((max===0?0:((max-min)/max)*100).toFixed(1)), r:avgR, g:avgG, b:avgB };\n        } else {\n            const cellW = this.analysisW / this.gridN; \n            const cellH = this.analysisH / this.gridN;\n            let vL=0, vC=0;\n            for(let i=0; i<this.gridN; i++) {\n                for(let j=0; j<this.gridN; j++) {\n                    const data = ctx.getImageData((j*cellW)+(cellW-15)/2, (i*cellH)+(cellH-15)/2, 15, 15).data;\n                    let s=0, mP=255;\n                    for(let k=0; k<data.length; k+=4) { \n                        const l=(data[k]+data[k+1]+data[k+2])/3; \n                        if(l<mP) mP=l; s+=l; \n                    }\n                    const avg=s/(data.length/4);\n                    const isValid=(avg-mP)<=this.sensitivityThreshold && avg>2;\n                    this.gridZones[i*this.gridN+j] = { active: isValid, lum: avg };\n                    if(isValid){ vL+=avg; vC++; }\n                }\n            }\n            return { lum: vC > 0 ? vL/vC : 0 };\n        }\n    },\n\n    sendIO() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { \n                    action: \"on\", \n                    value: Number(this.led.toFixed(12)),\n                    calibration_led_intensity: Number(this.led.toFixed(6)),\n                    led_status: \"on\" \n                } \n            });\n            this.send({ \n                topic: \"imager/image\", \n                payload: { \n                    action: \"settings\", \n                    settings: { white_balance_gain: this.gains } \n                } \n            });\n        }\n    },\n\n    stopHardware() {\n        if(this.send) {\n            this.send({ \n                topic: \"light\", \n                payload: { action: \"off\", value: 0, led_status: \"off\" } \n            });\n        }\n    },\n\n    onIframeLoad() {\n        try {\n            const doc = this.$refs.videoIframe.contentDocument;\n            const s = doc.createElement('style');\n            s.textContent = `body{margin:0;overflow:hidden;background:black;} img,video{width:100%;height:100%;object-fit:fill;display:block;}`;\n            doc.head.appendChild(s);\n        } catch(e){}\n    },\n    wait(ms) { return new Promise(r => setTimeout(r, ms)); },\n    log(txt) { \n        const time = new Date().toLocaleTimeString().split(' ')[0];\n        this.logs.unshift({time, txt}); \n        if(this.logs.length>20) this.logs.pop(); \n    }\n  }\n};\n</script>\n\n<style scoped>\n.calibration-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; }\n.calibration-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; z-index: 1; pointer-events: none; }\n.focus-overlay {\n    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\n    width: 100px; height: 100px;\n    border: 2px dashed rgba(255, 165, 0, 0.8);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5); \n    z-index: 10;\n    pointer-events: none;\n}\n.smart-grid {\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n    display: grid; \n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(20, 1fr);\n    z-index: 10;\n    pointer-events: none;\n}\n.ratio-box {\n    width: 100%;\n    max-width: 1000px;\n    aspect-ratio: 4 / 3;\n    margin: 0 auto;\n    position: relative;\n    border: 1px solid #ccc;\n    background: #000;\n}\n.crosshair { width: 10px; height: 10px; background: orange; border-radius: 50%; }\n.focus-label {\n    position: absolute; top: -25px; width: 200px; text-align: center;\n    color: orange; font-size: 10px; font-weight: bold; letter-spacing: 1px;\n}\n.grid-cell { border: 1px solid rgba(255,255,255,0.15); transition: background 0.1s; }\n.cell-active { background-color: rgba(0, 255, 0, 0.15); border-color: rgba(0,255,0,0.4); }\n.cell-rejected { background-color: rgba(255, 0, 0, 0.15); }\n.gap-3 { display: flex; flex-direction: column; gap: 12px; }\n.font-mono { font-family: 'Roboto Mono', monospace; }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 510,
-    "y": 280,
-    "wires": [
-      [
-        "aa79e9d1d4c21a2b",
-        "3ec78b1561245371"
-      ]
-    ]
-  },
-  {
-    "id": "3ec78b1561245371",
-    "type": "function",
-    "z": "6fac9fa6a894b293",
-    "name": "set light settings",
-    "func": "// On v\u00e9rifie si le message contient les propri\u00e9t\u00e9s attendues\n// avant de mettre \u00e0 jour les variables globales.\n\nif (msg.payload) {\n\n    // Si led_status est pr\u00e9sent dans le payload, on stocke\n    if (msg.payload.led_status !== undefined) {\n        global.set(\"led_status\", msg.payload.led_status);\n    }\n\n    // Si calibration_led_intensity est pr\u00e9sent dans le payload, on stocke\n    if (msg.payload.calibration_led_intensity !== undefined) {\n        global.set(\"calibration_led_intensity\", msg.payload.calibration_led_intensity);\n    }\n}\n\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 740,
-    "y": 280,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "f5ecfcfd42bb61f0",
-    "type": "ui-template",
-    "z": "d70bc885c4bf46d4",
-    "g": "c398718e1269dc31",
-    "group": "af8acdfe9afbad74",
-    "page": "",
-    "ui": "",
-    "name": "Step Bar",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"1\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" class=\"selected-step\" color=\"primary\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" color=\"grey\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" color=\"grey\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" color=\"grey\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1080,
-    "y": 60,
-    "wires": [
-      [
-        "c1c7cc675878b0f3"
-      ]
-    ]
-  },
-  {
-    "id": "c1c7cc675878b0f3",
-    "type": "ui-control",
-    "z": "d70bc885c4bf46d4",
-    "g": "c398718e1269dc31",
-    "name": "",
-    "ui": "e6ae26617c24c3ea",
-    "events": "all",
-    "x": 1280,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "90e29d79c8074c17",
-    "type": "ui-event",
-    "z": "d70bc885c4bf46d4",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "82a9fd78e0554323"
-      ]
-    ]
-  },
-  {
-    "id": "82a9fd78e0554323",
-    "type": "switch",
-    "z": "d70bc885c4bf46d4",
-    "name": "msg.payload.page.path === \"/calibration_saturation_level\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/calibration_saturation_level",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 380,
-    "y": 40,
-    "wires": [
-      [
-        "6219b9a464bc8109"
-      ]
-    ]
-  },
-  {
-    "id": "6219b9a464bc8109",
-    "type": "function",
-    "z": "d70bc885c4bf46d4",
-    "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": [
-      [
-        "10c29a65226c0da4"
-      ]
-    ]
-  },
-  {
-    "id": "10951f5abc907b1d",
-    "type": "mqtt out",
-    "z": "d70bc885c4bf46d4",
-    "name": "",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 850,
-    "y": 100,
-    "wires": []
-  },
-  {
-    "id": "d1b0704bd6aeb092",
-    "type": "function",
-    "z": "d70bc885c4bf46d4",
-    "name": "set wb 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;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 980,
-    "y": 180,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "2da968133f63a1fe",
-    "type": "switch",
-    "z": "d70bc885c4bf46d4",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "imager/image",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 590,
-    "y": 140,
-    "wires": [
-      [
-        "d1b0704bd6aeb092",
-        "10951f5abc907b1d"
-      ]
-    ]
-  },
-  {
-    "id": "10c29a65226c0da4",
-    "type": "ui-template",
-    "z": "d70bc885c4bf46d4",
-    "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 ref=\"captureCanvas\" width=\"300\" height=\"300\" style=\"display:none;\"></canvas>\n\n          <v-overlay v-model=\"isAutoRunning\" contained class=\"align-center justify-center\">\n            <v-card class=\"pa-4 text-center\" width=\"300\">\n              <v-progress-circular indeterminate color=\"primary\" size=\"64\" class=\"mb-4\"></v-progress-circular>\n              <h3 class=\"text-h6\">Calibrating...</h3>\n              <p class=\"text-caption\">Saturation: {{ hsl.s }}% | Iteration: {{ loopCount }}</p>\n              <v-btn color=\"error\" variant=\"text\" @click=\"stopAutoCalibration\">Stop</v-btn>\n            </v-card>\n          </v-overlay>\n\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100 d-flex flex-column\">\n          <div>\n            <v-card-title class=\"text-left text-primary\">\n              White Balance Calibration\n            </v-card-title>\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 to defaults.\n              </p>\n              <v-btn block color=\"error\" variant=\"tonal\" class=\"mb-4\" @click=\"refreshGain\" :disabled=\"isAutoRunning\">\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. Current Analysis</h3>\n              <div class=\"d-flex align-center justify-space-between mb-3\">\n                <div class=\"d-flex align-center\">\n                  <div :style=\"{ 'background-color': `rgb(${sampledR}, ${sampledG}, ${sampledB})`, \n                                width: '40px', height: '40px', border: '2px solid #333', 'border-radius': '4px' }\"\n                    class=\"mr-3\"></div>\n                  <div>\n                    <div class=\"font-mono text-caption\">R:{{ sampledR }} G:{{ sampledG }} B:{{ sampledB }}</div>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <div class=\"text-h4 font-weight-bold\"\n                    :style=\"{ color: hsl.s < 2 ? '#4CAF50' : hsl.s < 10 ? '#FF9800' : '#F44336' }\">\n                    {{ hsl.s }}%\n                  </div>\n                  <div class=\"text-caption\">Saturation</div>\n                </div>\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. Manual Steps</h3>\n              <v-data-table :items=\"rows\" density=\"compact\" hide-default-footer class=\"gain-table mb-4\">\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\" density=\"compact\" hide-details\n                    variant=\"plain\" class=\"text-center centered-input\"\n                    @change=\"onManualEdit(item.channel,item.suggested)\"></v-text-field>\n                </template>\n              </v-data-table>\n              <v-btn block color=\"secondary\" variant=\"outlined\" :disabled=\"isAutoRunning\" @click=\"applySuggested\">\n                Apply Single Step\n              </v-btn>\n            </section>\n          </div>\n\n          <div class=\"mt-auto\">\n            <v-divider class=\"mb-4\"></v-divider>\n            <section>\n              <h3 class=\"text-subtitle-1 mb-2 d-flex align-center\">\n                <v-icon icon=\"mdi-magic-staff\" color=\"purple\" class=\"mr-2\"></v-icon>\n                4. Auto Zero Saturation\n              </h3>\n              <p class=\"text-caption mb-3\">\n                Automatically loops until saturation is ~0%.\n              </p>\n\n              <v-btn block size=\"large\" color=\"purple\" :loading=\"isAutoRunning\" @click=\"startAutoCalibration\">\n                {{ isAutoRunning ? 'Calibrating...' : 'Auto Calibrate (Target 0%)' }}\n              </v-btn>\n\n              <v-fade-transition>\n                <v-alert v-if=\"autoStatusMsg\" :type=\"autoStatusType\" density=\"compact\" variant=\"tonal\" class=\"mt-3\">\n                  {{ autoStatusMsg }}\n                </v-alert>\n              </v-fade-transition>\n            </section>\n          </div>\n\n        </v-card>\n      </v-col>\n    </v-row>\n  </v-container>\n</template>\n\n<script>\n  export default {\n  props: [\"msg\"],\n  data() {\n    return {\n      // Gain State\n      current: { red: 150, blue: 130 },\n      suggested: { red: null, blue: null },\n      \n      // Analysis State\n      sampledR: 0, sampledG: 0, sampledB: 0,\n      hsl: { h: 0, s: 0, l: 0 },\n      \n      // Loop State\n      loopCount: 0, \n      \n      // Capture Internals\n      html2canvasReady: false,\n      captureInterval: null,\n\n      // Auto Calibration Logic\n      isAutoRunning: false,\n      autoStatusMsg: null,\n      autoStatusType: 'info'\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  \n  mounted() {\n    this.loadHtml2Canvas();\n    this.startAutoCapture();\n  },\n\n  beforeUnmount() {\n    this.stopAutoCapture();\n    this.stopAutoCalibration();\n  },\n\n  methods: {\n    sendUpdate(topic, extra = {}) {\n      if (typeof this.send === \"function\") this.send({ topic, payload: { ...extra } });\n    },\n    \n    // --------------------------------------------\n    // AUTO CALIBRATION LOGIC (NEW)\n    // --------------------------------------------\n    startAutoCalibration() {\n        if(this.isAutoRunning) return;\n        \n        this.isAutoRunning = true;\n        this.loopCount = 0;\n        this.autoStatusMsg = \"Starting auto-calibration loop...\";\n        this.autoStatusType = 'info';\n\n        // Start the recursive loop\n        this.runAutoStep();\n    },\n\n    stopAutoCalibration() {\n        this.isAutoRunning = false;\n        // Status message will serve as the final report\n    },\n\n    runAutoStep() {\n        if (!this.isAutoRunning) return;\n\n        // 1. Safety Check: Max Iterations\n        if (this.loopCount > 25) {\n            this.autoStatusMsg = \"Stopped: Max iterations reached without 0% result.\";\n            this.autoStatusType = \"warning\";\n            this.stopAutoCalibration();\n            return;\n        }\n\n        // 2. Success Check: Target Saturation Reached\n        // We use < 1.0 as a safe \"effectively zero\" threshold\n        if (this.hsl.s < 1.0 && this.loopCount > 0) {\n            this.autoStatusMsg = `Success! Calibrated to ${this.hsl.s}% saturation.`;\n            this.autoStatusType = \"success\";\n            this.stopAutoCalibration();\n            return;\n        }\n\n        // 3. Apply Gains\n        // We call the existing method to send data\n        this.applySuggested();\n        \n        // 4. Wait for Camera/Stream Latency\n        // This is crucial. If we loop too fast, we calculate based on the OLD image.\n        // 2500ms is a safe buffer for Node-RED/Camera latency.\n        setTimeout(() => {\n            if(!this.isAutoRunning) return; // Check if user stopped during wait\n            this.runAutoStep(); // Recurse\n        }, 2500); \n    },\n\n    // --------------------------------------------\n    // MANUAL CONTROLS\n    // --------------------------------------------\n    refreshGain() {\n      this.loopCount = 0;\n      this.current = { red: 100, blue: 100 };\n      this.suggested = { red: null, blue: null };\n      this.autoStatusMsg = 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 we don't have suggested values (first run), calculate them based on current + defaults\n      const nextRed = this.suggested.red !== null ? parseInt(this.suggested.red) : this.current.red;\n      const nextBlue = this.suggested.blue !== null ? parseInt(this.suggested.blue) : this.current.blue;\n\n      const p = {\n        action: \"settings\",\n        settings: {\n          white_balance_gain: {\n            red: nextRed,\n            blue: nextBlue,\n          },\n        },\n      };\n      this.sendUpdate(\"imager/image\", p);\n      \n      // Update local state immediately (optimistic UI)\n      this.current = { red: nextRed, blue: nextBlue };\n      this.loopCount++;\n    },\n    \n    // --------------------------------------------\n    // UTILS & CAPTURE\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    startAutoCapture() {\n      if (!this.html2canvasReady || this.captureInterval) return;\n      this.captureInterval = setInterval(() => {\n        this.captureColorAndCalculateGains();\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      const script = document.createElement(\"script\");\n      script.src = \"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    async captureColorAndCalculateGains() {\n      if (!this.html2canvasReady || !window.html2canvas) return;\n\n      const iframe = this.$el.querySelector(\".calibration-iframe\");\n      // Check iframe accessibility (CORS restrictions might apply if not same origin)\n      if (!iframe?.contentDocument) return; \n\n      try {\n        const snapshotCanvas = await window.html2canvas(iframe.contentDocument.body);\n        const ctx = this.$refs.captureCanvas.getContext(\"2d\");\n        const w = this.$refs.captureCanvas.width;\n        const h = this.$refs.captureCanvas.height;\n\n        ctx.drawImage(snapshotCanvas, 0, 0, w, h);\n\n        const regionSize = 80; // Sample area\n        const pixelData = ctx.getImageData((w - regionSize)/2, (h - regionSize)/2, regionSize, regionSize).data;\n\n        let sumR = 0, sumG = 0, sumB = 0, count = 0;\n        for (let i = 0; i < pixelData.length; i += 4) {\n          sumR += pixelData[i]; sumG += pixelData[i + 1]; sumB += pixelData[i + 2]; count++;\n        }\n        \n        const avgR = count ? Math.round(sumR / count) : 0;\n        const avgG = count ? Math.round(sumG / count) : 0;\n        const avgB = count ? Math.round(sumB / count) : 0;\n\n        this.sampledR = avgR; this.sampledG = avgG; this.sampledB = avgB;\n        this.hsl = this.rgbToHsl(avgR, avgG, avgB);\n        \n        // Calculate adjustments relative to Green\n        // Logic: If G > R, we need more Red gain. \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(\"Frame capture error\", 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\n  .calibration-container {\n    position: relative;\n    background: #000;\n  }\n\n  .sampling-overlay {\n    position: absolute;\n    width: 15%;\n    height: 15%;\n    /* Smaller, tighter sampling box */\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 2px dashed rgba(255, 0, 0, 0.7);\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);\n    /* Dim outside area */\n    pointer-events: none;\n    z-index: 10;\n  }\n\n  .gain-table {\n    border: 1px solid #eee;\n  }\n\n  /* Clean up input fields in table */\n  .centered-input>>>input {\n    text-align: center;\n    color: #1976D2;\n    font-weight: bold;\n  }\n\n  .font-mono {\n    font-family: 'Roboto Mono', monospace;\n  }\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 380,
-    "y": 140,
-    "wires": [
-      [
-        "2da968133f63a1fe"
-      ]
-    ]
-  },
-  {
-    "id": "5331fa94d1b90654",
-    "type": "ui-template",
-    "z": "9dfa8db7ce31208f",
-    "g": "3f734d83a7327043",
-    "group": "728c7ed3d63dfcee",
-    "page": "",
-    "ui": "",
-    "name": "Step Bar",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"2\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" color=\"grey\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" class=\"selected-step\" color=\"primary\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" color=\"grey\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" color=\"grey\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1080,
-    "y": 60,
-    "wires": [
-      [
-        "5f823fb3b1c49c65"
-      ]
-    ]
-  },
-  {
-    "id": "5f823fb3b1c49c65",
-    "type": "ui-control",
-    "z": "9dfa8db7ce31208f",
-    "g": "3f734d83a7327043",
-    "name": "",
-    "ui": "e6ae26617c24c3ea",
-    "events": "all",
-    "x": 1280,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "bd3b1d9f854c367c",
-    "type": "ui-event",
-    "z": "9dfa8db7ce31208f",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "bff2be213a3b76b2"
-      ]
-    ]
-  },
-  {
-    "id": "bff2be213a3b76b2",
-    "type": "switch",
-    "z": "9dfa8db7ce31208f",
-    "name": "msg.payload.page.path === \"/calibration_lightness\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/calibration_lightness",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 360,
-    "y": 40,
-    "wires": [
-      [
-        "43220ad00872b995"
-      ]
-    ]
-  },
-  {
-    "id": "43220ad00872b995",
-    "type": "function",
-    "z": "9dfa8db7ce31208f",
-    "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": [
-      [
-        "c9a6d6f19ff18dda"
-      ]
-    ]
-  },
-  {
-    "id": "c9a6d6f19ff18dda",
-    "type": "ui-template",
-    "z": "9dfa8db7ce31208f",
-    "group": "728c7ed3d63dfcee",
-    "page": "",
-    "ui": "",
-    "name": "Calibration - Lightness",
-    "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\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\u207b\u00b9 \u2192 10\u207b\u00b9\u2075) -->\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.calibration_led_intensity !== undefined)\n          this.currentLedValue = Number(p.calibration_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        \"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,
-    "templateScope": "local",
-    "className": "",
-    "x": 400,
-    "y": 140,
-    "wires": [
-      [
-        "b067a2833aee498d"
-      ]
-    ]
-  },
-  {
-    "id": "371de3becc1c4e80",
-    "type": "mqtt out",
-    "z": "9dfa8db7ce31208f",
-    "name": "",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 850,
-    "y": 100,
-    "wires": []
-  },
-  {
-    "id": "b067a2833aee498d",
-    "type": "switch",
-    "z": "9dfa8db7ce31208f",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "light",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 590,
-    "y": 140,
-    "wires": [
-      [
-        "371de3becc1c4e80"
-      ]
-    ]
-  },
-  {
-    "id": "9d60b1bdff1a8058",
-    "type": "ui-template",
-    "z": "e597cdc71d5a9d33",
-    "g": "f2d9c0f9aabc0a63",
-    "group": "c966455a52d121c0",
-    "page": "",
-    "ui": "",
-    "name": "Step Bar",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"3\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" color=\"grey\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" color=\"grey\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" class=\"selected-step\" color=\"primary\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" color=\"grey\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1080,
-    "y": 60,
-    "wires": [
-      [
-        "48d61ea72d468010"
-      ]
-    ]
-  },
-  {
-    "id": "48d61ea72d468010",
-    "type": "ui-control",
-    "z": "e597cdc71d5a9d33",
-    "g": "f2d9c0f9aabc0a63",
-    "name": "",
-    "ui": "e6ae26617c24c3ea",
-    "events": "all",
-    "x": 1280,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "f4884f6f1ea5cdb5",
-    "type": "ui-template",
-    "z": "e597cdc71d5a9d33",
-    "group": "c966455a52d121c0",
-    "page": "",
-    "ui": "",
-    "name": "Calibration - Pixel Size",
-    "order": 2,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "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 \ud83d\udccf 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 (\u00b5m).\n            </p>\n\n            <v-text-field\n              v-model.number=\"knownDistance\"\n              label=\"Known distance (\u00b5m)\"\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 (\u00b5m/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 \u00d7 scale_factor)\n                      </div>\n\n                      <div class=\"mt-2\">\n                        = {{ knownDistance || '\u2014' }} /\n                        ({{ pixelDistanceDisplay || '\u2014' }} \u00d7\n                        {{ scaleFactor ? scaleFactor.toFixed(3) : '\u2014' }}) =\n                        <strong>{{ pixelSizeDisplay || '\u2014' }} \u00b5m/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 || '\u2014' }} / {{ streamWidth || '\u2014' }}<br />\n                        = {{ scaleFactor ? scaleFactor.toFixed(3) : '\u2014' }}\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, // \ud83d\udd39 Nouveau : \u00e9tat 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)} \u00b5m/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,
-    "templateScope": "local",
-    "className": "",
-    "x": 400,
-    "y": 140,
-    "wires": [
-      [
-        "0327248fda7c3f7e"
-      ]
-    ]
-  },
-  {
-    "id": "472f4ba991a77e43",
-    "type": "ui-event",
-    "z": "e597cdc71d5a9d33",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "60b4a20faf7a015e"
-      ]
-    ]
-  },
-  {
-    "id": "60b4a20faf7a015e",
-    "type": "switch",
-    "z": "e597cdc71d5a9d33",
-    "name": "msg.payload.page.path === \"/calibration_pixel_size\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/calibration_pixel_size",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 360,
-    "y": 40,
-    "wires": [
-      [
-        "3e2441107949295a"
-      ]
-    ]
-  },
-  {
-    "id": "3e2441107949295a",
-    "type": "function",
-    "z": "e597cdc71d5a9d33",
-    "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": [
-      [
-        "f4884f6f1ea5cdb5"
-      ]
-    ]
-  },
-  {
-    "id": "0327248fda7c3f7e",
-    "type": "switch",
-    "z": "e597cdc71d5a9d33",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "calibration/save",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 590,
-    "y": 140,
-    "wires": [
-      [
-        "133c27ef75317205"
-      ]
-    ]
-  },
-  {
-    "id": "133c27ef75317205",
-    "type": "function",
-    "z": "e597cdc71d5a9d33",
-    "name": "set calibration_pixel_size",
-    "func": "if (msg.topic) {\n    global.set(\"process_pixel\", msg.payload.calibration_pixel_size);\n    global.set(\"process_pixel_size\", msg.payload.calibration_pixel_size);\n    global.set(\"calibration_pixel_size\", msg.payload.calibration_pixel_size);\n    global.set(\"calibration_scale_factor\", msg.payload.calibration_scale_factor);\n    global.set(\"calibration_sensor_width\", msg.payload.calibration_sensor_width);\n    global.set(\"calibration_stream_width\", msg.payload.calibration_stream_width);\n    global.set(\"calibration_known_distance\", msg.payload.calibration_known_distance);\n    global.set(\"calibration_measured_distance\", msg.payload.calibration_measured_distance);\n    global.set(\"calibration_markerA_x\", msg.payload.calibration_markerA_x);\n    global.set(\"calibration_markerA_y\", msg.payload.calibration_markerA_y);\n    global.set(\"calibration_markerB_x\", msg.payload.calibration_markerB_x);\n    global.set(\"calibration_markerB_y\", msg.payload.calibration_markerB_y);\n}\nreturn msg;",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 1010,
-    "y": 180,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "07e989594965ab7d",
-    "type": "ui-template",
-    "z": "b8e6b9dc69aa3f56",
-    "g": "a75dd1f78f8f991a",
-    "group": "6039d653304537af",
-    "page": "",
-    "ui": "",
-    "name": "Step Bar",
-    "order": 1,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<template>\n  <div>\n    <v-stepper class=\"my-stepper\" model-value=\"4\" non-linear>\n      <v-stepper-header>\n        <v-stepper-item value=\"1\" editable @click=\"stepClicked(1)\" color=\"grey\">Saturation Level</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"2\" editable @click=\"stepClicked(2)\" color=\"grey\">Lightness</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"3\" editable @click=\"stepClicked(3)\" color=\"grey\">Pixel size</v-stepper-item>\n        <v-divider></v-divider>\n        <v-stepper-item value=\"4\" editable @click=\"stepClicked(4)\" class=\"selected-step\" color=\"primary\">Pump</v-stepper-item>\n      </v-stepper-header>\n    </v-stepper>\n  </div>\n</template>\n\n<script>\n  export default {\n    name: 'StepperComponent',\n    methods: {\n      stepClicked(step) {\n        const stepMapping = {\n          1: { page: 'Calibration - Saturation Level' },\n          2: { page: 'Calibration - Lightness' },\n          3: { page: 'Calibration - Pixel size' },\n          4: { page: 'Calibration - Pump' }\n        };\n\n        const msgPayload = stepMapping[step] || {};\n        \n        this.send({ payload: msgPayload });\n      }\n    }\n  }\n</script>\n",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 1080,
-    "y": 60,
-    "wires": [
-      [
-        "5e94860de36e0a1c"
-      ]
-    ]
-  },
-  {
-    "id": "5e94860de36e0a1c",
-    "type": "ui-control",
-    "z": "b8e6b9dc69aa3f56",
-    "g": "a75dd1f78f8f991a",
-    "name": "",
-    "ui": "e6ae26617c24c3ea",
-    "events": "all",
-    "x": 1280,
-    "y": 60,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "3430afb16e1eccf0",
-    "type": "ui-event",
-    "z": "b8e6b9dc69aa3f56",
-    "ui": "e6ae26617c24c3ea",
-    "name": "UI Event",
-    "x": 80,
-    "y": 40,
-    "wires": [
-      [
-        "4d3f1761bfaea85b"
-      ]
-    ]
-  },
-  {
-    "id": "4d3f1761bfaea85b",
-    "type": "switch",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "msg.payload.page.path === \"/calibration_pump\"",
-    "property": "payload.page.path",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "/calibration_pump",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 1,
-    "x": 350,
-    "y": 40,
-    "wires": [
-      [
-        "d578e28343d8286b"
-      ]
-    ]
-  },
-  {
-    "id": "d578e28343d8286b",
-    "type": "function",
-    "z": "b8e6b9dc69aa3f56",
-    "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": [
-      [
-        "1c11c424e6c0c405",
-        "33f590e854486a56"
-      ]
-    ]
-  },
-  {
-    "id": "33f590e854486a56",
-    "type": "ui-template",
-    "z": "b8e6b9dc69aa3f56",
-    "group": "6039d653304537af",
-    "page": "",
-    "ui": "",
-    "name": "Calibration - Pump",
-    "order": 2,
-    "width": "0",
-    "height": "0",
-    "head": "",
-    "format": "<template>\n  <v-container class=\"py-6 d-flex justify-center\">\n    <v-card width=\"450\" class=\"pa-4\" elevation=\"2\">\n      <v-card-title class=\"text-primary font-weight-bold\">\n        Pump Calibration\n      </v-card-title>\n      \n      <v-divider class=\"mb-4\"></v-divider>\n\n      <div class=\"mb-6\">\n        <div class=\"text-subtitle-1 font-weight-bold mb-1\">1. Place a scale</div>\n        <div class=\"text-body-2 text-grey-darken-1\">Place a scale \u2696\ufe0f beneath the waste container.</div>\n      </div>\n\n      <v-divider class=\"mb-6\"></v-divider>\n\n      <div class=\"mb-6\">\n        <div class=\"text-subtitle-1 font-weight-bold mb-3\">2. Run a liquid transfer</div>\n        \n        <v-text-field\n          v-model.number=\"targetVolume\"\n          label=\"Target Volume (mL)\"\n          type=\"number\"\n          variant=\"outlined\"\n          density=\"compact\"\n          suffix=\"mL\"\n          class=\"mb-3\"\n        ></v-text-field>\n\n        <div class=\"d-flex gap-2\">\n          <v-btn\n            color=\"error\"\n            variant=\"tonal\"\n            class=\"flex-grow-1 me-2\"\n            @click=\"stopPump\"\n            :disabled=\"!pumpRunning\"\n          >Stop</v-btn>\n          \n          <v-btn\n            color=\"primary\"\n            class=\"flex-grow-1\"\n            @click=\"runTransferTest\"\n            :loading=\"pumpRunning\"\n          >Run Test</v-btn>\n        </div>\n\n        <v-alert\n          v-if=\"pumpRunning || elapsedTime > 0\"\n          :color=\"pumpRunning ? 'info' : 'success'\"\n          variant=\"tonal\"\n          density=\"compact\"\n          class=\"mt-4 text-center\"\n        >\n          <span class=\"text-h6 font-weight-black\">{{ formatTime(elapsedTime) }}</span>\n          <div class=\"text-caption\" v-if=\"!pumpRunning\">Test completed</div>\n        </v-alert>\n      </div>\n\n      <v-divider class=\"mb-6\"></v-divider>\n\n      <div class=\"mb-6\">\n        <div class=\"text-subtitle-1 font-weight-bold mb-3\">3. Measure the weight</div>\n        \n        <v-text-field\n          v-model.number=\"measuredVolume\"\n          label=\"Measured Volume\"\n          type=\"number\"\n          variant=\"outlined\"\n          density=\"compact\"\n          suffix=\"mL\"\n          :disabled=\"!pumpDone\"\n          :messages=\"pumpDone && measuredVolume > 0 ? `Delta: ${errorVolume.toFixed(2)} mL` : ''\"\n        ></v-text-field>\n        \n        <div v-if=\"pumpDone && elapsedTime > 0\" class=\"text-caption text-blue-darken-2 mt-1\">\n          \u23f1 Actual speed: <b>{{ actualFlowRate }} mL/min</b>\n        </div>\n      </div>\n\n      <v-divider class=\"mb-6\"></v-divider>\n\n      <div>\n        <div class=\"text-subtitle-1 font-weight-bold mb-3\">4. Save calibration</div>\n        \n        <v-text-field\n          v-model.number=\"currentSteps\"\n          label=\"Current steps per 1 mL\"\n          variant=\"underlined\"\n          density=\"compact\"\n          readonly\n          class=\"mb-2\"\n          prepend-icon=\"mdi-history\"\n        ></v-text-field>\n\n        <v-text-field\n          v-model.number=\"suggestedSteps\"\n          label=\"Suggested steps per 1 mL\"\n          variant=\"solo-filled\"\n          density=\"comfortable\"\n          readonly\n          bg-color=\"blue-lighten-5\"\n          color=\"primary\"\n          class=\"mb-4 font-weight-bold\"\n        >\n          <template #append-inner>\n            <v-icon color=\"primary\" @click=\"dialog = true\">mdi-information-outline</v-icon>\n          </template>\n        </v-text-field>\n\n        <v-btn\n          color=\"primary\"\n          block\n          size=\"large\"\n          @click=\"validateCalibration\"\n          :disabled=\"!pumpDone || measuredVolume <= 0\"\n        >\n          Validate & Save\n        </v-btn>\n      </div>\n\n      <v-dialog v-model=\"dialog\" max-width=\"340\">\n        <v-card>\n          <v-card-title class=\"text-body-1\">Calibration Math</v-card-title>\n          <v-card-text class=\"text-caption\">\n            Formula: (Target / Measured) \u00d7 Current<br><br>\n            ({{ targetVolume }} / {{ measuredVolume }}) \u00d7 {{ currentSteps }} = <b>{{ suggestedSteps }}</b>\n          </v-card-text>\n          <v-card-actions>\n            <v-spacer></v-spacer>\n            <v-btn color=\"primary\" variant=\"text\" @click=\"dialog = false\">Close</v-btn>\n          </v-card-actions>\n        </v-card>\n      </v-dialog>\n    </v-card>\n  </v-container>\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      targetVolume: 10,\n      measuredVolume: 0,\n      currentSteps: 507,\n      pumpRunning: false,\n      pumpDone: false,\n      dialog: false,\n      startTime: null,\n      elapsedTime: 0,\n      timerInterval: null,\n    };\n  },\n  computed: {\n    errorVolume() {\n      return this.targetVolume - this.measuredVolume;\n    },\n    suggestedSteps() {\n      if (!this.measuredVolume || this.measuredVolume <= 0) return this.currentSteps;\n      return Math.round((this.targetVolume / this.measuredVolume) * this.currentSteps);\n    },\n    actualFlowRate() {\n      if (this.elapsedTime === 0) return 0;\n      const minutes = this.elapsedTime / 60000;\n      return (this.targetVolume / minutes).toFixed(2);\n    }\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        if (!newMsg) return;\n        const payload = newMsg.payload || {};\n        \n        // Mise \u00e0 jour de S quand Node-RED envoie la valeur actuelle\n        if (payload.calibration_nb_step !== undefined) {\n          this.currentSteps = payload.calibration_nb_step;\n        }\n        \n        if (newMsg.topic === \"status/pump\" && payload.status === \"Done\") {\n          this.stopTimer();\n          this.pumpRunning = false;\n          this.pumpDone = true;\n        }\n      },\n      immediate: true,\n      deep: true,\n    },\n  },\n  methods: {\n    formatTime(ms) {\n      const seconds = Math.floor(ms / 1000);\n      const m = Math.floor(seconds / 60);\n      const s = seconds % 60;\n      return `${m}:${s.toString().padStart(2, '0')}`;\n    },\n    startTimer() {\n      this.elapsedTime = 0;\n      this.startTime = Date.now();\n      this.timerInterval = setInterval(() => {\n        this.elapsedTime = Date.now() - this.startTime;\n      }, 100);\n    },\n    stopTimer() {\n      clearInterval(this.timerInterval);\n    },\n    runTransferTest() {\n      this.pumpDone = false;\n      this.measuredVolume = 0;\n      this.pumpRunning = true;\n      this.startTimer();\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"actuator/pump\",\n          payload: { action: \"move\", direction: \"FORWARD\", volume: this.targetVolume, flowrate: 10 }\n        });\n      }\n    },\n    stopPump() {\n      if (typeof this.send === \"function\") {\n        this.send({ topic: \"actuator/pump\", payload: { action: \"stop\" } });\n      }\n      this.stopTimer();\n      this.pumpRunning = false;\n    },\n    validateCalibration() {\n      if (typeof this.send === \"function\") {\n        this.send({\n          topic: \"calibration/save\",\n          payload: { calibration_nb_step: this.suggestedSteps }\n        });\n      }\n    }\n  },\n  beforeUnmount() {\n    this.stopTimer();\n  }\n};\n</script>\n\n<style scoped>\n/* Suppression des styles custom pour laisser Vuetify g\u00e9rer le layout propre */\n.gap-2 {\n  gap: 8px;\n}\n</style>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resendOnRefresh": true,
-    "templateScope": "local",
-    "className": "",
-    "x": 390,
-    "y": 140,
-    "wires": [
-      [
-        "bc5e30bc7ed09916"
-      ]
-    ]
-  },
-  {
-    "id": "27489e08148cc627",
-    "type": "mqtt out",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "",
-    "topic": "",
-    "qos": "",
-    "retain": "",
-    "broker": "8dc3722c.06efa8",
-    "x": 850,
-    "y": 100,
-    "wires": []
-  },
-  {
-    "id": "bc5e30bc7ed09916",
-    "type": "switch",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "",
-    "property": "topic",
-    "propertyType": "msg",
-    "rules": [
-      {
-        "t": "eq",
-        "v": "actuator/pump",
-        "vt": "str"
-      },
-      {
-        "t": "eq",
-        "v": "calibration/save",
-        "vt": "str"
-      }
-    ],
-    "checkall": "true",
-    "repair": false,
-    "outputs": 2,
-    "x": 590,
-    "y": 140,
-    "wires": [
-      [
-        "27489e08148cc627"
-      ],
-      [
-        "6f3a85a2de771d90"
-      ]
-    ]
-  },
-  {
-    "id": "495701d383cde0e8",
-    "type": "mqtt in",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "",
-    "topic": "status/pump",
-    "qos": "0",
-    "datatype": "json",
-    "broker": "8dc3722c.06efa8",
-    "nl": false,
-    "rap": false,
-    "inputs": 0,
-    "x": 90,
-    "y": 340,
-    "wires": [
-      [
-        "33f590e854486a56"
-      ]
-    ]
-  },
-  {
-    "id": "6f3a85a2de771d90",
-    "type": "function",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "set calibration_pump",
-    "func": "if (msg.topic) {\n    global.set(\"calibration_nb_step\", msg.payload.calibration_nb_step);\n}\nreturn msg;\n",
-    "outputs": 1,
-    "timeout": "",
-    "noerr": 0,
-    "initialize": "",
-    "finalize": "",
-    "libs": [],
-    "x": 860,
-    "y": 200,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "1c11c424e6c0c405",
-    "type": "debug",
-    "z": "b8e6b9dc69aa3f56",
-    "name": "debug 4",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 360,
-    "y": 280,
-    "wires": []
-  },
-  {
-    "id": "aa4f580d98195efa",
-    "type": "ecotaxa",
-    "z": "f8d7305edb3dce2c",
-    "name": "Import to Ecotaxa Project",
-    "api_url": "https://ecotaxa.obs-vlfr.fr/api/",
-    "project_id": "9366",
-    "x": 830,
-    "y": 300,
-    "wires": [
-      [
-        "3f2db75b735b1cea"
-      ]
-    ]
-  },
-  {
-    "id": "56563df41429a63b",
-    "type": "inject",
-    "z": "f8d7305edb3dce2c",
-    "name": "Lancer import",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": "0",
-    "topic": "",
-    "x": 310,
-    "y": 300,
-    "wires": [
-      [
-        "5deb75226b490f72"
-      ]
-    ]
-  },
-  {
-    "id": "3f2db75b735b1cea",
-    "type": "debug",
-    "z": "f8d7305edb3dce2c",
-    "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": "5deb75226b490f72",
-    "type": "function",
-    "z": "f8d7305edb3dce2c",
-    "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": [
-      [
-        "aa4f580d98195efa",
-        "8f63d2d9ba29a929"
-      ]
-    ]
-  },
-  {
-    "id": "8f63d2d9ba29a929",
-    "type": "debug",
-    "z": "f8d7305edb3dce2c",
-    "name": "debug 8",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 580,
-    "y": 560,
-    "wires": []
-  },
-  {
-    "id": "655adc853a6956f6",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "e25bae849bace7c6",
-    "name": "inject",
-    "props": [
-      {
-        "p": "payload.timezone",
-        "v": "Europe/Paris",
-        "vt": "str"
-      }
-    ],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 110,
-    "y": 280,
-    "wires": [
-      [
-        "c63068f9aa421f2c"
-      ]
-    ]
-  },
-  {
-    "id": "fec9c2aca5437f85",
-    "type": "set timezone",
-    "z": "e6d820ba0f4f184e",
-    "g": "e25bae849bace7c6",
-    "name": "",
-    "x": 340,
-    "y": 380,
-    "wires": [
-      [
-        "5f77688682c97241"
-      ]
-    ]
-  },
-  {
-    "id": "c63068f9aa421f2c",
-    "type": "list timezones",
-    "z": "e6d820ba0f4f184e",
-    "g": "e25bae849bace7c6",
-    "name": "",
-    "x": 140,
-    "y": 360,
-    "wires": [
-      [
-        "fec9c2aca5437f85"
-      ]
-    ]
-  },
-  {
-    "id": "5f77688682c97241",
-    "type": "get timezone",
-    "z": "e6d820ba0f4f184e",
-    "g": "e25bae849bace7c6",
-    "name": "",
-    "x": 540,
-    "y": 400,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "9975b01cde700ae1",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "14cb9ab4b149e2b5",
-    "name": "inject",
-    "props": [
-      {
-        "p": "payload.country",
-        "v": "FR",
-        "vt": "str"
-      }
-    ],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 110,
-    "y": 60,
-    "wires": [
-      [
-        "b72d81f258ab6ed1"
-      ]
-    ]
-  },
-  {
-    "id": "b72d81f258ab6ed1",
-    "type": "list countries",
-    "z": "e6d820ba0f4f184e",
-    "g": "14cb9ab4b149e2b5",
-    "name": "",
-    "x": 140,
-    "y": 140,
-    "wires": [
-      [
-        "8773c66a58ecab21"
-      ]
-    ]
-  },
-  {
-    "id": "8773c66a58ecab21",
-    "type": "set country",
-    "z": "e6d820ba0f4f184e",
-    "g": "14cb9ab4b149e2b5",
-    "name": "",
-    "x": 330,
-    "y": 160,
-    "wires": [
-      [
-        "fe5a0dc78ca52e26"
-      ]
-    ]
-  },
-  {
-    "id": "fe5a0dc78ca52e26",
-    "type": "get country",
-    "z": "e6d820ba0f4f184e",
-    "g": "14cb9ab4b149e2b5",
-    "name": "",
-    "x": 510,
-    "y": 180,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "ec2b56583e1703f0",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "e5f0bc40b541e13f",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 110,
-    "y": 700,
-    "wires": [
-      [
-        "078727b344f7e34a"
-      ]
-    ]
-  },
-  {
-    "id": "078727b344f7e34a",
-    "type": "get hostname",
-    "z": "e6d820ba0f4f184e",
-    "g": "e5f0bc40b541e13f",
-    "name": "",
-    "x": 140,
-    "y": 760,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "355d4990f8958d65",
-    "type": "get name",
-    "z": "e6d820ba0f4f184e",
-    "g": "329d175baf2183b1",
-    "name": "",
-    "x": 130,
-    "y": 920,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "3058d95dae6eea1f",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "329d175baf2183b1",
-    "name": "",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 110,
-    "y": 860,
-    "wires": [
-      [
-        "355d4990f8958d65"
-      ]
-    ]
-  },
-  {
-    "id": "528f6ce911af8982",
-    "type": "storage info",
-    "z": "e6d820ba0f4f184e",
-    "g": "62930a749d014d90",
-    "name": "",
-    "x": 530,
-    "y": 920,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "baac40d3e7a8fcb2",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "62930a749d014d90",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 510,
-    "y": 860,
-    "wires": [
-      [
-        "528f6ce911af8982"
-      ]
-    ]
-  },
-  {
-    "id": "4f9158d3ed8eadd3",
-    "type": "list hardware versions",
-    "z": "e6d820ba0f4f184e",
-    "g": "034aca701dd2a256",
-    "name": "",
-    "x": 170,
-    "y": 560,
-    "wires": [
-      [
-        "0820acd0d3b628d4"
-      ]
-    ]
-  },
-  {
-    "id": "287f7112bac18c51",
-    "type": "get hardware version",
-    "z": "e6d820ba0f4f184e",
-    "g": "034aca701dd2a256",
-    "name": "",
-    "x": 660,
-    "y": 600,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "0820acd0d3b628d4",
-    "type": "set hardware version",
-    "z": "e6d820ba0f4f184e",
-    "g": "034aca701dd2a256",
-    "name": "",
-    "x": 420,
-    "y": 580,
-    "wires": [
-      [
-        "287f7112bac18c51"
-      ]
-    ]
-  },
-  {
-    "id": "327e3da2b7e9e50b",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "034aca701dd2a256",
-    "name": "inject",
-    "props": [
-      {
-        "p": "payload.hardware_version",
-        "v": "v3.0",
-        "vt": "str"
-      }
-    ],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 110,
-    "y": 500,
-    "wires": [
-      [
-        "4f9158d3ed8eadd3"
-      ]
-    ]
-  },
-  {
-    "id": "80b749ee1cbdf98e",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "14cb9ab4b149e2b5",
-    "name": "country",
-    "info": "",
-    "x": 690,
-    "y": 60,
-    "wires": []
-  },
-  {
-    "id": "e49db28bb805280e",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "e25bae849bace7c6",
-    "name": "timezone",
-    "info": "",
-    "x": 740,
-    "y": 280,
-    "wires": []
-  },
-  {
-    "id": "c80721a372673baf",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "034aca701dd2a256",
-    "name": "hardware version",
-    "info": "",
-    "x": 840,
-    "y": 500,
-    "wires": []
-  },
-  {
-    "id": "3e333d969e41b545",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "e5f0bc40b541e13f",
-    "name": "hostname",
-    "info": "",
-    "x": 300,
-    "y": 700,
-    "wires": []
-  },
-  {
-    "id": "a6c33b2025837058",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "329d175baf2183b1",
-    "name": "name",
-    "info": "",
-    "x": 310,
-    "y": 860,
-    "wires": []
-  },
-  {
-    "id": "660f8462d674baea",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "62930a749d014d90",
-    "name": "storage",
-    "info": "",
-    "x": 690,
-    "y": 860,
-    "wires": []
-  },
-  {
-    "id": "f941634f9acf1e65",
-    "type": "poweroff",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "",
-    "x": 1180,
-    "y": 140,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "8d538b74ac03964b",
-    "type": "reboot",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "",
-    "x": 1180,
-    "y": 200,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "3cb007c279dceed0",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 1030,
-    "y": 140,
-    "wires": [
-      [
-        "f941634f9acf1e65"
-      ]
-    ]
-  },
-  {
-    "id": "05d4bd56d2b42da1",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 1030,
-    "y": 200,
-    "wires": [
-      [
-        "8d538b74ac03964b"
-      ]
-    ]
-  },
-  {
-    "id": "8972c5887d7de2dc",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "system \u26a0\ufe0f",
-    "info": "",
-    "x": 1200,
-    "y": 80,
-    "wires": []
-  },
-  {
-    "id": "13bdc8d028ab9063",
-    "type": "wake up",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "",
-    "minutes": "2",
-    "x": 1180,
-    "y": 260,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "8283323ac1aca81a",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "039d9046b10d6840",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 1030,
-    "y": 260,
-    "wires": [
-      [
-        "13bdc8d028ab9063"
-      ]
-    ]
-  },
-  {
-    "id": "d25760aa70fd1524",
-    "type": "list acquisitions",
-    "z": "e6d820ba0f4f184e",
-    "g": "0a51b211ebbb9873",
-    "name": "",
-    "x": 1120,
-    "y": 600,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "d5950445bf78c0c6",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "0a51b211ebbb9873",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 1090,
-    "y": 540,
-    "wires": [
-      [
-        "d25760aa70fd1524"
-      ]
-    ]
-  },
-  {
-    "id": "36a787c8463c3fab",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "0a51b211ebbb9873",
-    "name": "acquisitions",
-    "info": "",
-    "x": 1310,
-    "y": 540,
-    "wires": []
-  },
-  {
-    "id": "9203a825fc1c63e4",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "ef4667eb73b18227",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 1090,
-    "y": 700,
-    "wires": [
-      [
-        "9d2be08e52de0394"
-      ]
-    ]
-  },
-  {
-    "id": "110801015a0ec067",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "ef4667eb73b18227",
-    "name": "segmentations",
-    "info": "",
-    "x": 1300,
-    "y": 700,
-    "wires": []
-  },
-  {
-    "id": "9d2be08e52de0394",
-    "type": "list segmentations",
-    "z": "e6d820ba0f4f184e",
-    "g": "ef4667eb73b18227",
-    "name": "",
-    "x": 1130,
-    "y": 760,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "3973105e8c349a38",
-    "type": "get machine info",
-    "z": "e6d820ba0f4f184e",
-    "g": "693296edc15d81c2",
-    "name": "",
-    "x": 150,
-    "y": 1080,
-    "wires": [
-      [
-        "d96066c662742119"
-      ]
-    ]
-  },
-  {
-    "id": "b8a021de6b15a728",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "693296edc15d81c2",
-    "name": "inject",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 110,
-    "y": 1020,
-    "wires": [
-      [
-        "3973105e8c349a38"
-      ]
-    ]
-  },
-  {
-    "id": "e2c7db0aef7f64ef",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "693296edc15d81c2",
-    "name": "machine info",
-    "info": "",
-    "x": 290,
-    "y": 1020,
-    "wires": []
-  },
-  {
-    "id": "47dce78fa2e5973b",
-    "type": "inject",
-    "z": "e6d820ba0f4f184e",
-    "g": "68e954becfafbf7b",
-    "name": "",
-    "props": [],
-    "repeat": "",
-    "crontab": "",
-    "once": false,
-    "onceDelay": 0.1,
-    "topic": "",
-    "x": 1090,
-    "y": 860,
-    "wires": [
-      [
-        "9f0db647f3595ef9"
-      ]
-    ]
-  },
-  {
-    "id": "9f0db647f3595ef9",
-    "type": "capture",
-    "z": "e6d820ba0f4f184e",
-    "g": "68e954becfafbf7b",
-    "name": "",
-    "x": 1100,
-    "y": 920,
-    "wires": [
-      []
-    ]
-  },
-  {
-    "id": "e14a82906a749dc5",
-    "type": "comment",
-    "z": "e6d820ba0f4f184e",
-    "g": "68e954becfafbf7b",
-    "name": "camera",
-    "info": "",
-    "x": 1330,
-    "y": 860,
-    "wires": []
-  },
-  {
-    "id": "d96066c662742119",
-    "type": "debug",
-    "z": "e6d820ba0f4f184e",
-    "g": "693296edc15d81c2",
-    "name": "debug 10",
-    "active": true,
-    "tosidebar": true,
-    "console": false,
-    "tostatus": false,
-    "complete": "false",
-    "statusVal": "",
-    "statusType": "auto",
-    "x": 470,
-    "y": 1100,
-    "wires": []
-  },
-  {
-    "id": "df6aac39f636d1d9",
-    "type": "ui-template",
-    "z": "f90406ba2da5932f",
-    "group": "",
-    "page": "",
-    "ui": "e6ae26617c24c3ea",
-    "name": "Favicon",
-    "order": 0,
-    "width": 0,
-    "height": 0,
-    "head": "",
-    "format": "<script>\n(function() {\n    var link = document.querySelector(\"link[rel*='icon']\") || document.createElement(\"link\");\n    link.type = \"image/x-icon\";\n    link.rel = \"shortcut icon\";\n    link.href = \"/favicon.ico\";\n    document.getElementsByTagName(\"head\")[0].appendChild(link);\n})();\n</script>",
-    "storeOutMessages": true,
-    "passthru": true,
-    "resend": true,
-    "templateScope": "widget:ui",
-    "className": "",
-    "x": 200,
-    "y": 200,
-    "wires": [
-      []
-    ]
-  }
-]
\ No newline at end of file
+]