feat(segment-groups): add visibility toggle button

closes #649

src/components/SegmentGroupControls.vue

@@ -11,6 +11,7 @@ import {
   DataSelection,
 } from '@/src/utils/dataSelection';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { useGlobalLayerColorConfig } from '@/src/composables/useGlobalLayerColorConfig';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { Maybe } from '@/src/types';
 import { reactive, ref, computed, watch, toRaw } from 'vue';
@@ -26,9 +27,20 @@ const currentSegmentGroups = computed(() => {
   const { orderByParent, metadataByID } = segmentGroupStore;
   if (!(currentImageID.value in orderByParent)) return [];
   return orderByParent[currentImageID.value].map((id) => {
+    const { sampledConfig, updateConfig } = useGlobalLayerColorConfig(id);
     return {
       id,
       name: metadataByID[id].name,
+      visibility: sampledConfig.value?.config?.blendConfig.visibility ?? true,
+      toggleVisibility: () => {
+        const currentBlend = sampledConfig.value!.config!.blendConfig;
+        updateConfig({
+          blendConfig: {
+            ...currentBlend,
+            visibility: !currentBlend.visibility,
+          },
+        });
+      },
     };
   });
 });
@@ -207,6 +219,20 @@ function openSaveDialog(id: string) {
           <div class="d-flex flex-row align-center w-100" :title="group.name">
             <span class="group-name">{{ group.name }}</span>
             <v-spacer />
+            <v-btn
+              icon
+              variant="flat"
+              size="small"
+              @click.stop="group.toggleVisibility"
+            >
+              <v-icon v-if="group.visibility" 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">{{
+                group.visibility ? 'Hide' : 'Show'
+              }}</v-tooltip>
+            </v-btn>
             <v-btn
               icon="mdi-content-save"
               size="small"

src/components/SegmentGroupOpacity.vue

@@ -1,47 +1,31 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
-import { BlendConfig } from '@/src/types/views';
-import useLayerColoringStore from '@/src/store/view-configs/layers';
-import { useSegmentGroupConfigInitializer } from '@/src/composables/useSegmentGroupConfigInitializer';
-import { InitViewSpecs } from '../config';
+import { useGlobalLayerColorConfig } from '@/src/composables/useGlobalLayerColorConfig';
 
 const props = defineProps<{
   groupId: string;
 }>();
 
 const { groupId } = toRefs(props);
 
-const layerColoringStore = useLayerColoringStore();
+const { sampledConfig, updateConfig } = useGlobalLayerColorConfig(groupId);
 
-const VIEWS_2D = Object.entries(InitViewSpecs)
-  .filter(([, { viewType }]) => viewType === '2D')
-  .map(([viewID]) => viewID);
+const blendConfig = computed(() => sampledConfig.value!.config!.blendConfig);
 
