feat: honor delay field on graph nodes and edges for staggered animations

[PraveshAryal03]

feat: honor delay field on graph nodes and edges for staggered animations

Context

This PR is the frontend half of a two-PR change that addresses review feedback on a backend contribution.

Backend PR: ReduxISU/Redux#194 — fix: address review feedback on Topological Sort (PR #178)

The reviewer (@Andrija-Sevaljevic) on the original Topological Sort merge (Redux#178) flagged the visualization as not making logical sense for the problem and suggested either removing it or implementing a new template on the front-end:

Visualization - I would remove it or implement a new template for it on the front-end. It does not logically make sense to visualize the problem this way.

This frontend PR enables a meaningful animated visualization for Topological Sort (and any other graph problem that wants stepped animation) by making the existing D3 renderer honor the backend's delay field instead of discarding it. This unblocks the rank-based animation implemented in the backend PR.

---

Problem

The C# backend has, for a long time, populated a delay field on nodes and links returned by graph-style visualizations:

{ "name": "2", "color": "Solution", "delay": "1250", ... }

But the frontend D3 renderer in StandardGraphSvgReact.js painted every color statically with .attr("fill", ...) / .style("stroke", ...) and never read the delay field. A repository-wide search for delay, transition, setTimeout, or animate in components/ and pages/ returned zero matches.

The effect: every backend visualization that set delay (DirectedHamiltonian, ShortestPath, Topological Sort, etc.) was producing dead round-trip data. Solutions appeared instantly with no temporal cue, even when the algorithm being visualized is fundamentally about ordering or progression.

Fix

Updated StandardGraphSvgReact.js so the D3 renderer honors delay via transitions:

1. getDelayMs(d) helper — safely parses the backend's string delay into a positive number of ms. Returns 0 for missing, empty, non-numeric, or non-positive values, which the rest of the code treats as "render at final color immediately, no animation."

2. Links — if delay > 0, start at the default Edges color, then .transition().delay(delayMs).duration(500).style("stroke", finalColor).

3. Arrowhead markers on directed links — same animation as their parent link, so heads stay color-synced with the line.

4. Nodes — if delay > 0, start at Background, then transition to d.color after the delay.

5. Constant FADE_DURATION_MS = 500 controls the smoothness of the fade-in for all transitioning elements.

Backwards compatibility

• Visualizations that do not set delay (or set it to 0 / "" / non-numeric) render exactly as before — same colors, same timing.
• Visualizations that do set delay now animate. This includes DirectedHamiltonian and ShortestPath, which were already setting delays that the frontend silently discarded — they get the upgrade for free.
• No new dependencies; uses D3 transitions that are already loaded.
• No API surface changes; the problemData shape is unchanged.

Verification

Tested locally with the backend PR #194 against several instances:

Test	Backend instance	Observed in GUI
Topological Sort default	({1,2,3,4,5,6},{(1,2),(1,3),(2,4),(3,4),(4,5),(3,6)})	Wave 0 (Node 1) at 0 s; wave 1 (Nodes 2, 3) at 1.25 s; wave 2 (Nodes 4, 6) at 2.5 s; wave 3 (Node 5) at 3.75 s — exactly matches the rank-based delays the backend computed
Topological Sort cyclic	({1,2,3},{(1,2),(2,3),(3,1)})	Solver returns {}; visualize returns un-highlighted graph; no animation triggered (correct)
DirectedHamiltonian	default instance	Now animates the path step-by-step (previously rendered statically)
Visualization with no delay	other graph problems	Renders exactly as before, no behavioral change

Test plan

• Topological Sort animates in waves matching backend rank computation
• Cyclic Topological Sort instance does not trigger a phantom animation
• DirectedHamiltonian visualization gains expected step-by-step animation
• Graph visualizations that don't set delay are visually unchanged
• No console errors or D3 warnings during transitions

Team

• Pravesh Aryal — frontend animation fix
• Dinesh Khanal, Koras Koirala — backend rank-based visualization (companion PR #194)

[PraveshAryal03]

Companion backend PR: ReduxISU/Redux#194