Update Qubit Line Labels in Circuit Viz (#2308)

Changes the labels at the beginning of the qubit lines in circuit
visualizer.
From:

![image](https://github.com/user-attachments/assets/01dc08a2-a99d-4295-b4e6-c7e09f7a7a25)

To:

![image](https://github.com/user-attachments/assets/db0d878f-55b0-482f-b124-dfe7a8017276)

---------

Co-authored-by: Mine Starks <[email protected]>
Co-authored-by: Mine Starks <[email protected]>

Author: ScottCarda-MS

npm/qsharp/ux/circuit-vis/formatters/inputFormatter.ts

@@ -29,7 +29,7 @@ const formatInputs = (
   let currY: number = startY;
   qubits.forEach(({ id, numResults }) => {
     // Add qubit wire to list of qubit wires
-    qubitWires.push(_qubitInput(currY));
+    qubitWires.push(_qubitInput(currY, id.toString()));
 
     // Create qubit register
     registers[id] = { type: RegisterType.Qubit, y: currY };
@@ -68,8 +68,39 @@ const formatInputs = (
  *
  * @returns SVG text component for the input register.
  */
-const _qubitInput = (y: number): SVGElement => {
-  const el: SVGElement = text("|𝜓⟩", leftPadding, y, 16);
+const _qubitInput = (y: number, subscript?: string): SVGElement => {
+  const el: SVGElement = text("", leftPadding, y, 16);
+
+  // Create the main text node
+  const mainText = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "tspan",
+  );
+  mainText.textContent = "|𝜓";
+
+  // Create the subscript node if provided
+  if (subscript) {
+    const subscriptText = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "tspan",
+    );
+    subscriptText.textContent = subscript;
+    subscriptText.setAttribute("baseline-shift", "sub");
+    subscriptText.setAttribute("font-size", "65%");
+    mainText.appendChild(subscriptText);
+  }
+
+  // Add the closing part of the text
+  const closingText = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "tspan",
+  );
+  closingText.textContent = "⟩";
+
+  // Append all parts to the main SVG text element
+  el.appendChild(mainText);
+  el.appendChild(closingText);
+
   el.setAttribute("text-anchor", "start");
   el.setAttribute("dominant-baseline", "middle");
   return el;

npm/qsharp/ux/circuit-vis/formatters/registerFormatter.ts

@@ -4,7 +4,7 @@
 import { RegisterMap } from "../register";
 import { regLineStart } from "../constants";
 import { Metadata, GateType } from "../metadata";
-import { group, line, text } from "./formatUtils";
+import { group, line } from "./formatUtils";
 
 /**
  * Generate the SVG representation of the qubit register wires in `registers` and the classical wires
@@ -24,7 +24,15 @@ const formatRegisters = (
   const formattedRegs: SVGElement[] = [];
   // Render qubit wires
   for (const qId in registers) {
-    formattedRegs.push(_qubitRegister(Number(qId), endX, registers[qId].y));
+    formattedRegs.push(
+      line(
+        regLineStart,
+        registers[qId].y,
+        endX,
+        registers[qId].y,
+        "qubit-wire",
+      ),
+    );
   }
   // Render classical wires
   measureGates.forEach(({ type, x, targetsY, controlsY }) => {
@@ -89,30 +97,4 @@ const _classicalRegister = (
   return group([vLine1, vLine2, hLine1, hLine2]);
 };
 
-/**
- * Generates the SVG representation of a qubit register.
- *
- * @param qId         Qubit register index.
- * @param endX        End x coord.
- * @param y           y coord of wire.
- * @param labelOffset y offset for wire label.
- *
- * @returns SVG representation of the given qubit register.
- */
-const _qubitRegister = (
-  qId: number,
-  endX: number,
-  y: number,
-  labelOffset = 16,
-): SVGElement => {
-  const wire: SVGElement = line(regLineStart, y, endX, y, "qubit-wire");
-
-  const label: SVGElement = text(`q${qId}`, regLineStart, y - labelOffset);
-  label.setAttribute("dominant-baseline", "hanging");
-  label.setAttribute("text-anchor", "start");
-  label.setAttribute("font-size", "75%");
-
-  return group([wire, label]);
-};
-
 export { formatRegisters };