2026-04-22 updated 2026-08-31 ● work in progress 260422-zoomlayout

Zoom layout

Pre-computed zoom states that expand composite events in place — so one ipm graph stays readable from a coarse overview all the way down to full detail.

Collapsed 'around' zoom state: a handful of composite events. — **around**coarse overview

Intermediate zoom state: one composite event expanded into its sub-events inside a container. — **around + detail**one event expanded in place

Fully expanded zoom state: the nested sub-events held inside a zoomlayout container shell. — **detail**fully expanded, in a container

scroll around → around + detail → detail

Open a live canvas — self-contained, runs offline from disk

murder mystery A murder mystery, zoomable → Professor Plum murders Miss Scarlet — open the murder to zoom into its sub-events. t-shirt swap Patrick swaps a t-shirt → One nested event, opened step by step — 6 zoom states.

The idea

An ipm story is nested: a coarse event hides a whole leads-to chain of sub-events, each of which hides more. Rather than redraw the graph at every step, the layout pre-computes a handful of zoom states and grows the diagram outward — expanding a chosen composite event into a container of its parts while everything around it holds its place.

The toolchain

.ipmt

An ipm graph in text form — the source story.

zoomlayout-gen

Compiles the graph into a .zoomlayout.json: a set of zoom states and node positions. Zoom inputs can be given explicitly or auto-detected from the graph.

ipm-server canvas

Serves the states as pre-rendered SVG on an infinite canvas, with live node expansion via a small API.

On the canvas

Scroll to move between pre-computed states (around ↔ around + detail ↔ detail).
Click a composite event to zoom into its expanded state.
Click an expandable node (+ badge) to pull in hidden neighbours on demand, or collapse them again.
Drag to pan; Esc or the breadcrumb to step back.
A box with a 1/2 badge is one of several places the same thing is drawn. A participant used all over a diagram would otherwise sit at the end of a line crossing the picture; instead it is drawn beside each group of events that uses it, and a double-press walks the places. The graph is unchanged — one node, drawn twice, which the badge says out loud. Neither canvas here shows one: both are small enough that nothing is ever far away, and the pass leaves a small picture alone — on one of these it split a concept's own children across two boxes, which reads as a fork rather than a second place. The corpus gallery has five diagrams big enough to need it.

Offline export

A whole canvas can be baked into a single self-contained .zoom.html — every zoom state, node position and pre-rendered SVG inlined, no server required. Open it straight from disk and the scroll / click / expand interactions still work fully offline. Every model in the SSTorytime corpus links its own .zoom.html export.

The previews above are three of the pre-rendered states for the murder-full example. This is early sandbox tooling — the layout, state model, and canvas are all still moving. Expect rough edges.

← back to the lab