fix(layers): fix initialization bugs when less than all views mounted

src/components/LayerProperties.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { computed, defineComponent, PropType, toRefs, watch } from 'vue';
+import { computed, defineComponent, PropType, toRefs } from 'vue';
 import { InitViewSpecs } from '../config';
 import { useImageStore } from '../store/datasets-images';
 import { BlendConfig } from '../types/views';
@@ -45,17 +45,10 @@ export default defineComponent({
       }))
     );
 
-    watch(layerConfigs, () => {
-      layerConfigs.value.forEach(({ config, viewID }) => {
-        if (!config) {
-          // init to defaults
-          layerColoringStore.updateBlendConfig(viewID, layerID.value, {});
-        }
-      });
-    });
-
     const blendConfig = computed(
-      () => layerConfigs.value?.[0].config?.blendConfig
+      () =>
+        // assume one 2D view has mounted
+        layerConfigs.value.find(({ config }) => config)!.config!.blendConfig
     );
 
     const setBlendConfig = (key: keyof BlendConfig, value: any) => {
@@ -76,7 +69,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div class="mx-2" v-if="!!blendConfig">
+  <div class="mx-2" v-if="blendConfig">
     <v-slider
       :label="imageName + ' Opacity'"
       min="0"

src/components/VtkTwoView.vue

@@ -735,12 +735,16 @@ export default defineComponent({
     const layersStore = useLayersStore();
     watch(
       [viewID, currentLayers],
-      () => {
-        currentLayers.value.forEach(({ id }, layerIndex) => {
+      ([view, layers]) => {
+        layers.forEach(({ id }) => {
           const image = layersStore.layerImages[id];
-          const layerConfig = layersConfigs.value[layerIndex];
-          if (image && !layerConfig) {
-            layerColoringStore.resetToDefault(viewID.value, id, image);
+          layerColoringStore.updateColorBy(view, id, {
+            arrayName: image.getPointData().getScalars().getName() + id,
+            location: 'pointData',
+          });
+          const layerConfig = layerColoringStore.getConfig(view, id);
+          if (!layerConfig!.transferFunction.preset) {
+            layerColoringStore.resetColorPreset(view, id);
           }
         });
       },

src/store/view-configs/layers.ts

@@ -1,4 +1,3 @@
-import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import {
   getColorFunctionRangeFromPreset,
@@ -119,18 +118,8 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
     updateOpacityFunction(viewID, layerID, opFunc);
   };
 
-  const resetToDefault = (
-    viewID: string,
-    dataID: LayerID,
-    image: vtkImageData
-  ) => {
-    const scalars = image.getPointData().getScalars();
-
-    updateColorBy(viewID, dataID, {
-      arrayName: scalars.getName() + dataID,
-      location: 'pointData',
-    });
-    setColorPreset(viewID, dataID, getPreset(dataID));
+  const resetColorPreset = (viewID: string, layerID: LayerID) => {
+    setColorPreset(viewID, layerID, getPreset(layerID));
   };
 
   const removeView = (viewID: string) => {
@@ -163,8 +152,8 @@ export const useLayerColoringStore = defineStore('layerColoring', () => {
     updateColorTransferFunction,
     updateOpacityFunction,
     updateBlendConfig,
-    resetToDefault,
     setColorPreset,
+    resetColorPreset,
     removeView,
     removeData,
     serialize,