Fix label button layout and Layering

src/components/EditableChipList.vue

@@ -47,8 +47,7 @@ const itemsToRender = computed(() =>
             @click="toggle"
           >
             <slot name="item-prepend" :key="key" :item="items[idx]"></slot>
-            <span class="overflow-hidden">{{ title }}</span>
-            <v-spacer />
+            <span class="text-truncate">{{ title }}</span>
             <slot name="item-append" :key="key" :item="items[idx]"></slot>
           </v-chip>
         </v-item>
@@ -70,4 +69,8 @@ const itemsToRender = computed(() =>
   background-color: rgb(var(--v-theme-selection-bg-color));
   border-color: rgb(var(--v-theme-selection-border-color));
 }
+
+.v-chip:deep() .v-chip__content {
+  width: 100%;
+}
 </style>

src/store/datasets-layers.ts

@@ -1,4 +1,5 @@
-import { ref } from 'vue';
+import { computed, ref, unref } from 'vue';
+import { until } from '@vueuse/core';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import { defineStore } from 'pinia';
@@ -7,6 +8,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';
 
 // differ from Image/Volume IDs with a branded type
 export type LayerID = string & { __type: 'LayerID' };
@@ -66,6 +68,12 @@ 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);