Outline segment group rendering

package.json

@@ -28,7 +28,7 @@
     "@aws-sdk/client-s3": "^3.435.0",
     "@itk-wasm/dicom": "7.2.2",
     "@itk-wasm/image-io": "^1.3.0",
-    "@kitware/vtk.js": "^29.0.0",
+    "@kitware/vtk.js": "^32.6.0",
     "@netlify/edge-functions": "^2.0.0",
     "@sentry/vue": "^7.54.0",
     "@velipso/polybool": "^2.0.11",

src/components/SegmentGroupControls.vue

@@ -208,7 +208,6 @@ function openSaveDialog(id: string) {
     <segment-group-opacity
       v-if="currentSegmentGroupID"
       :group-id="currentSegmentGroupID"
-      class="my-1"
     />
     <v-radio-group
       v-model="currentSegmentGroupID"

src/components/SegmentGroupOpacity.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
 import { useGlobalLayerColorConfig } from '@/src/composables/useGlobalLayerColorConfig';
+import { useGlobalSegmentGroupConfig } from '@/src/store/view-configs/segmentGroups';
 
 const props = defineProps<{
   groupId: string;
@@ -21,12 +22,33 @@ const setOpacity = (opacity: number) => {
     },
   });
 };
+
+const { config, updateConfig: updateSegmentGroupConfig } =
+  useGlobalSegmentGroupConfig(groupId);
+
+const outlineOpacity = computed({
+  get: () => config.value!.config!.outlineOpacity,
+  set: (opacity: number) => {
+    updateSegmentGroupConfig({
+      outlineOpacity: opacity,
+    });
+  },
+});
+
+const outlineThickness = computed({
+  get: () => config.value!.config!.outlineThickness,
+  set: (thickness: number) => {
+    updateSegmentGroupConfig({
+      outlineThickness: thickness,
+    });
+  },
+});
 </script>
 
 <template>
   <v-slider
     class="mx-4"
-    label="Segment Group Opacity"
+    label="Segment Group Fill Opacity"
     min="0"
     max="1"
     step="0.01"
