Qflow

Narrative

The mock data system had served its purpose — flat IP arrays with consistent format. But it couldn't represent what real traffic looks like: typed actors with names, URLs, tags, and topology context. The data module system replaces IPs with rich actor objects curated from qmap.

The devtools scenario bridges old and new: it wraps raw IP-based flows in actor objects, so SSE traffic from qtap integrates naturally. The generator contract stayed the same — LiveFeed's {next()} interface is generator-agnostic, so c5–c9 infrastructure carried forward without changes.

Narrative

The vision: qflow as bird's-eye view in qtap dev-tools, dev-tools as detail inspector, both consuming the same production SSE stream. This cycle built the adapter layer and standalone experiment — without requiring changes to the dev-tools app itself.

The SseFeed adapts qtap's SSE events into the same onBatch interface that LiveFeed uses. Switching between mock and live is a single toggle; the rest of the visualization is unchanged. The integration design document maps out how Traffic.vue would consume existing Pinia stores in the dev-tools app, with no SseFeed needed there.

Narrative

Label design had been a secondary concern — hardcoded gray-blue text with no positioning control. This cycle treated labels as a full design system: any direction, any offset, any color, with a rounded background that makes labels readable against any node color.

The dev-controls component extraction was a byproduct worth noting. Five components replaced 52 instances of repeated toolbar markup across App.vue. ControlSlider alone accounted for 29 replacements. The experiment harness became dramatically more maintainable, which matters as the controls panel grows with each cycle.

Narrative

C6 explored pulse smoothness and directionality. C7 addressed a more pressing problem: as nodes grow with activity, layout becomes a mess of overlapping circles. The growth-based relayout system accumulates radius delta and fires a corrective relayout once the visual disorder crosses a threshold — throttled by a cooldown to avoid thrashing during bursts.

The layout interface refactor was the architectural win: computePositions returns pure data, completely decoupled from rendering. This separation enables composing layouts (a ZonedLayout with ingress arc, internal cluster, and egress arc is documented as a stub) and makes testing easier.

Narrative

The leap from static mock data to a live streaming model required a new architecture. LiveFeed wraps a traffic generator and emits batches on a configurable timer. NodeRegistry tracks each source and destination independently — request counts drive node size, last-seen timestamps enable decay.

Auto-zoom was the visual payoff: as the scene evolves, fitToContent() keeps everything visible without manual intervention. The high-res label rendering at 3x resolution ensures text stays readable even when the viewport scales up. Together these made the visualization feel genuinely reactive rather than just animated.

Narrative

Blob shapes use simplex noise to deform a circle, then smooth the result with Catmull-Rom-to-bezier curve conversion. The breathing animation applies noise3D to vertex positions continuously — each node undulates slightly, giving the scene an organic, living quality.

Squircles (parametric superellipse) offered a middle ground between circles and squares, with adjustable roundness. The shape class hierarchy made all five shapes swappable at runtime. Performance was kept in check by throttling the breathing animation to every 3rd frame.

Narrative

Before this cycle, every node was a circle. After it, nodes encode three dimensions of meaning: shape (entity type), color (internal/external/source), and favicon (specific service identity). The visualization went from abstract to informative.

Favicon loading was the hardest problem. PixiJS 8's Assets.load() fails on blob and query URLs from Google's favicon proxy. The fix: a custom DecorationImage class hierarchy using the browser's native Image() constructor, img.decode() for async loading, then PIXI.Texture.from(img) to bridge into PixiJS.

Narrative

Sources on the left in a grid, destinations on the right in an arc — the spatial metaphor immediately made traffic patterns readable. Power-law distribution in the mock data meant a few connections dominated visually, matching real-world network traffic patterns.

Three grid dimension math bugs were found and fixed: column formula bias, cell spacing miscalculation, and off-by-one centering. Layout math is deceptively tricky when it needs to look effortless.

Narrative

Qflow was transplanted from an earlier prototype. The first two cycles stabilized the foundation — fixing a PIXI app leak that caused canvas duplication and a factory cache mismatch that broke node rendering.

The PixiJS 8 render group discovery was the key learning: dynamically-added children require isRenderGroup = true on their parent container, or transforms are cached incorrectly. This fix unblocked all subsequent visual work.