qsharp-lang 1.25.5-dev → 1.25.8-dev

package/ux/circuit-vis/process.ts

@@ -5,7 +5,7 @@ import {
   minGateWidth,
   startX,
   gatePadding,
-  controlBtnOffset,
+  controlCircleOffset,
   groupPaddingX,
   groupTopPadding,
   groupBottomPadding,
@@ -242,8 +242,6 @@ 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
@@ -252,95 +250,38 @@ const _opToRenderData = (
         "No children operations found for classically-controlled operation.",
       );
 
-    // Gates to display when classical bit is 0.
-    const onZeroOps: ComponentGrid = children
-      .map((col) => ({
-        components: col.components.filter(
-          (op) => op.conditionalRender === ConditionalRender.OnZero,
-        ),
-      }))
-      .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
-      .map((col) => ({
-        components: col.components.filter(
-          (op) => op.conditionalRender !== ConditionalRender.OnZero,
-        ),
-      }))
-      .filter((col) => col.components.length > 0);
-    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 + 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.
-    const qubitsY: number[] = Object.values(registers).map(({ y }) => y);
-    if (qubitsY.length > 0)
-      renderData.targetsY = [Math.min(...qubitsY), Math.max(...qubitsY)];
+    renderData.label = gate;
+
+    _processChildren(renderData, children, registers, renderLocations);
+
+    // Fill in the ID to be displayed in each control wire's circle.
+    renderData.classicalControlIds =
+      controls
+        ?.map(
+          (reg) =>
+            op.metadata?.controlResultIds?.find(
+              (e) => e[0].qubit === reg.qubit && e[0].result === reg.result,
+            )?.[1],
+        )
+        .map((id) => id ?? null) || [];
+
+    // Add additional width for classical control circle
+    renderData.width += controlCircleOffset;
   } else if (
     conditionalRender == ConditionalRender.AsGroup &&
-    (children?.length || 0) > 0
+    children &&
+    (children.length || 0) > 0
   ) {
-    const childrenInstrs = processOperations(
-      children!,
-      topY,
-      bottomY,
-      registers,
-      renderLocations,
-    );
+    // Grouped operations
+
     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 for dashed box
-    renderData.width =
-      childrenInstrs.svgWidth - startX - gatePadding * 3 + groupPaddingX * 2; // (svgWidth includes 3 extra gate paddings)
-    renderData.topPadding = childrenInstrs.maxTopPadding + groupTopPadding;
-    renderData.bottomPadding =
-      childrenInstrs.maxBottomPadding + groupBottomPadding;
+    renderData.label = gate;
+
+    _processChildren(renderData, children, registers, renderLocations);
   } else if (op.kind === "measurement") {
     renderData.type = GateType.Measure;
   } else if (op.kind === "ket") {
@@ -505,17 +446,20 @@ const _fillRenderDataX = (
           {
             // Subtract startX offset from nested gates and add offset and padding
             let offset: number = x - startX + groupPaddingX;
-            if (renderData.type === GateType.ClassicalControlled)
-              offset += controlBtnOffset;
+            if (renderData.type === GateType.ClassicalControlled) {
+              offset += controlCircleOffset;
+            }
 
             // Offset each x coord in children gates
             _offsetChildrenX(renderData.children, offset);
 
-            renderData.x = x + columnWidths[colIndex] / 2;
+            // Groups should be left-aligned in their column
+            renderData.x = x + renderData.width / 2;
           }
           break;
 
         default:
+          // Center gate in column
           renderData.x = x + columnWidths[colIndex] / 2;
           break;
       }
@@ -544,4 +488,37 @@ const _offsetChildrenX = (
   });
 };
 
