From 207067cd86accdcc82e79dccec8d85c1a4411c94 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 17 Oct 2024 16:12:03 -0400
Subject: [PATCH 1/7] feat(SegmentList): add opacity slider for selected
 segment

---
 src/components/SegmentGroupOpacity.vue |  2 +-
 src/components/SegmentList.vue         | 45 +++++++++++++++++++++++++-
 2 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/SegmentGroupOpacity.vue b/src/components/SegmentGroupOpacity.vue
index 695f3981..63c3bdbd 100644
--- a/src/components/SegmentGroupOpacity.vue
+++ b/src/components/SegmentGroupOpacity.vue
@@ -25,7 +25,7 @@ const setOpacity = (opacity: number) => {
 
 <template>
   <v-slider
-    class="pa-4"
+    class="ma-4"
     label="Segment Group Opacity"
     min="0"
     max="1"
diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
index d303bd41..ccc5755d 100644
--- a/src/components/SegmentList.vue
+++ b/src/components/SegmentList.vue
@@ -11,6 +11,7 @@ import { hexaToRGBA, rgbaToHexa } from '@/src/utils/color';
 import { reactive, ref, toRefs, computed, watch } from 'vue';
 import { SegmentMask } from '@/src/types/segment';
 import { usePaintToolStore } from '@/src/store/tools/paint';
+import { RGBAColor } from '@kitware/vtk.js/types';
 
 const props = defineProps({
   groupId: {
@@ -57,6 +58,36 @@ watch(
   { immediate: true }
 );
 
+// --- segment opacity --- //
+
+const selectedSegmentMask = computed(() => {
+  if (!selectedSegment.value) return null;
+  return segmentGroupStore.getSegment(groupId.value, selectedSegment.value);
+});
+
+const segmentOpacity = computed(() => {
+  if (!selectedSegmentMask.value) return 1;
+  return selectedSegmentMask.value.color[3] / 255;
+});
+
+const setSegmentOpacity = (opacity: number) => {
+  if (!selectedSegmentMask.value) {
+    return;
+  }
+
+  const color = selectedSegmentMask.value.color;
+  segmentGroupStore.updateSegment(
+    groupId.value,
+    selectedSegmentMask.value.value,
+    {
+      color: [
+        ...(color.slice(0, 3) as [number, number, number]),
+        Math.round(opacity * 255),
+      ],
+    }
+  );
+};
+
 // --- editing state --- //
 
 const editingSegmentValue = ref<Maybe<number>>(null);
@@ -106,6 +137,18 @@ function deleteEditingSegment() {
 </script>
 
 <template>
+  <v-slider
+    class="ma-4"
+    label="Segment Opacity"
+    min="0"
+    max="1"
+    step="0.01"
+    density="compact"
+    hide-details
+    thumb-label
+    :model-value="segmentOpacity"
+    @update:model-value="setSegmentOpacity($event)"
+  />
   <editable-chip-list
     v-model="selectedSegment"
     :items="segments"
@@ -119,7 +162,7 @@ function deleteEditingSegment() {
       <div class="dot-container mr-3">
         <div
           class="color-dot"
-          :style="{ background: rgbaToHexa(item.color) }"
+          :style="{ background: rgbaToHexa([...item.color.slice(0,3), 255] as RGBAColor) }"
         />
       </div>
     </template>

From 80fc1be03457ea4e70ea0d8fcea3d7f4538d67bc Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 17 Oct 2024 16:54:01 -0400
Subject: [PATCH 2/7] feat(segmentGroups): add visible property

---
 src/components/SegmentList.vue                | 26 ++++++++++++++++++-
 .../VtkSegmentationSliceRepresentation.vue    |  2 +-
 src/config.ts                                 |  3 +++
 src/io/state-file/schema.ts                   |  1 +
 src/store/segmentGroups.ts                    |  4 +++
 src/types/segment.ts                          |  1 +
 6 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
index ccc5755d..1d3daebb 100644
--- a/src/components/SegmentList.vue
+++ b/src/components/SegmentList.vue
@@ -88,6 +88,14 @@ const setSegmentOpacity = (opacity: number) => {
   );
 };
 
+const toggleVisible = (value: number) => {
+  const segment = segmentGroupStore.getSegment(groupId.value, value);
+  if (!segment) return;
+  segmentGroupStore.updateSegment(groupId.value, value, {
+    visible: !segment.visible,
+  });
+};
+
 // --- editing state --- //
 
 const editingSegmentValue = ref<Maybe<number>>(null);
@@ -166,7 +174,23 @@ function deleteEditingSegment() {
         />
       </div>
     </template>
-    <template #item-append="{ key }">
+    <template #item-append="{ key, item }">
+      <v-btn
+        icon
+        size="small"
+        density="compact"
+        class="ml-auto mr-1"
+        variant="plain"
+        @click.stop="toggleVisible(key as number)"
+      >
+        <v-icon v-if="item.visible" style="pointer-events: none"
+          >mdi-eye</v-icon
+        >
+        <v-icon v-else style="pointer-events: none">mdi-eye-off</v-icon>
+        <v-tooltip location="left" activator="parent">{{
+          item.visible ? 'Hide' : 'Show'
+        }}</v-tooltip>
+      </v-btn>
       <v-btn
         icon="mdi-pencil"
         size="small"
diff --git a/src/components/vtk/VtkSegmentationSliceRepresentation.vue b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
index 5a5a1d45..0ba1db0f 100644
--- a/src/components/vtk/VtkSegmentationSliceRepresentation.vue
+++ b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
@@ -117,7 +117,7 @@ const applySegmentColoring = () => {
     const r = segment.color[0] || 0;
     const g = segment.color[1] || 0;
     const b = segment.color[2] || 0;
-    const a = segment.color[3] || 0;
+    const a = (segment.visible && segment.color[3]) || 0;
     cfun.addRGBPoint(segment.value, r / 255, g / 255, b / 255);
     ofun.addPoint(segment.value, a / 255);
 
diff --git a/src/config.ts b/src/config.ts
index 5c4375c6..9fc932e7 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -184,16 +184,19 @@ export const DEFAULT_SEGMENT_MASKS: SegmentMask[] = [
     value: 1,
     name: 'Tissue',
     color: [255, 0, 0, 255],
+    visible: true,
   },
   {
     value: 2,
     name: 'Liver',
     color: [0, 255, 0, 255],
+    visible: true,
   },
   {
     value: 3,
     name: 'Heart',
     color: [0, 0, 255, 255],
+    visible: true,
   },
 ];
 
diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index b4abb7af..e251f7ac 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -240,6 +240,7 @@ const SegmentMask = z.object({
   value: z.number(),
   name: z.string(),
   color: RGBAColor,
+  visible: z.boolean().default(true),
 });
 
 export const SegmentGroupMetadata = z.object({
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index ac34b362..e261a847 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -26,6 +26,7 @@ import {
 import { FileEntry } from '../io/types';
 import { ensureSameSpace } from '../io/resample/resample';
 import { useDICOMStore } from './datasets-dicom';
+import { vi } from 'vitest';
 
 const LabelmapArrayType = Uint8Array;
 export type LabelmapArrayType = Uint8Array;
@@ -223,6 +224,7 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
           value: segment.labelID,
           name: segment.SegmentLabel,
           color: [...segment.recommendedDisplayRGBValue, 255],
+          visible: true,
         }));
       }
     }
@@ -237,6 +239,7 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
       value,
       name: makeDefaultSegmentName(value),
       color: getNextColor(),
+      visible: true,
     }));
   }
 
