From f182032cf9e9b4450a384a9edcd6e8dff257c343 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 9 Sep 2026 22:38:57 -0400
Subject: [PATCH 1/8] Add a shared DatasetPicker component

Review, Query, Training, Scoring and Pipelines each grew their own way of
choosing datasets: an autocomplete, a searchable data table with a plus
button, a checkbox table with select all. This adds one component that
covers all of them (search field, list of the datasets on offer with an
add button per row, select all for whatever the search lists, and an
optional browse button for platforms without a listing) so the pages can
adopt it in follow-up changes. Nothing uses it yet.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1C4QY6hxjHaUPJfWPfQuu
---
 .../dive-common/components/DatasetPicker.vue  | 219 ++++++++++++++++++
 client/dive-common/datasetPicker.spec.ts      |  27 +++
 client/dive-common/datasetPicker.ts           |  38 +++
 3 files changed, 284 insertions(+)
 create mode 100644 client/dive-common/components/DatasetPicker.vue
 create mode 100644 client/dive-common/datasetPicker.spec.ts
 create mode 100644 client/dive-common/datasetPicker.ts

diff --git a/client/dive-common/components/DatasetPicker.vue b/client/dive-common/components/DatasetPicker.vue
new file mode 100644
index 000000000..5f86382ce
--- /dev/null
+++ b/client/dive-common/components/DatasetPicker.vue
@@ -0,0 +1,219 @@
+<script lang="ts">
+import {
+  computed, defineComponent, PropType, ref,
+} from 'vue';
+import type { DataTableHeader } from 'vuetify';
+import { clientSettings } from 'dive-common/store/settings';
+import { itemsPerPageOptions } from 'dive-common/constants';
+import { DatasetPickerRow, filterDatasetRows, selectableIds } from 'dive-common/datasetPicker';
+
+const DefaultHeaders: DataTableHeader[] = [
+  { text: 'Dataset', value: 'name', sortable: true },
+  {
+    text: 'Type', value: 'type', sortable: true, width: 160,
+  },
+];
+
+/**
+ * The one way datasets are chosen across the app: a searchable list of the
+ * datasets on offer, an add button per row, and select all for everything
+ * the search lists. Pages keep their own table of what they selected; this
+ * only offers. Platforms without a listing (the web) can show a browse
+ * button instead, through `pickerLabel` and the `pick` event.
+ */
+export default defineComponent({
+  name: 'DatasetPicker',
+  props: {
+    /** Datasets on offer, selected ones included (they show as taken). */
+    items: {
+      type: Array as PropType<DatasetPickerRow[]>,
+      required: true,
+    },
+    selectedIds: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    /** Columns before the add button; extra values come from the rows. */
+    headers: {
+      type: Array as PropType<DataTableHeader[]>,
+      default: () => DefaultHeaders,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    noDataText: {
+      type: String,
+      default: 'No datasets available.',
+    },
+    /** Label of a platform browse button; empty hides it. */
+    pickerLabel: {
+      type: String,
+      default: '',
+    },
+    picking: {
+      type: Boolean,
+      default: false,
+    },
+    /** Hide the paging footer for short lists. */
+    compact: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { emit }) {
+    const search = ref('');
+
+    const searchFields = computed(() => props.headers.map((h) => h.value));
+    const listed = computed(() => filterDatasetRows(props.items, search.value, searchFields.value));
+    const addable = computed(() => selectableIds(listed.value, props.selectedIds));
+    const selected = computed(() => new Set(props.selectedIds));
+
+    const tableHeaders = computed<DataTableHeader[]>(() => [
+      ...props.headers,
+      {
+        text: '', value: 'picker-actions', sortable: false, width: 96, align: 'end',
+      },
+    ]);
+
+    function addAll() {
+      if (addable.value.length) emit('add-many', addable.value);
+    }
+
+    return {
+      search,
+      listed,
+      addable,
+      selected,
+      tableHeaders,
+      addAll,
+      clientSettings,
+      itemsPerPageOptions,
+    };
+  },
+});
+</script>
+
+<template>
+  <div class="dataset-picker">
+    <div
+      v-if="title || hint"
+      class="mb-1"
+    >
+      <div
+        v-if="title"
+        class="text-subtitle-2"
+      >
+        {{ title }}
+      </div>
+      <div
+        v-if="hint"
+        class="text-caption grey--text"
+      >
+        {{ hint }}
+      </div>
+    </div>
+    <div class="d-flex align-center flex-wrap picker-toolbar mb-1">
+      <v-text-field
+        v-model="search"
+        append-icon="mdi-magnify"
+        label="Search datasets"
+        dense
+        outlined
+        single-line
+        hide-details
+        clearable
+        class="picker-search"
+      />
+      <v-spacer />
+      <v-btn
+        v-if="pickerLabel"
+        small
+        outlined
+        :loading="picking"
+        class="ml-2"
+        @click="$emit('pick')"
+      >
+        <v-icon
+          small
+          left
+        >
+          mdi-folder-search
+        </v-icon>
+        {{ pickerLabel }}
+      </v-btn>
+      <v-btn
+        small
+        color="success"
+        outlined
+        :disabled="addable.length === 0"
+        class="ml-2"
+        :title="`Add the ${addable.length} listed dataset${addable.length === 1 ? '' : 's'} not yet selected`"
+        @click="addAll"
+      >
+        <v-icon
+          small
+          left
+        >
+          mdi-check-all
+        </v-icon>
+        Select all{{ addable.length ? ` (${addable.length})` : '' }}
+      </v-btn>
+    </div>
+    <v-data-table
+      dense
+      :headers="tableHeaders"
+      :items="listed"
+      :items-per-page.sync="clientSettings.rowsPerPage"
+      :footer-props="{ itemsPerPageOptions }"
+      :hide-default-footer="compact && listed.length <= clientSettings.rowsPerPage"
+      :no-data-text="items.length ? 'Nothing matches the search.' : noDataText"
+      :item-class="(item) => (selected.has(item.id) ? 'picker-row-selected' : '')"
+      class="picker-table"
+    >
+      <template #[`item.picker-actions`]="{ item }">
+        <span class="d-inline-flex align-center">
+          <slot
+            name="row-actions"
+            :item="item"
+          />
+          <v-btn
+            :key="item.id"
+            icon
+            x-small
+            :color="selected.has(item.id) ? 'grey' : 'success'"
+            :disabled="selected.has(item.id)"
+            :title="selected.has(item.id) ? 'Already selected' : 'Add'"
+            @click="$emit('add', item.id)"
+          >
+            <v-icon small>
+              {{ selected.has(item.id) ? 'mdi-check' : 'mdi-plus' }}
+            </v-icon>
+          </v-btn>
+        </span>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.picker-toolbar {
+  gap: 4px 0;
+}
+
+.picker-search {
+  max-width: 360px;
+}
+
+.picker-table ::v-deep td {
+  padding: 2px 8px !important;
+}
+
+.picker-table ::v-deep .picker-row-selected td {
+  color: #888;
+}
+</style>
diff --git a/client/dive-common/datasetPicker.spec.ts b/client/dive-common/datasetPicker.spec.ts
new file mode 100644
index 000000000..9a7d03417
--- /dev/null
+++ b/client/dive-common/datasetPicker.spec.ts
@@ -0,0 +1,27 @@
+import { filterDatasetRows, selectableIds } from './datasetPicker';
+
+const rows = [
+  {
+    id: 'a', name: 'Amchitka East', type: 'image-sequence', fps: 5,
+  },
+  {
+    id: 'b', name: 'Bering clip', type: 'video', fps: 30,
+  },
+  { id: 'c', name: 'Caton rig', type: 'multi' },
+];
+
+describe('filterDatasetRows', () => {
+  it('matches any listed field, ignoring case and surrounding space', () => {
+    expect(filterDatasetRows(rows, '  VIDEO ').map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, 'ri').map((r) => r.id)).toEqual(['b', 'c']);
+    expect(filterDatasetRows(rows, '30', ['fps']).map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, '')).toHaveLength(3);
+  });
+});
+
+describe('selectableIds', () => {
+  it('leaves out what is already selected', () => {
+    expect(selectableIds(rows, ['b'])).toEqual(['a', 'c']);
+    expect(selectableIds(filterDatasetRows(rows, 'rig'), ['c'])).toEqual([]);
+  });
+});
diff --git a/client/dive-common/datasetPicker.ts b/client/dive-common/datasetPicker.ts
new file mode 100644
index 000000000..a3b1bc558
--- /dev/null
+++ b/client/dive-common/datasetPicker.ts
@@ -0,0 +1,38 @@
+/**
+ * Rows and filtering behind the shared dataset picker, kept free of Vue so
+ * the search behaviour is testable and identical on every page.
+ */
+
+/** A dataset offered for selection; extra fields feed extra table columns. */
+export interface DatasetPickerRow {
+  id: string;
+  name: string;
+  type?: string;
+  [column: string]: unknown;
+}
+
+/**
+ * Rows whose listed fields contain the search text (case-insensitive,
+ * whitespace-trimmed). An empty search keeps everything.
+ */
+export function filterDatasetRows<T extends DatasetPickerRow>(
+  rows: readonly T[],
+  search: string,
+  fields: readonly string[] = ['name', 'type'],
+): T[] {
+  const needle = search.trim().toLowerCase();
+  if (!needle) return [...rows];
+  return rows.filter((row) => fields.some((field) => {
+    const value = row[field];
+    return value !== undefined && value !== null && String(value).toLowerCase().includes(needle);
+  }));
+}
+
+/** Ids of the listed rows not yet selected: what "select all" adds. */
+export function selectableIds<T extends DatasetPickerRow>(
+  rows: readonly T[],
+  selectedIds: readonly string[],
+): string[] {
+  const selected = new Set(selectedIds);
+  return rows.filter((row) => !selected.has(row.id)).map((row) => row.id);
+}

