@picked/svelte 0.0.47-next.1 → 0.0.47-next.3

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

@@ -35,10 +35,62 @@
     _referenceTo?: string
   }
 
+  function isRecord(val: unknown): val is Record<string, unknown> {
+    return val !== null && typeof val === 'object' && !Array.isArray(val)
+  }
+
+  function formatLogicRule(rule: unknown): string {
+    if (rule === null || rule === undefined) return '?'
+    if (typeof rule === 'string') return rule
+    if (typeof rule === 'number' || typeof rule === 'boolean') return String(rule)
+    if (Array.isArray(rule)) {
+      return rule.map(formatLogicRule).join(', ')
+    }
+    if (isRecord(rule)) {
+      const keys = Object.keys(rule)
+      if (keys.length === 0) return 'Condition'
+      const op = keys[0]
+      const args = rule[op]
+
+      if (op === 'var') {
+        return String(Array.isArray(args) ? args[0] : args)
+      }
+
+      const compOps: Record<string, string> = {
+        '==': '=',
+        '===': '=',
+        '!=': '≠',
+        '!==': '≠',
+        '>': '>',
+        '<': '<',
+        '>=': '≥',
+        '<=': '≤',
+      }
+      if (op in compOps && Array.isArray(args) && args.length >= 2) {
+        return `${formatLogicRule(args[0])} ${compOps[op]} ${formatLogicRule(args[1])}`
+      }
+      if (op === 'and' && Array.isArray(args)) {
+        return args.map(formatLogicRule).join(' & ')
+      }
+      if (op === 'or' && Array.isArray(args)) {
+        return args.map(formatLogicRule).join(' | ')
+      }
+      if ((op === '!' || op === 'not') && Array.isArray(args)) {
+        return `!${formatLogicRule(args[0])}`
+      }
+      if (op === 'in' && Array.isArray(args) && args.length >= 2) {
+        return `${formatLogicRule(args[0])} in ${formatLogicRule(args[1])}`
+      }
+      return `${op}(?)`
+    }
+    return '?'
+  }
+
   function renderGraph() {
     d3.select(svgEl).selectAll('*').remove()
 
     const stepsMap = new Map(steps.map((s) => [s.id, s]))
+    const conditionalsMap = new Map(conditionals.map((c) => [c.id, c]))
     const outgoingEdges = new Map<string, ExperienceEdge[]>()
     edges.forEach((e) => {
       if (!outgoingEdges.has(e.sourceNodeId)) outgoingEdges.set(e.sourceNodeId, [])
@@ -49,7 +101,12 @@
       if (node.type === 'origin') return 'Start'
       if (node.type === 'step' && node.stepId)
         return stepsMap.get(node.stepId)?.label ?? 'Unknown Step'
-      if (node.type === 'conditional' && node.conditionalId) return `Condition`
+      if (node.type === 'conditional' && node.conditionalId) {
+        const conditional = conditionalsMap.get(node.conditionalId)
+        if (conditional?.label) return conditional.label
+        if (conditional?.condition) return formatLogicRule(conditional.condition)
+        return 'Condition'
+      }
       return 'Unknown Node'
     }
 
@@ -81,15 +138,16 @@
     }
 
     if (rootNode) {
-      const convertGraphToTree = (
-        node: ProcessedNode,
-        visited = new Set<string>(),
-      ): ProcessedNode => {
-        if (visited.has(node.id)) {
+      // Use a global visited set so join nodes (multiple incoming branches converging
+      // to the same node) only appear once in the tree, with reference nodes on
+      // subsequent visits to indicate the convergence point.
+      const globalVisited = new Set<string>()
+      const convertGraphToTree = (node: ProcessedNode): ProcessedNode => {
+        if (globalVisited.has(node.id)) {
           return {
             ...node,
             id: `${node.id}_ref`,
-            name: `${node.name} (ref)`,
+            name: `↩ ${node.name}`,
             type: `${node.type}_ref`,
             children: [],
             _isReference: true,
@@ -97,9 +155,8 @@
           }
         }
 
-        const newVisited = new Set(visited)
-        newVisited.add(node.id)
-        return { ...node, children: node.children.map((c) => convertGraphToTree(c, newVisited)) }
+        globalVisited.add(node.id)
+        return { ...node, children: node.children.map((c) => convertGraphToTree(c)) }
       }
 
       const treeData = convertGraphToTree(rootNode)
@@ -128,31 +185,75 @@
 
       const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
 
+      const linkGenerator = d3
+        .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, ProcessedNode>()
+        .x((d) => d.y)
+        .y((d) => d.x)
+
       g.selectAll('.link')
         .data(treeRoot.links())
         .enter()
         .append('path')
         .attr('class', 'link')
         .attr('fill', 'none')
-        .attr('stroke', '#94a3b8')
+        .attr('stroke', (d: any) => {
+          if (d.source.data.type !== 'conditional') return '#94a3b8'
+          const targetId = d.target.data._isReference
+            ? d.target.data._referenceTo
+            : d.target.data.id
+          const edge = d.source.data._originalEdges.find(
+            (e: ExperienceEdge) => e.destinationNodeId === targetId,
+          )
+          if (edge?.sourceNodeHandle === 'true') return '#10b981'
+          if (edge?.sourceNodeHandle === 'false') return '#ef4444'
+          return '#94a3b8'
+        })
         .attr('stroke-width', 2)
-        .attr(
-          'd',
-          d3
-            .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, ProcessedNode>()
-            .x((d) => d.y)
-            .y((d) => d.x),
-        )
+        .attr('d', linkGenerator)
+
+      // Label true/false branches from conditional nodes
+      g.selectAll('.edge-label')
+        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'conditional'))
+        .enter()
+        .append('text')
+        .attr('class', 'edge-label')
+        .attr('text-anchor', 'middle')
+        .attr('font-size', '10px')
+        .attr('font-weight', 'bold')
+        .attr('x', (d: any) => (d.source.y + d.target.y) / 2)
+        .attr('y', (d: any) => (d.source.x + d.target.x) / 2 - 6)
+        .attr('fill', (d: any) => {
+          const targetId = d.target.data._isReference
+            ? d.target.data._referenceTo
+            : d.target.data.id
+          const edge = d.source.data._originalEdges.find(
+            (e: ExperienceEdge) => e.destinationNodeId === targetId,
+          )
+          if (edge?.sourceNodeHandle === 'true') return '#10b981'
+          if (edge?.sourceNodeHandle === 'false') return '#ef4444'
+          return '#64748b'
+        })
+        .text((d: any) => {
+          const targetId = d.target.data._isReference
+            ? d.target.data._referenceTo
+            : d.target.data.id
+          const edge = d.source.data._originalEdges.find(
+            (e: ExperienceEdge) => e.destinationNodeId === targetId,
+          )
+          if (edge?.sourceNodeHandle === 'true') return 'Yes'
+          if (edge?.sourceNodeHandle === 'false') return 'No'
+          return ''
+        })
 
-      const nodes = g
+      const nodesSelection = g
         .selectAll('.node')
         .data(treeRoot.descendants())
         .enter()
         .append('g')
         .attr('class', 'node')
-        .attr('transform', (d: any) => `translate(${d.y},${d.x})`) // d3.HierarchyPointNode uses x, y
+        .attr('transform', (d: any) => `translate(${d.y},${d.x})`)
 
-      nodes
+      nodesSelection
         .append('circle')
         .attr('r', (d: any) => (d.data.type === 'origin' ? 15 : 10))
         .attr('fill', (d: any) => {
@@ -164,14 +265,14 @@
         .attr('stroke', '#fff')
         .attr('stroke-width', 2)
 
-      nodes
+      nodesSelection
         .append('text')
         .attr('dy', (d: any) => (d.children ? -15 : 25))
         .attr('text-anchor', 'middle')
         .attr('font-size', '12px')
         .attr('fill', '#1e293b')
         .text((d: any) =>
-          d.data.name.length > 25 ? `${d.data.name.slice(0, 22)}...` : d.data.name,
+          d.data.name.length > 30 ? `${d.data.name.slice(0, 27)}...` : d.data.name,
         )
 
       svg.on('dblclick.zoom', null) // Remove default double click zoom

package/package.json

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