NotYuSheng
diff --git a/‎frontend/package-lock.json‎
Lines changed: 10 additions & 0 deletions b/‎frontend/package-lock.json‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎frontend/package.json‎
Lines changed: 1 addition & 0 deletions b/‎frontend/package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎frontend/src/components/network/NetworkGraph/NetworkGraph.css‎
Lines changed: 64 additions & 0 deletions b/‎frontend/src/components/network/NetworkGraph/NetworkGraph.css‎
Lines changed: 64 additions & 0 deletions
diff --git a/‎frontend/src/components/network/NetworkGraph/NetworkGraph.tsx‎
Lines changed: 115 additions & 3 deletions b/‎frontend/src/components/network/NetworkGraph/NetworkGraph.tsx‎
Lines changed: 115 additions & 3 deletions
@@ -22,6 +22,7 @@
   "dependencies": {
     "@govtechsg/sgds": "^2.3.6",
     "@govtechsg/sgds-react": "^2.7.7",
+    "@sigma/edge-curve": "^3.1.0",
     "@sigma/node-image": "^3.0.0",
     "@types/html2canvas": "^0.5.35",
     "@xyflow/react": "^12.10.2",
 
@@ -144,6 +144,38 @@
   border-color: rgba(255, 255, 255, 0.1);
 }
 
+/*
+ * On-screen the legend caps its height to the canvas and scrolls when the protocol list is long
+ * (a protocol-zoo capture can list ~20 edge colours). Scrolling needs pointer events, so this
+ * corner no longer pans the graph underneath — an acceptable trade for a legend panel. Not applied
+ * to the forceLight (PDF-capture) render, which keeps full height so the export isn't clipped.
+ */
+.ng-legend--scroll {
+  max-height: calc(100% - 32px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  pointer-events: auto;
+}
+
+/* Slim, unobtrusive scrollbar that reads in both canvas themes. */
+.ng-legend--scroll {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(13, 17, 23, 0.28) transparent;
+}
+.ng-legend--scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.ng-legend--scroll::-webkit-scrollbar-thumb {
+  background: rgba(13, 17, 23, 0.28);
+  border-radius: 3px;
+}
+[data-graph-theme='dark'] .ng-legend--scroll {
+  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
+}
+[data-graph-theme='dark'] .ng-legend--scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.28);
+}
+
 .ng-legend-item {
   display: flex;
   align-items: center;
@@ -158,6 +190,38 @@
   box-shadow: 0 0 4px currentColor;
 }
 
