qsharp-lang 1.25.7-dev → 1.26.0

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/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];
 }

package/ux/circuit.tsx

@@ -68,9 +68,9 @@ function ZoomableCircuit(props: {
   editor?: qviz.EditorHandlers;
 }) {
   const circuitDiv = useRef<HTMLDivElement>(null);
+  const qvizObj = useRef<ReturnType<typeof qviz.draw> | null>(null);
   const [zoomLevel, setZoomLevel] = useState(100);
   const [rendering, setRendering] = useState(true);
-  const [zoomOnResize, setZoomOnResize] = useState(true);
 
   const isEditable = props.editor != null;
 
@@ -85,36 +85,18 @@ function ZoomableCircuit(props: {
     if (rendering) {
       const container = circuitDiv.current!;
       // Draw the circuits - may take a while for large circuits
-      const svg = renderCircuits(
-        props.circuitGroup,
-        container,
-        props.renderLocations,
-        props.editor,
-      );
+      qvizObj.current = qviz.draw(props.circuitGroup, container, {
+        renderLocations: props.renderLocations,
+        editor: props.editor,
+        onZoomChange: (zoom) => {
+          setZoomLevel(zoom);
+        },
+      });
 
-      if (!isEditable) {
-        const initialZoom = calculateZoomToFit(container, svg as SVGElement);
-        // Set the initial zoom level
-        setZoomLevel(initialZoom);
-        // Resize the SVG to fit
-        updateWidth();
-      }
-
-      // Calculate the initial zoom level based on the container width
       // Disable "rendering" text
       setRendering(false);
-    } else if (!isEditable) {
-      // Initial drawing done, attach window resize handler
-      window.addEventListener("resize", onResize);
-      return () => {
-        window.removeEventListener("resize", onResize);
-      };
     }
-  }, [rendering, zoomOnResize]);
-
-  useEffect(() => {
-    updateWidth();
-  }, [zoomLevel]);
+  }, [rendering]);
 
   return (
     <div>
@@ -132,76 +114,11 @@ function ZoomableCircuit(props: {
     </div>
   );
 
-  /**
-   * Window resize handler to recalculate and set the zoom level
-   * based on the new window width.
-   */
-  function onResize() {
-    if (!zoomOnResize) {
-      return;
-    }
-
-    const [container, svg] = [circuitDiv.current, currentSvg()];
-    if (container && svg) {
-      // Recalculate the zoom level based on the container width
-      const initialZoom = calculateZoomToFit(container, svg);
-      // Set the zoom level
-      setZoomLevel(initialZoom);
-    }
-  }
-
-  /**
-   * Update the width of the SVG element based on the current zoom level.
-   */
-  function updateWidth() {
-    const svg = currentSvg();
-    if (svg) {
-      // The width attribute contains the true width, generated by qviz.
-      // 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`,
-      );
+  function userSetZoomLevel(zoomLevel: number) {
+    if (qvizObj.current && circuitDiv.current) {
+      qvizObj.current.userSetZoomLevel(zoomLevel);
     }
   }
-
-  function renderCircuits(
-    circuitGroup: qviz.CircuitGroup,
-    container: HTMLDivElement,
-    renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
-    editor?: qviz.EditorHandlers,
-  ) {
-    qviz.draw(circuitGroup, container, { renderLocations, editor });
-    return container.getElementsByClassName("qviz")[0]!;
-  }
-
-  /**
-   * Calculate the zoom level that will fit the circuit into the current size of the container.
-   */
-  function calculateZoomToFit(container: HTMLDivElement, svg: 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;
-  }
-
-  function currentSvg(): SVGElement | undefined {
-    return circuitDiv.current?.querySelector(".qviz") ?? undefined;
-  }
-
-  function userSetZoomLevel(zoom: number) {
-    setZoomOnResize(false);
-    setZoomLevel(zoom);
-  }
 }
 
 function Unrenderable(props: {

package/ux/qsharp-circuit.css

@@ -180,59 +180,17 @@
     display: none;
   }
 
-  .classically-controlled-unknown {
-    opacity: 0.25;
-  }
-
-  .classically-controlled-one .classical-container,
-  .classically-controlled-one .classical-line {
-    stroke: #4059bd;
-    stroke-width: 1.3;
-    fill: #4059bd;
-    fill-opacity: 0.1;
-  }
-
-  .classically-controlled-zero .classical-container,
-  .classically-controlled-zero .classical-line {
-    stroke: #c40000;
-    stroke-width: 1.3;
-    fill: #c40000;
-    fill-opacity: 0.1;
-  }
-
-  .classically-controlled-btn {
-    cursor: pointer;
-  }
-
-  .classically-controlled-unknown .classically-controlled-btn {
-    fill: #e5e5e5;
-  }
-
-  .classically-controlled-one .classically-controlled-btn {
-    fill: #4059bd;
-  }
-
-  .classically-controlled-zero .classically-controlled-btn {
-    fill: #c40000;
+  .classically-controlled-btn circle {
+    fill: var(--main-background);
+    stroke-width: 1;
   }
 
   .classically-controlled-btn text {
     dominant-baseline: middle;
     text-anchor: middle;
     stroke: none;
-    font-family: Arial;
-  }
-
-  .classically-controlled-unknown .classically-controlled-btn text {
-    fill: #000000;
-  }
-
-  .classically-controlled-one .classically-controlled-btn text {
-    fill: #ffffff;
-  }
-
-  .classically-controlled-zero .classically-controlled-btn text {
-    fill: #ffffff;
+    font-family: "KaTeX_Main", "MJXZERO", "MJXTEX", sans-serif;
+    fill: var(--main-color);
   }
 
   .qviz .gate-collapse,