Skip to content

RFC-006 — Porkchop plot mobile interaction model

Status · Decided TA anchor · §components/plan-screen Related PRD · PRD-002 Related ADR · ADR-018 (mobile-first) Closed by · ADR-023 (2026-04-28) Why this is an RFC · The porkchop plot is a 112×100 grid where each cell is ~3–4px. A finger covers ~44px. Direct tap-to-select is impossible at native size. The mobile interaction model is a genuine open question with three distinct approaches, each producing a different user experience.

The question

On desktop the porkchop plot is a dense colour grid — hover for a tooltip, click a cell to select a launch window. On mobile at 390px wide, each cell is ~3px. Touch interaction requires a fundamentally different approach.

Use cases

  • Mobile user wants to find the best launch window for a Mars mission
  • Mobile user wants to explore different departure/arrival combinations
  • Mobile user wants to select a specific window and fly it

Goals

  • The user can find and select a viable launch window on mobile
  • The interaction feels native — not a shrunken desktop experience
  • The educational value of the porkchop plot (seeing launch windows as coloured valleys) is preserved on mobile

Constraints

From ADR-018: mobile-first, 44px touch targets. From ADR-009: the fly screen needs a departure date and arrival date to initialise the trajectory.

Options

Option A — Pinch-to-zoom grid. The full porkchop plot is shown at native resolution. The user pinches to zoom in to a region of interest, then taps a cell at the zoomed scale. A mini-map in the corner shows position within the full grid.

Preserves the full porkchop experience on mobile. More complex to implement (zoom + pan on a canvas). Zoomed cells need larger labels. The educational overview (seeing the whole pattern) is preserved.

Option B — Dual date sliders. Replace the 2D grid with two sliders: departure date range and arrival date range. The best delta-v window within the selected ranges is highlighted automatically. The user narrows the sliders to explore. A simplified 1D cost graph shows the delta-v profile as sliders move.

Most mobile-native interaction. Lower implementation complexity. Educational loss: the 2D porkchop pattern — the thing that makes launch windows visually legible — is not shown. The user gets the answer without the insight.

Option C — Tap-to-explore with magnifier. The full plot is shown but too small to tap precisely. Tapping anywhere in the grid opens a magnifier bubble (like iOS text selection) showing a 5×5 cell region at large scale. The user slides their finger to navigate the magnifier, lifts to select. Standard mobile pattern for precise selection in dense content.

Good balance: preserves the full visual overview, mobile-native selection pattern, no zoom/pan complexity. The magnifier UX is familiar from iOS. Implementation is moderate complexity.

Proposed approach

Option C for v1 — magnifier pattern. Preserves the educational porkchop overview while enabling precise selection on mobile. Option A is the richer experience and a strong v2 candidate once the mobile baseline is established.

Desktop interaction unchanged: hover tooltip, click to select.

Alternatives considered

Option A — richest experience; higher implementation cost; deferred to v2. Option B — loses the porkchop visual; the educational core of PRD-002 is the colour pattern, not just the selected date; rejected.

Trade-offs

The magnifier is a familiar pattern but adds implementation complexity. The alternative (zoom/pan) is richer but adds more complexity. Option B is simpler but loses the educational core.

Open questions

  1. Should the magnifier show delta-v values numerically inside each enlarged cell?
  2. What happens when the user lifts their finger outside the plot area — cancel or select nearest cell?
  3. Should there be a "best window" auto-suggest button for users who don't want to explore manually?

Closing evidence

Mobile interaction tested on real iOS and Android devices. User can find and select a viable launch window without assistance. Available at Slice 3 gate.

How this closes

One ADR: the porkchop plot mobile interaction pattern for v1.

Orrery — architecture documentation · MIT · No tracking