qsharp-lang 1.14.5-dev → 1.15.1-dev

package/ux/circuit-vis/utils.ts

@@ -8,6 +8,8 @@ import {
   labelFontSize,
   argsFontSize,
 } from "./constants";
+import { ComponentGrid, Operation } from "./circuit";
+import { Register } from "./register";
 
 /**
  * Generate a UUID using `Math.random`.
@@ -74,4 +76,270 @@ const _getStringWidth = (
   return metrics.width;
 };
 
-export { createUUID, getGateWidth, _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
+ * operation itself.
+ *
+ * Example:
+ * Gate Foo contains gate H and gate RX.
+ * qIds of Gate H is 1
+ * qIds of Gate RX are 1, 2
+ * This should return [{qId: 1}, {qId: 2}]
+ *
+ * @param operation The operation to find targets for.
+ * @returns An array of registers with unique qIds.
+ */
+const getChildTargets = (operation: Operation): Register[] | [] => {
+  const _recurse = (operation: Operation) => {
+    switch (operation.kind) {
+      case "measurement":
+        registers.push(...operation.qubits);
+        registers.push(...operation.results);
+        break;
+      case "unitary":
+        registers.push(...operation.targets);
+        if (operation.controls) {
+          registers.push(...operation.controls);
+        }
+        break;
+      case "ket":
+        registers.push(...operation.targets);
+        break;
+    }
+
+    // If there is more children, keep adding more to registers
+    if (operation.children) {
+      operation.children.forEach((col) =>
+        col.components.forEach((child) => {
+          _recurse(child);
+        }),
+      );
+    }
+  };
+
+  const registers: Register[] = [];
+  if (operation.children == null) return [];
+
+  // Recursively walkthrough all children to populate registers
+  operation.children.forEach((col) =>
+    col.components.forEach((child) => {
+      _recurse(child);
+    }),
+  );
+
+  // Extract qIds from array of object
+  // i.e. [{qId: 0}, {qId: 1}, {qId: 1}] -> [0, 1, 1]
+  const qIds = registers.map((register) => register.qubit);
+  const uniqueQIds = Array.from(new Set(qIds));
+
+  // Transform array of numbers into array of qId object
+  // i.e. [0, 1] -> [{qId: 0}, {qId: 1}]
+  return uniqueQIds.map((qId) => ({ qubit: qId }));
+};
+
+/**
+ * Split a location string into an array of index tuples.
+ *
+ * Example:
+ * "0,1-0,2-2,3" -> [[0,1], [0,2], [2,3]]
+ *
+ * @param location The location string to split.
+ * @returns An array of indexes.
+ */
+const locationStringToIndexes = (location: string): [number, number][] => {
+  return location !== ""
+    ? location.split("-").map((segment) => {
+        const coords = segment.split(",");
+        if (coords.length !== 2) throw new Error("Invalid location");
+        return [parseInt(coords[0]), parseInt(coords[1])];
+      })
+    : [];
+};
+
+/**
+ * Gets the location of an operation, if it has one.
+ *
+ * @param operation The operation to get the location for.
+ * @returns The location string of the operation, or null if it doesn't have one.
+ */
+const getGateLocationString = (operation: Operation): string | null => {
+  if (operation.dataAttributes == null) return null;
+  return operation.dataAttributes["location"];
+};
+
+/**********************
+ *  Finder Functions  *
+ **********************/
+
+/**
+ * Find the surrounding gate element of a host element.
+ *
+ * @param hostElem The SVG element representing the host element.
+ * @returns The surrounding gate element or null if not found.
+ */
+const findGateElem = (hostElem: SVGElement): SVGElement | null => {
+  return hostElem.closest<SVGElement>("[data-location]");
+};
+
+/**
+ * Find the location of the gate surrounding a host element.
+ *
+ * @param hostElem The SVG element representing the host element.
+ * @returns The location string of the surrounding gate or null if not found.
+ */
+const findLocation = (hostElem: SVGElement) => {
+  const gateElem = findGateElem(hostElem);
+  return gateElem != null ? gateElem.getAttribute("data-location") : null;
+};
+
+/**
+ * Find the parent operation of the operation specified by location.
+ *
+ * @param componentGrid The grid of components to search through.
+ * @param location The location string of the operation.
+ * @returns The parent operation or null if not found.
+ */
+const findParentOperation = (
+  componentGrid: ComponentGrid,
+  location: string | null,
+): Operation | null => {
+  if (!location) return null;
+
+  const indexes = locationStringToIndexes(location);
+  indexes.pop();
+  const lastIndex = indexes.pop();
+
+  if (lastIndex == null) return null;
+
+  let parentOperation = componentGrid;
+  for (const index of indexes) {
+    parentOperation =
+      parentOperation[index[0]].components[index[1]].children ||
+      parentOperation;
+  }
+  return parentOperation[lastIndex[0]].components[lastIndex[1]];
+};
+
+/**
+ * Find the parent component grid of an operation based on its location.
+ *
+ * @param componentGrid The grid of components to search through.
+ * @param location The location string of the operation.
+ * @returns The parent grid of components or null if not found.
+ */
+const findParentArray = (
+  componentGrid: ComponentGrid,
+  location: string | null,
+): ComponentGrid | null => {
+  if (!location) return null;
+
+  const indexes = locationStringToIndexes(location);
+  indexes.pop(); // The last index refers to the operation itself, remove it so that the last index instead refers to the parent operation
+
+  let parentArray = componentGrid;
+  for (const index of indexes) {
+    parentArray =
+      parentArray[index[0]].components[index[1]].children || parentArray;
+  }
+  return parentArray;
+};
+
+/**
+ * Find an operation based on its location.
+ *
+ * @param componentGrid The grid of components to search through.
+ * @param location The location string of the operation.
+ * @returns The operation or null if not found.
+ */
+const findOperation = (
+  componentGrid: ComponentGrid,
+  location: string | null,
+): Operation | null => {
+  if (!location) return null;
+
+  const index = locationStringToIndexes(location).pop();
+  const operationParent = findParentArray(componentGrid, location);
+
+  if (operationParent == null || index == null) return null;
+
+  return operationParent[index[0]].components[index[1]];
+};
+
+/**********************
+ *  Getter Functions  *
+ **********************/
+
+/**
+ * Get list of y values based on circuit wires.
+ *
+ * @param container The HTML container element containing the circuit visualization.
+ * @returns An array of y values corresponding to the circuit wires.
+ */
+const getWireData = (container: HTMLElement): number[] => {
+  const wireElems = container.querySelectorAll<SVGGElement>(".qubit-wire");
+  const wireData = Array.from(wireElems).map((wireElem) => {
+    return Number(wireElem.getAttribute("y1"));
+  });
+  return wireData;
+};
+
+/**
+ * Get list of toolbox items.
+ *
+ * @param container The HTML container element containing the toolbox items.
+ * @returns An array of SVG graphics elements representing the toolbox items.
+ */
+const getToolboxElems = (container: HTMLElement): SVGGraphicsElement[] => {
+  return Array.from(
+    container.querySelectorAll<SVGGraphicsElement>("[toolbox-item]"),
+  );
+};
+
+/**
+ * Get list of host elements that dropzones can be attached to.
+ *
+ * @param container The HTML container element containing the circuit visualization.
+ * @returns An array of SVG graphics elements representing the host elements.
+ */
+const getHostElems = (container: HTMLElement): SVGGraphicsElement[] => {
+  const circuitSvg = container.querySelector("svg[id]");
+  return circuitSvg != null
+    ? Array.from(
+        circuitSvg.querySelectorAll<SVGGraphicsElement>(
+          '[class^="gate-"]:not(.gate-control, .gate-swap), .control-dot, .oplus, .cross',
+        ),
+      )
+    : [];
+};
+
+/**
+ * Get list of gate elements from the circuit, but not the toolbox.
+ *
+ * @param container The HTML container element containing the circuit visualization.
+ * @returns An array of SVG graphics elements representing the gate elements.
+ */
+const getGateElems = (container: HTMLElement): SVGGraphicsElement[] => {
+  const circuitSvg = container.querySelector("svg[id]");
+  return circuitSvg != null
+    ? Array.from(circuitSvg.querySelectorAll<SVGGraphicsElement>(".gate"))
+    : [];
+};
+
+export {
+  createUUID,
+  getGateWidth,
+  getChildTargets,
+  locationStringToIndexes,
+  getGateLocationString,
+  findGateElem,
+  findLocation,
+  findParentOperation,
+  findParentArray,
+  findOperation,
+  getWireData,
+  getToolboxElems,
+  getHostElems,
+  getGateElems,
+};