@@ -327,6 +330,7 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
       name: makeDefaultSegmentName(value),
       value,
       color: DEFAULT_SEGMENT_COLOR,
+      visible: true,
     };
   }
 
diff --git a/src/types/segment.ts b/src/types/segment.ts
index dacfb907..6db17d61 100644
--- a/src/types/segment.ts
+++ b/src/types/segment.ts
@@ -4,4 +4,5 @@ export interface SegmentMask {
   value: number;
   name: string;
   color: RGBAColor;
+  visible: boolean;
 }

From 98a76e4debfa30d29341fe4feecf67e600b07774 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 17 Oct 2024 17:16:25 -0400
Subject: [PATCH 3/7] feat(SegmentList): add global visible toggle button

---
 src/components/SegmentList.vue | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
index 1d3daebb..d8e7e75f 100644
--- a/src/components/SegmentList.vue
+++ b/src/components/SegmentList.vue
@@ -96,6 +96,22 @@ const toggleVisible = (value: number) => {
   });
 };
 
+// If all selected tools are already hidden, it should be "show".
+// If at least one selected tool is visible, it should be "hide".
+const allVisible = computed(() => {
+  return segments.value.every((seg) => seg.visible);
+});
+
+function toggleGlobalVisible() {
+  const visible = !allVisible.value;
+
+  segments.value.forEach((seg) => {
+    segmentGroupStore.updateSegment(groupId.value, seg.value, {
+      visible,
+    });
+  });
+}
+
 // --- editing state --- //
 
 const editingSegmentValue = ref<Maybe<number>>(null);
