From edc2021024ab25c741233c531f409b33c97d8fc4 Mon Sep 17 00:00:00 2001
From: Arjun Raj <arjunrajlab@gmail.com>
Date: Mon, 27 Jan 2025 09:56:05 -0500
Subject: [PATCH] Streamlined the UI

---
 src/tools/creation/ToolCreation.vue      |  21 ++-
 src/tools/creation/ToolTypeSelection.vue | 214 ++++++++++++-----------
 src/tools/toolsets/Toolset.vue           |  52 ++++--
 src/tours/AddManualBlobToolTour.yaml     |  12 +-
 4 files changed, 169 insertions(+), 130 deletions(-)

diff --git a/src/tools/creation/ToolCreation.vue b/src/tools/creation/ToolCreation.vue
index fb9b35bf..10b791f3 100644
--- a/src/tools/creation/ToolCreation.vue
+++ b/src/tools/creation/ToolCreation.vue
@@ -3,8 +3,6 @@
     <v-card class="pa-1">
       <v-card-title> Add a new tool </v-card-title>
       <v-card-text>
-        <!-- Pick which template should be used for the tool configuration -->
-        <tool-type-selection v-model="selectedTool" />
         <!-- Form elements generated from the template -->
         <tool-configuration
           :template="selectedTemplate"
