From 0dc62f68801562d841109e029cbe88c6c38a5ecf Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 5 Sep 2023 19:37:49 -0400
Subject: [PATCH 1/7] refactor(PatientBrowser): remove unused code

---
 src/components/PatientBrowser.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/PatientBrowser.vue b/src/components/PatientBrowser.vue
index 0a2873a5a..43dccb0e6 100644
--- a/src/components/PatientBrowser.vue
+++ b/src/components/PatientBrowser.vue
@@ -1,11 +1,9 @@
 <script lang="ts">
 import { computed, defineComponent, ref, toRefs, watch } from 'vue';
-import type { Ref } from 'vue';
 import ItemGroup from '@/src/components/ItemGroup.vue';
 import { useDICOMStore } from '../store/datasets-dicom';
 import {
   DataSelection,
-  DICOMSelection,
   selectionEquals,
   useDatasetStore,
 } from '../store/datasets';
@@ -27,8 +25,6 @@ export default defineComponent({
   setup(props) {
     const { patientKey } = toRefs(props);
 
-    const selectedSeries: Ref<DICOMSelection[]> = ref([]);
-
     const dicomStore = useDICOMStore();
     const dataStore = useDatasetStore();
 
@@ -81,7 +77,6 @@ export default defineComponent({
       selected,
       selectedAll,
       selectedSome,
-      selectedSeries,
       primarySelection,
       removeSelectedStudies,
       studies,

From cd36500accbc5ff8dded737e5b087f29f6f098c3 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 5 Sep 2023 21:52:46 -0400
Subject: [PATCH 2/7] fix(MeasurementsToolList): render all annotation tool
 types in one component

---
 src/components/AnnotationsModule.vue       | 46 ++++++---------
 src/components/MeasurementRulerDetails.vue | 23 ++++++++
 src/components/MeasurementToolDetails.vue  | 14 +++++
 src/components/MeasurementsRulerList.vue   | 23 --------
 src/components/MeasurementsToolList.vue    | 68 +++++++++++++---------
 5 files changed, 94 insertions(+), 80 deletions(-)
 create mode 100644 src/components/MeasurementRulerDetails.vue
 create mode 100644 src/components/MeasurementToolDetails.vue
 delete mode 100644 src/components/MeasurementsRulerList.vue

diff --git a/src/components/AnnotationsModule.vue b/src/components/AnnotationsModule.vue
index c7f5417ee..a31a3f956 100644
--- a/src/components/AnnotationsModule.vue
+++ b/src/components/AnnotationsModule.vue
@@ -1,26 +1,28 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MeasurementsRulerList from './MeasurementsRulerList.vue';
+<script setup lang="ts">
 import MeasurementsToolList from './MeasurementsToolList.vue';
 import LabelmapList from './LabelmapList.vue';
 import ToolControls from './ToolControls.vue';
 import { usePolygonStore } from '../store/tools/polygons';
 import { useRectangleStore } from '../store/tools/rectangles';
+import { useRulerStore } from '../store/tools/rulers';
+import { AnnotationToolStore } from '../store/tools/useAnnotationTool';
+import MeasurementRulerDetails from './MeasurementRulerDetails.vue';
 
-export default defineComponent({
-  components: {
-    MeasurementsRulerList,
-    MeasurementsToolList,
-    LabelmapList,
-    ToolControls,
+const tools = [
+  {
+    store: useRulerStore() as unknown as AnnotationToolStore<string>,
+    icon: 'mdi-ruler',
+    details: MeasurementRulerDetails,
   },
-  setup() {
-    return {
-      rectangleStore: useRectangleStore(),
-      polygonStore: usePolygonStore(),
-    };
+  {
+    store: useRectangleStore() as unknown as AnnotationToolStore<string>,
+    icon: 'mdi-vector-square',
   },
-});
+  {
+    store: usePolygonStore() as unknown as AnnotationToolStore<string>,
+    icon: 'mdi-pentagon-outline',
+  },
+];
 </script>
 
 <template>
@@ -28,15 +30,7 @@ export default defineComponent({
     <tool-controls />
     <div class="header">Measurements</div>
     <div class="content">
-      <measurements-ruler-list />
-      <measurements-tool-list
-        :tool-store="rectangleStore"
-        icon="mdi-vector-square"
-      />
-      <measurements-tool-list
-        :tool-store="polygonStore"
-        icon="mdi-pentagon-outline"
-      />
+      <measurements-tool-list :tools="tools" />
     </div>
     <div class="text-caption text-center empty-state">No measurements</div>
     <div class="header">Labelmaps</div>
@@ -48,10 +42,6 @@ export default defineComponent({
 </template>
 
 <style scoped>
-.annot-subheader {
-  margin: 8px 0;
-}
-
 .empty-state {
   display: none;
 }
diff --git a/src/components/MeasurementRulerDetails.vue b/src/components/MeasurementRulerDetails.vue
new file mode 100644
index 000000000..9d7212104
--- /dev/null
+++ b/src/components/MeasurementRulerDetails.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useRulerStore } from '@/src/store/tools/rulers';
+import { AnnotationTool } from '../types/annotation-tool';
+
+defineProps<{
+  tool: AnnotationTool<string> & { axis: string };
+}>();
+
+const toolStore = useRulerStore();
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="3">Slice: {{ tool.slice + 1 }}</v-col>
+    <v-col cols="3">Axis: {{ tool.axis }}</v-col>
+    <v-col>
+      Length:
+      <span class="value">
+        {{ toolStore.lengthByID[tool.id].toFixed(2) }}mm
+      </span>
+    </v-col>
+  </v-row>
+</template>
diff --git a/src/components/MeasurementToolDetails.vue b/src/components/MeasurementToolDetails.vue
new file mode 100644
index 000000000..0ded873b5
--- /dev/null
+++ b/src/components/MeasurementToolDetails.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AnnotationTool } from '../types/annotation-tool';
+
+defineProps<{
+  tool: AnnotationTool<string> & { axis: string };
+}>();
+</script>
+
+<template>
+  <v-row>
+    <v-col cols="3">Slice: {{ tool.slice + 1 }}</v-col>
+    <v-col cols="3">Axis: {{ tool.axis }}</v-col>
+  </v-row>
+</template>
diff --git a/src/components/MeasurementsRulerList.vue b/src/components/MeasurementsRulerList.vue
deleted file mode 100644
index 760bcb324..000000000
--- a/src/components/MeasurementsRulerList.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import MeasurementsToolList from '@/src/components/MeasurementsToolList.vue';
-import { useRulerStore } from '@/src/store/tools/rulers';
-
-const toolStore = useRulerStore();
-</script>
-
-<template>
-  <measurements-tool-list :toolStore="toolStore" icon="mdi-ruler">
-    <template v-slot:details="{ tool }">
-      <v-row>
-        <v-col cols="3">Slice: {{ tool.slice + 1 }}</v-col>
-        <v-col cols="3">Axis: {{ tool.axis }}</v-col>
-        <v-col>
-          Length:
-          <span class="value">
-            {{ toolStore.lengthByID[tool.id].toFixed(2) }}mm
-          </span>
-        </v-col>
-      </v-row>
-    </template>
-  </measurements-tool-list>
-</template>
diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index 888fdc68f..f0a3a5f95 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -1,20 +1,28 @@
-<script setup lang="ts" generic="ToolID extends string">
-/* global ToolID:readonly */
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
+import MeasurementToolDetails from './MeasurementToolDetails.vue';
 
-const props = defineProps<{
-  toolStore: AnnotationToolStore<ToolID>;
+type AnnotationToolConfig = {
+  store: AnnotationToolStore<string>;
   icon: string;
+  details?: typeof MeasurementToolDetails;
+};
+
+export type AnnotationTools = Array<AnnotationToolConfig>;
+
+const props = defineProps<{
+  tools: AnnotationTools;
 }>();
 
 const { currentImageID, currentImageMetadata } = useCurrentImage();
 
-const tools = computed(() => {
-  const byID = props.toolStore.toolByID;
-  return props.toolStore.toolIDs
+// Filter and add axis for specific annotation type
+const getTools = (toolStore: AnnotationToolStore<string>) => {
+  const byID = toolStore.toolByID;
+  return toolStore.toolIDs
     .map((id) => byID[id])
     .filter((tool) => !tool.placing && tool.imageID === currentImageID.value)
     .map((tool) => {
@@ -30,27 +38,34 @@ const tools = computed(() => {
         axis,
       };
     });
-});
-
-const remove = (id: ToolID) => {
-  props.toolStore.removeTool(id);
-};
-
-const jumpTo = (id: ToolID) => {
-  props.toolStore.jumpToTool(id);
 };
 
-const toggleHidden = (id: ToolID) => {
-  const toggled = !props.toolStore.toolByID[id].hidden;
-  props.toolStore.updateTool(id, { hidden: toggled });
-};
+// Flatten all tool types and add actions
+const tools = computed(() => {
+  return props.tools.flatMap(
+    ({ store, icon, details = MeasurementToolDetails }) => {
+      const toolsWithAxis = getTools(store);
+      return toolsWithAxis.map((tool) => ({
+        ...tool,
+        icon,
+        details,
+        remove: () => store.removeTool(tool.id),
+        jumpTo: () => store.jumpToTool(tool.id),
+        toggleHidden: () => {
+          const toggled = !store.toolByID[tool.id].hidden;
+          store.updateTool(tool.id, { hidden: toggled });
+        },
+      }));
+    }
+  );
+});
 </script>
 
 <template>
   <v-list-item v-for="tool in tools" :key="tool.id">
     <v-container>
       <v-row class="align-center main-row">
-        <v-icon class="tool-icon">{{ icon }}</v-icon>
+        <v-icon class="tool-icon">{{ tool.icon }}</v-icon>
         <div class="color-dot mr-3" :style="{ backgroundColor: tool.color }" />
 
         <v-list-item-title v-bind="$attrs">
@@ -58,20 +73,20 @@ const toggleHidden = (id: ToolID) => {
         </v-list-item-title>
 
         <span class="ml-auto actions">
-          <v-btn icon variant="text" @click="toggleHidden(tool.id)">
+          <v-btn icon variant="text" @click="tool.toggleHidden()">
             <v-icon v-if="tool.hidden">mdi-eye-off</v-icon>
             <v-icon v-else>mdi-eye</v-icon>
             <v-tooltip location="top" activator="parent">{{
               tool.hidden ? 'Show' : 'Hide'
             }}</v-tooltip>
           </v-btn>
-          <v-btn icon variant="text" @click="jumpTo(tool.id)">
+          <v-btn icon variant="text" @click="tool.jumpTo()">
             <v-icon>mdi-target</v-icon>
             <v-tooltip location="top" activator="parent">
               Reveal Slice
             </v-tooltip>
           </v-btn>
-          <v-btn icon variant="text" @click="remove(tool.id)">
+          <v-btn icon variant="text" @click="tool.remove()">
             <v-icon>mdi-delete</v-icon>
             <v-tooltip location="top" activator="parent">Delete</v-tooltip>
           </v-btn>
@@ -80,12 +95,7 @@ const toggleHidden = (id: ToolID) => {
 
       <v-row class="mt-4">
         <v-list-item-subtitle class="w-100">
-          <slot name="details" v-bind="{ tool }">
-            <v-row>
-              <v-col cols="3">Slice: {{ tool.slice + 1 }}</v-col>
-              <v-col cols="3">Axis: {{ tool.axis }}</v-col>
-            </v-row>
-          </slot>
+          <component :is="tool.details" :tool="tool" />
         </v-list-item-subtitle>
       </v-row>
     </v-container>

From 8d343c14f218e00f627f453d405a6c779a1118fb Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 6 Sep 2023 11:11:59 -0400
Subject: [PATCH 3/7] feat(MeasurementsToolList): add selection and batch
 actions

---
 src/components/MeasurementsToolList.vue | 114 ++++++++++++++++++++----
 src/utils/index.ts                      |   4 +
 2 files changed, 103 insertions(+), 15 deletions(-)

diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index f0a3a5f95..a4a8c87b6 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
+import { nonNullable } from '@/src/utils/index';
 import MeasurementToolDetails from './MeasurementToolDetails.vue';
+import { useMultiSelection } from '../composables/useMultiSelection';
+import { AnnotationTool } from '../types/annotation-tool';
 
 type AnnotationToolConfig = {
   store: AnnotationToolStore<string>;
@@ -55,24 +58,113 @@ const tools = computed(() => {
           const toggled = !store.toolByID[tool.id].hidden;
           store.updateTool(tool.id, { hidden: toggled });
         },
+        updateTool: (patch: Partial<AnnotationTool<string>>) => {
+          store.updateTool(tool.id, patch);
+        },
       }));
     }
   );
 });
+
+// --- selection and batch actions  --- //
+
+const toolIds = computed(() => tools.value.map((tool) => tool.id));
+
+const { selected, selectedAll, selectedSome } = useMultiSelection(toolIds);
+
+const forEachSelectedTool = (
+  callback: (tool: (typeof tools.value)[number]) => void
+) =>
+  selected.value
+    .map((id) => tools.value.find((tool) => id === tool.id))
+    .filter(nonNullable)
+    .forEach(callback);
+
+function removeAll() {
+  forEachSelectedTool((tool) => tool.remove());
+  selected.value = [];
+}
+
+const globalHidden = ref(false);
+
+function toggleGlobalHidden() {
+  globalHidden.value = !globalHidden.value;
+
+  forEachSelectedTool((tool) =>
+    tool.updateTool({ hidden: globalHidden.value })
+  );
+}
 </script>
 
 <template>
+  <v-row no-gutters justify="space-between" align="center" class="mb-1">
+    <v-col cols="6">
+      <v-checkbox
+        class="ml-3"
+        :indeterminate="selectedSome && !selectedAll"
+        label="Select All"
+        v-model="selectedAll"
+        density="compact"
+        hide-details
+      />
+    </v-col>
+    <v-col cols="6" align-self="center" class="d-flex justify-end">
+      <v-btn
+        icon
+        variant="text"
+        :disabled="!selectedSome"
+        @click.stop="toggleGlobalHidden"
+      >
+        <v-icon v-if="globalHidden">mdi-eye-off</v-icon>
+        <v-icon v-else>mdi-eye</v-icon>
+        <v-tooltip location="top" activator="parent">{{
+          globalHidden ? 'Show' : 'Hide'
+        }}</v-tooltip>
+      </v-btn>
+      <v-btn
+        icon
+        variant="text"
+        :disabled="!selectedSome"
+        @click.stop="removeAll"
+      >
+        <v-icon>mdi-delete</v-icon>
+        <v-tooltip :disabled="!selectedSome" location="top" activator="parent">
+          Delete selected
+        </v-tooltip>
+      </v-btn>
+    </v-col>
+  </v-row>
+
   <v-list-item v-for="tool in tools" :key="tool.id">
     <v-container>
-      <v-row class="align-center main-row">
-        <v-icon class="tool-icon">{{ tool.icon }}</v-icon>
-        <div class="color-dot mr-3" :style="{ backgroundColor: tool.color }" />
+      <v-row class="d-flex align-center main-row">
+        <v-checkbox
+          class="no-grow mr-4"
+          density="compact"
+          hide-details
+          :key="tool.id"
+          :value="tool.id"
+          v-model="selected"
+          @click.stop
+        />
 
+        <v-icon class="tool-icon mr-4">{{ tool.icon }}</v-icon>
+
+        <div
+          class="color-dot flex-shrink-0 mr-2"
+          :style="{ backgroundColor: tool.color }"
+        />
         <v-list-item-title v-bind="$attrs">
           {{ tool.labelName }}
         </v-list-item-title>
 
-        <span class="ml-auto actions">
+        <span class="ml-auto flex-shrink-0">
+          <v-btn icon variant="text" @click="tool.jumpTo()">
+            <v-icon>mdi-target</v-icon>
+            <v-tooltip location="top" activator="parent">
+              Reveal Slice
+            </v-tooltip>
+          </v-btn>
           <v-btn icon variant="text" @click="tool.toggleHidden()">
             <v-icon v-if="tool.hidden">mdi-eye-off</v-icon>
             <v-icon v-else>mdi-eye</v-icon>
@@ -80,12 +172,6 @@ const tools = computed(() => {
               tool.hidden ? 'Show' : 'Hide'
             }}</v-tooltip>
           </v-btn>
-          <v-btn icon variant="text" @click="tool.jumpTo()">
-            <v-icon>mdi-target</v-icon>
-            <v-tooltip location="top" activator="parent">
-              Reveal Slice
-            </v-tooltip>
-          </v-btn>
           <v-btn icon variant="text" @click="tool.remove()">
             <v-icon>mdi-delete</v-icon>
             <v-tooltip location="top" activator="parent">Delete</v-tooltip>
@@ -114,15 +200,13 @@ const tools = computed(() => {
   height: 24px;
   background: yellow;
   border-radius: 16px;
-  flex-shrink: 0;
 }
 
 .tool-icon {
-  margin-inline-end: 12px;
   opacity: var(--v-medium-emphasis-opacity);
 }
 
-.actions {
-  flex-shrink: 0;
+.no-grow {
+  flex: 0 0 auto;
 }
 </style>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 92344e6ca..18f5fbb5d 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -273,3 +273,7 @@ export function zodEnumFromObjKeys<K extends string>(
   const [firstKey, ...otherKeys] = Object.keys(obj) as K[];
   return z.enum([firstKey, ...otherKeys]);
 }
+
+export function nonNullable<T>(value: T): value is NonNullable<T> {
+  return value !== null && value !== undefined;
+}

From eccf549d99455f90ce85d53e784ce4d3d845423b Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 6 Sep 2023 12:04:50 -0400
Subject: [PATCH 4/7] fix(useMultiSelection): unselect when all selected just
 unselects one

closes #407
---
 src/components/ImageDataBrowser.vue          |  4 +++-
 src/components/MeasurementsToolList.vue      |  4 +++-
 src/components/PatientBrowser.vue            |  4 +++-
 src/components/PatientStudyVolumeBrowser.vue |  4 +++-
 src/composables/useMultiSelection.ts         | 24 +++++++++-----------
 5 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/components/ImageDataBrowser.vue b/src/components/ImageDataBrowser.vue
index 195b8afd6..d09c372ec 100644
--- a/src/components/ImageDataBrowser.vue
+++ b/src/components/ImageDataBrowser.vue
@@ -123,7 +123,7 @@ export default defineComponent({
 
     // --- selection --- //
 
-    const { selected, selectedAll, selectedSome } =
+    const { selected, selectedAll, selectedSome, toggleSelectAll } =
       useMultiSelection(nonDICOMImages);
 
     function removeSelection() {
@@ -137,6 +137,7 @@ export default defineComponent({
       selected,
       selectedAll,
       selectedSome,
+      toggleSelectAll,
       removeSelection,
       images,
       thumbnails,
@@ -161,6 +162,7 @@ export default defineComponent({
             :indeterminate="selectedSome && !selectedAll"
             label="Select All"
             v-model="selectedAll"
+            @click.stop="toggleSelectAll"
             density="compact"
             hide-details
           />
diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index a4a8c87b6..acb7721fd 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -70,7 +70,8 @@ const tools = computed(() => {
 
 const toolIds = computed(() => tools.value.map((tool) => tool.id));
 
-const { selected, selectedAll, selectedSome } = useMultiSelection(toolIds);
+const { selected, selectedAll, selectedSome, toggleSelectAll } =
+  useMultiSelection(toolIds);
 
 const forEachSelectedTool = (
   callback: (tool: (typeof tools.value)[number]) => void
@@ -104,6 +105,7 @@ function toggleGlobalHidden() {
         :indeterminate="selectedSome && !selectedAll"
         label="Select All"
         v-model="selectedAll"
+        @click.stop="toggleSelectAll"
         density="compact"
         hide-details
       />
diff --git a/src/components/PatientBrowser.vue b/src/components/PatientBrowser.vue
index 43dccb0e6..ea8427c19 100644
--- a/src/components/PatientBrowser.vue
+++ b/src/components/PatientBrowser.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 
     // --- selection --- //
 
-    const { selected, selectedAll, selectedSome } =
+    const { selected, selectedAll, selectedSome, toggleSelectAll } =
       useMultiSelection(studyKeys);
 
     const removeSelectedStudies = () => {
@@ -77,6 +77,7 @@ export default defineComponent({
       selected,
       selectedAll,
       selectedSome,
+      toggleSelectAll,
       primarySelection,
       removeSelectedStudies,
       studies,
@@ -104,6 +105,7 @@ export default defineComponent({
             :indeterminate="selectedSome && !selectedAll"
             label="Select All Studies"
             v-model="selectedAll"
+            @click.stop="toggleSelectAll"
             density="compact"
             hide-details
           />
diff --git a/src/components/PatientStudyVolumeBrowser.vue b/src/components/PatientStudyVolumeBrowser.vue
index 953d04840..2b2316b18 100644
--- a/src/components/PatientStudyVolumeBrowser.vue
+++ b/src/components/PatientStudyVolumeBrowser.vue
@@ -163,7 +163,7 @@ export default defineComponent({
 
     // --- selection --- //
 
-    const { selected, selectedAll, selectedSome } =
+    const { selected, selectedAll, selectedSome, toggleSelectAll } =
       useMultiSelection(volumeKeys);
 
     const removeSelectedDICOMVolumes = () => {
@@ -178,6 +178,7 @@ export default defineComponent({
       selected,
       selectedAll,
       selectedSome,
+      toggleSelectAll,
       thumbnailCache,
       volumes,
       removeSelectedDICOMVolumes,
@@ -195,6 +196,7 @@ export default defineComponent({
           :indeterminate="selectedSome && !selectedAll"
           label="Select All"
           v-model="selectedAll"
+          @click.stop="toggleSelectAll"
           density="compact"
           hide-details
         />
diff --git a/src/composables/useMultiSelection.ts b/src/composables/useMultiSelection.ts
index 646115c09..6e600234c 100644
--- a/src/composables/useMultiSelection.ts
+++ b/src/composables/useMultiSelection.ts
@@ -1,23 +1,21 @@
-import { computed, Ref, ref, watch, UnwrapRef } from 'vue';
+import { computed, Ref, ref, UnwrapRef } from 'vue';
 
 export function useMultiSelection<T = string>(allItems: Ref<T[]>) {
   const selected = ref<T[]>([]);
-  const selectedAll = ref(false);
   const selectedSome = computed(() => selected.value.length > 0);
-
-  watch(selected, () => {
-    selectedAll.value =
+  const selectedAll = computed(
+    () =>
       selected.value.length > 0 &&
-      selected.value.length === allItems.value.length;
-  });
+      selected.value.length === allItems.value.length
+  );
 
-  watch(selectedAll, (yn) => {
-    if (yn) {
-      selected.value = allItems.value as UnwrapRef<T[]>;
-    } else {
+  const toggleSelectAll = () => {
+    if (selectedAll.value) {
       selected.value = [];
+    } else {
+      selected.value = allItems.value as UnwrapRef<T[]>;
     }
-  });
+  };
 
-  return { selected, selectedAll, selectedSome };
+  return { selected, selectedAll, selectedSome, toggleSelectAll };
 }

From 7158a8e0ef1fffd27b4b4ed427bbc7d40b9b3c3e Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 6 Sep 2023 16:38:53 -0400
Subject: [PATCH 5/7] fix(MeasurementsToolList): global show/hide button based
 on tool state

---
 src/components/AnnotationsModule.vue    |  2 +-
 src/components/MeasurementsToolList.vue | 24 +++++++++++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/AnnotationsModule.vue b/src/components/AnnotationsModule.vue
index a31a3f956..b185e6acb 100644
--- a/src/components/AnnotationsModule.vue
+++ b/src/components/AnnotationsModule.vue
@@ -10,7 +10,7 @@ import MeasurementRulerDetails from './MeasurementRulerDetails.vue';
 
 const tools = [
   {
-    store: useRulerStore() as unknown as AnnotationToolStore<string>,
+    store: useRulerStore(),
     icon: 'mdi-ruler',
     details: MeasurementRulerDetails,
   },
diff --git a/src/components/MeasurementsToolList.vue b/src/components/MeasurementsToolList.vue
index acb7721fd..b65197e81 100644
--- a/src/components/MeasurementsToolList.vue
+++ b/src/components/MeasurementsToolList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
@@ -86,14 +86,20 @@ function removeAll() {
   selected.value = [];
 }
 
-const globalHidden = ref(false);
+// If all selected tools are already hidden, it should be "show".
+// If at least one selected tool is visible, it should be "hide".
+const allHidden = computed(() => {
+  return selected.value
+    .map((id) => tools.value.find((tool) => id === tool.id))
+    .filter(nonNullable)
+    .every((tool) => tool.hidden);
+});
 
 function toggleGlobalHidden() {
-  globalHidden.value = !globalHidden.value;
-
-  forEachSelectedTool((tool) =>
-    tool.updateTool({ hidden: globalHidden.value })
-  );
+  const hidden = !allHidden.value;
+  forEachSelectedTool((tool) => {
+    tool.updateTool({ hidden });
+  });
 }
 </script>
 
@@ -117,10 +123,10 @@ function toggleGlobalHidden() {
         :disabled="!selectedSome"
         @click.stop="toggleGlobalHidden"
       >
-        <v-icon v-if="globalHidden">mdi-eye-off</v-icon>
+        <v-icon v-if="allHidden">mdi-eye-off</v-icon>
         <v-icon v-else>mdi-eye</v-icon>
         <v-tooltip location="top" activator="parent">{{
-          globalHidden ? 'Show' : 'Hide'
+          allHidden ? 'Show' : 'Hide'
         }}</v-tooltip>
       </v-btn>
       <v-btn

From 693f02d3deacc383bd56ff298a699c43c666cb5d Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Tue, 12 Sep 2023 09:18:07 -0400
Subject: [PATCH 6/7] fix(useMultiSelection): remove deleted item from selected

Co-authored-by: Forrest Li <floryst@users.noreply.github.com>
---
 src/composables/useMultiSelection.ts | 14 +++++++++++---
 src/utils/index.ts                   |  2 +-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/composables/useMultiSelection.ts b/src/composables/useMultiSelection.ts
index 6e600234c..1d63ca9c1 100644
--- a/src/composables/useMultiSelection.ts
+++ b/src/composables/useMultiSelection.ts
@@ -1,7 +1,15 @@
-import { computed, Ref, ref, UnwrapRef } from 'vue';
+import { computed, ref, Ref, watch } from 'vue';
 
 export function useMultiSelection<T = string>(allItems: Ref<T[]>) {
-  const selected = ref<T[]>([]);
+  const selected = ref<T[]>([]) as Ref<T[]>;
+
+  // remove deleted item
+  watch(allItems, () => {
+    selected.value = selected.value.filter((item) =>
+      allItems.value.includes(item)
+    );
+  });
+
   const selectedSome = computed(() => selected.value.length > 0);
   const selectedAll = computed(
     () =>
@@ -13,7 +21,7 @@ export function useMultiSelection<T = string>(allItems: Ref<T[]>) {
     if (selectedAll.value) {
       selected.value = [];
     } else {
-      selected.value = allItems.value as UnwrapRef<T[]>;
+      selected.value = allItems.value;
     }
   };
 
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 18f5fbb5d..ad8b326db 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -275,5 +275,5 @@ export function zodEnumFromObjKeys<K extends string>(
 }
 
 export function nonNullable<T>(value: T): value is NonNullable<T> {
-  return value !== null && value !== undefined;
+  return value != null;
 }

From 673e542d7db4a6b4dc791d7c317c11c07f0f7fe4 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 12 Sep 2023 10:06:10 -0400
Subject: [PATCH 7/7] fix(MeasurementToolDetails): avoid line wrapping of Axis:
 Sagittal

---
 src/components/MeasurementRulerDetails.vue | 4 ++--
 src/components/MeasurementToolDetails.vue  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MeasurementRulerDetails.vue b/src/components/MeasurementRulerDetails.vue
index 9d7212104..829c5dbd3 100644
--- a/src/components/MeasurementRulerDetails.vue
+++ b/src/components/MeasurementRulerDetails.vue
@@ -11,8 +11,8 @@ const toolStore = useRulerStore();
 
 <template>
   <v-row>
-    <v-col cols="3">Slice: {{ tool.slice + 1 }}</v-col>
-    <v-col cols="3">Axis: {{ tool.axis }}</v-col>
+    <v-col cols="4">Slice: {{ tool.slice + 1 }}</v-col>
+    <v-col cols="4">Axis: {{ tool.axis }}</v-col>
     <v-col>
       Length:
       <span class="value">
diff --git a/src/components/MeasurementToolDetails.vue b/src/components/MeasurementToolDetails.vue
index 0ded873b5..031f0e860 100644
--- a/src/components/MeasurementToolDetails.vue
+++ b/src/components/MeasurementToolDetails.vue
@@ -8,7 +8,7 @@ defineProps<{
 
 <template>
   <v-row>
-    <v-col cols="3">Slice: {{ tool.slice + 1 }}</v-col>
-    <v-col cols="3">Axis: {{ tool.axis }}</v-col>
+    <v-col cols="4">Slice: {{ tool.slice + 1 }}</v-col>
+    <v-col cols="4">Axis: {{ tool.axis }}</v-col>
   </v-row>
 </template>