qsharp-lang 1.23.1-dev → 1.23.2-dev

package/ux/circuit-vis/process.ts

@@ -6,7 +6,9 @@ import {
   startX,
   gatePadding,
   controlBtnOffset,
-  groupBoxPadding,
+  groupPaddingX,
+  groupTopPadding,
+  groupBottomPadding,
 } from "./constants.js";
 import {
   ComponentGrid,
@@ -16,7 +18,7 @@ import {
 } from "./circuit.js";
 import { GateRenderData, GateType } from "./gateRenderData.js";
 import { Register, RegisterMap } from "./register.js";
-import { getGateWidth } from "./utils.js";
+import { getMinGateWidth } from "./utils.js";
 
 /**
  * Takes in a component grid and maps the operations to `GateRenderData` objects which
@@ -24,20 +26,38 @@ import { getGateWidth } from "./utils.js";
  *
  * @param componentGrid Grid of circuit components.
  * @param registers  Mapping from qubit IDs to register render data.
+ * @param topY y-coordinate of the topmost register involved in the operation.
+ * @param bottomY y-coordinate of the bottommost register involved in the operation.
+ * @param renderLocations Optional function to map source locations to link hrefs and titles.
  *
  * @returns An object containing `renderDataArray` (2D Array of GateRenderData objects) and
  *          `svgWidth` which is the width of the entire SVG.
  */
 const processOperations = (
   componentGrid: ComponentGrid,
+  topY: number,
+  bottomY: number,
   registers: RegisterMap,
   renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
-): { renderDataArray: GateRenderData[][]; svgWidth: number } => {
+): {
+  renderDataArray: GateRenderData[][];
+  svgWidth: number;
+  maxTopPadding: number;
+  maxBottomPadding: number;
+} => {
   if (componentGrid.length === 0)
-    return { renderDataArray: [], svgWidth: startX + gatePadding * 2 };
+    return {
+      renderDataArray: [],
+      svgWidth: startX + gatePadding * 2,
+      maxTopPadding: 0,
+      maxBottomPadding: 0,
+    };
   const numColumns: number = componentGrid.length;
   const columnsWidths: number[] = new Array(numColumns).fill(minGateWidth);
 
+  let maxTopPadding = 0;
+  let maxBottomPadding = 0;
+
   // Get classical registers and their starting column index
   const classicalRegs: [number, Register][] =
     _getClassicalRegStarts(componentGrid);
@@ -52,6 +72,31 @@ const processOperations = (
           renderLocations,
         );
 
+        let targets: Register[];
+        switch (op.kind) {
+          case "unitary":
+            targets = op.targets;
+            break;
+          case "measurement":
+            targets = op.qubits;
+            break;
+          case "ket":
+            targets = op.targets;
+            break;
+        }
+        const minTargetY = Math.min(...(renderData.targetsY as number[]));
+        const maxTargetY = Math.max(...(renderData.targetsY as number[]));
+
+        if (topY === minTargetY) {
+          maxTopPadding = Math.max(maxTopPadding, renderData.topPadding);
+        }
+        if (bottomY === maxTargetY) {
+          maxBottomPadding = Math.max(
+            maxBottomPadding,
+            renderData.bottomPadding,
+          );
+        }
+
         if (
           op != null &&
           [GateType.Unitary, GateType.Ket, GateType.ControlledUnitary].includes(
@@ -75,19 +120,6 @@ const processOperations = (
               return children[reg.result].y;
             });
 
-          let targets: Register[];
-          switch (op.kind) {
-            case "unitary":
-              targets = op.targets;
-              break;
-            case "measurement":
-              targets = op.qubits;
-              break;
-            case "ket":
-              targets = op.targets;
-              break;
-          }
-
           renderData.targetsY = _splitTargetsY(
             targets,
             classicalRegY,
@@ -112,7 +144,12 @@ const processOperations = (
   // Fill in x coord of each gate
   const endX: number = _fillRenderDataX(filteredArray, columnsWidths);
 
-  return { renderDataArray: filteredArray, svgWidth: endX };
+  return {
+    renderDataArray: filteredArray,
+    svgWidth: endX,
+    maxTopPadding,
+    maxBottomPadding,
+  };
 };
 
 /**
@@ -166,6 +203,8 @@ const _opToRenderData = (
     targetsY: [],
     label: "",
     width: -1,
+    topPadding: 0,
+    bottomPadding: 0,
   };
 
   if (op == null) return renderData;
@@ -203,6 +242,8 @@ const _opToRenderData = (
   // Set y coords
   renderData.controlsY = controls?.map((reg) => _getRegY(reg, registers)) || [];
   renderData.targetsY = targets.map((reg) => _getRegY(reg, registers));
+  const topY = Math.min(...(renderData.targetsY as number[]));
+  const bottomY = Math.max(...(renderData.targetsY as number[]));
 
   if (isConditional) {
     // Classically-controlled operations
@@ -219,13 +260,18 @@ const _opToRenderData = (
         ),
       }))
       .filter((col) => col.components.length > 0);
+
     let childrenInstrs = processOperations(
       onZeroOps,
+      topY,
+      bottomY,
       registers,
       renderLocations,
     );
     const zeroGates: GateRenderData[][] = childrenInstrs.renderDataArray;
     const zeroChildWidth: number = childrenInstrs.svgWidth;
+    const zeroChildMaxTopPadding = childrenInstrs.maxTopPadding;
+    const zeroChildMaxBottomPadding = childrenInstrs.maxBottomPadding;
 
     // Gates to display when classical bit is 1.
     const onOneOps: ComponentGrid = children
@@ -235,18 +281,37 @@ const _opToRenderData = (
         ),
       }))
       .filter((col) => col.components.length > 0);
-    childrenInstrs = processOperations(onOneOps, registers, renderLocations);
+    childrenInstrs = processOperations(
+      onOneOps,
+      topY,
+      bottomY,
+      registers,
+      renderLocations,
+    );
     const oneGates: GateRenderData[][] = childrenInstrs.renderDataArray;
     const oneChildWidth: number = childrenInstrs.svgWidth;
+    const oneChildMaxTopPadding = childrenInstrs.maxTopPadding;
+    const oneChildMaxBottomPadding = childrenInstrs.maxBottomPadding;
 
     // Subtract startX (left-side) and 2*gatePadding (right-side) from nested child gates width
     const width: number =
       Math.max(zeroChildWidth, oneChildWidth) - startX - gatePadding * 2;
 
+    const maxTopPadding = Math.max(
+      zeroChildMaxTopPadding,
+      oneChildMaxTopPadding,
+    );
+    const maxBottomPadding = Math.max(
+      zeroChildMaxBottomPadding,
+      oneChildMaxBottomPadding,
+    );
+
     renderData.type = GateType.ClassicalControlled;
     renderData.children = [zeroGates, oneGates];
     // Add additional width from control button and inner box padding for dashed box
-    renderData.width = width + controlBtnOffset + groupBoxPadding * 2;
+    renderData.width = width + controlBtnOffset + groupPaddingX * 2;
+    renderData.topPadding = maxTopPadding + groupTopPadding;
+    renderData.bottomPadding = maxBottomPadding + groupBottomPadding;
 
     // Set targets to first and last quantum registers so we can render the surrounding box
     // around all quantum registers.
@@ -259,17 +324,23 @@ const _opToRenderData = (
   ) {
     const childrenInstrs = processOperations(
       children!,
+      topY,
+      bottomY,
       registers,
       renderLocations,
     );
     renderData.type = GateType.Group;
+    renderData.label = gate;
     renderData.children = childrenInstrs.renderDataArray;
     // _zoomButton function in gateFormatter.ts relies on
     // 'expanded' attribute to render zoom button
     renderData.dataAttributes = { expanded: "true" };
-    // Subtract startX (left-side) and add inner box padding (minus nested gate padding) for dashed box
+    // Subtract startX (left-side) and add inner box padding for dashed box
     renderData.width =
-      childrenInstrs.svgWidth - startX + (groupBoxPadding - gatePadding) * 2;
+      childrenInstrs.svgWidth - startX - gatePadding * 3 + groupPaddingX * 2; // (svgWidth includes 3 extra gate paddings)
+    renderData.topPadding = childrenInstrs.maxTopPadding + groupTopPadding;
+    renderData.bottomPadding =
+      childrenInstrs.maxBottomPadding + groupBottomPadding;
   } else if (op.kind === "measurement") {
     renderData.type = GateType.Measure;
   } else if (op.kind === "ket") {
@@ -296,8 +367,9 @@ const _opToRenderData = (
   // For now, we only display the first argument
   if (args !== undefined && args.length > 0) renderData.displayArgs = args[0];
 
-  // Set gate width
-  renderData.width = getGateWidth(renderData);
+  // Minimum width is calculated based on the label and args
+  const minWidth = getMinGateWidth(renderData);
+  renderData.width = Math.max(minWidth, renderData.width);
 
   if (op.metadata?.source && renderLocations) {
     renderData.link = renderLocations([op.metadata.source]);
@@ -432,16 +504,14 @@ const _fillRenderDataX = (
         case GateType.Group:
           {
             // Subtract startX offset from nested gates and add offset and padding
-            let offset: number = x - startX + groupBoxPadding;
+            let offset: number = x - startX + groupPaddingX;
             if (renderData.type === GateType.ClassicalControlled)
               offset += controlBtnOffset;
 
             // Offset each x coord in children gates
             _offsetChildrenX(renderData.children, offset);
 
-            // We don't use the centre x coord because we only care about the rightmost x for
-            // rendering the box around the group of nested gates
-            renderData.x = x;
+            renderData.x = x + columnWidths[colIndex] / 2;
           }
           break;
 

package/ux/circuit-vis/sqore.ts

@@ -11,8 +11,8 @@ import {
   CircuitGroup,
   ComponentGrid,
   Operation,
-  Column,
   SourceLocation,
+  Qubit,
 } from "./circuit.js";
 import { GateRenderData } from "./gateRenderData.js";
 import {
@@ -24,6 +24,7 @@ import {
 import { createDropzones } from "./draggable.js";
 import { enableEvents } from "./events.js";
 import { createPanel, enableRunButton } from "./panel.js";
+import { getMinMaxRegIdx } from "./utils.js";
 
 /**
  * Contains render data for visualization.
@@ -115,28 +116,11 @@ export class Sqore {
       ),
     );
 
-    // Render operations starting at given depth
-    _circuit.componentGrid = this.selectOpsAtDepth(
-      _circuit.componentGrid,
-      this.renderDepth,
-    );
+    // Expand operations to the specified render depth
+    this.expandOperationsToDepth(_circuit.componentGrid, this.renderDepth);
 
-    // If only one top-level operation, expand automatically:
-    if (
-      _circuit.componentGrid.length == 1 &&
-      _circuit.componentGrid[0].components.length == 1 &&
-      _circuit.componentGrid[0].components[0].dataAttributes != null &&
-      Object.prototype.hasOwnProperty.call(
-        _circuit.componentGrid[0].components[0].dataAttributes,
-        "location",
-      ) &&
-      _circuit.componentGrid[0].components[0].dataAttributes["expanded"] !==
-        "false"
-    ) {
-      const location: string =
-        _circuit.componentGrid[0].components[0].dataAttributes["location"];
-      this.expandOperation(_circuit.componentGrid, location);
-    }
+    // Auto-expand any groups with single children
+    this.expandIfSingleOperation(_circuit.componentGrid);
 
     // Create visualization components
     const composedSqore: ComposedSqore = this.compose(_circuit);
@@ -169,6 +153,50 @@ export class Sqore {
     }
   }
 
+  private expandOperationsToDepth(
+    componentGrid: ComponentGrid,
+    targetDepth: number,
+    currentDepth: number = 0,
+  ) {
+    for (const col of componentGrid) {
+      for (const op of col.components) {
+        if (currentDepth < targetDepth && op.children != null) {
+          op.conditionalRender = ConditionalRender.AsGroup;
+          op.dataAttributes = op.dataAttributes || {};
+          op.dataAttributes["expanded"] = "true";
+          this.expandOperationsToDepth(
+            op.children,
+            targetDepth,
+            currentDepth + 1,
+          );
+        }
+      }
+    }
+  }
+
+  private expandIfSingleOperation(grid: ComponentGrid) {
+    if (grid.length == 1 && grid[0].components.length == 1) {
+      const onlyComponent = grid[0].components[0];
+      if (
+        onlyComponent.dataAttributes != null &&
+        Object.prototype.hasOwnProperty.call(
+          onlyComponent.dataAttributes,
+          "location",
+        ) &&
+        onlyComponent.dataAttributes["expanded"] !== "false"
+      ) {
+        const location: string = onlyComponent.dataAttributes["location"];
+        this.expandOperation(grid, location);
+      }
+    }
+    // Recursively expand if the only child is also a single operation
+    for (const col of grid) {
+      for (const op of col.components) {
+        this.expandIfSingleOperation(op.children || []);
+      }
+    }
+  }
+
   /**
    * Sets the viewBox attribute of the SVG element to enable zooming and panning.
    *
@@ -208,15 +236,33 @@ export class Sqore {
     };
 
     const { qubits, componentGrid } = circuit;
-    const { qubitWires, registers, svgHeight } = formatInputs(
+
+    // Calculate the row heights, which may vary depending on how many
+    // expanded group borders need to fit between qubit wires.
+    const rowHeights = getRowHeights(qubits, componentGrid);
+
+    // Draw the qubit labels.
+    // Also calculate other register render data to be used later in the rendering.
+    const { qubitLabels, registers, svgHeight } = formatInputs(
       qubits,
+      rowHeights,
       this.options.isEditable ? undefined : this.options.renderLocations,
     );
+
+    // Calculate the render data for the operations.
+    const topY = qubits[0] ? registers[qubits[0].id].y : -1;
+    const bottomY = qubits[qubits.length - 1]
+      ? registers[qubits[qubits.length - 1].id].y
+      : -1;
     const { renderDataArray, svgWidth } = processOperations(
       componentGrid,
+      topY,
+      bottomY,
       registers,
       this.options.isEditable ? undefined : this.options.renderLocations,
     );
+
+    // Draw the operations.
     const formattedGates: SVGElement = formatGates(renderDataArray);
 
     // Draw the lines that represent qubit and classical wires.
@@ -229,7 +275,7 @@ export class Sqore {
     const composedSqore: ComposedSqore = {
       width: svgWidth,
       height: svgHeight,
-      elements: [qubitWires, formattedRegs, formattedGates],
+      elements: [qubitLabels, formattedRegs, formattedGates],
     };
     return composedSqore;
   }
@@ -300,53 +346,6 @@ export class Sqore {
     ).toString();
   }
 
-  /**
-   * Pick out operations that are at or below `renderDepth`.
-   *
-   * @param componentGrid Circuit components.
-   * @param renderDepth Initial layer depth at which to render gates.
-   *
-   * @returns Grid of components at or below specified depth.
-   */
-  private selectOpsAtDepth(
-    componentGrid: ComponentGrid,
-    renderDepth: number,
-  ): ComponentGrid {
-    if (renderDepth < 0)
-      throw new Error(
-        `Invalid renderDepth of ${renderDepth}. Needs to be >= 0.`,
-      );
-    if (renderDepth === 0) return componentGrid;
-    const selectedOps: ComponentGrid = [];
-    componentGrid.forEach((col) => {
-      const selectedCol: Operation[] = [];
-      const extraCols: Column[] = [];
-      col.components.forEach((op) => {
-        if (op.children != null) {
-          const selectedChildren = this.selectOpsAtDepth(
-            op.children,
-            renderDepth - 1,
-          );
-          if (selectedChildren.length > 0) {
-            selectedCol.push(...selectedChildren[0].components);
-            selectedChildren.slice(1).forEach((col, colIndex) => {
-              if (extraCols[colIndex] == null) extraCols[colIndex] = col;
-              // NOTE: I'm unsure if this is a safe way to combine column arrays
-              else extraCols[colIndex].components.push(...col.components);
-            });
-          }
-        } else {
-          selectedCol.push(op);
-        }
-      });
-      selectedOps.push({ components: selectedCol });
-      if (extraCols.length > 0) {
-        selectedOps.push(...extraCols);
-      }
-    });
-    return selectedOps;
-  }
-
   /**
    * Add interactive click handlers to circuit HTML elements.
    *
@@ -509,3 +508,92 @@ export class Sqore {
     operation.dataAttributes = undefined;
   };
 }
+
+/**
+ * Recursively computes vertical space required to render group borders.
+ *
+ * The resulting `heightAboveWire` and `heightBelowWire` values per qubit are
+ * later used by `formatInputs` to leave sufficient space between qubit wires.
+ *
+ * @param qubits Array of qubits in the circuit.
+ * @param componentGrid Grid of circuit components to traverse.
+ *
+ * @returns Mapping from qubit index to required heights above and below their wires.
+ */
+function getRowHeights(
+  qubits: Qubit[],
+  componentGrid: ComponentGrid,
+): {
+  [qubitIndex: number]: {
+    heightAboveWire: number;
+    heightBelowWire: number;
+  };
+} {
+  const rowHeights: {
+    [qubitIndex: number]: {
+      currentGroupBordersAboveWire: number;
+      currentGroupBordersBelowWire: number;
+      heightAboveWire: number;
+      heightBelowWire: number;
+    };
+  } = {};
+
+  for (const q of qubits) {
+    const { id } = q;
+    rowHeights[id] = {
+      currentGroupBordersBelowWire: 0,
+      currentGroupBordersAboveWire: 0,
+      heightBelowWire: 0,
+      heightAboveWire: 0,
+    };
+  }
+
+  updateRowHeights(componentGrid, rowHeights, qubits.length);
+  return rowHeights;
+}
+
+function updateRowHeights(
+  componentGrid: ComponentGrid,
+  rowHeights: {
+    [qubitIndex: number]: {
+      currentGroupBordersAboveWire: number;
+      currentGroupBordersBelowWire: number;
+      heightAboveWire: number;
+      heightBelowWire: number;
+    };
+  },
+  numQubits: number,
+) {
+  for (const col of componentGrid) {
+    for (const component of col.components) {
+      if (component.dataAttributes?.["expanded"] === "true") {
+        // We're in an expanded group. There is a dashed border above
+        // the top qubit, and below the bottom qubit.
+        const [topQubit, bottomQubit] = getMinMaxRegIdx(component, numQubits);
+
+        // Increment the current count of dashed group borders for
+        // the top and bottom rows for this operation.
+        // If the max height for this row has been exceeded above or below the wire,
+        // update it.
+        rowHeights[topQubit].currentGroupBordersAboveWire++;
+        rowHeights[topQubit].heightAboveWire = Math.max(
+          rowHeights[topQubit].heightAboveWire,
+          rowHeights[topQubit].currentGroupBordersAboveWire,
+        );
+
+        rowHeights[bottomQubit].currentGroupBordersBelowWire++;
+        rowHeights[bottomQubit].heightBelowWire = Math.max(
+          rowHeights[bottomQubit].heightBelowWire,
+          rowHeights[bottomQubit].currentGroupBordersBelowWire,
+        );
+
+        // recurse
+        updateRowHeights(component.children || [], rowHeights, numQubits);
+
+        // decrement
+        rowHeights[topQubit].currentGroupBordersAboveWire--;
+        rowHeights[bottomQubit].currentGroupBordersBelowWire--;
+      }
+    }
+  }
+}

package/ux/circuit-vis/utils.ts

@@ -4,7 +4,7 @@
 import { GateRenderData, GateType } from "./gateRenderData.js";
 import {
   minGateWidth,
-  labelPadding,
+  labelPaddingX,
   labelFontSize,
   argsFontSize,
 } from "./constants.js";
@@ -52,18 +52,15 @@ const deepEqual = (obj1: unknown, obj2: unknown): boolean => {
 /**
  * Calculate the width of a gate, given its render data.
  *
- * @param renderData - The rendering data of the gate, including its type, label, display arguments, and width.
+ * @param renderData - The rendering data of the gate, including its type, label, display arguments.
  *
  * @returns Width of given gate (in pixels).
  */
-const getGateWidth = ({
+const getMinGateWidth = ({
   type,
   label,
   displayArgs,
-  width,
 }: GateRenderData): number => {
-  if (width > 0) return width;
-
   switch (type) {
     case GateType.Measure:
     case GateType.Cnot:
@@ -73,31 +70,73 @@ const getGateWidth = ({
       const labelWidth = _getStringWidth(label);
       const argsWidth =
         displayArgs != null ? _getStringWidth(displayArgs, argsFontSize) : 0;
-      const textWidth = Math.max(labelWidth, argsWidth) + labelPadding * 2;
+      const textWidth = Math.max(labelWidth, argsWidth) + labelPaddingX * 2;
       return Math.max(minGateWidth, textWidth);
     }
   }
 };
 
 /**
- * Get the width of a string with font-size `fontSize` and font-family Arial.
+ * Estimate string width in pixels based on character types and font size.
+ * This may not match the true rendered width, but should be close enough for
+ * calculating layout.
  *
- * @param text     Input string.
- * @param fontSize Font size of `text`.
+ * @param text - The text string to measure.
+ * @param fontSize - The font size in pixels (default is labelFontSize).
  *
- * @returns Pixel width of given string.
+ * @returns Estimated width of the string in pixels.
  */
 const _getStringWidth = (
   text: string,
   fontSize: number = labelFontSize,
 ): number => {
-  const canvas: HTMLCanvasElement = document.createElement("canvas");
-  const context: CanvasRenderingContext2D | null = canvas.getContext("2d");
-  if (context == null) throw new Error("Null canvas");
-
-  context.font = `${fontSize}px Arial`;
-  const metrics: TextMetrics = context.measureText(text);
-  return metrics.width;
+  let units = 0;
+  for (const ch of Array.from(text)) {
+    if (ch === " ") {
+      units += 0.33;
+      continue;
+    }
+    if ("il.:;,'`!|".includes(ch)) {
+      units += 0.28;
+      continue;
+    }
+    if ("mw".includes(ch)) {
+      units += 0.72;
+      continue;
+    }
+    if ("MW@#%&".includes(ch)) {
+      units += 0.78;
+      continue;
+    }
+    if (/[0-9]/.test(ch)) {
+      units += 0.55;
+      continue;
+    }
+    if (/[A-Z]/.test(ch)) {
+      units += 0.56;
+      continue;
+    }
+    if (/[a-z]/.test(ch)) {
+      units += 0.5;
+      continue;
+    }
+    if (/[θπ]/.test(ch)) {
+      units += 0.56;
+      continue;
+    }
+    if (/[ψ]/.test(ch)) {
+      units += 0.6;
+      continue;
+    }
+    if ("-+*/=^~_<>".includes(ch)) {
+      units += 0.5;
+      continue;
+    }
+    units += 0.56;
+  }
+  const kerningFudge = Math.max(0, text.length - 1) * 0.005;
+  // Round to a whole number to keep it easy to read
+  return Math.floor((units + kerningFudge) * fontSize);
 };
 
 /**
@@ -426,7 +465,7 @@ const mathChars = {
 
 export {
   deepEqual,
-  getGateWidth,
+  getMinGateWidth,
   getChildTargets,
   locationStringToIndexes,
   getGateLocationString,

package/ux/circuit.tsx

@@ -361,7 +361,7 @@ function renderLocations(locations: SourceLocation[]) {
   });
   const title = titles.length > 1 ? `${titles[0]}, ...` : titles[0];
 
-  const argsStr = encodeURIComponent(JSON.stringify([qdkLocations]));
+  const argsStr = encodeURI(encodeURIComponent(JSON.stringify([qdkLocations])));
   const href = `command:qsharp-vscode.gotoLocations?${argsStr}`;
   return {
     title,

package/ux/estimatesPanel.tsx

@@ -55,7 +55,7 @@ export function EstimatesPanel(props: {
         {props.calculating ? (
           <Spinner style="position: absolute; top: 11px; left: 4px;" />
         ) : null}
-        <h1>Azure Quantum Resource Estimator</h1>
+        <h1>Microsoft Quantum Resource Estimator</h1>
       </div>
       <EstimatesOverview
         estimatesData={props.estimatesData}