qsharp-lang 1.3.5-dev → 1.3.6-dev

package/ux/circuit.tsx

@@ -2,8 +2,9 @@
 // Licensed under the MIT License.
 
 import * as qviz from "@microsoft/quantum-viz.js/lib";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 import { CircuitProps } from "./data.js";
+import { Spinner } from "./spinner.js";
 
 // For perf reasons we set a limit on how many gates/qubits
 // we attempt to render. This is still a lot higher than a human would
@@ -12,56 +13,165 @@ import { CircuitProps } from "./data.js";
 const MAX_OPERATIONS = 10000;
 const MAX_QUBITS = 1000;
 
-/* This component is shared by the Python widget and the VS Code panel */
+// This component is shared by the Python widget and the VS Code panel
 export function Circuit(props: { circuit: qviz.Circuit }) {
+  const circuit = props.circuit;
+  const unrenderable =
+    circuit.qubits.length === 0 ||
+    circuit.operations.length > MAX_OPERATIONS ||
+    circuit.qubits.length > MAX_QUBITS;
+
+  return (
+    <div>
+      {unrenderable ? (
+        <Unrenderable
+          qubits={props.circuit.qubits.length}
+          operations={props.circuit.operations.length}
+        />
+      ) : (
+        <ZoomableCircuit circuit={props.circuit} />
+      )}
+    </div>
+  );
+}
+
+function ZoomableCircuit(props: { circuit: qviz.Circuit }) {
   const circuitDiv = useRef<HTMLDivElement>(null);
+  const [zoomLevel, setZoomLevel] = useState(100);
+  const [rendering, setRendering] = useState(true);
+
+  useEffect(() => {
+    // Enable "rendering" text while the circuit is being drawn
+    setRendering(true);
+    const container = circuitDiv.current!;
+    container.innerHTML = "";
+  }, [props.circuit]);
+
+  useEffect(() => {
+    if (rendering) {
+      const container = circuitDiv.current!;
+      // Draw the circuit - may take a while for large circuits
+      const svg = renderCircuit(props.circuit, container);
+      // Calculate the initial zoom level based on the container width
+      const initialZoom = calculateZoomToFit(container, svg as SVGElement);
+      // Set the initial zoom level
+      setZoomLevel(initialZoom);
+      // Resize the SVG to fit
+      updateWidth();
+      // Disable "rendering" text
+      setRendering(false);
+    }
+  }, [rendering]);
+
+  useEffect(() => {
+    updateWidth();
+  }, [zoomLevel]);
+
+  return (
+    <div>
+      <div>
+        {rendering ? null : (
+          <ZoomControl zoom={zoomLevel} onChange={setZoomLevel} />
+        )}
+      </div>
+      <div>
+        {rendering
+          ? `Rendering diagram with ${props.circuit.operations.length} gates...`
+          : ""}
+      </div>
+      <div class="qs-circuit" ref={circuitDiv}></div>
+    </div>
+  );
+
+  function updateWidth() {
+    const svg = circuitDiv.current?.querySelector(".qviz");
+    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 renderCircuit(circuit: qviz.Circuit, container: HTMLDivElement) {
+    qviz.draw(circuit, container);
 
+    // quantum-viz hardcodes the styles in the SVG.
+    // Remove the style elements -- we'll define the styles in our own CSS.
+    const styleElements = container.querySelectorAll("style");
+    styleElements?.forEach((tag) => tag.remove());
+
+    return container.getElementsByClassName("qviz")[0]!;
+  }
+
+  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 Unrenderable(props: { qubits: number; operations: number }) {
   const errorDiv =
-    props.circuit.qubits.length === 0 ? (
+    props.qubits === 0 ? (
       <div>
         <p>No circuit to display. No qubits have been allocated.</p>
       </div>
-    ) : props.circuit.operations.length > MAX_OPERATIONS ? (
+    ) : props.operations > MAX_OPERATIONS ? (
       <div>
         <p>
-          This circuit has too many gates to display. It has{" "}
-          {props.circuit.operations.length} gates, but the maximum supported is{" "}
-          {MAX_OPERATIONS}.
+          This circuit has too many gates to display. It has {props.operations}{" "}
+          gates, but the maximum supported is {MAX_OPERATIONS}.
         </p>
       </div>
-    ) : props.circuit.qubits.length > MAX_QUBITS ? (
+    ) : props.qubits > MAX_QUBITS ? (
       <div>
         <p>
-          This circuit has too many qubits to display. It has{" "}
-          {props.circuit.qubits.length} qubits, but the maximum supported is{" "}
-          {MAX_QUBITS}.
+          This circuit has too many qubits to display. It has {props.qubits}{" "}
+          qubits, but the maximum supported is {MAX_QUBITS}.
         </p>
       </div>
     ) : undefined;
 
-  useEffect(() => {
-    if (errorDiv !== undefined) {
-      circuitDiv.current!.innerHTML = "";
-      return;
-    }
-
-    qviz.draw(props.circuit, circuitDiv.current!);
-
-    // quantum-viz hardcodes the styles in the SVG.
-    // Remove the style elements -- we'll define the styles in our own CSS.
-    const styleElements = circuitDiv.current?.querySelectorAll("style");
-    styleElements?.forEach((tag) => tag.remove());
-  }, [props.circuit]);
+  return <div class="qs-circuit-error">{errorDiv}</div>;
+}
 
+function ZoomControl(props: {
+  zoom: number;
+  onChange: (zoom: number) => void;
+}) {
   return (
-    <div>
-      <div class="qs-circuit-error">{errorDiv}</div>
-      <div class="qs-circuit" ref={circuitDiv}></div>
-    </div>
+    <p>
+      <label htmlFor="qs-circuit-zoom">Zoom </label>
+      <input
+        id="qs-circuit-zoom"
+        type="number"
+        min="10"
+        max="100"
+        step="10"
+        value={props.zoom}
+        onInput={(e) =>
+          props.onChange(parseInt((e.target as HTMLInputElement).value) || 0)
+        }
+      />
+      %
+    </p>
   );
 }
 
-/* This component is exclusive to the VS Code panel */
+// This component is exclusive to the VS Code panel
 export function CircuitPanel(props: CircuitProps) {
   const error = props.errorHtml ? (
     <div>
@@ -78,41 +188,29 @@ export function CircuitPanel(props: CircuitProps) {
   return (
     <div class="qs-circuit-panel">
       <div>
-        <h1>{props.title}</h1>
+        <h1>
+          {props.title} {props.simulated ? "(Trace)" : ""}
+        </h1>
       </div>
-      {props.circuit ? <Circuit circuit={props.circuit}></Circuit> : null}
       <div class="qs-circuit-error">{error}</div>
       <p>{props.targetProfile}</p>
-      {props.simulating ? (
-        <p>
-          This circuit diagram was generated while running the program in the
-          simulator.
-          <br />
-          <br />
-          If your program contains behavior that is conditional on a qubit
-          measurement result, note that this circuit only shows the outcome that
-          was encountered during this simulation. Running the program again may
-          result in a different circuit being generated.
-        </p>
-      ) : null}
-      {
-        // show tip when the circuit is empty and we didn't run under the simulator (i.e. debugging)
-        !props.simulating &&
-        !props.errorHtml &&
-        props.circuit?.qubits.length === 0 ? (
-          <p>
-            <em>
-              Tip: you can generate a circuit diagram for any operation that
-              takes qubits or arrays of qubits as input.
-            </em>
-          </p>
-        ) : null
-      }
       <p>
-        <a href="https://github.com/microsoft/qsharp/wiki/Circuit-Diagrams-from-Q%23-Code">
-          Learn more
-        </a>
+        {
+          props.simulated
+            ? "WARNING: This diagram shows the result of tracing a dynamic circuit, and may change from run to run."
+            : "\xa0" // nbsp to keep line height consistent
+        }
       </p>
+      <p>
+        Learn more at{" "}
+        <a href="https://aka.ms/qdk.circuits">https://aka.ms/qdk.circuits</a>
+      </p>
+      {props.calculating ? (
+        <div>
+          <Spinner />
+        </div>
+      ) : null}
+      {props.circuit ? <Circuit circuit={props.circuit}></Circuit> : null}
     </div>
   );
 }

package/ux/data.ts

@@ -69,7 +69,10 @@ export type CircuitProps = {
   circuit?: CircuitData;
   errorHtml?: string;
   targetProfile: string;
-  simulating: boolean;
+  /** Circuit was generated by running the simulator */
+  simulated: boolean;
+  /** Circuit is still being generated */
+  calculating: boolean;
 };
 
 export type CircuitData = import("@microsoft/quantum-viz.js/lib").Circuit;

package/ux/estimatesPanel.tsx

@@ -6,6 +6,7 @@ import { type ReData, SingleEstimateResult } from "./data.js";
 import { EstimatesOverview } from "./estimatesOverview.js";
 import { ReTable } from "./reTable.js";
 import { SpaceChart } from "./spaceChart.js";
+import { Spinner } from "./spinner.js";
 
 export function EstimatesPanel(props: {
   estimatesData: ReData[];
@@ -52,16 +53,7 @@ export function EstimatesPanel(props: {
           </g>
         </svg>
         {props.calculating ? (
-          <svg
-            width="40"
-            height="40"
-            viewBox="0 0 16 16"
-            xmlns="http://www.w3.org/2000/svg"
-            class="codicon-modifier-spin"
-            style="position: absolute; top: 11px; left: 4px;"
-          >
-            <path d="M2.006 8.267L.78 9.5 0 8.73l2.09-2.07.76.01 2.09 2.12-.76.76-1.167-1.18a5 5 0 0 0 9.4 1.983l.813.597a6 6 0 0 1-11.22-2.683zm10.99-.466L11.76 6.55l-.76.76 2.09 2.11.76.01 2.09-2.07-.75-.76-1.194 1.18a6 6 0 0 0-11.11-2.92l.81.594a5 5 0 0 1 9.3 2.346z"></path>
-          </svg>
+          <Spinner style="position: absolute; top: 11px; left: 4px;" />
         ) : null}
         <h1>Azure Quantum Resource Estimator</h1>
       </div>

package/ux/qsharp-ux.css

@@ -259,6 +259,14 @@ html {
   cursor: pointer;
 }
 
+.ast-output {
+  height: 40vh;
+  min-height: 400px;
+  width: 100%;
+  resize: none;
+  white-space: pre;
+}
+
 .hir-output {
   height: 40vh;
   min-height: 400px;

package/ux/spinner.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+export function Spinner(props: { style?: string }) {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      class="codicon-modifier-spin"
+      style={props.style}
+    >
+      <path d="M2.006 8.267L.78 9.5 0 8.73l2.09-2.07.76.01 2.09 2.12-.76.76-1.167-1.18a5 5 0 0 0 9.4 1.983l.813.597a6 6 0 0 1-11.22-2.683zm10.99-.466L11.76 6.55l-.76.76 2.09 2.11.76.01 2.09-2.07-.75-.76-1.194 1.18a6 6 0 0 0-11.11-2.92l.81.594a5 5 0 0 1 9.3 2.346z"></path>
+    </svg>
+  );
+}

package/ux/tsconfig.json

@@ -9,6 +9,7 @@
     "jsxImportSource": "preact",
     "isolatedModules": true,
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": []
   }
 }