fix(segmentGroups): wait for image load before resample

Author: PaulHax

src/composables/untilLoaded.ts

@@ -0,0 +1,10 @@
+import { computed, unref } from 'vue';
+import { until } from '@vueuse/core';
+import useChunkStore from '../store/chunks';
+
+export function untilLoaded(imageID: string) {
+  const doneLoading = computed(
+    () => !unref(useChunkStore().chunkImageById[imageID].isLoading)
+  );
+  return until(doneLoading).toBe(true);
+}

src/store/datasets-layers.ts

@@ -1,5 +1,4 @@
-import { computed, ref, unref } from 'vue';
-import { until } from '@vueuse/core';
+import { ref } from 'vue';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import { defineStore } from 'pinia';
@@ -8,7 +7,7 @@ import { Maybe } from '@/src/types';
 import { ensureSameSpace } from '@/src/io/resample/resample';
 import { useErrorMessage } from '../composables/useErrorMessage';
 import { Manifest, StateFile } from '../io/state-file/schema';
-import useChunkStore from './chunks';
+import { untilLoaded } from '../composables/untilLoaded';
 
 // differ from Image/Volume IDs with a branded type
 export type LayerID = string & { __type: 'LayerID' };
@@ -39,6 +38,9 @@ export const useLayersStore = defineStore('layer', () => {
       { selection: source, id } as Layer,
     ];
 
+    // ensureSameSpace need final image array to resample, so wait for all chunks
+    await untilLoaded(source);
+
     const [parentImage, sourceImage] = await Promise.all(
       [parent, source].map(getImage)
     );
@@ -68,12 +70,6 @@ export const useLayersStore = defineStore('layer', () => {
     parent: DataSelection,
     source: DataSelection
   ) {
-    // ensureSameSpace need final image array to resample, so wait for all chunks
-    const doneLoading = computed(
-      () => !unref(useChunkStore().chunkImageById[source].isLoading)
-    );
-    await until(doneLoading).toBe(true);
-
     return useErrorMessage('Failed to build layer', async () => {
       try {
         await this._addLayer(parent, source);

src/store/segmentGroups.ts

@@ -26,6 +26,7 @@ import {
 import { FileEntry } from '../io/types';
 import { ensureSameSpace } from '../io/resample/resample';
 import { useDICOMStore } from './datasets-dicom';
+import { untilLoaded } from '../composables/untilLoaded';
 
 const LabelmapArrayType = Uint8Array;
 export type LabelmapArrayType = Uint8Array;
@@ -248,7 +249,8 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     if (imageID === parentID)
       throw new Error('Cannot convert an image to be a labelmap of itself');
 
-    // Build vtkImageData for DICOMs
+    await untilLoaded(imageID);
+
     const [childImage, parentImage] = await Promise.all(
       [imageID, parentID].map(getImage)
     );