qsharp-lang 1.22.3-dev → 1.22.5-dev

package/ux/atoms/utils.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// **** Helper functions for rendering SVG elements ****
+
+type StringMap = Record<string, string>;
+
+export function createSvgElements(...tags: string[]): SVGElement[] {
+  return tags.map((tag) =>
+    document.createElementNS("http://www.w3.org/2000/svg", tag),
+  );
+}
+
+export function setAttributes(el: SVGElement, attrs: StringMap) {
+  for (const key in attrs) el.setAttribute(key, attrs[key]);
+}
+
+export function appendChildren(parent: Element, children: Element[]) {
+  children.forEach((child) => parent.appendChild(child));
+}
+
+export function addChildWithClass(
+  parent: HTMLElement,
+  childTag: string,
+  className: string,
+): HTMLElement {
+  const parentDoc = parent.ownerDocument;
+  const child = parentDoc.createElement(childTag);
+  child.classList.add(className);
+  parent.appendChild(child);
+  return child;
+}

package/ux/chem/index.tsx

@@ -0,0 +1,191 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useRef, useEffect, useState } from "preact/hooks";
+import { createViewer, GLViewer } from "3dmol";
+
+import "./style.css";
+
+const themeAttribute = "data-vscode-theme-kind";
+
+export function MoleculeViewer(props: {
+  moleculeData: string;
+  cubeData: { [key: string]: string };
+  isoValue?: number;
+}) {
+  // Holds reference to the viewer div and 3Dmol viewer object.
+  const viewerRef = useRef<HTMLDivElement>(null);
+  const viewer = useRef<GLViewer | null>(null);
+  const activeCubeData = useRef([] as any[]);
+
+  const [viewStyle, setViewStyle] = useState("Sphere");
+  const [isoval, setIsoval] = useState(props.isoValue || 0.02);
+  const [cubeKey, setCubeKey] = useState(Object.keys(props.cubeData)[0] || "");
+
+  // Runs after the DOM has been created. Create the 3Dmol viewer and adds the model.
+  useEffect(() => {
+    if (props.moleculeData && viewerRef.current) {
+      const molViewer =
+        viewer.current ??
+        createViewer(viewerRef.current, {
+          backgroundColor: getComputedStyle(document.body).getPropertyValue(
+            "--vscode-editor-background",
+          ),
+        });
+      try {
+        molViewer.clear(); // If the model is being replaced, clear the old one. Perhaps should get and update instead?
+        molViewer.addModel(props.moleculeData.trim(), "xyz", {
+          assignBonds: true,
+        });
+      } catch (error) {
+        console.error("Error adding model:", error);
+      }
+      viewer.current = molViewer;
+      viewer.current.zoomTo();
+    }
+
+    // Respond to theme changes
+    const callback = (mutations: MutationRecord[]) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === themeAttribute) {
+          const newBackgroundColor = getComputedStyle(
+            document.body,
+          ).getPropertyValue("--vscode-editor-background");
+          if (viewer.current) {
+            viewer.current.setBackgroundColor(newBackgroundColor, 1.0);
+            viewer.current.render();
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(document.body, { attributeFilter: [themeAttribute] });
+  }, [props.moleculeData]);
+
+  useEffect(() => {
+    const currViewer = viewer.current;
+    if (!currViewer) {
+      return;
+    }
+
+    if (cubeKey && props.cubeData[cubeKey]) {
+      activeCubeData.current.forEach((voldata) => {
+        currViewer.removeShape(voldata);
+      });
+      activeCubeData.current = [];
+      const cubeData = props.cubeData[cubeKey];
+      activeCubeData.current.push(
+        currViewer.addVolumetricData(cubeData.trim(), "cube", {
+          isoval,
+          opacity: 1,
+          color: "red",
+        }),
+      );
+      activeCubeData.current.push(
+        currViewer.addVolumetricData(cubeData.trim(), "cube", {
+          isoval: -1 * isoval,
+          opacity: 1,
+          color: "green",
+        }),
+      );
+    }
+
+    if (viewStyle === "Sphere") {
+      currViewer.setStyle({}, { sphere: { scale: 0.3 }, stick: {} });
+    } else if (viewStyle === "Stick") {
+      currViewer.setStyle({}, { stick: { radius: 0.2 } });
+    } else if (viewStyle === "Line") {
+      currViewer.setStyle({}, { line: { linewidth: 5.0 } });
+    }
+    currViewer.render();
+
+    // Sometimes keys are added later. If that's the case, change the cubeKey to the first available.
+    if (!cubeKey && Object.keys(props.cubeData).length > 0) {
+      setCubeKey(Object.keys(props.cubeData)[0]);
+    }
+  }, [viewStyle, isoval, cubeKey, props.moleculeData, props.cubeData]);
+
+  // React to changes in the initial isovalue prop, just in case the widget updates state in parts.
+  useEffect(() => {
+    setIsoval(props.isoValue || 0.02);
+  }, [props.isoValue]);
+
+  return (
+    <div id="viewer-container">
+      <div
+        id="viewer"
+        ref={viewerRef}
+        style="width: 640px; height: 480px;"
+      ></div>
+
+      <div id="view-dropdown-container" class="view-option">
+        <label for="viewSelector">Visualization Style:</label>
+        <select
+          id="viewSelector"
+          onChange={(e) => {
+            const style = (e.target as HTMLSelectElement).value;
+            setViewStyle(style);
+          }}
+        >
+          <option value="Sphere">Sphere</option>
+          <option value="Stick">Stick</option>
+          <option value="Line">Line</option>
+        </select>
+      </div>
+      {cubeKey ? (
+        <>
+          <div id="cube-dropdown-container" class="view-option">
+            <label for="cubeSelector">Cube selection:</label>
+            <select
+              id="cubeSelector"
+              onChange={(e) => {
+                const key = (e.target as HTMLSelectElement).value;
+                setCubeKey(key);
+              }}
+            >
+              {Object.keys(props.cubeData).map((key) => (
+                <option value={key} selected={key === cubeKey}>
+                  {key}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div id="isoval-slider-container" class="view-option">
+            <label for="isovalSlider">Adjust isovalue:</label>
+            <input
+              type="range"
+              id="isovalSlider"
+              min="0.005"
+              max="0.1"
+              step="0.005"
+              value={isoval}
+              onInput={(e) => {
+                const new_isoval = parseFloat(
+                  (e.target as HTMLInputElement).value,
+                );
+                setIsoval(new_isoval);
+              }}
+            />
+            <input
+              type="number"
+              id="isovalInput"
+              min="0.005"
+              max="0.1"
+              step="0.001"
+              value={isoval}
+              onInput={(e) => {
+                const new_isoval = parseFloat(
+                  (e.target as HTMLInputElement).value,
+                );
+                if (!isNaN(new_isoval)) {
+                  setIsoval(new_isoval);
+                }
+              }}
+            />
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/ux/chem/style.css

@@ -0,0 +1,83 @@
+#viewer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+#viewer-container {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  /* border: 1px solid gray; */
+}
+
+#viewer {
+  width: 100%;
+  height: 100%;
+}
+
+#view-dropdown-container {
+  position: absolute;
+  top: 10px; /* distance from bottom */
+  left: 10px; /* distance from right */
+  height: 20px;
+  padding: 10px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: system-ui;
+}
+
+#viewSelector {
+  padding-left: 4px;
+}
+
+.view-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.view-option label {
+  margin-right: 0;
+  white-space: nowrap;
+  min-width: 120px;
+}
+
+.view-option select,
+.view-option input[type="range"] {
+  color: var(--vscode-editor-foreground);
+  background-color: var(--vscode-editor-background);
+}
+
+#cube-dropdown-container {
+  position: absolute;
+  top: 40px; /* distance from bottom */
+  left: 10px; /* distance from right */
+  padding: 10px;
+  height: 20px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: system-ui;
+}
+
+#isoval-slider-container {
+  position: absolute;
+  top: 70px; /* distance from bottom */
+  left: 10px; /* distance from right */
+  padding: 10px;
+  height: 40px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: system-ui;
+}
+
+#isovalSlider {
+  width: 100px;
+  outline: none;
+}
+
+#isovalInput {
+  width: 64px;
+}