package/ux/circuit.tsx

@@ -5,6 +5,7 @@ import * as qviz from "./circuit-vis";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { CircuitProps } from "./data.js";
 import { Spinner } from "./spinner.js";
+import { toCircuitGroup } from "./circuit-vis/circuit";
 
 // 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
@@ -13,29 +14,49 @@ import { Spinner } from "./spinner.js";
 const MAX_OPERATIONS = 10000;
 const MAX_QUBITS = 1000;
 
+// For now we only support one circuit at a time.
+const MAX_CIRCUITS = 1;
+
 // This component is shared by the Python widget and the VS Code panel
-export function Circuit(props: { circuit: qviz.Circuit }) {
-  const circuit = props.circuit;
+export function Circuit(props: {
+  circuit?: qviz.CircuitGroup | qviz.Circuit;
+  isEditable: boolean;
+  editCallback?: (fileData: qviz.CircuitGroup) => void;
+}) {
+  const circuitGroup = toCircuitGroup(props.circuit);
+  const circuit = circuitGroup.circuits[0];
+
+  if (circuit.componentGrid === undefined) circuit.componentGrid = [];
+  if (circuit.qubits === undefined) circuit.qubits = [];
+
+  if (circuit.componentGrid === undefined) circuit.componentGrid = [];
+  if (circuit.qubits === undefined) circuit.qubits = [];
+
   const unrenderable =
-    circuit.qubits.length === 0 ||
-    circuit.operations.length > MAX_OPERATIONS ||
+    circuitGroup.circuits.length > MAX_CIRCUITS ||
+    (!props.isEditable && circuit.qubits.length === 0) ||
+    circuit.componentGrid.length > MAX_OPERATIONS ||
     circuit.qubits.length > MAX_QUBITS;
 
   return (
     <div>
       {unrenderable ? (
         <Unrenderable
-          qubits={props.circuit.qubits.length}
-          operations={props.circuit.operations.length}
+          qubits={circuit.qubits.length}
+          operations={circuit.componentGrid.length}
         />
       ) : (
-        <ZoomableCircuit circuit={props.circuit} />
+        <ZoomableCircuit {...props} circuitGroup={circuitGroup} />
       )}
     </div>
   );
 }
 
-function ZoomableCircuit(props: { circuit: qviz.Circuit }) {
+function ZoomableCircuit(props: {
+  circuitGroup: qviz.CircuitGroup;
+  isEditable: boolean;
+  editCallback?: (fileData: qviz.CircuitGroup) => void;
+}) {
   const circuitDiv = useRef<HTMLDivElement>(null);
   const [zoomLevel, setZoomLevel] = useState(100);
   const [rendering, setRendering] = useState(true);
@@ -46,22 +67,31 @@ function ZoomableCircuit(props: { circuit: qviz.Circuit }) {
     setRendering(true);
     const container = circuitDiv.current!;
     container.innerHTML = "";
-  }, [props.circuit]);
+  }, [props.circuitGroup]);
 
   useEffect(() => {
     if (rendering) {
       const container = circuitDiv.current!;
-      // Draw the circuit - may take a while for large circuits
-      const svg = renderCircuit(props.circuit, container);
+      // Draw the circuits - may take a while for large circuits
+      const svg = renderCircuits(
+        props.circuitGroup,
+        container,
+        props.isEditable,
+        props.editCallback,
+      );
+
+      if (!props.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
-      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);
-    } else {
+    } else if (!props.isEditable) {
       // Initial drawing done, attach window resize handler
       window.addEventListener("resize", onResize);
       return () => {
@@ -77,13 +107,13 @@ function ZoomableCircuit(props: { circuit: qviz.Circuit }) {
   return (
     <div>
       <div>
-        {rendering ? null : (
+        {props.isEditable || rendering ? null : (
           <ZoomControl zoom={zoomLevel} onInput={userSetZoomLevel} />
         )}
       </div>
       <div>
         {rendering
-          ? `Rendering diagram with ${props.circuit.operations.length} gates...`
+          ? `Rendering diagram with ${props.circuitGroup.circuits[0].componentGrid.length} gates...`
           : ""}
       </div>
       <div class="qs-circuit" ref={circuitDiv}></div>
@@ -128,14 +158,13 @@ function ZoomableCircuit(props: { circuit: qviz.Circuit }) {
     }
   }
 
-  function renderCircuit(circuit: qviz.Circuit, container: HTMLDivElement) {
-    qviz.draw(circuit, container);
-
-    // circuit-vis 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());
-
+  function renderCircuits(
+    circuitGroup: qviz.CircuitGroup,
+    container: HTMLDivElement,
+    isEditable: boolean,
+    editCallback?: (fileData: qviz.CircuitGroup) => void,
+  ) {
+    qviz.draw(circuitGroup, container, 0, isEditable, editCallback);
     return container.getElementsByClassName("qviz")[0]!;
   }
 
@@ -231,15 +260,14 @@ export function CircuitPanel(props: CircuitProps) {
           {props.title} {props.simulated ? "(Trace)" : ""}
         </h1>
       </div>
-      <div class="qs-circuit-error">{error}</div>
-      <p>{props.targetProfile}</p>
-      <p>
-        {
-          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>
+      {error && <div class="qs-circuit-error">{error}</div>}
+      {props.targetProfile && <p>{props.targetProfile}</p>}
+      {props.simulated && (
+        <p>
+          WARNING: This diagram shows the result of tracing a dynamic circuit,
+          and may change from run to run.
+        </p>
+      )}
       <p>
         Learn more at{" "}
         <a href="https://aka.ms/qdk.circuits">https://aka.ms/qdk.circuits</a>
@@ -249,7 +277,13 @@ export function CircuitPanel(props: CircuitProps) {
           <Spinner />
         </div>
       ) : null}
-      {props.circuit ? <Circuit circuit={props.circuit}></Circuit> : null}
+      {props.circuit ? (
+        <Circuit
+          circuit={props.circuit}
+          isEditable={props.isEditable}
+          editCallback={props.editCallback}
+        ></Circuit>
+      ) : null}
     </div>
   );
 }

package/ux/data.ts

@@ -66,13 +66,15 @@ export function CreateSingleEstimateResult(
 
 export type CircuitProps = {
   title: string;
-  circuit?: CircuitData;
+  circuit?: CircuitGroup;
   errorHtml?: string;
   targetProfile: string;
   /** Circuit was generated by running the simulator */
   simulated: boolean;
   /** Circuit is still being generated */
   calculating: boolean;
+  isEditable: boolean;
+  editCallback?: (fileData: CircuitGroup) => void;
 };
 
-export type CircuitData = import("../src/shared/circuit").Circuit;
+export type CircuitGroup = import("./circuit-vis/circuit").CircuitGroup;

package/ux/index.ts

@@ -9,7 +9,7 @@ import "./qsharp-circuit.css";
 export {
   CreateSingleEstimateResult,
   type ReData,
-  type CircuitData,
+  type CircuitGroup,
   type CircuitProps,
 } from "./data.js";
 export { Histogram } from "./histogram.js";