@picked/svelte 0.0.54-next.3 → 0.0.54-next.4

package/dist/plugins/devtools/screens/events/EventListItem.svelte

@@ -85,10 +85,8 @@
       fields.push({ label: 'Step Key', value: step.key }) 
     }
 
-    // eslint-disable-next-line sonarjs/deprecation -- backwards-compat fallback for label
-    const stepName = ('name' in step && step.name) || ('label' in step && step.label)
-    if (stepName) { 
-      fields.push({ label: 'Step Name', value: stepName }) 
+    if ('name' in step && step.name) {
+      fields.push({ label: 'Step Name', value: step.name })
     }
 
     return fields

package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   /** @file D3-based tree visualization of an experience's node graph in the devtools panel. */
+  import { onDestroy } from 'svelte'
   import * as d3 from 'd3'
   import type { ExperienceEdge, ExperienceNode, ExperienceStore } from '@picked/client'
   import { Badge, Button, Spinner, Stack, Text, VisualizationContainer } from '../../ui'
@@ -16,6 +17,12 @@
   const loading = false
 
   let treeRenderingDone = false
+  let tooltipEl: d3.Selection<HTMLDivElement, unknown, null, undefined> | null = null
+
+  onDestroy(() => {
+    tooltipEl?.remove()
+    tooltipEl = null
+  })
 
   const tree = experience.treeStore
 
@@ -23,11 +30,13 @@
   $: edges = $tree.edges
   $: conditions = $tree.conditions
 
+
   let zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>
 
   interface ProcessedNode {
     id: string
     name: string
+    tooltip?: string
     type: string
     children: ProcessedNode[]
     _originalNode: ExperienceNode
@@ -137,25 +146,32 @@
 
     const getNodeLabel = (node: ExperienceNode): string => {
       if (node.type === 'origin') return 'Start'
-      if (node.type === 'step')
-        return node.name ?? 'Unknown Step'
+      if (node.type === 'step') return node.name ?? 'Unknown Step'
+
       if (node.type === 'condition') {
-        const conditionId = node.conditionId
-        const conditionItem = conditionId ? conditionsMap.get(conditionId) : undefined
-        if (conditionItem?.name) return conditionItem.name
-        if (conditionItem?.logic) return formatLogicRule(conditionItem.logic)
-        return 'Condition'
+        const conditionItem = node.conditionId ? conditionsMap.get(node.conditionId) : undefined
+        return conditionItem?.name ?? 'Condition'
       }
 
+      if (node.type === 'action') return node.name ?? node.actionKey ?? 'Action'
+
       return 'Unknown Node'
     }
 
+    const getNodeTooltip = (node: ExperienceNode): string | undefined => {
+      if (node.type !== 'condition') return undefined
+      const conditionItem = node.conditionId ? conditionsMap.get(node.conditionId) : undefined
+      if (conditionItem?.logic) return formatLogicRule(conditionItem.logic)
+      return undefined
+    }
+
     // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
     const processedNodes = new Map<string, ProcessedNode>()
     nodes.forEach((n) => {
       processedNodes.set(n.id, {
         id: n.id,
         name: getNodeLabel(n),
+        tooltip: getNodeTooltip(n),
         type: n.type,
         children: [],
         _originalNode: n,
@@ -302,20 +318,58 @@
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('transform', (d: any) => `translate(${d.y},${d.x})`)
 
-      nodesSelection
+      const circles = nodesSelection
         .append('circle')
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('r', (d: any) => (d.data.type === 'origin' ? 15 : 10))
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
         .attr('fill', (d: any) => {
           if (d.data._isReference) return '#38bdf8'
-          if (d.data.type === 'origin') return '#00cd90'
+          if (d.data.type === 'origin') return '#6b7280'
           if (d.data.type === 'condition') return '#f59e0b'
-          return '#1748ff'
+          if (d.data.type === 'action') return '#22c55e'
+          return '#3b82f6'
         })
         .attr('stroke', '#fff')
         .attr('stroke-width', 2)
 
+      tooltipEl?.remove()
+      tooltipEl = d3
+        .select(svgEl.parentElement)
+        .append('div')
+
+      const tooltip = tooltipEl
+        .style('position', 'absolute')
+        .style('pointer-events', 'none')
+        .style('background', '#1e293b')
+        .style('color', '#f8fafc')
+        .style('padding', '6px 10px')
+        .style('border-radius', '6px')
+        .style('font-size', '11px')
+        .style('max-width', '260px')
+        .style('white-space', 'pre-wrap')
+        .style('opacity', '0')
+        .style('z-index', '10')
+
+      circles
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
+        .filter((d: any) => d.data.tooltip)
+        .style('cursor', 'default')
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
+        .on('mouseenter', function showTooltip(event: MouseEvent, d: any) {
+          const container = svgEl.parentElement
+          if (!container || !d.data.tooltip) return
+          const rect = container.getBoundingClientRect()
+          tooltip
+            .text(d.data.tooltip)
+            .style('left', `${event.clientX - rect.left + 12}px`)
+            .style('top', `${event.clientY - rect.top - 8}px`)
+            .style('opacity', '1')
+        })
+        .on('mouseleave', function hideTooltip() {
+          tooltip.style('opacity', '0')
+        })
+
       nodesSelection
         .append('text')
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@picked/svelte",
-  "version": "0.0.54-next.3",
+  "version": "0.0.54-next.4",
   "dependencies": {
     "d3": "^7.9.0"
   },
@@ -88,7 +88,7 @@
   },
   "module": "./dist/index.js",
   "peerDependencies": {
-    "@picked/client": "0.0.54-next.3",
+    "@picked/client": "0.0.54-next.4",
     "effector": "^23.3.0",
     "svelte": "^5.46.4"
   },