feat(network): protocol edge-colour legend + curved parallel edges (#497)#553
Conversation
) The network graph colour-codes edges by protocol but never explained the colours, and multi-protocol pairs drew every edge as an overlapping straight line so only one colour was ever visible. Legend: add an "Edges" section to the graph legend with a line swatch + label per protocol, driven by PROTOCOL_COLORS / PROTOCOL_LABELS (buildProtocolLegend). Only protocols present in the current graph are listed; protocols sharing a colour collapse into one entry (HTTPS/TLS); an "Other" swatch appears when any edge falls back to DEFAULT_EDGE_COLOR. Shown only in protocol colour mode. Curves: register @sigma/edge-curve's EdgeCurvedArrowProgram and fan out edges that share a node pair (applyParallelEdgeCurvature) so each protocol's colour is visible; single edges between a pair stay straight. The PDF-capture overdraw mirrors the curvature with a matching quadratic so exports don't collapse back to overlapping lines. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Warning Review limit reached
Next review available in: 42 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe network graph now curves parallel edges for distinct rendering, mirrors curvature in PDF capture, and displays a protocol-based edge legend filtered to protocols present in the graph. ChangesNetwork graph visualization
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant NetworkGraph
participant NetworkConstants
participant Sigma
participant PDFCapture
NetworkGraph->>NetworkConstants: normalize edge protocols and build legend
NetworkGraph->>Sigma: render straight and curved edge programs
NetworkGraph->>PDFCapture: redraw curved edges with stored curvature
NetworkGraph-->>NetworkGraph: display protocol swatches for present edges
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces parallel-edge curvature using the @sigma/edge-curve package to prevent overlapping strokes when multiple edges connect the same pair of nodes, and adds an edge-protocol color legend to the network graph. Feedback on the changes highlights a potential runtime crash in buildProtocolLegend if an edge has a non-string protocol value, and suggests adding a defensive check to prevent a TypeError.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/network/NetworkGraph/NetworkGraph.tsx`:
- Around line 328-344: In the parallel-edge handling logic, remove the
unreachable typeof parallelIndex branch and fold its behavior into the
parallelMinIndex branch. Use parallelMinIndex for the curvature calculation and
retain the existing straight-arrow behavior when no parallel index is present.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 8b2bb628-949c-4423-aeae-6d0c53dec922
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
frontend/package.jsonfrontend/src/components/network/NetworkGraph/NetworkGraph.cssfrontend/src/components/network/NetworkGraph/NetworkGraph.tsxfrontend/src/features/network/__tests__/protocolLegend.test.tsfrontend/src/features/network/constants.ts
#497) Only ~15 protocols had colours, so a capture's long tail (SSH, FTP, SMTP, SMB, SIP, QUIC, NTP, SNMP, LDAP, RTP, …) all rendered identical grey and collapsed into one "Other" legend entry. Expand PROTOCOL_COLORS with the common, recognizable protocols, each a unique colour (the legend groups by colour). Fold variants so they inherit the base colour instead of going grey: normalizeProtocol() matches exact curated keys first, then a small PROTOCOL_ALIASES map (SSL→TLS, SIP/SDP→SIP, …), then strips a trailing version suffix (TLSv1.2→TLS, SSHv2→SSH, IGMPv3→IGMP) — so regular variants need no list. getProtocolColor and buildProtocolLegend both route through it, keeping strokes and legend in sync. Raw ethertypes / pure-numeric names stay grey by design. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…t is long (#497) The expanded protocol palette can list ~20 edge colours, which ran the legend the full height of the canvas. On-screen the legend now caps to the canvas height and scrolls (slim theme-aware scrollbar); this corner stops panning the graph, an acceptable trade for a panel. The forceLight PDF-capture render keeps full height so exports aren't clipped. The list stays present-only (unchanged). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces parallel-edge curvature to the network graph using @sigma/edge-curve to prevent overlapping strokes from hiding protocol colors, updates the PDF exporter to support curved lines, and adds a scrollable edge-protocol legend. Review feedback suggests adding defensive guards in normalizeProtocol to handle null or undefined inputs, validating maxIndex in getCurvature to prevent NaN calculations, and ensuring curvature is a finite number before drawing quadratic curves in the canvas context.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
Address PR #553 review: harden against missing/malformed values so a single bad edge can't crash the graph render. - normalizeProtocol tolerates null/undefined/non-string (returns '' -> "Other") - getCurvature rejects undefined/null/NaN maxIndex (not just <= 0) - PDF-capture overdraw checks Number.isFinite(curvature) before quadraticCurveTo Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
1 participant
Closes #497.
Problem
The network graph colour-codes edges by protocol, but:
Changes
1. Protocol edge-colour legend
PROTOCOL_COLORS/PROTOCOL_LABELSvia a new purebuildProtocolLegend()helper — adding a protocol there makes it appear with no other change.HTTPS/TLS→ "HTTPS/TLS").DEFAULT_EDGE_COLOR) appears only when some edge uses an unmapped protocol.2. Curved parallel edges
@sigma/edge-curveand registeredEdgeCurvedArrowProgramalongside the straightEdgeArrowProgram.applyParallelEdgeCurvature()indexes parallel edges and fans out any that share a node pair (different protocol/app, or opposite directions) so every edge — and its colour — is visible. A pair with a single connection stays a straight arrow.No API or schema changes; frontend-only.
Verification
buildProtocolLegend(grouping by shared colour, present-only filtering,hasUnmapped, case-insensitivity, empty input) — full suite green (125 passed).edgeBytesRangefast-refresh warning is unrelated).🤖 Generated with Claude Code
Summary by CodeRabbit