Add a path with copying to hover on nodes

Author: eoftedal

package-lock.json

@@ -17,9 +17,10 @@ defineProps<{
         :node="node"
         :primitive-results="primitiveResults"
         :level="0"
+        :path="node.path"
       />
     </template>
-    <TreeNode v-else-if="tree" :node="tree" :primitive-results="primitiveResults" :level="0" />
+    <TreeNode v-else-if="tree" :node="tree" :primitive-results="primitiveResults" :level="0" :path="tree.path" />
   </div>
 </template>
 

src/components/TreeContainer.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import type { TreeNode } from '../utils/astTreeBuilder'
 import { usePrimitiveMatching } from '../composables/usePrimitiveMatching'
 
 const props = defineProps<{
   node: TreeNode
   primitiveResults: Array<string | number | boolean>
   level?: number
+  path?: string
 }>()
 
 const emit = defineEmits<{
@@ -34,11 +35,53 @@ const toggleExpand = () => {
 }
 
 const indent = computed(() => (props.level || 0) * 20)
+
+const showTooltip = ref(false)
+const copied = ref(false)
+const tooltipRef = ref<HTMLElement | null>(null)
+const nodeContentRef = ref<HTMLElement | null>(null)
+
+const tooltipLeft = computed(() => {
+  if (!nodeContentRef.value || !tooltipRef.value) return 0
+  const rect = nodeContentRef.value.getBoundingClientRect()
+  const tooltipRect = tooltipRef.value.getBoundingClientRect()
+  return rect.left + rect.width / 2 - tooltipRect.width / 2
+})
+
+const tooltipTop = computed(() => {
+  if (!nodeContentRef.value) return 0
+  const rect = nodeContentRef.value.getBoundingClientRect()
+  return rect.top - 10
+})
+
+const showTooltipHandler = () => {
+  showTooltip.value = true
+}
+
+const hideTooltipHandler = () => {
+  showTooltip.value = false
+  copied.value = false
+}
+
+const copyPath = async () => {
+  if (props.path) {
+    try {
+      await navigator.clipboard.writeText(props.path)
+      copied.value = true
+      setTimeout(() => {
+        copied.value = false
+      }, 1500)
+    } catch {
+      // Clipboard API not available
+    }
+  }
+}
 </script>
 
 <template>
   <div class="tree-node">
     <div
+      ref="nodeContentRef"
       class="node-content"
       :class="{
         matched: node.isMatched,
@@ -49,6 +92,9 @@ const indent = computed(() => (props.level || 0) * 20)
       }"
       :style="{ paddingLeft: `${indent}px` }"
       @click="toggleExpand"
+      @mouseenter="showTooltipHandler"
+      @mouseleave="hideTooltipHandler"
+      v-if="path"
     >
       <span class="expand-icon" v-if="node.children.length > 0">
         {{ node.isExpanded ? '▼' : '▶' }}
@@ -67,8 +113,25 @@ const indent = computed(() => (props.level || 0) * 20)
         :node="child"
         :primitive-results="primitiveResults"
         :level="(level || 0) + 1"
+        :path="child.path"
       />
     </div>
+
+    <teleport to="body">
+      <div
+        ref="tooltipRef"
+        v-if="path && showTooltip"
+        class="path-tooltip"
+        :style="{ left: tooltipLeft + 'px', top: tooltipTop + 'px' }"
+        @mouseenter="showTooltipHandler"
+        @mouseleave="hideTooltipHandler"
+      >
+        <div class="tooltip-path">{{ path }}</div>
+        <button class="tooltip-copy" @click="copyPath">
+          {{ copied ? 'Copied!' : 'Copy' }}
+        </button>
+      </div>
+    </teleport>
   </div>
 </template>
 
@@ -178,4 +241,45 @@ const indent = computed(() => (props.level || 0) * 20)
 .children {
   margin-left: 0;
 }
+
+.path-tooltip {
+  position: fixed;
+  z-index: 10000;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  border: 1px solid #454545;
+  border-radius: 6px;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+  white-space: nowrap;
+}
+
+.tooltip-path {
+  color: #79c0ff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 400px;
+}
+
+.tooltip-copy {
+  background: #303030;
+  color: #c9d1d9;
+  border: 1px solid #555;
+  border-radius: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.15s;
+}
+
+.tooltip-copy:hover {
+  background: #444;
+}
 </style>

src/components/TreeNode.vue

@@ -87,12 +87,13 @@ export interface TreeNode {
   astNode: ASTNode
   primitiveValue?: string | number | boolean
   attributeName?: string
+  path: string
 }
 
 /**
  * Format a node label with relevant information based on node type
  */
-function formatNodeLabel(node: ASTNode, attributeName?: string): string {
+function formatNodeLabel(node: ASTNode): string {
   let label = node.type
 
   // Add useful info based on type
@@ -141,6 +142,7 @@ export function buildTree(
   matchedNodes: Set<ASTNode>,
   primitiveResults: Array<string | number | boolean> = [],
   attributeName?: string,
+  parentPath: string = '',
 ): TreeNode {
   const children: TreeNode[] = []
 
@@ -150,16 +152,20 @@ export function buildTree(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const anyNode = node as any
 
+  // Compute the path segment for this node
+  const segment = attributeName ? `${attributeName}:${node.type}` : node.type
+  const currentPath = parentPath ? `${parentPath}/${segment}` : `/${segment}`
+
   if (
     node.type === 'TemplateLiteral' &&
     Array.isArray(anyNode.quasis) &&
     Array.isArray(anyNode.expressions)
   ) {
     // Interleave quasis and expressions by source position: quasi[0], expr[0], quasi[1], expr[1], ..., quasi[n]
     for (let i = 0; i < anyNode.quasis.length; i++) {
-      children.push(buildTree(anyNode.quasis[i], matchedNodes, primitiveResults, 'quasis'))
+      children.push(buildTree(anyNode.quasis[i], matchedNodes, primitiveResults, 'quasis', currentPath))
       if (i < anyNode.expressions.length) {
-        children.push(buildTree(anyNode.expressions[i], matchedNodes, primitiveResults, 'expressions'))
+        children.push(buildTree(anyNode.expressions[i], matchedNodes, primitiveResults, 'expressions', currentPath))
       }
     }
   } else {
@@ -169,11 +175,11 @@ export function buildTree(
       if (Array.isArray(child)) {
         for (const item of child) {
           if (item && typeof item === 'object' && 'type' in item) {
-            children.push(buildTree(item, matchedNodes, primitiveResults, key))
+            children.push(buildTree(item, matchedNodes, primitiveResults, key, currentPath))
           }
         }
       } else if (child && typeof child === 'object' && 'type' in child) {
-        children.push(buildTree(child, matchedNodes, primitiveResults, key))
+        children.push(buildTree(child, matchedNodes, primitiveResults, key, currentPath))
       }
     }
   }
@@ -182,13 +188,14 @@ export function buildTree(
     type: node.type,
     start: node.start,
     end: node.end,
-    label: formatNodeLabel(node, attributeName),
+    label: formatNodeLabel(node),
     children,
     isMatched: matchedNodes.has(node),
     isAncestorOfMatch: false,
     isExpanded: false,
     astNode: node,
     attributeName,
+    path: currentPath,
   }
 
   return treeNode