fix(layers): make layers visible by setting mapping range

Author: PaulHax

.github/workflows/e2e.yml

@@ -10,7 +10,7 @@ jobs:
     name: E2E Testing on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     env:
-      DOWNLOAD_TIMEOUT: 90000
+      DOWNLOAD_TIMEOUT: 160000
     steps:
       - uses: actions/checkout@v4
         with:

src/components/vtk/VtkLayerSliceRepresentation.vue

@@ -11,7 +11,6 @@ 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 { useLayerConfigInitializer } from '@/src/composables/useLayerConfigInitializer';
 import { applyColoring } from '@/src/composables/useColoringEffect';
 import { useImageCacheStore } from '@/src/store/image-cache';
 
@@ -66,9 +65,6 @@ const slice = vtkFieldRef(sliceRep.mapper, 'slice');
 const { slice: storedSlice } = useSliceConfig(viewId, parentId);
 syncRef(storedSlice, slice, { immediate: true });
 
-// initialize layer coloring
-useLayerConfigInitializer(viewId, layerId);
-
 // apply layer coloring
 const applyLayerColoring = () => {
   const config = coloringConfig.value;
@@ -97,6 +93,7 @@ const applyLayerColoring = () => {
   sliceRep.property.setColorWindow(width);
   sliceRep.property.setColorLevel(center);
   sliceRep.property.setOpacity(config.blendConfig.opacity);
+  sliceRep.actor.setVisibility(config.blendConfig.visibility);
 };
 
 watchEffect(applyLayerColoring);

src/composables/useLayerConfigInitializer.ts

@@ -64,8 +64,43 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
 
   const configs = reactive<DoubleKeyRecord<LayersConfig>>({});
 
-  const getConfig = (viewID: Maybe<string>, dataID: Maybe<string>) =>
-    getDoubleKeyRecord(configs, viewID, dataID) ?? defaultLayersConfig();
+  const computeDefaultConfig = (dataID: string): LayersConfig => {
+    const defaults = defaultLayersConfig();
+    const preset = getPreset(dataID);
+
+    const image = imageCacheStore.getVtkImageData(dataID);
+    if (!image) return defaults;
+
+    const imageDataRange = image.getPointData().getScalars().getRange();
+
+    const ctRange = getColorFunctionRangeFromPreset(preset);
+    const ctFunc: Partial<ColorTransferFunction> = {
+      preset,
+      mappingRange: ctRange || imageDataRange,
+    };
+
+    const opacityFunction = {
+      ...getOpacityFunctionFromPreset(preset),
+      mappingRange: imageDataRange,
+    };
+
+    return {
+      ...defaults,
+      transferFunction: { ...defaults.transferFunction, ...ctFunc },
+      opacityFunction,
+    };
+  };
+
+  const getConfig = (viewID: Maybe<string>, dataID: Maybe<string>) => {
+    if (!viewID || !dataID) return defaultLayersConfig();
+    const config = getDoubleKeyRecord(configs, viewID, dataID);
+    if (config) return config;
+
+    // If no config exists, compute and store the default with proper preset
+    const defaultConfig = computeDefaultConfig(dataID);
+    patchDoubleKeyRecord(configs, viewID, dataID, defaultConfig);
+    return defaultConfig;
+  };
 
   const updateConfig = (
     viewID: string,
@@ -116,8 +151,10 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
     };
     updateColorTransferFunction(viewID, layerID, ctFunc);
 
-    const opFunc = getOpacityFunctionFromPreset(preset);
-    opFunc.mappingRange = imageDataRange;
+    const opFunc = {
+      ...getOpacityFunctionFromPreset(preset),
+      mappingRange: imageDataRange,
+    };
     updateOpacityFunction(viewID, layerID, opFunc);
   };
 

src/store/view-configs/layers.ts

