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/5] 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/5] 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/5] 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/5] 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/5] =?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,