Repository navigation
Layouts: compact label chips on phones, hub placement in hierarchical, wires through cards #283
Description
Follow-up to #280 (automatic layouts leave room for relationship labels). That PR makes labels show whenever card titles show (zoom ≥ 0.34, the cutoff #279 uses for card titles), frames graphs of up to 60 items whole down to that zoom after Organize and in the hierarchical layout, and checks every label at the camera the app rests on (tests/e2e/journeys/organize-labels.spec.ts). Three things it leaves undone, with the numbers measured there.
1. Compact label chips on a phone
A 390 px phone at the 0.34 label cutoff is about 1150 graph units wide. A label keeps its 14 px screen size, so at 0.34 each one needs about three times its 100% room. The twelve-item launch checklist from the journey (the hub "Launch plan" with seven neighbours, fifteen relationships of mixed types) cannot fit there with every label readable. Even the old organizer, with no label room at all, frames it whole only at 0.33 on desktop and 0.25 on an iPhone. On iPhone the journey therefore checks the launch checklist without requiring an edge with both cards on screen (the test carries a limit annotation pointing here). The camera rests on the hub at 0.34.
Proposal: below a zoom, or on a narrow screen, draw each relationship as an icon chip (the type's icon in a small pill, about 24 px) with the full label on tap or hover. That needs a quarter of the room, so a twelve-item graph fits on a phone. Drop that exception once it does.
2. Hub placement in the hierarchical layout
The hierarchical rows put prerequisites first, so a hub that depends on many items lands at the bottom, and the rows spread wide to clear labels:
| Graph | Stage | Device | Zoom | Cards on screen | Layout area | Mean edge length |
|---|---|---|---|---|---|---|
| Launch checklist | hierarchical | Desktop | 0.34 | 5/12 | 41M | 5809 |
| Launch checklist | organized | Desktop | 0.34 | 10/12 | 9.5M | 1123 |
The camera then shows the top rows at the floor, without the hub. The unit test hierarchy area bound excludes this shape for that reason (see labelClearance.test.ts). Proposal: place the busiest item's row in the middle (dependents below, prerequisites above), and order each row to shorten wires before spreading rows apart.
3. Lines through or on top of cards
Wires are straight between card borders. Where three cards line up, one wire runs through the middle card, or two wires lie on top of each other. In the launch checklist, Press kit → Email campaign → Launch plan are collinear after Organize. The label audit catches labels hidden under cards, but nothing checks wires that cross cards. Proposal: add a wire-through-card count to tests/lib/edgeLabelAudit.ts (and the unit labelReport), then route such wires around the card (a bend, as parallel edges already do) or nudge the organizer to avoid collinear triples.
Also measured
The label-room search finds the closest zoom whose layout the camera still frames, with at most five layouts per click (withFramedRoom, FRAMED_STEPS), and it can leave a little more room than needed. Graphs over 60 items keep the plain layouts and the 0.65 Organize floor.
Activity
Tests: every relationship drawn, turned label outlines, hub reads on …
Phones keep the organized floor after Organize
mvalancy commentedon Nov 11, 2026
Two more findings from #280, recorded here instead of new issues.
Phones keep their floors for now
On a 390 px phone two compact cards and a label side by side do not fit at any zoom where the cards' titles still fit whole. #280 first framed a small graph whole on a phone down to 0.34, but there titles broke mid-word ("System coordinato r",
topology-organizationat 390 px in CI), and at 0.5 the hub card was 131 px wide where that test asks for 132. So after Organize a phone keeps dev's camera: the 0.65 floor, centred on the busiest item's neighbourhood, with label room for 0.65. The hierarchical layout keeps the phone's 0.5. Measured in the journey on iPhone after Organize: Welcome shows 2 of 4 cards and 1 edge with its label; the launch checklist shows 2 of 12 cards. Compact label chips (item 1 above) are what would let a phone frame a whole small graph.Card titles break mid-word between 0.34 and about 0.45
A compact card is at most 240 graph units wide and its title is kept at 14 px on screen, so below about 0.45 a long word no longer fits and
fitGraphTextbreaks it: "Design mockup s", "Set up analytic s", "Email campaig n" on the desktop launch checklist after Organize at 0.34. The renderer did this before #280 whenever a person zoomed out that far; Organize now rests there on desktops and tablets. Proposal: below the zoom where the longest word fits, shrink the title's font (down to the 11 px floor) or end it in an ellipsis instead of breaking a word, and add a check for broken words to the journeys' readability audit.mvalancy commentedon Nov 11, 2026
The mid-word title break noted above is fixed in #280 (63c8f28): card titles now break only at spaces, and a word wider than its line ends in "…". Phones keeping their floors and the other items here are unchanged.
mvalancy commentedon Nov 11, 2026
Left over from the second review of #280 (issuecomment-6797206661), not fixed there on purpose:
computeLabelRoomLayout), a row that edges leave for other rows does not wrap, so a hub with 20 dependents is 4828 units wide where dev's rows are 988 (above 60 cards fix(graph): relationship labels stay readable after Organize and in hierarchical #280 now uses dev's rows unchanged). Wrapping such a row puts cards on the edges to the wrapped part: in the unit shapes it hid labels in 12 cases, and in 6 when it wrapped only rows wider than the screen at 0.34. Staggered wraps, or compact label chips, are the way to wrap them without hiding labels.clearFreeCardscounts labels it never tried (finding 6): when its label checks run out, the labels not yet tried come back as hidden. Since fix(graph): relationship labels stay readable after Organize and in hierarchical #280's second round a move is kept only when it shows more labels, so this can no longer move a card, but it can still stop a useful one.labelClearanceexports are used only inside the module;SPREAD_CHECKScould default toLAYOUT_CHECKS;labelReportis test-only code in a production module; the renderer's label candidates carry adraggedflag intoplaceItemLabels.Keep dev's hierarchical layout at every size
mvalancy commentedon Nov 11, 2026
#280 now keeps dev's hierarchical layout at every size (the owner reported Organize and the force layout), so label room in the hierarchical layout belongs here, with rows that still wrap like dev's: an epic with 20 tasks must stay about 988 units wide, not 4828. This replaces the first bullet of the comment above.