qsharp-lang 1.3.4-dev → 1.3.6-dev

package/lib/web/qsc_wasm.js

@@ -325,34 +325,37 @@ export function git_hash() {
 /**
 * @param {(Array<any>)[]} sources
 * @param {(string)[]} language_features
+* @param {string} profile
 * @returns {string}
 */
-export function get_qir(sources, language_features) {
-    let deferred4_0;
-    let deferred4_1;
+export function get_qir(sources, language_features, profile) {
+    let deferred5_0;
+    let deferred5_1;
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
         const ptr0 = passArrayJsValueToWasm0(sources, wasm.__wbindgen_export_0);
         const len0 = WASM_VECTOR_LEN;
         const ptr1 = passArrayJsValueToWasm0(language_features, wasm.__wbindgen_export_0);
         const len1 = WASM_VECTOR_LEN;
-        wasm.get_qir(retptr, ptr0, len0, ptr1, len1);
+        const ptr2 = passStringToWasm0(profile, wasm.__wbindgen_export_0, wasm.__wbindgen_export_1);
+        const len2 = WASM_VECTOR_LEN;
+        wasm.get_qir(retptr, ptr0, len0, ptr1, len1, ptr2, len2);
         var r0 = getInt32Memory0()[retptr / 4 + 0];
         var r1 = getInt32Memory0()[retptr / 4 + 1];
         var r2 = getInt32Memory0()[retptr / 4 + 2];
         var r3 = getInt32Memory0()[retptr / 4 + 3];
-        var ptr3 = r0;
-        var len3 = r1;
+        var ptr4 = r0;
+        var len4 = r1;
         if (r3) {
-            ptr3 = 0; len3 = 0;
+            ptr4 = 0; len4 = 0;
             throw takeObject(r2);
         }
-        deferred4_0 = ptr3;
-        deferred4_1 = len3;
-        return getStringFromWasm0(ptr3, len3);
+        deferred5_0 = ptr4;
+        deferred5_1 = len4;
+        return getStringFromWasm0(ptr4, len4);
     } finally {
         wasm.__wbindgen_add_to_stack_pointer(16);
-        wasm.__wbindgen_export_4(deferred4_0, deferred4_1, 1);
+        wasm.__wbindgen_export_4(deferred5_0, deferred5_1, 1);
     }
 }
 
@@ -396,11 +399,12 @@ export function get_estimates(sources, params, language_features) {
 /**
 * @param {(Array<any>)[]} sources
 * @param {string} targetProfile
-* @param {IOperationInfo | undefined} operation
 * @param {(string)[]} language_features
+* @param {boolean} simulate
+* @param {IOperationInfo | undefined} [operation]
 * @returns {any}
 */
-export function get_circuit(sources, targetProfile, operation, language_features) {
+export function get_circuit(sources, targetProfile, language_features, simulate, operation) {
     try {
         const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
         const ptr0 = passArrayJsValueToWasm0(sources, wasm.__wbindgen_export_0);
@@ -409,7 +413,7 @@ export function get_circuit(sources, targetProfile, operation, language_features
         const len1 = WASM_VECTOR_LEN;
         const ptr2 = passArrayJsValueToWasm0(language_features, wasm.__wbindgen_export_0);
         const len2 = WASM_VECTOR_LEN;
-        wasm.get_circuit(retptr, ptr0, len0, ptr1, len1, isLikeNone(operation) ? 0 : addHeapObject(operation), ptr2, len2);
+        wasm.get_circuit(retptr, ptr0, len0, ptr1, len1, ptr2, len2, simulate, isLikeNone(operation) ? 0 : addHeapObject(operation));
         var r0 = getInt32Memory0()[retptr / 4 + 0];
         var r1 = getInt32Memory0()[retptr / 4 + 1];
         var r2 = getInt32Memory0()[retptr / 4 + 2];
@@ -445,6 +449,32 @@ export function get_library_source_content(name) {
     }
 }
 
+/**
+* @param {string} code
+* @param {(string)[]} language_features
+* @returns {string}
+*/
+export function get_ast(code, language_features) {
+    let deferred3_0;
+    let deferred3_1;
+    try {
+        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+        const ptr0 = passStringToWasm0(code, wasm.__wbindgen_export_0, wasm.__wbindgen_export_1);
+        const len0 = WASM_VECTOR_LEN;
+        const ptr1 = passArrayJsValueToWasm0(language_features, wasm.__wbindgen_export_0);
+        const len1 = WASM_VECTOR_LEN;
+        wasm.get_ast(retptr, ptr0, len0, ptr1, len1);
+        var r0 = getInt32Memory0()[retptr / 4 + 0];
+        var r1 = getInt32Memory0()[retptr / 4 + 1];
+        deferred3_0 = r0;
+        deferred3_1 = r1;
+        return getStringFromWasm0(r0, r1);
+    } finally {
+        wasm.__wbindgen_add_to_stack_pointer(16);
+        wasm.__wbindgen_export_4(deferred3_0, deferred3_1, 1);
+    }
+}
+
 /**
 * @param {string} code
 * @param {(string)[]} language_features
@@ -528,11 +558,20 @@ export function check_exercise_solution(solution_code, exercise_sources_js, even
 }
 
 /**
-* @returns {any}
+* @returns {(IDocFile)[]}
 */
 export function generate_docs() {
-    const ret = wasm.generate_docs();
-    return takeObject(ret);
+    try {
+        const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
+        wasm.generate_docs(retptr);
+        var r0 = getInt32Memory0()[retptr / 4 + 0];
+        var r1 = getInt32Memory0()[retptr / 4 + 1];
+        var v1 = getArrayJsValueFromWasm0(r0, r1).slice();
+        wasm.__wbindgen_export_4(r0, r1 * 4, 4);
+        return v1;
+    } finally {
+        wasm.__wbindgen_add_to_stack_pointer(16);
+    }
 }
 
 function handleError(f, args) {
@@ -542,7 +581,7 @@ function handleError(f, args) {
         wasm.__wbindgen_export_5(addHeapObject(e));
     }
 }
-function __wbg_adapter_174(arg0, arg1, arg2, arg3) {
+function __wbg_adapter_175(arg0, arg1, arg2, arg3) {
     wasm.__wbindgen_export_6(arg0, arg1, addHeapObject(arg2), addHeapObject(arg3));
 }
 
@@ -1316,7 +1355,7 @@ function __wbg_get_imports() {
                 const a = state0.a;
                 state0.a = 0;
                 try {
-                    return __wbg_adapter_174(a, state0.b, arg0, arg1);
+                    return __wbg_adapter_175(a, state0.b, arg0, arg1);
                 } finally {
                     state0.a = a;
                 }
@@ -1408,8 +1447,8 @@ function __wbg_get_imports() {
         const ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper701 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 294, __wbg_adapter_54);
+    imports.wbg.__wbindgen_closure_wrapper710 = function(arg0, arg1, arg2) {
+        const ret = makeMutClosure(arg0, arg1, 298, __wbg_adapter_54);
         return addHeapObject(ret);
     };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qsharp-lang",
   "description": "qsharp language package for quantum development",
-  "version": "1.3.4-dev",
+  "version": "1.3.6-dev",
   "license": "MIT",
   "engines": {
     "node": ">=16.17.0"
@@ -26,8 +26,8 @@
     "build": "npm run docs && npm run generate && npm run build:tsc",
     "generate": "node generate_katas_content.js && node generate_samples_content.js",
     "docs": "node generate_docs.js",
-    "build:tsc": "node ../node_modules/typescript/bin/tsc -p ./src/tsconfig.json",
-    "tsc:watch": "node ../node_modules/typescript/bin/tsc -p ./src/tsconfig.json --watch",
+    "build:tsc": "node ../../node_modules/typescript/bin/tsc -p ./src/tsconfig.json",
+    "tsc:watch": "node ../../node_modules/typescript/bin/tsc -p ./src/tsconfig.json --watch --preserveWatchOutput",
     "test": "node --test"
   },
   "type": "module",

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": []
   }
 }