package/ux/circuit-vis/circuit.ts

@@ -15,6 +15,7 @@ export {
   type Unitary,
   type Parameter,
   type Qubit,
+  type SourceLocation,
 } from "../../src/data-structures/circuit.js";
 
 export { CURRENT_VERSION } from "../../src/data-structures/circuit.js";

package/ux/circuit-vis/events.ts

@@ -170,11 +170,7 @@ class CircuitEvents {
           this.selectedOperation.controls != null &&
           this.selectedWire != null
         ) {
-          const controlIndex = this.selectedOperation.controls.findIndex(
-            (control) => control.qubit === this.selectedWire,
-          );
-          if (controlIndex !== -1)
-            this.selectedOperation.controls.splice(controlIndex, 1);
+          removeControl(this, this.selectedOperation, this.selectedWire);
         } else {
           // Otherwise, remove the selectedOperation
           removeOperation(this, selectedLocation);

package/ux/circuit-vis/formatters/gateFormatter.ts

@@ -119,7 +119,27 @@ const _createGate = (
 
   const zoomBtn: SVGElement | null = _zoomButton(renderData, nestedDepth);
   if (zoomBtn != null) svgElems = svgElems.concat([zoomBtn]);
-  return group(svgElems, attributes);
+
+  const gateElem = group(svgElems, attributes);
+
+  // If there's a source location, wrap the gate in an SVG <a> element to make it clickable
+  if (renderData.link) {
+    const linkElem = createSvgElement("a", {
+      href: renderData.link.href,
+      class: "qs-circuit-source-link",
+    });
+
+    // Add title as a child <title> element for accessibility and hover tooltip
+    const titleElem = createSvgElement("title");
+    titleElem.textContent = renderData.link.title;
+    linkElem.appendChild(titleElem);
+
+    // Add the gate as a child of the link
+    linkElem.appendChild(gateElem);
+    return linkElem;
+  }
+
+  return gateElem;
 };
 
 /**
@@ -137,14 +157,17 @@ const _zoomButton = (
 ): SVGElement | null => {
   if (renderData == undefined) return null;
 
-  const [x1, y1] = _gatePosition(renderData, nestedDepth);
+  const [gateBoundingBoxX, gateBoundingBoxY] = _gateBoundingBox(
+    renderData,
+    nestedDepth,
+  );
   let { dataAttributes } = renderData;
   dataAttributes = dataAttributes || {};
 
-  const expanded = "expanded" in dataAttributes;
+  const expanded = dataAttributes["expanded"] == "true";
 
-  const x = x1 + 2;
-  const y = y1 + 2;
+  const x = gateBoundingBoxX + 2;
+  const y = gateBoundingBoxY + 2;
   const circleBorder: SVGElement = circle(x, y, 10);
 
   if (expanded) {
@@ -167,45 +190,51 @@ const _zoomButton = (
 };
 
 /**
- * Calculate position of gate.
+ * Calculate the bounding box for a given operation, which
+ * may itself be a group of operations.
  *
  * @param renderData Operation render data.
  * @param nestedDepth Depth of nested operations.
  *
- * @returns Coordinates of gate: [x1, y1, x2, y2].
+ * @returns [x, y, width, height]
  */
-const _gatePosition = (
+const _gateBoundingBox = (
   renderData: GateRenderData,
   nestedDepth: number,
 ): [number, number, number, number] => {
-  const { x, width, type, targetsY } = renderData;
+  const {
+    x: xFromRenderData,
+    width: widthFromRenderData,
+    type,
+    targetsY,
+  } = renderData;
 
   const ys = targetsY?.flatMap((y) => y as number[]) || [];
   const maxY = Math.max(...ys);
   const minY = Math.min(...ys);
 
-  let x1: number, y1: number, x2: number, y2: number;
+  let x: number, y: number, width: number, height: number;
 
   switch (type) {
     case GateType.Group: {
       const padding = groupBoxPadding - nestedDepth * nestedGroupPadding;
 
-      x1 = x - 2 * padding;
-      y1 = minY - gateHeight / 2 - padding;
-      x2 = width + 2 * padding;
-      y2 = maxY + +gateHeight / 2 + padding - (minY - gateHeight / 2 - padding);
+      x = xFromRenderData - 2 * padding;
+      y = minY - gateHeight / 2 - padding;
+      width = widthFromRenderData + 2 * padding;
+      height = maxY - minY + gateHeight + 2 * padding;
 
-      return [x1, y1, x2, y2];
+      return [x, y, width, height];
     }
 
     default:
-      x1 = x - width / 2;
-      y1 = minY - gateHeight / 2;
-      x2 = x + width;
-      y2 = maxY + gateHeight / 2;
+      x = xFromRenderData - widthFromRenderData / 2;
+      y = minY - gateHeight / 2;
+      width = widthFromRenderData;
+      height = maxY - minY + gateHeight;
   }
 
-  return [x1, y1, x2, y2];
+  return [x, y, width, height];
 };
 
 /**
@@ -236,6 +265,7 @@ const _measure = (x: number, y: number, wireYs: number[]): SVGElement => {
     y + 8,
     x + width - 8,
     y - height / 2 + 8,
+    "qs-line-measure",
   );
   meter.style.pointerEvents = "none";
   mBox.setAttribute("data-wire-ys", JSON.stringify(wireYs));
@@ -376,6 +406,7 @@ const _unitaryBox = (
     argButton.setAttribute("class", "arg-button");
     elems.push(argButton);
   }
+
   return group(elems);
 };
 
@@ -388,15 +419,23 @@ const _unitaryBox = (
  * @returns SVG representation of SWAP gate.
  */
 const _swap = (renderData: GateRenderData, nestedDepth: number): SVGElement => {
-  const { x, targetsY } = renderData;
+  const { x: centerX, targetsY } = renderData;
 
   // Get SVGs of crosses
-  const [x1, y1, x2, y2] = _gatePosition(renderData, nestedDepth);
+  const [boundingBoxX, boundingBoxY, width, height] = _gateBoundingBox(
+    renderData,
+    nestedDepth,
+  );
   const ys = targetsY?.flatMap((y) => y as number[]) || [];
-
-  const bg: SVGElement = box(x1, y1, x2, y2, "gate-swap");
-  const crosses: SVGElement[] = ys.map((y) => _cross(x, y));
-  const vertLine: SVGElement = line(x, ys[0], x, ys[1]);
+  const bg: SVGElement = box(
+    boundingBoxX,
+    boundingBoxY,
+    width,
+    height,
+    "gate-swap",
+  );
+  const crosses: SVGElement[] = ys.map((y) => _cross(centerX, y));
+  const vertLine: SVGElement = line(centerX, ys[0], centerX, ys[1]);
   vertLine.style.pointerEvents = "none";
   return group([bg, ...crosses, vertLine]);
 };
@@ -549,10 +588,10 @@ const _groupedOperations = (
   nestedDepth: number,
 ): SVGElement => {
   const { children } = renderData;
-  const [x1, y1, x2, y2] = _gatePosition(renderData, nestedDepth);
+  const [x, y, w, h] = _gateBoundingBox(renderData, nestedDepth);
 
   // Draw dashed box around children gates
-  const box: SVGElement = dashedBox(x1, y1, x2, y2, "gate-unitary");
+  const box: SVGElement = dashedBox(x, y, w, h, "gate-unitary");
   const elems: SVGElement[] = [box];
   if (children != null)
     elems.push(formatGates(children as GateRenderData[][], nestedDepth + 1));

package/ux/circuit-vis/formatters/inputFormatter.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Qubit } from "../circuit.js";
+import { Qubit, SourceLocation } from "../circuit.js";
 import { RegisterType, RegisterMap, RegisterRenderData } from "../register.js";
 import {
   leftPadding,
@@ -9,7 +9,7 @@ import {
   registerHeight,
   classicalRegHeight,
 } from "../constants.js";
-import { group, text } from "./formatUtils.js";
+import { createSvgElement, group, text } from "./formatUtils.js";
 import { mathChars } from "../utils.js";
 
 /**
@@ -23,14 +23,20 @@ import { mathChars } from "../utils.js";
  */
 const formatInputs = (
   qubits: Qubit[],
+  renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
 ): { qubitWires: SVGElement; registers: RegisterMap; svgHeight: number } => {
   const qubitWires: SVGElement[] = [];
   const registers: RegisterMap = {};
 
   let currY: number = startY;
-  qubits.forEach(({ id, numResults }, wireIndex) => {
+  qubits.forEach(({ id, numResults, declarations }, wireIndex) => {
+    const link: { link?: { href: string; title: string } } = {};
+    if (renderLocations && declarations && declarations.length > 0) {
+      link.link = renderLocations(declarations);
+    }
+
     // Add qubit wire to list of qubit wires
-    qubitWires.push(qubitInput(currY, wireIndex, id.toString()));
+    qubitWires.push(qubitInput(currY, wireIndex, id.toString(), link.link));
 
     // Create qubit register
     registers[id] = { type: RegisterType.Qubit, y: currY };
@@ -73,6 +79,7 @@ const qubitInput = (
   y: number,
   wireIndex: number,
   subscript?: string,
+  link?: { href: string; title: string },
 ): SVGElement => {
   const el: SVGElement = text("", leftPadding, y, 16);
 
@@ -85,7 +92,23 @@ const qubitInput = (
   el.setAttribute("text-anchor", "start");
   el.setAttribute("dominant-baseline", "middle");
   el.setAttribute("data-wire", wireIndex.toString());
-  el.classList.add("qs-maintext");
+  el.classList.add("qs-maintext", "qs-qubit-label");
+
+  if (link) {
+    const linkElem = createSvgElement("a", {
+      href: link.href,
+      class: "qs-circuit-source-link",
+    });
+
+    // Add title as a child <title> element for accessibility and hover tooltip
+    const titleElem = createSvgElement("title");
+    titleElem.textContent = link.title;
+    linkElem.appendChild(titleElem);
+
+    // Add the gate as a child of the link
+    linkElem.appendChild(el);
+    return linkElem;
+  }
   return el;
 };
 

package/ux/circuit-vis/gateRenderData.ts

@@ -55,4 +55,6 @@ export interface GateRenderData {
   children?: GateRenderData[][] | GateRenderData[][][];
   /** Custom data attributes to attach to gate element. */
   dataAttributes?: DataAttributes;
+  /** Link href and title for clickable gate. */
+  link?: { href: string; title: string };
 }

package/ux/circuit-vis/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Sqore } from "./sqore.js";
+import { DrawOptions, Sqore } from "./sqore.js";
 import { CircuitGroup } from "./circuit.js";
 
 /**
@@ -17,13 +17,10 @@ import { CircuitGroup } from "./circuit.js";
 export const draw = (
   circuitGroup: CircuitGroup,
   container: HTMLElement,
-  renderDepth = 0,
-  isEditable = false,
-  editCallback?: (circuitGroup: CircuitGroup) => void,
-  runCallback?: () => void,
+  options: DrawOptions = {},
 ): void => {
-  const sqore = new Sqore(circuitGroup, isEditable, editCallback, runCallback);
-  sqore.draw(container, renderDepth);
+  const sqore = new Sqore(circuitGroup, options);
+  sqore.draw(container);
 };
 
 // Export types