From e2885de447ecfaeb91af25a649eda0ba15c6fbbd Mon Sep 17 00:00:00 2001
From: seveibar <seveibar@gmail.com>
Date: Sat, 8 Aug 2026 12:18:29 -0700
Subject: [PATCH] Rotate vertical inline net labels in the debug visualization

A vertical trace's inline label was drawn horizontally across the wire in
visualize() output. graphics-debug texts now support rotation, so pass 90
(counter-clockwise, bottom-to-top) for y-axis labels.

Needs graphics-debug with Text.rotation (tscircuit/graphics-debug#228);
the devDependency bump lands here once that releases.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../InlineNetLabelSolver.ts                   |  2 ++
 package.json                                  |  2 +-
 .../__snapshots__/inline-net-label01.snap.svg | 20 +++++++++----------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/lib/solvers/InlineNetLabelSolver/InlineNetLabelSolver.ts b/lib/solvers/InlineNetLabelSolver/InlineNetLabelSolver.ts
index 691333db9..402be6526 100644
--- a/lib/solvers/InlineNetLabelSolver/InlineNetLabelSolver.ts
+++ b/lib/solvers/InlineNetLabelSolver/InlineNetLabelSolver.ts
@@ -344,6 +344,8 @@ export class InlineNetLabelSolver extends BaseSolver {
         color: "green",
         fontSize: inlineLabel.height,
         anchorSide: "center",
+        // Vertical labels read bottom-to-top, alongside the wire they name.
+        rotation: inlineLabel.axis === "y" ? 90 : undefined,
       })
       graphics.points.push({
         x: inlineLabel.anchorPoint.x,
diff --git a/package.json b/package.json
index 85f68647b..599f1d2d1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "calculate-elbow": "^0.0.12",
     "connectivity-map": "^1.0.0",
     "flatbush": "^4.5.0",
-    "graphics-debug": "^0.0.96",
+    "graphics-debug": "^0.0.98",
     "react": "^19.1.1",
     "react-cosmos": "^7.0.0",
     "react-cosmos-plugin-vite": "^7.0.0",
diff --git a/tests/solvers/InlineNetLabelSolver/__snapshots__/inline-net-label01.snap.svg b/tests/solvers/InlineNetLabelSolver/__snapshots__/inline-net-label01.snap.svg
index 87510f153..f5ffc12c6 100644
--- a/tests/solvers/InlineNetLabelSolver/__snapshots__/inline-net-label01.snap.svg
+++ b/tests/solvers/InlineNetLabelSolver/__snapshots__/inline-net-label01.snap.svg
@@ -1,14 +1,14 @@
-<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="0.5,0 2.5,0" data-type="line" data-label="" points="215.29056603773586,71.69811320754715 426.611320754717,71.69811320754715" fill="none" stroke="hsl(48, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="0,-2.5 0,-4" data-type="line" data-label="" points="162.46037735849058,335.84905660377353 162.46037735849058,494.33962264150944" fill="none" stroke="hsl(136, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="0.5,0 2.5,0" data-type="line" data-label="" points="215.29056603773586,71.69811320754715 426.611320754717,71.69811320754715" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="0,-2.5 0,-4" data-type="line" data-label="" points="162.46037735849058,335.84905660377353 162.46037735849058,494.33962264150944" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="U1" data-x="0" data-y="0" x="109.6301886792453" y="39.999999999999986" width="105.66037735849056" height="63.39622641509433" fill="hsl(164, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="U2" data-x="3" data-y="0" x="426.611320754717" y="39.999999999999986" width="105.66037735849056" height="63.39622641509433" fill="hsl(165, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="U3" data-x="0" data-y="-2" x="130.7622641509434" y="230.18867924528303" width="63.39622641509436" height="105.66037735849054" fill="hsl(166, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="U4" data-x="0" data-y="-4.5" x="130.7622641509434" y="494.3396226415094" width="63.39622641509436" height="105.66037735849056" fill="hsl(167, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="INLINE netId: USER_LED_ANODE
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="0.5,0 2.5,0" data-type="line" data-label="" points="214.33962264150944,71.69811320754715 425.66037735849056,71.69811320754715" fill="none" stroke="hsl(48, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="0,-2.5 0,-4" data-type="line" data-label="" points="161.50943396226415,335.84905660377353 161.50943396226415,494.33962264150944" fill="none" stroke="hsl(136, 100%, 50%, 0.8)" stroke-width="1px"/></g><g><polyline data-points="0.5,0 2.5,0" data-type="line" data-label="" points="214.33962264150944,71.69811320754715 425.66037735849056,71.69811320754715" fill="none" stroke="purple" stroke-width="1px"/></g><g><polyline data-points="0,-2.5 0,-4" data-type="line" data-label="" points="161.50943396226415,335.84905660377353 161.50943396226415,494.33962264150944" fill="none" stroke="purple" stroke-width="1px"/></g><g><rect data-type="rect" data-label="U1" data-x="0" data-y="0" x="108.67924528301887" y="39.999999999999986" width="105.66037735849056" height="63.39622641509433" fill="hsl(164, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="U2" data-x="3" data-y="0" x="425.66037735849056" y="39.999999999999986" width="105.66037735849056" height="63.39622641509433" fill="hsl(165, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="U3" data-x="0" data-y="-2" x="129.81132075471697" y="230.18867924528303" width="63.39622641509436" height="105.66037735849054" fill="hsl(166, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="U4" data-x="0" data-y="-4.5" x="129.81132075471697" y="494.3396226415094" width="63.39622641509436" height="105.66037735849056" fill="hsl(167, 100%, 50%, 0.8)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="INLINE netId: USER_LED_ANODE
 axis: x
-side: y+" data-x="1.5" data-y="0.14" x="225.85660377358494" y="47.39622641509432" width="190.18867924528297" height="19.01886792452831" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="INLINE netId: SPI_SCK
+side: y+" data-x="1.5" data-y="0.14" x="224.90566037735852" y="47.39622641509432" width="190.18867924528297" height="19.01886792452831" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009464285714285715"/></g><g><rect data-type="rect" data-label="INLINE netId: SPI_SCK
 axis: y
-side: x-" data-x="-0.14" data-y="-3.25" x="138.15849056603776" y="364.3773584905661" width="19.01886792452828" height="101.43396226415086" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009464285714285715"/></g><text data-type="text" data-label="USER_LED_ANODE" data-x="1.5" data-y="0.14" x="320.9509433962264" y="56.90566037735847" fill="green" font-size="19.0188679245283" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">USER_LED_ANODE</text><text data-type="text" data-label="SPI_SCK" data-x="-0.14" data-y="-3.25" x="147.6679245283019" y="415.09433962264154" fill="green" font-size="19.0188679245283" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">SPI_SCK</text><g><circle data-type="point" data-label="U1.1
-x+" data-x="0.5" data-y="0" cx="215.29056603773586" cy="71.69811320754715" r="3" fill="hsl(319, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U2.1
-x-" data-x="2.5" data-y="0" cx="426.611320754717" cy="71.69811320754715" r="3" fill="hsl(200, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U3.1
-y-" data-x="0" data-y="-2.5" cx="162.46037735849058" cy="335.84905660377353" r="3" fill="hsl(81, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U4.1
-y+" data-x="0" data-y="-4" cx="162.46037735849058" cy="494.33962264150944" r="3" fill="hsl(322, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="inline anchor
-USER_LED_ANODE" data-x="1.5" data-y="0" cx="320.9509433962264" cy="71.69811320754715" r="3" fill="green"/></g><g><circle data-type="point" data-label="inline anchor
-SPI_SCK" data-x="0" data-y="-3.25" cx="162.46037735849058" cy="415.09433962264154" r="3" fill="green"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+side: x-" data-x="-0.14" data-y="-3.25" x="137.20754716981133" y="364.3773584905661" width="19.01886792452828" height="101.43396226415086" fill="hsl(40, 100%, 50%, 0.35)" stroke="black" stroke-width="0.009464285714285715"/></g><text data-type="text" data-label="USER_LED_ANODE" data-x="1.5" data-y="0.14" x="320" y="56.90566037735847" fill="green" font-size="19.0188679245283" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">USER_LED_ANODE</text><text data-type="text" data-label="SPI_SCK" data-x="-0.14" data-y="-3.25" x="146.7169811320755" y="415.09433962264154" fill="green" font-size="19.0188679245283" font-family="sans-serif" text-anchor="middle" dominant-baseline="central" transform="rotate(-90, 146.7169811320755, 415.09433962264154)">SPI_SCK</text><g><circle data-type="point" data-label="U1.1
+x+" data-x="0.5" data-y="0" cx="214.33962264150944" cy="71.69811320754715" r="3" fill="hsl(319, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U2.1
+x-" data-x="2.5" data-y="0" cx="425.66037735849056" cy="71.69811320754715" r="3" fill="hsl(200, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U3.1
+y-" data-x="0" data-y="-2.5" cx="161.50943396226415" cy="335.84905660377353" r="3" fill="hsl(81, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="U4.1
+y+" data-x="0" data-y="-4" cx="161.50943396226415" cy="494.33962264150944" r="3" fill="hsl(322, 100%, 50%, 0.8)"/></g><g><circle data-type="point" data-label="inline anchor
+USER_LED_ANODE" data-x="1.5" data-y="0" cx="320" cy="71.69811320754715" r="3" fill="green"/></g><g><circle data-type="point" data-label="inline anchor
+SPI_SCK" data-x="0" data-y="-3.25" cx="161.50943396226415" cy="415.09433962264154" r="3" fill="green"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="640" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
               document.currentScript.parentElement.addEventListener('mousemove', (e) => {
                 const svg = e.currentTarget;
                 const rect = svg.getBoundingClientRect();
@@ -30,7 +30,7 @@ SPI_SCK" data-x="0" data-y="-3.25" cx="162.46037735849058" cy="415.0943396226415
                 v.setAttribute('y2', '640');
 
                 // Calculate real coordinates using inverse transformation
-                const matrix = {"a":105.66037735849056,"c":0,"e":162.46037735849058,"b":0,"d":-105.66037735849056,"f":71.69811320754715};
+                const matrix = {"a":105.66037735849056,"c":0,"e":161.50943396226415,"b":0,"d":-105.66037735849056,"f":71.69811320754715};
                 // Manually invert and apply the affine transform
                 // Since we only use translate and scale, we can directly compute:
                 // x' = (x - tx) / sx