Segments: opacity slider and visibile toggle

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"

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);
 

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,
   },
 ];
 

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({

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,
     };
   }
 

src/types/segment.ts

@@ -4,4 +4,5 @@ export interface SegmentMask {
   value: number;
   name: string;
   color: RGBAColor;
+  visible: boolean;
 }