fix

src/components/map/CableMap.tsx

@@ -64,9 +64,8 @@ export default function CableMap({ locations }: CableMapProps) {
     [locations]
   );
 
-  const initialEdges = useMemo(
-    () =>
-      locations.flatMap((location) =>
+  const initialEdges = useMemo(() => {
+    const edges = locations.flatMap((location) =>
       location.startCables.flatMap((cable) => {
         const route = [
           { id: String(cable.startLocationId), name: location.name },
@@ -95,10 +94,30 @@ export default function CableMap({ locations }: CableMapProps) {
           };
         });
       })
-      ),
-    [locations]
     );
 
+    const counts = new Map<string, number>();
+    edges.forEach((edge) => {
+      const key = `${edge.source}->${edge.target}`;
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    });
+
+    const indexes = new Map<string, number>();
+    return edges.map((edge) => {
+      const key = `${edge.source}->${edge.target}`;
+      const index = indexes.get(key) ?? 0;
+      indexes.set(key, index + 1);
+      return {
+        ...edge,
+        data: {
+          ...edge.data,
+          parallelIndex: index,
+          parallelCount: counts.get(key) ?? 1,
+        },
+      };
+    });
+  }, [locations]);
+
   const [nodes,, onNodesChange] = useNodesState(initialNodes);
   const [edges,, onEdgesChange] = useEdgesState(initialEdges);
 

src/components/map/CableMapEdge.tsx

@@ -9,6 +9,8 @@ type CableEdgeData = {
   sourceName?: string;
   targetName?: string;
   onEdgeClick?: () => void;
+  parallelIndex?: number;
+  parallelCount?: number;
 };
 
 export default function CableMapEdge({
@@ -33,6 +35,9 @@ export default function CableMapEdge({
   const edgeId = `edge-${id}`;
   const strokeWidth = 1 + Math.min(data.coreCount, 8) * 0.4;
   const strokeColor = selected ? "#1d4ed8" : "#64748b";
+  const parallelCount = typeof data.parallelCount === "number" ? data.parallelCount : 1;
+  const parallelIndex = typeof data.parallelIndex === "number" ? data.parallelIndex : 0;
+  const startOffset = `${((parallelIndex + 1) / (parallelCount + 1)) * 100}%`;
 
   return (
     <>
@@ -46,7 +51,12 @@ export default function CableMapEdge({
         onClick={() => data.onEdgeClick?.()}
       />
       <text>
-        <textPath href={`#${edgeId}`} startOffset="50%" textAnchor="middle" className="text-xs fill-slate-700">
+        <textPath
+          href={`#${edgeId}`}
+          startOffset={startOffset}
+          textAnchor="middle"
+          className="text-xs fill-slate-700"
+        >
           {data.label}
         </textPath>
       </text>