Description

In the network graph, protocol colour mode encodes each edge's protocol as its stroke colour, and volume colour mode encodes totalBytes as a heat ramp — but they're mutually exclusive. You can see what protocol a flow is, or how much traffic it carried, never both at once.

Idea: in protocol mode, add motion to convey volume so both dimensions are visible together — colour = protocol, animation = volume. A flow/dash animated along each edge, with speed or dash-density mapped to totalBytes (and direction reinforcing source→target).

Follow-up from #497 (protocol legend + curved parallel edges). Not urgent.

Proposed approach

Custom Sigma v3 WebGL edge program with a u_time uniform animating a dash/flow pattern in the fragment shader; per-edge speed/density derived from the byte ramp already computed in edgeBytesRange / makeVolumeEdgeColor.

Staged, so we get value early and de-risk the expensive part:

1. Thickness-by-volume (cheap, static). In protocol mode, scale edge size by totalBytes using the existing ramp. No animation cost; immediately gives colour = protocol + thickness = volume. Possibly ship this first on its own.
2. Shader-based flow animation (the real ask). Behind a toggle, with the guards below.

Constraints / risks to design around

• Two programs, not one. Edges now render straight (EdgeArrowProgram) and curved (EdgeCurvedArrowProgram, for parallel-edge separation — [Enhancement] Network graph has no legend for protocol edge colours #497). An animated variant needs both a straight and a curved version.
• Continuous render loop. Sigma renders on-demand; animation needs a requestAnimationFrame loop calling refresh() each frame, which redraws the whole scene (nodes included). On a 700-edge graph that's constant GPU/CPU/battery use — matters for the offline/embedded context. Needs perf guards (e.g. auto-disable above an edge-count threshold, pause when the tab is hidden).
• Accessibility. Must honour prefers-reduced-motion (no motion → fall back to thickness or the static ramp).
• PDF capture. The forceLight capture path draws edges onto a 2D layer; animation is on-screen only — capture should render a sensible static frame (e.g. thickness-by-volume).

Acceptance criteria

1. In protocol colour mode, edges optionally animate with speed/density proportional to totalBytes, while keeping their protocol colour.
2. Straight and curved (parallel) edges both animate consistently.
3. Respects prefers-reduced-motion and degrades gracefully; a static fallback conveys volume when motion is off.
4. No material FPS regression on large graphs — animation is guarded/opt-out above a threshold and pauses when offscreen.
5. PDF export renders a clean static frame (not mid-animation artefacts).

Relevant files

• frontend/src/components/network/NetworkGraph/NetworkGraph.tsx (edge program registration, build, PDF overdraw)
• frontend/src/utils/volumeColor.ts (makeVolumeEdgeColor) and edgeBytesRange (byte ramp/domain)