qsharp-lang 1.23.1-dev → 1.23.2-dev

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

@@ -9,9 +9,11 @@ import {
   argsFontSize,
   controlBtnRadius,
   controlBtnOffset,
-  groupBoxPadding,
+  groupPaddingX,
   classicalRegHeight,
-  nestedGroupPadding,
+  groupTopPadding,
+  labelPaddingX,
+  groupLabelPaddingY,
 } from "../constants.js";
 import {
   createSvgElement,
@@ -36,12 +38,9 @@ import { mathChars } from "../utils.js";
  *
  * @returns SVG representation of operations.
  */
-const formatGates = (
-  renderData: GateRenderData[][],
-  nestedDepth = 0,
-): SVGElement => {
+const formatGates = (renderData: GateRenderData[][]): SVGElement => {
   const formattedGates: SVGElement[] = renderData
-    .map((col) => col.map((renderData) => formatGate(renderData, nestedDepth)))
+    .map((col) => col.map((renderData) => formatGate(renderData)))
     .flat();
   return group(formattedGates);
 };
@@ -50,46 +49,33 @@ const formatGates = (
  * Takes in an operation's rendering data and formats it into SVG.
  *
  * @param renderData The rendering data of the gate.
- * @param nestedDepth Depth of nested operations (used in classically controlled and grouped operations).
  *
  * @returns SVG representation of gate.
  */
-const formatGate = (
-  renderData: GateRenderData,
-  nestedDepth = 0,
-): SVGElement => {
+const formatGate = (renderData: GateRenderData): SVGElement => {
   const { type, x, controlsY, targetsY, label, displayArgs, width } =
     renderData;
   switch (type) {
     case GateType.Measure:
-      return _createGate(
-        [_measure(x, controlsY[0], controlsY)],
-        renderData,
-        nestedDepth,
-      );
+      return _createGate([_measure(x, controlsY[0], controlsY)], renderData);
     case GateType.Unitary:
       return _createGate(
         [_unitary(label, x, targetsY as number[][], width, displayArgs)],
         renderData,
-        nestedDepth,
       );
     case GateType.X:
-      return _createGate([_x(renderData)], renderData, nestedDepth);
+      return _createGate([_x(renderData)], renderData);
     case GateType.Ket:
-      return _createGate([_ket(label, renderData)], renderData, nestedDepth);
+      return _createGate([_ket(label, renderData)], renderData);
     case GateType.Swap:
       return controlsY.length > 0
-        ? _controlledGate(renderData, nestedDepth)
-        : _createGate(
-            [_swap(renderData, nestedDepth)],
-            renderData,
-            nestedDepth,
-          );
+        ? _controlledGate(renderData)
+        : _createGate([_swap(renderData)], renderData);
     case GateType.Cnot:
     case GateType.ControlledUnitary:
-      return _controlledGate(renderData, nestedDepth);
+      return _controlledGate(renderData);
     case GateType.Group:
-      return _groupedOperations(renderData, nestedDepth);
+      return _groupedOperations(renderData);
     case GateType.ClassicalControlled:
       return _classicalControlled(renderData);
     default:
@@ -109,7 +95,6 @@ const formatGate = (
 const _createGate = (
   svgElems: SVGElement[],
   renderData: GateRenderData,
-  nestedDepth: number,
 ): SVGElement => {
   const { dataAttributes } = renderData || {};
   const attributes: { [attr: string]: string } = { class: "gate" };
@@ -117,13 +102,11 @@ const _createGate = (
     ([attr, val]) => (attributes[`data-${attr}`] = val),
   );
 
-  const zoomBtn: SVGElement | null = _zoomButton(renderData, nestedDepth);
-  if (zoomBtn != null) svgElems = svgElems.concat([zoomBtn]);
-
-  const gateElem = group(svgElems, attributes);
-
   // If there's a source location, wrap the gate in an SVG <a> element to make it clickable
-  if (renderData.link) {
+  //
+  // `GateType.Group` corresponds to an *expanded* group, which will contain clickable gates
+  // so therefore should not itself be clickable
+  if (renderData.link && renderData.type !== GateType.Group) {
     const linkElem = createSvgElement("a", {
       href: renderData.link.href,
       class: "qs-circuit-source-link",
@@ -134,12 +117,20 @@ const _createGate = (
     titleElem.textContent = renderData.link.title;
     linkElem.appendChild(titleElem);
 
-    // Add the gate as a child of the link
-    linkElem.appendChild(gateElem);
-    return linkElem;
+    // Add the gate elements as children of the link
+    for (const e of svgElems) {
+      linkElem.appendChild(e);
+    }
+
+    svgElems = [linkElem];
   }
 
-  return gateElem;
+  // Zoom button comes last so it's on top of the <a> element if both are present
+  // This allows clicking the zoom button without triggering the link
+  const zoomBtn: SVGElement | null = _zoomButton(renderData);
+  if (zoomBtn != null) svgElems = svgElems.concat([zoomBtn]);
+
+  return group(svgElems, attributes);
 };
 
 /**
@@ -151,16 +142,10 @@ const _createGate = (
  *
  * @returns SVG element for expand/collapse button if needed, or null otherwise.
  */
-const _zoomButton = (
-  renderData: GateRenderData,
-  nestedDepth: number,
-): SVGElement | null => {
+const _zoomButton = (renderData: GateRenderData): SVGElement | null => {
   if (renderData == undefined) return null;
 
-  const [gateBoundingBoxX, gateBoundingBoxY] = _gateBoundingBox(
-    renderData,
-    nestedDepth,
-  );
+  const [gateBoundingBoxX, gateBoundingBoxY] = _gateBoundingBox(renderData);
   let { dataAttributes } = renderData;
   dataAttributes = dataAttributes || {};
 
@@ -194,45 +179,39 @@ const _zoomButton = (
  * may itself be a group of operations.
  *
  * @param renderData Operation render data.
- * @param nestedDepth Depth of nested operations.
  *
  * @returns [x, y, width, height]
  */
 const _gateBoundingBox = (
   renderData: GateRenderData,
-  nestedDepth: number,
 ): [number, number, number, number] => {
-  const {
-    x: xFromRenderData,
-    width: widthFromRenderData,
-    type,
-    targetsY,
-  } = renderData;
+  const { x: centerX, width, targetsY, topPadding, bottomPadding } = renderData;
 
+  const x = centerX - width / 2;
   const ys = targetsY?.flatMap((y) => y as number[]) || [];
   const maxY = Math.max(...ys);
   const minY = Math.min(...ys);
 
-  let x: number, y: number, width: number, height: number;
-
-  switch (type) {
-    case GateType.Group: {
-      const padding = groupBoxPadding - nestedDepth * nestedGroupPadding;
-
-      x = xFromRenderData - 2 * padding;
-      y = minY - gateHeight / 2 - padding;
-      width = widthFromRenderData + 2 * padding;
-      height = maxY - minY + gateHeight + 2 * padding;
-
-      return [x, y, width, height];
-    }
-
-    default:
-      x = xFromRenderData - widthFromRenderData / 2;
-      y = minY - gateHeight / 2;
-      width = widthFromRenderData;
-      height = maxY - minY + gateHeight;
-  }
+  // Here, we want to expand the bounding box to include the whole dashed
+  // box around the group, which will be sized according to the nested depth.
+  //
+  // Example of a grouped operation:
+  //
+  // y ->            ┌╌╌╌╌╌╌╌┐
+  //                 ╎┌╌╌╌╌╌┐╎
+  //                 ╎╎     ╎╎
+  //                 ╎╎ ┌─┐ ╎╎
+  // minY ->      ───┼┼─│ │─┼┼──
+  //                 ╎╎ │X│ ╎╎
+  // maxY ->      ───┼┼─│ │─┼┼──
+  //                 ╎╎ └╥┘ ╎╎
+  //                 ╎╎  ╚══╪╪══
+  //                 ╎╎     ╎╎
+  //                 ╎└╌╌╌╌╌┘╎
+  // y + height ->   └╌╌╌╌╌╌╌┘
+  //
+  const y = minY - gateHeight / 2 - topPadding;
+  const height = maxY - minY + gateHeight + bottomPadding + topPadding;
 
   return [x, y, width, height];
 };
@@ -393,9 +372,12 @@ const _unitaryBox = (
   }
   uBox.setAttribute("data-wire-ys", JSON.stringify(wireYs));
   uBox.setAttribute("data-width", `${width}`);
-  const labelY = y + height / 2 - (displayArgs == null ? 0 : 7);
-  const labelText = text(label, x, labelY);
-  _style_gate_text(labelText);
+
+  const labelText = _labelText(
+    label,
+    x,
+    y + height / 2 - (displayArgs == null ? 0 : 7),
+  );
 
   const elems = [uBox, labelText];
   if (displayArgs != null) {
@@ -414,18 +396,15 @@ const _unitaryBox = (
  * Creates the SVG for a SWAP gate on y coords given by `renderData`.
  *
  * @param renderData - The render data containing information about the gate, including position and targets.
- * @param nestedDepth - The depth of nested operations (used for adjusting padding and positioning).
  *
  * @returns SVG representation of SWAP gate.
  */
-const _swap = (renderData: GateRenderData, nestedDepth: number): SVGElement => {
+const _swap = (renderData: GateRenderData): SVGElement => {
   const { x: centerX, targetsY } = renderData;
 
   // Get SVGs of crosses
-  const [boundingBoxX, boundingBoxY, width, height] = _gateBoundingBox(
-    renderData,
-    nestedDepth,
-  );
+  const [boundingBoxX, boundingBoxY, width, height] =
+    _gateBoundingBox(renderData);
   const ys = targetsY?.flatMap((y) => y as number[]) || [];
   const bg: SVGElement = box(
     boundingBoxX,
@@ -508,10 +487,7 @@ const _cross = (x: number, y: number): SVGElement => {
  *
  * @returns SVG representation of controlled gate.
  */
-const _controlledGate = (
-  renderData: GateRenderData,
-  nestedDepth: number,
-): SVGElement => {
+const _controlledGate = (renderData: GateRenderData): SVGElement => {
   const targetGateSvgs: SVGElement[] = [];
   const { type, x, controlsY, label, displayArgs, width } = renderData;
   let { targetsY } = renderData;
@@ -545,12 +521,11 @@ const _controlledGate = (
   // Create control lines
   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);
+  const vertLine: SVGElement = line(x, minY, x, maxY, "control-line");
   vertLine.style.pointerEvents = "none";
   const svg: SVGElement = _createGate(
     [vertLine, ...controlledDotsSvg, ...targetGateSvgs],
     renderData,
-    nestedDepth,
   );
   return svg;
 };
@@ -583,19 +558,24 @@ const _oplus = (x: number, y: number, wireYs: number[]): SVGElement => {
  *
  * @returns SVG representation of gate.
  */
-const _groupedOperations = (
-  renderData: GateRenderData,
-  nestedDepth: number,
-): SVGElement => {
-  const { children } = renderData;
-  const [x, y, w, h] = _gateBoundingBox(renderData, nestedDepth);
+const _groupedOperations = (renderData: GateRenderData): SVGElement => {
+  const { children, label } = renderData;
+  const [x, y, w, h] = _gateBoundingBox(renderData);
 
   // Draw dashed box around children gates
   const box: SVGElement = dashedBox(x, y, w, h, "gate-unitary");
   const elems: SVGElement[] = [box];
-  if (children != null)
-    elems.push(formatGates(children as GateRenderData[][], nestedDepth + 1));
-  return _createGate(elems, renderData, nestedDepth);
+  if (children != null) elems.push(formatGates(children as GateRenderData[][]));
+
+  const labelText = _labelText(
+    label,
+    x + labelPaddingX,
+    y + groupTopPadding / 2 + groupLabelPaddingY,
+  );
+  labelText.classList.add("qs-group-label");
+  elems.push(labelText);
+
+  return _createGate(elems, renderData);
 };
 
 /**
@@ -608,7 +588,7 @@ const _groupedOperations = (
  */
 const _classicalControlled = (
   renderData: GateRenderData,
-  padding: number = groupBoxPadding,
+  padding: number = groupPaddingX,
 ): SVGElement => {
   const { controlsY, dataAttributes } = renderData;
   const targetsY: number[] = renderData.targetsY as number[];
@@ -658,8 +638,8 @@ const _classicalControlled = (
     "classical-line",
   );
 
-  width = width - controlBtnOffset + (padding - groupBoxPadding) * 2;
-  x += groupBoxPadding - padding;
+  width = width - controlBtnOffset + (padding - groupPaddingX) * 2;
+  x += groupPaddingX - padding;
   const y: number = targetsY[0] - gateHeight / 2 - padding;
   const height: number = targetsY[1] - targetsY[0] + gateHeight + padding * 2;
 
@@ -699,4 +679,19 @@ const _controlCircle = (
     class: "classically-controlled-btn",
   });
 
+/**
+ * Generates the SVG representation of the label text for a gate or grouped operation.
+ *
+ * @param label Label text.
+ * @param x     x coord.
+ * @param y     y coord.
+ *
+ * @returns SVG representation of label text.
+ */
+function _labelText(label: string, x: number, y: number): SVGTextElement {
+  const labelText = text(label, x, y, labelFontSize);
+  _style_gate_text(labelText);
+  return labelText;
+}
+
 export { formatGates, formatGate };

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

@@ -6,8 +6,11 @@ import { RegisterType, RegisterMap, RegisterRenderData } from "../register.js";
 import {
   leftPadding,
   startY,
-  registerHeight,
   classicalRegHeight,
+  groupTopPadding,
+  groupBottomPadding,
+  gateHeight,
+  gatePadding,
 } from "../constants.js";
 import { createSvgElement, group, text } from "./formatUtils.js";
 import { mathChars } from "../utils.js";
@@ -23,46 +26,145 @@ import { mathChars } from "../utils.js";
  */
 const formatInputs = (
   qubits: Qubit[],
+  rowHeights: {
+    [qubitIndex: number]: {
+      heightAboveWire: number;
+      heightBelowWire: number;
+    };
+  },
   renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
-): { qubitWires: SVGElement; registers: RegisterMap; svgHeight: number } => {
-  const qubitWires: SVGElement[] = [];
+): { qubitLabels: SVGElement; registers: RegisterMap; svgHeight: number } => {
+  const qubitLabels: SVGElement[] = [];
   const registers: RegisterMap = {};
 
   let currY: number = startY;
+
+  // currY ->    ┌╌╌╌╌╌╌╌┐
+  //             ╎┌╌╌╌╌╌┐╎
+  //             ╎╎     ╎╎
+  //             ╎╎ ┌─┐ ╎╎
+  //          ───┼┼─│X│─┼┼──
+  //             ╎╎ └╥┘ ╎╎
+  //             ╎╎  ╚══╪╪══
+  //             ╎╎     ╎╎
+  //             ╎└╌╌╌╌╌┘╎
+  //             └╌╌╌╌╌╌╌┘
+
   qubits.forEach(({ id, numResults, declarations }, wireIndex) => {
+    const { heightAboveWire, heightBelowWire } = rowHeights[wireIndex] || {
+      heightAboveWire: 0,
+      heightBelowWire: 0,
+    };
+    currY += heightAboveWire * groupTopPadding;
+
+    //             ┌╌╌╌╌╌╌╌┐
+    //             ╎┌╌╌╌╌╌┐╎
+    // currY ->    ╎╎     ╎╎
+    //             ╎╎ ┌─┐ ╎╎
+    //          ───┼┼─│X│─┼┼──
+    //             ╎╎ └╥┘ ╎╎
+    //             ╎╎  ╚══╪╪══
+    //             ╎╎     ╎╎
+    //             ╎└╌╌╌╌╌┘╎
+    //             └╌╌╌╌╌╌╌┘
+
+    currY += gatePadding + gateHeight / 2;
+
+    //             ┌╌╌╌╌╌╌╌┐
+    //             ╎┌╌╌╌╌╌┐╎
+    //             ╎╎     ╎╎
+    //             ╎╎ ┌─┐ ╎╎
+    // currY -> ───┼┼─│X│─┼┼──
+    //             ╎╎ └╥┘ ╎╎
+    //             ╎╎  ╚══╪╪══
+    //             ╎╎     ╎╎
+    //             ╎└╌╌╌╌╌┘╎
+    //             └╌╌╌╌╌╌╌┘
+
     const link: { link?: { href: string; title: string } } = {};
     if (renderLocations && declarations && declarations.length > 0) {
       link.link = renderLocations(declarations);
     }
 
     // Add qubit wire to list of qubit wires
-    qubitWires.push(qubitInput(currY, wireIndex, id.toString(), link.link));
+    qubitLabels.push(qubitInput(currY, wireIndex, id.toString(), link.link));
 
     // Create qubit register
-    registers[id] = { type: RegisterType.Qubit, y: currY };
-
-    // If there are no attached classical registers, increment y by fixed register height
-    if (numResults == null || numResults === 0) {
-      currY += registerHeight;
-      return;
-    }
+    registers[id] = {
+      type: RegisterType.Qubit,
+      y: currY,
+    };
+
+    currY += gateHeight / 2;
+
+    //             ┌╌╌╌╌╌╌╌┐
+    //             ╎┌╌╌╌╌╌┐╎
+    //             ╎╎     ╎╎
+    //             ╎╎ ┌─┐ ╎╎
+    //          ───┼┼─│X│─┼┼──
+    // currY ->    ╎╎ └╥┘ ╎╎
+    //             ╎╎  ╚══╪╪══
+    //             ╎╎     ╎╎
+    //             ╎└╌╌╌╌╌┘╎
+    //             └╌╌╌╌╌╌╌┘
 
     // Increment current height by classical register height for attached classical registers
-    currY += classicalRegHeight;
 
     // Add classical wires
     registers[id].children = Array.from(Array(numResults), () => {
+      currY += classicalRegHeight;
+
+      //             ┌╌╌╌╌╌╌╌┐
+      //             ╎┌╌╌╌╌╌┐╎
+      //             ╎╎     ╎╎
+      //             ╎╎ ┌─┐ ╎╎
+      //          ───┼┼─│X│─┼┼──
+      //             ╎╎ └╥┘ ╎╎
+      // currY ->    ╎╎  ╚══╪╪══
+      //             ╎╎     ╎╎
+      //             ╎└╌╌╌╌╌┘╎
+      //             └╌╌╌╌╌╌╌┘
+
       const clsReg: RegisterRenderData = {
         type: RegisterType.Classical,
         y: currY,
       };
-      currY += classicalRegHeight;
       return clsReg;
     });
+
+    currY += gatePadding;
+
+    //             ┌╌╌╌╌╌╌╌┐
+    //             ╎┌╌╌╌╌╌┐╎
+    //             ╎╎     ╎╎
+    //             ╎╎ ┌─┐ ╎╎
+    //          ───┼┼─│X│─┼┼──
+    //             ╎╎ └╥┘ ╎╎
+    //             ╎╎  ╚══╪╪══
+    // currY ->    ╎╎     ╎╎
+    //             ╎└╌╌╌╌╌┘╎
+    //             └╌╌╌╌╌╌╌┘
+
+    currY += heightBelowWire * groupBottomPadding;
+
+    //             ┌╌╌╌╌╌╌╌┐
+    //             ╎┌╌╌╌╌╌┐╎
+    //             ╎╎     ╎╎
+    //             ╎╎ ┌─┐ ╎╎
+    //          ───┼┼─│X│─┼┼──
+    //             ╎╎ └╥┘ ╎╎
+    //             ╎╎  ║  ╎╎
+    //             ╎╎  ╚══╪╪══
+    //             ╎└╌╌╌╌╌┘╎
+    //             └╌╌╌╌╌╌╌┘
+    // currY ->
   });
 
+  // Additional padding at the very bottom
+  currY += classicalRegHeight;
+
   return {
-    qubitWires: group(qubitWires, { class: "qubit-input-states" }),
+    qubitLabels: group(qubitLabels, { class: "qubit-input-states" }),
     registers,
     svgHeight: currY,
   };

package/ux/circuit-vis/gateRenderData.ts

@@ -53,6 +53,10 @@ export interface GateRenderData {
   width: number;
   /** Children operations as part of group. */
   children?: GateRenderData[][] | GateRenderData[][][];
+  /** Vertical space from the top of this gate to the top of the topmost contained gate. 0 for non-groups. */
+  topPadding: number;
+  /** Vertical space from the bottom of this gate to the bottom of the bottommost contained gate. 0 for non-groups. */
+  bottomPadding: number;
   /** Custom data attributes to attach to gate element. */
   dataAttributes?: DataAttributes;
   /** Link href and title for clickable gate. */

package/ux/circuit-vis/panel.ts

@@ -10,7 +10,7 @@ import {
 } from "./constants.js";
 import { formatGate } from "./formatters/gateFormatter.js";
 import { GateType, GateRenderData } from "./gateRenderData.js";
-import { getGateWidth } from "./utils.js";
+import { getMinGateWidth } from "./utils.js";
 
 /**
  * Create a panel for the circuit visualization.
@@ -253,6 +253,8 @@ const toRenderData = (
     targetsY: [target],
     label: "",
     width: -1,
+    topPadding: 0,
+    bottomPadding: 0,
   };
 
   if (operation === undefined) return renderData;
@@ -294,7 +296,7 @@ const toRenderData = (
   if (operation.args !== undefined && operation.args.length > 0)
     renderData.displayArgs = operation.args[0];
 
-  renderData.width = getGateWidth(renderData);
+  renderData.width = getMinGateWidth(renderData);
   renderData.x = x + 1 + renderData.width / 2; // offset by 1 for left padding
 
   return renderData;