also use double click to append items to the view

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",

frontend/src/components/TreeAccordion.vue

@@ -2,24 +2,49 @@
 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>
   <div class="accordion">
     <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>

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,20 +36,26 @@ 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>
 
 <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>

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>