From 055661a0c7f86c7fdba73083a2689ea2d99e70c7 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 9 Sep 2026 22:44:58 -0400
Subject: [PATCH 2/8] Use DatasetPicker on the Training and Pipelines pages

Both pages offered their datasets through their own data table with a
plus button (Pipelines also had its own search and select all); they now
share the picker, which keeps the fps column and Training's view button
through the picker's headers and row-actions slot. Training's staged
items are typed as the cache rows they always were.

The picker's search field is clearable, which yields null; filter on an
empty string in that case.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1C4QY6hxjHaUPJfWPfQuu
---
 .../dive-common/components/DatasetPicker.vue  | 12 ++-
 client/dive-common/datasetPicker.spec.ts      |  1 +
 client/dive-common/datasetPicker.ts           |  5 +-
 .../frontend/components/MultiPipeline.vue     | 91 +++----------------
 .../frontend/components/MultiTrainingMenu.vue | 82 ++++++-----------
 5 files changed, 54 insertions(+), 137 deletions(-)

diff --git a/client/dive-common/components/DatasetPicker.vue b/client/dive-common/components/DatasetPicker.vue
index 5f86382ce..5d3d0a94a 100644
--- a/client/dive-common/components/DatasetPicker.vue
+++ b/client/dive-common/components/DatasetPicker.vue
@@ -66,10 +66,11 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
-    const search = ref('');
+    /** Null when the field's clear button is used. */
+    const search = ref<string | null>('');
 
     const searchFields = computed(() => props.headers.map((h) => h.value));
-    const listed = computed(() => filterDatasetRows(props.items, search.value, searchFields.value));
+    const listed = computed(() => filterDatasetRows(props.items, search.value ?? '', searchFields.value));
     const addable = computed(() => selectableIds(listed.value, props.selectedIds));
     const selected = computed(() => new Set(props.selectedIds));
 
@@ -80,6 +81,10 @@ export default defineComponent({
       },
     ]);
 
+    function rowClass(item: DatasetPickerRow) {
+      return selected.value.has(item.id) ? 'picker-row-selected' : '';
+    }
+
     function addAll() {
       if (addable.value.length) emit('add-many', addable.value);
     }
