fix: handle images with 0 range or multiple components

Author: PaulHax

src/components/vtk/VtkSliceViewWindowManipulator.vue

@@ -50,7 +50,8 @@ const wlConfig = useWindowingConfig(viewId, imageId);
 useWindowingConfigInitializer(viewId, imageId);
 
 const computeStep = (range: Vector2) => {
-  return Math.min(range[1] - range[0], 1) / 256;
+  const diff = range[1] - range[0] || 1;
+  return Math.min(diff, 1) / 256;
 };
 const wlStep = computed(() => computeStep(wlConfig.range.value));
 

src/core/streaming/dicomChunkImage.ts

@@ -276,6 +276,7 @@ export default class DicomChunkImage
     this.dataRangeFromChunks().forEach(([min, max], compIdx) => {
       scalars.setRange({ min, max }, compIdx);
     });
+    scalars.modified(); // so image-stats will trigger update of range
   }
 
   private dataRangeFromChunks() {
@@ -363,8 +364,8 @@ export default class DicomChunkImage
       const newMin = rangeAlreadyInitialized ? Math.min(min, curRange[0]) : min;
       const newMax = rangeAlreadyInitialized ? Math.max(max, curRange[1]) : max;
       scalars.setRange({ min: newMin, max: newMax }, comp);
-      scalars.modified(); // so image-stats will trigger update of range
     }
+    scalars.modified(); // so image-stats will trigger update of range
 
     chunk.setUserData(DATA_RANGE_KEY, chunkDataRange);
 

src/core/vtk/useVtkProperty.ts

@@ -0,0 +1,54 @@
+import { MaybeRef, computed, unref, ref, Ref } from 'vue';
+import type { vtkObject } from '@kitware/vtk.js/interfaces';
+import { onPausableVTKEvent } from '@/src/composables/onPausableVTKEvent';
+import { batchForNextTask } from '@/src/utils/batchForNextTask';
+import { arrayEquals } from '@/src/utils';
+import type { Maybe } from '@/src/types';
+
+/**
+ * A computed property that derives a reactive property from a VTK object using a getter function.
+ * The computed property updates when the underlying VTK object emits an 'onModified' event.
+ *
+ * @param vtkObjectRef A Vue Ref or direct reference to a VTK object (or null/undefined).
+ * @param propertyGetter A function that computes the property value. It will be called reactively.
+ * @returns A read-only ComputedRef to the derived property.
+ */
+export function useVtkProperty<T extends Maybe<vtkObject>, R>(
+  obj: MaybeRef<T>,
+  propertyGetter: () => R
+) {
+  const initialValue = propertyGetter();
+  const trackedValue = ref(
+    Array.isArray(initialValue) ? [...initialValue] : initialValue
+  ) as Ref<R>;
+  let lastValueIsArray = Array.isArray(initialValue);
+  const onModified = batchForNextTask(() => {
+    if (unref(obj)?.isDeleted()) return;
+
+    const currentValue = propertyGetter(); // Avoid unnecessary updates when array contents haven't changed
+    if (lastValueIsArray && Array.isArray(currentValue)) {
+      const previousValue = trackedValue.value;
+      if (
+        Array.isArray(previousValue) &&
+        !arrayEquals(previousValue as any[], currentValue as any[])
+      ) {
+        trackedValue.value = [...currentValue] as R;
+        return;
+      }
+      return;
+    }
+
+    if (Array.isArray(currentValue)) {
+      trackedValue.value = [...currentValue] as R;
+      lastValueIsArray = true;
+    } else {
+      trackedValue.value = currentValue;
+      lastValueIsArray = false;
+    }
+  });
+
+  onPausableVTKEvent(obj as vtkObject, 'onModified', onModified);
+  return computed(() => {
+    return trackedValue.value;
+  });
+}

src/core/vtk/vtkFieldRef.ts

@@ -4,6 +4,7 @@ import { capitalize } from '@kitware/vtk.js/macros';
 import { onPausableVTKEvent } from '@/src/composables/onPausableVTKEvent';
 import { batchForNextTask } from '@/src/utils/batchForNextTask';
 import { Maybe } from '@/src/types';
+import { arrayEquals } from '@/src/utils';
 
 type NonEmptyString<T extends string> = T extends '' ? never : T;
 
@@ -157,14 +158,7 @@ export function vtkFieldRef<T extends Maybe<vtkObject>>(
       const currentValue = getter();
       if (Array.isArray(currentValue)) {
         const previousValue = lastValue;
-        // Check if array contents changed
-        if (
-          previousValue.length !== currentValue.length ||
-          previousValue.some(
-            (val: any, idx: number) => val !== currentValue[idx]
-          )
-        ) {
-          // Values changed, trigger the ref
+        if (!arrayEquals(previousValue as any[], currentValue as any[])) {
           triggerRef(ref);
           return;
         }

src/store/image-stats.ts

@@ -11,7 +11,7 @@ import {
 import * as Comlink from 'comlink';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { useVtkProperty } from '@/src/core/vtk/useVtkProperty';
 import { WLAutoRanges, WL_HIST_BINS } from '@/src/constants';
 import { HistogramWorker } from '@/src/utils/histogram.worker';
 import { Maybe } from '@/src/types';
@@ -26,9 +26,7 @@ export type ImageStats = {
   autoRangeValues?: Record<string, [number, number]>;
 };
 
-async function computeAutoRangeValues(
-  imageData: vtkImageData
-): Promise<Record<string, [number, number]>> {
+async function computeAutoRangeValues(imageData: vtkImageData) {
   const scalars = imageData.getPointData()?.getScalars();
   if (!scalars) {
     return {};
@@ -115,7 +113,9 @@ export const useImageStatsStore = defineStore('image-stats', () => {
     const activeScalars = computed(() =>
       imageData.value?.getPointData()?.getScalars()
     );
-    const scalarRange = vtkFieldRef(activeScalars, 'range');
+    const scalarRange = useVtkProperty(activeScalars, () =>
+      activeScalars.value?.getRange(0)
+    );
 
     watch(
       scalarRange,