@@ -147,10 +147,14 @@ export const useVolumeColoringStore = defineStore('volumeColoring', () => {
     const { colorFunc, opacityFunc } =
       getColorAndOpacityFuncsFromPreset(preset);
     colorFunc.mappingRange ||= imageDataRange;
-    opacityFunc.mappingRange = imageDataRange;
+
+    const completeOpacityFunc = {
+      ...opacityFunc,
+      mappingRange: imageDataRange,
+    };
 
     updateColorTransferFunction(viewID, imageID, colorFunc);
-    updateOpacityFunction(viewID, imageID, opacityFunc);
+    updateOpacityFunction(viewID, imageID, completeOpacityFunc);
   };
 
   const resetToDefaultColoring = (

src/store/view-configs/volume-coloring.ts

@@ -6,7 +6,11 @@ import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow
 import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import type { vtkObject } from '@kitware/vtk.js/interfaces';
 import { intersectDisplayWithPlane } from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { OpacityFunction } from '@/src/types/views';
+import {
+  OpacityGaussians,
+  OpacityPoints,
+  OpacityNodes,
+} from '@/src/types/views';
 import vtkFieldData from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/FieldData';
 import { Maybe } from '@/src/types';
 
@@ -125,10 +129,10 @@ export function getShiftedOpacityFromPreset(
 ) {
   const preset = vtkColorMaps.getPresetByName(presetName);
   if (preset.OpacityPoints) {
-    const OpacityPoints = preset.OpacityPoints as number[];
+    const opacityPoints = preset.OpacityPoints as number[];
     const points = [];
-    for (let i = 0; i < OpacityPoints.length; i += 2) {
-      points.push([OpacityPoints[i], OpacityPoints[i + 1]]);
+    for (let i = 0; i < opacityPoints.length; i += 2) {
+      points.push([opacityPoints[i], opacityPoints[i + 1]]);
     }
 
     const [xmin, xmax] = effectiveRange;
@@ -144,12 +148,18 @@ export function getShiftedOpacityFromPreset(
   return null;
 }
 
+type OpacityFunctionWithoutRange =
+  | Omit<OpacityGaussians, 'mappingRange'>
+  | Omit<OpacityPoints, 'mappingRange'>
+  | Omit<OpacityNodes, 'mappingRange'>;
+
 /**
- * Retrieves an OpacityFunction from a preset.
+ * Retrieves an OpacityFunction from a preset, without mappingRange.
+ * Caller must provide mappingRange to complete the OpacityFunction.
  */
 export function getOpacityFunctionFromPreset(
   presetName: string
-): Partial<OpacityFunction> {
+): OpacityFunctionWithoutRange {
   const preset = vtkColorMaps.getPresetByName(presetName);
 
   if (preset.OpacityPoints) {

src/utils/vtk-helpers.ts

@@ -182,7 +182,7 @@ class VolViewPage extends Page {
   }
 
   get layerOpacitySliders() {
-    return $$('div[data-testid="layer-opacity-slider"] input');
+    return $$('div[data-testid="layer-opacity-slider"]');
   }
 
   async getVolumeRenderingSection() {
@@ -206,6 +206,11 @@ class VolViewPage extends Page {
     const exists = await view2D.isExisting();
     return exists ? view2D : null;
   }
+
+  async getViews2D() {
+    const views2D = $$('div[data-testid="vtk-view vtk-two-view"]');
+    return views2D;
+  }
 }
 
 export const volViewPage = new VolViewPage();

tests/baseline/layers_max_opacity_2d_view-chrome-linux-1200x800-1.png

@@ -63,5 +63,39 @@ describe('Add Layer button', () => {
         timeoutMsg: `Expected at least one layer opacity slider`,
       }
     );
+
+    const layerOpacitySliders = await volViewPage.layerOpacitySliders;
+    const firstSlider = layerOpacitySliders[0];
+
+    await firstSlider.click();
+
+    // Use keyboard to set to maximum (End key goes to max)
+    await browser.keys('End');
+
+    await browser.waitUntil(
+      async () => {
+        const inputElement = await firstSlider.$('input');
+        const value = await inputElement.getValue();
+        return value === '1';
+      },
+      {
+        timeoutMsg: 'Expected slider value to be 1 (max opacity)',
+        timeout: 5000,
+      }
+    );
+
+    const views2D = await volViewPage.getViews2D();
+    const viewCount = await views2D.length;
+    if (!views2D || viewCount === 0) {
+      throw new Error('Could not find 2D views for screenshot');
+    }
+    const lastView2D = views2D[viewCount - 1];
+    const result = await browser.checkElement(
+      lastView2D,
+      'layers_max_opacity_2d_view'
+    );
+
+    const THRESHOLD = 5; // percent
+    await expect(result).toBeLessThan(THRESHOLD);
   });
 });

tests/pageobjects/volview.page.ts

@@ -6,8 +6,8 @@ import { projectRoot } from './tests/e2eTestUtils';
 export const WINDOW_SIZE = [1200, 800] as const;
 export const TEST_PORT = 4567;
 // for slow connections try:
-// DOWNLOAD_TIMEOUT=60000 npm run test:e2e:dev
-export const DOWNLOAD_TIMEOUT = Number(process.env.DOWNLOAD_TIMEOUT ?? 8000);
+// DOWNLOAD_TIMEOUT=60000 && npm run test:e2e:dev
+export const DOWNLOAD_TIMEOUT = Number(process.env.DOWNLOAD_TIMEOUT ?? 16000);
 
 const ROOT = projectRoot();
 const TMP = '.tmp/';
@@ -72,7 +72,7 @@ export const config: Options.Testrunner = {
   reporters: ['spec', 'html-nice'],
   mochaOpts: {
     ui: 'bdd',
-    timeout: 120 * 1000,
+    timeout: 160 * 1000,
   },
 
   //