Draw the tree the branch list can only spell out
The Branches panel says which lines exist. It cannot say where they parted or how much story each one is, because those are the two numbers `GET /branches` already answers and a list has nowhere to put them. A ⌗ See the tree button opens a map: one horizontal lane per branch, running from the moment it left its parent to the moment it ends, joined to the parent by an elbow at the fork. The horizontal axis is the story's own clock, so two lanes at the same x are at the same moment and a short branch reads as short. This is a branch map, not the per-node map SP7 refused, and that is the whole reason it was cheap. Lanes are bounded by branch count, not node count, so the 600-node windowing problem never arrives. It reads the single request the rail already made and nothing else. `branches.js` holds the tree maths and `BranchMap.jsx` the drawing. Play.jsx gives up its private copies of branchLabel and orderBranches: the panel and the map now label and order a branch through the same functions, so a branch cannot be called two things by the two views. The three operations stay in BranchPanel and are passed down, and `run` answers whether it worked so neither view clears a half-typed name on a refusal. Three things came out of driving it, none of which a test could have seen. `clientWidth` counts the canvas padding the ResizeObserver leaves out, so the first paint drew an svg 24px wider than its box — and the observer's initial observation never arrived here, so dropping the seed left the map never drawing at all. Both are needed and the seed subtracts the padding. Only the name was being clipped, not the meta line under it, so a late fork ran its text off the right edge; both are clipped now, and a lane starting in the right third hangs its labels back over the fork, where its own band guarantees nothing to collide with. And the delete rule lived in the server and in the map but not in the list, which offered Delete on a branch the head was forked from and answered with a toast from the server's 400. `headLineage` is the client's copy of that rule and both views use it; the server stays the authority. `tools/tree_fixture.py` is the counterpart to `tools/branch_fixture.py` — four branches at three fork depths, one forked off a fork. With no frontend test runner it is the whole of the map's coverage, and it exists to be looked at. Nothing in the backend changed; the 440 tests pass unmoved. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DfMCsN1KBLsTqMkj5hSgrY
This commit is contained in:
parththakkar106
co-authored by
Claude Opus 5
Claude Opus 5
parent
ff190d2453
commit
c8e081e9d6
@@ -0,0 +1,282 @@
|
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { CORNER, PAD, ROW_H, branchLabel, headLineage, layoutTree, momentTicks } from './branches'
|
||||
|
||||
// The story tree, drawn.
|
||||
//
|
||||
// The Branches panel lists every line; this draws the same list as lanes on one
|
||||
// clock, which is the thing a list cannot say — *where* two tellings parted, and
|
||||
// how much story each of them is. A lane runs from the moment its branch left
|
||||
// its parent to the moment it ends, so length is story and a fork is a corner.
|
||||
//
|
||||
// It reads nothing of its own. Everything here comes from the `GET /branches`
|
||||
// the panel already made, and every operation goes back through the panel's, so
|
||||
// there is one copy of the rules and one thing to keep honest.
|
||||
//
|
||||
// Portalled to <body>: this is opened from inside `.side-panel`, whose panel-in
|
||||
// animation (fill mode `both`) makes it the containing block for position:fixed
|
||||
// children — an overlay rendered in place would be trapped in the 420px panel
|
||||
// and clipped by its overflow. Same trap for anything opened from a drawer.
|
||||
|
||||
// A label is drawn into the space its lane leaves. `perChar` is the average
|
||||
// width of the face it is drawn in — about 7px for the 15px serif a name uses
|
||||
// and 5px for the 10.5px UI face under it. Overshooting only costs an ellipsis,
|
||||
// so this is deliberately a guess rather than a measurement pass.
|
||||
function clipToWidth(text, px, perChar = 7) {
|
||||
const max = Math.max(4, Math.floor(px / perChar))
|
||||
return text.length <= max ? text : `${text.slice(0, max - 1)}…`
|
||||
}
|
||||
|
||||
export function BranchMap({ branches, busyId, onSwitch, onRename, onDelete, onClose }) {
|
||||
const [selectedId, setSelectedId] = useState(() => branches.find((b) => b.is_head)?.id ?? null)
|
||||
const [renameText, setRenameText] = useState(null) // null = not renaming
|
||||
const [confirming, setConfirming] = useState(false)
|
||||
const [width, setWidth] = useState(0)
|
||||
const boxRef = useRef(null)
|
||||
|
||||
const { lanes, maxDepth, height } = useMemo(() => layoutTree(branches), [branches])
|
||||
const lineage = useMemo(() => headLineage(branches), [branches])
|
||||
|
||||
|
||||
// The map is drawn in real pixels rather than scaled from a fixed viewBox,
|
||||
// so a narrow window gets a narrower map and not smaller writing.
|
||||
//
|
||||
// Both halves are load-bearing, and each covers the other's gap. The seed
|
||||
// measures the *content* box, because that is what the observer reports and
|
||||
// `clientWidth` is not — it counts the canvas padding, so seeding from it
|
||||
// drew an svg 24px wider than the box it sits in and the map ran off the
|
||||
// right edge. The observer then keeps up with a window being dragged; it
|
||||
// cannot be the only source, because its initial observation is not
|
||||
// guaranteed to arrive and without the seed the map never drew at all.
|
||||
useLayoutEffect(() => {
|
||||
const el = boxRef.current
|
||||
if (!el) return undefined
|
||||
const style = getComputedStyle(el)
|
||||
const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight)
|
||||
setWidth(el.clientWidth - padding)
|
||||
const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width))
|
||||
observer.observe(el)
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
// A branch can vanish under the selection — deleting one takes everything
|
||||
// forked from it, which is more rows than the one that was clicked.
|
||||
const selected = branches.find((b) => b.id === selectedId) || null
|
||||
useEffect(() => {
|
||||
if (!selected) {
|
||||
setSelectedId(branches.find((b) => b.is_head)?.id ?? null)
|
||||
setRenameText(null)
|
||||
setConfirming(false)
|
||||
}
|
||||
}, [selected, branches])
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e) => {
|
||||
if (e.key !== 'Escape') return
|
||||
// Escape backs out of the smallest thing that is open, so it never
|
||||
// throws away a half-typed name along with the map.
|
||||
if (renameText !== null) setRenameText(null)
|
||||
else if (confirming) setConfirming(false)
|
||||
else onClose()
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [renameText, confirming, onClose])
|
||||
|
||||
const W = Math.max(width, 320)
|
||||
const span = Math.max(maxDepth, 1)
|
||||
// Ticks are spaced by the room there is to print them in, not by a constant.
|
||||
const ticks = momentTicks(maxDepth, Math.max(3, Math.round(W / 160)))
|
||||
const x = (depth) => PAD.left + (depth / span) * (W - PAD.left - PAD.right)
|
||||
const laneY = (row) => PAD.top + row * ROW_H + 30
|
||||
|
||||
const pick = (branch) => {
|
||||
setSelectedId(branch.id)
|
||||
setRenameText(null)
|
||||
setConfirming(false)
|
||||
}
|
||||
|
||||
const busy = busyId !== null && busyId !== undefined
|
||||
// The server refuses to delete the line being read or anything it was forked
|
||||
// from; saying so on the button is friendlier than a toast after the click.
|
||||
const isLoadBearing = selected ? lineage.has(selected.id) : false
|
||||
const isRoot = selected ? selected.parent_branch_id === null : false
|
||||
|
||||
// Each of these resolves to whether it worked. The panel owns the request
|
||||
// and reports its own failures, so all this has to decide is whether to put
|
||||
// the editor away — clearing a half-typed name on a rename that was refused
|
||||
// would throw away the only copy of it.
|
||||
const save = async () => { if (await onRename(selected, renameText)) setRenameText(null) }
|
||||
const drop = async () => { if (await onDelete(selected)) setConfirming(false) }
|
||||
|
||||
return createPortal(
|
||||
<div className="modal-overlay branch-map-overlay" onClick={onClose}>
|
||||
<div className="branch-map" onClick={(e) => e.stopPropagation()}
|
||||
role="dialog" aria-modal="true" aria-label="The story so far">
|
||||
<div className="branch-map-header">
|
||||
<h2>The story so far</h2>
|
||||
<span className="branch-map-scale">
|
||||
{branches.length} {branches.length === 1 ? 'line' : 'lines'} · {maxDepth + 1} moments
|
||||
</span>
|
||||
<button type="button" className="branch-map-close" onClick={onClose} aria-label="Close">✕</button>
|
||||
</div>
|
||||
|
||||
<div className="branch-map-canvas" ref={boxRef}>
|
||||
{width > 0 && (
|
||||
<svg className="branch-map-svg" width={W} height={height}
|
||||
role="img" aria-label={`${branches.length} branches over ${maxDepth + 1} moments`}>
|
||||
{/* The clock the whole map is read against. */}
|
||||
{ticks.map((depth) => (
|
||||
<g key={depth} className="bm-tick">
|
||||
<line x1={x(depth)} y1={PAD.top - 16} x2={x(depth)} y2={height - PAD.bottom} />
|
||||
<text x={x(depth)} y={PAD.top - 24} textAnchor="middle">{depth + 1}</text>
|
||||
</g>
|
||||
))}
|
||||
|
||||
{lanes.map((lane) => {
|
||||
const child = lane.branch.parent_branch_id !== null && lane.parentRow !== null
|
||||
const forkX = x(lane.from)
|
||||
const start = child ? forkX + CORNER : x(lane.from)
|
||||
// A branch forked but not yet written past still gets a stub,
|
||||
// or it would be a corner leading to nothing.
|
||||
const end = Math.max(x(lane.to), start + 8)
|
||||
const y = laneY(lane.row)
|
||||
const b = lane.branch
|
||||
const label = branchLabel(b)
|
||||
const meta = `${b.own_actions} of its own`
|
||||
+ (b.parent_branch_id !== null ? ` · left at ${b.fork_depth + 1}` : '')
|
||||
+ ` · ends at ${b.depth + 1}`
|
||||
// A lane that leaves late has no room to write in to its right,
|
||||
// so its labels hang back over the fork instead. The row is its
|
||||
// own band with nothing else in it, and the alternative is text
|
||||
// running off the edge — which is what a narrow window did.
|
||||
const roomRight = W - PAD.right - start
|
||||
const flip = roomRight < 170 && start - PAD.left > roomRight
|
||||
const textX = flip ? start - 4 : start
|
||||
const room = flip ? start - 4 - PAD.left : roomRight
|
||||
const classes = [
|
||||
'bm-lane',
|
||||
b.is_head ? 'here' : '',
|
||||
b.id === selectedId ? 'picked' : '',
|
||||
].join(' ')
|
||||
return (
|
||||
<g key={b.id} className={classes}
|
||||
role="button" tabIndex={0}
|
||||
aria-label={`${label}, ${b.own_actions} of its own${b.is_head ? ', the line you are reading' : ''}`}
|
||||
onClick={() => pick(b)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(b) }
|
||||
}}>
|
||||
{/* Full-width hit area: the lane itself is 3px tall and a
|
||||
fork late in a long story is a very small target. */}
|
||||
<rect className="bm-hit" x={0} y={PAD.top + lane.row * ROW_H}
|
||||
width={W} height={ROW_H} />
|
||||
|
||||
{child && (
|
||||
<path className="bm-fork"
|
||||
d={`M ${forkX} ${laneY(lane.parentRow)} L ${forkX} ${y - CORNER} Q ${forkX} ${y} ${forkX + CORNER} ${y}`} />
|
||||
)}
|
||||
{child && <circle className="bm-fork-dot" cx={forkX} cy={laneY(lane.parentRow)} r={3.5} />}
|
||||
|
||||
<line className="bm-line" x1={start} y1={y} x2={end} y2={y} />
|
||||
|
||||
{/* The tip: a diamond for the line being read, so where you
|
||||
are standing is findable without reading a word. */}
|
||||
{b.is_head ? (
|
||||
<rect className="bm-tip" x={end - 5} y={y - 5} width={10} height={10}
|
||||
transform={`rotate(45 ${end} ${y})`} />
|
||||
) : (
|
||||
<circle className="bm-tip" cx={end} cy={y} r={4.5} />
|
||||
)}
|
||||
|
||||
<text className="bm-name" x={textX} y={y - 12}
|
||||
textAnchor={flip ? 'end' : 'start'}>
|
||||
{clipToWidth(label, room)}
|
||||
</text>
|
||||
<text className="bm-meta" x={textX} y={y + 19}
|
||||
textAnchor={flip ? 'end' : 'start'}>
|
||||
{clipToWidth(meta, room, 5)}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{branches.length === 1 && (
|
||||
<p className="branch-map-hint">
|
||||
One thread so far. Retry a turn, then write on from an attempt the
|
||||
story moved past — that is what makes a second line.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{selected && (
|
||||
<div className={`branch-map-detail ${selected.is_head ? 'here' : ''}`}>
|
||||
<div className="bmd-head">
|
||||
{renameText !== null ? (
|
||||
<input
|
||||
className="branch-rename"
|
||||
autoFocus
|
||||
maxLength={80}
|
||||
value={renameText}
|
||||
onChange={(e) => setRenameText(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') save()
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span className="branch-name">{branchLabel(selected)}</span>
|
||||
)}
|
||||
{selected.is_head && <span className="branch-here">reading</span>}
|
||||
</div>
|
||||
|
||||
<div className="branch-meta">
|
||||
{selected.own_actions} of its own
|
||||
{selected.parent_branch_id !== null && ` · forked at moment ${selected.fork_depth + 1}`}
|
||||
{` · ends at moment ${selected.depth + 1}`}
|
||||
</div>
|
||||
|
||||
{confirming ? (
|
||||
<div className="branch-confirm">
|
||||
<span>Delete this branch and everything forked from it?</span>
|
||||
<button type="button" className="danger" disabled={busy} onClick={drop}>
|
||||
Delete
|
||||
</button>
|
||||
<button type="button" onClick={() => setConfirming(false)}>Keep</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="branch-tools">
|
||||
{!selected.is_head && (
|
||||
<button type="button" disabled={busy}
|
||||
onClick={() => onSwitch(selected)}>Switch to this line</button>
|
||||
)}
|
||||
{renameText !== null ? (
|
||||
<>
|
||||
<button type="button" disabled={busy} onClick={save}>Save</button>
|
||||
<button type="button" onClick={() => setRenameText(null)}>Cancel</button>
|
||||
</>
|
||||
) : (
|
||||
<button type="button" disabled={busy}
|
||||
onClick={() => setRenameText(selected.name || '')}>Rename</button>
|
||||
)}
|
||||
{/* The root holds the turns every other branch borrows, and the
|
||||
server refuses it — so it is not offered at all. A branch
|
||||
the head stands on is offered, and says why it cannot go. */}
|
||||
{!isRoot && (
|
||||
<button type="button" className="danger"
|
||||
disabled={busy || isLoadBearing}
|
||||
title={isLoadBearing
|
||||
? 'The line you are reading is built on this one. Switch away first.'
|
||||
: undefined}
|
||||
onClick={() => setConfirming(true)}>Delete</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user