Implement Tree Editor with visual preview and documentation updates
Tree Editor Features: - Zustand store with immer middleware and zundo for undo/redo - Form-based node editing (Decision, Action, Solution types) - Visual tree preview with solution connection indicators - NodePicker with type-grouped dropdown (Decisions/Actions/Solutions) - SharedLinksMap for detecting nodes with multiple sources - Modal component with scrollable body, fixed header/footer New Components: - TreeEditorLayout, TreeMetadataForm, NodeList, NodeEditorModal - NodeFormDecision, NodeFormAction, NodeFormResolution - DynamicArrayField, NodePicker - TreePreviewPanel, TreePreviewNode Documentation: - Updated README.md status to Phase 2 - Added Tree Editor details to CURRENT-STATE.md - Added modal/Zustand lessons to LESSONS-LEARNED.md - Updated file structure in CLAUDE-SETUP.md - Added Tree Editor progress to PROGRESS.md Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
390
frontend/src/components/tree-preview/TreePreviewNode.tsx
Normal file
390
frontend/src/components/tree-preview/TreePreviewNode.tsx
Normal file
@@ -0,0 +1,390 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import { HelpCircle, Zap, CheckCircle, ChevronDown, ChevronRight, Copy, Check, Play, Users } from 'lucide-react'
|
||||
import type { TreeStructure, NodeType } from '@/types'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { SharedLinksMap } from './TreePreviewPanel'
|
||||
|
||||
type FindNodeFn = (nodeId: string) => TreeStructure | null
|
||||
|
||||
/**
|
||||
* Recursively check if a node's subtree contains any solution nodes
|
||||
* Also follows next_node_id references using the findNode function
|
||||
* @param visited - Set to track visited nodes and prevent infinite loops
|
||||
*/
|
||||
function hasSolutionInSubtree(
|
||||
node: TreeStructure,
|
||||
findNode: FindNodeFn,
|
||||
visited: Set<string> = new Set()
|
||||
): boolean {
|
||||
// Prevent infinite loops from circular references
|
||||
if (visited.has(node.id)) return false
|
||||
visited.add(node.id)
|
||||
|
||||
// This node is a solution
|
||||
if (node.type === 'solution') {
|
||||
return true
|
||||
}
|
||||
|
||||
// Check children array
|
||||
if (node.children && node.children.length > 0) {
|
||||
if (node.children.some(child => hasSolutionInSubtree(child, findNode, visited))) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
// Check next_node_id reference (for action nodes)
|
||||
if (node.next_node_id) {
|
||||
const nextNode = findNode(node.next_node_id)
|
||||
if (nextNode && hasSolutionInSubtree(nextNode, findNode, visited)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
interface TreePreviewNodeProps {
|
||||
node: TreeStructure
|
||||
selectedNodeId: string | null
|
||||
onSelect: (nodeId: string) => void
|
||||
depth: number
|
||||
/** Optional label showing which option led to this node */
|
||||
fromOption?: string
|
||||
/** Callback when hovering over a node reference */
|
||||
onHoverNodeId?: (nodeId: string | null) => void
|
||||
/** Currently hovered node ID */
|
||||
hoveredNodeId?: string | null
|
||||
/** Function to look up any node by ID (for following next_node_id references) */
|
||||
findNode: FindNodeFn
|
||||
/** Map of targetNodeId -> sources that link to it (for showing shared connections) */
|
||||
sharedLinksMap: SharedLinksMap
|
||||
}
|
||||
|
||||
export function TreePreviewNode({
|
||||
node,
|
||||
selectedNodeId,
|
||||
onSelect,
|
||||
depth,
|
||||
fromOption,
|
||||
onHoverNodeId,
|
||||
hoveredNodeId,
|
||||
findNode,
|
||||
sharedLinksMap
|
||||
}: TreePreviewNodeProps) {
|
||||
const [isCollapsed, setIsCollapsed] = useState(false)
|
||||
const [copiedId, setCopiedId] = useState(false)
|
||||
const isSelected = selectedNodeId === node.id
|
||||
const isHovered = hoveredNodeId === node.id
|
||||
const isRootNode = node.id === 'root'
|
||||
|
||||
// Check if this node (or its children/next_node_id) leads to a solution
|
||||
const leadsTosolution = useMemo(() => {
|
||||
// Don't show indicator on solution nodes themselves
|
||||
if (node.type === 'solution') return false
|
||||
return hasSolutionInSubtree(node, findNode)
|
||||
}, [node, findNode])
|
||||
|
||||
const nodeTypeColors: Record<NodeType, string> = {
|
||||
decision: 'border-blue-500/50 bg-blue-500/10',
|
||||
action: 'border-yellow-500/50 bg-yellow-500/10',
|
||||
solution: 'border-green-500/50 bg-green-500/10'
|
||||
}
|
||||
|
||||
const nodeTypeSelectedColors: Record<NodeType, string> = {
|
||||
decision: 'border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50 shadow-lg shadow-blue-500/20',
|
||||
action: 'border-yellow-500 bg-yellow-500/20 ring-2 ring-yellow-500/50 shadow-lg shadow-yellow-500/20',
|
||||
solution: 'border-green-500 bg-green-500/20 ring-2 ring-green-500/50 shadow-lg shadow-green-500/20'
|
||||
}
|
||||
|
||||
const nodeTypeHoveredColors: Record<NodeType, string> = {
|
||||
decision: 'border-blue-400 bg-blue-500/15 ring-1 ring-blue-400/50',
|
||||
action: 'border-yellow-400 bg-yellow-500/15 ring-1 ring-yellow-400/50',
|
||||
solution: 'border-green-400 bg-green-500/15 ring-1 ring-green-400/50'
|
||||
}
|
||||
|
||||
const nodeTypeIcons: Record<NodeType, React.ReactNode> = {
|
||||
decision: <HelpCircle className="h-4 w-4 text-blue-500" />,
|
||||
action: <Zap className="h-4 w-4 text-yellow-500" />,
|
||||
solution: <CheckCircle className="h-4 w-4 text-green-500" />
|
||||
}
|
||||
|
||||
const getNodeLabel = () => {
|
||||
if (node.type === 'decision') return node.question || 'Untitled Question'
|
||||
return node.title || `Untitled ${node.type}`
|
||||
}
|
||||
|
||||
const hasChildren = node.children && node.children.length > 0
|
||||
|
||||
const handleCopyId = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
navigator.clipboard.writeText(node.id)
|
||||
setCopiedId(true)
|
||||
setTimeout(() => setCopiedId(false), 2000)
|
||||
}
|
||||
|
||||
const toggleCollapse = (e: React.MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
setIsCollapsed(!isCollapsed)
|
||||
}
|
||||
|
||||
// Find which option label leads to each child node
|
||||
const getOptionLabelForChild = (childId: string): string | undefined => {
|
||||
if (node.type === 'decision' && node.options) {
|
||||
const option = node.options.find(opt => opt.next_node_id === childId)
|
||||
return option?.label
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
// Check if a specific option/next_node_id leads to a solution
|
||||
const nodeLeadsToSolution = (nextNodeId: string | undefined): boolean => {
|
||||
if (!nextNodeId) return false
|
||||
// First try to find in children
|
||||
const childNode = node.children?.find(child => child.id === nextNodeId)
|
||||
if (childNode) {
|
||||
return hasSolutionInSubtree(childNode, findNode)
|
||||
}
|
||||
// Otherwise look up using findNode (for shared/external node references)
|
||||
const targetNode = findNode(nextNodeId)
|
||||
if (!targetNode) return false
|
||||
return hasSolutionInSubtree(targetNode, findNode)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* From option label */}
|
||||
{fromOption && (
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground">
|
||||
<span className="rounded bg-muted px-1.5 py-0.5">{fromOption}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Node card */}
|
||||
<div
|
||||
onClick={() => onSelect(node.id)}
|
||||
className={cn(
|
||||
'relative cursor-pointer rounded-lg border-2 p-3 transition-all',
|
||||
isRootNode
|
||||
? isSelected
|
||||
? 'border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50 shadow-lg shadow-blue-500/20'
|
||||
: isHovered
|
||||
? 'border-blue-400 bg-blue-500/15 ring-1 ring-blue-400/50'
|
||||
: 'border-blue-500/50 bg-blue-500/10'
|
||||
: isSelected
|
||||
? nodeTypeSelectedColors[node.type]
|
||||
: isHovered
|
||||
? nodeTypeHoveredColors[node.type]
|
||||
: nodeTypeColors[node.type],
|
||||
'hover:shadow-md',
|
||||
isRootNode ? 'min-w-[260px] max-w-[360px]' : 'min-w-[220px] max-w-[320px]'
|
||||
)}
|
||||
>
|
||||
{/* Solution path indicator - shows when this branch leads to a solution */}
|
||||
{leadsTosolution && (
|
||||
<div
|
||||
className="absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full bg-green-500/90 p-0.5 shadow-sm"
|
||||
title="This branch leads to a solution"
|
||||
>
|
||||
<CheckCircle className="h-3 w-3 text-white" />
|
||||
</div>
|
||||
)}
|
||||
{/* Root node START header */}
|
||||
{isRootNode && (
|
||||
<div className="flex items-center gap-2 mb-2 pb-2 border-b border-blue-500/30">
|
||||
<div className="rounded-full bg-blue-500/30 p-1.5">
|
||||
<Play className="h-4 w-4 text-blue-500" />
|
||||
</div>
|
||||
<span className="text-xs font-bold uppercase tracking-wide text-blue-600 dark:text-blue-400">
|
||||
Starting Question
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start gap-2">
|
||||
{/* Collapse toggle for nodes with children */}
|
||||
{hasChildren ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleCollapse}
|
||||
className="mt-0.5 rounded p-0.5 hover:bg-muted"
|
||||
>
|
||||
{isCollapsed ? (
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<div className="w-5" /> // Spacer for alignment
|
||||
)}
|
||||
|
||||
{!isRootNode && nodeTypeIcons[node.type]}
|
||||
{isRootNode && <HelpCircle className="h-4 w-4 text-blue-500" />}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground leading-tight">
|
||||
{getNodeLabel()}
|
||||
</p>
|
||||
|
||||
{/* Node ID with copy button */}
|
||||
<div className="flex items-center gap-1 mt-1">
|
||||
<span
|
||||
className="text-xs text-muted-foreground cursor-help"
|
||||
title={`Full ID: ${node.id}`}
|
||||
>
|
||||
{node.id === 'root' ? 'root' : node.id.slice(0, 8) + '...'}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyId}
|
||||
className="rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
title="Copy full ID"
|
||||
>
|
||||
{copiedId ? (
|
||||
<Check className="h-3 w-3 text-green-500" />
|
||||
) : (
|
||||
<Copy className="h-3 w-3" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Show options for decision nodes */}
|
||||
{node.type === 'decision' && node.options && node.options.length > 0 && (
|
||||
<div className="mt-2 space-y-1 border-t border-border/50 pt-2">
|
||||
<p className="text-[10px] uppercase tracking-wide text-muted-foreground">Options:</p>
|
||||
{node.options.map((opt, i) => {
|
||||
const leadsToSolution = nodeLeadsToSolution(opt.next_node_id)
|
||||
return (
|
||||
<div
|
||||
key={opt.id}
|
||||
className={cn(
|
||||
'flex items-center gap-1 text-xs rounded px-1 py-0.5 -mx-1',
|
||||
opt.next_node_id && 'hover:bg-muted cursor-pointer'
|
||||
)}
|
||||
onMouseEnter={() => opt.next_node_id && onHoverNodeId?.(opt.next_node_id)}
|
||||
onMouseLeave={() => onHoverNodeId?.(null)}
|
||||
>
|
||||
<span className="inline-flex h-4 w-4 items-center justify-center rounded bg-muted text-[10px] font-medium">
|
||||
{i + 1}
|
||||
</span>
|
||||
<span className="truncate text-foreground">{opt.label || 'Untitled'}</span>
|
||||
<span className="ml-auto flex items-center gap-1">
|
||||
{leadsToSolution && (
|
||||
<span title="Leads to solution">
|
||||
<CheckCircle className="h-3 w-3 text-green-500" />
|
||||
</span>
|
||||
)}
|
||||
{opt.next_node_id ? (
|
||||
<span className="text-blue-500">→</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground/50 text-[10px]">(no link)</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show next_node_id for action nodes */}
|
||||
{node.type === 'action' && node.next_node_id && (() => {
|
||||
const nextNode = findNode(node.next_node_id!)
|
||||
const nextNodeLeadsToSolution = nodeLeadsToSolution(node.next_node_id)
|
||||
const nextNodeLabel = nextNode
|
||||
? (nextNode.type === 'decision' ? nextNode.question : nextNode.title) || 'Untitled'
|
||||
: node.next_node_id!.slice(0, 8) + '...'
|
||||
|
||||
// Check if this target is shared by multiple sources
|
||||
const sourcesLinkingToTarget = sharedLinksMap.get(node.next_node_id!) || []
|
||||
const otherSources = sourcesLinkingToTarget.filter(s => s.id !== node.id)
|
||||
const isSharedTarget = otherSources.length > 0
|
||||
|
||||
// Build tooltip for shared connection
|
||||
const sharedTooltip = isSharedTarget
|
||||
? `Shared endpoint - also connected from: ${otherSources.map(s => s.label).join(', ')}`
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<div
|
||||
className="mt-2 text-xs border-t border-border/50 pt-2 hover:bg-muted/50 cursor-pointer rounded px-1 -mx-1"
|
||||
onMouseEnter={() => onHoverNodeId?.(node.next_node_id!)}
|
||||
onMouseLeave={() => onHoverNodeId?.(null)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-muted-foreground">Next:</span>
|
||||
{isSharedTarget && (
|
||||
<span title={sharedTooltip} className="flex items-center">
|
||||
<Users className="h-3 w-3 text-purple-500" />
|
||||
</span>
|
||||
)}
|
||||
<span className={cn(
|
||||
'truncate',
|
||||
nextNode?.type === 'solution' ? 'text-green-500 font-medium' : 'text-foreground'
|
||||
)}>
|
||||
{nextNodeLabel.slice(0, 30)}{nextNodeLabel.length > 30 ? '...' : ''}
|
||||
</span>
|
||||
<span className="ml-auto flex items-center gap-1">
|
||||
{(nextNodeLeadsToSolution || nextNode?.type === 'solution') && (
|
||||
<span title={nextNode?.type === 'solution' ? 'Solution' : 'Leads to solution'}>
|
||||
<CheckCircle className="h-3 w-3 text-green-500" />
|
||||
</span>
|
||||
)}
|
||||
<span className="text-yellow-500">→</span>
|
||||
</span>
|
||||
</div>
|
||||
{/* Show shared sources count */}
|
||||
{isSharedTarget && (
|
||||
<div className="mt-1 text-[10px] text-purple-500/80 pl-4">
|
||||
Shared by {sourcesLinkingToTarget.length} nodes
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Children - show as branches */}
|
||||
{hasChildren && !isCollapsed && (
|
||||
<div className="relative mt-3 ml-6 pl-6 border-l-2 border-border">
|
||||
<div className="space-y-4">
|
||||
{node.children!.map((child) => {
|
||||
const optionLabel = getOptionLabelForChild(child.id)
|
||||
|
||||
return (
|
||||
<div key={child.id} className="relative">
|
||||
{/* Horizontal connector line */}
|
||||
<div className="absolute -left-6 top-6 h-0.5 w-6 bg-border" />
|
||||
|
||||
<TreePreviewNode
|
||||
node={child}
|
||||
selectedNodeId={selectedNodeId}
|
||||
onSelect={onSelect}
|
||||
depth={depth + 1}
|
||||
fromOption={optionLabel}
|
||||
onHoverNodeId={onHoverNodeId}
|
||||
hoveredNodeId={hoveredNodeId}
|
||||
findNode={findNode}
|
||||
sharedLinksMap={sharedLinksMap}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show collapsed indicator */}
|
||||
{hasChildren && isCollapsed && (
|
||||
<div className="mt-2 ml-6 text-xs text-muted-foreground">
|
||||
<span className="rounded bg-muted px-2 py-1">
|
||||
{node.children!.length} child node{node.children!.length !== 1 ? 's' : ''} hidden
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TreePreviewNode
|
||||
114
frontend/src/components/tree-preview/TreePreviewPanel.tsx
Normal file
114
frontend/src/components/tree-preview/TreePreviewPanel.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
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 bg-background 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 bg-background 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
|
||||
2
frontend/src/components/tree-preview/index.ts
Normal file
2
frontend/src/components/tree-preview/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { TreePreviewPanel } from './TreePreviewPanel'
|
||||
export { TreePreviewNode } from './TreePreviewNode'
|
||||
Reference in New Issue
Block a user