Add adaptive volume rendering defaults and reset controls

patches/@kitware+vtk.js+38.0.4.patch

@@ -11,3 +11,15 @@ index ba92841..a59d269 100644
  			const background = model.renderable.getBackgroundByReference();
  			gl.clearColor(background[0], background[1], background[2], background[3]);
  			clearMask |= gl.COLOR_BUFFER_BIT;
+diff --git a/node_modules/@kitware/vtk.js/Rendering/OpenGL/VolumeMapper.js b/node_modules/@kitware/vtk.js/Rendering/OpenGL/VolumeMapper.js
+--- a/node_modules/@kitware/vtk.js/Rendering/OpenGL/VolumeMapper.js
++++ b/node_modules/@kitware/vtk.js/Rendering/OpenGL/VolumeMapper.js
+@@ -868,7 +868,7 @@
+ 			const reBuildTex = !tex?.oglObject?.getHandle() || tex?.hash !== scalarsHash;
+ 			const updatedExtents = volumeProperty.getUpdatedExtents();
+ 			const hasUpdatedExtents = !!updatedExtents.length;
+-			if (reBuildTex && !hasUpdatedExtents) {
++			if (reBuildTex && (!hasUpdatedExtents || !tex?.oglObject?.getHandle())) {
+ 				const newScalarTexture = Texture_default.newInstance();
+ 				newScalarTexture.setOpenGLRenderWindow(model._openGLRenderWindow);
+ 				const dims = imageData.getDimensions();

src/components/VolumePresets.vue

@@ -1,15 +1,19 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
 import { PresetNameList } from '@/src/vtk/ColorMaps';
-import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import ItemGroup from '@/src/components/ItemGroup.vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
 import { useVolumeColoringInitializer } from '@/src/composables/useVolumeColoringInitializer';
+import { useVolumeColoringConfig } from '@/src/composables/useVolumeColoringConfig';
 import PersistentOverlay from '@/src/components/PersistentOverlay.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import useVolumeColoringStore from '@/src/store/view-configs/volume-coloring';
-import { getColorFunctionRangeFromPreset } from '@/src/utils/vtk-helpers';
 import { useVolumeThumbnailing } from '@/src/composables/useVolumeThumbnailing';
+import {
+  getAdaptiveVolumePresetDescription,
+  getAdaptiveVolumePresetUnavailableReason,
+  isAdaptiveVolumePreset,
+} from '@/src/utils/adaptiveVolumePreset';
 
 const THUMBNAIL_SIZE = 80;
 
@@ -30,13 +34,12 @@ export default defineComponent({
     const volumeColoringStore = useVolumeColoringStore();
     const viewId = computed(() => props.viewId);
 
-    const { currentImageID, currentImageData } = useCurrentImage();
+    const { currentImageID, currentImageData, currentImage } =
+      useCurrentImage();
 
     useVolumeColoringInitializer(viewId, currentImageID);
 
-    const volumeColorConfig = computed(() =>
-      volumeColoringStore.getConfig(viewId.value, currentImageID.value)
-    );
+    const volumeColorConfig = useVolumeColoringConfig(viewId, currentImageID);
 
     const colorTransferFunctionRef = computed(
       () => volumeColorConfig.value?.transferFunction
@@ -49,21 +52,15 @@ export default defineComponent({
     const selectedPreset = computed(
       () => colorTransferFunctionRef.value?.preset || null
     );
-    const hasCurrentImage = computed(() => !!currentImageData.value);
-
-    // the data range, if any
-    const imageDataRange = computed((): [number, number] => {
-      const image = currentImageData.value;
-      if (image) {
-        return image.getPointData().getScalars().getRange();
-      }
-      return [0, 1];
-    });
-    const effectiveMappingRange = computed(
-      () =>
-        getColorFunctionRangeFromPreset(selectedPreset.value || '') ||
-        imageDataRange.value
+    const adaptiveUnavailableReason = computed(() =>
+      getAdaptiveVolumePresetUnavailableReason(
+        currentImageData.value,
+        !!currentImage.value?.isLoaded()
+      )
     );
+    const presetUnavailableReason = (name: string) =>
+      isAdaptiveVolumePreset(name) ? adaptiveUnavailableReason.value : '';
+    const hasCurrentImage = computed(() => !!currentImageData.value);
 
     const selectPreset = (name: string) => {
       if (!viewId.value || !currentImageID.value) return;
@@ -74,45 +71,15 @@ export default defineComponent({
       );
     };
 
-    const rgbPoints = computed(
-      () =>
-        vtkColorMaps.getPresetByName(colorTransferFunctionRef.value!.preset)
-          ?.RGBPoints
-    );
-
-    const updateColorMappingRange = (range: [number, number]) => {
-      const { mappingRange } = colorTransferFunctionRef.value ?? {};
-      // guard against infinite loops
-      if (
-        viewId.value &&
-        currentImageID.value &&
-        mappingRange &&
-        (Math.abs(range[0] - mappingRange[0]) > 1e-6 ||
-          Math.abs(range[1] - mappingRange[1]) > 1e-6)
-      ) {
-        volumeColoringStore.updateColorTransferFunction(
-          viewId.value,
-          currentImageID.value,
-          {
-            mappingRange: range,
-          }
-        );
-      }
-    };
-
     return {
+      presetUnavailableReason,
+      presetDescription: getAdaptiveVolumePresetDescription,
       thumbnails: currentThumbnails,
       hasCurrentImage,
       preset: selectedPreset,
-      fullMappingRange: effectiveMappingRange,
-      mappingRange: computed(
-        () => colorTransferFunctionRef.value!.mappingRange
-      ),
       presetList: PresetNameList,
       size: THUMBNAIL_SIZE,
-      rgbPoints,
       selectPreset,
-      updateColorMappingRange,
     };
   },
 });
@@ -133,8 +100,20 @@ export default defineComponent({
             :class="{
               'thumbnail-container': true,
               'bg-blue': active,
+              'opacity-50': !!presetUnavailableReason(preset),
             }"
-            @click="select"
+            :data-testid="`volume-preset-${preset}`"
+            :title="
+              presetUnavailableReason(preset) || presetDescription(preset)
+            "
+            :aria-disabled="!!presetUnavailableReason(preset)"
+            :tabindex="presetUnavailableReason(preset) ? -1 : 0"
+            role="button"
+            @click="!presetUnavailableReason(preset) && select()"
+            @keydown.enter="!presetUnavailableReason(preset) && select()"
+            @keydown.space.prevent="
+              !presetUnavailableReason(preset) && select()
+            "
           >
             <v-img :src="thumbnails[preset] || ''" cover aspect-ratio="1">
               <persistent-overlay class="thumbnail-overlay">

src/components/VolumeProperties.vue

@@ -3,7 +3,9 @@
 import { useVolumeColoringInitializer } from '@/src/composables/useVolumeColoringInitializer';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { CVRConfig } from '@/src/types/views';
-import useVolumeColoringStore from '@/src/store/view-configs/volume-coloring';
+import useVolumeColoringStore, {
+  defaultVolumeColorConfig,
+} from '@/src/store/view-configs/volume-coloring';
 
 const LIGHTING_MODELS = {
   standard: 'Standard',
@@ -32,9 +34,13 @@
 
     // --- CVR --- //
 
-    const cvrParams = computed(() => volumeColorConfig.value?.cvr);
+    const controlsDisabled = computed(() => !volumeColorConfig.value);
+    const cvrParams = computed(
+      () => volumeColorConfig.value?.cvr ?? defaultVolumeColorConfig().cvr
+    );
 
     const setCVRParam = (key: keyof CVRConfig, value: any) => {
+      if (controlsDisabled.value) return;
       if (!viewId.value || !currentImageID.value) return;
       volumeColoringStore.updateCVRParameters(
         viewId.value,
@@ -53,7 +59,7 @@
     );
 
     type LightingModel = keyof typeof LIGHTING_MODELS;
     const lightingModel = computed<LightingModel>(() =>
       cvrParams.value?.useVolumetricScatteringBlending ? 'hybrid' : 'standard'
     );
     const selectLightingMode = (model: LightingModel) => {
@@ -71,6 +77,7 @@
 
     return {
       LIGHTING_MODELS,
+      controlsDisabled,
       cvrParams,
       disableQualityWarning,
       laoEnabled,
@@ -86,9 +93,18 @@
 </script>
 
 <template>
-  <div class="mx-2">
-    <div v-if="!!cvrParams">
+  <div
+    class="mx-2"
+    data-testid="volume-properties"
+    :tabindex="controlsDisabled ? 0 : undefined"
+  >
+    <v-tooltip v-if="controlsDisabled" activator="parent" location="top">
+      Cinematic rendering controls are available after the volume finishes
+      loading
+    </v-tooltip>
+    <div>
       <v-slider
+        :disabled="controlsDisabled"
         show-ticks="always"
         tick-size="4"
         :ticks="volumeQualityLabels"
@@ -133,6 +149,7 @@
       </v-alert>
       <v-divider class="my-8" />
       <v-slider
+        :disabled="controlsDisabled"
         label="Ambient"
         min="0"
         max="1"
@@ -144,6 +161,7 @@
         @update:model-value="setCVRParam('ambient', $event)"
       />
       <v-slider
+        :disabled="controlsDisabled"
         label="Diffuse"
         min="0"
         max="1"
@@ -155,6 +173,7 @@
         @update:model-value="setCVRParam('diffuse', $event)"
       />
       <v-switch
+        :disabled="controlsDisabled"
         label="Light follows camera"
         density="compact"
         hide-details
@@ -164,6 +183,7 @@
       <v-divider class="my-8" />
 
       <v-switch
+        :disabled="controlsDisabled"
         label="Local Ambient Occlusion"
         density="compact"
         hide-details
@@ -173,6 +193,7 @@
 
       <v-row class="my-4">
         <v-btn-toggle
+          :disabled="controlsDisabled"
           :model-value="lightingModel"
           @update:model-value="selectLightingMode"
           mandatory
@@ -194,6 +215,7 @@
       <v-spacer class="my-2" />
 
       <v-slider
+        :disabled="controlsDisabled"
         label="Scatter Blending"
         min="0"
         max="1"