@@ -145,6 +161,17 @@ function deleteEditingSegment() {
 </script>
 
 <template>
+  <v-btn @click.stop="toggleGlobalVisible">
+    Toggle Segments
+    <slot name="append">
+      <v-icon v-if="allVisible" class="pl-2">mdi-eye</v-icon>
+      <v-icon v-else class="pl-2">mdi-eye-off</v-icon>
+      <v-tooltip location="top" activator="parent">{{
+        allVisible ? 'Hide' : 'Show'
+      }}</v-tooltip>
+    </slot>
+  </v-btn>
+
   <v-slider
     class="ma-4"
     label="Segment Opacity"
@@ -157,6 +184,7 @@ function deleteEditingSegment() {
     :model-value="segmentOpacity"
     @update:model-value="setSegmentOpacity($event)"
   />
+
   <editable-chip-list
     v-model="selectedSegment"
     :items="segments"

From 38d46a70e1983d78d0dd41d993052fbb11e52018 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 17 Oct 2024 17:22:28 -0400
Subject: [PATCH 4/7] feat(SegmentGroupControls): move opacity slider above
 list

---
 src/components/SegmentGroupControls.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index 8f1f0dd9..2fcda016 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -204,6 +204,11 @@ function openSaveDialog(id: string) {
       </v-menu>
     </div>
     <v-divider />
+
+    <segment-group-opacity
+      v-if="currentSegmentGroupID"
+      :group-id="currentSegmentGroupID"
+    />
     <v-radio-group
       v-model="currentSegmentGroupID"
       hide-details
@@ -258,10 +263,6 @@ function openSaveDialog(id: string) {
     <v-divider />
   </div>
   <div v-else class="text-center text-caption">No selected image</div>
-  <segment-group-opacity
-    v-if="currentSegmentGroupID"
-    :group-id="currentSegmentGroupID"
-  />
   <segment-list
     v-if="currentSegmentGroupID"
     :group-id="currentSegmentGroupID"

From 155f694056b9c0d8dca254f12fe1c23661cfe53f Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 17 Oct 2024 17:45:02 -0400
Subject: [PATCH 5/7] feat(paint): select first available segment group

No need to click in list.
---
 src/store/tools/paint.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index e640201d..b0350813 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -1,7 +1,7 @@
 import type { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, watchEffect } from 'vue';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
 import { Maybe } from '@/src/types';
@@ -27,9 +27,10 @@ export const usePaintToolStore = defineStore('paint', () => {
     return this.$paint.factory;
   }
 
+  const segmentGroupStore = useSegmentGroupStore();
+
   const activeLabelmap = computed(() => {
     if (!activeSegmentGroupID.value) return null;
-    const segmentGroupStore = useSegmentGroupStore();
     return segmentGroupStore.dataIndex[activeSegmentGroupID.value] ?? null;
   });
 
@@ -62,7 +63,6 @@ export const usePaintToolStore = defineStore('paint', () => {
       return;
     }
 
-    const segmentGroupStore = useSegmentGroupStore();
     const labelmaps = segmentGroupStore.orderByParent[imageID];
     if (labelmaps?.length) {
       activeSegmentGroupID.value = labelmaps[0];
@@ -83,7 +83,6 @@ export const usePaintToolStore = defineStore('paint', () => {
       if (!activeSegmentGroupID.value)
         throw new Error('Cannot set active segment without a labelmap');
 
-      const segmentGroupStore = useSegmentGroupStore();
       const { segments } =
         segmentGroupStore.metadataByID[activeSegmentGroupID.value];
 
@@ -207,6 +206,14 @@ export const usePaintToolStore = defineStore('paint', () => {
     { immediate: true }
   );
 
+  watchEffect(() => {
+    if (!currentImageID.value) return;
+    const segmentGroups = segmentGroupStore.orderByParent[currentImageID.value];
+    if (segmentGroups?.length === 1) {
+      activeSegmentGroupID.value = segmentGroups[0];
+    }
+  });
+
   return {
     // state
     activeMode,

From c8777aa42d44cb75c66efdb0043a158d5b6d6b8f Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 21 Oct 2024 13:35:26 -0400
Subject: [PATCH 6/7] feat(SegmentGroupControls): ellipsis + tooltip for long
 seg names

---
 src/components/EditableChipList.vue | 8 ++++++--
 src/components/SegmentList.vue      | 2 --
 src/store/segmentGroups.ts          | 1 -
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/EditableChipList.vue b/src/components/EditableChipList.vue
index 3411863a..59786107 100644
--- a/src/components/EditableChipList.vue
+++ b/src/components/EditableChipList.vue
@@ -26,7 +26,7 @@ const props = withDefaults(
 const itemsToRender = computed(() =>
   props.items.map((item) => ({
     key: item[props.itemKey] as string | number | symbol,
-    title: item[props.itemTitle],
+    title: item[props.itemTitle] as string | undefined,
   }))
 );
 </script>
@@ -47,7 +47,11 @@ const itemsToRender = computed(() =>
             @click="toggle"
           >
             <slot name="item-prepend" :key="key" :item="items[idx]"></slot>
-            <span class="overflow-hidden">{{ title }}</span>
+            <v-tooltip :text="title" location="end">
+              <template #activator="{ props }">
+                <span v-bind="props" class="text-truncate">{{ title }}</span>
+              </template>
+            </v-tooltip>
             <v-spacer />
             <slot name="item-append" :key="key" :item="items[idx]"></slot>
           </v-chip>
diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
index d8e7e75f..640e1e28 100644
--- a/src/components/SegmentList.vue
+++ b/src/components/SegmentList.vue
@@ -96,8 +96,6 @@ const toggleVisible = (value: number) => {
   });
 };
 
-// If all selected tools are already hidden, it should be "show".
-// If at least one selected tool is visible, it should be "hide".
 const allVisible = computed(() => {
   return segments.value.every((seg) => seg.visible);
 });
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index e261a847..4fcef5ad 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -26,7 +26,6 @@ import {
 import { FileEntry } from '../io/types';
 import { ensureSameSpace } from '../io/resample/resample';
 import { useDICOMStore } from './datasets-dicom';
-import { vi } from 'vitest';
 
 const LabelmapArrayType = Uint8Array;
 export type LabelmapArrayType = Uint8Array;

From 1bc37fefb81e66b4a418808eb0a9b99e4ae2c031 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 23 Oct 2024 10:51:39 -0400
Subject: [PATCH 7/7] refactor(paint): consolidate ensure segment group is
 active if exists logic

Rename functions using labelMap to segmentGroup
---
 src/components/SegmentGroupControls.vue |  2 +-
 src/store/tools/paint.ts                | 61 ++++++++++++++-----------
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index 2fcda016..fd8604ef 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -48,7 +48,7 @@ const currentSegmentGroups = computed(() => {
 const paintStore = usePaintToolStore();
 const currentSegmentGroupID = computed({
   get: () => paintStore.activeSegmentGroupID,
-  set: (id) => paintStore.setActiveLabelmap(id),
+  set: (id) => paintStore.setActiveSegmentGroup(id),
 });
 
 // clear selection if we delete the active segment group
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index b0350813..6fc74b7d 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -1,7 +1,7 @@
 import type { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { Manifest, StateFile } from '@/src/io/state-file/schema';
-import { computed, ref, watch, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
 import { Maybe } from '@/src/types';
@@ -48,24 +48,37 @@ export const usePaintToolStore = defineStore('paint', () => {
   /**
    * Sets the active labelmap.
    */
-  function setActiveLabelmap(segmentGroupID: Maybe<string>) {
+  function setActiveSegmentGroup(segmentGroupID: Maybe<string>) {
     activeSegmentGroupID.value = segmentGroupID;
   }
 
+  /**
+   * Gets the first segment group ID for a given image.
+   * @param imageID
+   */
+  function getFirstSegmentGroupID(imageID: Maybe<string>): Maybe<string> {
+    if (!imageID) return null;
+    const segmentGroups = segmentGroupStore.orderByParent[imageID];
+    if (segmentGroups && segmentGroups.length > 0) {
+      return segmentGroups[0];
+    }
+    return null;
+  }
+
   /**
    * Sets the active labelmap from a given image.
    *
    * If a labelmap exists, pick the first one. If no labelmap exists, create one.
    */
-  function setActiveLabelmapFromImage(imageID: Maybe<string>) {
+  function ensureActiveSegmentGroupForImage(imageID: Maybe<string>) {
     if (!imageID) {
-      setActiveLabelmap(null);
+      setActiveSegmentGroup(null);
       return;
     }
 
-    const labelmaps = segmentGroupStore.orderByParent[imageID];
-    if (labelmaps?.length) {
-      activeSegmentGroupID.value = labelmaps[0];
+    const segmentGroupID = getFirstSegmentGroupID(imageID);
+    if (segmentGroupID) {
+      setActiveSegmentGroup(segmentGroupID);
     } else {
       activeSegmentGroupID.value =
         segmentGroupStore.newLabelmapFromImage(imageID);
@@ -157,7 +170,7 @@ export const usePaintToolStore = defineStore('paint', () => {
     if (!imageID) {
       return false;
     }
-    setActiveLabelmapFromImage(imageID);
+    ensureActiveSegmentGroupForImage(imageID);
     this.$paint.setBrushSize(this.brushSize);
 
     isActive.value = true;
@@ -189,28 +202,24 @@ export const usePaintToolStore = defineStore('paint', () => {
     if (paint.activeSegmentGroupID !== null) {
       activeSegmentGroupID.value =
         segmentGroupIDMap[paint.activeSegmentGroupID];
-      setActiveLabelmap(activeSegmentGroupID.value);
+      setActiveSegmentGroup(activeSegmentGroupID.value);
       setActiveSegment.call(this, paint.activeSegment);
     }
   }
 
-  // --- change labelmap if paint is active --- //
+  // Create segment group if paint is active and none exist.
+  // If paint is not active, but there is a segment group for the current image, set it as active.
+  watchEffect(() => {
+    const imageID = currentImageID.value;
+    if (!imageID) return;
 
-  watch(
-    currentImageID,
-    (imageID) => {
-      if (isActive.value) {
-        setActiveLabelmapFromImage(imageID);
+    if (isActive.value) {
+      ensureActiveSegmentGroupForImage(imageID);
+    } else {
+      const segmentGroupID = getFirstSegmentGroupID(imageID);
+      if (segmentGroupID) {
+        setActiveSegmentGroup(segmentGroupID);
       }
-    },
-    { immediate: true }
-  );
-
-  watchEffect(() => {
-    if (!currentImageID.value) return;
-    const segmentGroups = segmentGroupStore.orderByParent[currentImageID.value];
-    if (segmentGroups?.length === 1) {
-      activeSegmentGroupID.value = segmentGroups[0];
     }
   });
 
@@ -229,8 +238,8 @@ export const usePaintToolStore = defineStore('paint', () => {
     deactivateTool,
 
     setMode,
-    setActiveLabelmap,
-    setActiveLabelmapFromImage,
+    setActiveSegmentGroup,
+    ensureActiveSegmentGroupForImage,
     setActiveSegment,
     setBrushSize,
     setSliceAxis,