+/**
+ * Processes the children operations and updates the render data accordingly.
+ *
+ * @param renderData        Render data of the parent operation, to be updated with children data.
+ * @param children          Nested operations to be processed.
+ * @param registers         Mapping from qubit IDs to register render data.
+ * @param renderLocations   Optional function to map source locations to link hrefs and titles
+ */
+function _processChildren(
+  renderData: GateRenderData,
+  children: ComponentGrid,
+  registers: RegisterMap,
+  renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
+) {
+  const topY = Math.min(...(renderData.targetsY as number[]));
+  const bottomY = Math.max(...(renderData.targetsY as number[]));
+
+  const childrenInstrs = processOperations(
+    children,
+    topY,
+    bottomY,
+    registers,
+    renderLocations,
+  );
+
+  renderData.children = childrenInstrs.renderDataArray;
+  renderData.width =
+    childrenInstrs.svgWidth - startX - gatePadding * 3 + groupPaddingX * 2; // (svgWidth includes 3 extra gate paddings)
+  renderData.topPadding = childrenInstrs.maxTopPadding + groupTopPadding;
+  renderData.bottomPadding =
+    childrenInstrs.maxBottomPadding + groupBottomPadding;
+}
+
 export { processOperations };

package/ux/circuit-vis/sqore.ts

