qsharp-lang 1.21.1-dev → 1.21.2-dev

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { GateRenderData, GateType } from "../gateRenderData";
+import { GateRenderData, GateType } from "../gateRenderData.js";
 import {
   minGateWidth,
   gateHeight,
@@ -12,7 +12,7 @@ import {
   groupBoxPadding,
   classicalRegHeight,
   nestedGroupPadding,
-} from "../constants";
+} from "../constants.js";
 import {
   createSvgElement,
   group,
@@ -24,9 +24,9 @@ import {
   arc,
   dashedLine,
   dashedBox,
-} from "./formatUtils";
+} from "./formatUtils.js";
 
-import { mathChars } from "../utils";
+import { mathChars } from "../utils.js";
 
 /**
  * Given an array of operations render data, return the SVG representation.
@@ -62,7 +62,11 @@ const formatGate = (
     renderData;
   switch (type) {
     case GateType.Measure:
-      return _createGate([_measure(x, controlsY[0])], renderData, nestedDepth);
+      return _createGate(
+        [_measure(x, controlsY[0], controlsY)],
+        renderData,
+        nestedDepth,
+      );
     case GateType.Unitary:
       return _createGate(
         [_unitary(label, x, targetsY as number[][], width, displayArgs)],
@@ -209,10 +213,11 @@ const _gatePosition = (
  *
  * @param x  x coord of measurement gate.
  * @param y  y coord of measurement gate.
+ * @param wireYs y coords of wires connected to the measurement gate.
  *
  * @returns SVG representation of measurement gate.
  */
