/** * workflow.jsx — Interactive workflow canvas that builds itself as the user scrolls. * Node & edge rendering matches the Alongtail app pixel-for-pixel. */ const { useState, useRef, useCallback, useEffect, useMemo } = React; /* ─── tokens (exact from tokens.css) ─── */ const T = { bg: '#f0eeeb', dots: '#e0dcd6', ink: '#2c2c2e', inkSecondary: '#8e8e93', inkTertiary: '#aeaeb2', inkQuaternary: '#c7c7cc', borderPrimary: 'rgba(0,0,0,0.06)', borderSecondary: 'rgba(0,0,0,0.03)', surface: '#ffffff', blue: '#587ec2', green: '#5fa97e', purple: '#9678b6', orange: '#d4915a', red: '#c96b68', shadowNode: '0 1px 4px rgba(0,0,0,0.04)', }; /* ─── pools & lanes ─── */ const POOLS = [ { id: 'p1', name: 'Customer', y: 40, h: 130, r: 0.00 }, { id: 'p2', name: 'Sales & CS', y: 190, h: 250, r: 0.04 }, { id: 'p3', name: 'Onboarding Ops', y: 460, h: 250, r: 0.25 }, { id: 'p4', name: 'Platform', y: 730, h: 250, r: 0.55 }, ]; const LANES = [ { id: 'l1', poolId: 'p1', name: 'Buyer', y: 50, h: 110, r: 0.00, color: T.blue }, { id: 'l2', poolId: 'p2', name: 'Account Exec', y: 200, h: 110, r: 0.05, color: T.blue }, { id: 'l3', poolId: 'p2', name: 'Solutions Eng', y: 320, h: 110, r: 0.12, color: T.purple }, { id: 'l4', poolId: 'p3', name: 'Implementation', y: 470, h: 110, r: 0.26, color: T.green }, { id: 'l5', poolId: 'p3', name: 'Data', y: 590, h: 110, r: 0.40, color: T.orange }, { id: 'l6', poolId: 'p4', name: 'Infra', y: 740, h: 110, r: 0.58, color: T.purple }, { id: 'l7', poolId: 'p4', name: 'Integrations', y: 860, h: 110, r: 0.70, color: T.green }, ]; /* ─── nodes ─── */ const POOL_X = 40; const POOL_W = 1500; const LANE_X = 80; const LANE_W = 1460; const INITIAL_NODES = [ // Buyer lane — center 105: event y=91, task y=78 { id: 'n1', type: 'event-start', x: 100, y: 91, label: 'Contract signed', r: 0.02, detail: { 'Trigger': 'DocuSign webhook', 'Frequency': '~12 / month' } }, { id: 'n2', type: 'task', x: 210, y: 78, w: 140, label: 'Kickoff with buyer', desc: 'Intro call, align on timeline and deliverables', subtype: 'manual', r: 0.06, detail: { 'Duration': '45 min', 'Owner': 'Account Exec' } }, // Account Exec lane — center 255: task y=228, data y=238, gateway y=239 { id: 'n3', type: 'task', x: 420, y: 228, w: 140, label: 'Scope & requirements', desc: 'Gather needs via Notion intake form', subtype: 'assisted', r: 0.08, detail: { 'Duration': '3 days', 'Wait time': '1 day', 'System': 'Notion + Jira' } }, { id: 'n4', type: 'data', x: 650, y: 238, label: 'SOW draft', r: 0.12, state: 'draft', detail: { 'State': 'draft', 'Owner': 'Account Exec' } }, // Solutions Eng lane — center 375: task y=348, gateway y=359 { id: 'n5', type: 'task', x: 420, y: 348, w: 140, label: 'Technical discovery', desc: 'API audit, data model review', subtype: 'manual', r: 0.14, detail: { 'Duration': '2 days', 'Owner': 'Solutions Eng' } }, { id: 'n6', type: 'gateway', x: 660, y: 359, label: 'SSO required?', r: 0.18, detail: { 'Type': 'Decision', 'Criteria': 'Contract > $50k OR security addendum', 'Yes': '68%', 'No': '32%' } }, { id: 'n7', type: 'subprocess', x: 790, y: 348, w: 145, label: 'Provision tenant', desc: '6 steps, 2 gateways', r: 0.28, detail: { 'Contains': '6 steps, 2 gateways', 'Duration': '~4 hours' } }, // Implementation lane — center 525: task y=498, event y=511 { id: 'n8', type: 'task', x: 260, y: 498, w: 140, label: 'Draft onboarding plan', desc: 'Milestones, owners, timeline', subtype: 'manual', r: 0.30, detail: { 'Duration': '1 day', 'Owner': 'Implementation' } }, { id: 'n9', type: 'event-timer', x: 490, y: 511, label: '5 business days', r: 0.34, detail: { 'Design wait': '5 days', 'Actual wait': '6.3 days avg' } }, { id: 'n10', type: 'task', x: 580, y: 498, w: 140, label: 'Configure workspace', desc: 'Roles, permissions, branding', subtype: 'assisted', r: 0.36, detail: { 'Duration': '6 h', 'System': 'Internal admin', 'Error rate': '4%' } }, // Data lane — center 645: task y=618, data y=628, gateway y=629 { id: 'n11', type: 'task', x: 260, y: 618, w: 140, label: 'Import seed records', desc: 'ETL from CSV or API source', subtype: 'automated', r: 0.42, detail: { 'Duration': '12 min', 'System': 'ETL pipeline', 'Error rate': '1.2%' } }, { id: 'n12', type: 'data', x: 490, y: 628, label: 'Schema map', r: 0.46, state: 'generated', detail: { 'State': 'generated' } }, { id: 'n13', type: 'gateway', x: 630, y: 629, label: 'PII in dataset?', r: 0.50, detail: { 'Type': 'Judgment', 'Yes': '41%', 'No': '59%' } }, { id: 'n14', type: 'task', x: 740, y: 618, w: 135, label: 'Redact & review', desc: 'Mask PII, validate output', subtype: 'assisted', r: 0.52, detail: { 'Duration': '2 h', 'Owner': 'Data' } }, // Infra lane — center 795: task y=768, event y=781 { id: 'n15', type: 'task', x: 260, y: 768, w: 140, label: 'Spin up cluster', desc: 'K8s namespace + resource quotas', subtype: 'automated', r: 0.60, detail: { 'Duration': '8 min', 'System': 'Kubernetes' } }, { id: 'n16', type: 'event-interruption', x: 490, y: 781, label: 'Quota exceeded', r: 0.64, detail: { 'Breaks flow': 'yes', 'Frequency': '2% of onboardings' } }, { id: 'n17', type: 'task', x: 580, y: 768, w: 140, label: 'Escalate to capacity', desc: 'Page infra lead, request bump', subtype: 'manual', r: 0.66, detail: { 'Duration': '30 min', 'Owner': 'Infra lead' } }, // Integrations lane — center 915: task y=888, data y=898 { id: 'n18', type: 'task', x: 260, y: 888, w: 145, label: 'Wire CRM + SSO', desc: 'Okta SAML config, HubSpot sync', subtype: 'assisted', r: 0.72, detail: { 'Duration': '4 h', 'System': 'Okta + HubSpot' } }, { id: 'n19', type: 'data', x: 500, y: 898, label: 'Webhook spec', r: 0.76, state: 'signed', detail: { 'State': 'signed' } }, { id: 'n20', type: 'task', x: 650, y: 888, w: 140, label: 'Run smoke tests', desc: 'End-to-end validation suite', subtype: 'automated', r: 0.80, detail: { 'Duration': '2 min', 'Error rate': '0.5%' } }, // Gateway in Implementation lane — center 525: gateway y=509 { id: 'n21', type: 'gateway', x: 1060, y: 509, label: 'All checks pass?', r: 0.85, detail: { 'Type': 'Decision', 'Yes': '94%', 'No': '6%' } }, // Handoff in Solutions Eng lane — center 375: task y=348 { id: 'n22', type: 'task', x: 1140, y: 348, w: 140, label: 'Handoff to CSM', desc: 'Transfer context, schedule check-in', subtype: 'manual', r: 0.90, detail: { 'Duration': '1 h', 'Owner': 'CSM' } }, // End in Solutions Eng lane — center 375: event y=361 { id: 'n23', type: 'event-end', x: 1370, y: 361, label: 'Customer live', r: 0.95, detail: { 'Outcome': 'Customer live in production' } }, ]; const EDGES = [ { from: 'n1', to: 'n2' }, { from: 'n2', to: 'n3' }, { from: 'n3', to: 'n4' }, { from: 'n3', to: 'n5' }, { from: 'n5', to: 'n6' }, { from: 'n6', to: 'n7', label: 'Yes' }, { from: 'n4', to: 'n8' }, { from: 'n7', to: 'n10' }, { from: 'n8', to: 'n9' }, { from: 'n9', to: 'n10' }, { from: 'n8', to: 'n11' }, { from: 'n11', to: 'n12' }, { from: 'n12', to: 'n13' }, { from: 'n13', to: 'n14', label: 'Yes' }, { from: 'n10', to: 'n15' }, { from: 'n15', to: 'n16' }, { from: 'n16', to: 'n17' }, { from: 'n15', to: 'n18' }, { from: 'n18', to: 'n19' }, { from: 'n19', to: 'n20' }, { from: 'n10', to: 'n21' }, { from: 'n14', to: 'n21' }, { from: 'n17', to: 'n21' }, { from: 'n20', to: 'n21' }, { from: 'n21', to: 'n22', label: 'Pass' }, { from: 'n22', to: 'n23' }, ]; /* ─── geometry helpers ─── */ // Exact node dimensions from the app const TASK_H = 54; // header (20) + body with desc (34) const EVENT_R = 14; // 28px diameter const GATEWAY_SIZE = 32; const DATA_ICON_W = 28; const DATA_ICON_H = 34; function nodeW(n) { if (n.type === 'gateway') return GATEWAY_SIZE; if (n.type.startsWith('event')) return EVENT_R * 2; if (n.type === 'data') return DATA_ICON_W; return n.w || 140; } function nodeH(n) { if (n.type === 'gateway') return GATEWAY_SIZE; if (n.type.startsWith('event')) return EVENT_R * 2; if (n.type === 'data') return DATA_ICON_H; return n.desc ? TASK_H : 42; } function nodePort(n, side) { const w = nodeW(n), h = nodeH(n); const cx = n.x + w / 2, cy = n.y + h / 2; if (side === 'right') return { x: n.x + w, y: cy }; if (side === 'left') return { x: n.x, y: cy }; if (side === 'top') return { x: cx, y: n.y }; return { x: cx, y: n.y + h }; } function edgePath(from, to) { const s = nodePort(from, 'right'); const e = nodePort(to, 'left'); const dy = Math.abs(e.y - s.y); const dx = e.x - s.x; // Backward edge (loop): route above via top ports with smooth curves if (dx < -20) { const st = nodePort(from, 'top'); const et = nodePort(to, 'top'); const loopY = Math.min(st.y, et.y) - 35; return `M${st.x},${st.y} C${st.x},${loopY} ${et.x},${loopY} ${et.x},${et.y}`; } // If target is mostly below/above and not far right, route vertically if (dy > 80 && dx < 60) { const sb = e.y > s.y ? nodePort(from, 'bottom') : nodePort(from, 'top'); const et = e.y > s.y ? nodePort(to, 'top') : nodePort(to, 'bottom'); const my = (sb.y + et.y) / 2; return `M${sb.x},${sb.y} C${sb.x},${my} ${et.x},${my} ${et.x},${et.y}`; } const cx = Math.max(Math.abs(dx) * 0.35, 40); return `M${s.x},${s.y} C${s.x + cx},${s.y} ${e.x - cx},${e.y} ${e.x},${e.y}`; } function edgeLabelPos(from, to) { const s = nodePort(from, 'right'); const e = nodePort(to, 'left'); const dy = Math.abs(e.y - s.y); const dx = e.x - s.x; // Backward edge label: centered above if (dx < -20) { const st = nodePort(from, 'top'); const et = nodePort(to, 'top'); const loopY = Math.min(st.y, et.y) - 35; return { x: (st.x + et.x) / 2, y: loopY }; } if (dy > 80 && dx < 60) { const sb = e.y > s.y ? nodePort(from, 'bottom') : nodePort(from, 'top'); const et = e.y > s.y ? nodePort(to, 'top') : nodePort(to, 'bottom'); return { x: (sb.x + et.x) / 2, y: (sb.y + et.y) / 2 }; } return { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 }; } /* ─── step type icons (12x12 SVGs matching StepNode.tsx) ─── */ function StepIcon({ subtype, x, y }) { const color = T.green; // all step type icons use green in the header if (subtype === 'manual') { // Hand icon (matches StepNode.tsx ManualIcon — Lucide hand) return ( ); } if (subtype === 'assisted') { // Monitor/computer icon (matches StepNode.tsx AssistedIcon) return ( ); } if (subtype === 'automated') { // Robot icon (matches StepNode.tsx AutomatedIcon) return ( ); } return null; } /* ─── type label text ─── */ function typeLabel(subtype) { if (subtype === 'manual') return 'MANUAL'; if (subtype === 'assisted') return 'ASSISTED'; if (subtype === 'automated') return 'AUTOMATED'; return 'TASK'; } /* ─── reveal easing ─── */ function revealAlpha(progress, nodeR) { const fadeDur = 0.05; const start = Math.max(0, nodeR - 0.01); if (progress < start) return 0; if (progress >= start + fadeDur) return 1; const t = (progress - start) / fadeDur; return t * t * (3 - 2 * t); } /* ─── Tooltip (portaled to body so CSS transforms don't break fixed positioning) ─── */ function Tooltip({ node, pos }) { if (!node) return null; const detail = node.detail || {}; const entries = Object.entries(detail); const tipW = 240; const tipMargin = 6; const vw = window.innerWidth; const vh = window.innerHeight; const nr = pos.nodeRight || 0, nl = pos.nodeLeft || 0, nt = pos.nodeTop || 0, nb = pos.nodeBottom || 0; // Place to the right of the node; flip left if it would overflow const flipX = nr + tipMargin + tipW > vw - 16; let left = flipX ? Math.max(8, nl - tipMargin - tipW) : nr + tipMargin; left = Math.max(8, Math.min(left, vw - tipW - 8)); // Align top of tooltip with top of node; clamp to viewport const top = Math.max(8, Math.min(nt, vh - 160)); return ReactDOM.createPortal(
{node.label}
{node.subtype && (
{typeLabel(node.subtype)}
)} {entries.length > 0 && (
{entries.map(([k, v]) => (
{k} {v}
))}
)}
, document.body ); } /* ─── SVG filter for node shadow ─── */ const NODE_SHADOW_FILTER = ` `; /* ─── main canvas ─── */ window.WorkflowCanvas = function WorkflowCanvas({ progress, hideNodeLabels, customPools, customLanes, customNodes, customEdges, customViewBox }) { const activePools = customPools || POOLS; const activeLanes = customLanes || LANES; const activeEdges = customEdges || EDGES; const [nodes, setNodes] = useState(customNodes || INITIAL_NODES); const [selected, setSelected] = useState(null); const [hovered, setHovered] = useState(null); const [hoverPos, setHoverPos] = useState({ x: 0, y: 0 }); const dragRef = useRef(null); const svgRef = useRef(null); const [vp, setVp] = useState({ w: window.innerWidth, h: window.innerHeight }); useEffect(() => { const fn = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener('resize', fn); return () => window.removeEventListener('resize', fn); }, []); // Camera: zoomed in so fewer elements are visible at once, pans down as you scroll const viewBox = useMemo(() => { if (customViewBox) return customViewBox; const aspect = vp.w / vp.h; const vbH = 650; const vbW = vbH * aspect; const maxPanY = 1000 - vbH + 200; const panY = -80 + progress * Math.max(maxPanY, 0); const panX = (1600 - vbW) / 2 - 40; return `${panX} ${panY} ${vbW} ${vbH}`; }, [vp, progress, customViewBox]); const nodeMap = useMemo(() => { const m = {}; nodes.forEach(n => m[n.id] = n); return m; }, [nodes]); // ── Drag ── const onPointerDown = useCallback((e, id) => { e.stopPropagation(); const svg = svgRef.current; const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; const svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); const node = nodes.find(n => n.id === id); if (!node) return; dragRef.current = { id, ox: svgP.x - node.x, oy: svgP.y - node.y }; setSelected(id); }, [nodes]); const onPointerMove = useCallback((e) => { if (!dragRef.current) return; const svg = svgRef.current; const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; const svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); const { id, ox, oy } = dragRef.current; setNodes(prev => prev.map(n => n.id === id ? { ...n, x: svgP.x - ox, y: svgP.y - oy } : n)); }, []); const onPointerUp = useCallback(() => { dragRef.current = null; }, []); const onHover = useCallback((e, node) => { setHovered(node); // Compute the node's screen-space bounding box so the tooltip can avoid overlapping it const svg = svgRef.current; if (svg) { const ctm = svg.getScreenCTM(); const w = nodeW(node), h = nodeH(node); const pt1 = svg.createSVGPoint(); pt1.x = node.x; pt1.y = node.y; const s1 = pt1.matrixTransform(ctm); const pt2 = svg.createSVGPoint(); pt2.x = node.x + w; pt2.y = node.y + h; const s2 = pt2.matrixTransform(ctm); setHoverPos({ nodeLeft: s1.x, nodeTop: s1.y, nodeRight: s2.x, nodeBottom: s2.y }); } else { setHoverPos({ nodeLeft: e.clientX, nodeTop: e.clientY, nodeRight: e.clientX, nodeBottom: e.clientY }); } }, []); const onHoverEnd = useCallback(() => setHovered(null), []); // Clear hover on scroll, keydown, or click so tooltips don't stick useEffect(() => { const clearHover = () => setHovered(null); window.addEventListener('scroll', clearHover, { passive: true }); window.addEventListener('keydown', clearHover, { passive: true }); window.addEventListener('click', clearHover, { passive: true }); return () => { window.removeEventListener('scroll', clearHover); window.removeEventListener('keydown', clearHover); window.removeEventListener('click', clearHover); }; }, []); // Clear hover when the canvas becomes hidden (slide change) useEffect(() => { const svg = svgRef.current; if (!svg) return; const observer = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting) setHovered(null); }, { threshold: 0 }); observer.observe(svg); return () => observer.disconnect(); }, []); // ── Pools — exact match: 2px solid rgba(0,0,0,0.1), radius-lg (12px), // left label strip 32px wide with rgba(0,0,0,0.025) bg, // vertical text: 12px/700/uppercase/0.5px spacing, color --text-secondary // border-right on strip: 1px solid rgba(0,0,0,0.06) ── const renderPools = useMemo(() => { return activePools.map(pool => { const a = revealAlpha(progress, pool.r); if (a <= 0) return null; const labelStripW = 32; return ( {/* Pool outer border */} {/* Label strip background — clipped to left side with matching radius */} {/* Label strip right border */} {/* Vertical label — writing-mode: vertical-rl + rotate(180deg) = reading bottom-to-top */} {pool.name.toUpperCase()} ); }); }, [progress]); // ── Lanes — exact match from LaneNode.tsx + nodes.css: // border: 1px dashed rgba(0,0,0,0.08), radius-sm (6px), // bg: pastel color at 0.06 alpha (from LANE_PASTEL_COLORS), // border-color: pastel at 0.18 alpha (from LANE_BORDER_COLORS), // label pill: absolute top-left (10px, 8px), 11px/600/uppercase/0.3px, // color --text-tertiary (#aeaeb2), bg white, border 1px rgba(0,0,0,0.04), radius-sm ── const LANE_BG_COLORS = [ 'rgba(88,126,194,0.06)', // blue 'rgba(95,169,126,0.06)', // green 'rgba(150,120,182,0.06)', // purple 'rgba(212,145,90,0.06)', // orange 'rgba(201,107,104,0.06)', // red ]; const LANE_BORDER_COLORS = [ 'rgba(88,126,194,0.18)', 'rgba(95,169,126,0.18)', 'rgba(150,120,182,0.18)', 'rgba(212,145,90,0.18)', 'rgba(201,107,104,0.18)', ]; // Map lane colors to palette index const laneColorIdx = (color) => { if (color === T.blue) return 0; if (color === T.green) return 1; if (color === T.purple) return 2; if (color === T.orange) return 3; if (color === T.red) return 4; return 0; }; const renderLanes = useMemo(() => { return activeLanes.map(lane => { const a = revealAlpha(progress, lane.r); if (a <= 0) return null; const ci = laneColorIdx(lane.color); const bg = LANE_BG_COLORS[ci]; const bc = LANE_BORDER_COLORS[ci]; const pillW = lane.name.length * 7.2 + 20; return ( {/* Lane background — pastel fill + dashed border */} {/* Label pill — white bg, subtle border, top-left corner */} {lane.name.toUpperCase()} ); }); }, [progress]); // ── Edges — stroke rgba(0,0,0,0.1) / 1px, selected: blue 1.5px ── const renderEdges = useMemo(() => { return activeEdges.map((edge, i) => { const from = nodeMap[edge.from]; const to = nodeMap[edge.to]; if (!from || !to) return null; const edgeR = Math.max(from.r || 0, to.r || 0); const a = revealAlpha(progress, edgeR); if (a <= 0) return null; const d = edgePath(from, to); const isHL = selected === edge.from || selected === edge.to; const lp = edgeLabelPos(from, to); return ( {edge.label && !hideNodeLabels && ( {edge.label} )} ); }); }, [nodeMap, selected, progress]); // ── Render a single node ── const renderNode = useCallback((node) => { const a = revealAlpha(progress, node.r); if (a <= 0) return null; const isSel = selected === node.id; const isHov = hovered && hovered.id === node.id; const evts = { style: { cursor: 'grab' }, onPointerDown: (e) => onPointerDown(e, node.id), onPointerEnter: (e) => onHover(e, node), onPointerLeave: onHoverEnd, }; /* ── Event: Start ── */ if (node.type === 'event-start') { const cx = node.x + EVENT_R, cy = node.y + EVENT_R; return ( {!hideNodeLabels && {node.label} } ); } /* ── Event: End ── */ if (node.type === 'event-end') { const cx = node.x + EVENT_R, cy = node.y + EVENT_R; return ( {!hideNodeLabels && {node.label} } ); } /* ── Event: Timer ── */ if (node.type === 'event-timer') { const cx = node.x + EVENT_R, cy = node.y + EVENT_R; return ( {!hideNodeLabels && {node.label} } ); } /* ── Event: Interruption ── */ if (node.type === 'event-interruption') { const cx = node.x + EVENT_R, cy = node.y + EVENT_R; return ( {!hideNodeLabels && {node.label} } ); } /* ── Gateway — diamond ── */ if (node.type === 'gateway') { const cx = node.x + GATEWAY_SIZE / 2; const cy = node.y + GATEWAY_SIZE / 2; const half = GATEWAY_SIZE / 2; const pts = `${cx},${cy - half} ${cx + half},${cy} ${cx},${cy + half} ${cx - half},${cy}`; return ( {'\u00D7'} {!hideNodeLabels && {node.label} } {!hideNodeLabels && isHov && EXCLUSIVE } ); } /* ── Data — document shape with folded corner ── */ if (node.type === 'data') { const dx = node.x, dy = node.y; const w = DATA_ICON_W, h = DATA_ICON_H; const fold = 6; const path = `M${dx + 1},${dy + 1} L${dx + w - fold},${dy + 1} L${dx + w},${dy + 1 + fold} L${dx + w},${dy + h} L${dx + 1},${dy + h} Z`; const foldPath = `M${dx + w - fold},${dy + 1} L${dx + w - fold},${dy + 1 + fold} L${dx + w},${dy + 1 + fold}`; const cx = dx + w / 2; return ( {!hideNodeLabels && {node.label} } {!hideNodeLabels && isHov && node.state && ( [{node.state}] )} ); } /* ── Subprocess — rounded rect, 2px gray border ── */ if (node.type === 'subprocess') { const tw = node.w || 140; const th = node.desc ? TASK_H : 42; return ( {!hideNodeLabels && isHov && SUB-PROCESS } {!hideNodeLabels && {node.label} } {!hideNodeLabels && isHov && node.desc && ( {node.desc} )} ); } /* ── Task node — rounded rect with header/body split + description ── */ const tw = node.w || 140; const th = node.desc ? TASK_H : 42; return ( {/* Card background */} {/* Header separator */} {/* Header — icon + type label */} {!hideNodeLabels && } {!hideNodeLabels && {typeLabel(node.subtype)} } {/* Body — title */} {!hideNodeLabels && {node.label.length > Math.floor(tw / 5.8) ? node.label.slice(0, Math.floor(tw / 5.8) - 1) + '\u2026' : node.label} } {/* Description preview (shown on hover) */} {!hideNodeLabels && isHov && node.desc && ( {node.desc.length > Math.floor(tw / 4.5) ? node.desc.slice(0, Math.floor(tw / 4.5) - 1) + '\u2026' : node.desc} )} {/* Selected ring */} {isSel && ( )} ); }, [selected, hovered, progress, hideNodeLabels, onPointerDown, onHover, onHoverEnd]); return ( { onPointerUp(); setHovered(null); }} onClick={(e) => { if (e.target === svgRef.current || (e.target.tagName === 'rect' && e.target.getAttribute('fill') === 'url(#dots)')) setSelected(null); }}> {/* Edge arrow — rgba(0,0,0,0.1) */} {/* Selected edge arrow — blue */} {/* Node shadows */} {renderPools} {renderLanes} {renderEdges} {nodes.filter(n => !hovered || n.id !== hovered.id).map(renderNode)} {hovered && renderNode(nodes.find(n => n.id === hovered.id))} {!hideNodeLabels && } ); };