feat(SegmentGroup): convert a loaded image to labelmap/segmentGroup

Kitware · Dec 13, 2023 · f79e361 · f79e361
1 parent 86981a1
commit f79e361
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 9 deletions.
diff --git a/src/components/ImageDataBrowser.vue b/src/components/ImageDataBrowser.vue
@@ -4,6 +4,7 @@ import ItemGroup from '@/src/components/ItemGroup.vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
 import ImageListCard from '@/src/components/ImageListCard.vue';
 import { createVTKImageThumbnailer } from '@/src/core/thumbnailers/vtk-image';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { useImageStore } from '../store/datasets-images';
 import { useDICOMStore } from '../store/datasets-dicom';
 import {
@@ -30,6 +31,7 @@ export default defineComponent({
     const dicomStore = useDICOMStore();
     const dataStore = useDatasetStore();
     const layersStore = useLayersStore();
+    const segmentGroupStore = useSegmentGroupStore();
 
     const primarySelection = computed(() => dataStore.primarySelection);
 
@@ -132,6 +134,15 @@ export default defineComponent({
       selected.value = [];
     }
 
+    function convertToLabelMap(key: string) {
+      if (primarySelection.value) {
+        segmentGroupStore.convertImageToLabelmap(
+          { type: 'image', dataID: key },
+          primarySelection.value
+        );
+      }
+    }
+
     function removeData(id: string) {
       imageStore.deleteData(id);
     }
@@ -143,6 +154,7 @@ export default defineComponent({
       toggleSelectAll,
       removeSelection,
       removeData,
+      convertToLabelMap,
       images,
       thumbnails,
       primarySelection,
@@ -244,6 +256,16 @@ export default defineComponent({
                       <span v-else>Add as layer</span>
                     </template>
                   </v-list-item>
+                  <v-list-item @click="convertToLabelMap(image.id)">
+                    Convert to Segment Group
+                    <v-tooltip
+                      activator="parent"
+                      location="end"
+                      max-width="200px"
+                    >
+                      Note: set the primary image before converting
+                    </v-tooltip>
+                  </v-list-item>
                   <v-list-item @click="removeData(image.id)">
                     Delete
                   </v-list-item>

diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import SegmentList from '@/src/components/SegmentList.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useDatasetStore } from '@/src/store/datasets';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import { useImageStore } from '@/src/store/datasets-images';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { Maybe } from '@/src/types';
@@ -10,6 +13,17 @@ const UNNAMED_GROUP_NAME = 'Unnamed Segment Group';
 
 const segmentGroupStore = useSegmentGroupStore();
 const { currentImageID } = useCurrentImage();
+const imageStore = useImageStore();
+const dicomStore = useDICOMStore();
+const dataStore = useDatasetStore();
+const nonDICOMImages = computed(() => {
+  const ids = imageStore.idList.filter(
+    (id) => !(id in dicomStore.imageIDToVolumeKey)
+  );
+  return ids.map((id) => ({ id, name: imageStore.metadata[id].name }));
+});
+
+const primarySelection = computed(() => dataStore.primarySelection);
 
 const currentSegmentGroups = computed(() => {
   if (!currentImageID.value) return [];
@@ -110,22 +124,66 @@ function createSegmentGroup() {
 
   startEditing(id);
 }
+
+function createSegmentGroupFromImage(selectedImageID: string) {
+  if (!selectedImageID)
+    throw new Error('Cannot create a labelmap without a base image');
+
+  if (primarySelection.value) {
+    segmentGroupStore.convertImageToLabelmap(
+      { type: 'image', dataID: selectedImageID },
+      primarySelection.value
+    );
+  }
+}
 </script>
 
 <template>
   <div class="my-2" v-if="currentImageID">
     <div
       class="text-grey text-subtitle-2 d-flex flex-row align-center justify-space-between mb-2"
     >
-      <div>Segment Groups</div>
-      <v-btn
-        variant="tonal"
-        color="secondary"
-        density="compact"
-        @click.stop="createSegmentGroup"
-      >
-        <v-icon class="mr-1">mdi-plus</v-icon> New Group
-      </v-btn>
+      <v-container>
+        <v-row class="mb-1">
+          <div>Segment Groups</div>
+          <v-spacer />
+          <v-btn
+            variant="tonal"
+            color="secondary"
+            density="compact"
+            @click.stop="createSegmentGroup"
+          >
+            <v-icon class="mr-1">mdi-plus</v-icon> New Group
+          </v-btn>
+        </v-row>
+        <v-row>
+          <v-spacer />
+          <v-menu location="bottom">
+            <template v-slot:activator="{ props }">
+              <v-btn
+                variant="tonal"
+                color="secondary"
+                density="compact"
+                v-bind="props"
+              >
+                <v-icon class="mr-1">mdi-chevron-down</v-icon>From Image
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item
+                v-for="(item, index) in nonDICOMImages"
+                :key="index"
+                @click="createSegmentGroupFromImage(item.id)"
+              >
+                {{ item.name }}
+                <v-tooltip activator="parent" location="end" max-width="200px">
+                  Convert to segment group
+                </v-tooltip>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-row>
+      </v-container>
     </div>
     <v-divider />
     <v-radio-group