qsharp-lang 1.14.5-dev → 1.15.1-dev

package/ux/circuit-vis/formatters/gateFormatter.ts

@@ -29,15 +29,18 @@ import {
 /**
  * Given an array of operations (in metadata format), return the SVG representation.
  *
- * @param opsMetadata Array of Metadata representation of operations.
+ * @param opsMetadata 2D array of Metadata representation of operations.
  * @param nestedDepth Depth of nested operations (used in classically controlled and grouped operations).
  *
  * @returns SVG representation of operations.
  */
-const formatGates = (opsMetadata: Metadata[], nestedDepth = 0): SVGElement => {
-  const formattedGates: SVGElement[] = opsMetadata.map((metadata) =>
-    _formatGate(metadata, nestedDepth),
-  );
+const formatGates = (
+  opsMetadata: Metadata[][],
+  nestedDepth = 0,
+): SVGElement => {
+  const formattedGates: SVGElement[] = opsMetadata
+    .map((col) => col.map((metadata) => formatGate(metadata, nestedDepth)))
+    .flat();
   return group(formattedGates);
 };
 
@@ -49,7 +52,7 @@ const formatGates = (opsMetadata: Metadata[], nestedDepth = 0): SVGElement => {
  *
  * @returns SVG representation of gate.
  */
-const _formatGate = (metadata: Metadata, nestedDepth = 0): SVGElement => {
+const formatGate = (metadata: Metadata, nestedDepth = 0): SVGElement => {
   const { type, x, controlsY, targetsY, label, displayArgs, width } = metadata;
   switch (type) {
     case GateType.Measure:
@@ -62,6 +65,8 @@ const _formatGate = (metadata: Metadata, nestedDepth = 0): SVGElement => {
       );
     case GateType.X:
       return _createGate([_x(metadata, nestedDepth)], metadata, nestedDepth);
+    case GateType.Ket:
+      return _createGate([_ket(label, metadata)], metadata, nestedDepth);
     case GateType.Swap:
       return controlsY.length > 0
         ? _controlledGate(metadata, nestedDepth)
@@ -209,12 +214,14 @@ const _measure = (x: number, y: number): SVGElement => {
     "gate-measure",
   );
   const mArc: SVGElement = arc(x + 5, y + 2, width / 2 - 5, height / 2 - 8);
+  mArc.style.pointerEvents = "none";
   const meter: SVGElement = line(
     x + width / 2,
     y + 8,
     x + width - 8,
     y - height / 2 + 8,
   );
+  meter.style.pointerEvents = "none";
   return group([mBox, mArc, meter]);
 };
 
@@ -226,7 +233,9 @@ const _measure = (x: number, y: number): SVGElement => {
  * @param y                Array of y coords of registers acted upon by gate.
  * @param width            Width of gate.
  * @param displayArgs           Arguments passed in to gate.
+ * @param params  Non-Qubit required parameters for the unitary gate.
  * @param renderDashedLine If true, draw dashed lines between non-adjacent unitaries.
+ * @param cssClass         Optional CSS class to apply to the unitary gate for styling.
  *
  * @returns SVG representation of unitary gate.
  */
@@ -237,6 +246,7 @@ const _unitary = (
   width: number,
   displayArgs?: string,
   renderDashedLine = true,
+  cssClass?: string,
 ): SVGElement => {
   if (y.length === 0)
     throw new Error(
@@ -248,7 +258,7 @@ const _unitary = (
     const maxY: number = group[group.length - 1],
       minY: number = group[0];
     const height: number = maxY - minY + gateHeight;
-    return _unitaryBox(label, x, minY, width, height, displayArgs);
+    return _unitaryBox(label, x, minY, width, height, displayArgs, cssClass);
   });
 
   // Draw dashed line between disconnected unitaries
@@ -273,6 +283,7 @@ const _unitary = (
  * @param width  Width of gate.
  * @param height Height of gate.
  * @param displayArgs Arguments passed in to gate.
+ * @param cssClass Optional CSS class to apply to the unitary gate for styling.
  *
  * @returns SVG representation of unitary box.
  */
@@ -283,16 +294,22 @@ const _unitaryBox = (
   width: number,
   height: number = gateHeight,
   displayArgs?: string,
+  cssClass?: string,
 ): SVGElement => {
   y -= gateHeight / 2;
   const uBox: SVGElement = box(x - width / 2, y, width, height);
+  if (cssClass != null) {
+    uBox.setAttribute("class", cssClass);
+  }
   const labelY = y + height / 2 - (displayArgs == null ? 0 : 7);
   const labelText: SVGElement = text(label, x, labelY);
   const elems = [uBox, labelText];
   if (displayArgs != null) {
     const argStrY = y + height / 2 + 8;
-    const argText: SVGElement = text(displayArgs, x, argStrY, argsFontSize);
-    elems.push(argText);
+
+    const argButton: SVGElement = text(displayArgs, x, argStrY, argsFontSize);
+    argButton.setAttribute("class", "arg-button");
+    elems.push(argButton);
   }
   return group(elems);
 };
@@ -315,8 +332,10 @@ const _swap = (metadata: Metadata, nestedDepth: number): SVGElement => {
   const bg: SVGElement = box(x1, y1, x2, y2, "gate-swap");
   const crosses: SVGElement[] = ys.map((y) => _cross(x, y));
   const vertLine: SVGElement = line(x, ys[0], x, ys[1]);
+  vertLine.style.pointerEvents = "none";
   return group([bg, ...crosses, vertLine]);
 };
+
 /**
  * Creates the SVG for an X gate
  *
@@ -328,6 +347,30 @@ const _x = (metadata: Metadata, _: number): SVGElement => {
   const ys = targetsY.flatMap((y) => y as number[]);
   return _oplus(x, ys[0]);
 };
+
+/**
+ * Creates the SVG for a ket notation (e.g "|0⟩" or "|1⟩") gate.
+ *
+ * @param label    The label for the ket notation (e.g., "0" or "1").
+ * @param metadata The metadata object containing information about the gate's position and appearance.
+ *
+ * @returns SVG representation of the ket notation gate.
+ */
+const _ket = (label: string, metadata: Metadata): SVGElement => {
+  const { x, targetsY, width } = metadata;
+  const gate = _unitary(
+    `|${label}〉`,
+    x,
+    targetsY as number[][],
+    width,
+    undefined,
+    false,
+    "gate-ket",
+  );
+  gate.querySelector("text")!.setAttribute("class", "ket-text");
+  return gate;
+};
+
 /**
  * Generates cross for display in SWAP gate.
  *
@@ -396,6 +439,7 @@ const _controlledGate = (
   const maxY: number = Math.max(...controlsY, ...(targetsY as number[]));
   const minY: number = Math.min(...controlsY, ...(targetsY as number[]));
   const vertLine: SVGElement = line(x, minY, x, maxY);
+  vertLine.style.pointerEvents = "none";
   const svg: SVGElement = _createGate(
     [vertLine, ...controlledDotsSvg, ...targetGateSvgs],
     metadata,
@@ -439,7 +483,7 @@ const _groupedOperations = (
   const box: SVGElement = dashedBox(x1, y1, x2, y2);
   const elems: SVGElement[] = [box];
   if (children != null)
-    elems.push(formatGates(children as Metadata[], nestedDepth + 1));
+    elems.push(formatGates(children as Metadata[][], nestedDepth + 1));
   return _createGate(elems, metadata, nestedDepth);
 };
 
@@ -457,7 +501,7 @@ const _classicalControlled = (
 ): SVGElement => {
   const { controlsY, dataAttributes } = metadata;
   const targetsY: number[] = metadata.targetsY as number[];
-  const children: Metadata[][] = metadata.children as Metadata[][];
+  const children: Metadata[][][] = metadata.children as Metadata[][][];
   let { x, width } = metadata;
 
   const controlY = controlsY[0];
@@ -543,15 +587,4 @@ const _controlCircle = (
     class: "classically-controlled-btn",
   });
 
-export {
-  formatGates,
-  _formatGate,
-  _createGate,
-  _zoomButton,
-  _measure,
-  _unitary,
-  _swap,
-  _controlledGate,
-  _groupedOperations,
-  _classicalControlled,
-};
+export { formatGates, formatGate };

package/ux/circuit-vis/formatters/inputFormatter.ts

@@ -27,15 +27,15 @@ const formatInputs = (
   const registers: RegisterMap = {};
 
   let currY: number = startY;
-  qubits.forEach(({ id, numChildren }) => {
+  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 };
 
     // If there are no attached classical registers, increment y by fixed register height
-    if (numChildren == null || numChildren === 0) {
+    if (numResults == null || numResults === 0) {
       currY += registerHeight;
       return;
     }
@@ -44,7 +44,7 @@ const formatInputs = (
     currY += classicalRegHeight;
 
     // Add classical wires
-    registers[id].children = Array.from(Array(numChildren), () => {
+    registers[id].children = Array.from(Array(numResults), () => {
       const clsReg: RegisterMetadata = {
         type: RegisterType.Classical,
         y: currY,
@@ -55,7 +55,7 @@ const formatInputs = (
   });
 
   return {
-    qubitWires: group(qubitWires),
+    qubitWires: group(qubitWires, { class: "qubit-input-states" }),
     registers,
     svgHeight: currY,
   };
@@ -68,8 +68,39 @@ const formatInputs = (
  *
  * @returns SVG text component for the input register.
  */
-const _qubitInput = (y: number): SVGElement => {
-  const el: SVGElement = text("|0⟩", 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;

package/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 }) => {
@@ -34,7 +42,7 @@ const formatRegisters = (
       formattedRegs.push(_classicalRegister(x, gateY, endX, y));
     });
   });
-  return group(formattedRegs);
+  return group(formattedRegs, { class: "wires" });
 };
 
 /**
@@ -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);
-
-  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, _classicalRegister, _qubitRegister };
+export { formatRegisters };

package/ux/circuit-vis/index.ts

@@ -2,29 +2,34 @@
 // Licensed under the MIT license.
 
 import { Sqore } from "./sqore";
-import { Circuit } from "./circuit";
-import { StyleConfig } from "./styles";
+import { CircuitGroup } from "./circuit";
 
 /**
  * Render `circuit` into `container` at the specified layer depth.
  *
- * @param circuit Circuit to be visualized.
+ * @param circuitGroup Group of circuits to be visualized.
  * @param container HTML element for rendering visualization into.
- * @param style Custom visualization style.
  * @param renderDepth Initial layer depth at which to render gates.
+ * @param isEditable Whether the circuit is editable.
+ * @param editCallback Callback function to be called when the circuit is edited.
  */
 export const draw = (
-  circuit: Circuit,
+  circuitGroup: CircuitGroup,
   container: HTMLElement,
-  style: StyleConfig | string = {},
   renderDepth = 0,
+  isEditable = false,
+  editCallback?: (circuitGroup: CircuitGroup) => void,
 ): void => {
-  const sqore = new Sqore(circuit, style);
+  const sqore = new Sqore(circuitGroup, isEditable, editCallback);
   sqore.draw(container, renderDepth);
 };
 
-export { STYLES } from "./styles";
-
 // Export types
-export type { StyleConfig } from "./styles";
-export type { Circuit, Qubit, Operation } from "./circuit";
+export type {
+  CircuitGroup,
+  Circuit,
+  ComponentGrid,
+  Column,
+  Qubit,
+  Operation,
+} from "./circuit";

package/ux/circuit-vis/metadata.ts

@@ -15,6 +15,8 @@ export enum GateType {
   Swap,
   /** X gate. */
   X,
+  /** |0〉 or |1〉 gate. */
+  Ket,
   /** Single/multi qubit unitary gate. */
   Unitary,
   /** Single/multi controlled unitary gate. */
@@ -50,7 +52,7 @@ export interface Metadata {
   /** Gate width. */
   width: number;
   /** Children operations as part of group. */
-  children?: (Metadata | Metadata[])[];
+  children?: Metadata[][] | Metadata[][][];
   /** Custom data attributes to attach to gate element. */
   dataAttributes?: DataAttributes;
 }