-const _measure = (x: number, y: number): SVGElement => {
+const _measure = (x: number, y: number, wireYs: number[]): SVGElement => {
   x -= minGateWidth / 2;
   const width: number = minGateWidth,
     height = gateHeight;
@@ -233,6 +238,8 @@ const _measure = (x: number, y: number): SVGElement => {
     y - height / 2 + 8,
   );
   meter.style.pointerEvents = "none";
+  mBox.setAttribute("data-wire-ys", JSON.stringify(wireYs));
+  mBox.setAttribute("data-width", `${width}`);
   return group([mBox, mArc, meter]);
 };
 
@@ -290,11 +297,20 @@ const _unitary = (
     );
 
   // Render each group as a separate unitary boxes
-  const unitaryBoxes: SVGElement[] = y.map((group: number[]) => {
-    const maxY: number = group[group.length - 1],
-      minY: number = group[0];
+  const unitaryBoxes: SVGElement[] = y.map((wireYs: number[]) => {
+    const maxY: number = wireYs[wireYs.length - 1];
+    const minY: number = wireYs[0];
     const height: number = maxY - minY + gateHeight;
-    return _unitaryBox(label, x, minY, width, height, displayArgs, cssClass);
+    return _unitaryBox(
+      label,
+      x,
+      minY,
+      width,
+      height,
+      wireYs,
+      displayArgs,
+      cssClass,
+    );
   });
 
   // Draw dashed line between disconnected unitaries
@@ -318,6 +334,7 @@ const _unitary = (
  * @param y      y coord of gate.
  * @param width  Width of gate.
  * @param height Height of gate.
+ * @param wireYs y coords of wires connected to the gate.
  * @param displayArgs Arguments passed in to gate.
  * @param cssClass Optional CSS class to apply to the unitary gate for styling.
  *
@@ -328,15 +345,24 @@ const _unitaryBox = (
   x: number,
   y: number,
   width: number,
-  height: number = gateHeight,
+  height: number,
+  wireYs: number[],
   displayArgs?: string,
   cssClass?: string,
 ): SVGElement => {
   y -= gateHeight / 2;
-  const uBox: SVGElement = box(x - width / 2, y, width, height);
+  const uBox: SVGElement = box(
+    x - width / 2,
+    y,
+    width,
+    height,
+    cssClass || "gate-unitary",
+  );
   if (cssClass != null) {
     uBox.setAttribute("class", cssClass);
   }
+  uBox.setAttribute("data-wire-ys", JSON.stringify(wireYs));
+  uBox.setAttribute("data-width", `${width}`);
   const labelY = y + height / 2 - (displayArgs == null ? 0 : 7);
   const labelText = text(label, x, labelY);
   _style_gate_text(labelText);
@@ -385,7 +411,7 @@ const _swap = (renderData: GateRenderData, nestedDepth: number): SVGElement => {
 const _x = (renderData: GateRenderData): SVGElement => {
   const { x, targetsY } = renderData;
   const ys = targetsY.flatMap((y) => y as number[]);
-  return _oplus(x, ys[0]);
+  return _oplus(x, ys[0], ys);
 };
 
 /**
@@ -454,7 +480,9 @@ const _controlledGate = (
   // Get SVG for target gates
   switch (type) {
     case GateType.Cnot:
-      (targetsY as number[]).forEach((y) => targetGateSvgs.push(_oplus(x, y)));
+      (targetsY as number[]).forEach((y) =>
+        targetGateSvgs.push(_oplus(x, y, [y])),
+      );
       break;
     case GateType.Swap:
       (targetsY as number[]).forEach((y) => targetGateSvgs.push(_cross(x, y)));
@@ -473,7 +501,7 @@ const _controlledGate = (
   }
   // Get SVGs for control dots
   const controlledDotsSvg: SVGElement[] = controlsY.map((y) =>
-    controlDot(x, y),
+    controlDot(x, y, [y]),
   );
   // Create control lines
   const maxY: number = Math.max(...controlsY, ...(targetsY as number[]));
@@ -493,15 +521,19 @@ const _controlledGate = (
  *
  * @param x x coordinate of gate.
  * @param y y coordinate of gate.
- * @param r radius of circle.
+ * @param wireYs y coords of wires connected to the gate.
  *
  * @returns SVG representation of $\oplus$ symbol.
  */
-const _oplus = (x: number, y: number, r = 15): SVGElement => {
+const _oplus = (x: number, y: number, wireYs: number[]): SVGElement => {
+  const r = 15;
   const circleBorder: SVGElement = circle(x, y, r);
   const vertLine: SVGElement = line(x, y - r, x, y + r);
   const horLine: SVGElement = line(x - r, y, x + r, y);
-  return group([circleBorder, vertLine, horLine], { class: "oplus" });
+  const oplus = group([circleBorder, vertLine, horLine], { class: "oplus" });
+  oplus.setAttribute("data-wire-ys", JSON.stringify(wireYs));
+  oplus.setAttribute("data-width", `${2 * r}`);
+  return oplus;
 };
 
 /**
@@ -520,7 +552,7 @@ const _groupedOperations = (
   const [x1, y1, x2, y2] = _gatePosition(renderData, nestedDepth);
 
   // Draw dashed box around children gates
-  const box: SVGElement = dashedBox(x1, y1, x2, y2);
+  const box: SVGElement = dashedBox(x1, y1, x2, y2, "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,16 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Qubit } from "../circuit";
-import { RegisterType, RegisterMap, RegisterRenderData } from "../register";
+import { Qubit } from "../circuit.js";
+import { RegisterType, RegisterMap, RegisterRenderData } from "../register.js";
 import {
   leftPadding,
   startY,
   registerHeight,
   classicalRegHeight,
-} from "../constants";
-import { group, text } from "./formatUtils";
-import { mathChars } from "../utils";
+} from "../constants.js";
+import { group, text } from "./formatUtils.js";
+import { mathChars } from "../utils.js";
 
 /**
  * `formatInputs` takes in an array of Qubits and outputs the SVG string of formatted

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

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { RegisterMap } from "../register";
-import { regLineStart } from "../constants";
-import { GateRenderData, GateType } from "../gateRenderData";
-import { group, line } from "./formatUtils";
+import { RegisterMap } from "../register.js";
+import { regLineStart } from "../constants.js";
+import { GateRenderData, GateType } from "../gateRenderData.js";
+import { group, line } from "./formatUtils.js";
 
 /**
  * Generate the SVG representation of the qubit register wires in `registers` and the classical wires

package/ux/circuit-vis/gateRenderData.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { DataAttributes } from "./circuit";
+import { DataAttributes } from "./circuit.js";
 
 /**
  * Enum for the various gate operations handled.

package/ux/circuit-vis/index.ts

@@ -1,8 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Sqore } from "./sqore";
-import { CircuitGroup } from "./circuit";
+import { Sqore } from "./sqore.js";
+import { CircuitGroup } from "./circuit.js";
 
 /**
  * Render `circuit` into `container` at the specified layer depth.
@@ -34,4 +34,4 @@ export type {
   Column,
   Qubit,
   Operation,
-} from "./circuit";
+} from "./circuit.js";

package/ux/circuit-vis/panel.ts

@@ -1,16 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Ket, Measurement, Operation, Unitary } from "./circuit";
+import { Ket, Measurement, Operation, Unitary } from "./circuit.js";
 import {
   gateHeight,
   horizontalGap,
   minGateWidth,
   verticalGap,
-} from "./constants";
-import { formatGate } from "./formatters/gateFormatter";
-import { GateType, GateRenderData } from "./gateRenderData";
-import { getGateWidth } from "./utils";
+} from "./constants.js";
+import { formatGate } from "./formatters/gateFormatter.js";
+import { GateType, GateRenderData } from "./gateRenderData.js";
+import { getGateWidth } from "./utils.js";
 
 /**
  * Create a panel for the circuit visualization.
@@ -19,7 +19,7 @@ import { getGateWidth } from "./utils";
 const createPanel = (container: HTMLElement): void => {
   // Find or create the wrapper
   let wrapper: HTMLElement | null = container.querySelector(".circuit-wrapper");
-  const circuit = container.querySelector("svg[id]");
+  const circuit = container.querySelector("svg.qviz");
   if (circuit == null) {
     throw new Error("No circuit found in the container");
   }

package/ux/circuit-vis/process.ts

@@ -7,11 +7,11 @@ import {
   gatePadding,
   controlBtnOffset,
   groupBoxPadding,
-} from "./constants";
-import { ComponentGrid, Operation, ConditionalRender } from "./circuit";
-import { GateRenderData, GateType } from "./gateRenderData";
-import { Register, RegisterMap } from "./register";
-import { getGateWidth } from "./utils";
+} from "./constants.js";
+import { ComponentGrid, Operation, ConditionalRender } from "./circuit.js";
+import { GateRenderData, GateType } from "./gateRenderData.js";
+import { Register, RegisterMap } from "./register.js";
+import { getGateWidth } from "./utils.js";
 
 /**
  * Takes in a component grid and maps the operations to `GateRenderData` objects which

package/ux/circuit-vis/register.ts

@@ -6,4 +6,4 @@ export {
   type Register,
   type RegisterMap,
   type RegisterRenderData,
-} from "../../src/data-structures/register";
+} from "../../src/data-structures/register.js";

package/ux/circuit-vis/sqore.ts

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { formatInputs } from "./formatters/inputFormatter";
-import { formatGates } from "./formatters/gateFormatter";
-import { formatRegisters } from "./formatters/registerFormatter";
-import { processOperations } from "./process";
+import { formatInputs } from "./formatters/inputFormatter.js";
+import { formatGates } from "./formatters/gateFormatter.js";
+import { formatRegisters } from "./formatters/registerFormatter.js";
+import { processOperations } from "./process.js";
 import {
   ConditionalRender,
   Circuit,
@@ -12,13 +12,17 @@ import {
   ComponentGrid,
   Operation,
   Column,
-} from "./circuit";
-import { GateRenderData, GateType } from "./gateRenderData";
-import { createUUID } from "./utils";
-import { gateHeight, minGateWidth, minToolboxHeight, svgNS } from "./constants";
-import { createDropzones } from "./draggable";
-import { enableEvents } from "./events";
-import { createPanel, enableRunButton } from "./panel";
+} from "./circuit.js";
+import { GateRenderData, GateType } from "./gateRenderData.js";
+import {
+  gateHeight,
+  minGateWidth,
+  minToolboxHeight,
+  svgNS,
+} from "./constants.js";
+import { createDropzones } from "./draggable.js";
+import { enableEvents } from "./events.js";
+import { createPanel, enableRunButton } from "./panel.js";
 
 /**
  * Contains render data for visualization.
@@ -133,7 +137,7 @@ export class Sqore {
     const composedSqore: ComposedSqore = this.compose(_circuit);
     const svg: SVGElement = this.generateSvg(composedSqore);
     this.setViewBox(svg);
-    const previousSvg = container.querySelector("svg[id]");
+    const previousSvg = container.querySelector("svg.qviz");
     if (previousSvg == null) {
       container.appendChild(svg);
     } else {
@@ -231,10 +235,8 @@ export class Sqore {
    */
   private generateSvg(composedSqore: ComposedSqore): SVGElement {
     const { width, height, elements } = composedSqore;
-    const uuid: string = createUUID();
 
     const svg: SVGElement = document.createElementNS(svgNS, "svg");
-    svg.setAttribute("id", uuid);
     svg.setAttribute("class", "qviz");
     svg.setAttribute("width", width.toString());
     svg.setAttribute("height", height.toString());

package/ux/circuit-vis/utils.ts

@@ -1,15 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { GateRenderData, GateType } from "./gateRenderData";
+import { GateRenderData, GateType } from "./gateRenderData.js";
 import {
   minGateWidth,
   labelPadding,
   labelFontSize,
   argsFontSize,
-} from "./constants";
-import { ComponentGrid, Operation } from "./circuit";
-import { Register } from "./register";
+} from "./constants.js";
+import { ComponentGrid, Operation } from "./circuit.js";
+import { Register } from "./register.js";
 
 /**
  * Performs a deep equality check between two objects or arrays.
@@ -49,20 +49,6 @@ const deepEqual = (obj1: unknown, obj2: unknown): boolean => {
   return true;
 };
 
-/**
- * Generate a UUID using `Math.random`.
- * Note: this implementation came from https://stackoverflow.com/questions/105034/how-to-create-guid-uuid
- * and is not cryptographically secure but works for our use case.
- *
- * @returns UUID string.
- */
-const createUUID = (): string =>
-  "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0,
-      v = c == "x" ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-
 /**
  * Calculate the width of a gate, given its render data.
  *
@@ -117,7 +103,7 @@ const _getStringWidth = (
 /**
  * Find targets of an operation's children by recursively walking
  * through all of its children's controls and targets.
- * Note that this intensionally ignores the direct targets of the
+ * Note that this intentionally ignores the direct targets of the
  * operation itself.
  *
  * Example:
@@ -388,7 +374,7 @@ const getToolboxElems = (container: HTMLElement): SVGGraphicsElement[] => {
  * @returns An array of SVG graphics elements representing the host elements.
  */
 const getHostElems = (container: HTMLElement): SVGGraphicsElement[] => {
-  const circuitSvg = container.querySelector("svg[id]");
+  const circuitSvg = container.querySelector("svg.qviz");
   return circuitSvg != null
     ? Array.from(
         circuitSvg.querySelectorAll<SVGGraphicsElement>(
@@ -405,7 +391,7 @@ const getHostElems = (container: HTMLElement): SVGGraphicsElement[] => {
  * @returns An array of SVG graphics elements representing the gate elements.
  */
 const getGateElems = (container: HTMLElement): SVGGraphicsElement[] => {
-  const circuitSvg = container.querySelector("svg[id]");
+  const circuitSvg = container.querySelector("svg.qviz");
   return circuitSvg != null
     ? Array.from(circuitSvg.querySelectorAll<SVGGraphicsElement>(".gate"))
     : [];
@@ -418,7 +404,7 @@ const getGateElems = (container: HTMLElement): SVGGraphicsElement[] => {
  * @returns An array of SVGTextElement representing the qubit labels.
  */
 const getQubitLabelElems = (container: HTMLElement): SVGTextElement[] => {
-  const circuitSvg = container.querySelector("svg[id]");
+  const circuitSvg = container.querySelector("svg.qviz");
   if (!circuitSvg) return [];
   const labelGroup = circuitSvg.querySelector("g.qubit-input-states");
   if (!labelGroup) return [];
@@ -440,7 +426,6 @@ const mathChars = {
 
 export {
   deepEqual,
-  createUUID,
   getGateWidth,
   getChildTargets,
   locationStringToIndexes,

package/ux/circuit.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import * as qviz from "./circuit-vis";
+import * as qviz from "./circuit-vis/index.js";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { CircuitProps } from "./data.js";
 import { Spinner } from "./spinner.js";
-import { toCircuitGroup } from "./circuit-vis/circuit";
+import { toCircuitGroup } from "./circuit-vis/circuit.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

package/ux/data.ts

@@ -78,4 +78,4 @@ export type CircuitProps = {
   runCallback?: () => void;
 };
 
-export type CircuitGroup = import("./circuit-vis/circuit").CircuitGroup;
+export type CircuitGroup = import("./circuit-vis/circuit.js").CircuitGroup;

package/ux/histogram.tsx

@@ -200,7 +200,7 @@ export function Histogram(props: {
     const svgElem = e.currentTarget as SVGSVGElement;
 
     // Below gets the mouse location in the svg element coordinates. This stays
-    // consistent while the scroll is occuring (i.e. it is the point the mouse
+    // consistent while the scroll is occurring (i.e. it is the point the mouse
     // was at when scrolling started).
     const mousePoint = new DOMPoint(e.clientX, e.clientY).matrixTransform(
       svgElem.getScreenCTM()?.inverse(),
@@ -211,7 +211,7 @@ export function Histogram(props: {
     that location on the screen. That means adjusting the scroll offset.
 
     SVG translation is used to pan left and right, but zooming is done manually (making the
-    bars wider or thinner) to keep the fonts from getting streched, which occurs with scaling.
+    bars wider or thinner) to keep the fonts from getting stretched, which occurs with scaling.
 
     deltaX and deltaY do not accumulate across events, they are a new delta each time.
     */

package/ux/qsharp-ux.css

@@ -675,7 +675,7 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
   padding: 4px;
 }
 
-/* This rule adds the little triange pointer at the top */
+/* This rule adds the little triangle pointer at the top */
 .qs-scatterChart-tooltip::after,
 .qs-scatterChart-selectedInfo::after {
   content: "";

package/ux/scatterChart.tsx

@@ -179,7 +179,7 @@ export function ScatterChart(props: {
     }
   });
 
-  // The mouse events (over, out, and click) bubble, so put the hanlders on the
+  // The mouse events (over, out, and click) bubble, so put the handlers on the
   // SVG element and check the target element in the handler.
   return (
     <div style="position: relative">

package/ux/tsconfig.json

@@ -1,8 +1,11 @@
 {
   "compilerOptions": {
-    "module": "CommonJS",
+    "outDir": "../dist",
+    "declaration": true,
+    "sourceMap": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "target": "ES2020",
-    "noEmit": true,
     "lib": ["DOM", "ES2020"],
     "strict": true /* enable all strict type-checking options */,
     "jsx": "react-jsx",