Update index.html

frontend/index.html

@@ -837,12 +837,17 @@ function _buildBondGraph(chars, bonds) {
     const side = (pairOffset[pairKey] > 1 && (pairUsed[pairKey] || 0) === 0) ? 1 : -1;
     pairUsed[pairKey] = (pairUsed[pairKey] || 0) + 1;
 
-    // Perpendicular offset for the bezier control point
-    const dx = tgt.x - src.x, dy = tgt.y - src.y;
-    const len = Math.sqrt(dx * dx + dy * dy) || 1;
-    const curveStrength = pairOffset[pairKey] > 1 ? 36 : 18;
-    const cpx = (src.x + tgt.x) / 2 + (-dy / len) * curveStrength * side;
-    const cpy = (src.y + tgt.y) / 2 + (dx / len) * curveStrength * side;
+    // Perpendicular offset — use a CANONICAL direction (sorted by id) so that both
+    // A→B and B→A get the same perpendicular axis; side then reliably puts them
+    // on opposite sides instead of accidentally cancelling out.
+    const [canonSrc, canonTgt] = b.source_id < b.target_id ? [src, tgt] : [tgt, src];
+    const cdx = canonTgt.x - canonSrc.x, cdy = canonTgt.y - canonSrc.y;
+    const clen = Math.sqrt(cdx * cdx + cdy * cdy) || 1;
+    const perpX = -cdy / clen, perpY = cdx / clen;   // canonical perpendicular unit vector
+
+    const curveStrength = pairOffset[pairKey] > 1 ? 48 : 18;
+    const cpx = (src.x + tgt.x) / 2 + perpX * curveStrength * side;
+    const cpy = (src.y + tgt.y) / 2 + perpY * curveStrength * side;
 
     const col = _bondColor(b.note, b.value);
     const op = (0.35 + Math.abs(b.value) / 100 * 0.65).toFixed(2);
@@ -859,10 +864,16 @@ function _buildBondGraph(chars, bonds) {
         stroke-linecap="round" marker-end="url(#${markerId})"/>`;
 
     if (b.note) {
-      // Label at midpoint of bezier — use paint-order stroke for legible outline
-      const lx = 0.25 * src.x + 0.5 * cpx + 0.25 * tgt.x;
-      const ly = 0.25 * src.y + 0.5 * cpy + 0.25 * tgt.y;
-      arcs += `<text x="${lx}" y="${ly - 3}" text-anchor="middle"
+      // For bidirectional pairs, push each label further in its own canonical perpendicular
+      // direction so the two notes don't stack on top of each other.
+      const bidir = pairOffset[pairKey] > 1;
+      const baseLx = 0.25 * src.x + 0.5 * cpx + 0.25 * tgt.x;
+      const baseLy = 0.25 * src.y + 0.5 * cpy + 0.25 * tgt.y;
+      const labelOffsetX = bidir ? perpX * 10 * side : 0;
+      const labelOffsetY = bidir ? perpY * 10 * side : -4;
+      const lx = baseLx + labelOffsetX;
+      const ly = baseLy + labelOffsetY;
+      arcs += `<text x="${lx}" y="${ly}" text-anchor="middle"
         font-size="9" fill="${col}"
         paint-order="stroke" stroke="rgba(10,8,18,.85)" stroke-width="3" stroke-linejoin="round"
         font-family="Georgia,serif" font-style="italic">${b.note}</text>`;