From 4639815197336b21241b34b3dc514ca985c1deb4 Mon Sep 17 00:00:00 2001
From: Matthieu Jouis <matthieu@probabl.ai>
Date: Mon, 30 Sep 2024 16:34:15 +0200
Subject: [PATCH] also use double click to append items to the view

---
 frontend/package-lock.json                    |  2 +-
 frontend/package.json                         |  1 +
 frontend/src/components/TreeAccordion.vue     | 33 +++++++++++++++---
 frontend/src/components/TreeAccordionItem.vue | 34 +++++++++++++------
 frontend/src/views/ReportBuilderView.vue      |  9 ++++-
 5 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e683fa99d..39e6902e2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "markdown-it-highlightjs": "^4.1.0",
         "markdown-it-sub": "^2.0.0",
         "markdown-it-sup": "^2.0.0",
+        "mitt": "^3.0.1",
         "pinia": "^2.2.2",
         "plotly.js-dist-min": "^2.35.2",
         "simplebar-vue": "^2.3.5",
@@ -5424,7 +5425,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/moo-color": {
diff --git a/frontend/package.json b/frontend/package.json
index aefe63efd..fd361a42b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "markdown-it-highlightjs": "^4.1.0",
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
+    "mitt": "^3.0.1",
     "pinia": "^2.2.2",
     "plotly.js-dist-min": "^2.35.2",
     "simplebar-vue": "^2.3.5",
diff --git a/frontend/src/components/TreeAccordion.vue b/frontend/src/components/TreeAccordion.vue
index 1c0a54d6e..01d0e1623 100644
--- a/frontend/src/components/TreeAccordion.vue
+++ b/frontend/src/components/TreeAccordion.vue
@@ -2,14 +2,39 @@
 export interface TreeAccordionNode {
   name: string;
   children?: TreeAccordionNode[];
-  isRoot?: boolean;
 }
+
+export type AccordionEvent = {
+  doubleClick: string;
+};
 </script>
 
 <script setup lang="ts">
-import TreeAccordionItem from "./TreeAccordionItem.vue";
+import mitt from "mitt";
+
+import TreeAccordionItem from "@/components/TreeAccordionItem.vue";
+import { onMounted, onUnmounted } from "vue";
 
 const props = defineProps<{ nodes: TreeAccordionNode[] }>();
+
+const emit = defineEmits<{
+  doubleClick: [key: string];
+}>();
+
+const eventBus = mitt<AccordionEvent>();
+
+function onAccordionItemDoubleClick(key: string) {
+  console.log("TreeAccordion double-click", key);
+  emit("doubleClick", key);
+}
+
+onMounted(() => {
+  eventBus.on("doubleClick", onAccordionItemDoubleClick);
+});
+
+onUnmounted(() => {
+  eventBus.off("doubleClick", onAccordionItemDoubleClick);
+});
 </script>
 
 <template>
@@ -17,9 +42,9 @@ const props = defineProps<{ nodes: TreeAccordionNode[] }>();
     <TreeAccordionItem
       v-for="(node, index) in props.nodes"
       :key="index"
-      :name="node.name"
-      :children="node.children"
+      :node="node"
       :is-root="true"
+      :event-bus="eventBus"
     />
   </div>
 </template>
diff --git a/frontend/src/components/TreeAccordionItem.vue b/frontend/src/components/TreeAccordionItem.vue
index 6c634db1d..9507d0f2b 100644
--- a/frontend/src/components/TreeAccordionItem.vue
+++ b/frontend/src/components/TreeAccordionItem.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 
-import { type TreeAccordionNode } from "@/components/TreeAccordion.vue";
+import { type AccordionEvent, type TreeAccordionNode } from "@/components/TreeAccordion.vue";
+import type { Emitter } from "mitt";
 
-const props = defineProps<TreeAccordionNode>();
+const props = defineProps<{
+  node: TreeAccordionNode;
+  eventBus: Emitter<AccordionEvent>;
+  isRoot: boolean;
+}>();
 
 const isCollapsed = ref(false);
 const isDraggable = ref(false);
 
-const hasChildren = computed(() => props.children?.length);
+const hasChildren = computed(() => props.node.children?.length);
 const label = computed(() => {
-  const segment = props.name.split("/");
+  const segment = props.node.name.split("/");
   return segment[segment.length - 1];
 });
 
@@ -31,12 +36,18 @@ function countChildrenRecursively(node: TreeAccordionNode): number {
 }
 
 const totalChildrenCount = computed(() => {
-  return countChildrenRecursively(props);
+  return countChildrenRecursively(props.node);
 });
 
 function onDragStart(event: DragEvent) {
   if (event.dataTransfer) {
-    event.dataTransfer.setData("key", props.name);
+    event.dataTransfer.setData("key", props.node.name);
+  }
+}
+
+function onDoubleClick() {
+  if (!hasChildren.value) {
+    props.eventBus.emit("doubleClick", props.node.name);
   }
 }
 </script>
@@ -44,7 +55,7 @@ function onDragStart(event: DragEvent) {
 <template>
   <div
     class="tree-accordion-item"
-    :class="{ first: isRoot }"
+    :class="{ first: props.isRoot }"
     :style="{ '--children-count': totalChildrenCount }"
   >
     <div class="label-container" @click="toggleChildren">
@@ -53,11 +64,12 @@ function onDragStart(event: DragEvent) {
         :class="{ 'has-children': hasChildren }"
         :draggable="isDraggable && !hasChildren"
         @dragstart="onDragStart($event)"
+        @dblclick="onDoubleClick"
         @mousedown="isDraggable = true"
         @mouseup="isDraggable = false"
         @mouseleave="isDraggable = false"
       >
-        <span class="children-indicator icon-branch" v-if="!isRoot" />
+        <span class="children-indicator icon-branch" v-if="!props.isRoot" />
         <span class="icon icon-pill" />
         <span class="text">{{ label }}</span>
       </div>
@@ -73,10 +85,10 @@ function onDragStart(event: DragEvent) {
     <Transition name="toggle-children">
       <div class="children" v-if="hasChildren && !isCollapsed">
         <TreeAccordionItem
-          v-for="(child, index) in props.children"
+          v-for="(child, index) in props.node.children"
           :key="index"
-          :name="child.name"
-          :children="child.children"
+          :node="child"
+          :event-bus="props.eventBus"
           :is-root="false"
         />
       </div>
diff --git a/frontend/src/views/ReportBuilderView.vue b/frontend/src/views/ReportBuilderView.vue
index 5d3bf457b..6bdc7cd2c 100644
--- a/frontend/src/views/ReportBuilderView.vue
+++ b/frontend/src/views/ReportBuilderView.vue
@@ -50,6 +50,10 @@ function onDragLeave(event: DragEvent) {
   }
 }
 
+function onAccordionItemDoubleClick(key: string) {
+  reportStore.displayKey(key);
+}
+
 onMounted(() => {
   reportStore.startBackendPolling();
 });
@@ -63,7 +67,10 @@ onBeforeUnmount(() => reportStore.stopBackendPolling());
       <div class="items" v-if="reportStore.items && !isInFocusMode">
         <SectionHeader title="Elements" icon="icon-pie-chart" />
         <Simplebar class="key-list">
-          <TreeAccordion :nodes="reportStore.keysAsTree()" />
+          <TreeAccordion
+            :nodes="reportStore.keysAsTree()"
+            @double-click="onAccordionItemDoubleClick"
+          />
         </Simplebar>
       </div>