Qmap

Narrative

Different consumers of QMap need fundamentally different configurations. A policy violation page needs a focused, non-interactive view highlighting specific actors. A dashboard needs the full interactive map. This cycle establishes the abstraction: the wrapper says what the data represents, QMap decides how to render it.

The policy violation view was the first real application: pass an array of dataflows with status: "violation" and QMap renders them immediately, colors the flows red, highlights the involved actors, dims everything else, and focuses the camera. Expression props — schema-driven live tuning of visual parameters — were built and parked for future experimentation.

Narrative

This was not an experiment cycle — it was a promotion cycle. No new features were invented. Instead, c14's battle-tested code was reorganized, cleaned, and wired into a props-driven Vue component that other projects can import and pass reactive data to.

The reactivity model is clean: props change → useSceneReactivity watches → LayoutEngine computes → SceneReconciler diffs → TransitionOrchestrator animates → camera fits. First load is a direct build; subsequent prop changes trigger animated reconciliation. Pending updates during active transitions are queued and applied after completion.

Narrative

The final experiment cycle added two actor types that reflect how modern networks actually work: AI agents making API calls to LLM providers, and users whose traffic patterns vary by role and department.

All prior cycles' achievements — layout engine, reconciler, transitions, entity system, composable architecture — carried forward without modification. The architecture was stable enough that adding new actor types was a matter of defining meshes and test scenarios, not structural changes.

Narrative

Built on c12's reconciler and layout system — both carried forward without modification. Group mode lets the same set of actors be viewed through different organizational lenses: topology (infrastructure hierarchy), geography (regional grouping), or custom groups.

Switching between modes triggers the 4-phase reconciler transition. Actors morph from one grouping to another with animated boundary reshaping. The architecture proved its composability — new features stack on existing systems.

Narrative

Before c12, changing the scene meant rebuilding it. The SceneReconciler computes diffs and orchestrates a 4-phase transition: departing actors exit, boundary rugs reshape, actors move to new positions, new actors enter. Each phase completes before the next begins.

This was the cycle that made Qmap production-viable. A pure diff engine means the visualization can respond to live data changes — actors appearing, disappearing, regrouping — without jarring scene resets. Tested with 300 actors and the transitions remained smooth.

Narrative

c9 attempted a dual layout system for infrastructure topology (Cloud → Region → Cluster → Namespace → Node → Pod) but the complexity was too high. c10 pivoted to a general-purpose pluggable layout engine — four strategies that can be swapped at runtime.

The key architectural insight from c11: layout math operates in virtual grid units, completely decoupled from Three.js rendering. This separation meant layout logic could be tested and iterated independently. The grid layout with bin packing was promoted to src/ as the first production-ready module.

Narrative

Before pitching or sharing the visualization, it needed to look deliberate. This cycle focused on curating scenes that showcased the design intent — enough actors to feel populated, flows that told a readable story, boundaries that framed without cluttering.

Swappable test data meant the same scene could demonstrate different network architectures without rebuilding from scratch. The screenshot tooling became the quality bar for subsequent cycles — if a scene didn't look good as a static capture, the design wasn't done.

Narrative

c4 explored semantic zoom and hierarchical decomposition, but pivoted to tag-based grouping in c5 — flat data with runtime queries proved more flexible than pre-built nested structures. The same actor can appear in different groupings without data duplication.

Camera focus (c6) and context morphing (c7) made the scene interactive. The camera system frames selected actors with smooth easing and can restore previous views. The morphing transitions between flat and 3D perspectives were satisfying but exposed the need for a single animation coordinator.

Narrative

Three cycles in two days established the foundation: semantic shapes that encode meaning at a glance, animated data flows between actors, and boundary zones that group without dominating. The core question — "what's talking to what, and what boundaries does that traffic cross?" — was answerable from the first render.

Vendor favicons required a Vite proxy plugin to solve CORS. DashFlow's GPU-accelerated approach was validated as the production path. The OOP entity architecture proved solid enough to carry through every subsequent cycle without modification.