@@ -90,6 +95,7 @@ export default defineComponent({
       addable,
       selected,
       tableHeaders,
+      rowClass,
       addAll,
       clientSettings,
       itemsPerPageOptions,
@@ -172,7 +178,7 @@ export default defineComponent({
       :footer-props="{ itemsPerPageOptions }"
       :hide-default-footer="compact && listed.length <= clientSettings.rowsPerPage"
       :no-data-text="items.length ? 'Nothing matches the search.' : noDataText"
-      :item-class="(item) => (selected.has(item.id) ? 'picker-row-selected' : '')"
+      :item-class="rowClass"
       class="picker-table"
     >
       <template #[`item.picker-actions`]="{ item }">
diff --git a/client/dive-common/datasetPicker.spec.ts b/client/dive-common/datasetPicker.spec.ts
index 9a7d03417..33fbcf00c 100644
--- a/client/dive-common/datasetPicker.spec.ts
+++ b/client/dive-common/datasetPicker.spec.ts
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { filterDatasetRows, selectableIds } from './datasetPicker';
 
 const rows = [
diff --git a/client/dive-common/datasetPicker.ts b/client/dive-common/datasetPicker.ts
index a3b1bc558..c4bf35723 100644
--- a/client/dive-common/datasetPicker.ts
+++ b/client/dive-common/datasetPicker.ts
@@ -3,12 +3,11 @@
  * the search behaviour is testable and identical on every page.
  */
 
-/** A dataset offered for selection; extra fields feed extra table columns. */
+/** A dataset offered for selection; any extra fields can feed extra table columns. */
 export interface DatasetPickerRow {
   id: string;
   name: string;
   type?: string;
-  [column: string]: unknown;
 }
 
 /**
@@ -23,7 +22,7 @@ export function filterDatasetRows<T extends DatasetPickerRow>(
   const needle = search.trim().toLowerCase();
   if (!needle) return [...rows];
   return rows.filter((row) => fields.some((field) => {
-    const value = row[field];
+    const value = (row as unknown as Record<string, unknown>)[field];
     return value !== undefined && value !== null && String(value).toLowerCase().includes(needle);
   }));
 }
diff --git a/client/platform/desktop/frontend/components/MultiPipeline.vue b/client/platform/desktop/frontend/components/MultiPipeline.vue
index 5e7399611..31381f64a 100644
--- a/client/platform/desktop/frontend/components/MultiPipeline.vue
+++ b/client/platform/desktop/frontend/components/MultiPipeline.vue
@@ -11,7 +11,6 @@ import { useRoute, useRouter } from 'vue-router/composables';
 import { Pipe, Pipelines, useApi } from 'dive-common/apispec';
 import { parentDatasetId } from 'dive-common/compositeDatasetId';
 import {
-  itemsPerPageOptions,
   stereoPipelineMarker,
   multiCamPipelineMarkers,
   MultiType,
@@ -23,6 +22,7 @@ import {
   pipelineRequiresCalibration,
 } from 'dive-common/pipelineCalibration';
 import PipelineCalibrationWarningIcon from 'dive-common/components/PipelineCalibrationWarningIcon.vue';
+import DatasetPicker from 'dive-common/components/DatasetPicker.vue';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { clientSettings } from 'dive-common/store/settings';
 import { datasets, JsonConfigCache } from '../store/dataset';
@@ -80,14 +80,6 @@ const headersTmpl: DataTableHeader[] = [
     width: 80,
   },
 ];
-const availableDatasetHeaders = headersTmpl.concat(
-  {
-    text: 'Include',
-    value: 'include',
-    sortable: false,
-    width: 80,
-  },
-);
 const stagedDatasetHeaders: DataTableHeader[] = headersTmpl.concat([
   {
     text: 'Remove',
@@ -127,7 +119,6 @@ function getAvailableItems(): JsonConfigCache[] {
   return Object.values(datasets.value);
 }
 const availableItems: Ref<JsonConfigCache[]> = ref([]);
-const availableDatasetSearch = ref('');
 const stagedDatasetIds: Ref<string[]> = ref([]);
 const stagedDatasets = computed(() => availableItems.value.filter((item: JsonConfigCache) => stagedDatasetIds.value.includes(item.id)));
 const calibrationAvailableByDatasetId = ref<Record<string, boolean>>({});
@@ -180,28 +171,10 @@ function toggleStaged(item: JsonConfigCache) {
     stagedDatasetIds.value.push(item.id);
   }
 }
-function datasetMatchesSearch(item: JsonConfigCache, search: string) {
-  if (!search) {
-    return true;
-  }
-  const record = item as unknown as Record<string, unknown>;
-  return headersTmpl.some((header) => {
-    const value = String(record[header.value] ?? '').toLowerCase();
-    return value.includes(search);
-  });
-}
-/* Mirrors the table's default search so "select all" only stages what is listed. */
-const unstagedSearchMatches = computed(() => {
-  const search = availableDatasetSearch.value.trim().toLowerCase();
-  return availableItems.value.filter((item) => (
-    !stagedDatasetIds.value.includes(item.id)
-    && datasetMatchesSearch(item, search)
-  ));
-});
-function stageAllAvailable() {
-  stagedDatasetIds.value = stagedDatasetIds.value.concat(
-    unstagedSearchMatches.value.map((item) => item.id),
-  );
+/** Stage the picked datasets that are not staged yet. */
+function stageIds(ids: string[]) {
+  const staged = new Set(stagedDatasetIds.value);
+  stagedDatasetIds.value = stagedDatasetIds.value.concat(ids.filter((id) => !staged.has(id)));
 }
 
 async function runPipelineForDatasets() {
@@ -370,54 +343,14 @@ onBeforeMount(async () => {
         Available datasets
       </v-card-title>
       <v-card-text>These datasets are compatible with the chosen pipeline.</v-card-text>
-      <v-row class="mb-2">
-        <v-col cols="6">
-          <v-text-field
-            v-model="availableDatasetSearch"
-            append-icon="mdi-magnify"
-            label="Search"
-            single-line
-            hide-details
-          />
-        </v-col>
-        <v-spacer />
-        <v-col
-          cols="auto"
-          class="align-self-end"
-        >
-          <v-btn
-            :disabled="unstagedSearchMatches.length === 0"
-            color="success"
-            small
-            @click="stageAllAvailable"
-          >
-            <v-icon left>
-              mdi-check-all
-            </v-icon>
-            Select all
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-data-table
-        dense
-        v-bind="{ headers: availableDatasetHeaders, items: availableItems }"
-        :footer-props="{ itemsPerPageOptions }"
-        :items-per-page.sync="clientSettings.rowsPerPage"
-        :search="availableDatasetSearch"
+      <DatasetPicker
+        :items="availableItems"
+        :selected-ids="stagedDatasetIds"
+        :headers="headersTmpl"
         no-data-text="No compatible datasets found for the selected pipeline."
-      >
-        <template #[`item.include`]="{ item }">
-          <v-btn
-            :key="item.name"
-            :disabled="stagedDatasetIds.includes(item.id)"
-            color="success"
-            x-small
-            @click="toggleStaged(item)"
-          >
-            <v-icon>mdi-plus</v-icon>
-          </v-btn>
-        </template>
-      </v-data-table>
+        @add="stageIds([$event])"
+        @add-many="stageIds"
+      />
     </div>
   </div>
 </template>
diff --git a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
index cf38b2cac..62b194a55 100644
--- a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
+++ b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
@@ -12,11 +12,12 @@ import {
   watch,
 } from 'vue';
 import {
-  DatasetConfig, Pipelines, TrainingConfigs, useApi, Pipe,
+  Pipelines, TrainingConfigs, useApi, Pipe,
 } from 'dive-common/apispec';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
 import { itemsPerPageOptions, simplifyTrainingName } from 'dive-common/constants';
 import { clientSettings } from 'dive-common/store/settings';
+import DatasetPicker from 'dive-common/components/DatasetPicker.vue';
 
 import { useRoute, useRouter } from 'vue-router/composables';
 import { DesktopJob, RunTraining } from 'platform/desktop/constants';
@@ -31,6 +32,7 @@ function joinPath(dir: string, filename: string) {
 }
 
 export default defineComponent({
+  components: { DatasetPicker },
   setup() {
     const {
       runTraining, getPipelineList, deleteTrainedPipeline, getTrainingConfigurations, exportTrainedPipeline,
@@ -128,7 +130,7 @@ export default defineComponent({
     ];
 
     const data = reactive({
-      stagedItems: {} as Record<string, DatasetConfig>,
+      stagedItems: {} as Record<string, JsonConfigCache>,
       trainingOutputName: '',
       selectedTrainingConfig: 'foo.whatever',
       fineTuneTraining: false,
@@ -186,7 +188,7 @@ export default defineComponent({
       return [];
     });
 
-    function toggleStaged(meta: DatasetConfig) {
+    function toggleStaged(meta: JsonConfigCache) {
       if (data.stagedItems[meta.id]) {
         del(data.stagedItems, meta.id);
       } else {
@@ -194,16 +196,18 @@ export default defineComponent({
       }
     }
     const availableItems = computed(() => Object.values(datasets.value)
-      .filter((item) => item.subType === null)
-      .map((item) => ({
-        ...item,
-        included: item.id in data.stagedItems,
-      })));
+      .filter((item) => item.subType === null));
 
     const stagedItems = computed(() => Object.values(data.stagedItems));
 
-    function getAvailableItemClass({ included }: JsonConfigCache & { included: boolean }) {
-      return included ? 'disabled-row' : '';
+    const stagedIds = computed(() => Object.keys(data.stagedItems));
+
+    /** Stage the picked datasets that are not staged yet. */
+    function stageIds(ids: string[]) {
+      ids.forEach((id) => {
+        const meta = datasets.value[id];
+        if (meta && !data.stagedItems[id]) toggleStaged(meta);
+      });
     }
 
     const isReadyToTrain = computed(() => (
@@ -343,7 +347,8 @@ export default defineComponent({
       labelFile,
       clearLabelText,
       toggleStaged,
-      getAvailableItemClass,
+      stagedIds,
+      stageIds,
       deleteModel,
       exportModel,
       simplifyTrainingName,
@@ -375,17 +380,7 @@ export default defineComponent({
       },
       available: {
         items: availableItems,
-        headers: headersTmpl.concat({
-          text: 'View',
-          value: 'view',
-          sortable: false,
-          width: 80,
-        }, {
-          text: 'Include',
-          value: 'action',
-          sortable: false,
-          width: 80,
-        }),
+        headers: headersTmpl,
       },
       staged: {
         items: stagedItems,
@@ -582,37 +577,28 @@ export default defineComponent({
       <v-card-text>
         These datasets meet the requirements for the chosen training configuration.
       </v-card-text>
-      <v-data-table
-        dense
-        v-bind="{ headers: available.headers, items: available.items.value }"
-        :footer-props="{ itemsPerPageOptions }"
-        :items-per-page.sync="clientSettings.rowsPerPage"
-        :item-class="getAvailableItemClass"
+      <DatasetPicker
+        :items="available.items.value"
+        :selected-ids="stagedIds"
+        :headers="available.headers"
         no-data-text="No data meets criteria for chosen configuration"
+        @add="stageIds([$event])"
+        @add-many="stageIds"
       >
-        <template #[`item.action`]="{ item }">
+        <template #row-actions="{ item }">
           <v-btn
-            :key="item.name"
-            :disabled="item.included"
-            color="success"
+            icon
             x-small
-            @click="toggleStaged(item)"
-          >
-            <v-icon>mdi-plus</v-icon>
-          </v-btn>
-        </template>
-        <template #[`item.view`]="{ item }">
-          <v-btn
-            :key="item.name"
-            :disabled="item.included"
             color="info"
-            x-small
+            title="Open in the viewer"
             @click="$router.push({ name: 'viewer', params: { id: item.id } })"
           >
-            <v-icon>mdi-eye</v-icon>
+            <v-icon small>
+              mdi-eye
+            </v-icon>
           </v-btn>
         </template>
-      </v-data-table>
+      </DatasetPicker>
     </div>
 
     <div>
@@ -652,11 +638,3 @@ export default defineComponent({
     </div>
   </div>
 </template>
-
-<style lang="scss">
-.multitraining-menu {
-  .disabled-row {
-    color: #444444;
-  }
-}
-</style>

From 6d850ed12848ea9cda6c3c68946c031c7f8f9916 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 9 Sep 2026 22:52:08 -0400
Subject: [PATCH 3/8] DatasetPicker: remove all, per-row remove, and hold the
 list in place

Selected rows now show a clickable check that removes them, and a
"Remove all (n)" button drops every listed selection, mirroring select
all. Adding or removing keeps the picker at the same place on screen:
the pages list the selection above it, so growing that list used to
push the picker down under the user's pointer.

Training and Pipelines section titles and descriptions lose their card
padding so they line up with the tables and the picker under them.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1C4QY6hxjHaUPJfWPfQuu
---
 .../dive-common/components/DatasetPicker.vue  | 107 ++++++++++++++++--
 .../frontend/components/MultiPipeline.vue     |  26 +++--
 .../frontend/components/MultiTrainingMenu.vue |  25 ++--
 3 files changed, 134 insertions(+), 24 deletions(-)

diff --git a/client/dive-common/components/DatasetPicker.vue b/client/dive-common/components/DatasetPicker.vue
index 5d3d0a94a..1e3581711 100644
--- a/client/dive-common/components/DatasetPicker.vue
+++ b/client/dive-common/components/DatasetPicker.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  computed, defineComponent, PropType, ref,
+  computed, defineComponent, nextTick, PropType, ref,
 } from 'vue';
 import type { DataTableHeader } from 'vuetify';
 import { clientSettings } from 'dive-common/store/settings';
@@ -73,6 +73,45 @@ export default defineComponent({
     const listed = computed(() => filterDatasetRows(props.items, search.value ?? '', searchFields.value));
     const addable = computed(() => selectableIds(listed.value, props.selectedIds));
     const selected = computed(() => new Set(props.selectedIds));
+    /** Listed rows that are selected: what "remove all" drops. */
+    const removable = computed(() => listed.value
+      .filter((row) => selected.value.has(row.id))
+      .map((row) => row.id));
+    const root = ref<HTMLElement | null>(null);
+
+    function scrollParentOf(el: HTMLElement): HTMLElement | null {
+      let node = el.parentElement;
+      while (node) {
+        const style = window.getComputedStyle(node);
+        if (/(auto|scroll)/.test(style.overflowY) && node.scrollHeight > node.clientHeight) {
+          return node;
+        }
+        node = node.parentElement;
+      }
+      return null;
+    }
+
+    /**
+     * Run a change, then scroll so the picker stays where it was on screen:
+     * pages list their selection above the picker, so adding to it would
+     * otherwise push the list the user is working in down the page.
+     */
+    async function holdInPlace(change: () => void) {
+      const el = root.value;
+      if (!el) {
+        change();
+        return;
+      }
+      const before = el.getBoundingClientRect().top;
+      change();
+      await nextTick();
+      await new Promise((resolve) => { window.requestAnimationFrame(resolve); });
+      const delta = el.getBoundingClientRect().top - before;
+      if (Math.abs(delta) < 1) return;
+      const parent = scrollParentOf(el);
+      if (parent) parent.scrollTop += delta;
+      else window.scrollBy(0, delta);
+    }
 
     const tableHeaders = computed<DataTableHeader[]>(() => [
       ...props.headers,
@@ -85,18 +124,35 @@ export default defineComponent({
       return selected.value.has(item.id) ? 'picker-row-selected' : '';
     }
 
+    function add(id: string) {
+      holdInPlace(() => emit('add', id));
+    }
+
+    function remove(id: string) {
+      holdInPlace(() => emit('remove', id));
+    }
+
     function addAll() {
-      if (addable.value.length) emit('add-many', addable.value);
+      if (addable.value.length) holdInPlace(() => emit('add-many', addable.value));
+    }
+
+    function removeAll() {
+      if (removable.value.length) holdInPlace(() => emit('remove-many', removable.value));
     }
 
     return {
       search,
       listed,
       addable,
+      removable,
       selected,
+      root,
       tableHeaders,
       rowClass,
+      add,
+      remove,
       addAll,
+      removeAll,
       clientSettings,
       itemsPerPageOptions,
     };
@@ -105,7 +161,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="dataset-picker">
+  <div
+    ref="root"
+    class="dataset-picker"
+  >
     <div
       v-if="title || hint"
       class="mb-1"
@@ -169,6 +228,23 @@ export default defineComponent({
         </v-icon>
         Select all{{ addable.length ? ` (${addable.length})` : '' }}
       </v-btn>
+      <v-btn
+        small
+        color="error"
+        outlined
+        :disabled="removable.length === 0"
+        class="ml-2"
+        :title="`Remove the ${removable.length} listed dataset${removable.length === 1 ? '' : 's'} from the selection`"
+        @click="removeAll"
+      >
+        <v-icon
+          small
+          left
+        >
+          mdi-close-box-multiple-outline
+        </v-icon>
+        Remove all{{ removable.length ? ` (${removable.length})` : '' }}
+      </v-btn>
     </div>
     <v-data-table
       dense
@@ -188,16 +264,29 @@ export default defineComponent({
             :item="item"
           />
           <v-btn
-            :key="item.id"
+            v-if="selected.has(item.id)"
+            :key="`${item.id}-remove`"
+            icon
+            x-small
+            color="grey"
+            title="Selected; click to remove"
+            @click="remove(item.id)"
+          >
+            <v-icon small>
+              mdi-check
+            </v-icon>
+          </v-btn>
+          <v-btn
+            v-else
+            :key="`${item.id}-add`"
             icon
             x-small
-            :color="selected.has(item.id) ? 'grey' : 'success'"
-            :disabled="selected.has(item.id)"
-            :title="selected.has(item.id) ? 'Already selected' : 'Add'"
-            @click="$emit('add', item.id)"
+            color="success"
+            title="Add"
+            @click="add(item.id)"
           >
             <v-icon small>
-              {{ selected.has(item.id) ? 'mdi-check' : 'mdi-plus' }}
+              mdi-plus
             </v-icon>
           </v-btn>
         </span>
diff --git a/client/platform/desktop/frontend/components/MultiPipeline.vue b/client/platform/desktop/frontend/components/MultiPipeline.vue
index 31381f64a..e7431c103 100644
--- a/client/platform/desktop/frontend/components/MultiPipeline.vue
+++ b/client/platform/desktop/frontend/components/MultiPipeline.vue
@@ -176,6 +176,10 @@ function stageIds(ids: string[]) {
   const staged = new Set(stagedDatasetIds.value);
   stagedDatasetIds.value = stagedDatasetIds.value.concat(ids.filter((id) => !staged.has(id)));
 }
+function unstageIds(ids: string[]) {
+  const dropped = new Set(ids);
+  stagedDatasetIds.value = stagedDatasetIds.value.filter((id) => !dropped.has(id));
+}
 
 async function runPipelineForDatasets() {
   const pipeline = selectedPipeline.value;
@@ -224,16 +228,18 @@ onBeforeMount(async () => {
 <template>
   <div>
     <div class="mb-4">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Run a pipeline on multiple datasets
       </v-card-title>
-      <v-card-text>Choose a pipeline to run, then select datasets.</v-card-text>
+      <v-card-text class="px-0">
+        Choose a pipeline to run, then select datasets.
+      </v-card-text>
     </div>
     <div class="mb-4">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Choose a VIAME pipeline
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         <v-row>
           <v-col cols="6">
             <v-select
@@ -295,7 +301,9 @@ onBeforeMount(async () => {
         </v-row>
       </v-card-text>
       <div v-if="selectedPipeline">
-        <v-card-title>Datasets staged for selected pipeline</v-card-title>
+        <v-card-title class="px-0">
+          Datasets staged for selected pipeline
+        </v-card-title>
         <v-data-table
           dense
           v-bind="{
@@ -339,10 +347,12 @@ onBeforeMount(async () => {
       v-if="selectedPipeline"
       class="mb-4"
     >
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Available datasets
       </v-card-title>
-      <v-card-text>These datasets are compatible with the chosen pipeline.</v-card-text>
+      <v-card-text class="px-0">
+        These datasets are compatible with the chosen pipeline.
+      </v-card-text>
       <DatasetPicker
         :items="availableItems"
         :selected-ids="stagedDatasetIds"
@@ -350,6 +360,8 @@ onBeforeMount(async () => {
         no-data-text="No compatible datasets found for the selected pipeline."
         @add="stageIds([$event])"
         @add-many="stageIds"
+        @remove="unstageIds([$event])"
+        @remove-many="unstageIds"
       />
     </div>
   </div>
diff --git a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
index 62b194a55..d5e7d0558 100644
--- a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
+++ b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
@@ -210,6 +210,12 @@ export default defineComponent({
       });
     }
 
+    function unstageIds(ids: string[]) {
+      ids.forEach((id) => {
+        if (data.stagedItems[id]) toggleStaged(data.stagedItems[id]);
+      });
+    }
+
     const isReadyToTrain = computed(() => (
       stagedItems.value.length > 0
         && data.selectedTrainingConfig
@@ -349,6 +355,7 @@ export default defineComponent({
       toggleStaged,
       stagedIds,
       stageIds,
+      unstageIds,
       deleteModel,
       exportModel,
       simplifyTrainingName,
@@ -399,10 +406,10 @@ export default defineComponent({
 <template>
   <div class="multitraining-menu">
     <div class="mb-4">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Staged for training ({{ staged.items.value.length }})
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         Add datasets to the staging area and choose a training configuration.
       </v-card-text>
       <v-row
@@ -530,10 +537,10 @@ export default defineComponent({
       </div>
     </div>
     <div v-if="resumable.items.value.length">
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Interrupted training runs
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         These runs did not finish, but their intermediate files are still on disk.
         Resuming continues from the last saved training state.
       </v-card-text>
@@ -571,10 +578,10 @@ export default defineComponent({
     </div>
 
     <div>
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Available for training
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         These datasets meet the requirements for the chosen training configuration.
       </v-card-text>
       <DatasetPicker
@@ -584,6 +591,8 @@ export default defineComponent({
         no-data-text="No data meets criteria for chosen configuration"
         @add="stageIds([$event])"
         @add-many="stageIds"
+        @remove="unstageIds([$event])"
+        @remove-many="unstageIds"
       >
         <template #row-actions="{ item }">
           <v-btn
@@ -602,10 +611,10 @@ export default defineComponent({
     </div>
 
     <div>
-      <v-card-title class="text-h4">
+      <v-card-title class="text-h4 px-0">
         Trained models
       </v-card-title>
-      <v-card-text>
+      <v-card-text class="px-0">
         Here are all your trained models
       </v-card-text>
       <v-data-table

From 9e703587a0cb50c9d5608dd85affa8fb698136b5 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 9 Sep 2026 22:59:48 -0400
Subject: [PATCH 4/8] Pipelines: list datasets on entry and put the selection
 under the picker

The available datasets no longer wait for a pipeline to be chosen; the
run button stays disabled until one is. The selected datasets and the
run button move below the picker, so adding to the selection no longer
pushes the list the user is working in down the page. That makes the
picker's scroll hold unnecessary, so it is removed.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1C4QY6hxjHaUPJfWPfQuu
---
 .../dive-common/components/DatasetPicker.vue  | 61 ++----------
 .../frontend/components/MultiPipeline.vue     | 98 +++++++++----------
 2 files changed, 52 insertions(+), 107 deletions(-)

diff --git a/client/dive-common/components/DatasetPicker.vue b/client/dive-common/components/DatasetPicker.vue
index 1e3581711..c8d160fa0 100644
--- a/client/dive-common/components/DatasetPicker.vue
+++ b/client/dive-common/components/DatasetPicker.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  computed, defineComponent, nextTick, PropType, ref,
+  computed, defineComponent, PropType, ref,
 } from 'vue';
 import type { DataTableHeader } from 'vuetify';
 import { clientSettings } from 'dive-common/store/settings';
@@ -77,41 +77,6 @@ export default defineComponent({
     const removable = computed(() => listed.value
       .filter((row) => selected.value.has(row.id))
       .map((row) => row.id));
-    const root = ref<HTMLElement | null>(null);
-
-    function scrollParentOf(el: HTMLElement): HTMLElement | null {
-      let node = el.parentElement;
-      while (node) {
-        const style = window.getComputedStyle(node);
-        if (/(auto|scroll)/.test(style.overflowY) && node.scrollHeight > node.clientHeight) {
-          return node;
-        }
-        node = node.parentElement;
-      }
-      return null;
-    }
-
-    /**
-     * Run a change, then scroll so the picker stays where it was on screen:
-     * pages list their selection above the picker, so adding to it would
-     * otherwise push the list the user is working in down the page.
-     */
-    async function holdInPlace(change: () => void) {
-      const el = root.value;
-      if (!el) {
-        change();
-        return;
-      }
-      const before = el.getBoundingClientRect().top;
-      change();
-      await nextTick();
-      await new Promise((resolve) => { window.requestAnimationFrame(resolve); });
-      const delta = el.getBoundingClientRect().top - before;
-      if (Math.abs(delta) < 1) return;
-      const parent = scrollParentOf(el);
-      if (parent) parent.scrollTop += delta;
-      else window.scrollBy(0, delta);
-    }
 
     const tableHeaders = computed<DataTableHeader[]>(() => [
       ...props.headers,
@@ -124,20 +89,12 @@ export default defineComponent({
       return selected.value.has(item.id) ? 'picker-row-selected' : '';
     }
 
-    function add(id: string) {
-      holdInPlace(() => emit('add', id));
-    }
-
-    function remove(id: string) {
-      holdInPlace(() => emit('remove', id));
-    }
-
     function addAll() {
-      if (addable.value.length) holdInPlace(() => emit('add-many', addable.value));
+      if (addable.value.length) emit('add-many', addable.value);
     }
 
     function removeAll() {
-      if (removable.value.length) holdInPlace(() => emit('remove-many', removable.value));
+      if (removable.value.length) emit('remove-many', removable.value);
     }
 
     return {
@@ -146,11 +103,8 @@ export default defineComponent({
       addable,
       removable,
       selected,
-      root,
       tableHeaders,
       rowClass,
-      add,
-      remove,
       addAll,
       removeAll,
       clientSettings,
@@ -161,10 +115,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div
-    ref="root"
-    class="dataset-picker"
-  >
+  <div class="dataset-picker">
     <div
       v-if="title || hint"
       class="mb-1"
@@ -270,7 +221,7 @@ export default defineComponent({
             x-small
             color="grey"
             title="Selected; click to remove"
-            @click="remove(item.id)"
+            @click="$emit('remove', item.id)"
           >
             <v-icon small>
               mdi-check
@@ -283,7 +234,7 @@ export default defineComponent({
             x-small
             color="success"
             title="Add"
-            @click="add(item.id)"
+            @click="$emit('add', item.id)"
           >
             <v-icon small>
               mdi-plus
diff --git a/client/platform/desktop/frontend/components/MultiPipeline.vue b/client/platform/desktop/frontend/components/MultiPipeline.vue
index e7431c103..f492f8d84 100644
--- a/client/platform/desktop/frontend/components/MultiPipeline.vue
+++ b/client/platform/desktop/frontend/components/MultiPipeline.vue
@@ -118,7 +118,7 @@ function getAvailableItems(): JsonConfigCache[] {
   }
   return Object.values(datasets.value);
 }
-const availableItems: Ref<JsonConfigCache[]> = ref([]);
+const availableItems = computed(() => getAvailableItems());
 const stagedDatasetIds: Ref<string[]> = ref([]);
 const stagedDatasets = computed(() => availableItems.value.filter((item: JsonConfigCache) => stagedDatasetIds.value.includes(item.id)));
 const calibrationAvailableByDatasetId = ref<Record<string, boolean>>({});
@@ -161,9 +161,6 @@ function isPipelineItemDisabledForCalibration(pipe: Pipe) {
   );
 }
 
-watch(selectedPipeline, () => {
-  availableItems.value = getAvailableItems();
-});
 function toggleStaged(item: JsonConfigCache) {
   if (stagedDatasetIds.value.includes(item.id)) {
     stagedDatasetIds.value = stagedDatasetIds.value.filter((id: string) => id !== item.id);
@@ -220,7 +217,6 @@ async function runPipelineForDatasets() {
 onBeforeMount(async () => {
   stagedDatasetIds.value = preselectedDatasetIds();
   unsortedPipelines.value = await getPipelineList();
-  availableItems.value = getAvailableItems();
 });
 
 </script>
@@ -300,58 +296,13 @@ onBeforeMount(async () => {
           </v-col>
         </v-row>
       </v-card-text>
-      <div v-if="selectedPipeline">
-        <v-card-title class="px-0">
-          Datasets staged for selected pipeline
-        </v-card-title>
-        <v-data-table
-          dense
-          v-bind="{
-            headers: selectedPipeline && pipelineCreatesNewDataset(selectedPipeline)
-              ? createNewDatasetHeaders : stagedDatasetHeaders,
-            items: stagedDatasets,
-          }"
-          :items-per-page.sync="clientSettings.rowsPerPage"
-          hide-default-footer
-          :hide-default-header="stagedDatasets.length === 0"
-          no-data-text="Select datasets from the table below"
-        >
-          <template #[`item.remove`]="{ item }">
-            <v-btn
-              color="error"
-              x-small
-              @click="toggleStaged(item)"
-            >
-              <v-icon>mdi-minus</v-icon>
-            </v-btn>
-          </template>
-          <template #[`item.output`]="{ item }">
-            <b>{{ computeOutputDatasetName(item) }}</b>
-          </template>
-        </v-data-table>
-      </div>
-      <v-row class="mt-7">
-        <v-spacer />
-        <v-col cols="auto">
-          <v-btn
-            :disabled="runDisabled"
-            color="primary"
-            @click="runPipelineForDatasets"
-          >
-            Run pipeline for ({{ stagedDatasets.length }}) Datasets
-          </v-btn>
-        </v-col>
-      </v-row>
     </div>
-    <div
-      v-if="selectedPipeline"
-      class="mb-4"
-    >
+    <div class="mb-4">
       <v-card-title class="text-h4 px-0">
         Available datasets
       </v-card-title>
       <v-card-text class="px-0">
-        These datasets are compatible with the chosen pipeline.
+        Add the datasets to run the pipeline on. Measurement pipelines list stereo datasets only.
       </v-card-text>
       <DatasetPicker
         :items="availableItems"
@@ -364,5 +315,48 @@ onBeforeMount(async () => {
         @remove-many="unstageIds"
       />
     </div>
+    <div class="mb-4 selected-datasets">
+      <v-card-title class="text-h4 px-0">
+        Selected datasets
+      </v-card-title>
+      <v-data-table
+        dense
+        v-bind="{
+          headers: selectedPipeline && pipelineCreatesNewDataset(selectedPipeline)
+            ? createNewDatasetHeaders : stagedDatasetHeaders,
+          items: stagedDatasets,
+        }"
+        :items-per-page.sync="clientSettings.rowsPerPage"
+        hide-default-footer
+        :hide-default-header="stagedDatasets.length === 0"
+        no-data-text="Add datasets from the list above."
+      >
+        <template #[`item.remove`]="{ item }">
+          <v-btn
+            color="error"
+            x-small
+            @click="toggleStaged(item)"
+          >
+            <v-icon>mdi-minus</v-icon>
+          </v-btn>
+        </template>
+        <template #[`item.output`]="{ item }">
+          <b>{{ computeOutputDatasetName(item) }}</b>
+        </template>
+      </v-data-table>
+      <v-row class="mt-4">
+        <v-spacer />
+        <v-col cols="auto">
+          <v-btn
+            :disabled="runDisabled"
+            color="primary"
+            :title="selectedPipeline ? '' : 'Choose a pipeline first'"
+            @click="runPipelineForDatasets"
+          >
+            Run pipeline for ({{ stagedDatasets.length }}) Datasets
+          </v-btn>
+        </v-col>
+      </v-row>
+    </div>
   </div>
 </template>

From 193622f556b1335308dd7b1642383da88a36ea50 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 9 Sep 2026 23:04:36 -0400
Subject: [PATCH 5/8] Pipelines: list every dataset before a pipeline is chosen

getAvailableItems still returned nothing without a selected pipeline,
which left the picker empty on entry despite the section now showing.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1C4QY6hxjHaUPJfWPfQuu
---
 .../platform/desktop/frontend/components/MultiPipeline.vue  | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/platform/desktop/frontend/components/MultiPipeline.vue b/client/platform/desktop/frontend/components/MultiPipeline.vue
index f492f8d84..4ae647f81 100644
--- a/client/platform/desktop/frontend/components/MultiPipeline.vue
+++ b/client/platform/desktop/frontend/components/MultiPipeline.vue
@@ -105,10 +105,8 @@ function computeOutputDatasetName(item: JsonConfigCache) {
   const timeStamp = (new Date()).toISOString().replace(/[:.]/g, '-');
   return `${selectedPipeline.value?.name}_${item.name}_${timeStamp}`;
 }
+/** Every dataset, narrowed to stereo ones once a measurement pipeline type is chosen. */
 function getAvailableItems(): JsonConfigCache[] {
-  if (!selectedPipelineType.value || !selectedPipeline.value) {
-    return [];
-  }
   if (selectedPipelineType.value === stereoPipelineMarker) {
     // Only allow stereo datasets to be included for bulk pipeline
     // operations if the selected pipeline type is a measurement.
@@ -308,7 +306,7 @@ onBeforeMount(async () => {
         :items="availableItems"
         :selected-ids="stagedDatasetIds"
         :headers="headersTmpl"
-        no-data-text="No compatible datasets found for the selected pipeline."
+        no-data-text="No datasets in the library are compatible with this pipeline."
         @add="stageIds([$event])"
         @add-many="stageIds"
         @remove="unstageIds([$event])"

From 80262f9d8a5f6660313d981e9bb78705f97a7f51 Mon Sep 17 00:00:00 2001
From: Matt Dawkins <matt.dawkins@kitware.com>
Date: Wed, 9 Sep 2026 23:09:10 -0400
Subject: [PATCH 6/8] Training: put the selected datasets under the available
 list

Same order as the Pipelines page: configuration first (name, config
file, labels, the annotated-frames and fine-tuning options), then the
picker, then the selected datasets with the Train button. Interrupted
runs follow the selection instead of splitting the configuration from
the datasets.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W1C4QY6hxjHaUPJfWPfQuu
---
 .../frontend/components/MultiTrainingMenu.vue | 126 ++++++++++--------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
index d5e7d0558..42abf18ee 100644
--- a/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
+++ b/client/platform/desktop/frontend/components/MultiTrainingMenu.vue
@@ -407,10 +407,10 @@ export default defineComponent({
   <div class="multitraining-menu">
     <div class="mb-4">
       <v-card-title class="text-h4 px-0">
-        Staged for training ({{ staged.items.value.length }})
+        Training configuration
       </v-card-title>
       <v-card-text class="px-0">
-        Add datasets to the staging area and choose a training configuration.
+        Name the model and choose a configuration, then add datasets below.
       </v-card-text>
       <v-row
         class="mt-4 pt-0"
@@ -485,12 +485,74 @@ export default defineComponent({
         </v-col>
         <v-spacer />
       </v-row>
+      <div class="d-flex flex-row mt-4">
+        <v-checkbox
+          v-model="data.annotatedFramesOnly"
+          label="Use annotated frames only"
+          dense
+          hint="Train only on frames with groundtruth and ignore frames without annotations"
+          persistent-hint
+          class="py-0 my-0"
+        />
+      </div>
+      <div class="d-flex flex-row mt-2">
+        <v-checkbox
+          v-model="data.fineTuneTraining"
+          label="Fine Tuning"
+          hint="Fine tune an existing model"
+        />
+        <v-spacer />
+        <v-select
+          v-if="data.fineTuneTraining"
+          v-model="data.selectedFineTune"
+          :items="modelNames"
+          label="Fine Tune Model"
+        />
+      </div>
+    </div>
+    <div>
+      <v-card-title class="text-h4 px-0">
+        Available for training
+      </v-card-title>
+      <v-card-text class="px-0">
+        These datasets meet the requirements for the chosen training configuration.
+      </v-card-text>
+      <DatasetPicker
+        :items="available.items.value"
+        :selected-ids="stagedIds"
+        :headers="available.headers"
+        no-data-text="No data meets criteria for chosen configuration"
+        @add="stageIds([$event])"
+        @add-many="stageIds"
+        @remove="unstageIds([$event])"
+        @remove-many="unstageIds"
+      >
+        <template #row-actions="{ item }">
+          <v-btn
+            icon
+            x-small
+            color="info"
+            title="Open in the viewer"
+            @click="$router.push({ name: 'viewer', params: { id: item.id } })"
+          >
+            <v-icon small>
+              mdi-eye
+            </v-icon>
+          </v-btn>
+        </template>
+      </DatasetPicker>
+    </div>
+
+    <div class="mb-4 selected-datasets">
+      <v-card-title class="text-h4 px-0">
+        Selected datasets ({{ staged.items.value.length }})
+      </v-card-title>
       <v-data-table
         v-bind="{ headers: staged.headers, items: staged.items.value }"
         hide-default-footer
         dense
         :hide-default-header="staged.items.value.length === 0"
-        no-data-text="No data chosen for training."
+        no-data-text="Add datasets from the list above."
       >
         <template #[`item.action`]="{ item }">
           <v-btn
@@ -503,15 +565,7 @@ export default defineComponent({
           </v-btn>
         </template>
       </v-data-table>
-      <div class="d-flex flex-row mt-7">
-        <v-checkbox
-          v-model="data.annotatedFramesOnly"
-          label="Use annotated frames only"
-          dense
-          hint="Train only on frames with groundtruth and ignore frames without annotations"
-          persistent-hint
-          class="py-0 my-0"
-        />
+      <div class="d-flex flex-row mt-4">
         <v-spacer />
         <v-btn
           :disabled="!isReadyToTrain"
@@ -521,21 +575,8 @@ export default defineComponent({
           Train on ({{ staged.items.value.length }}) Datasets
         </v-btn>
       </div>
-      <div class="d-flex flex-row mt-7">
-        <v-checkbox
-          v-model="data.fineTuneTraining"
-          label="Fine Tuning"
-          hint="Fine tune an existing model"
-        />
-        <v-spacer />
-        <v-select
-          v-if="data.fineTuneTraining"
-          v-model="data.selectedFineTune"
-          :items="modelNames"
-          label="Fine Tune Model"
-        />
-      </div>
     </div>
+
     <div v-if="resumable.items.value.length">
       <v-card-title class="text-h4 px-0">
         Interrupted training runs
@@ -577,39 +618,6 @@ export default defineComponent({
       </v-data-table>
     </div>
 
-    <div>
-      <v-card-title class="text-h4 px-0">
-        Available for training
-      </v-card-title>
-      <v-card-text class="px-0">
-        These datasets meet the requirements for the chosen training configuration.
-      </v-card-text>
-      <DatasetPicker
-        :items="available.items.value"
-        :selected-ids="stagedIds"
-        :headers="available.headers"
-        no-data-text="No data meets criteria for chosen configuration"
-        @add="stageIds([$event])"
-        @add-many="stageIds"
-        @remove="unstageIds([$event])"
-        @remove-many="unstageIds"
-      >
-        <template #row-actions="{ item }">
-          <v-btn
-            icon
-            x-small
-            color="info"
-            title="Open in the viewer"
-            @click="$router.push({ name: 'viewer', params: { id: item.id } })"
-          >
-            <v-icon small>
-              mdi-eye
-            </v-icon>
-          </v-btn>
-        </template>
-      </DatasetPicker>
-    </div>
-
     <div>
       <v-card-title class="text-h4 px-0">
         Trained models

From b712596040f5af8303cf02e8d8f366975c26f898 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 10 Sep 2026 13:40:21 -0400
Subject: [PATCH 7/8] remove type searching and add a type filter instead

---
 .../dive-common/components/DatasetPicker.vue  | 92 +++++++++++++++++--
 client/dive-common/datasetPicker.spec.ts      | 27 +++++-
 client/dive-common/datasetPicker.ts           | 43 ++++++---
 3 files changed, 138 insertions(+), 24 deletions(-)

diff --git a/client/dive-common/components/DatasetPicker.vue b/client/dive-common/components/DatasetPicker.vue
index c8d160fa0..1750a4afe 100644
--- a/client/dive-common/components/DatasetPicker.vue
+++ b/client/dive-common/components/DatasetPicker.vue
@@ -5,7 +5,9 @@ import {
 import type { DataTableHeader } from 'vuetify';
 import { clientSettings } from 'dive-common/store/settings';
 import { itemsPerPageOptions } from 'dive-common/constants';
-import { DatasetPickerRow, filterDatasetRows, selectableIds } from 'dive-common/datasetPicker';
+import {
+  DatasetPickerRow, datasetTypeOptions, filterDatasetRows, selectableIds,
+} from 'dive-common/datasetPicker';
 
 const DefaultHeaders: DataTableHeader[] = [
   { text: 'Dataset', value: 'name', sortable: true },
@@ -15,11 +17,11 @@ const DefaultHeaders: DataTableHeader[] = [
 ];
 
 /**
- * The one way datasets are chosen across the app: a searchable list of the
- * datasets on offer, an add button per row, and select all for everything
- * the search lists. Pages keep their own table of what they selected; this
- * only offers. Platforms without a listing (the web) can show a browse
- * button instead, through `pickerLabel` and the `pick` event.
+ * The one way datasets are chosen across the app: a searchable, type-filterable
+ * list of the datasets on offer, an add button per row, and select all for
+ * everything the filters list. Pages keep their own table of what they
+ * selected; this only offers. Platforms without a listing (the web) can show a
+ * browse button instead, through `pickerLabel` and the `pick` event.
  */
 export default defineComponent({
   name: 'DatasetPicker',
@@ -68,9 +70,17 @@ export default defineComponent({
   setup(props, { emit }) {
     /** Null when the field's clear button is used. */
     const search = ref<string | null>('');
+    /** Null means all types; otherwise the selected type string. */
+    const typeFilter = ref<string | null>(null);
 
-    const searchFields = computed(() => props.headers.map((h) => h.value));
-    const listed = computed(() => filterDatasetRows(props.items, search.value ?? '', searchFields.value));
+    const typeOptions = computed(() => datasetTypeOptions(props.items));
+    const showTypeFilter = computed(() => props.headers.some((h) => h.value === 'type'));
+    const listed = computed(() => filterDatasetRows(
+      props.items,
+      search.value,
+      ['name'],
+      typeFilter.value,
+    ));
     const addable = computed(() => selectableIds(listed.value, props.selectedIds));
     const selected = computed(() => new Set(props.selectedIds));
     /** Listed rows that are selected: what "remove all" drops. */
@@ -97,8 +107,15 @@ export default defineComponent({
       if (removable.value.length) emit('remove-many', removable.value);
     }
 
+    function setTypeFilter(value: string | null) {
+      typeFilter.value = value;
+    }
+
     return {
       search,
+      typeFilter,
+      typeOptions,
+      showTypeFilter,
       listed,
       addable,
       removable,
@@ -107,6 +124,7 @@ export default defineComponent({
       rowClass,
       addAll,
       removeAll,
+      setTypeFilter,
       clientSettings,
       itemsPerPageOptions,
     };
@@ -204,10 +222,56 @@ export default defineComponent({
       :items-per-page.sync="clientSettings.rowsPerPage"
       :footer-props="{ itemsPerPageOptions }"
       :hide-default-footer="compact && listed.length <= clientSettings.rowsPerPage"
-      :no-data-text="items.length ? 'Nothing matches the search.' : noDataText"
+      :no-data-text="items.length ? 'Nothing matches the filters.' : noDataText"
       :item-class="rowClass"
       class="picker-table"
     >
+      <template #header.type="{ header }">
+        <v-menu
+          v-if="showTypeFilter"
+          open-on-hover
+          bottom
+          offset-y
+          open-delay="200"
+          close-delay="250"
+          :nudge-bottom="4"
+        >
+          <template #activator="{ on, attrs }">
+            <span
+              class="type-header-label"
+              v-bind="attrs"
+              v-on="on"
+            >
+              {{ header.text }}
+              <v-icon
+                x-small
+                class="ml-1"
+                :color="typeFilter ? 'primary' : undefined"
+                :class="{ 'type-filter-idle': !typeFilter }"
+              >
+                {{ typeFilter ? 'mdi-filter' : 'mdi-filter-outline' }}
+              </v-icon>
+            </span>
+          </template>
+          <v-list dense>
+            <v-list-item
+              :input-value="!typeFilter"
+              @click="setTypeFilter(null)"
+            >
+              <v-list-item-title>All</v-list-item-title>
+            </v-list-item>
+            <v-list-item
+              v-for="type in typeOptions"
+              :key="type"
+              :input-value="typeFilter === type"
+              @click="setTypeFilter(type)"
+            >
+              <v-list-item-title>{{ type }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <span v-else>{{ header.text }}</span>
+      </template>
       <template #[`item.picker-actions`]="{ item }">
         <span class="d-inline-flex align-center">
           <slot
@@ -255,6 +319,16 @@ export default defineComponent({
   max-width: 360px;
 }
 
+.type-header-label {
+  display: inline-flex;
+  align-items: center;
+  cursor: default;
+}
+
+.type-filter-idle {
+  opacity: 0.45;
+}
+
 .picker-table ::v-deep td {
   padding: 2px 8px !important;
 }
diff --git a/client/dive-common/datasetPicker.spec.ts b/client/dive-common/datasetPicker.spec.ts
index 33fbcf00c..89c8f93c5 100644
--- a/client/dive-common/datasetPicker.spec.ts
+++ b/client/dive-common/datasetPicker.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { filterDatasetRows, selectableIds } from './datasetPicker';
+import { datasetTypeOptions, filterDatasetRows, selectableIds } from './datasetPicker';
 
 const rows = [
   {
@@ -12,11 +12,30 @@ const rows = [
 ];
 
 describe('filterDatasetRows', () => {
-  it('matches any listed field, ignoring case and surrounding space', () => {
-    expect(filterDatasetRows(rows, '  VIDEO ').map((r) => r.id)).toEqual(['b']);
+  it('matches names only by default, ignoring case and surrounding space', () => {
+    expect(filterDatasetRows(rows, '  bering ').map((r) => r.id)).toEqual(['b']);
     expect(filterDatasetRows(rows, 'ri').map((r) => r.id)).toEqual(['b', 'c']);
-    expect(filterDatasetRows(rows, '30', ['fps']).map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, 'video')).toHaveLength(0);
     expect(filterDatasetRows(rows, '')).toHaveLength(3);
+    expect(filterDatasetRows(rows, null)).toHaveLength(3);
+  });
+
+  it('keeps rows whose type equals the type filter, ignoring case and space', () => {
+    expect(filterDatasetRows(rows, '', ['name'], '  VIDEO ').map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, '', ['name'], 'image-sequence').map((r) => r.id)).toEqual(['a']);
+    expect(filterDatasetRows(rows, '', ['name'], null)).toHaveLength(3);
+  });
+
+  it('applies search and type filter together', () => {
+    expect(filterDatasetRows(rows, 'ri', ['name'], 'video').map((r) => r.id)).toEqual(['b']);
+    expect(filterDatasetRows(rows, 'ri', ['name'], 'multi').map((r) => r.id)).toEqual(['c']);
+    expect(filterDatasetRows(rows, 'Amchitka', ['name'], 'video')).toHaveLength(0);
+  });
+});
+
+describe('datasetTypeOptions', () => {
+  it('lists distinct types in sorted order', () => {
+    expect(datasetTypeOptions(rows)).toEqual(['image-sequence', 'multi', 'video']);
   });
 });
 
diff --git a/client/dive-common/datasetPicker.ts b/client/dive-common/datasetPicker.ts
index c4bf35723..c214b4b80 100644
--- a/client/dive-common/datasetPicker.ts
+++ b/client/dive-common/datasetPicker.ts
@@ -1,6 +1,6 @@
 /**
  * Rows and filtering behind the shared dataset picker, kept free of Vue so
- * the search behaviour is testable and identical on every page.
+ * the search and type-filter behaviour is testable and identical on every page.
  */
 
 /** A dataset offered for selection; any extra fields can feed extra table columns. */
@@ -11,20 +11,41 @@ export interface DatasetPickerRow {
 }
 
 /**
- * Rows whose listed fields contain the search text (case-insensitive,
- * whitespace-trimmed). An empty search keeps everything.
+ * Rows matching an optional type equality filter and an optional substring
+ * search across the listed fields (both case-insensitive, whitespace-trimmed).
+ * Search defaults to the name only; type is narrowed separately via typeFilter.
+ * Empty / null filters keep everything for that criterion.
  */
 export function filterDatasetRows<T extends DatasetPickerRow>(
   rows: readonly T[],
-  search: string,
-  fields: readonly string[] = ['name', 'type'],
+  search: string | null | undefined = '',
+  fields: readonly string[] = ['name'],
+  typeFilter: string | null | undefined = null,
 ): T[] {
-  const needle = search.trim().toLowerCase();
-  if (!needle) return [...rows];
-  return rows.filter((row) => fields.some((field) => {
-    const value = (row as unknown as Record<string, unknown>)[field];
-    return value !== undefined && value !== null && String(value).toLowerCase().includes(needle);
-  }));
+  const typeNeedle = (typeFilter ?? '').trim().toLowerCase();
+  const searchNeedle = (search ?? '').trim().toLowerCase();
+  if (!typeNeedle && !searchNeedle) return [...rows];
+  return rows.filter((row) => {
+    if (typeNeedle && (row.type ?? '').toLowerCase() !== typeNeedle) {
+      return false;
+    }
+    if (!searchNeedle) return true;
+    return fields.some((field) => {
+      const value = (row as unknown as Record<string, unknown>)[field];
+      return value !== undefined && value !== null && String(value).toLowerCase().includes(searchNeedle);
+    });
+  });
+}
+
+/** Distinct type values present in the rows, sorted for a stable select list. */
+export function datasetTypeOptions<T extends DatasetPickerRow>(
+  rows: readonly T[],
+): string[] {
+  const types = new Set<string>();
+  rows.forEach((row) => {
+    if (row.type) types.add(row.type);
+  });
+  return [...types].sort((a, b) => a.localeCompare(b));
 }
 
 /** Ids of the listed rows not yet selected: what "select all" adds. */

From a479bd787e766b1b17660f919cc1e018f2f35ef6 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Thu, 10 Sep 2026 13:42:33 -0400
Subject: [PATCH 8/8] performance by removing calibration check for whole
 dataset, make sure incompatible staged ids are pruned for stereo pipelines

---
 .../frontend/components/MultiPipeline.vue     | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/platform/desktop/frontend/components/MultiPipeline.vue b/client/platform/desktop/frontend/components/MultiPipeline.vue
index 4ae647f81..7f9c7f6b4 100644
--- a/client/platform/desktop/frontend/components/MultiPipeline.vue
+++ b/client/platform/desktop/frontend/components/MultiPipeline.vue
@@ -119,6 +119,9 @@ function getAvailableItems(): JsonConfigCache[] {
 const availableItems = computed(() => getAvailableItems());
 const stagedDatasetIds: Ref<string[]> = ref([]);
 const stagedDatasets = computed(() => availableItems.value.filter((item: JsonConfigCache) => stagedDatasetIds.value.includes(item.id)));
+const stagedParentIds = computed(() => [
+  ...new Set(stagedDatasetIds.value.map((id) => parentDatasetId(id))),
+]);
 const calibrationAvailableByDatasetId = ref<Record<string, boolean>>({});
 
 async function refreshCalibrationForDatasets(datasetIds: string[]) {
@@ -135,8 +138,18 @@ async function refreshCalibrationForDatasets(datasetIds: string[]) {
   };
 }
 
+/** Drop staged ids that the current pipeline type no longer offers (e.g. non-stereo under measurement). */
 watch(availableItems, (items) => {
-  refreshCalibrationForDatasets(items.map((item) => item.id));
+  const available = new Set(items.map((item) => item.id));
+  const next = stagedDatasetIds.value.filter((id) => available.has(id));
+  if (next.length !== stagedDatasetIds.value.length) {
+    stagedDatasetIds.value = next;
+  }
+});
+
+/** Calibration status only for what is staged, not the whole library. */
+watch(stagedDatasetIds, (ids) => {
+  refreshCalibrationForDatasets(ids);
 }, { immediate: true });
 
 const runDisabled = computed(() => {
@@ -155,7 +168,7 @@ function isPipelineItemDisabledForCalibration(pipe: Pipe) {
   return pipelineDisabledForMissingCalibration(
     pipe,
     calibrationAvailableByDatasetId.value,
-    availableItems.value.map((dataset) => parentDatasetId(dataset.id)),
+    stagedParentIds.value,
   );
 }
 
@@ -163,7 +176,7 @@ function toggleStaged(item: JsonConfigCache) {
   if (stagedDatasetIds.value.includes(item.id)) {
     stagedDatasetIds.value = stagedDatasetIds.value.filter((id: string) => id !== item.id);
   } else {
-    stagedDatasetIds.value.push(item.id);
+    stagedDatasetIds.value = stagedDatasetIds.value.concat(item.id);
   }
 }
 /** Stage the picked datasets that are not staged yet. */
@@ -179,8 +192,6 @@ function unstageIds(ids: string[]) {
 async function runPipelineForDatasets() {
   const pipeline = selectedPipeline.value;
   if (pipeline !== null) {
-    // Only the staged datasets compatible with (and displayed for) the
-    // selected pipeline; staged ids can hold datasets other pipelines accept.
     const runIds = stagedDatasets.value.map((item: JsonConfigCache) => item.id);
     const results = await Promise.allSettled(
       runIds.map((datasetId: string) => {