feat(paint): add Fill Holes segmentation process

src/components/AnnotationsModule.vue

@@ -54,10 +54,10 @@ watch(
 </script>
 
 <template>
-  <div class="overflow-y-auto mx-2 fill-height">
+  <div>
     <tool-controls />
     <v-divider thickness="4" />
-    <v-tabs v-model="tab" align-tabs="center" density="compact" class="my-1">
+    <v-tabs v-model="tab" align-tabs="start" density="compact" class="my-1">
       <v-tab value="segmentGroups" class="tab-header">Segment Groups</v-tab>
       <v-tab value="measurements" class="tab-header">Measurements</v-tab>
     </v-tabs>

src/components/DataBrowser.vue

@@ -117,7 +117,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <div id="data-module" class="mx-1 fill-height">
+  <div id="data-module">
     <div id="data-panels">
       <v-expansion-panels
         v-model="panels"
@@ -209,7 +209,6 @@ export default defineComponent({
 
 #data-panels {
   flex: 2;
-  overflow-y: auto;
 }
 
 .collection-header-icon {

src/components/FillBetweenParameterControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title> Interpolate segmentation between slices. </template>
       <ul>

src/components/FillHolesParameterControls.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="d-flex align-start w-100">
+    <mini-expansion-panel>
+      <template #title
+        >Fill enclosed holes in the segmentation on the axis of the selected
+        view.</template
+      >
+      <ul>
+        <li>Finds background regions fully enclosed by segments on a slice.</li>
+        <li>
+          Fills holes on the current slice by default, or every slice of the
+          active view's axis.
+        </li>
+        <li>
+          All-segments mode fills each hole with the surrounding segment's
+          label; selected-segment mode fills only the active segment's holes.
+        </li>
+      </ul>
+    </mini-expansion-panel>
+  </div>
+
+  <div
+    v-for="scope in scopes"
+    :key="scope.label"
+    class="w-100 mb-4 d-flex flex-column align-start"
+  >
+    <v-btn-toggle
+      :model-value="scope.value"
+      :aria-label="scope.label"
+      density="compact"
+      variant="outlined"
+      divided
+      mandatory
+      :disabled="isDisabled"
+      @update:model-value="scope.onChange"
+    >
+      <v-btn
+        v-for="option in scope.options"
+        :key="option.value"
+        :value="option.value"
+        size="small"
+      >
+        {{ option.label }}
+      </v-btn>
+    </v-btn-toggle>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  useFillHolesStore,
+  FillHolesSliceScope,
+  FillHolesSegmentScope,
+} from '@/src/store/tools/fillHoles';
+import { usePaintProcessStore } from '@/src/store/tools/paintProcess';
+import MiniExpansionPanel from './MiniExpansionPanel.vue';
+
+const fillHolesStore = useFillHolesStore();
+const processStore = usePaintProcessStore();
+
+const isDisabled = computed(() => processStore.processStep !== 'start');
+
+type ScopeControl = {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: { value: string; label: string }[];
+};
+
+const scopes = computed<ScopeControl[]>(() => [
+  {
+    label: 'Slices',
+    value: fillHolesStore.sliceScope,
+    onChange: (value) =>
+      fillHolesStore.setSliceScope(value as FillHolesSliceScope),
+    options: [
+      { value: FillHolesSliceScope.CurrentSlice, label: 'Current slice' },
+      { value: FillHolesSliceScope.WholeVolume, label: 'All slices' },
+    ],
+  },
+  {
+    label: 'Segments',
+    value: fillHolesStore.segmentScope,
+    onChange: (value) =>
+      fillHolesStore.setSegmentScope(value as FillHolesSegmentScope),
+    options: [
+      { value: FillHolesSegmentScope.AllSegments, label: 'All segments' },
+      {
+        value: FillHolesSegmentScope.SelectedSegment,
+        label: 'Selected segment',
+      },
+    ],
+  },
+]);
+</script>

src/components/GaussianSmoothParameterControls.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center">
+  <div class="d-flex align-start w-100">
     <mini-expansion-panel>
       <template #title>Gaussian smooth selected segment.</template>
       <ul>
@@ -17,7 +17,6 @@
 
   <div class="w-100 mb-4">
     <v-slider
-      class="mx-4"
       label="Smoothing Strength (σ)"
       :min="MIN_SIGMA"
       :max="MAX_SIGMA"
@@ -46,6 +45,6 @@ const gaussianSmoothStore = useGaussianSmoothStore();
 const processStore = usePaintProcessStore();
 
 const sigma = computed(() => gaussianSmoothStore.sigma);
-const isDisabled = computed(() => processStore.processStep === 'previewing');
+const isDisabled = computed(() => processStore.processStep !== 'start');
 const { setSigma } = gaussianSmoothStore;
 </script>

src/components/MiniExpansionPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="w-100 mb-4">
     <div class="d-flex align-center justify-space-between">
       <div class="d-flex">
         <slot name="title"> </slot>

src/components/ModulePanel.vue

@@ -21,11 +21,11 @@
       </v-tabs>
     </div>
     <div id="module-container">
-      <v-window v-model="selectedModuleIndex" touchless class="fill-height">
+      <v-window v-model="selectedModuleIndex" touchless class="module-window">
         <v-window-item
           v-for="mod in modules"
           :key="mod.name"
-          class="fill-height"
+          class="module-window-item"
         >
           <component
             :key="mod.name"
@@ -148,8 +148,14 @@ export default defineComponent({
 #module-container {
   position: relative;
   flex: 2;
-  overflow: auto;
-  scrollbar-gutter: stable;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.module-window,
+.module-window-item {
+  min-height: 100%;
 }
 
 .module-text {