@@ -109,6 +107,16 @@ export default class ToolCreation extends Vue {
   @Prop({ default: false })
   readonly open!: boolean;
 
+  @Prop({ default: null })
+  readonly initialSelectedTool!: TToolTypeSelectionValue | null;
+
+  private _selectedTool: TToolTypeSelectionValue | null = null;
+
+  @Watch("initialSelectedTool", { immediate: true })
+  onInitialSelectedToolChange(newVal: TToolTypeSelectionValue | null) {
+    this.selectedTool = newVal;
+  }
+
   createTool() {
     if (this.selectedTemplate === null) {
       return;
@@ -129,8 +137,6 @@ export default class ToolCreation extends Vue {
     this.close();
   }
 
-  private _selectedTool: TToolTypeSelectionValue | null = null;
-
   set selectedTool(value) {
     this._selectedTool = value;
     this.selectedTemplate = value?.template ?? null;
@@ -202,6 +208,13 @@ export default class ToolCreation extends Vue {
   }
 
   @Watch("open")
+  onOpenChange(newValue: boolean) {
+    if (!newValue) {
+      // Only reset when closing
+      this.reset();
+    }
+  }
+
   reset() {
     this.userToolName = false;
     this.toolName = "New Tool";
diff --git a/src/tools/creation/ToolTypeSelection.vue b/src/tools/creation/ToolTypeSelection.vue
index e160c09a..7427e691 100644
--- a/src/tools/creation/ToolTypeSelection.vue
+++ b/src/tools/creation/ToolTypeSelection.vue
@@ -1,57 +1,74 @@
 <template>
-  <v-container>
-    <v-menu offset-x right>
-      <template v-slot:activator="{ on, attrs }">
-        <v-btn
-          v-bind="attrs"
-          v-on="on"
-          class="big-subheaders"
-          id="select-tool-type-tourstep"
-          v-tour-trigger="'select-tool-type-tourtrigger'"
-        >
-          {{ selectedItem ? selectedItem.text : "Select Tool Type" }}
-        </v-btn>
-      </template>
-      <v-list class="floating-list" id="select-tool-list-tourstep">
-        <template v-for="(item, itemIndex) in submenuItems">
-          <v-subheader
-            v-if="'header' in item"
-            :key="item.header"
-            class="custom-subheader"
-          >
-            {{ item.header }}
-          </v-subheader>
-          <v-divider
-            v-else-if="'divider' in item"
-            :key="`divider-${itemIndex}`"
-          />
-          <v-list-item
-            v-else-if="'key' in item"
-            :key="item.key"
-            :id="getTourStepId(item.text)"
-            v-tour-trigger="getTourTriggerId(item.text)"
-            @click="selectedItem = item"
-            dense
-          >
-            <v-list-item-content>
-              <v-list-item-title>{{ item.text }}</v-list-item-title>
-              <v-list-item-subtitle v-if="item.description">
-                {{ item.description }}
-              </v-list-item-subtitle>
-            </v-list-item-content>
-          </v-list-item>
-        </template>
-      </v-list>
-    </v-menu>
+  <v-container class="pa-2">
+    <v-card class="tool-type-menu">
+      <v-card-title class="text-h6 py-2"> Select Tool Type </v-card-title>
+
+      <v-card-text class="pa-2">
+        <v-row dense>
+          <template v-for="(item, itemIndex) in submenuItems">
+            <!-- Headers become section titles -->
+            <v-col
+              v-if="'header' in item"
+              :key="item.header"
+              cols="12"
+              class="pt-2 pb-1"
+            >
+              <div class="text-subtitle-1 font-weight-medium">
+                {{ item.header }}
+              </div>
+            </v-col>
+
+            <!-- Dividers span full width -->
+            <v-col
+              v-else-if="'divider' in item"
+              :key="`divider-${itemIndex}`"
+              cols="12"
+              class="py-0"
+            >
+              <v-divider />
+            </v-col>
+
+            <!-- Tool type options become cards -->
+            <v-col
+              v-else-if="'key' in item"
+              :key="item.key"
+              cols="6"
+              sm="4"
+              md="3"
+              lg="2"
+              class="pa-1"
+            >
+              <v-card
+                outlined
+                :id="getTourStepId(item.text)"
+                v-tour-trigger="getTourTriggerId(item.text)"
+                @click="selectItem(item)"
+                class="tool-type-card"
+                hover
+              >
+                <v-card-title class="text-body-2 pa-2">
+                  {{ item.text }}
+                </v-card-title>
+                <v-card-text
+                  v-if="item.description"
+                  class="text-caption pa-2 pt-0 description"
+                >
+                  {{ item.description }}
+                </v-card-text>
+              </v-card>
+            </v-col>
+          </template>
+        </v-row>
+      </v-card-text>
+    </v-card>
   </v-container>
 </template>
+
 <script lang="ts">
-import { Vue, Component, Watch, Prop } from "vue-property-decorator";
+import { Vue, Component } from "vue-property-decorator";
 import propertiesStore from "@/store/properties";
 import store from "@/store";
-import ToolConfiguration from "@/tools/creation/ToolConfiguration.vue";
 import { AnnotationShape, IToolTemplate } from "@/store/model";
-import { IAnnotationSetup } from "./templates/AnnotationConfiguration.vue";
 import { toKebabCase } from "@/utils/strings";
 
 interface Item {
@@ -73,28 +90,25 @@ interface AugmentedItem extends Item {
   submenu: Submenu;
 }
 
+const hiddenToolTexts = new Set<string>([
+  '"Snap to" manual annotation tools',
+  "Annotation edit tools",
+]);
+
 export interface TReturnType {
   template: IToolTemplate | null;
   defaultValues: any;
   selectedItem: AugmentedItem | null;
 }
 
-const hiddenToolTexts = new Set<string>([
-  '"Snap to" manual annotation tools',
-  "Annotation edit tools",
-]);
-
-@Component({
-  components: {
-    ToolConfiguration,
-  },
-})
+@Component
 export default class ToolTypeSelection extends Vue {
   readonly propertyStore = propertiesStore;
   readonly store = store;
 
-  @Prop()
-  private value: any;
+  selectedItem: AugmentedItem | null = null;
+  computedTemplate: IToolTemplate | null = null;
+  defaultToolValues: any = {};
 
   getTourStepId(id: string): string {
     return `${toKebabCase(id)}-tourstep`;
@@ -104,11 +118,6 @@ export default class ToolTypeSelection extends Vue {
     return `${toKebabCase(id)}-tourtrigger`;
   }
 
-  computedTemplate: IToolTemplate | null = null;
-  defaultToolValues: any = {};
-
-  selectedItem: AugmentedItem | null = null;
-
   get submenuItems() {
     return this.submenus.reduce(
       (items, submenu) => [
@@ -147,7 +156,7 @@ export default class ToolTypeSelection extends Vue {
                 const annotationInterface = template.interface.find(
                   (elem: any) => elem.type === "annotation",
                 );
-                const annotationSetupDefault: Partial<IAnnotationSetup> = {
+                const annotationSetupDefault: any = {
                   shape: labels.annotationShape ?? AnnotationShape.Point,
                 };
                 items.push({
@@ -186,14 +195,9 @@ export default class ToolTypeSelection extends Vue {
       });
   }
 
-  @Watch("selectedItem")
-  selectSubmenuItem() {
-    if (!this.selectedItem) {
-      this.reset();
-      return;
-    }
-    const submenu = this.selectedItem.submenu;
-    const item = this.selectedItem;
+  selectItem(item: AugmentedItem) {
+    this.selectedItem = item;
+    const submenu = item.submenu;
     const { template, submenuInterface, submenuInterfaceIdx } = submenu;
 
     let computedTemplate = template;
@@ -230,70 +234,72 @@ export default class ToolTypeSelection extends Vue {
       default:
         break;
     }
+
     this.computedTemplate = computedTemplate;
     this.defaultToolValues = defaultToolValues;
-  }
 
-  refreshWorkers() {
-    this.propertyStore.fetchWorkerImageList();
-  }
-
-  @Watch("computedTemplate")
-  @Watch("defaultToolValues")
-  handleChange() {
-    const input: TReturnType = {
+    const returnValue: TReturnType = {
       template: this.computedTemplate,
       defaultValues: this.defaultToolValues,
-      selectedItem: this.selectedItem,
+      selectedItem: item,
     };
-    this.$emit("input", input);
-  }
 
-  mounted() {
-    this.initialize();
+    this.$emit("selected", returnValue);
   }
 
   get templates() {
     return this.store.toolTemplateList;
   }
 
-  @Watch("templates")
-  @Watch("value")
-  initialize() {
-    if (!this.value && this.templates.length) {
-      this.reset();
-    }
+  mounted() {
+    this.refreshWorkers();
+  }
+
+  refreshWorkers() {
+    this.propertyStore.fetchWorkerImageList();
   }
 
   reset() {
     this.selectedItem = null;
     this.computedTemplate = null;
     this.defaultToolValues = {};
-    this.handleChange();
     this.refreshWorkers();
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.floating-list {
-  display: flex;
-  flex-direction: column;
+.tool-type-menu {
   max-height: 90vh;
   overflow-y: auto;
-  padding: 0;
-  margin: 0;
 }
 
-.custom-subheader {
-  font-size: large;
-  text-align: left;
-  padding: 8px 16px;
+.tool-type-card {
+  height: 100%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 0;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .v-card__title {
+    word-break: break-word;
+    line-height: 1.2;
+    min-height: 0;
+  }
+
+  .description {
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.2;
+  }
 }
 </style>
 
 <style lang="scss">
 .v-list .v-subheader {
-  font-size: large;
+  font-size: medium;
 }
 </style>
diff --git a/src/tools/toolsets/Toolset.vue b/src/tools/toolsets/Toolset.vue
index 3cee3efa..100b6b41 100644
--- a/src/tools/toolsets/Toolset.vue
+++ b/src/tools/toolsets/Toolset.vue
@@ -3,29 +3,36 @@
     <v-expansion-panel expand v-model="panels">
       <v-expansion-panel-header class="pa-2">
         <v-toolbar-title> Toolset </v-toolbar-title>
-        <!-- Tool creation -->
-        <v-dialog v-model="toolCreationDialogOpen" width="60%">
+        <!-- Tool Type Selection -->
+        <v-dialog v-model="toolTypeDialogOpen" width="90%">
           <template v-slot:activator="{ on: dialog }">
             <v-tooltip top>
               <template v-slot:activator="{ on: tooltip }">
                 <v-btn
-                  class="rounded-pill"
-                  icon
+                  class="ml-2"
+                  color="primary"
                   v-on="{ ...dialog, ...tooltip }"
                   id="add-tool-tourstep"
                   v-tour-trigger="'add-tool-tourtrigger'"
                 >
-                  <v-icon>
-                    {{ "mdi-plus" }}
-                  </v-icon>
+                  Add new tool
                 </v-btn>
               </template>
-              <span>Create new tool</span>
+              <span>Browse tool types</span>
             </v-tooltip>
           </template>
+          <tool-type-selection @selected="handleToolTypeSelected" />
+        </v-dialog>
+        <!-- Tool creation -->
+        <v-dialog
+          v-model="toolCreationDialogOpen"
+          width="60%"
+          @input="onToolCreationDialogInput"
+        >
           <tool-creation
-            @done="toolCreationDialogOpen = false"
+            @done="onToolCreationDone"
             :open="toolCreationDialogOpen"
+            :initial-selected-tool="selectedToolType"
           />
         </v-dialog>
       </v-expansion-panel-header>
@@ -108,7 +115,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
+import { Vue, Component, Watch } from "vue-property-decorator";
 import draggable from "vuedraggable";
 import store from "@/store";
 import {
@@ -121,12 +128,14 @@ import AnnotationWorkerMenu from "@/components/AnnotationWorkerMenu.vue";
 import SamToolMenu from "@/components/SamToolMenu.vue";
 import CircleToDotMenu from "@/components/CircleToDotMenu.vue";
 import ToolCreation from "@/tools/creation/ToolCreation.vue";
+import ToolTypeSelection from "@/tools/creation/ToolTypeSelection.vue";
 import ToolItem from "./ToolItem.vue";
 
 // Lists tools from a toolset, allows selecting a tool from the list, and adding new tools
 @Component({
   components: {
     ToolCreation,
+    ToolTypeSelection,
     ToolItem,
     AnnotationWorkerMenu,
     SamToolMenu,
@@ -164,7 +173,28 @@ export default class Toolset extends Vue {
   }
 
   toolCreationDialogOpen: boolean = false;
-  toolPickerDialogOpen: boolean = false;
+  toolTypeDialogOpen: boolean = false;
+  selectedToolType: any = null;
+
+  onToolCreationDone() {
+    // The child emitted "done" meaning the dialog is closing/cancelled/finished
+    this.toolCreationDialogOpen = false;
+    this.selectedToolType = null; // Now is the right time to clear it
+  }
+
+  onToolCreationDialogInput(newVal: boolean) {
+    this.toolCreationDialogOpen = newVal;
+    if (!newVal) {
+      // The dialog was just closed by clicking outside or ESC
+      this.selectedToolType = null;
+    }
+  }
+
+  handleToolTypeSelected(toolType: any) {
+    this.selectedToolType = toolType;
+    this.toolTypeDialogOpen = false;
+    this.toolCreationDialogOpen = true;
+  }
 
   getToolPropertiesDescription(tool: IToolConfiguration): string[][] {
     const propDesc: string[][] = [["Name", tool.name]];
diff --git a/src/tours/AddManualBlobToolTour.yaml b/src/tours/AddManualBlobToolTour.yaml
index 0166c110..1426c806 100644
--- a/src/tours/AddManualBlobToolTour.yaml
+++ b/src/tours/AddManualBlobToolTour.yaml
@@ -14,17 +14,6 @@ steps:
     showNextButton: false
     onTriggerEvent: "add-tool-tourtrigger"
 
-  - id: select-tool-type-tourstep
-    route: datasetview
-    element: "#select-tool-type-tourstep"
-    title: "Select Tool Type"
-    text: "Select the type of tool you want to add."
-    position: "right"
-    waitForElement: 1000
-    modalOverlay: true
-    showNextButton: false
-    onTriggerEvent: "select-tool-type-tourtrigger"
-
   - id: blob-tool-tourstep
     route: datasetview
     element: "#blob-tourstep"
@@ -33,6 +22,7 @@ steps:
     position: "right"
     waitForElement: 1000
     onTriggerEvent: "blob-tourtrigger"
+    showNextButton: false
     modalOverlay: true
 
   - id: layer-select-tourstep