+/* Line swatch for edge-protocol legend entries — a rule, not a dot, so it reads
+   as a connection stroke rather than a node. */
+.ng-legend-line {
+  width: 16px;
+  height: 3px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+/* Separates the node section from the edge-protocol section. */
+.ng-legend-divider {
+  height: 1px;
+  margin: 3px 0;
+  background: rgba(13, 17, 23, 0.12);
+}
+
+[data-graph-theme='dark'] .ng-legend-divider {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.ng-legend-heading {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(31, 35, 40, 0.55);
+}
+
+[data-graph-theme='dark'] .ng-legend-heading {
+  color: rgba(201, 209, 217, 0.55);
+}
+
 .ng-legend-label {
   font-size: 11px;
   color: rgba(31, 35, 40, 0.85);
 
@@ -4,10 +4,12 @@ import ELK from 'elkjs';
 const ELK_WORKER_URL = `${import.meta.env.BASE_URL}elk-worker.min.js`;
 import Graph from 'graphology';
 import Sigma from 'sigma';
+import { EdgeArrowProgram } from 'sigma/rendering';
+import { EdgeCurvedArrowProgram, indexParallelEdgesIndex } from '@sigma/edge-curve';
 import circular from 'graphology-layout/circular';
 import noverlap from 'graphology-layout-noverlap';
 import type { GraphNode, GraphEdge } from '@/features/network/types';
-import { getProtocolColor, NODE_TYPE_CONFIG } from '@/features/network/constants';
+import { getProtocolColor, NODE_TYPE_CONFIG, buildProtocolLegend, DEFAULT_EDGE_COLOR } from '@/features/network/constants';
 import { makeVolumeEdgeColor } from '@/utils/volumeColor';
 import { deviceTypeIcon, deviceTypeLabel, DEVICE_TYPES } from '@/utils/deviceType';
 import { useStore } from '@/store';
@@ -288,6 +290,62 @@ export function edgeBytesRange(edges: GraphEdge[]): { min: number; max: number }
   return { min: Number.isFinite(min) ? min : 1, max };
 }
 
+// ---------------------------------------------------------------------------
+// Parallel-edge curvature
+// ---------------------------------------------------------------------------
+
+/**
+ * Curvature for the edge at `index` within a parallel group of `maxIndex + 1` edges. Zero-index
+ * edges stay flat; the rest fan out symmetrically. `amplitude` keeps big groups from curving so hard
+ * they cross each other. Mirrors the reference implementation from `@sigma/edge-curve`.
+ */
+function getCurvature(index: number, maxIndex: number): number {
+  // `!maxIndex` also rejects undefined/null/NaN (a missing parallel-index attribute) — those would
+  // otherwise sail past `<= 0` and produce NaN curvature.
+  if (!maxIndex || maxIndex <= 0) return 0;
+  if (index < 0) return -getCurvature(-index, maxIndex);
+  const amplitude = 3.5;
+  const maxCurvature = (amplitude * (1 - Math.exp(-maxIndex / amplitude))) / maxIndex;
+  return (maxCurvature * index) / maxIndex;
+}
+
+/**
+ * When two nodes are joined by more than one edge — a different protocol/app per edge, or one in
+ * each direction — straight strokes would draw on top of each other and hide all but one colour
+ * (#497). Curve the parallels apart so every edge (and its protocol colour) is visible; edges with a
+ * single connection between their endpoints stay straight. Reads the parallel-group indices that
+ * `indexParallelEdgesIndex` writes and sets each edge's render `type` + `curvature` accordingly.
+ */
+function applyParallelEdgeCurvature(graph: Graph): void {
+  indexParallelEdgesIndex(graph, {
+    edgeIndexAttribute: 'parallelIndex',
+    edgeMinIndexAttribute: 'parallelMinIndex',
+    edgeMaxIndexAttribute: 'parallelMaxIndex',
+  });
+  graph.forEachEdge((edge, attrs) => {
+    const parallelIndex = attrs.parallelIndex as number | null | undefined;
+    const parallelMinIndex = attrs.parallelMinIndex as number | null | undefined;
+    const parallelMaxIndex = attrs.parallelMaxIndex as number | null | undefined;
+
+    if (typeof parallelMinIndex === 'number') {
+      // Group spans both directions: the middle edge stays straight, the rest curve.
+      graph.mergeEdgeAttributes(edge, {
+        type: parallelIndex ? 'curved' : 'arrow',
+        curvature: getCurvature(parallelIndex as number, parallelMaxIndex as number),
+      });
+    } else if (typeof parallelIndex === 'number') {
+      // Same-direction parallels: curve them all (index 0 gets 0 curvature → renders straight).
+      graph.mergeEdgeAttributes(edge, {
+        type: 'curved',
+        curvature: getCurvature(parallelIndex, parallelMaxIndex as number),
+      });
+    } else {
+      // The only edge between its endpoints — keep it a straight arrow.
+      graph.setEdgeAttribute(edge, 'type', 'arrow');
+    }
+  });
+}
+
 // ---------------------------------------------------------------------------
 // Build a graphology graph from GraphNode[] / GraphEdge[]
 // ---------------------------------------------------------------------------
@@ -361,6 +419,9 @@ function buildGraph(
     });
   }
 
+  // Curve edges that share a node pair so overlapping strokes don't hide each other's colour.
+  applyParallelEdgeCurvature(graph);
+
   return graph;
 }
 
