Skip to content
uwwoe docs

The Canva

The Canva is the full-screen projection of the universal course graph. Switch to it from the atlas toolbar (or land on it directly via URL).

What it shows

Each node is a course or a credential. Each edge is one of:

  • Prerequisite — A is required before B.
  • Antirequisite — A and B may not both count.
  • Cross-listing — A and B are the same course under different subject codes.
  • Requirement-of — A course satisfies one option within a credential requirement.

Visual layout is generated server-side for the dense full-universe view (per ADR 0026); the in-browser Rust/WASM worker handles small active subgraphs and interaction-local jobs like expand-node ripples.

Reading the overlay

When your Kanban contains entries, the Canva re-tints:

  • Taken courses → “taken” hue, full opacity.
  • Planned courses → “planned” hue.
  • Newly reachable courses → “unlocked” hue (their prerequisites are fully covered by your Kanban).
  • Antirequisite collisions → flagged red with a status badge.

The overlay is purely visual. Academic truth comes from backend academic_result payloads — the Canva can highlight a course as “reachable” only because the backend already computed that the prerequisites are satisfied. See Frontend compute boundary (ADR 0021).

Interactions

  • Pan — drag empty canvas, or arrow keys.
  • Zoom — scroll / pinch, or + / −. Semantic zoom controls label density: zoom out and labels collapse to subject codes; zoom in and course titles appear.
  • Hover — surfaces course detail in the inspector panel. Dense hover uses a render-only path, not a full scene rebuild.
  • Click a node — selects it and routes the inspector to the course or credential detail page.
  • Focus a node (double-click or F) — recenters and dims everything not in its neighborhood.
  • Expand a node — temporarily layers its full neighborhood at higher detail without changing the global layout.

Performance and limits

The full universal Canva renders ~1,925 course nodes and several thousand edges. Performance characteristics:

  • WebGL baseline via Three.js. Optional WebGPU upgrade per ADR 0022 — absence of WebGPU never blocks the app.
  • Non-canvas fallback for browsers without WebGL: a structured list view (AtlasFallbackView) with the same source references and status badges.
  • Deterministic layout — identical inputs and seeds produce identical positions. Shareable view URLs reconstruct the exact frame.

Measured frame-time and responsiveness baselines for the 1,925-course universe live at Universal Canva performance baseline.

Graph bounds

Server-side graph views enforce default and hard-maximum bounds to keep response sizes reasonable. A request that exceeds the default bounds returns the result with graph_view_truncated set in warnings; a request that exceeds the hard maximum returns 400 bad_request. See Graph views API for the numeric limits and the graph-view response spec.

Shareable view state

The Canva’s view state — view mode, selected course, target credential, selected node — is encoded in the URL. Share the URL and your reviewer sees the same frame.

What the URL never carries:

  • Your state_token.
  • Your raw student state (grades, notes, term assignments).

A shared URL only reconstructs the public view; the recipient’s Kanban overlay (if any) is their own.