-useSegmentGroupConfigInitializer(VIEWS_2D[0], groupId.value);
-
-const layerConfigs = computed(() =>
-  VIEWS_2D.map((viewID) => ({
-    config: layerColoringStore.getConfig(viewID, groupId.value),
-    viewID,
-  }))
-);
-
-const blendConfig = computed(
-  () => layerConfigs.value.find(({ config }) => config)!.config!.blendConfig
-);
-
-const setBlendConfig = (key: keyof BlendConfig, value: any) => {
-  layerConfigs.value.forEach(({ viewID }) =>
-    layerColoringStore.updateBlendConfig(viewID, groupId.value, {
-      [key]: value,
-    })
-  );
+const setOpacity = (opacity: number) => {
+  updateConfig({
+    blendConfig: {
+      ...blendConfig.value,
+      // 1.0 puts us in Opaque render pass which changes stack order.
+      opacity: Math.min(opacity, 0.9999),
+    },
+  });
 };
 </script>
 
 <template>
   <v-slider
-    class="py-4"
+    class="pa-4"
     label="Segment Group Opacity"
     min="0"
     max="1"
@@ -50,6 +34,6 @@ const setBlendConfig = (key: keyof BlendConfig, value: any) => {
     hide-details
     thumb-label
     :model-value="blendConfig.opacity"
-    @update:model-value="setBlendConfig('opacity', $event)"
+    @update:model-value="setOpacity($event)"
   />
 </template>

src/components/vtk/VtkSegmentationSliceRepresentation.vue

@@ -61,16 +61,26 @@ sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
 sliceRep.mapper.setResolveCoincidentTopologyPolygonOffsetParameters(-2, -2);
 
 useSegmentGroupConfigInitializer(viewId.value, segmentationId.value);
+const coloringStore = useLayerColoringStore();
+
+// visibility
+const visibility = computed(
+  () =>
+    coloringStore.getConfig(viewId.value, segmentationId.value)!.blendConfig
+      .visibility
+);
+watchEffect(() => {
+  sliceRep.actor.setVisibility(visibility.value);
+});
 
 // opacity
-const coloringStore = useLayerColoringStore();
 const opacity = computed(
   () =>
-    coloringStore.getConfig(viewId.value, segmentationId.value)?.blendConfig
+    coloringStore.getConfig(viewId.value, segmentationId.value)!.blendConfig
       .opacity
 );
 watchEffect(() => {
-  sliceRep.property.setOpacity(opacity.value!);
+  sliceRep.property.setOpacity(opacity.value);
 });
 
 // set slicing mode

src/composables/useGlobalLayerColorConfig.ts

@@ -0,0 +1,35 @@
+import { computed, MaybeRef, unref } from 'vue';
+import { InitViewSpecs } from '@/src/config';
+import useLayerColoringStore from '@/src/store/view-configs/layers';
+import { LayersConfig } from '@/src/store/view-configs/types';
+import { useSegmentGroupConfigInitializer } from '@/src/composables/useSegmentGroupConfigInitializer';
+
+// Returns first existing view's config as the "value" and updates all views' configs with updateConfig()
+export const useGlobalLayerColorConfig = (layerId: MaybeRef<string>) => {
+  const layerColoringStore = useLayerColoringStore();
+
+  const VIEWS_2D = Object.entries(InitViewSpecs)
+    .filter(([, { viewType }]) => viewType === '2D')
+    .map(([viewID]) => viewID);
+
+  useSegmentGroupConfigInitializer(VIEWS_2D[0], unref(layerId));
+
+  const layerConfigs = computed(() =>
+    VIEWS_2D.map((viewID) => ({
+      config: layerColoringStore.getConfig(viewID, unref(layerId)),
+      viewID,
+    }))
+  );
+
+  const sampledConfig = computed(() =>
+    layerConfigs.value.find(({ config }) => config)
+  );
+
+  const updateConfig = (patch: Partial<LayersConfig>) => {
+    layerConfigs.value.forEach(({ viewID }) =>
+      layerColoringStore.updateConfig(viewID, unref(layerId), patch)
+    );
+  };
+
+  return { sampledConfig, updateConfig };
+};

src/io/state-file/schema.ts

@@ -203,6 +203,7 @@ const VolumeColorConfig = z.object({
 
 const BlendConfig = z.object({
   opacity: z.number(),
+  visibility: z.boolean(),
 }) satisfies z.ZodType<BlendConfig>;
 
 const LayersConfig = z.object({

src/store/view-configs/layers.ts

@@ -55,7 +55,7 @@ export const defaultLayersConfig = (): LayersConfig => ({
     gaussians: [],
     mappingRange: [0, 1],
   },
-  blendConfig: { opacity: 0.6 },
+  blendConfig: { opacity: 0.6, visibility: true },
 });
 
 export const useLayerColoringStore = defineStore('layerColoring', () => {

src/types/views.ts

@@ -66,4 +66,5 @@ export interface CVRConfig {
 
 export interface BlendConfig {
   opacity: number;
+  visibility: boolean;
 }