Spaces:
Running
Running
| 'use client' | |
| import { useCallback, useEffect, useMemo, useRef, useState } from 'react' | |
| import { MagnifyingGlass as Search } from '@phosphor-icons/react' | |
| import { ClaySegmented } from '@/components/ui/ClaySegmented' | |
| import { AlignmentStatsBar } from '@/components/alignment/AlignmentStatsBar' | |
| import { AlignmentBlock } from '@/components/alignment/AlignmentBlock' | |
| import { computeAlignmentStats, parseAlignedFasta } from '@/lib/alignment-stats' | |
| import { useTheme } from '@/contexts/theme' | |
| import { cssColor } from '@/lib/theme-canvas' | |
| // ─── Types ──────────────────────────────────────────────────────────────────── | |
| interface TreeNode { | |
| id: number | |
| name: string | |
| length: number | |
| bootstrap: number | null | |
| children: TreeNode[] | |
| parent: TreeNode | null | |
| x: number | |
| y: number | |
| px: number | |
| py: number | |
| angle?: number | |
| radius?: number | |
| } | |
| type Layout = 'rectangular' | 'circular' | |
| export interface PhyloTreeViewerProps { | |
| newick: string | |
| method?: 'nj' | 'ml' | 'upgma' | |
| alignment?: string | |
| sequenceType?: 'protein' | 'dna' | |
| } | |
| // ─── Newick parser ──────────────────────────────────────────────────────────── | |
| function parseNewick(s: string): TreeNode { | |
| let nextId = 0 | |
| const makeNode = (): TreeNode => ({ | |
| id: nextId++, name: '', length: 0, bootstrap: null, | |
| children: [], parent: null, | |
| x: 0, y: 0, px: 0, py: 0, | |
| }) | |
| const stack: TreeNode[] = [] | |
| let cur: TreeNode = makeNode() | |
| let i = 0 | |
| const n = s.length | |
| while (i < n) { | |
| const ch = s[i] | |
| if (ch === '(') { | |
| const child = makeNode() | |
| child.px = cur.px; child.py = cur.py | |
| cur.children.push(child) | |
| stack.push(cur) | |
| child.parent = cur | |
| cur = child | |
| i++ | |
| } else if (ch === ',') { | |
| const parent = stack[stack.length - 1] | |
| const sibling = makeNode() | |
| parent.children.push(sibling) | |
| sibling.parent = parent | |
| cur = sibling | |
| i++ | |
| } else if (ch === ')') { | |
| cur = stack.pop()! | |
| i++ | |
| while (i < n && s[i] === ' ') i++ | |
| if (i < n && s[i] !== ':' && s[i] !== ',' && s[i] !== ')' && s[i] !== ';' && s[i] !== '[') { | |
| const [label, ni] = readToken(s, i) | |
| i = ni | |
| const num = parseFloat(label) | |
| if (!isNaN(num) && label.trim() !== '') { | |
| cur.bootstrap = num | |
| } else { | |
| cur.name = label | |
| } | |
| } | |
| if (i < n && s[i] === '[') { | |
| while (i < n && s[i] !== ']') i++ | |
| i++ | |
| } | |
| if (i < n && s[i] === ':') { | |
| i++ | |
| const [lenStr, ni] = readNumber(s, i) | |
| cur.length = parseFloat(lenStr) || 0 | |
| i = ni | |
| } | |
| } else if (ch === ':') { | |
| i++ | |
| const [lenStr, ni] = readNumber(s, i) | |
| cur.length = parseFloat(lenStr) || 0 | |
| i = ni | |
| } else if (ch === ';' || ch === '\n' || ch === '\r') { | |
| i++ | |
| } else { | |
| if (ch === "'") { | |
| i++ | |
| let name = '' | |
| while (i < n && s[i] !== "'") { name += s[i]; i++ } | |
| cur.name = name | |
| i++ | |
| } else { | |
| const [name, ni] = readToken(s, i) | |
| cur.name = name | |
| i = ni | |
| } | |
| } | |
| } | |
| return cur | |
| } | |
| function readToken(s: string, i: number): [string, number] { | |
| let tok = '' | |
| while (i < s.length && !'(),;:['.includes(s[i])) { tok += s[i]; i++ } | |
| return [tok.trim(), i] | |
| } | |
| function readNumber(s: string, i: number): [string, number] { | |
| let tok = '' | |
| while (i < s.length && '0123456789.-eE+'.includes(s[i])) { tok += s[i]; i++ } | |
| return [tok, i] | |
| } | |
| // ─── Tree helpers ───────────────────────────────────────────────────────────── | |
| function countLeaves(n: TreeNode): number { | |
| if (!n.children.length) return 1 | |
| return n.children.reduce((s, c) => s + countLeaves(c), 0) | |
| } | |
| function pruneTree(node: TreeNode, collapsed: Set<number>): TreeNode { | |
| if (collapsed.has(node.id) && node.children.length > 0) { | |
| return { ...node, id: node.id, children: [], name: `+${countLeaves(node)}`, parent: null } | |
| } | |
| const children = node.children.map(c => pruneTree(c, collapsed)) | |
| const pruned = { ...node, children, parent: null } | |
| children.forEach(c => { c.parent = pruned }) | |
| return pruned | |
| } | |
| function computePathSet(nodes: TreeNode[], targetId: number | null): Set<number> { | |
| if (targetId === null) return new Set() | |
| const map = new Map<number, TreeNode>() | |
| for (const n of nodes) map.set(n.id, n) | |
| const path = new Set<number>() | |
| let id: number | undefined = targetId | |
| while (id !== undefined) { | |
| path.add(id) | |
| const node = map.get(id) | |
| id = node?.parent?.id | |
| } | |
| return path | |
| } | |
| function findNodeById(nodes: TreeNode[], id: number): TreeNode | null { | |
| for (const n of nodes) { | |
| if (n.id === id) return n | |
| if (n.children.length) { | |
| const found = findNodeById(n.children, id) | |
| if (found) return found | |
| } | |
| } | |
| return null | |
| } | |
| function clamp(v: number, min: number, max: number) { | |
| return Math.max(min, Math.min(max, v)) | |
| } | |
| // ─── Rectangular layout ─────────────────────────────────────────────────────── | |
| const SVG_W = 720 | |
| const SVG_PAD = { top: 20, right: 160, bottom: 40, left: 20 } | |
| function buildRectangularLayout(root: TreeNode, collapsed: Set<number>): | |
| { nodes: TreeNode[]; height: number; maxDepth: number; rootNode: TreeNode } { | |
| const pruned = pruneTree(root, collapsed) | |
| const nodes: TreeNode[] = [] | |
| let leafIdx = 0 | |
| const totalLeaves = countLeaves(pruned) | |
| const rowH = Math.max(18, Math.min(26, 600 / totalLeaves)) | |
| const drawH = totalLeaves * rowH | |
| const drawW = SVG_W - SVG_PAD.left - SVG_PAD.right | |
| function hasBranchLengths(n: TreeNode): boolean { | |
| return n.length > 0 || n.children.some(hasBranchLengths) | |
| } | |
| const useLengths = hasBranchLengths(pruned) | |
| function maxDepth(n: TreeNode, d: number): number { | |
| if (!n.children.length) return d + n.length | |
| return Math.max(...n.children.map(c => maxDepth(c, d + n.length))) | |
| } | |
| const totalDepth = useLengths ? maxDepth(pruned, 0) : 0 | |
| function getMaxDepthSteps(n: TreeNode, d = 0): number { | |
| if (!n.children.length) return d | |
| return Math.max(...n.children.map(c => getMaxDepthSteps(c, d + 1))) | |
| } | |
| function assignPositions(n: TreeNode, depth: number, px: number, py: number): void { | |
| nodes.push(n) | |
| const x = useLengths && totalDepth > 0 | |
| ? SVG_PAD.left + (depth / totalDepth) * drawW | |
| : SVG_PAD.left + depth * (drawW / (getMaxDepthSteps(pruned) || 1)) | |
| n.px = px; n.py = py | |
| if (!n.children.length) { | |
| n.x = x | |
| n.y = SVG_PAD.top + leafIdx * rowH + rowH / 2 | |
| leafIdx++ | |
| } else { | |
| n.children.forEach(c => assignPositions(c, depth + (useLengths ? c.length : 1), x, 0)) | |
| n.y = (n.children[0].y + n.children[n.children.length - 1].y) / 2 | |
| n.x = x | |
| n.children.forEach(c => { c.px = n.x; c.py = n.y }) | |
| } | |
| } | |
| assignPositions(pruned, 0, SVG_PAD.left, SVG_PAD.top + drawH / 2) | |
| pruned.px = pruned.x; pruned.py = pruned.y | |
| return { nodes, height: drawH + SVG_PAD.top + SVG_PAD.bottom, maxDepth: totalDepth, rootNode: pruned } | |
| } | |
| // ─── Circular layout ────────────────────────────────────────────────────────── | |
| const CIRC_R = 280 | |
| const CIRC_CX = 380 | |
| const CIRC_CY = 380 | |
| const CIRC_SIZE = 760 | |
| function buildCircularLayout(root: TreeNode, collapsed: Set<number>): | |
| { nodes: TreeNode[]; height: number; maxDepth: number; rootNode: TreeNode } { | |
| const pruned = pruneTree(root, collapsed) | |
| const nodes: TreeNode[] = [] | |
| const total = countLeaves(pruned) | |
| let leafIdx = 0 | |
| function hasBranchLengths(n: TreeNode): boolean { | |
| return n.length > 0 || n.children.some(hasBranchLengths) | |
| } | |
| const useLengths = hasBranchLengths(pruned) | |
| function maxCumDist(n: TreeNode, d: number): number { | |
| if (!n.children.length) return d + (useLengths ? n.length : 1) | |
| return Math.max(...n.children.map(c => maxCumDist(c, d + (useLengths ? c.length : 1)))) | |
| } | |
| const maxDist = maxCumDist(pruned, 0) || 1 | |
| function assignAngles(n: TreeNode): number { | |
| if (!n.children.length) { | |
| n.angle = (leafIdx / total) * 2 * Math.PI | |
| leafIdx++ | |
| return n.angle! | |
| } | |
| const childAngles = n.children.map(assignAngles) | |
| n.angle = (Math.min(...childAngles) + Math.max(...childAngles)) / 2 | |
| return n.angle! | |
| } | |
| function assignRadii(n: TreeNode, cumDist: number): void { | |
| n.radius = (cumDist / maxDist) * CIRC_R | |
| n.children.forEach(c => assignRadii(c, cumDist + (useLengths ? c.length : 1))) | |
| } | |
| function toCartesian(n: TreeNode, parent: TreeNode | null): void { | |
| nodes.push(n) | |
| n.x = CIRC_CX + n.radius! * Math.cos(n.angle!) | |
| n.y = CIRC_CY + n.radius! * Math.sin(n.angle!) | |
| n.px = parent ? parent.x : n.x | |
| n.py = parent ? parent.y : n.y | |
| n.children.forEach(c => toCartesian(c, n)) | |
| } | |
| assignAngles(pruned) | |
| assignRadii(pruned, 0) | |
| toCartesian(pruned, null) | |
| return { nodes, height: CIRC_SIZE, maxDepth: 0, rootNode: pruned } | |
| } | |
| // ─── Bootstrap colour scale ──────────────────────────────────────────────────── | |
| function bootstrapColour(val: number): string { | |
| if (val >= 90) return '#4ADE80' | |
| if (val >= 70) return '#a3e635' | |
| if (val >= 50) return '#fb923c' | |
| return '#f87171' | |
| } | |
| // ─── SVG sub-renderers ──────────────────────────────────────────────────────── | |
| function RectangularTree({ | |
| nodes, svgH, maxDepth, | |
| pathSet, selectedId, hoveredId, | |
| onNodeHover, onNodeClick, onNodeDoubleClick, | |
| }: { | |
| nodes: TreeNode[]; svgH: number; maxDepth: number | |
| pathSet: Set<number>; selectedId: number | null; hoveredId: number | null | |
| onNodeHover: (id: number | null) => void; onNodeClick: (id: number) => void; onNodeDoubleClick: (id: number) => void | |
| }) { | |
| const hasHover = hoveredId !== null | |
| const drawW = SVG_W - SVG_PAD.left - SVG_PAD.right | |
| return ( | |
| <> | |
| {nodes.map((n, i) => { | |
| if (n.px === n.x && n.py === n.y) return null | |
| const onPath = pathSet.has(n.id) | |
| const dim = hasHover && !onPath | |
| const bright = hasHover && onPath | |
| return ( | |
| <g key={`b-${i}`}> | |
| <line x1={n.px} y1={n.py} x2={n.px} y2={n.y} | |
| stroke={bright ? '#4ADE80' : '#334155'} | |
| strokeWidth={bright ? 2 : dim ? 0.5 : 1.2} | |
| opacity={dim ? 0.12 : 1} /> | |
| <line x1={n.px} y1={n.y} x2={n.x} y2={n.y} | |
| stroke={bright ? '#4ADE80' : '#475569'} | |
| strokeWidth={bright ? 2.5 : dim ? 0.5 : 1.5} | |
| opacity={dim ? 0.12 : 1} /> | |
| {n.length > 0.001 && ( | |
| <text x={(n.px + n.x) / 2} y={n.y - 5} fontSize={8} | |
| fill={bright ? '#4ADE80' : '#64748b'} | |
| opacity={dim ? 0.12 : 0.8} | |
| textAnchor="middle" fontFamily="sans-serif"> | |
| {n.length.toFixed(4)} | |
| </text> | |
| )} | |
| </g> | |
| ) | |
| })} | |
| {nodes.map((n, i) => { | |
| const isLeaf = n.children.length === 0 | |
| const onPath = pathSet.has(n.id) | |
| const dim = hasHover && !onPath | |
| const bright = hasHover && onPath | |
| const isSelected = selectedId === n.id | |
| const blTip = n.length > 0 ? `branch length: ${n.length.toFixed(5)}` : '' | |
| return ( | |
| <g key={`n-${i}`} | |
| style={{ cursor: 'pointer' }} | |
| onMouseEnter={() => onNodeHover(n.id)} | |
| onMouseLeave={() => onNodeHover(null)} | |
| onClick={(e) => { e.stopPropagation(); onNodeClick(n.id) }} | |
| onDoubleClick={(e) => { e.stopPropagation(); onNodeDoubleClick(n.id) }} | |
| > | |
| {isLeaf ? ( | |
| <> | |
| <circle cx={n.x} cy={n.y} r={isSelected ? 5 : 3} | |
| fill="#4ADE80" | |
| opacity={dim ? 0.12 : isSelected ? 1 : 0.8} | |
| stroke={isSelected ? '#fff' : 'none'} | |
| strokeWidth={isSelected ? 1.5 : 0} /> | |
| <text x={n.x + 8} y={n.y + 4} fontSize={11} | |
| fill={bright ? '#4ADE80' : '#94a3b8'} | |
| opacity={dim ? 0.12 : 1} | |
| fontFamily="var(--font-geist-mono), monospace" | |
| fontWeight={isSelected ? 'bold' : 'normal'}> | |
| {n.name} | |
| </text> | |
| <title>{n.name}{blTip ? ` · ${blTip}` : ''}</title> | |
| </> | |
| ) : ( | |
| <> | |
| <circle cx={n.x} cy={n.y} r={isSelected ? 7 : 5} | |
| fill={dim ? '#1e293b' : isSelected ? '#4ADE80' : '#1e293b'} | |
| stroke={isSelected ? cssColor('--tree-selected', '#FFFFFF') : bright ? '#4ADE80' : '#475569'} | |
| strokeWidth={isSelected ? 2 : bright ? 2 : 1.5} | |
| opacity={dim ? 0.12 : 0.85} /> | |
| {n.bootstrap !== null && n.bootstrap >= 50 && ( | |
| <text x={n.x - 4} y={n.y - 7} fontSize={9} | |
| fill={bootstrapColour(n.bootstrap)} textAnchor="end" | |
| fontFamily="sans-serif" fontWeight="bold" | |
| opacity={dim ? 0.12 : 1}> | |
| {Math.round(n.bootstrap)} | |
| </text> | |
| )} | |
| <text x={n.x} y={n.y + 4} fontSize={7} | |
| fill={bright ? '#4ADE80' : '#64748b'} | |
| opacity={dim ? 0.12 : 0.7} | |
| textAnchor="middle" fontFamily="sans-serif"> | |
| {n.name || `N${i}`} | |
| </text> | |
| <title>Node {n.name || `N${i}`}{blTip ? ` · ${blTip}` : ''}{n.bootstrap !== null ? ` · bootstrap: ${n.bootstrap}` : ''}</title> | |
| </> | |
| )} | |
| </g> | |
| ) | |
| })} | |
| {maxDepth > 0 && (() => { | |
| const scaleVal = parseFloat((maxDepth / 5).toPrecision(1)) | |
| const scaleW = (scaleVal / maxDepth) * drawW | |
| const bx = SVG_PAD.left | |
| const by = svgH - SVG_PAD.bottom + 10 | |
| return ( | |
| <g> | |
| <line x1={bx} y1={by} x2={bx + scaleW} y2={by} stroke="#64748b" strokeWidth={1.5} /> | |
| <line x1={bx} y1={by - 4} x2={bx} y2={by + 4} stroke="#64748b" strokeWidth={1.5} /> | |
| <line x1={bx + scaleW} y1={by - 4} x2={bx + scaleW} y2={by + 4} stroke="#64748b" strokeWidth={1.5} /> | |
| <text x={bx + scaleW / 2} y={by + 14} fontSize={10} fill="#64748b" | |
| textAnchor="middle" fontFamily="sans-serif"> | |
| {scaleVal} substitutions/site | |
| </text> | |
| </g> | |
| ) | |
| })()} | |
| </> | |
| ) | |
| } | |
| function CircularTree({ | |
| nodes, pathSet, selectedId, hoveredId, | |
| onNodeHover, onNodeClick, onNodeDoubleClick, | |
| }: { | |
| nodes: TreeNode[]; pathSet: Set<number>; selectedId: number | null; hoveredId: number | null | |
| onNodeHover: (id: number | null) => void; onNodeClick: (id: number) => void; onNodeDoubleClick: (id: number) => void | |
| }) { | |
| const hasHover = hoveredId !== null | |
| return ( | |
| <> | |
| {nodes.map((n, i) => { | |
| if (n.px === n.x && n.py === n.y) return null | |
| const onPath = pathSet.has(n.id) | |
| const dim = hasHover && !onPath | |
| const bright = hasHover && onPath | |
| const midX = (n.px + n.x) / 2 | |
| const midY = (n.py + n.y) / 2 | |
| return ( | |
| <g key={`b-${i}`}> | |
| <line x1={n.px} y1={n.py} x2={n.x} y2={n.y} | |
| stroke={bright ? '#4ADE80' : '#475569'} | |
| strokeWidth={bright ? 2.5 : dim ? 0.5 : 1.4} | |
| opacity={dim ? 0.12 : 1} /> | |
| {n.length > 0.001 && ( | |
| <text x={midX} y={midY - 4} fontSize={7} | |
| fill={bright ? '#4ADE80' : '#64748b'} | |
| opacity={dim ? 0.12 : 0.8} | |
| textAnchor="middle" fontFamily="sans-serif"> | |
| {n.length.toFixed(4)} | |
| </text> | |
| )} | |
| </g> | |
| ) | |
| })} | |
| {nodes.filter(n => n.children.length > 0).map((n, i) => { | |
| const r = n.radius! | |
| if (r < 1 || n.children.length < 2) return null | |
| const onPath = pathSet.has(n.id) | |
| const dim = hasHover && !onPath | |
| const bright = hasHover && onPath | |
| const angles = n.children.map(c => c.angle!) | |
| const a0 = Math.min(...angles) | |
| const a1 = Math.max(...angles) | |
| const x0 = CIRC_CX + r * Math.cos(a0) | |
| const y0 = CIRC_CY + r * Math.sin(a0) | |
| const x1 = CIRC_CX + r * Math.cos(a1) | |
| const y1 = CIRC_CY + r * Math.sin(a1) | |
| const largeArc = (a1 - a0) > Math.PI ? 1 : 0 | |
| return ( | |
| <path key={`arc-${i}`} | |
| d={`M ${x0} ${y0} A ${r} ${r} 0 ${largeArc} 1 ${x1} ${y1}`} | |
| fill="none" stroke={bright ? '#4ADE80' : '#334155'} | |
| strokeWidth={bright ? 2 : dim ? 0.5 : 1.2} | |
| opacity={dim ? 0.12 : 1} /> | |
| ) | |
| })} | |
| {nodes.map((n, i) => { | |
| const isLeaf = n.children.length === 0 | |
| const angle = n.angle ?? 0 | |
| const deg = (angle * 180) / Math.PI | |
| const flip = deg > 90 && deg < 270 | |
| const labelX = CIRC_CX + (n.radius! + 10) * Math.cos(angle) | |
| const labelY = CIRC_CY + (n.radius! + 10) * Math.sin(angle) | |
| const onPath = pathSet.has(n.id) | |
| const dim = hasHover && !onPath | |
| const bright = hasHover && onPath | |
| const isSelected = selectedId === n.id | |
| const blTip = n.length > 0 ? `branch length: ${n.length.toFixed(5)}` : '' | |
| return ( | |
| <g key={`n-${i}`} | |
| transform={`rotate(${deg - (flip ? 180 : 0)}, ${CIRC_CX + n.radius! * Math.cos(angle)}, ${CIRC_CY + n.radius! * Math.sin(angle)})`} | |
| style={{ cursor: 'pointer' }} | |
| onMouseEnter={() => onNodeHover(n.id)} | |
| onMouseLeave={() => onNodeHover(null)} | |
| onClick={(e) => { e.stopPropagation(); onNodeClick(n.id) }} | |
| onDoubleClick={(e) => { e.stopPropagation(); onNodeDoubleClick(n.id) }} | |
| > | |
| {isLeaf ? ( | |
| <> | |
| <circle cx={n.x} cy={n.y} r={isSelected ? 5 : 3} | |
| fill="#4ADE80" | |
| opacity={dim ? 0.12 : isSelected ? 1 : 0.8} | |
| stroke={isSelected ? '#fff' : 'none'} | |
| strokeWidth={isSelected ? 1.5 : 0} /> | |
| <text | |
| x={labelX} y={labelY + 4} | |
| fontSize={10} | |
| fill={bright ? '#4ADE80' : '#94a3b8'} | |
| opacity={dim ? 0.12 : 1} | |
| fontFamily="var(--font-geist-mono), monospace" | |
| fontWeight={isSelected ? 'bold' : 'normal'} | |
| textAnchor={flip ? 'end' : 'start'} | |
| transform={`rotate(${-(deg - (flip ? 180 : 0))}, ${labelX}, ${labelY})`} | |
| > | |
| {n.name} | |
| </text> | |
| <title>{n.name}{blTip ? ` · ${blTip}` : ''}</title> | |
| </> | |
| ) : ( | |
| <> | |
| <circle cx={n.x} cy={n.y} r={isSelected ? 7 : 5} | |
| fill={dim ? '#1e293b' : isSelected ? '#4ADE80' : '#1e293b'} | |
| stroke={isSelected ? cssColor('--tree-selected', '#FFFFFF') : bright ? '#4ADE80' : '#475569'} | |
| strokeWidth={isSelected ? 2 : bright ? 2 : 1.5} | |
| opacity={dim ? 0.12 : 0.85} /> | |
| {n.bootstrap !== null && n.bootstrap >= 50 && ( | |
| <text x={n.x} y={n.y - 7} fontSize={8} | |
| fill={bootstrapColour(n.bootstrap)} textAnchor="middle" fontWeight="bold" | |
| opacity={dim ? 0.12 : 1}> | |
| {Math.round(n.bootstrap)} | |
| </text> | |
| )} | |
| <text x={n.x} y={n.y + 4} fontSize={6} | |
| fill={bright ? '#4ADE80' : '#64748b'} | |
| opacity={dim ? 0.12 : 0.7} | |
| textAnchor="middle" fontFamily="sans-serif"> | |
| {n.name || `N${i}`} | |
| </text> | |
| <title>Node {n.name || `N${i}`}{blTip ? ` · ${blTip}` : ''}{n.bootstrap !== null ? ` · bootstrap: ${n.bootstrap}` : ''}</title> | |
| </> | |
| )} | |
| </g> | |
| ) | |
| })} | |
| </> | |
| ) | |
| } | |
| // ─── Node info panel ────────────────────────────────────────────────────────── | |
| function NodeInfoPanel({ node, allNodes }: { node: TreeNode; allNodes: TreeNode[] }) { | |
| const isLeaf = node.children.length === 0 | |
| const leavesInSubtree = isLeaf ? 1 : countLeaves(node) | |
| const depth = (() => { | |
| let d = 0; let cur: TreeNode | null = node.parent | |
| while (cur) { d++; cur = cur.parent } | |
| return d | |
| })() | |
| const leafName = isLeaf ? (node.name || '').split('|').pop()?.split('_')[0] || node.name : '' | |
| const isValidAccession = leafName.length >= 4 && /^[A-Z0-9_]+$/.test(leafName) | |
| return ( | |
| <div className="data-card p-4 space-y-2 text-sm"> | |
| <div className="flex items-center justify-between"> | |
| <span className="text-text-primary font-medium"> | |
| {isLeaf ? node.name || 'Leaf' : 'Internal Node'} | |
| </span> | |
| <span className="text-text-secondary text-xs"> | |
| {isLeaf ? 'leaf' : 'hub'} · depth {depth} | |
| </span> | |
| </div> | |
| <div className="grid grid-cols-2 gap-2 text-xs"> | |
| <div> | |
| <span className="text-text-secondary mr-1">Branch length:</span> | |
| <span className="text-accent-cyan font-mono">{node.length.toFixed(5)}</span> | |
| </div> | |
| {node.bootstrap !== null && ( | |
| <div> | |
| <span className="text-text-secondary mr-1">Bootstrap:</span> | |
| <span className="font-mono" style={{ color: bootstrapColour(node.bootstrap) }}> | |
| {node.bootstrap} | |
| </span> | |
| </div> | |
| )} | |
| {!isLeaf && ( | |
| <div> | |
| <span className="text-text-secondary mr-1">Subtree leaves:</span> | |
| <span className="text-text-primary font-mono">{leavesInSubtree}</span> | |
| </div> | |
| )} | |
| <div> | |
| <span className="text-text-secondary mr-1">Node ID:</span> | |
| <span className="text-text-primary font-mono">{node.id}</span> | |
| </div> | |
| </div> | |
| {isLeaf && isValidAccession && ( | |
| <div className="pt-2 border-t border-glass-border flex items-center justify-end gap-2"> | |
| <a href={`https://www.ncbi.nlm.nih.gov/protein/${leafName}`} target="_blank" rel="noreferrer" | |
| className="text-xs text-accent-cyan hover:underline">View on NCBI</a> | |
| <button onClick={() => window.open(`/analyze/blast?sequence=${leafName}`, '_blank')} | |
| className="flex items-center gap-1 px-2.5 py-1 rounded bg-accent-cyan/10 text-accent-cyan text-xs font-medium hover:bg-accent-cyan/20 transition"> | |
| <Search className="w-3 h-3" /> BLAST ortholog (F6) | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| ) | |
| } | |
| // ─── Export helpers ─────────────────────────────────────────────────────────── | |
| function downloadBlob(blob: Blob, filename: string) { | |
| const url = URL.createObjectURL(blob) | |
| const a = document.createElement('a') | |
| a.href = url; a.download = filename; a.click() | |
| URL.revokeObjectURL(url) | |
| } | |
| function exportSVG(svgEl: SVGSVGElement, filename: string) { | |
| const src = '<?xml version="1.0" encoding="UTF-8"?>\n' + | |
| new XMLSerializer().serializeToString(svgEl) | |
| downloadBlob(new Blob([src], { type: 'image/svg+xml' }), filename) | |
| } | |
| function exportPNG(svgEl: SVGSVGElement, filename: string) { | |
| const { width, height } = svgEl.viewBox.baseVal | |
| const scale = 2 | |
| const canvas = Object.assign(document.createElement('canvas'), { | |
| width: width * scale, height: height * scale, | |
| }) | |
| const ctx = canvas.getContext('2d')! | |
| const img = new Image() | |
| const data = 'data:image/svg+xml;base64,' + | |
| btoa(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svgEl)))) | |
| img.onload = () => { | |
| ctx.fillStyle = cssColor('--tree-canvas', '#06060B') | |
| ctx.fillRect(0, 0, canvas.width, canvas.height) | |
| ctx.scale(scale, scale) | |
| ctx.drawImage(img, 0, 0) | |
| canvas.toBlob(b => b && downloadBlob(b, filename), 'image/png') | |
| } | |
| img.src = data | |
| } | |
| // ─── Method badge ───────────────────────────────────────────────────────────── | |
| const METHOD_META = { | |
| nj: { label: 'Neighbor-Joining', colour: 'text-accent-cyan border-accent-cyan/40 bg-accent-cyan/10' }, | |
| ml: { label: 'Maximum Likelihood', colour: 'text-violet-400 border-violet-400/40 bg-violet-400/10' }, | |
| upgma: { label: 'UPGMA', colour: 'text-amber-400 border-amber-400/40 bg-amber-400/10' }, | |
| } | |
| // ─── Main component ─────────────────────────────────────────────────────────── | |
| export default function PhyloTreeViewer({ | |
| newick, | |
| method, | |
| alignment, | |
| sequenceType = 'protein', | |
| }: PhyloTreeViewerProps) { | |
| const [layout, setLayout] = useState<Layout>('rectangular') | |
| const [showAlignment, setShowAln] = useState(false) | |
| const [showRaw, setShowRaw] = useState(false) | |
| const [hoveredId, setHoveredId] = useState<number | null>(null) | |
| const [selectedId, setSelectedId] = useState<number | null>(null) | |
| const [collapsedIds, setCollapsedIds] = useState<Set<number>>(new Set()) | |
| const { theme } = useTheme() | |
| // Resolved at render so toggling the theme re-reads the tokens (re-render below). | |
| const treeCanvas = cssColor('--tree-canvas', theme === 'light' ? '#FFFFFF' : '#06060B') | |
| const alignmentStats = useMemo( | |
| () => (alignment ? computeAlignmentStats(parseAlignedFasta(alignment).seqs) : null), | |
| [alignment], | |
| ) | |
| // zoom / pan | |
| const [transform, setTransform] = useState({ scale: 1, x: 0, y: 0 }) | |
| const [isDragging, setIsDragging] = useState(false) | |
| const dragRef = useRef({ startX: 0, startY: 0, startS: 1, startTx: 0, startTy: 0, moved: false }) | |
| const svgRef = useRef<SVGSVGElement>(null) | |
| const treeData = useMemo(() => { | |
| try { | |
| const root = parseNewick(newick) | |
| if (layout === 'rectangular') { | |
| return { ...buildRectangularLayout(root, collapsedIds), error: null as string | null } | |
| } else { | |
| return { ...buildCircularLayout(root, collapsedIds), error: null as string | null } | |
| } | |
| } catch (e) { | |
| return { nodes: [], height: 400, maxDepth: 0, rootNode: null as TreeNode | null, error: String(e) } | |
| } | |
| }, [newick, layout, collapsedIds]) | |
| const pathSet = useMemo(() => computePathSet(treeData.nodes, hoveredId), [hoveredId, treeData.nodes]) | |
| const selectedNode = useMemo(() => { | |
| if (selectedId === null) return null | |
| return findNodeById(treeData.nodes, selectedId) | |
| }, [selectedId, treeData.nodes]) | |
| const filename = `phylo_tree_${method ?? 'tree'}` | |
| const handleExportSVG = useCallback(() => { | |
| if (svgRef.current) exportSVG(svgRef.current, `${filename}.svg`) | |
| }, [filename]) | |
| const handleExportPNG = useCallback(() => { | |
| if (svgRef.current) exportPNG(svgRef.current, `${filename}.png`) | |
| }, [filename]) | |
| const handleExportNewick = useCallback(() => { | |
| downloadBlob(new Blob([newick], { type: 'text/plain' }), `${filename}.nwk`) | |
| }, [newick, filename]) | |
| // ── Zoom / pan event handlers ────────────────────────────────────────────── | |
| const handleWheel = useCallback((e: WheelEvent) => { | |
| e.preventDefault() | |
| const svg = svgRef.current | |
| if (!svg) return | |
| const rect = svg.getBoundingClientRect() | |
| const mx = e.clientX - rect.left | |
| const my = e.clientY - rect.top | |
| const delta = e.deltaY > 0 ? 0.88 : 1 / 0.88 | |
| const newScale = clamp(transform.scale * delta, 0.08, 12) | |
| const ratio = newScale / transform.scale | |
| setTransform({ | |
| scale: newScale, | |
| x: mx - (mx - transform.x) * ratio, | |
| y: my - (my - transform.y) * ratio, | |
| }) | |
| }, [transform]) | |
| // Attach non-passive wheel listener so e.preventDefault() blocks page scroll | |
| useEffect(() => { | |
| const el = svgRef.current | |
| if (!el) return | |
| el.addEventListener('wheel', handleWheel, { passive: false }) | |
| return () => el.removeEventListener('wheel', handleWheel) | |
| }, [handleWheel]) | |
| const resetView = useCallback(() => { | |
| setTransform({ scale: 1, x: 0, y: 0 }) | |
| }, []) | |
| const handleMouseDown = useCallback((e: React.MouseEvent<SVGSVGElement>) => { | |
| if (e.button !== 0) return | |
| setIsDragging(true) | |
| dragRef.current = { | |
| startX: e.clientX, startY: e.clientY, | |
| startS: transform.scale, startTx: transform.x, startTy: transform.y, | |
| moved: false, | |
| } | |
| }, [transform]) | |
| const handleMouseMove = useCallback((e: React.MouseEvent<SVGSVGElement>) => { | |
| if (!isDragging) return | |
| const drag = dragRef.current | |
| const dx = e.clientX - drag.startX | |
| const dy = e.clientY - drag.startY | |
| if (Math.abs(dx) > 3 || Math.abs(dy) > 3) drag.moved = true | |
| setTransform(t => ({ ...t, x: drag.startTx + dx, y: drag.startTy + dy })) | |
| }, [isDragging]) | |
| const handleMouseUp = useCallback(() => { | |
| setIsDragging(false) | |
| }, []) | |
| // ── Node interaction handlers ─────────────────────────────────────────────── | |
| const handleNodeHover = useCallback((id: number | null) => { | |
| setHoveredId(id) | |
| }, []) | |
| const handleNodeClick = useCallback((id: number) => { | |
| setIsDragging(false) | |
| if (dragRef.current.moved) return | |
| setSelectedId(prev => prev === id ? null : id) | |
| }, []) | |
| const handleNodeDoubleClick = useCallback((id: number) => { | |
| setCollapsedIds(prev => { | |
| const next = new Set(prev) | |
| if (next.has(id)) next.delete(id); else next.add(id) | |
| return next | |
| }) | |
| setSelectedId(null) | |
| }, []) | |
| const handleSvgClick = useCallback(() => { | |
| setSelectedId(null) | |
| setHoveredId(null) | |
| }, []) | |
| const expandAll = useCallback(() => setCollapsedIds(new Set()), []) | |
| const collapseAllInternal = useCallback(() => { | |
| setCollapsedIds(new Set(treeData.nodes.filter(n => n.children.length > 0).map(n => n.id))) | |
| }, [treeData.nodes]) | |
| // ── Error state ───────────────────────────────────────────────────────────── | |
| if (treeData.error) { | |
| return ( | |
| <div className="glass-card p-6 text-error"> | |
| <p className="font-medium mb-1">Failed to parse Newick string</p> | |
| <pre className="text-xs opacity-70 overflow-auto">{treeData.error}</pre> | |
| <pre className="text-xs opacity-40 mt-2 overflow-auto">{newick.slice(0, 200)}</pre> | |
| </div> | |
| ) | |
| } | |
| // ── Render ────────────────────────────────────────────────────────────────── | |
| return ( | |
| <div className="space-y-4"> | |
| {/* Toolbar */} | |
| <div className="flex flex-wrap items-center gap-3"> | |
| {method && ( | |
| <span className={`text-xs px-2.5 py-1 rounded-full border font-medium ${METHOD_META[method].colour}`}> | |
| {METHOD_META[method].label} | |
| </span> | |
| )} | |
| <ClaySegmented | |
| options={[ | |
| { value: 'rectangular', label: 'Rectangular' }, | |
| { value: 'circular', label: 'Circular' }, | |
| ]} | |
| value={layout} | |
| onChange={setLayout} | |
| size="sm" | |
| /> | |
| <button onClick={resetView} | |
| className="text-xs px-3 py-1.5 rounded-lg border border-glass-border | |
| text-text-secondary hover:text-text-primary hover:border-accent-cyan/40 transition-colors"> | |
| ↺ Fit | |
| </button> | |
| {method === 'ml' && ( | |
| <div className="flex items-center gap-2 text-[10px] text-text-secondary"> | |
| <span className="font-medium">Bootstrap:</span> | |
| {[['≥90', '#4ADE80'], ['70–89', '#a3e635'], ['50–69', '#fb923c'], ['<50', '#f87171']] | |
| .map(([label, colour]) => ( | |
| <span key={label} className="flex items-center gap-0.5"> | |
| <span style={{ color: colour }}>■</span> {label} | |
| </span> | |
| ))} | |
| </div> | |
| )} | |
| <div className="flex gap-2 ml-auto"> | |
| {[ | |
| { label: 'SVG', fn: handleExportSVG }, | |
| { label: 'PNG', fn: handleExportPNG }, | |
| { label: 'Newick', fn: handleExportNewick }, | |
| ].map(({ label, fn }) => ( | |
| <button key={label} onClick={fn} | |
| className="text-xs px-3 py-1.5 rounded-lg border border-glass-border | |
| text-text-secondary hover:text-text-primary hover:border-accent-cyan/40 transition-colors"> | |
| ↓ {label} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Collapse controls */} | |
| <div className="flex gap-2 text-[11px]"> | |
| <button onClick={expandAll} | |
| className="px-2.5 py-1 rounded border border-glass-border text-text-secondary hover:text-text-primary transition-colors"> | |
| Expand all | |
| </button> | |
| <button onClick={collapseAllInternal} | |
| className="px-2.5 py-1 rounded border border-glass-border text-text-secondary hover:text-text-primary transition-colors"> | |
| Collapse all | |
| </button> | |
| <span className="text-text-secondary self-center opacity-60"> | |
| {hoveredId !== null ? 'Hover: path highlighted · ' : ''} | |
| Double-click internal node to collapse/expand | |
| </span> | |
| </div> | |
| {/* SVG */} | |
| <div className="bg-surface-1 rounded-xl border border-glass-border overflow-hidden select-none" | |
| style={{ maxHeight: '75vh' }}> | |
| <svg | |
| ref={svgRef} | |
| viewBox={layout === 'rectangular' | |
| ? `0 0 ${SVG_W} ${treeData.height}` | |
| : `0 0 ${CIRC_SIZE} ${CIRC_SIZE}`} | |
| width="100%" | |
| style={{ maxHeight: '70vh', background: treeCanvas, cursor: isDragging ? 'grabbing' : 'grab' }} | |
| xmlns="http://www.w3.org/2000/svg" | |
| onMouseDown={handleMouseDown} | |
| onMouseMove={handleMouseMove} | |
| onMouseUp={handleMouseUp} | |
| onMouseLeave={handleMouseUp} | |
| onClick={handleSvgClick} | |
| > | |
| <rect width="100%" height="100%" fill={treeCanvas} /> | |
| <g transform={`translate(${transform.x}, ${transform.y}) scale(${transform.scale})`}> | |
| {layout === 'rectangular' ? ( | |
| <RectangularTree | |
| nodes={treeData.nodes} | |
| svgH={treeData.height} | |
| maxDepth={treeData.maxDepth} | |
| pathSet={pathSet} | |
| selectedId={selectedId} | |
| hoveredId={hoveredId} | |
| onNodeHover={handleNodeHover} | |
| onNodeClick={handleNodeClick} | |
| onNodeDoubleClick={handleNodeDoubleClick} | |
| /> | |
| ) : ( | |
| <CircularTree | |
| nodes={treeData.nodes} | |
| pathSet={pathSet} | |
| selectedId={selectedId} | |
| hoveredId={hoveredId} | |
| onNodeHover={handleNodeHover} | |
| onNodeClick={handleNodeClick} | |
| onNodeDoubleClick={handleNodeDoubleClick} | |
| /> | |
| )} | |
| </g> | |
| </svg> | |
| </div> | |
| <p className="text-text-secondary text-xs"> | |
| {treeData.nodes.filter(n => n.children.length === 0).length} taxa ·{' '} | |
| {sequenceType === 'protein' ? 'protein' : 'nucleotide'} sequences | |
| </p> | |
| {/* Selected node info panel */} | |
| {selectedNode && ( | |
| <NodeInfoPanel node={selectedNode} allNodes={treeData.nodes} /> | |
| )} | |
| {alignment && ( | |
| <div className="border border-glass-border rounded-xl overflow-hidden"> | |
| <button | |
| onClick={() => setShowAln(v => !v)} | |
| className="w-full flex items-center justify-between px-4 py-3 | |
| text-text-secondary hover:text-text-primary transition-colors text-sm"> | |
| <span>Multiple Sequence Alignment</span> | |
| <span className="text-xs opacity-60">{showAlignment ? '▲ hide' : '▼ show'}</span> | |
| </button> | |
| {showAlignment && ( | |
| <> | |
| {alignmentStats && <AlignmentStatsBar stats={alignmentStats} className="px-4 pt-3" />} | |
| <div className="p-4"> | |
| <AlignmentBlock alnFasta={alignment} className="max-h-60" /> | |
| </div> | |
| </> | |
| )} | |
| </div> | |
| )} | |
| <div className="border border-glass-border rounded-xl overflow-hidden"> | |
| <button | |
| onClick={() => setShowRaw(v => !v)} | |
| className="w-full flex items-center justify-between px-4 py-3 | |
| text-text-secondary hover:text-text-primary transition-colors text-sm"> | |
| <span>Raw Newick</span> | |
| <span className="text-xs opacity-60">{showRaw ? '▲ hide' : '▼ show'}</span> | |
| </button> | |
| {showRaw && ( | |
| <pre className="overflow-auto p-4 text-[11px] font-mono text-text-secondary | |
| bg-surface-1 max-h-40 whitespace-pre-wrap break-all"> | |
| {newick} | |
| </pre> | |
| )} | |
| </div> | |
| </div> | |
| ) | |
| } | |