// Fabric — Graph tab. Split out of fabric.jsx. Loads after fabric.jsx & graph_layout.jsx. const { useState: useFg, useEffect: useFgE, useRef: useFgR, useMemo: useFgM } = React; // --------- GRAPH TAB — snapshot-driven, two-view hierarchical layout --------- const GRAPH_COLORS = { table: '#0F766E', doc: '#2563EB', concept: '#5B4FFF', bridge: '#7C3AED', }; // Used by CatalogTab for the domain chip color. Keys match the return values // of `deriveNodeDomain`. const DOMAIN_COLORS = { db: GRAPH_COLORS.table, doc: GRAPH_COLORS.doc, bridge: GRAPH_COLORS.bridge, orphan: '#6B7280', }; const EDGE_COLORS = { structure: '#64748B', mapping: '#7C3AED', dependency: '#F59E0B', relation: '#10B981', category: '#EC4899', }; function GraphTab({ snapshot, loading, error, reload, openEntity, reveal, onRevealConsumed }) { const [view, setView] = useFg('db'); const [edgeFilt, setEdgeFilt] = useFg({ structure: true, mapping: true, dependency: true, relation: true, category: true }); const [confMin, setConfMin] = useFg(0); const [selected, setSelected] = useFg(null); const [layoutVersion, setLayoutVersion] = useFg(0); const pendingFocusRef = useFgR(null); const [focusTarget, setFocusTarget] = useFg(null); // Learned-concept reveal sequence state. const [revealPhase, setRevealPhase] = useFg(null); // null|'intro'|'reloading'|'morph'|'highlight' const [pulseId, setPulseId] = useFg(null); const [morphNonce, setMorphNonce] = useFg(0); const revealTokenRef = useFgR(null); const revealTimersRef = useFgR([]); const revealNameRef = useFgR(null); const revealTriedOtherViewRef = useFgR(false); // Only the active view's layout is computed — FR is O(N^2), no need to pay // for the inactive view. Determinism is preserved by `seedSalt` (same input // → same layout), so switching back and forth is visually stable. const layout = useFgM( () => snapshot ? buildViewLayout(snapshot, view, { seedSalt: String(layoutVersion) }) : null, [snapshot, view, layoutVersion] ); const visibleEdges = useFgM(() => { if (!layout) return []; return layout.edges.filter(e => edgeFilt[e.type] !== false && (e.confidence == null || e.confidence >= confMin) ); }, [layout, edgeFilt, confMin]); // Ordinary tab switch clears selection + focus useFgE(() => { setSelected(null); setFocusTarget(null); }, [view]); // After a view-switch (including bridge jump), apply any pending focus. // Guard with layout.view === view so a snapshot refresh mid-transition // doesn't consume the ref against a stale layout. useFgE(() => { if (!pendingFocusRef.current) return; if (!layout || layout.view !== view) return; const id = pendingFocusRef.current; pendingFocusRef.current = null; const n = layout.nodeIndex.get(id); if (n) { setSelected(n); setFocusTarget(n); } }, [view, layout]); // Learned-concept reveal sequence: intro card → reloading overlay → graph // morph (re-layout + entrance animation) → pan-to + pulse highlight. Runs // once per reveal request (keyed on token). useFgE(() => { if (!reveal || !reveal.ids || !reveal.ids.length) return; if (revealTokenRef.current === reveal.token) return; revealTokenRef.current = reveal.token; const targetId = reveal.ids[0]; revealNameRef.current = reveal.name || targetId; revealTimersRef.current.forEach(clearTimeout); revealTimersRef.current = []; const at = (ms, fn) => revealTimersRef.current.push(setTimeout(fn, ms)); revealTriedOtherViewRef.current = false; // view targeting happens at highlight setSelected(null); setPulseId(null); setRevealPhase('intro'); at(1500, () => setRevealPhase('reloading')); at(2100, () => { setRevealPhase('morph'); setLayoutVersion(v => v + 1); setMorphNonce(n => n + 1); }); at(2900, () => { setRevealPhase('highlight'); setPulseId(targetId); }); at(5200, () => { setRevealPhase(null); // Keep pulseId: the learned node stays specially animated until the next // reveal (which clears it at sequence start) replaces it. if (typeof onRevealConsumed === 'function') onRevealConsumed(); }); }, [reveal && reveal.token]); // Pan to the learned concept once the highlight phase begins (does NOT select // it — no detail panel / dimming; the node just gets the persistent pulse). // Waits for layout (handles snapshot still loading). If the concept isn't in // the active view, switch to the other view ONCE and let this effect re-run // against the recomputed layout; if it's in neither view, it degrades // gracefully (no pan/pulse, overlay just fades). useFgE(() => { if (revealPhase !== 'highlight' || !pulseId || !layout) return; const n = layout.nodeIndex.get(pulseId); if (n) { setFocusTarget(n); return; } if (!revealTriedOtherViewRef.current) { revealTriedOtherViewRef.current = true; setView(v => (v === 'db' ? 'docs' : 'db')); } }, [revealPhase, pulseId, layout, view]); // Clear pending reveal timers on unmount. useFgE(() => () => { revealTimersRef.current.forEach(clearTimeout); }, []); const handleTabClick = (v) => { if (v === view) return; pendingFocusRef.current = null; setView(v); }; const handleBridgeJump = (conceptId) => { pendingFocusRef.current = conceptId; setView(view === 'db' ? 'docs' : 'db'); }; if (loading && !snapshot) return ; if (error) return ; if (!snapshot || !layout) return null; const totalNodes = (snapshot.factual_nodes || []).length + (snapshot.concept_nodes || []).length; return (
Knowledge graph
{totalNodes.toLocaleString()} nodes · {visibleEdges.length.toLocaleString()} edges
setFocusTarget(null)} pulseId={pulseId} morphNonce={morphNonce} /> {revealPhase && }
{selected && ( )}
); } function GraphFilters({ edgeFilt, setEdgeFilt, confMin, setConfMin }) { return ( ); } function LegendBlob({ kind, label }) { let swatch = null; if (kind === 'table') { swatch = ( ); } else if (kind === 'column') { swatch = ; } else if (kind === 'doc') { swatch = ( ); } else if (kind === 'chunk') { swatch = ; } else if (kind === 'concept') { swatch = ; } else if (kind === 'chip') { swatch = ( val ); } else if (kind === 'bridge') { swatch = ( ); } return (
{swatch} {label}
); } function FilterCheckbox({ checked, label, swatch, onChange }) { return ( ); } // Overlay shown over the graph canvas during the learned-concept reveal: a // pop-in card naming the concept ("intro"), then a translucent "rebuilding" // backdrop with a spinner. The morph + highlight phases render nothing here — // the canvas itself animates. function GraphRevealOverlay({ phase, name }) { if (phase !== 'intro' && phase !== 'reloading') return null; const reloading = phase === 'reloading'; return (
{reloading &&
}
{reloading ? : }
{reloading ? 'Rebuilding knowledge graph' : 'Just learned'}
{name}
); } function NodeDetail({ node, nodeIndex, viewNodeIndex, outEdges, inEdges, bridges, view, onClose, onSelect, onBridgeJump, openEntity }) { const isBridge = node.category === 'concept' && bridges && bridges.has(node.id); const isConcept = node.category === 'concept'; const isTable = node.category === 'factual' && node.type === 'table'; const canEdit = isConcept || isTable; const [editing, setEditing] = useFg(false); const [pending, setPending] = useFg(false); const [errMsg, setErrMsg] = useFg(null); const runMutation = async (fn, payload) => { if (pending) throw new Error('A mutation is already in flight'); setPending(true); setErrMsg(null); try { const resp = await fn(payload); applyMutationResponse(resp); return resp; } catch (e) { setErrMsg(e && e.message ? e.message : String(e)); throw e; } finally { setPending(false); } }; const onUndoNode = () => { runMutation(undoGraph, { target_type: 'node', target_id: node.id }) .then(() => onClose()) // node disappears from layout — close the panel .catch(() => {}); }; // Active synonyms paired with the dedup_event index that added them, so // the × button can call undoGraph(target_type:"dedup", index) per contract. // Tolerates legacy string-only synonyms (mock graph) by skipping the ×. // Walk dedup_events from the end so re-added synonyms (undo → re-add) // resolve to the most recent active event, not a stale earlier one. const findActiveDedupIdx = (events, synName) => { for (let i = events.length - 1; i >= 0; i--) { const d = events[i]; if (d.state !== 'undo' && (d.added_synonyms || []).includes(synName)) return i; } return -1; }; const synRows = isConcept ? (node.synonyms || []).map(s => { if (typeof s === 'string') return { name: s, dedupIdx: -1, undone: false }; if (s.state === 'undo') return null; const dedupIdx = findActiveDedupIdx(node.dedup_events || [], s.name); return { name: s.name, dedupIdx, undone: false }; }).filter(Boolean) : []; const onRemoveSyn = (synName, dedupIdx) => { if (dedupIdx < 0) return; runMutation(undoGraph, { target_type: 'dedup', target_id: node.id, index: dedupIdx }) .catch(() => {}); }; const ConceptEditor = window.ConceptEditor; const TableEditor = window.TableEditor; return (
{node.category}{node.type ? ` · ${node.type}` : ''} {isBridge && bridge} {node.isValue && value}
{node.name}
{node.id}
{/* Edit / Undo toolbar — Undo is offered on every node type (the backend accepts target_type:"node" for any node id). Edit is gated to concept / table since those are the only edit surfaces the contract exposes. */}
{canEdit && ( )} {errMsg && ( · {errMsg.length > 60 ? errMsg.slice(0, 57) + '…' : errMsg} )}
{editing && isConcept && ConceptEditor && (
setEditing(false)}/>
)} {editing && isTable && TableEditor && (
setEditing(false)}/>
)} {isBridge && ( )} {isConcept && synRows.length > 0 && (
Synonyms
{synRows.map(s => ( {s.name} {s.dedupIdx >= 0 && ( )} ))}
)} {node.properties && node.properties.description && (
{node.properties.description}
)}
Outgoing · {outEdges.length}
{outEdges.length === 0 ? ( No outgoing edges ) : outEdges.map((e, i) => ( ))}
Incoming · {inEdges.length}
{inEdges.length === 0 ? ( No incoming edges ) : inEdges.map((e, i) => ( ))}
); } function PropsList({ properties }) { const entries = Object.entries(properties || {}).filter(([k, v]) => k !== 'description' && k !== 'columns' && (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') ); if (entries.length === 0) return null; return (
Properties
{entries.map(([k, v], i) => (
0 ? '1px solid var(--border-subtle)' : 0, }}> {k} {String(v)}
))}
); } function EdgeRow({ edge, otherId, nodeIndex, viewNodeIndex, dir, onSelect }) { const other = nodeIndex && nodeIndex.get(otherId); // Only allow selecting targets that exist in the current view. Cross-view // edges render as dimmed rows with a hint — switching views is done via // the bridge-jump button on the concept instead. const inView = !viewNodeIndex || viewNodeIndex.has(otherId); const canClick = !!other && inView; const [editing, setEditing] = useFg(false); const [pending, setPending] = useFg(false); const [errMsg, setErrMsg] = useFg(null); // Confidence is editable on every non-structure edge (per contract). const canEditConfidence = edge.type !== 'structure'; const selector = edgeSelectorFromDTO(edge); const runMutation = async (fn, payload) => { if (pending) throw new Error('A mutation is already in flight'); setPending(true); setErrMsg(null); try { const resp = await fn(payload); applyMutationResponse(resp); return resp; } catch (e) { setErrMsg(e && e.message ? e.message : String(e)); throw e; } finally { setPending(false); } }; const onUndoEdge = (e) => { e.stopPropagation(); runMutation(undoGraph, { target_type: 'edge', edge: selector }).catch(() => {}); }; const onToggleEdit = (e) => { e.stopPropagation(); setEditing(v => !v); }; const EdgeConfidenceEditor = window.EdgeConfidenceEditor; return (
{canEditConfidence && ( )}
{errMsg && (
{errMsg.length > 60 ? errMsg.slice(0, 57) + '…' : errMsg}
)} {editing && canEditConfidence && EdgeConfidenceEditor && (
setEditing(false)}/>
)}
); }