Add functionality to convert images to labelmaps

.eslintrc.cjs

@@ -67,6 +67,7 @@ module.exports = {
         ignores: ['Settings'],
       },
     ],
+    'prefer-destructuring': 'off',
   },
 
   overrides: [

src/components/AnnotationsModule.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import { AnnotationToolType } from '@/src/store/tools/types';
+import { ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { AnnotationToolType, Tools } from '@/src/store/tools/types';
+import { useToolStore } from '@/src/store/tools';
 import MeasurementsToolList from './MeasurementsToolList.vue';
-import LabelmapList from './LabelmapList.vue';
+import SegmentGroupControls from './SegmentGroupControls.vue';
 import ToolControls from './ToolControls.vue';
 import MeasurementRulerDetails from './MeasurementRulerDetails.vue';
 
-const tools = [
+const Tabs = {
+  Measurements: 'measurements',
+  SegmentGroups: 'segmentGroups',
+};
+
+const MeasurementTools = [
   {
     type: AnnotationToolType.Ruler,
     icon: 'mdi-ruler',
@@ -20,31 +28,53 @@ const tools = [
     icon: 'mdi-pentagon-outline',
   },
 ];
+
+const MeasurementToolTypes = new Set<string>(
+  MeasurementTools.map(({ type }) => type)
+);
+
+const tab = ref(Tabs.Measurements);
+const { currentTool } = storeToRefs(useToolStore());
+
+function autoFocusTab() {
+  if (currentTool.value === Tools.Paint) {
+    tab.value = Tabs.SegmentGroups;
+  } else if (MeasurementToolTypes.has(currentTool.value)) {
+    tab.value = Tabs.Measurements;
+  }
+}
+
+watch(
+  currentTool,
+  () => {
+    autoFocusTab();
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <div class="overflow-y-auto mx-2 fill-height">
     <tool-controls />
-    <div class="header">Measurements</div>
-    <div class="content">
-      <measurements-tool-list :tools="tools" />
-    </div>
-    <div class="text-caption text-center empty-state">No measurements</div>
-    <div class="header">Labelmaps</div>
-    <div class="content">
-      <labelmap-list />
-    </div>
-    <div class="text-caption text-center empty-state">No labelmaps</div>
+    <v-divider thickness="4" />
+    <v-tabs v-model="tab" align-tabs="center" density="compact" class="my-1">
+      <v-tab value="measurements" class="tab-header">Measurements</v-tab>
+      <v-tab value="segmentGroups" class="tab-header">Segment Groups</v-tab>
+    </v-tabs>
+    <v-window v-model="tab">
+      <v-window-item value="measurements">
+        <measurements-tool-list :tools="MeasurementTools" />
+      </v-window-item>
+      <v-window-item value="segmentGroups">
+        <segment-group-controls />
+      </v-window-item>
+    </v-window>
   </div>
 </template>
 
 <style scoped>
-.empty-state {
-  display: none;
-}
-
-.content:empty + .empty-state {
-  display: block;
+.tab-header {
+  font-size: 0.8rem;
 }
 </style>
 

src/components/CloseableDialog.vue

@@ -2,6 +2,7 @@
 /* globals defineOptions */
 import { computed, PropType } from 'vue';
 import { useDisplay } from 'vuetify';
+import IsolatedDialog from '@/src/components/IsolatedDialog.vue';
 
 defineOptions({
   inheritAttrs: false,
@@ -44,23 +45,16 @@ const width = computed(() => {
 const maxWidth = computed(() => {
   return display.mobile.value ? '100%' : props.maxWidth;
 });
-
-const stopAllButEscape = (e: KeyboardEvent) => {
-  if (e.key !== 'Escape') {
-    e.stopPropagation();
-  }
-};
 </script>
 
 <template>
-  <v-dialog
+  <isolated-dialog
     v-bind="$attrs"
     :content-class="['closeable-dialog', $attrs['content-class']]"
     :width="width"
     :max-width="maxWidth"
     :model-value="props.modelValue"
     @update:model-value="$emit('update:model-value', $event)"
-    @keydown="stopAllButEscape"
   >
     <v-btn
       variant="flat"
@@ -73,7 +67,7 @@ const stopAllButEscape = (e: KeyboardEvent) => {
       @click="close"
     />
     <slot :close="close" />
-  </v-dialog>
+  </isolated-dialog>
 </template>
 
 <style scoped>

src/components/EditableChipList.vue

@@ -0,0 +1,74 @@
+<script
+  setup
+  lang="ts"
+  ,
+  generic="T, KeyProp extends keyof T, TitleProp extends keyof T"
+>
+/* global T, KeyProp, TitleProp */
+
+import { computed } from 'vue';
+import { Maybe } from '@/src/types';
+
+defineEmits(['select', 'edit', 'create', 'update:model-value']);
+
+const props = withDefaults(
+  defineProps<{
+    items: Array<T>;
+    itemKey: T[KeyProp] extends string | number | symbol ? KeyProp : never;
+    itemTitle: T[TitleProp] extends string ? TitleProp : never;
+    createLabelText?: string;
+    modelValue: Maybe<T[KeyProp]>;
+  }>(),
+  {
+    createLabelText: 'Create Label',
+  }
+);
+
+const itemsToRender = computed(() =>
+  props.items.map((item) => ({
+    key: item[props.itemKey] as string | number | symbol,
+    title: item[props.itemTitle],
+  }))
+);
+</script>
+
+<template>
+  <v-item-group
+    :model-value="modelValue"
+    @update:model-value="$emit('update:model-value', $event)"
+    selected-class="selected"
+    mandatory
+  >
+    <v-row dense>
+      <v-col cols="6" v-for="({ key, title }, idx) in itemsToRender" :key="key">
+        <v-item v-slot="{ selectedClass, toggle }" :value="key">
+          <v-chip
+            variant="tonal"
+            :class="['w-100 d-flex', selectedClass]"
+            @click="toggle"
+          >
+            <slot name="item-prepend" :key="key" :item="items[idx]"></slot>
+            <span class="overflow-hidden">{{ title }}</span>
+            <v-spacer />
+            <slot name="item-append" :key="key" :item="items[idx]"></slot>
+          </v-chip>
+        </v-item>
+      </v-col>
+
+      <!-- Add Label button -->
+      <v-col cols="6">
+        <v-chip variant="outlined" class="w-100" @click="$emit('create')">
+          <v-icon class="mr-2">mdi-plus</v-icon>
+          {{ createLabelText }}
+        </v-chip>
+      </v-col>
+    </v-row>
+  </v-item-group>
+</template>
+
+<style scoped>
+.selected {
+  background-color: rgb(var(--v-theme-selection-bg-color));
+  border-color: rgb(var(--v-theme-selection-border-color));
+}
+</style>

src/components/ImageDataBrowser.vue

@@ -59,9 +59,9 @@ export default defineComponent({
           type: 'image',
           dataID: id,
         } as DataSelection;
-        const layerAdded = layerImageIDs.includes(id);
+        const isLayer = layerImageIDs.includes(id);
         const layerLoaded = loadedLayerImageIDs.includes(id);
-        const loading = layerAdded && !layerLoaded;
+        const layerLoading = isLayer && !layerLoaded;
         const layerable = id !== selectedImageID && primarySelection.value;
         return {
           id,
@@ -72,12 +72,11 @@ export default defineComponent({
           dimensions: metadata[id].dimensions,
           spacing: [...metadata[id].spacing].map((s) => s.toFixed(2)),
           layerable,
-          loading,
-          layerIcon: layerAdded ? 'mdi-layers-minus' : 'mdi-layers-plus',
-          layerTooltip: layerAdded ? 'Remove Layer' : 'Add Layer',
+          layerLoading,
+          isLayer,
           layerHandler: () => {
-            if (!loading && layerable) {
-              if (layerAdded)
+            if (!layerLoading && layerable) {
+              if (isLayer)
                 layersStore.deleteLayer(primarySelection.value, selectionKey);
               else layersStore.addLayer(primarySelection.value, selectionKey);
             }
@@ -133,12 +132,17 @@ export default defineComponent({
       selected.value = [];
     }
 
+    function removeData(id: string) {
+      imageStore.deleteData(id);
+    }
+
     return {
       selected,
       selectedAll,
       selectedSome,
       toggleSelectAll,
       removeSelection,
+      removeData,
       images,
       thumbnails,
       primarySelection,
@@ -199,7 +203,7 @@ export default defineComponent({
       >
         <image-list-card
           v-model="selected"
-          class="mt-1"
+          class="mt-1 position-relative"
           selectable
           :inputValue="image.id"
           :active="active"
@@ -209,30 +213,59 @@ export default defineComponent({
           :id="image.id"
           @click="select"
         >
-          <div class="text-body-2 font-weight-bold text-no-wrap text-truncate">
-            {{ image.name }}
-          </div>
-          <div class="text-caption">
-            Dims: ({{ image.dimensions.join(', ') }})
-          </div>
-          <div class="text-caption">
-            Spacing: ({{ image.spacing.join(', ') }})
+          <div class="d-flex flex-row justify-space-between">
+            <div class="allow-trunc-text-flex-child">
+              <div
+                class="text-body-2 font-weight-bold text-no-wrap text-truncate"
+              >
+                {{ image.name }}
+              </div>
+              <div class="text-caption">
+                Dims: ({{ image.dimensions.join(', ') }})
+              </div>
+              <div class="text-caption">
+                Spacing: ({{ image.spacing.join(', ') }})
+              </div>
+            </div>
+            <v-btn icon variant="plain" size="x-small" class="dataset-menu">
+              <v-menu activator="parent">
+                <v-list>
+                  <v-list-item
+                    v-if="image.layerable"
+                    @click.stop="image.layerHandler()"
+                  >
+                    <template v-if="image.layerLoading">
+                      <div style="margin: 0 auto">
+                        <v-progress-circular indeterminate size="small" />
+                      </div>
+                    </template>
+                    <template v-else>
+                      <span v-if="image.isLayer">Remove as layer</span>
+                      <span v-else>Add as layer</span>
+                    </template>
+                  </v-list-item>
+                  <v-list-item @click="removeData(image.id)">
+                    Delete
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+              <v-icon size="medium">mdi-dots-vertical</v-icon>
+            </v-btn>
           </div>
-          <v-btn
-            icon
-            variant="text"
-            :disabled="!image.layerable"
-            :loading="image.loading"
-            @click.stop="image.layerHandler()"
-            class="mt-1"
-          >
-            <v-icon :icon="image.layerIcon" />
-            <v-tooltip location="top" activator="parent">
-              {{ image.layerTooltip }}
-            </v-tooltip>
-          </v-btn>
         </image-list-card>
       </groupable-item>
     </item-group>
   </div>
 </template>
+
+<style scoped>
+.allow-trunc-text-flex-child {
+  min-width: 0;
+}
+
+.dataset-menu {
+  position: relative;
+  top: -8px;
+  right: -4px;
+}
+</style>

src/components/ImageListCard.vue

@@ -38,10 +38,8 @@
               <slot name="image-overlay" />
             </persistent-overlay>
           </v-col>
-          <v-col :cols="selectable ? 7 : 8">
-            <div class="ml-2">
-              <slot></slot>
-            </div>
+          <v-col :cols="selectable ? 7 : 8" class="ml-2">
+            <slot></slot>
           </v-col>
         </v-row>
       </v-container>

src/components/IsolatedDialog.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const stopAllButEscape = (e: KeyboardEvent) => {
+  if (e.key !== 'Escape') {
+    e.stopPropagation();
+  }
+};
+</script>
+<template>
+  <v-dialog @keydown="stopAllButEscape"><slot></slot></v-dialog>
+</template>