From 30733a1dad57c9522a13f533c540f3391d143d71 Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Wed, 18 Mar 2026 21:47:54 +0000
Subject: [PATCH 1/7] fix: metadata IDs, save feedback, acquisition info alert,
 mag labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Acq_ID supports leading zeros (text input + smart increment) (#903)
- Sample_ID as string + save confirmation snackbar (#889-893)
- Show project/sample/operator/gear in acquisition page (#894)
- Add flowcell size (µm) to magnification button labels (#901)
---
 flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flows.json b/flows.json
index 4c696ba..692de4c 100644
--- a/flows.json
+++ b/flows.json
@@ -3174,7 +3174,7 @@
         "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.number=\"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</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n  data() {\n    return {\n      sample_project: \"\",\n      sample_id: \"\",\n      sample_operator: \"\",\n      sample_gear: null,\n      \n      hintDialog: false,\n      hintTitle: \"\",\n      hintText: \"\",\n      topic: \"sample_project_meta\", \n    };\n  },\n  watch: {\n    msg: {\n      handler(newMsg) {\n        const p = newMsg?.payload || {};\n\n        // CHECK IF VALUE CHANGED before assigning to avoid overwriting user input loop\n        if (p.sample_project !== undefined && p.sample_project !== this.sample_project) {\n           this.sample_project = p.sample_project;\n        }\n        \n        if (p.sample_id !== undefined && 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\n      this.send({\n        topic: this.topic,\n        payload: {\n          sample_project: this.sample_project || \"\",\n          sample_id: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>",
+        "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,
@@ -3686,7 +3686,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n\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.number=\"acq_id\" type=\"number\" 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</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</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</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: null,\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        \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 next = String(Number(this.acq_id || 0) + 1).padStart(1, \"0\");\n      this.acq_id = next;\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      }\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>",
+        "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      }\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,

From 106d8a9372ae3b777da61366e6629226d58b2b97 Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Wed, 18 Mar 2026 21:48:07 +0000
Subject: [PATCH 2/7] fix: unique EcoTaxa naming and path sanitization

- Compose fully-qualified project_sample_acq IDs in update_config (#882)
- Space-to-underscore sanitization in IDs
- Gallery + Explorer URL path sanitization for legacy TSVs
---
 flows.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/flows.json b/flows.json
index 692de4c..88c990d 100644
--- a/flows.json
+++ b/flows.json
@@ -3844,7 +3844,7 @@
         "type": "function",
         "z": "71ede8b7dd88d90e",
         "name": "update_config",
-        "func": "\n\nconst 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\nmsg.topic = \"imager/image\";\n\nmsg.payload = {\n    action: \"update_config\",\n    config: config\n};\n\nreturn msg;",
+        "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,
@@ -5083,7 +5083,7 @@
         "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    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\", \"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: `/ps/node-red-v2/my-images/${val(row,\"object_date\")}/${val(row,\"sample_id\")}/${val(row,\"acq_id\")}/${val(row,\"img_file_name\")}`,\n        sequence_index: seq++\n    };\n\n    // Parse numeric keys\n    explorerKeys.forEach(k => {\n        let v = parseFloat(val(row, k));\n        item[k] = isNaN(v) ? 0 : v;\n    });\n\n    // Custom calc for greenness (example)\n    const hue = item.object_MeanHue || 0;\n    const dist = Math.abs(hue - 80);\n    item.custom_greenness = Math.max(0, 100 - dist);\n\n    data.push(item);\n}\n\nmsg.payload = {\n    meta,\n    keys: explorerKeys,\n    data\n};\n\nreturn msg;",
+        "func": "// Explorer Function Node\n// TSV → {meta, keys, data: [{id, url, ...keys}]}\n\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) return null;\n\n// 1. Parse Headers\nconst headers = lines[0].split(\"\\t\");\nconst val = (row, col) => {\n    const i = headers.indexOf(col);\n    return i >= 0 ? row[i] : null;\n};\n\n// 2. Extract Meta from first valid data row\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    // Skip rows starting with '[' (metadata comments)\n    if (!lines[i].trim().startsWith(\"[\")) {\n        firstRow = lines[i].split(\"\\t\");\n        break;\n    }\n}\n\n// Default meta\nconst meta = {\n    sample_id: \"\",\n    project: \"\",\n    acq_id: \"\",\n    resolution: 1.0 // Default fallback\n};\n\nif (firstRow) {\n    meta.sample_id = val(firstRow, \"sample_id\") || \"\";\n    meta.project = val(firstRow, \"sample_project\") || \"\";\n    meta.acq_id = val(firstRow, \"acq_id\") || \"\";\n    \n    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\", \"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: `/ps/node-red-v2/my-images/${(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,
@@ -5158,7 +5158,7 @@
         "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    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\", \"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')}/${get(row, 'sample_id')}/${get(row, 'acq_id')}/${get(row, 'img_file_name')}`\n    };\n\n    // Parse numeric values\n    usefulKeys.forEach(k => {\n        let v = parseFloat(get(row, k));\n        item[k] = isNaN(v) ? 0 : v;\n    });\n\n    data.push(item);\n}\n\nmsg.payload = {\n    data,\n    keys: usefulKeys,\n    meta\n};\n\nreturn msg;",
+        "func": "// GALLERY Function Node\n// TSV → { data: [], meta: { resolution: ... }, keys: ... }\n\n// 1. Handle Clear Signals\nif (msg.clear === true || (msg.payload && msg.payload.clear === true)) {\n    msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n    return msg;\n}\n\n// 2. Validate Payload\nif (!msg.payload) return null;\nconst lines = msg.payload.toString().trim().split(/\\r?\\n/);\nif (lines.length < 2) {\n    msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n    return msg;\n}\n\n// 3. Parse Headers\nconst headers = lines[0].split('\\t');\nconst get = (row, key) => {\n    const idx = headers.indexOf(key);\n    return idx >= 0 ? row[idx] : null;\n};\n\n// 4. Extract Meta (Resolution is key here)\nlet firstRow = null;\nfor (let i = 1; i < lines.length; i++) {\n    const L = lines[i].trim();\n    if (!L.startsWith('[') && L !== '') {\n        firstRow = lines[i].split('\\t');\n        break;\n    }\n}\n\nconst meta = {\n    sample_id: 'N/A',\n    project: 'N/A',\n    acq_id: 'N/A',\n    resolution: 1.0 // Default fallback\n};\n\nif (firstRow) {\n    meta.sample_id = get(firstRow, 'sample_id') || \"\";\n    meta.project   = get(firstRow, 'sample_project') || \"\";\n    meta.acq_id    = get(firstRow, 'acq_id') || \"\";\n\n    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\", \"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,

From 5336f068069b41688b4525c110315c7d17a06057 Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Wed, 18 Mar 2026 21:48:18 +0000
Subject: [PATCH 3/7] fix: add confirmation dialog before deleting acquisitions
 (#904)

- Replace direct deleteItem with confirmDelete + dialog
- Show acquisition and sample ID in confirmation prompt
- Warning that deletion cannot be undone
---
 flows.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/flows.json b/flows.json
index 88c990d..5ef8e8b 100644
--- a/flows.json
+++ b/flows.json
@@ -4333,7 +4333,7 @@
         "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=\"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      \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    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      } 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>",
+        "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,

From 86049e1cb3c09ba093d72ade17d06c05c03816ba Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Wed, 18 Mar 2026 21:48:32 +0000
Subject: [PATCH 4/7] fix: cross-persist lat/lon and date/time in metadata
 setters (#907)

- set object_datetime also persists lat/lon if present
- set object_latlon also persists date/time if present
---
 flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flows.json b/flows.json
index 5ef8e8b..3e324c9 100644
--- a/flows.json
+++ b/flows.json
@@ -3394,7 +3394,7 @@
         "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}\nreturn msg;\n",
+        "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,
@@ -3412,7 +3412,7 @@
         "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}\nreturn msg;\n",
+        "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,

From 8d051249bffbeda1b2809ca9487db3cefeb035c3 Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Wed, 18 Mar 2026 22:31:27 +0000
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20acquisition=20race=20condition=20?=
 =?UTF-8?q?=E2=80=94=20stale=20nb=5Fframe=20on=20start?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The start acquisition function read acq_nb_frame and acq_interframe_volume
from Node-RED globals, but the globals were written by a parallel message
path. When the user changed form values and clicked Start, the read happened
before the write, causing the acquisition to use stale values.

Fix: start acquisition now reads from msg.payload first (carried with the
command), falling back to globals for backwards compatibility.

handleAcqStatusChange explicitly passes acq values in the start message.
---
 flows.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/flows.json b/flows.json
index 3e324c9..b4f9b0a 100644
--- a/flows.json
+++ b/flows.json
@@ -3686,7 +3686,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n\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      }\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>",
+        "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,
@@ -3864,7 +3864,7 @@
         "type": "function",
         "z": "71ede8b7dd88d90e",
         "name": "start acquisition",
-        "func": "\n\nconst acq_interframe_volume = global.get(\"acq_interframe_volume\") || 0;\nconst acq_nb_frame = global.get(\"acq_nb_frame\") || 0;\nconst acq_stabilization_delay = global.get(\"acq_stabilization_delay\") || 0;\nconst acq_interframe_flowrate = 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;",
+        "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,

From 1402afb37fe67bfebf5bf78dfcd5700db602283a Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Thu, 19 Mar 2026 02:58:10 +0000
Subject: [PATCH 6/7] feat: streaming TSV reader and columnar chart nodes

Replace full-file TSV loading with streaming columnar reader that extracts
only the 24 columns used by charts. Memory usage drops from ~500MB to ~9MB
for 56K-row datasets.

Chart node improvements:
- Scatter plots (heatmap, colorspace, aspect, greenness, complexity, texture)
  use reservoir sampling capped at 10K points
- Histograms (ESD, solidity) pass all values for accurate binning
- Gallery and explorer pre-sort by area descending and cap at 5K rows
- Timeline preserves full temporal resolution
---
 flows.json | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/flows.json b/flows.json
index b4f9b0a..8dbbd33 100644
--- a/flows.json
+++ b/flows.json
@@ -5473,10 +5473,10 @@
         "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}",
+        "name": "Streaming TSV reader",
+        "func": "// Streaming TSV reader — extracts only needed columns, never loads full file\nconst filePath = msg.payload.path || msg.filename;\nif (!filePath) return null;\n\nconst NEEDED = [\n  'object_x','object_y','object_equivalent_diameter','object_area',\n  'object_MeanSaturation','object_MeanValue','object_width','object_height',\n  'object_MeanHue','object_circ.','object_perim.','object_StdValue',\n  'object_solidity','object_elongation','object_major','object_minor',\n  'object_eccentricity','object_id','object_date','sample_id',\n  'sample_project','acq_id','img_file_name','process_pixel'\n];\n\nreturn new Promise((resolve) => {\n  const columns = {};\n  NEEDED.forEach(k => columns[k] = []);\n  const colIdx = {};\n  const meta = {};\n  let totalRows = 0;\n  let lineNum = 0;\n  let remainder = '';\n\n  const stream = fs.createReadStream(filePath, { encoding: 'utf8' });\n\n  stream.on('data', chunk => {\n    remainder += chunk;\n    const lines = remainder.split('\\n');\n    remainder = lines.pop();\n\n    for (const line of lines) {\n      if (!line.trim()) continue;\n      lineNum++;\n\n      if (lineNum === 1) {\n        const headers = line.split('\\t');\n        headers.forEach((h, i) => { if (NEEDED.includes(h)) colIdx[h] = i; });\n        continue;\n      }\n      if (line.trim().startsWith('[')) continue;\n\n      const fields = line.split('\\t');\n      totalRows++;\n\n      if (totalRows === 1) {\n        meta.sample_id = fields[colIdx['sample_id']] || '';\n        meta.sample_project = fields[colIdx['sample_project']] || '';\n        meta.acq_id = fields[colIdx['acq_id']] || '';\n        meta.process_pixel = fields[colIdx['process_pixel']] || '';\n      }\n\n      for (const key of NEEDED) {\n        if (colIdx[key] !== undefined) {\n          columns[key].push(fields[colIdx[key]]);\n        }\n      }\n    }\n  });\n\n  stream.on('end', () => {\n    if (remainder.trim() && !remainder.trim().startsWith('[') && lineNum > 0) {\n      const fields = remainder.split('\\t');\n      totalRows++;\n      for (const key of NEEDED) {\n        if (colIdx[key] !== undefined) {\n          columns[key].push(fields[colIdx[key]]);\n        }\n      }\n    }\n\n    const sid = meta.sample_id || '';\n    const proj = meta.sample_project || '';\n    meta.display_sample_id = sid.split(proj + '_')[1] || sid;\n    meta.display_acq_id = (meta.acq_id || '').split(meta.display_sample_id + '_')[1] || meta.acq_id;\n\n    msg.payload = { columns, meta, totalRows };\n    resolve(msg);\n  });\n\n  stream.on('error', err => {\n    node.error('TSV stream error: ' + err.message, msg);\n    resolve(null);\n  });\n});",
         "outputs": 1,
-        "timeout": 0,
+        "timeout": 30,
         "noerr": 0,
         "initialize": "",
         "finalize": "",
@@ -5611,7 +5611,7 @@
         "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",
+        "func": "// Heatmap — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_x'];\nconst yCol = columns['object_y'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { meta, data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5631,7 +5631,7 @@
         "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",
+        "func": "// ESD Histogram — columnar input, all values for accurate histogram\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_equivalent_diameter'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { d: parseFloat(raw[i]) };\n}\n\nmsg.payload = { meta, data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5651,7 +5651,7 @@
         "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",
+        "func": "// Timeline — columnar input, all values\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_area'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { seq: i, area: parseFloat(raw[i]) };\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5671,7 +5671,7 @@
         "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",
+        "func": "// Colorspace — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_MeanSaturation'];\nconst yCol = columns['object_MeanValue'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5691,7 +5691,7 @@
         "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",
+        "func": "// Aspect — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_width'];\nconst yCol = columns['object_height'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5711,7 +5711,7 @@
         "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",
+        "func": "// Greenness — columnar input with reservoir sampling + derived greenness\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst hueCol = columns['object_MeanHue'];\nconst circCol = columns['object_circ.'];\nif (!hueCol || !circCol) return null;\nconst n = hueCol.length;\n\nfunction makePoint(i) {\n  const hue = parseFloat(hueCol[i]) || 0;\n  const circ = parseFloat(circCol[i]) || 0;\n  const g = Math.max(0, 100 - Math.abs(hue - 80));\n  return { g, circ };\n}\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) data[i] = makePoint(i);\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) data[i] = makePoint(i);\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) data[j] = makePoint(i);\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5731,7 +5731,7 @@
         "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",
+        "func": "// Complexity — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_area'];\nconst yCol = columns['object_perim.'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5751,7 +5751,7 @@
         "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",
+        "func": "// Texture — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_area'];\nconst yCol = columns['object_StdValue'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5771,7 +5771,7 @@
         "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",
+        "func": "// Solidity Histogram — columnar input, all values\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_solidity'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { sol: parseFloat(raw[i]) };\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5815,7 +5815,7 @@
         "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",
+        "func": "// Sample Identity — extract metadata from columnar input\nconst { meta } = msg.payload;\nmsg.payload = { meta: {\n  sample_id: meta.sample_id || '',\n  project: meta.sample_project || '',\n  acq_id: meta.acq_id || ''\n}};\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -6027,7 +6027,7 @@
         "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    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\", \"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 ? `/ps/node-red-v2/my-images/${msg.tsvDir}/${val(row,\"img_file_name\")}` : `/ps/node-red-v2/my-images/${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;",
+        "func": "// Explorer — columnar input, pre-sorted by area (largest first), capped at 5000\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_ROWS = 5000;\nconst idCol = columns['object_id'];\nif (!idCol) return null;\n\nconst explorerKeys = [\n  \"object_area\",\"object_equivalent_diameter\",\"object_perim.\",\n  \"object_major\",\"object_minor\",\"object_width\",\"object_height\",\n  \"object_circ.\",\"object_elongation\",\"object_solidity\",\n  \"object_eccentricity\",\"object_MeanHue\",\"object_MeanSaturation\",\n  \"object_MeanValue\",\"object_StdValue\"\n];\n\nconst px = parseFloat(meta.process_pixel);\nconst resolution = (!isNaN(px) && px > 0) ? px : 1.0;\n\n// Build all rows first (lightweight: ~200 bytes each)\nconst allRows = [];\nfor (let i = 0; i < idCol.length; i++) {\n  const item = {\n    id: columns['object_id'][i],\n    url: `/ps/node-red-v2/my-images/${(columns['object_date'][i]||'').replace(/ /g,'_')}/${(columns['sample_id'][i]||'').replace(/ /g,'_')}/${(columns['acq_id'][i]||'').replace(/ /g,'_')}/${columns['img_file_name'][i]}`,\n    sequence_index: i\n  };\n  explorerKeys.forEach(k => {\n    const v = parseFloat((columns[k] || [])[i]);\n    item[k] = isNaN(v) ? 0 : v;\n  });\n  const hue = item.object_MeanHue || 0;\n  item.custom_greenness = Math.max(0, 100 - Math.abs(hue - 80));\n  allRows.push(item);\n}\n\n// Pre-sort by area descending (the default sort in the UI)\nallRows.sort((a, b) => b.object_area - a.object_area);\n\n// Cap to MAX_ROWS\nconst data = allRows.length > MAX_ROWS ? allRows.slice(0, MAX_ROWS) : allRows;\n\nmsg.payload = {\n  meta: { sample_id: meta.sample_id, project: meta.sample_project, acq_id: meta.acq_id, resolution },\n  keys: explorerKeys,\n  data,\n  totalRows,\n  showing: data.length\n};\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -6102,7 +6102,7 @@
         "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    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\", \"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 ? `/ps/node-red-v2/my-images/${msg.tsvDir}/${get(row, 'img_file_name')}` : `/ps/node-red-v2/my-images/${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;",
+        "func": "// Gallery — columnar input, pre-sorted by area (largest first), capped at 5000\nif (msg.clear === true || (msg.payload && msg.payload.clear === true)) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst { columns, meta, totalRows } = msg.payload;\nif (!columns) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst MAX_ROWS = 5000;\nconst idCol = columns['object_id'];\nif (!idCol) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst usefulKeys = [\n  \"object_area\",\"object_width\",\"object_height\",\n  \"object_equivalent_diameter\",\"object_major\",\"object_minor\",\n  \"object_MeanHue\",\"object_elongation\"\n];\n\nconst px = parseFloat(meta.process_pixel);\nconst resolution = (!isNaN(px) && px > 0) ? px : 1.0;\n\n// Build all rows\nconst allRows = [];\nfor (let i = 0; i < idCol.length; i++) {\n  const item = {\n    id: columns['object_id'][i],\n    url: `/ps/node-red-v2/my-images/${(columns['object_date'][i]||'').replace(/ /g,'_')}/${(columns['sample_id'][i]||'').replace(/ /g,'_')}/${(columns['acq_id'][i]||'').replace(/ /g,'_')}/${columns['img_file_name'][i]}`\n  };\n  usefulKeys.forEach(k => {\n    const v = parseFloat((columns[k] || [])[i]);\n    item[k] = isNaN(v) ? 0 : v;\n  });\n  allRows.push(item);\n}\n\n// Pre-sort by area descending (default sort in UI)\nallRows.sort((a, b) => b.object_area - a.object_area);\n\n// Cap to MAX_ROWS\nconst data = allRows.length > MAX_ROWS ? allRows.slice(0, MAX_ROWS) : allRows;\n\nmsg.payload = {\n  data,\n  keys: usefulKeys,\n  meta: { sample_id: meta.sample_id, project: meta.sample_project, acq_id: meta.acq_id, resolution },\n  totalRows,\n  showing: data.length\n};\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,

From e7114052f384862ddf222f4ad93c06741fcf24cf Mon Sep 17 00:00:00 2001
From: Adam Larson <adam@fairscope.com>
Date: Thu, 19 Mar 2026 03:54:35 +0000
Subject: [PATCH 7/7] fix: add object_blur_laplacian to streaming reader,
 gallery, and explorer

The columnar streaming reader only extracts listed columns. The blur metric
was missing, causing Sort by Sharpest to have no effect in the gallery and
explorer views.
---
 flows.json | 116 ++++++++++++++++++++++++++---------------------------
 1 file changed, 58 insertions(+), 58 deletions(-)

diff --git a/flows.json b/flows.json
index 8dbbd33..503dfaf 100644
--- a/flows.json
+++ b/flows.json
@@ -2152,7 +2152,7 @@
         "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",
+        "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,
@@ -2406,7 +2406,7 @@
         "width": "12",
         "height": "6",
         "head": "",
-        "format": "<style>\n    /* --- Zone Droite (Horloge + Menu) --- */\n    #pks-menu-wrapper {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        z-index: 999999 !important;\n        margin-right: 0 !important;\n    }\n\n    /* --- 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>",
+        "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,
@@ -2648,7 +2648,7 @@
         "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>",
+        "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,
@@ -2857,7 +2857,7 @@
         "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>",
+        "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,
@@ -2916,7 +2916,7 @@
         "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;",
+        "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,
@@ -3019,7 +3019,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-row \n      align=\"center\" \n      class=\"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>",
+        "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,
@@ -3150,7 +3150,7 @@
         "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>",
+        "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,
@@ -3201,7 +3201,7 @@
         "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",
+        "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,
@@ -3227,7 +3227,7 @@
         "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>",
+        "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,
@@ -3253,7 +3253,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <!-- Conteneur principal désactivé si sample_gear n'est ni Horizontal Net ni Vertical Net -->\n  <v-container 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=\"mL\" 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>",
+        "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=\"mL\" 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,
@@ -3279,7 +3279,7 @@
         "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=\"L\" 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>",
+        "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=\"L\" 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,
@@ -3662,7 +3662,7 @@
         "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>",
+        "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,
@@ -3686,7 +3686,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-container fluid class=\"ma-0 pa-0\">\n    <v-card class=\"ma-0 pa-6 rounded-lg border\" variant=\"flat\" color=\"white\">\n      <v-card-text>\n        <div class=\"d-flex justify-space-between align-center mb-4\">\n          <div class=\"text-h6\">Acquisition</div>\n        </div>\n\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>",
+        "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,
@@ -3712,7 +3712,7 @@
         "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>",
+        "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,
@@ -3729,7 +3729,7 @@
         "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;",
+        "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,
@@ -4110,7 +4110,7 @@
         "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>",
+        "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,
@@ -4198,7 +4198,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n\n  <!-- Error Message -->\n  <v-alert\n    v-if=\"errorMessage\"\n    type=\"error\"\n    variant=\"outlined\"\n    border=\"start\"\n    prominent\n    class=\"mb-4\"\n  >\n    <strong>Error:</strong> {{ errorMessage }}\n  </v-alert>\n\n  <!-- Info Message -->\n  <v-alert\n    v-else-if=\"infoMessage\"\n    type=\"info\"\n    variant=\"outlined\"\n    border=\"start\"\n    class=\"mb-4\"\n  >\n    {{ infoMessage }}\n  </v-alert>\n\n  <!-- Progress -->\n  <v-card\n    v-else-if=\"statusText\"\n    variant=\"flat\"\n    class=\"pa-8\"\n  >\n    <div class=\"d-flex justify-space-between align-center mb-2\">\n      <span class=\"text-subtitle-1 font-weight-medium\">Progress</span>\n      <span class=\"text-caption\">{{ progressText }}</span>\n    </div>\n\n    <v-progress-linear\n      :model-value=\"progressPercent\"\n      height=\"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",
+        "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,
@@ -4307,7 +4307,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-dialog v-if=\"showDialog\" v-model=\"showDialog\" max-width=\"500\">\n    <v-card>\n      <v-card-title class=\"font-weight-bold\">\n        Segmentation Required\n      </v-card-title>\n\n      <v-card-text>\n        <p>\n          The selected sample has not been segmented yet.<br>\n          Do you want to start segmentation now?\n        </p>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-list density=\"compact\">\n          <v-list-item>\n            <v-list-item-title><b>Project:</b> {{ payload.project_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Sample:</b> {{ payload.sample_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Acquisition:</b> {{ payload.acquisition_id }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Operator:</b> {{ payload.operator_name }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Images acquired:</b> {{ payload.image_acquired_count }}</v-list-item-title>\n          </v-list-item>\n          <v-list-item>\n            <v-list-item-title><b>Path:</b> {{ payload.path }}</v-list-item-title>\n          </v-list-item>\n        </v-list>\n\n        <v-divider class=\"my-3\"></v-divider>\n\n        <v-text-field\n          v-model.number=\"process_min_ESD\"\n          label=\"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          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 à 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>",
+        "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,
@@ -4452,7 +4452,7 @@
         "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>",
+        "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,
@@ -4482,7 +4482,7 @@
         "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",
+        "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,
@@ -4567,7 +4567,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            loading: true,\n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' },\n                { 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;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} µm` };\n            } else {\n                // For Modal: Calculate Percentage of the total image width\n                // (Bar Microns / Total Image Microns) * 100\n                const percent = (finalMicrons / realWidthMicrons) * 100;\n                return { width: percent, label: `${finalMicrons} µm` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n        \n\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>",
+        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 24,\n            sortBy: 'object_area',\n            loading: true,\n            detailsDialog: false,\n            selectedItem: null,\n            sortOptions: [\n                { title: 'Area (Largest)', value: 'object_area' },\n                { title: 'Width', value: 'object_width' },\n                { title: 'Height', value: 'object_height' },\n                { title: 'Hue', value: 'object_MeanHue' },\n                { title: 'Elongation', value: 'object_elongation' },\n                { 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;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} \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,
@@ -4667,7 +4667,7 @@
         "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",
+        "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,
@@ -4687,7 +4687,7 @@
         "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",
+        "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,
@@ -4707,7 +4707,7 @@
         "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",
+        "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,
@@ -4727,7 +4727,7 @@
         "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",
+        "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,
@@ -4747,7 +4747,7 @@
         "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",
+        "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,
@@ -4767,7 +4767,7 @@
         "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",
+        "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,
@@ -4787,7 +4787,7 @@
         "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",
+        "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,
@@ -4807,7 +4807,7 @@
         "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",
+        "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,
@@ -4827,7 +4827,7 @@
         "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",
+        "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,
@@ -4871,7 +4871,7 @@
         "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",
+        "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,
@@ -5083,7 +5083,7 @@
         "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    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\", \"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: `/ps/node-red-v2/my-images/${(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;",
+        "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    // CRITICAL: Extract pixel size (microns per pixel)\n    // If process_pixel is missing or 0, default to 1 to prevent division by zero\n    const px = parseFloat(val(firstRow, \"process_pixel\"));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 3. Explorer Keys to extract\nconst explorerKeys = [\n    \"object_area\", \"object_equivalent_diameter\", \"object_perim.\",\n    \"object_major\", \"object_minor\", \"object_width\", \"object_height\",\n    \"object_circ.\", \"object_elongation\", \"object_solidity\",\n    \"object_eccentricity\", \"object_MeanHue\", \"object_MeanSaturation\",\n    \"object_MeanValue\", \"object_StdValue\", \"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: `/ps/node-red-v2/my-images/${(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,
@@ -5110,7 +5110,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              contain\n              class=\"mb-3\"\n            >\n              <template #placeholder>\n                <div class=\"d-flex align-center justify-center fill-height\">\n                  <v-progress-circular indeterminate color=\"primary\"></v-progress-circular>\n                </div>\n              </template>\n            </v-img>\n\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    v-if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src=\"/plotly-2.27.0.min.js\";\n      s.onload = () => this.draw()\n      document.head.appendChild(s)\n    } else this.draw()\n  },\n\n  computed: {\n    // Calculate a nice round number for the scale bar length (e.g. 50um, 100um)\n    // based on the size of the current object.\n    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      // 1. Get real width of object in microns\n      // Fallback to 100px if object_width is missing\n      const objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * this.meta.resolution;\n\n      // 2. Target bar size ~ 25% of the object width\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\n      // 3. Snap to nearest nice number (10, 20, 50, 100, 200, 500...)\n      const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n      const residual = target / magnitude;\n      \n      let niceScalar = 1;\n      if (residual > 5) niceScalar = 10;\n      else if (residual > 2) niceScalar = 5;\n      else niceScalar = 2;\n\n      return niceScalar * magnitude;\n    },\n\n    scaleBarPixels() {\n      // Resolution = Microns per Pixel\n      // Pixels = Microns / Resolution\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} µm`\n    }\n  },\n\n  methods: {\n    fmt(v) { return typeof v === \"number\" ? v.toFixed(2) : v },\n\n    draw() {\n      if (!window.Plotly || !this.items.length) return\n\n      this.loading = false\n      const el = this.$refs.plot\n\n      const trace = {\n        x: this.items.map(d => d[this.xAxis]),\n        y: this.items.map(d => d[this.yAxis]),\n        mode: 'markers',\n        type: 'scatter',\n        hoverinfo: 'none',\n        marker: {\n          size: 8,\n          color: '#1976D2',\n          opacity: 0.6,\n          line: { width: 1, color: 'white' }\n        }\n      }\n\n      const layout = {\n        margin: { t: 20, b: 40, l: 50, r: 20 },\n        xaxis: { title: this.xAxis },\n        yaxis: { title: this.yAxis },\n        hovermode: 'closest',\n        dragmode: 'zoom',\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff'\n      }\n\n      Plotly.newPlot(el, [trace], layout, { responsive: true })\n        .then(() => {\n          el.on(\"plotly_hover\", ev => {\n            const i = ev.points[0].pointIndex\n            this.hovered = this.items[i]\n          })\n          el.on(\"plotly_unhover\", () => {\n            this.tooltip.show = false\n          })\n        })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.plot-container {\n  width: 100%;\n  height: 600px;\n}\n\n.ps-skeleton {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  animation: shimmer 1.5s infinite;\n  border-radius: 4px;\n}\n\n@keyframes shimmer {\n  0% { background-position: -200px 0; }\n  100% { background-position: 200px 0; }\n}\n\n.scale-bar-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  /* Prevent the bar from shrinking */\n  flex-shrink: 0; \n}\n\n.scale-bar {\n  height: 4px;\n  background: #333;\n  border-radius: 2px;\n  margin-bottom: 2px;\n  /* Add tick marks */\n  border-left: 1px solid #333;\n  border-right: 1px solid #333;\n}\n\n.scale-label {\n  font-size: 11px;\n  text-align: center;\n  color: #555;\n  font-weight: 600;\n}\n</style>",
+        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              contain\n              class=\"mb-3\"\n            >\n              <template #placeholder>\n                <div class=\"d-flex align-center justify-center fill-height\">\n                  <v-progress-circular indeterminate color=\"primary\"></v-progress-circular>\n                </div>\n              </template>\n            </v-img>\n\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    v-if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src=\"/plotly-2.27.0.min.js\";\n      s.onload = () => this.draw()\n      document.head.appendChild(s)\n    } else this.draw()\n  },\n\n  computed: {\n    // Calculate a nice round number for the scale bar length (e.g. 50um, 100um)\n    // based on the size of the current object.\n    adaptiveScaleMicrons() {\n      if (!this.hovered) return 20;\n\n      // 1. Get real width of object in microns\n      // Fallback to 100px if object_width is missing\n      const objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * this.meta.resolution;\n\n      // 2. Target bar size ~ 25% of the object width\n      let target = realWidthMicrons / 4;\n      if (target <= 0) target = 20;\n\n      // 3. Snap to nearest nice number (10, 20, 50, 100, 200, 500...)\n      const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n      const residual = target / magnitude;\n      \n      let niceScalar = 1;\n      if (residual > 5) niceScalar = 10;\n      else if (residual > 2) niceScalar = 5;\n      else niceScalar = 2;\n\n      return niceScalar * magnitude;\n    },\n\n    scaleBarPixels() {\n      // Resolution = Microns per Pixel\n      // Pixels = Microns / Resolution\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} \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,
@@ -5158,7 +5158,7 @@
         "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    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\", \"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;",
+        "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    // CRITICAL: Extract microns per pixel\n    const px = parseFloat(get(firstRow, 'process_pixel'));\n    if (!isNaN(px) && px > 0) {\n        meta.resolution = px;\n    }\n}\n\n// 5. Select Keys to Display\nconst usefulKeys = [\n    \"object_area\", \"object_width\", \"object_height\",\n    \"object_equivalent_diameter\", \"object_major\", \"object_minor\",\n    \"object_MeanHue\", \"object_elongation\", \"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,
@@ -5339,7 +5339,7 @@
         "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;",
+        "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,
@@ -5423,7 +5423,7 @@
         "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>",
+        "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,
@@ -5454,7 +5454,7 @@
         "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",
+        "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,
@@ -5474,7 +5474,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "Streaming TSV reader",
-        "func": "// Streaming TSV reader — extracts only needed columns, never loads full file\nconst filePath = msg.payload.path || msg.filename;\nif (!filePath) return null;\n\nconst NEEDED = [\n  'object_x','object_y','object_equivalent_diameter','object_area',\n  'object_MeanSaturation','object_MeanValue','object_width','object_height',\n  'object_MeanHue','object_circ.','object_perim.','object_StdValue',\n  'object_solidity','object_elongation','object_major','object_minor',\n  'object_eccentricity','object_id','object_date','sample_id',\n  'sample_project','acq_id','img_file_name','process_pixel'\n];\n\nreturn new Promise((resolve) => {\n  const columns = {};\n  NEEDED.forEach(k => columns[k] = []);\n  const colIdx = {};\n  const meta = {};\n  let totalRows = 0;\n  let lineNum = 0;\n  let remainder = '';\n\n  const stream = fs.createReadStream(filePath, { encoding: 'utf8' });\n\n  stream.on('data', chunk => {\n    remainder += chunk;\n    const lines = remainder.split('\\n');\n    remainder = lines.pop();\n\n    for (const line of lines) {\n      if (!line.trim()) continue;\n      lineNum++;\n\n      if (lineNum === 1) {\n        const headers = line.split('\\t');\n        headers.forEach((h, i) => { if (NEEDED.includes(h)) colIdx[h] = i; });\n        continue;\n      }\n      if (line.trim().startsWith('[')) continue;\n\n      const fields = line.split('\\t');\n      totalRows++;\n\n      if (totalRows === 1) {\n        meta.sample_id = fields[colIdx['sample_id']] || '';\n        meta.sample_project = fields[colIdx['sample_project']] || '';\n        meta.acq_id = fields[colIdx['acq_id']] || '';\n        meta.process_pixel = fields[colIdx['process_pixel']] || '';\n      }\n\n      for (const key of NEEDED) {\n        if (colIdx[key] !== undefined) {\n          columns[key].push(fields[colIdx[key]]);\n        }\n      }\n    }\n  });\n\n  stream.on('end', () => {\n    if (remainder.trim() && !remainder.trim().startsWith('[') && lineNum > 0) {\n      const fields = remainder.split('\\t');\n      totalRows++;\n      for (const key of NEEDED) {\n        if (colIdx[key] !== undefined) {\n          columns[key].push(fields[colIdx[key]]);\n        }\n      }\n    }\n\n    const sid = meta.sample_id || '';\n    const proj = meta.sample_project || '';\n    meta.display_sample_id = sid.split(proj + '_')[1] || sid;\n    meta.display_acq_id = (meta.acq_id || '').split(meta.display_sample_id + '_')[1] || meta.acq_id;\n\n    msg.payload = { columns, meta, totalRows };\n    resolve(msg);\n  });\n\n  stream.on('error', err => {\n    node.error('TSV stream error: ' + err.message, msg);\n    resolve(null);\n  });\n});",
+        "func": "// Streaming TSV reader \u2014 extracts only needed columns, never loads full file\nconst filePath = msg.payload.path || msg.filename;\nif (!filePath) return null;\n\nconst NEEDED = [\n  'object_x','object_y','object_equivalent_diameter','object_area',\n  'object_MeanSaturation','object_MeanValue','object_width','object_height',\n  'object_MeanHue','object_circ.','object_perim.','object_StdValue',\n  'object_solidity','object_elongation','object_major','object_minor',\n  'object_eccentricity','object_blur_laplacian','object_id','object_date','sample_id',\n  'sample_project','acq_id','img_file_name','process_pixel'\n];\n\nreturn new Promise((resolve) => {\n  const columns = {};\n  NEEDED.forEach(k => columns[k] = []);\n  const colIdx = {};\n  const meta = {};\n  let totalRows = 0;\n  let lineNum = 0;\n  let remainder = '';\n\n  const stream = fs.createReadStream(filePath, { encoding: 'utf8' });\n\n  stream.on('data', chunk => {\n    remainder += chunk;\n    const lines = remainder.split('\\n');\n    remainder = lines.pop();\n\n    for (const line of lines) {\n      if (!line.trim()) continue;\n      lineNum++;\n\n      if (lineNum === 1) {\n        const headers = line.split('\\t');\n        headers.forEach((h, i) => { if (NEEDED.includes(h)) colIdx[h] = i; });\n        continue;\n      }\n      if (line.trim().startsWith('[')) continue;\n\n      const fields = line.split('\\t');\n      totalRows++;\n\n      if (totalRows === 1) {\n        meta.sample_id = fields[colIdx['sample_id']] || '';\n        meta.sample_project = fields[colIdx['sample_project']] || '';\n        meta.acq_id = fields[colIdx['acq_id']] || '';\n        meta.process_pixel = fields[colIdx['process_pixel']] || '';\n      }\n\n      for (const key of NEEDED) {\n        if (colIdx[key] !== undefined) {\n          columns[key].push(fields[colIdx[key]]);\n        }\n      }\n    }\n  });\n\n  stream.on('end', () => {\n    if (remainder.trim() && !remainder.trim().startsWith('[') && lineNum > 0) {\n      const fields = remainder.split('\\t');\n      totalRows++;\n      for (const key of NEEDED) {\n        if (colIdx[key] !== undefined) {\n          columns[key].push(fields[colIdx[key]]);\n        }\n      }\n    }\n\n    const sid = meta.sample_id || '';\n    const proj = meta.sample_project || '';\n    meta.display_sample_id = sid.split(proj + '_')[1] || sid;\n    meta.display_acq_id = (meta.acq_id || '').split(meta.display_sample_id + '_')[1] || meta.acq_id;\n\n    msg.payload = { columns, meta, totalRows };\n    resolve(msg);\n  });\n\n  stream.on('error', err => {\n    node.error('TSV stream error: ' + err.message, msg);\n    resolve(null);\n  });\n});",
         "outputs": 1,
         "timeout": 30,
         "noerr": 0,
@@ -5543,7 +5543,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 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;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} µm` };\n            } else {\n                // For Modal: Calculate Percentage of the total image width\n                // (Bar Microns / Total Image Microns) * 100\n                const percent = (finalMicrons / realWidthMicrons) * 100;\n                return { width: percent, label: `${finalMicrons} µm` };\n            }\n        },\n\n        formatKeyName(k) {\n            return k.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase());\n        },\n\n        formatMeta(item) {\n            const out = {};\n            for (let k of this.keys) {\n                if (k === \"url\" || k === \"id\") continue;\n                let v = item[k];\n                if (typeof v === \"number\") v = v.toFixed(2);\n                let unit = \"\";\n                const KL = k.toLowerCase();\n                if (KL.includes(\"area\")) unit = \" px²\";\n                else if (KL.includes(\"width\") || KL.includes(\"height\")) unit = \" px\";\n                else if (KL.includes(\"hue\")) unit = \"°\";\n                out[k.replace(\"object_\", \"\")] = v + unit;\n            }\n            return out;\n        },\n\n        downloadImage(url, id) {\n            const a = document.createElement(\"a\");\n            a.href = url;\n            a.download = `object_${id}.jpg`;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n        }\n    }\n}\n</script>\n\n\n<style scoped>\n/* GALLERY GRID */\n.gallery-scroll-area {\n    min-height:600px;\n    overflow-y: auto;\n    border-radius: 4px;\n    border: 1px solid #eee;\n    padding: 16px;\n}\n.gallery-grid {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n    align-items: flex-end;\n}\n\n/* SKELETON LOADER */\n.gallery-skeleton {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    justify-content: center;\n}\n.skeleton-box {\n    width: 120px;\n    height: 120px;\n    border-radius: 6px;\n    background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);\n    background-size: 200% 100%;\n    animation: sk 1.2s infinite;\n}\n@keyframes sk {\n    0% { background-position:200% 0; }\n    100% { background-position:-200% 0; }\n}\n\n.gallery-item-wrapper { display: flex; flex-direction: column; align-items: center; }\n.gallery-card { transition: transform 0.2s; cursor: pointer; }\n.gallery-card:hover { transform: translateY(-2px); border-color: #1976D2 !important; }\n.img-container { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n\n/* --- THUMBNAIL SCALE BAR --- */\n.mini-scale-bar {\n    position:absolute; bottom:2px; right:2px;\n    height:3px; \n    background: rgba(255,255,255,0);\n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.mini-scale-text {\n    position:absolute; bottom:6px; right:2px;\n    font-size: 10px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n\n/* --- MODAL SCALE BAR (NEW) --- */\n.modal-scale-bar {\n    position:absolute; \n    bottom: 10px; \n    right: 10px;\n    height: 6px; \n    background: rgba(255,255,255,0); \n    border: 2px solid #333;\n    border-top: none; /* U-shape style */\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n}\n.modal-scale-text {\n    position:absolute; \n    bottom: -15px;\n    right: 0px;\n    font-size: 14px; \n    font-weight: bold;\n    color: #333; \n    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;\n    pointer-events: none;\n    width: 100%;\n    text-align: right;\n    padding-right: 2px;\n}\n</style>",
+        "format": "<template>\n    <v-row class=\"pa-4\" align=\"center\" justify=\"space-between\" dense>\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <div class=\"d-flex flex-column\">\n                <div class=\"d-flex align-center gap-2\">\n                    <v-icon icon=\"mdi-magnify-minus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                    <v-slider\n                        v-model=\"zoom\"\n                        min=\"0.1\"\n                        max=\"3\"\n                        step=\"0.1\"\n                        density=\"compact\"\n                        hide-details\n                        thumb-label\n                        color=\"primary\"\n                        class=\"flex-grow-1 mx-2\"\n                    ></v-slider>\n                    <v-icon icon=\"mdi-magnify-plus-outline\" size=\"small\" color=\"grey\"></v-icon>\n                </div>\n                <div class=\"text-caption text-center text-grey mt-n1\">\n                    Zoom x{{ zoom.toFixed(1) }}\n                </div>\n            </div>\n        </v-col>\n\n        <v-col cols=\"12\" sm=\"6\" md=\"4\" lg=\"3\">\n            <v-select\n                v-model=\"sortBy\"\n                :items=\"sortOptions\"\n                label=\"Sort By\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                prepend-inner-icon=\"mdi-sort\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\">\n            <v-select\n                v-model=\"itemsPerPage\"\n                :items=\"[12, 24, 48, 100]\"\n                label=\"Per Page\"\n                density=\"compact\"\n                hide-details\n                variant=\"outlined\"\n                bg-color=\"white\"\n            ></v-select>\n        </v-col>\n\n        <v-col cols=\"6\" sm=\"6\" md=\"2\" lg=\"2\" class=\"d-flex justify-end align-center\">\n            <v-chip size=\"small\" color=\"primary\" variant=\"tonal\" class=\"font-weight-bold\">\n                Total: {{ filteredItems.length }}\n            </v-chip>\n        </v-col>\n    </v-row>\n\n\n    <div class=\"gallery-scroll-area flex-grow-1\">\n\n        <div v-if=\"loading\" class=\"gallery-skeleton\">\n            <div v-for=\"n in 12\" :key=\"n\" class=\"skeleton-box\"></div>\n        </div>\n\n        <div v-else class=\"gallery-grid\">\n            <div \n                v-for=\"item in paginatedItems\" \n                :key=\"item.id\" \n                class=\"gallery-item-wrapper\"\n            >\n                <v-card \n                    class=\"gallery-card\" \n                    hover \n                    variant=\"outlined\" \n                    @click=\"openDetails(item)\"\n                    style=\"border-color: #e0e0e0;\"\n                >\n                    <div\n                        class=\"img-container\"\n                        :style=\"{ \n                            width: (Math.max(item.object_width * zoom, 40)) + 'px',\n                            height: (Math.max(item.object_height * zoom, 40)) + 'px',\n                            backgroundColor: '#f5f5f5'\n                        }\"\n                    >\n                        <img \n                            :src=\"item.url\" \n                            :style=\"{\n                                width: (item.object_width * zoom) + 'px',\n                                height: (item.object_height * zoom) + 'px',\n                                objectFit: 'contain',\n                                imageRendering: 'pixelated'\n                            }\"\n                        />\n\n                        <div \n                            class=\"mini-scale-bar\" \n                            :style=\"{ width: getScaleBar(item, 'px').width + 'px' }\"\n                        ></div>\n                        <div class=\"mini-scale-text\">\n                            {{ getScaleBar(item, 'px').label }}\n                        </div>\n                    </div>\n\n                    <v-divider />\n\n                    <div class=\"d-flex justify-center pa-0 bg-white\">\n                        <v-btn \n                            icon=\"mdi-download\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"grey-darken-1\"\n                            @click.stop=\"downloadImage(item.url, item.id)\"\n                        />\n                        <v-btn \n                            icon=\"mdi-eye\"\n                            size=\"x-small\"\n                            variant=\"text\"\n                            color=\"primary\"\n                            @click.stop=\"openDetails(item)\"\n                        />\n                    </div>\n                </v-card>\n            </div>\n\n            <div v-if=\"filteredItems.length === 0\" class=\"text-center w-100 mt-10 text-grey\">\n                No objects found.\n            </div>\n        </div>\n    </div>\n\n\n    <div class=\"text-center pt-2 flex-grow-0\" v-if=\"!loading\">\n        <v-pagination\n            v-model=\"page\"\n            :length=\"totalPages\"\n            :total-visible=\"7\"\n            density=\"compact\"\n            rounded=\"circle\"\n            color=\"primary\"\n        />\n    </div>\n\n\n    <v-dialog v-model=\"detailsDialog\" max-width=\"600\">\n        <v-card v-if=\"selectedItem\">\n\n            <v-toolbar color=\"primary\" density=\"compact\">\n                <v-toolbar-title class=\"text-subtitle-1\">Object Details</v-toolbar-title>\n                <v-btn icon=\"mdi-close\" @click=\"detailsDialog = false\" />\n            </v-toolbar>\n\n            <v-card-text class=\"pa-4\">\n                <v-row>\n                    <v-col cols=\"12\" class=\"text-center bg-grey-lighten-4 pa-4 rounded\">\n                        \n                        <div style=\"position: relative; display: inline-block;\">\n                            \n                            <img :src=\"selectedItem.url\"\n                                 style=\"max-width:100%; max-height:400px; image-rendering:pixelated; display:block;\" />\n                            \n                            <div \n                                class=\"modal-scale-bar\"\n                                :style=\"{ width: getScaleBar(selectedItem, '%').width + '%' }\"\n                            ></div>\n                            <div class=\"modal-scale-text\">\n                                {{ getScaleBar(selectedItem, '%').label }}\n                            </div>\n\n                        </div>\n\n                        <div class=\"d-flex justify-space-between mt-2 px-2 text-caption text-grey\">\n                            <span>ID: {{ selectedItem.id }}</span>\n                        </div>\n                    </v-col>\n\n                    <v-col cols=\"12\">\n                        <v-table density=\"compact\">\n                            <thead>\n                                <tr><th>Metric</th><th class=\"text-right\">Value</th></tr>\n                            </thead>\n                            <tbody>\n                                <tr v-for=\"(value, key) in formatMeta(selectedItem)\" :key=\"key\">\n                                    <td>{{ formatKeyName(key) }}</td>\n                                    <td class=\"text-right font-weight-bold\">{{ value }}</td>\n                                </tr>\n                            </tbody>\n                        </v-table>\n                    </v-col>\n                </v-row>\n            </v-card-text>\n\n        </v-card>\n    </v-dialog>\n\n</template>\n\n\n<script>\nexport default {\n    data() {\n        return {\n            rawData: [],\n            meta: { resolution: 1 },\n            keys: [],\n            zoom: 0.5,\n            page: 1,\n            itemsPerPage: 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;\n                const dataArray = m.payload.data || [];\n                if (dataArray.length === 0) {\n                    if (m.payload.data) {\n                        this.loading = true;\n                        this.rawData = [];\n                        this.page = 1;\n                    }\n                    return;\n                }\n                this.rawData = dataArray;\n                this.keys = m.payload.keys || [];\n                this.page = 1;\n                this.loading = false;\n            }\n        }\n    },\n\n    methods: {\n        openDetails(item) {\n            this.selectedItem = item;\n            this.detailsDialog = true;\n        },\n\n        /**\n         * Calculate Scale Bar.\n         * mode = 'px' -> returns absolute pixels (multiplied by zoom) for thumbnails\n         * mode = '%'  -> returns percentage of image width for the modal\n         */\n        getScaleBar(item, mode = 'px') {\n            const res = this.meta.resolution || 1; // microns per pixel\n            const pxWidth = item.object_width || 100; // raw image width in px\n            const realWidthMicrons = pxWidth * res; // real physical width\n\n            // 1. Target bar size: roughly 30% of the image\n            let target = realWidthMicrons * 0.3;\n            if (target <= 0) target = 10;\n\n            // 2. Snap to nearest nice number (1, 2, 5 series)\n            const magnitude = Math.pow(10, Math.floor(Math.log10(target)));\n            const residual = target / magnitude;\n            let niceScalar = 1;\n            if (residual > 5) niceScalar = 10;\n            else if (residual > 2) niceScalar = 5;\n            else niceScalar = 2;\n            const finalMicrons = niceScalar * magnitude; // e.g. 50, 100, 200\n\n            // 3. Return Logic\n            if (mode === 'px') {\n                // For thumbnails: scale by resolution AND gallery zoom\n                const finalPixels = (finalMicrons / res) * this.zoom;\n                return { width: finalPixels, label: `${finalMicrons} \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,
@@ -5611,7 +5611,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "HEATMAP (object_x, object_y)",
-        "func": "// Heatmap — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_x'];\nconst yCol = columns['object_y'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { meta, data, totalRows };\nreturn msg;",
+        "func": "// Heatmap \u2014 columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_x'];\nconst yCol = columns['object_y'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { x: parseFloat(xCol[i]), y: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { meta, data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5631,7 +5631,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "ESD Histogram (object_equivalent_diameter)",
-        "func": "// ESD Histogram — columnar input, all values for accurate histogram\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_equivalent_diameter'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { d: parseFloat(raw[i]) };\n}\n\nmsg.payload = { meta, data, totalRows };\nreturn msg;",
+        "func": "// ESD Histogram \u2014 columnar input, all values for accurate histogram\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_equivalent_diameter'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { d: parseFloat(raw[i]) };\n}\n\nmsg.payload = { meta, data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5651,7 +5651,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "TIMELINE (sequence index + area)",
-        "func": "// Timeline — columnar input, all values\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_area'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { seq: i, area: parseFloat(raw[i]) };\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Timeline \u2014 columnar input, all values\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_area'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { seq: i, area: parseFloat(raw[i]) };\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5671,7 +5671,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "COLORSPACE (Saturation vs Value)",
-        "func": "// Colorspace — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_MeanSaturation'];\nconst yCol = columns['object_MeanValue'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Colorspace \u2014 columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_MeanSaturation'];\nconst yCol = columns['object_MeanValue'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { s: parseFloat(xCol[i]), v: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5691,7 +5691,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "ASPECT (Width vs Height)",
-        "func": "// Aspect — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_width'];\nconst yCol = columns['object_height'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Aspect \u2014 columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_width'];\nconst yCol = columns['object_height'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { w: parseFloat(xCol[i]), h: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5711,7 +5711,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "GREENNESS (custom index + circularity)",
-        "func": "// Greenness — columnar input with reservoir sampling + derived greenness\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst hueCol = columns['object_MeanHue'];\nconst circCol = columns['object_circ.'];\nif (!hueCol || !circCol) return null;\nconst n = hueCol.length;\n\nfunction makePoint(i) {\n  const hue = parseFloat(hueCol[i]) || 0;\n  const circ = parseFloat(circCol[i]) || 0;\n  const g = Math.max(0, 100 - Math.abs(hue - 80));\n  return { g, circ };\n}\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) data[i] = makePoint(i);\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) data[i] = makePoint(i);\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) data[j] = makePoint(i);\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Greenness \u2014 columnar input with reservoir sampling + derived greenness\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst hueCol = columns['object_MeanHue'];\nconst circCol = columns['object_circ.'];\nif (!hueCol || !circCol) return null;\nconst n = hueCol.length;\n\nfunction makePoint(i) {\n  const hue = parseFloat(hueCol[i]) || 0;\n  const circ = parseFloat(circCol[i]) || 0;\n  const g = Math.max(0, 100 - Math.abs(hue - 80));\n  return { g, circ };\n}\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) data[i] = makePoint(i);\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) data[i] = makePoint(i);\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) data[j] = makePoint(i);\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5731,7 +5731,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "COMPLEXITY (Area vs Perimeter)",
-        "func": "// Complexity — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_area'];\nconst yCol = columns['object_perim.'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Complexity \u2014 columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_area'];\nconst yCol = columns['object_perim.'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { area: parseFloat(xCol[i]), per: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5751,7 +5751,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "TEXTURE (Area vs StdValue)",
-        "func": "// Texture — columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_area'];\nconst yCol = columns['object_StdValue'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Texture \u2014 columnar input with reservoir sampling\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_POINTS = 10000;\nconst xCol = columns['object_area'];\nconst yCol = columns['object_StdValue'];\nif (!xCol || !yCol) return null;\nconst n = xCol.length;\n\nlet data;\nif (n <= MAX_POINTS) {\n  data = new Array(n);\n  for (let i = 0; i < n; i++) {\n    data[i] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n  }\n} else {\n  data = new Array(MAX_POINTS);\n  for (let i = 0; i < MAX_POINTS; i++) {\n    data[i] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n  }\n  for (let i = MAX_POINTS; i < n; i++) {\n    const j = Math.floor(Math.random() * (i + 1));\n    if (j < MAX_POINTS) {\n      data[j] = { area: parseFloat(xCol[i]), std: parseFloat(yCol[i]) };\n    }\n  }\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5771,7 +5771,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "SOLIDITY (Histogram)",
-        "func": "// Solidity Histogram — columnar input, all values\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_solidity'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { sol: parseFloat(raw[i]) };\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
+        "func": "// Solidity Histogram \u2014 columnar input, all values\nconst { columns, meta, totalRows } = msg.payload;\nconst raw = columns['object_solidity'];\nif (!raw) return null;\n\nconst data = new Array(raw.length);\nfor (let i = 0; i < raw.length; i++) {\n  data[i] = { sol: parseFloat(raw[i]) };\n}\n\nmsg.payload = { data, totalRows };\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -5815,7 +5815,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "Sample Identity Metadata Only",
-        "func": "// Sample Identity — extract metadata from columnar input\nconst { meta } = msg.payload;\nmsg.payload = { meta: {\n  sample_id: meta.sample_id || '',\n  project: meta.sample_project || '',\n  acq_id: meta.acq_id || ''\n}};\nreturn msg;",
+        "func": "// Sample Identity \u2014 extract metadata from columnar input\nconst { meta } = msg.payload;\nmsg.payload = { meta: {\n  sample_id: meta.sample_id || '',\n  project: meta.sample_project || '',\n  acq_id: meta.acq_id || ''\n}};\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -6027,7 +6027,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "EXPLORER",
-        "func": "// Explorer — columnar input, pre-sorted by area (largest first), capped at 5000\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_ROWS = 5000;\nconst idCol = columns['object_id'];\nif (!idCol) return null;\n\nconst explorerKeys = [\n  \"object_area\",\"object_equivalent_diameter\",\"object_perim.\",\n  \"object_major\",\"object_minor\",\"object_width\",\"object_height\",\n  \"object_circ.\",\"object_elongation\",\"object_solidity\",\n  \"object_eccentricity\",\"object_MeanHue\",\"object_MeanSaturation\",\n  \"object_MeanValue\",\"object_StdValue\"\n];\n\nconst px = parseFloat(meta.process_pixel);\nconst resolution = (!isNaN(px) && px > 0) ? px : 1.0;\n\n// Build all rows first (lightweight: ~200 bytes each)\nconst allRows = [];\nfor (let i = 0; i < idCol.length; i++) {\n  const item = {\n    id: columns['object_id'][i],\n    url: `/ps/node-red-v2/my-images/${(columns['object_date'][i]||'').replace(/ /g,'_')}/${(columns['sample_id'][i]||'').replace(/ /g,'_')}/${(columns['acq_id'][i]||'').replace(/ /g,'_')}/${columns['img_file_name'][i]}`,\n    sequence_index: i\n  };\n  explorerKeys.forEach(k => {\n    const v = parseFloat((columns[k] || [])[i]);\n    item[k] = isNaN(v) ? 0 : v;\n  });\n  const hue = item.object_MeanHue || 0;\n  item.custom_greenness = Math.max(0, 100 - Math.abs(hue - 80));\n  allRows.push(item);\n}\n\n// Pre-sort by area descending (the default sort in the UI)\nallRows.sort((a, b) => b.object_area - a.object_area);\n\n// Cap to MAX_ROWS\nconst data = allRows.length > MAX_ROWS ? allRows.slice(0, MAX_ROWS) : allRows;\n\nmsg.payload = {\n  meta: { sample_id: meta.sample_id, project: meta.sample_project, acq_id: meta.acq_id, resolution },\n  keys: explorerKeys,\n  data,\n  totalRows,\n  showing: data.length\n};\nreturn msg;",
+        "func": "// Explorer \u2014 columnar input, pre-sorted by area (largest first), capped at 5000\nconst { columns, meta, totalRows } = msg.payload;\nconst MAX_ROWS = 5000;\nconst idCol = columns['object_id'];\nif (!idCol) return null;\n\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\nconst px = parseFloat(meta.process_pixel);\nconst resolution = (!isNaN(px) && px > 0) ? px : 1.0;\n\n// Build all rows first (lightweight: ~200 bytes each)\nconst allRows = [];\nfor (let i = 0; i < idCol.length; i++) {\n  const item = {\n    id: columns['object_id'][i],\n    url: `/ps/node-red-v2/my-images/${(columns['object_date'][i]||'').replace(/ /g,'_')}/${(columns['sample_id'][i]||'').replace(/ /g,'_')}/${(columns['acq_id'][i]||'').replace(/ /g,'_')}/${columns['img_file_name'][i]}`,\n    sequence_index: i\n  };\n  explorerKeys.forEach(k => {\n    const v = parseFloat((columns[k] || [])[i]);\n    item[k] = isNaN(v) ? 0 : v;\n  });\n  const hue = item.object_MeanHue || 0;\n  item.custom_greenness = Math.max(0, 100 - Math.abs(hue - 80));\n  allRows.push(item);\n}\n\n// Pre-sort by area descending (the default sort in the UI)\nallRows.sort((a, b) => b.object_area - a.object_area);\n\n// Cap to MAX_ROWS\nconst data = allRows.length > MAX_ROWS ? allRows.slice(0, MAX_ROWS) : allRows;\n\nmsg.payload = {\n  meta: { sample_id: meta.sample_id, project: meta.sample_project, acq_id: meta.acq_id, resolution },\n  keys: explorerKeys,\n  data,\n  totalRows,\n  showing: data.length\n};\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -6054,7 +6054,7 @@
         "width": 0,
         "height": 0,
         "head": "",
-        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              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\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src=\"/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 objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * 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    scaleBarPixels() {\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\n    },\n\n    formattedScale() {\n      return `${this.adaptiveScaleMicrons} µm`\n    }\n  },\n\n  methods: {\n    fmt(v) { return typeof v === \"number\" ? v.toFixed(2) : v },\n\n    draw() {\n      if (!window.Plotly || !this.items.length) return\n\n      this.loading = false\n      const el = this.$refs.plot\n\n      const trace = {\n        x: this.items.map(d => d[this.xAxis]),\n        y: this.items.map(d => d[this.yAxis]),\n        mode: 'markers',\n        type: 'scatter',\n        hoverinfo: 'none',\n        marker: {\n          size: 8,\n          color: '#1976D2',\n          opacity: 0.6,\n          line: { width: 1, color: 'white' }\n        }\n      }\n\n      const layout = {\n        margin: { t: 20, b: 40, l: 50, r: 20 },\n        xaxis: { title: this.xAxis },\n        yaxis: { title: this.yAxis },\n        hovermode: 'closest',\n        dragmode: 'zoom',\n        plot_bgcolor: '#ffffff',\n        paper_bgcolor: '#ffffff'\n      }\n\n      Plotly.newPlot(el, [trace], layout, { responsive: true })\n        .then(() => {\n          el.on(\"plotly_hover\", ev => {\n            const i = ev.points[0].pointIndex\n            this.hovered = this.items[i]\n          })\n          el.on(\"plotly_unhover\", () => {\n            this.tooltip.show = false\n          })\n        })\n    }\n  }\n}\n</script>\n\n<style scoped>\n.plot-container {\n  width: 100%;\n  height: 600px;\n}\n\n.ps-skeleton {\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  animation: shimmer 1.5s infinite;\n  border-radius: 4px;\n}\n\n@keyframes shimmer {\n  0% { background-position: -200px 0; }\n  100% { background-position: 200px 0; }\n}\n\n/* 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>",
+        "format": "<template>\n  <v-row class=\"ps-controls py-4\" no-gutters>\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"xAxis\"\n        :items=\"keys\"\n        label=\"X Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\">\n      <v-select\n        v-model=\"yAxis\"\n        :items=\"keys\"\n        label=\"Y Axis\"\n        density=\"compact\"\n        variant=\"outlined\"\n        hide-details\n          class=\"flex-grow-1 mx-2\"\n      />\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"d-flex align-center\">\n      <v-btn\n        color=\"primary\"\n        block\n        @click=\"draw\"\n        prepend-icon=\"mdi-chart-scatter-plot\"\n        height=\"40\"\n      >\n        Load Plot\n      </v-btn>\n    </v-col>\n  </v-row>\n\n\n  <v-row no-gutters class=\"fill-height\" style=\"height: calc(100vh - 180px);\">\n\n    <v-col cols=\"12\" md=\"8\" class=\"pr-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height\">\n        <div v-if=\"loading\" class=\"ps-skeleton\"></div>\n        <div v-show=\"!loading\" ref=\"plot\" class=\"plot-container\"></div>\n      </v-card>\n    </v-col>\n\n    <v-col cols=\"12\" md=\"4\" class=\"pl-2\" style=\"height:100%;\">\n      <v-card variant=\"outlined\" class=\"fill-height d-flex flex-column\">\n\n        <v-divider></v-divider>\n\n        <div class=\"pa-4 flex-grow-1 overflow-y-auto\">\n\n          <div v-if=\"loading\" class=\"ps-skeleton\" style=\"height:200px\"></div>\n\n          <div\n            v-else-if=\"!hovered\"\n            class=\"ps-placeholder d-flex flex-column align-center justify-center h-100\"\n          >\n            <v-icon size=\"48\" color=\"grey-lighten-2\" class=\"mb-2\">\n              mdi-cursor-default-click-outline\n            </v-icon>\n            <div class=\"text-caption text-grey\">\n              Hover over a point<br>to view details\n            </div>\n          </div>\n\n          <div v-else>\n\n            <v-img\n              :src=\"hovered.url\"\n              aspect-ratio=\"1\"\n              bg-color=\"grey-lighten-3\"\n              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\n            <div class=\"d-flex justify-space-between align-center mb-2 px-2\">\n              <v-chip size=\"small\" color=\"primary\" label>ID: {{ hovered.id }}</v-chip>\n\n              <div class=\"scale-bar-wrapper\">\n                <div class=\"scale-bar\" :style=\"{ width: scaleBarPixels + 'px' }\"></div>\n                <div class=\"scale-label\">{{ formattedScale }}</div>\n              </div>\n            </div>\n            \n\n          </div>\n        </div>\n\n      </v-card>\n    </v-col>\n\n  </v-row>\n\n\n  <div\n    if=\"tooltip.show\"\n    :style=\"{\n      position:'fixed',\n      top: tooltip.y + 'px',\n      left: tooltip.x + 'px',\n      width:'160px',\n      background:'white',\n      border:'1px solid #ccc',\n      borderRadius:'6px',\n      pointerEvents:'none',\n      zIndex:99999,\n      boxShadow:'0 4px 12px rgba(0,0,0,0.15)'\n    }\"\n  >\n    <img :src=\"tooltip.url\" style=\"width:100%; border-radius:6px 6px 0 0;\" />\n    <div style=\"padding:4px 8px; text-align:center; font-size:11px; font-weight:bold; background:#f5f5f5;\">\n      ID: {{ tooltip.id }}\n    </div>\n  </div>\n\n</template>\n\n<script>\nexport default {\n  props: [\"msg\"],\n\n  data() {\n    return {\n      keys: [],\n      items: [],\n      loading: true,\n\n      xAxis: \"object_elongation\",\n      yAxis: \"object_area\",\n\n      // Default meta if nothing is passed\n      meta: { resolution: 1.0 },\n\n      hovered: null,\n      tooltip: { show: false, id: \"\", url: \"\", x: 0, y: 0 }\n    }\n  },\n\n  watch: {\n    msg: {\n      deep: true,\n      immediate: true,\n      handler(m) {\n        if (!m?.payload) return\n\n        // Update Resolution from Payload\n        if (m.payload.meta?.resolution) {\n          this.meta.resolution = parseFloat(m.payload.meta.resolution)\n        }\n\n        // CLEARING\n        if (Array.isArray(m.payload.data) && m.payload.data.length === 0) {\n          this.loading = true\n          this.items = []\n          this.hovered = null\n          this.tooltip.show = false\n          const el = this.$refs.plot\n          if (el && window.Plotly) Plotly.purge(el)\n          return\n        }\n\n        this.keys = m.payload.keys || []\n        this.items = m.payload.data || []\n\n        this.loading = this.items.length === 0\n\n        this.$nextTick(() => this.draw())\n      }\n    }\n  },\n\n  mounted() {\n    if (!window.Plotly) {\n      const s = document.createElement(\"script\")\n      s.src=\"/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 objWidthPx = this.hovered.object_width || 100; \n      const realWidthMicrons = objWidthPx * 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    scaleBarPixels() {\n      const res = this.meta.resolution || 1;\n      return this.adaptiveScaleMicrons / res;\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,
@@ -6102,7 +6102,7 @@
         "type": "function",
         "z": "a7825c4c81ad20a0",
         "name": "GALLERY",
-        "func": "// Gallery — columnar input, pre-sorted by area (largest first), capped at 5000\nif (msg.clear === true || (msg.payload && msg.payload.clear === true)) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst { columns, meta, totalRows } = msg.payload;\nif (!columns) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst MAX_ROWS = 5000;\nconst idCol = columns['object_id'];\nif (!idCol) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst usefulKeys = [\n  \"object_area\",\"object_width\",\"object_height\",\n  \"object_equivalent_diameter\",\"object_major\",\"object_minor\",\n  \"object_MeanHue\",\"object_elongation\"\n];\n\nconst px = parseFloat(meta.process_pixel);\nconst resolution = (!isNaN(px) && px > 0) ? px : 1.0;\n\n// Build all rows\nconst allRows = [];\nfor (let i = 0; i < idCol.length; i++) {\n  const item = {\n    id: columns['object_id'][i],\n    url: `/ps/node-red-v2/my-images/${(columns['object_date'][i]||'').replace(/ /g,'_')}/${(columns['sample_id'][i]||'').replace(/ /g,'_')}/${(columns['acq_id'][i]||'').replace(/ /g,'_')}/${columns['img_file_name'][i]}`\n  };\n  usefulKeys.forEach(k => {\n    const v = parseFloat((columns[k] || [])[i]);\n    item[k] = isNaN(v) ? 0 : v;\n  });\n  allRows.push(item);\n}\n\n// Pre-sort by area descending (default sort in UI)\nallRows.sort((a, b) => b.object_area - a.object_area);\n\n// Cap to MAX_ROWS\nconst data = allRows.length > MAX_ROWS ? allRows.slice(0, MAX_ROWS) : allRows;\n\nmsg.payload = {\n  data,\n  keys: usefulKeys,\n  meta: { sample_id: meta.sample_id, project: meta.sample_project, acq_id: meta.acq_id, resolution },\n  totalRows,\n  showing: data.length\n};\nreturn msg;",
+        "func": "// Gallery \u2014 columnar input, pre-sorted by area (largest first), capped at 5000\nif (msg.clear === true || (msg.payload && msg.payload.clear === true)) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst { columns, meta, totalRows } = msg.payload;\nif (!columns) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\nconst MAX_ROWS = 5000;\nconst idCol = columns['object_id'];\nif (!idCol) {\n  msg.payload = { data: [], meta: { resolution: 1 }, keys: [] };\n  return msg;\n}\n\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 px = parseFloat(meta.process_pixel);\nconst resolution = (!isNaN(px) && px > 0) ? px : 1.0;\n\n// Build all rows\nconst allRows = [];\nfor (let i = 0; i < idCol.length; i++) {\n  const item = {\n    id: columns['object_id'][i],\n    url: `/ps/node-red-v2/my-images/${(columns['object_date'][i]||'').replace(/ /g,'_')}/${(columns['sample_id'][i]||'').replace(/ /g,'_')}/${(columns['acq_id'][i]||'').replace(/ /g,'_')}/${columns['img_file_name'][i]}`\n  };\n  usefulKeys.forEach(k => {\n    const v = parseFloat((columns[k] || [])[i]);\n    item[k] = isNaN(v) ? 0 : v;\n  });\n  allRows.push(item);\n}\n\n// Pre-sort by area descending (default sort in UI)\nallRows.sort((a, b) => b.object_area - a.object_area);\n\n// Cap to MAX_ROWS\nconst data = allRows.length > MAX_ROWS ? allRows.slice(0, MAX_ROWS) : allRows;\n\nmsg.payload = {\n  data,\n  keys: usefulKeys,\n  meta: { sample_id: meta.sample_id, project: meta.sample_project, acq_id: meta.acq_id, resolution },\n  totalRows,\n  showing: data.length\n};\nreturn msg;",
         "outputs": 1,
         "timeout": 0,
         "noerr": 0,
@@ -6267,7 +6267,7 @@
         "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;",
+        "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,
@@ -6450,7 +6450,7 @@
         "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;",
+        "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,
@@ -6758,7 +6758,7 @@
         "width": "0",
         "height": "0",
         "head": "",
-        "format": "<template>\n  <v-container fluid>\n    <v-row>\n      <v-col cols=\"12\" md=\"8\">\n        <v-card\n          class=\"calibration-container\"\n          style=\"width:100%; height:750px; position:relative; overflow:hidden;\"\n        >\n          <iframe src=\"/preview/node-red\" class=\"calibration-iframe\"></iframe>\n\n          <div class=\"target-overlay\">\n            <v-icon color=\"primary\" size=\"large\">mdi-crosshairs</v-icon>\n          </div>\n\n          <div class=\"sampling-overlay\"></div>\n\n          <canvas\n            ref=\"captureCanvas\"\n            width=\"300\"\n            height=\"300\"\n            style=\"display:none;\"\n          ></canvas>\n        </v-card>\n      </v-col>\n\n      <v-col cols=\"12\" md=\"4\">\n        <v-card class=\"px-4 pb-4 h-100\">\n\n          <v-card-title class=\"text-left text-primary\">\n            Luminance Calibration\n          </v-card-title>\n\n          <v-divider class=\"mb-4\"></v-divider>\n\n          <!-- -------------------------------------------------------------\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",
+        "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,
@@ -6863,7 +6863,7 @@
         "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",
+        "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,
@@ -7092,7 +7092,7 @@
         "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>",
+        "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,
@@ -7706,7 +7706,7 @@
         "type": "comment",
         "z": "e6d820ba0f4f184e",
         "g": "039d9046b10d6840",
-        "name": "system ⚠️",
+        "name": "system \u26a0\ufe0f",
         "info": "",
         "x": 1200,
         "y": 80,