fe94f16b61
Migrates 38 files: tree-editor forms, session modals, step library, common components, library views, tree preview, and misc UI to use design tokens (bg-card, border-border, text-foreground, bg-accent, bg-gradient-brand) replacing old monochrome patterns. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import { useState, useMemo } from 'react'
|
|
import { useTreeEditorStore } from '@/store/treeEditorStore'
|
|
import { TreePreviewNode } from './TreePreviewNode'
|
|
import type { TreeStructure } from '@/types'
|
|
|
|
/** Map of targetNodeId -> array of {sourceNodeId, sourceNodeLabel} that link to it */
|
|
export type SharedLinksMap = Map<string, Array<{ id: string; label: string }>>
|
|
|
|
/**
|
|
* Build a map of which nodes link to which targets
|
|
* This helps identify shared nodes (multiple sources linking to same target)
|
|
*/
|
|
function buildSharedLinksMap(
|
|
node: TreeStructure,
|
|
map: SharedLinksMap = new Map()
|
|
): SharedLinksMap {
|
|
const nodeLabel = node.type === 'decision' ? node.question : node.title
|
|
|
|
// Check decision options
|
|
if (node.type === 'decision' && node.options) {
|
|
for (const opt of node.options) {
|
|
if (opt.next_node_id) {
|
|
const existing = map.get(opt.next_node_id) || []
|
|
existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
|
|
map.set(opt.next_node_id, existing)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Check action next_node_id
|
|
if (node.type === 'action' && node.next_node_id) {
|
|
const existing = map.get(node.next_node_id) || []
|
|
existing.push({ id: node.id, label: nodeLabel || 'Untitled' })
|
|
map.set(node.next_node_id, existing)
|
|
}
|
|
|
|
// Recurse into children
|
|
if (node.children) {
|
|
for (const child of node.children) {
|
|
buildSharedLinksMap(child, map)
|
|
}
|
|
}
|
|
|
|
return map
|
|
}
|
|
|
|
export function TreePreviewPanel() {
|
|
const { treeStructure, name, selectedNodeId, selectNode, findNode } = useTreeEditorStore()
|
|
const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null)
|
|
|
|
// Build map of shared links (which nodes link to which targets)
|
|
const sharedLinksMap = useMemo(() => {
|
|
if (!treeStructure) return new Map()
|
|
return buildSharedLinksMap(treeStructure)
|
|
}, [treeStructure])
|
|
|
|
if (!treeStructure) {
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
|
|
No tree structure to preview
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
{/* Header */}
|
|
<div className="border-b border-border px-4 py-2">
|
|
<h3 className="text-sm font-semibold text-foreground">
|
|
Preview: {name || 'Untitled Tree'}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground">
|
|
Click a node to select • Hover options to highlight targets
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tree Visualization */}
|
|
<div className="flex-1 overflow-auto p-4">
|
|
<div className="inline-block min-w-full">
|
|
<TreePreviewNode
|
|
node={treeStructure}
|
|
selectedNodeId={selectedNodeId}
|
|
onSelect={selectNode}
|
|
depth={0}
|
|
onHoverNodeId={setHoveredNodeId}
|
|
hoveredNodeId={hoveredNodeId}
|
|
findNode={findNode}
|
|
sharedLinksMap={sharedLinksMap}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Legend */}
|
|
<div className="border-t border-border px-4 py-2">
|
|
<div className="flex flex-wrap gap-4 text-xs text-muted-foreground">
|
|
<div className="flex items-center gap-1">
|
|
<div className="h-3 w-3 rounded bg-blue-500/50" />
|
|
<span>Decision</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="h-3 w-3 rounded bg-yellow-500/50" />
|
|
<span>Action</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<div className="h-3 w-3 rounded bg-green-500/50" />
|
|
<span>Solution</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TreePreviewPanel
|