feat(paint): add fill between slice interpolation

.gitignore

@@ -32,3 +32,5 @@ bundle-analysis.html
 reports
 *.log
 .tmp/
+
+.github/copilot

package.json

@@ -26,9 +26,10 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.435.0",
-    "@itk-wasm/dicom": "7.2.2",
-    "@itk-wasm/image-io": "1.3.0",
-    "@kitware/vtk.js": "32.12.1",
+    "@itk-wasm/dicom": "7.6.0",
+    "@itk-wasm/image-io": "1.6.0",
+    "@itk-wasm/morphological-contour-interpolation": "2.0.0",
+    "@kitware/vtk.js": "^32.12.1",
     "@netlify/edge-functions": "^2.0.0",
     "@sentry/vue": "^7.54.0",
     "@velipso/polybool": "^2.0.11",
@@ -41,7 +42,7 @@
     "fast-deep-equal": "^3.1.3",
     "file-saver": "^2.0.5",
     "gl-matrix": "3.4.3",
-    "itk-wasm": "1.0.0-b.178",
+    "itk-wasm": "1.0.0-b.188",
     "jszip": "3.10.0",
     "mitt": "^3.0.0",
     "nanoid": "^4.0.1",
@@ -118,4 +119,4 @@
       "eslint"
     ]
   }
-}
+}

src/components/FillBetweenControls.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="mb-2 d-flex align-center">
+    <mini-expansion-panel>
+      <template #title> Interpolate segmentation between slices. </template>
+      <ul>
+        <li>
+          Will only fill between segmented slices where none of their direct
+          neighbors are segmented.
+        </li>
+        <li>Only the selected segment will be filled between.</li>
+        <li>
+          Uses
+          <a
+            href="https://insight-journal.org/browse/publication/977"
+            target="_blank"
+          >
+            morphological contour interpolation
+          </a>
+          method.
+        </li>
+      </ul>
+    </mini-expansion-panel>
+  </div>
+  <v-row justify="space-between" no-gutters>
+    <v-btn
+      variant="tonal"
+      :prepend-icon="fillStep === 'computing' ? '' : 'mdi-cogs'"
+      @click="startCompute"
+      :disabled="fillStep !== 'start'"
+      :loading="fillStep === 'computing'"
+    >
+      Preview
+    </v-btn>
+    <v-btn
+      variant="tonal"
+      prepend-icon="mdi-check"
+      :disabled="fillStep !== 'previewing'"
+      @click="confirmFill"
+    >
+      Confirm
+    </v-btn>
+    <v-btn
+      variant="tonal"
+      prepend-icon="mdi-cancel"
+      :disabled="fillStep !== 'previewing'"
+      @click="cancelFill"
+    >
+      Cancel
+    </v-btn>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import MiniExpansionPanel from './MiniExpansionPanel.vue';
+import { useFillBetweenStore } from '../store/tools/fillBetween';
+import { usePaintToolStore } from '../store/tools/paint';
+
+const fillBetweenStore = useFillBetweenStore();
+const paintStore = usePaintToolStore();
+
+const fillStep = computed(() => fillBetweenStore.fillStep);
+
+function startCompute() {
+  const id = paintStore.activeSegmentGroupID;
+  if (!id) return;
+  fillBetweenStore.computeFillBetween(id);
+}
+
+const confirmFill = () => fillBetweenStore.confirmFill();
+const cancelFill = () => fillBetweenStore.cancelFill();
+</script>

src/components/MiniExpansionPanel.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="d-flex align-center justify-space-between">
+      <div class="d-flex">
+        <slot name="title"> </slot>
+      </div>
+      <v-btn
+        variant="text"
+        class="py-0 px-1"
+        style="font-size: 0.8rem"
+        @click="toggleInstructions"
+      >
+        <span>{{ label }}</span>
+        <span v-if="!showInstructions">▼</span>
+        <span v-else>▲</span>
+      </v-btn>
+    </div>
+    <v-expand-transition>
+      <div v-if="showInstructions" class="mt-2">
+        <slot></slot>
+      </div>
+    </v-expand-transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+withDefaults(
+  defineProps<{
+    label?: string;
+  }>(),
+  {
+    label: 'More info',
+  }
+);
+
+const showInstructions = ref(false);
+
+const toggleInstructions = () => {
+  showInstructions.value = !showInstructions.value;
+};
+</script>