@@ -64,9 +64,15 @@ export type EditorHandlers = {
 export type DrawOptions = {
   renderDepth?: number;
   renderLocations?: (l: SourceLocation[]) => { title: string; href: string };
-  // When provided, enables editing behaviors (dropzones, run button, etc.) and
-  // requires the callbacks necessary to support those behaviors.
+  /**
+   * When provided, enables editing behaviors (dropzones, run button, etc.) and
+   * requires the callbacks necessary to support those behaviors.
+   */
   editor?: EditorHandlers;
+  /**
+   * When provided, enables zoom-to-fit behavior. The callback is called with the new zoom level whenever it changes.
+   */
+  onZoomChange?: (zoomLevel: number) => void;
 };
 
 /**
@@ -76,6 +82,9 @@ export class Sqore {
   circuit: Circuit;
   gateRegistry: GateRegistry = {};
   renderDepth: number = this.options.renderDepth ?? 0;
+  container: HTMLElement | null = null;
+  zoomOnResize: boolean = true;
+  zoomLevel: number = 100;
   /**
    * Initializes Sqore object.
    *
@@ -104,11 +113,86 @@ export class Sqore {
    *
    * @param container HTML element for rendering visualization into.
    */
-  draw(container: HTMLElement): void {
+  draw(container: HTMLElement) {
     // Inject into container
     if (container == null) throw new Error(`Container not provided.`);
 
+    this.container = container;
+
     this.renderCircuit(container);
+
+    if (this.options.onZoomChange != null) {
+      this.zoomToFit();
+      window.addEventListener("resize", () => this.onResize());
+    }
+  }
+
+  /**
+   * Window resize handler to recalculate and set the zoom level
+   * based on the new window width.
+   */
+  private onResize() {
+    if (!this.zoomOnResize) {
+      return;
+    }
+
+    // Recalculate the zoom level based on the container width
+    this.zoomToFit();
+  }
+
+  /**
+   * Calculate and set the zoom level to fit the circuit within the container.
+   */
+  private zoomToFit() {
+    if (this.options.onZoomChange == null || this.container == null) {
+      return;
+    }
+    const zoomLevel = this.calculateZoomToFit(this.container);
+    this.updateZoomLevel(zoomLevel);
+    this.options.onZoomChange?.(zoomLevel);
+  }
+
+  /**
+   * Update the zoom level setting and apply it to the SVG element.
+   */
+  updateZoomLevel(zoomLevel: number) {
+    this.zoomLevel = zoomLevel;
+    const svg = this.container?.querySelector("svg.qviz");
+    if (svg) {
+      this.updateSvgWidth(svg as SVGElement, zoomLevel);
+    }
+  }
+
+  /**
+   * Update the width of the SVG element based on the zoom level.
+   */
+  updateSvgWidth(svg: SVGElement, zoomLevel: number) {
+    // The width attribute contains the true width.
+    // We'll leave this attribute untouched, so we can use it again if the
+    // zoom level is ever updated.
+    const width = svg.getAttribute("width")!;
+
+    // We'll set the width in the style attribute to (true width * zoom level).
+    // This value takes precedence over the true width in the width attribute.
+    svg.setAttribute(
+      "style",
+      `max-width: ${width}; width: ${(parseInt(width) * (zoomLevel || 100)) / 100}; height: auto`,
+    );
+  }
+
+  /**
+   * Calculate the zoom level that will fit the circuit into the current size of the container.
+   */
+  calculateZoomToFit(container: HTMLElement): number {
+    const svg = container.querySelector("svg.qviz") as SVGElement;
+    const containerWidth = container.clientWidth;
+    // width and height are the true dimensions generated by qviz
+    const width = parseInt(svg.getAttribute("width")!);
+    const height = svg.getAttribute("height")!;
+
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    const zoom = Math.min(Math.ceil((containerWidth / width) * 100), 100);
+    return zoom;
   }
 
   /**
@@ -139,6 +223,9 @@ export class Sqore {
     const composedSqore: ComposedSqore = this.compose(_circuit);
     const svg: SVGElement = this.generateSvg(composedSqore);
     this.setViewBox(svg);
+    if (this.options.onZoomChange != null) {
+      this.updateSvgWidth(svg, this.zoomLevel);
+    }
     const previousSvg = container.querySelector("svg.qviz");
     if (previousSvg == null) {
       container.appendChild(svg);
@@ -308,7 +395,6 @@ export class Sqore {
     svg.setAttribute("class", "qviz");
     svg.setAttribute("width", width.toString());
     svg.setAttribute("height", height.toString());
-    svg.style.setProperty("max-width", "fit-content");
 
     // Add styles
     document.documentElement.style.setProperty(
@@ -368,58 +454,9 @@ export class Sqore {
    *
    */
   private addGateClickHandlers(container: HTMLElement, circuit: Circuit): void {
-    this.addClassicalControlHandlers(container);
     this.addZoomHandlers(container, circuit);
   }
 
-  /**
-   * Add interactive click handlers for classically-controlled operations.
-   *
-   * @param container HTML element containing visualized circuit.
-   *
-   */
-  private addClassicalControlHandlers(container: HTMLElement): void {
-    container.querySelectorAll(".classically-controlled-btn").forEach((btn) => {
-      // Zoom in on clicked gate
-      btn.addEventListener("click", (evt: Event) => {
-        const textSvg = btn.querySelector("text");
-        const group = btn.parentElement;
-        if (textSvg == null || group == null) return;
-
-        const currValue = textSvg.firstChild?.nodeValue;
-        const zeroGates = group?.querySelector(".gates-zero");
-        const oneGates = group?.querySelector(".gates-one");
-        switch (currValue) {
-          case "?":
-            textSvg.childNodes[0].nodeValue = "1";
-            group.classList.remove("classically-controlled-unknown");
-            group.classList.remove("classically-controlled-zero");
-            group.classList.add("classically-controlled-one");
-            zeroGates?.classList.add("hidden");
-            oneGates?.classList.remove("hidden");
-            break;
-          case "1":
-            textSvg.childNodes[0].nodeValue = "0";
-            group.classList.remove("classically-controlled-unknown");
-            group.classList.add("classically-controlled-zero");
-            group.classList.remove("classically-controlled-one");
-            zeroGates?.classList.remove("hidden");
-            oneGates?.classList.add("hidden");
-            break;
-          case "0":
-            textSvg.childNodes[0].nodeValue = "?";
-            group.classList.add("classically-controlled-unknown");
-            group.classList.remove("classically-controlled-zero");
-            group.classList.remove("classically-controlled-one");
-            zeroGates?.classList.remove("hidden");
-            oneGates?.classList.remove("hidden");
-            break;
-        }
-        evt.stopPropagation();
-      });
-    });
-  }
-
   /**
    * Add interactive click handlers for zoom-in/out functionality.
    *
@@ -439,6 +476,7 @@ export class Sqore {
           } else if (ctrl.classList.contains("gate-expand")) {
             this.expandOperation(circuit.componentGrid, gateId);
           }
+          this.zoomOnResize = false;
           this.renderCircuit(container, circuit);
 
           ev.stopPropagation();
@@ -580,10 +618,10 @@ function updateRowHeights(
 ) {
   for (const col of componentGrid) {
     for (const component of col.components) {
-      if (component.dataAttributes?.["expanded"] === "true") {
+      if (isExpandedGroup(component)) {
         // 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);
+        const [topQubit, bottomQubit] = getMinMaxRegIdx(component);
 
         // Increment the current count of dashed group borders for
         // the top and bottom rows for this operation.
@@ -611,3 +649,13 @@ function updateRowHeights(
     }
   }
 }
+
+/**
+ * An "expanded group" here is any operation that is to be rendered showing
+ * its children, with a dashed box around the children.
+ */
+function isExpandedGroup(component: Operation) {
+  return (
+    component.dataAttributes?.["expanded"] === "true" || component.isConditional
+  );
+}

package/ux/circuit-vis/state-viz/stateViz.ts

@@ -52,7 +52,7 @@ const VIZ = {
   phaseDotFrac: 0.25,
   phaseDotRadiusMinPx: 1.5,
   phaseTextBottomPad: 6,
-  verticalLabelCharHeight: 14,
+  verticalLabelCharHeight: 9,
   phaseLabelLineHeight: 14,
   verticalLabelExtraBase: 12,
   stateLabelVerticalOffset: 4,
@@ -395,7 +395,7 @@ const renderStatePanel = (
 
   columnData.forEach((col, i) => renderColumn(g, col, i, prev, layout));
 
-  finalizeSvgAndFlex(svg, panel, g, layout);
+  finalizeSvgAndFlex(svg, panel, layout);
   savePreviousValues(panel, columnData);
 };
 
@@ -660,43 +660,28 @@ const renderStateLabelSection = (
 const finalizeSvgAndFlex = (
   svg: SVGSVGElement,
   panel: HTMLElement,
-  g: SVGGElement,
   layout: LayoutMetrics,
 ) => {
-  try {
-    const bbox = g.getBBox();
-    const contentHeight = Math.ceil(bbox.height + VIZ.contentHeightExtra);
-    const svgHeight = Math.max(VIZ.baseHeight, contentHeight);
-    svg.setAttribute("height", svgHeight.toString());
-    svg.setAttribute("width", layout.panelWidthPx.toString());
-    const edgePad = VIZ.edgePad;
-    panel.style.flexBasis = `${Math.ceil(layout.panelWidthPx + edgePad)}px`;
-  } catch {
-    // If getBBox fails (e.g., JSDOM/SVG not fully rendered), fall back to a
-    // deterministic height based on our layout constants so snapshots still
-    // include the whole visualization.
-    const labelTextHeightPx = layout.verticalLabels
-      ? VIZ.verticalLabelCharHeight * Math.max(1, layout.maxLabelLen)
-      : VIZ.phaseLabelLineHeight;
-    const labelBottomY =
-      layout.stateSectionTopY +
-      VIZ.stateHeaderPadding +
-      (layout.verticalLabels
-        ? VIZ.stateLabelVerticalOffset
-        : VIZ.stateLabelHorizontalOffset) +
-      labelTextHeightPx;
-
-    const svgHeight = Math.max(
-      VIZ.baseHeight,
-      Math.ceil(
-        labelBottomY + VIZ.extraBottomPaddingPx + VIZ.marginBottomMinPx,
-      ),
-    );
-    svg.setAttribute("height", svgHeight.toString());
-    svg.setAttribute("width", layout.panelWidthPx.toString());
-    const edgePad = VIZ.edgePad;
-    panel.style.flexBasis = `${Math.ceil(layout.panelWidthPx + edgePad)}px`;
-  }
+  const labelTextHeightPx = layout.verticalLabels
+    ? VIZ.verticalLabelCharHeight * Math.max(1, layout.maxLabelLen)
+    : VIZ.phaseLabelLineHeight;
+  const labelBottomY =
+    layout.stateSectionTopY +
+    VIZ.stateHeaderPadding +
+    (layout.verticalLabels
+      ? VIZ.stateLabelVerticalOffset
+      : VIZ.stateLabelHorizontalOffset) +
+    labelTextHeightPx;
+
+  const svgHeight = Math.max(
+    VIZ.baseHeight,
+    Math.ceil(labelBottomY + VIZ.extraBottomPaddingPx + VIZ.marginBottomMinPx),
+  );
+
+  svg.setAttribute("height", svgHeight.toString());
+  svg.setAttribute("width", layout.panelWidthPx.toString());
+  const edgePad = VIZ.edgePad;
+  panel.style.flexBasis = `${Math.ceil(layout.panelWidthPx + edgePad)}px`;
 };
 
 const savePreviousValues = (panel: HTMLElement, columnData: StateColumn[]) => {

package/ux/circuit-vis/utils.ts

@@ -7,6 +7,7 @@ import {
   labelPaddingX,
   labelFontSize,
   argsFontSize,
+  controlCircleOffset,
 } from "./constants.js";
 import { ComponentGrid, Operation } from "./circuit.js";
 import { Register } from "./register.js";
@@ -67,11 +68,14 @@ const getMinGateWidth = ({
     case GateType.Swap:
       return minGateWidth;
     default: {
+      // Classically controlled gates are wider because of the control button on the left
+      const controlButtonWidth =
+        type === GateType.ClassicalControlled ? controlCircleOffset : 0;
       const labelWidth = _getStringWidth(label);
       const argsWidth =
         displayArgs != null ? _getStringWidth(displayArgs, argsFontSize) : 0;
       const textWidth = Math.max(labelWidth, argsWidth) + labelPaddingX * 2;
-      return Math.max(minGateWidth, textWidth);
+      return Math.max(minGateWidth, textWidth) + controlButtonWidth;
     }
   }
 };
@@ -239,10 +243,7 @@ const getGateLocationString = (operation: Operation): string | null => {
  * @param numQubits The number of qubits in the circuit.
  * @returns A tuple containing the minimum and maximum register indices.
  */
-function getMinMaxRegIdx(
-  operation: Operation,
-  numQubits: number,
-): [number, number] {
+function getMinMaxRegIdx(operation: Operation): [number, number] {
   let targets: Register[];
   let controls: Register[];
   switch (operation.kind) {
@@ -260,20 +261,9 @@ function getMinMaxRegIdx(
       break;
   }
 
-  const qRegs = [...controls, ...targets]
-    .filter(({ result }) => result === undefined)
-    .map(({ qubit }) => qubit);
-  const clsControls: Register[] = controls.filter(
-    ({ result }) => result !== undefined,
-  );
-  const isClassicallyControlled: boolean = clsControls.length > 0;
-  if (!isClassicallyControlled && qRegs.length === 0) return [-1, -1];
-  // If operation is classically-controlled, pad all qubit registers. Otherwise, only pad
-  // the contiguous range of registers that it covers.
-  const minRegIdx: number = isClassicallyControlled ? 0 : Math.min(...qRegs);
-  const maxRegIdx: number = isClassicallyControlled
-    ? numQubits - 1
-    : Math.max(...qRegs);
+  const qRegs = [...controls, ...targets].map(({ qubit }) => qubit);
+  const minRegIdx: number = Math.min(...qRegs);
+  const maxRegIdx: number = Math.max(...qRegs);
 
   return [minRegIdx, maxRegIdx];
 }