@@ -36,4 +58,26 @@ const setOpacity = (opacity: number) => {
     :model-value="blendConfig.opacity"
     @update:model-value="setOpacity($event)"
   />
+  <v-slider
+    class="mx-4"
+    label="Segment Group Outline Opacity"
+    min="0"
+    max="1"
+    step="0.01"
+    density="compact"
+    hide-details
+    thumb-label
+    v-model="outlineOpacity"
+  />
+  <v-slider
+    class="mx-4"
+    label="Segment Group Outline Thickness"
+    min="0"
+    max="10"
+    step="1"
+    density="compact"
+    hide-details
+    thumb-label
+    v-model="outlineThickness"
+  />
 </template>

src/components/SegmentList.vue

@@ -172,7 +172,7 @@ function deleteEditingSegment() {
 
   <v-slider
     class="mx-4 my-1"
-    label="Segment Opacity"
+    label="Segment Fill Opacity"
     min="0"
     max="1"
     step="0.01"

src/components/vtk/VtkLayerSliceRepresentation.vue

@@ -73,7 +73,9 @@ const applyLayerColoring = () => {
   if (!config) return;
 
   const cfun = sliceRep.property.getRGBTransferFunction(0);
-  const ofun = sliceRep.property.getScalarOpacity(0);
+  const ofun = sliceRep.property.getPiecewiseFunction(0);
+
+  if (!cfun || !ofun) throw new Error('Missing transfer functions');
 
   applyColoring({
     props: {

src/components/vtk/VtkSegmentationSliceRepresentation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs, watchEffect, inject, computed } from 'vue';
+import { toRefs, watchEffect, inject, computed, unref } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { LPSAxis } from '@/src/types/lps';
@@ -17,6 +17,7 @@ import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import { syncRef } from '@vueuse/core';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import useLayerColoringStore from '@/src/store/view-configs/layers';
+import { useSegmentGroupConfigStore } from '@/src/store/view-configs/segmentGroups';
 import { useSegmentGroupConfigInitializer } from '@/src/composables/useSegmentGroupConfigInitializer';
 
 interface Props {
@@ -104,6 +105,8 @@ const applySegmentColoring = () => {
   const cfun = sliceRep.property.getRGBTransferFunction(0);
   const ofun = sliceRep.property.getPiecewiseFunction(0);
 
+  if (!cfun || !ofun) throw new Error('Missing transfer functions');
+
   cfun.removeAllPoints();
   ofun.removeAllPoints();
 
@@ -135,6 +138,35 @@ const applySegmentColoring = () => {
 
 watchEffect(applySegmentColoring);
 
+const configStore = useSegmentGroupConfigStore();
+const config = computed(() =>
+  configStore.getConfig(unref(viewId), unref(segmentationId))
+);
+
+const outlineThickness = computed(() => config.value?.outlineThickness ?? 2);
+// @ts-expect-error vtk.js types are incomplete
+sliceRep.property.setUseLabelOutline(true);
+sliceRep.property.setUseLookupTableScalarRange(true);
+
+watchEffect(() => {
+  // @ts-expect-error vtk.js types are incomplete
+  sliceRep.property.setLabelOutlineOpacity(config.value?.outlineOpacity ?? 1);
+});
+
+watchEffect(() => {
+  if (!metadata.value) return; // segment group just deleted
+
+  const thickness = outlineThickness.value;
+  const { segments } = metadata.value;
+  const largestValue = Math.max(...segments.order);
+
+  const segThicknesses = Array.from({ length: largestValue }, (_, value) => {
+    const segment = segments.byValue[value + 1];
+    return ((!segment || segment.visible) && thickness) || 0;
+  });
+  sliceRep.property.setLabelOutlineThickness(segThicknesses);
+});
+
 defineExpose(sliceRep);
 </script>
 

src/composables/useSegmentGroupConfigInitializer.ts

@@ -1,8 +1,9 @@
-import useLayerColoringStore from '@/src/store/view-configs/layers';
 import { watchImmediate } from '@vueuse/core';
 import { MaybeRef, computed, unref } from 'vue';
+import useLayerColoringStore from '@/src/store/view-configs/layers';
+import { useSegmentGroupConfigStore } from '@/src/store/view-configs/segmentGroups';
 
-export function useSegmentGroupConfigInitializer(
+function useLayerConfigInitializerForSegmentGroups(
   viewId: MaybeRef<string>,
   layerId: MaybeRef<string>
 ) {
@@ -16,6 +17,28 @@ export function useSegmentGroupConfigInitializer(
 
     const viewIdVal = unref(viewId);
     const layerIdVal = unref(layerId);
-    coloringStore.initConfig(viewIdVal, layerIdVal);
+    coloringStore.initConfig(viewIdVal, layerIdVal); // initConfig instead of resetColorPreset for layers
+    coloringStore.updateBlendConfig(viewIdVal, layerIdVal, {
+      opacity: 0.3,
+    });
+  });
+}
+
+export function useSegmentGroupConfigInitializer(
+  viewId: MaybeRef<string>,
+  segmentGroupId: MaybeRef<string>
+) {
+  useLayerConfigInitializerForSegmentGroups(viewId, segmentGroupId);
+
+  const configStore = useSegmentGroupConfigStore();
+  const config = computed(() =>
+    configStore.getConfig(unref(viewId), unref(segmentGroupId))
+  );
+
+  watchImmediate(config, (config_) => {
+    if (config_) return;
+    const viewIdVal = unref(viewId);
+    const layerIdVal = unref(segmentGroupId);
+    configStore.initConfig(viewIdVal, layerIdVal);
   });
 }

src/io/state-file/schema.ts

@@ -21,6 +21,7 @@ import type {
   SliceConfig,
   WindowLevelConfig,
   LayersConfig,
+  SegmentGroupConfig,
   VolumeColorConfig,
 } from '../../store/view-configs/types';
 import type { LPSAxisDir, LPSAxis } from '../../types/lps';
@@ -215,10 +216,16 @@ const LayersConfig = z.object({
   blendConfig: BlendConfig,
 }) satisfies z.ZodType<LayersConfig>;
 
+const SegmentGroupConfig = z.object({
+  outlineOpacity: z.number(),
+  outlineThickness: z.number(),
+}) satisfies z.ZodType<SegmentGroupConfig>;
+
 const ViewConfig = z.object({
   window: WindowLevelConfig.optional(),
   slice: SliceConfig.optional(),
   layers: LayersConfig.optional(),
+  segmentGroup: SegmentGroupConfig.optional(),
   camera: CameraConfig.optional(),
   volumeColorConfig: VolumeColorConfig.optional(),
 });

src/store/segmentGroups.ts

@@ -2,7 +2,7 @@ import { computed, reactive, ref, toRaw, watch } from 'vue';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import type { RGBAColor } from '@kitware/vtk.js/types';
+import type { RGBAColor, TypedArray } from '@kitware/vtk.js/types';
 import { defineStore } from 'pinia';
 import { useImageStore } from '@/src/store/datasets-images';
 import { join, normalize } from '@/src/utils/path';
@@ -64,20 +64,41 @@ export function createLabelmapFromImage(imageData: vtkImageData) {
   return labelmap;
 }
 
+function convertToUint8(array: number[] | TypedArray): Uint8Array {
+  const uint8Array = new Uint8Array(array.length);
+  for (let i = 0; i < array.length; i++) {
+    const value = array[i];
+    uint8Array[i] = value < 0 || value > 255 ? 0 : value;
+  }
+  return uint8Array;
+}
+
+function getLabelMapScalars(imageData: vtkImageData) {
+  const scalars = imageData.getPointData().getScalars();
+  let values = scalars.getData();
+
+  if (!(values instanceof LabelmapArrayType)) {
+    values = convertToUint8(values);
+  }
+
+  return vtkDataArray.newInstance({
+    numberOfComponents: scalars.getNumberOfComponents(),
+    values,
+  });
+}
+
 export function toLabelMap(imageData: vtkImageData) {
   const labelmap = vtkLabelMap.newInstance(
-    imageData.get(
-      'spacing',
-      'origin',
-      'direction',
-      'extent',
-      'dataDescription',
-      'pointData'
-    )
+    imageData.get('spacing', 'origin', 'direction', 'extent', 'dataDescription')
   );
+
   labelmap.setDimensions(imageData.getDimensions());
   labelmap.computeTransforms();
 
+  // outline rendering only supports UInt8Array image types
+  const scalars = getLabelMapScalars(imageData);
+  labelmap.getPointData().setScalars(scalars);
+
   return labelmap;
 }
 

src/store/view-configs/common.ts

@@ -3,6 +3,7 @@ import { StateFile, ViewConfig } from '../../io/state-file/schema';
 import {
   CameraConfig,
   LayersConfig,
+  SegmentGroupConfig,
   SliceConfig,
   VolumeColorConfig,
   WindowLevelConfig,
@@ -14,7 +15,8 @@ type SubViewConfig =
   | SliceConfig
   | VolumeColorConfig
   | WindowLevelConfig
-  | LayersConfig;
+  | LayersConfig
+  | SegmentGroupConfig;
 
 type ViewConfigGetter = (
   viewID: string,