@@ -496,6 +557,17 @@ export const NetworkGraph = memo(function NetworkGraph({
     [hiddenNodesList]
   );
 
+  // Edge-colour legend entries for the protocols present in the current graph.
+  // Only meaningful when edges are coloured by protocol — in volume mode the
+  // strokes encode byte counts, not protocols, so the swatches would mislead.
+  const protocolLegend = useMemo(
+    () =>
+      edgeColorMode === 'protocol'
+        ? buildProtocolLegend(edges.map(e => e.data.protocol))
+        : { entries: [], hasUnmapped: false },
+    [edges, edgeColorMode]
+  );
+
   const hiddenNeighbors = useMemo<GraphNode[]>(() => {
     if (!hoveredNode || crossEdges.length === 0) return [];
     const neighborIds = new Set<string>();
@@ -550,6 +622,12 @@ export const NetworkGraph = memo(function NetworkGraph({
       renderLabels: true,
       renderEdgeLabels: false,
       defaultEdgeType: 'arrow',
+      // 'arrow' = straight (single edge between a pair); 'curved' = fanned-out parallels, set per
+      // edge by applyParallelEdgeCurvature so overlapping protocol colours stay distinguishable.
+      edgeProgramClasses: {
+        arrow: EdgeArrowProgram,
+        curved: EdgeCurvedArrowProgram,
+      },
       labelDensity: 1,
       labelGridCellSize: 60,
       labelRenderedSizeThreshold: -Infinity, // always call drawNodeLabel at every zoom level
@@ -639,7 +717,19 @@ export const NetworkGraph = memo(function NetworkGraph({
             const t = sigma.graphToViewport(graph.getNodeAttributes(target) as { x: number; y: number });
             labelCtx.beginPath();
             labelCtx.moveTo(s.x, s.y);
-            labelCtx.lineTo(t.x, t.y);
+            // Curved parallels must bow the same way here as Sigma draws them on screen, or the PDF
+            // would show overlapping straight lines again. Same control point Sigma uses: the
+            // midpoint offset perpendicular to the edge by `curvature` (#497).
+            const curvature = (attrs['curvature'] as number) ?? 0;
+            // Number.isFinite guards against a NaN curvature (missing/malformed index) reaching
+            // quadraticCurveTo, which would silently drop the stroke.
+            if (attrs['type'] === 'curved' && Number.isFinite(curvature) && curvature !== 0) {
+              const cx = (s.x + t.x) / 2 + (t.y - s.y) * curvature;
+              const cy = (s.y + t.y) / 2 - (t.x - s.x) * curvature;
+              labelCtx.quadraticCurveTo(cx, cy, t.x, t.y);
+            } else {
+              labelCtx.lineTo(t.x, t.y);
+            }
             labelCtx.strokeStyle = (attrs['color'] as string) ?? '#999';
             labelCtx.lineWidth = Math.max(0.6, (attrs['size'] as number) ?? 1);
             labelCtx.globalAlpha = 0.75;
@@ -961,7 +1051,9 @@ export const NetworkGraph = memo(function NetworkGraph({
       )}
 
       {/* ── Node-type legend — data-driven, matches getNodeColor/getNodeIcon ── */}
-      <div className="ng-legend">
+      {/* Scrollable on-screen so a long protocol list can't overflow the canvas; the PDF-capture
+          render (forceLight) keeps the full height so nothing is clipped in the export. */}
+      <div className={`ng-legend${forceLight ? '' : ' ng-legend--scroll'}`}>
         {/* Specific service nodeTypes present in this graph */}
         {Object.entries(NODE_TYPE_CONFIG)
           .filter(([type]) => !GENERIC_NODE_TYPES.has(type) && type !== 'cluster' &&
@@ -998,6 +1090,26 @@ export const NetworkGraph = memo(function NetworkGraph({
             <span className="ng-legend-label">Unknown</span>
           </div>
         )}
+
+        {/* ── Edge-protocol colours — line swatches, driven by PROTOCOL_COLORS ── */}
+        {(protocolLegend.entries.length > 0 || protocolLegend.hasUnmapped) && (
+          <>
+            <div className="ng-legend-divider" />
+            <div className="ng-legend-heading">Edges</div>
+            {protocolLegend.entries.map(({ color, label }) => (
+              <div key={color} className="ng-legend-item">
+                <span className="ng-legend-line" style={{ background: color }} />
+                <span className="ng-legend-label">{label}</span>
+              </div>
+            ))}
+            {protocolLegend.hasUnmapped && (
+              <div className="ng-legend-item">
+                <span className="ng-legend-line" style={{ background: DEFAULT_EDGE_COLOR }} />
+                <span className="ng-legend-label">Other</span>
+              </div>
+            )}
+          </>
+        )}
       </div>
     </div>
   );