Four separate legibility defects on the XY map, all visible in the walkthrough recording. Grouped because they share one renderer and one fix pass. Remapping is #107.
1. The scale bar reports millimetres on a micron map
formatScale promotes above 1000 µm — if (um >= 1000) return … + ' mm' (devices.js:1122-1125) — and the fence-sized viewBox always snaps the 120 px bar to ≥1000 µm, so the bar is effectively always in mm. The recording shows 1 mm SCALE and later 2 mm SCALE against axes ticked -2500 … 1000 in µm.
The call settled on microns throughout, matching the Micro-Manager stage readout. Magdalena, 10:54: "maybe we could indicate that somewhere, change the scale bar… or you can put a thousand microns, then it's probably clear that the other things were also microns."
Fix: delete formatScale and inline its µm branch at the one call site (devices.js:1120). Second mm site if "no mm" is taken literally: devices.js:719.
Also: the map tab's tooltip reads XY Map (m) — metres — while the XY STAGE card in the same panel is labelled micrometres. Wrong by 10⁶.
2. The map never fits its container
preserveAspectRatio="xMidYMid meet" (index.html:781) with a viewBox derived from data extents padded 8% per axis (devices.js:545-568). The fence is ~3754 × 2782 µm, aspect ≈1.35, while the panel is far wider — so it letterboxes, leaving ~300 px of dead gutter each side (the recording shows the plot occupying x≈534–1083 of a panel spanning 238–1378). The only ResizeObserver on the SVG calls updateScalebar() only (devices.js:270-272), so a resize never re-fits.
Fix: in computeViewBox, grow the shorter dimension to match the container's aspect ratio about the centre, and change the observer callback to recompute and redraw.
3. No zoom-to-fit; embryos render as a 40 px cluster
computeViewBox (devices.js:518-540) unions the whole firmware fence with the live XY and every embryo — embryos are only ever added to that union, never fitted alone. So four embryos spanning ~230 × 200 µm sit in under 1% of the box. There is no zoom or pan: the only listener is embryo pick-up/drop (devices.js:2504), and the reusable ZoomPan used by the camera stages is not wired here.
Magdalena's related ask (10:54, out of scope for #107): define centre and box size in microns rather than dragging the large green box, "because this green box is rather large for the whole thing."
4. Origin label collides; tick labels are sized in data units
renderOrigin plants a 0,0 label span*0.0168 ≈ 63 µm from the origin (devices.js:773-779) while the stage marker at the same point has radius ≈53 µm — so with the stage near the origin the glyph lands on the marker. The axis 0 ticks already carry that information; delete the label.
Tick font size is span * 0.018 in SVG user units (devices.js:840-841), so on-screen size scales with panel height and data extent — roughly 14 px in a 600 px panel, 7 px in a 300 px one, with no pixel floor. The same span-proportional sizing affects the coverslip, zone and origin labels. Placement also runs the X labels along the bottom edge and Y labels along the left, exactly where the opaque overlay panels sit.
Fix: one umPerPx() helper next to updateScalebar (which already computes that factor) and a Math.max(span*0.018, 11 * umPerPx()) floor, adopted by all four label sites; then move the Y-tick run or make the overlays transparent.
Evidence: 2026-08-07 walkthrough, 07:00–11:10, 41:30, 44:00. Partially discussed on the call, not previously captured as issues.
Four separate legibility defects on the XY map, all visible in the walkthrough recording. Grouped because they share one renderer and one fix pass. Remapping is #107.
1. The scale bar reports millimetres on a micron map
formatScalepromotes above 1000 µm —if (um >= 1000) return … + ' mm'(devices.js:1122-1125) — and the fence-sized viewBox always snaps the 120 px bar to ≥1000 µm, so the bar is effectively always in mm. The recording shows1 mm SCALEand later2 mm SCALEagainst axes ticked-2500 … 1000in µm.The call settled on microns throughout, matching the Micro-Manager stage readout. Magdalena, 10:54: "maybe we could indicate that somewhere, change the scale bar… or you can put a thousand microns, then it's probably clear that the other things were also microns."
Fix: delete
formatScaleand inline its µm branch at the one call site (devices.js:1120). Second mm site if "no mm" is taken literally:devices.js:719.Also: the map tab's tooltip reads
XY Map (m)— metres — while theXY STAGEcard in the same panel is labelledmicrometres. Wrong by 10⁶.2. The map never fits its container
preserveAspectRatio="xMidYMid meet"(index.html:781) with a viewBox derived from data extents padded 8% per axis (devices.js:545-568). The fence is ~3754 × 2782 µm, aspect ≈1.35, while the panel is far wider — so it letterboxes, leaving ~300 px of dead gutter each side (the recording shows the plot occupying x≈534–1083 of a panel spanning 238–1378). The onlyResizeObserveron the SVG callsupdateScalebar()only (devices.js:270-272), so a resize never re-fits.Fix: in
computeViewBox, grow the shorter dimension to match the container's aspect ratio about the centre, and change the observer callback to recompute and redraw.3. No zoom-to-fit; embryos render as a 40 px cluster
computeViewBox(devices.js:518-540) unions the whole firmware fence with the live XY and every embryo — embryos are only ever added to that union, never fitted alone. So four embryos spanning ~230 × 200 µm sit in under 1% of the box. There is no zoom or pan: the only listener is embryo pick-up/drop (devices.js:2504), and the reusableZoomPanused by the camera stages is not wired here.Magdalena's related ask (10:54, out of scope for #107): define centre and box size in microns rather than dragging the large green box, "because this green box is rather large for the whole thing."
4. Origin label collides; tick labels are sized in data units
renderOriginplants a0,0labelspan*0.0168≈ 63 µm from the origin (devices.js:773-779) while the stage marker at the same point has radius ≈53 µm — so with the stage near the origin the glyph lands on the marker. The axis0ticks already carry that information; delete the label.Tick font size is
span * 0.018in SVG user units (devices.js:840-841), so on-screen size scales with panel height and data extent — roughly 14 px in a 600 px panel, 7 px in a 300 px one, with no pixel floor. The same span-proportional sizing affects the coverslip, zone and origin labels. Placement also runs the X labels along the bottom edge and Y labels along the left, exactly where the opaque overlay panels sit.Fix: one
umPerPx()helper next toupdateScalebar(which already computes that factor) and aMath.max(span*0.018, 11 * umPerPx())floor, adopted by all four label sites; then move the Y-tick run or make the overlays transparent.Evidence: 2026-08-07 walkthrough, 07:00–11:10, 41:30, 44:00. Partially discussed on the call, not previously captured as issues.