qsharp-lang 1.13.1-dev → 1.13.3-dev

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

@@ -0,0 +1,118 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { RegisterMap } from "../register";
+import { regLineStart } from "../constants";
+import { Metadata, GateType } from "../metadata";
+import { group, line, text } from "./formatUtils";
+
+/**
+ * Generate the SVG representation of the qubit register wires in `registers` and the classical wires
+ * stemming from each measurement gate.
+ *
+ * @param registers    Map from register IDs to register metadata.
+ * @param measureGates Array of measurement gates metadata.
+ * @param endX         End x coord.
+ *
+ * @returns SVG representation of register wires.
+ */
+const formatRegisters = (
+  registers: RegisterMap,
+  measureGates: Metadata[],
+  endX: number,
+): SVGElement => {
+  const formattedRegs: SVGElement[] = [];
+  // Render qubit wires
+  for (const qId in registers) {
+    formattedRegs.push(_qubitRegister(Number(qId), endX, registers[qId].y));
+  }
+  // Render classical wires
+  measureGates.forEach(({ type, x, targetsY, controlsY }) => {
+    if (type !== GateType.Measure) return;
+    const gateY: number = controlsY[0];
+    (targetsY as number[]).forEach((y) => {
+      formattedRegs.push(_classicalRegister(x, gateY, endX, y));
+    });
+  });
+  return group(formattedRegs);
+};
+
+/**
+ * Generates the SVG representation of a classical register.
+ *
+ * @param startX Start x coord.
+ * @param gateY  y coord of measurement gate.
+ * @param endX   End x coord.
+ * @param wireY  y coord of wire.
+ *
+ * @returns SVG representation of the given classical register.
+ */
+const _classicalRegister = (
+  startX: number,
+  gateY: number,
+  endX: number,
+  wireY: number,
+): SVGElement => {
+  const wirePadding = 1;
+  // Draw vertical lines
+  const vLine1: SVGElement = line(
+    startX + wirePadding,
+    gateY,
+    startX + wirePadding,
+    wireY - wirePadding,
+    "register-classical",
+  );
+  const vLine2: SVGElement = line(
+    startX - wirePadding,
+    gateY,
+    startX - wirePadding,
+    wireY + wirePadding,
+    "register-classical",
+  );
+
+  // Draw horizontal lines
+  const hLine1: SVGElement = line(
+    startX + wirePadding,
+    wireY - wirePadding,
+    endX,
+    wireY - wirePadding,
+    "register-classical",
+  );
+  const hLine2: SVGElement = line(
+    startX - wirePadding,
+    wireY + wirePadding,
+    endX,
+    wireY + wirePadding,
+    "register-classical",
+  );
+
+  return group([vLine1, vLine2, hLine1, hLine2]);
+};
+
+/**
+ * Generates the SVG representation of a qubit register.
+ *
+ * @param qId         Qubit register index.
+ * @param endX        End x coord.
+ * @param y           y coord of wire.
+ * @param labelOffset y offset for wire label.
+ *
+ * @returns SVG representation of the given qubit register.
+ */
+const _qubitRegister = (
+  qId: number,
+  endX: number,
+  y: number,
+  labelOffset = 16,
+): SVGElement => {
+  const wire: SVGElement = line(regLineStart, y, endX, y);
+
+  const label: SVGElement = text(`q${qId}`, regLineStart, y - labelOffset);
+  label.setAttribute("dominant-baseline", "hanging");
+  label.setAttribute("text-anchor", "start");
+  label.setAttribute("font-size", "75%");
+
+  return group([wire, label]);
+};
+
+export { formatRegisters, _classicalRegister, _qubitRegister };

package/ux/circuit-vis/index.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { Sqore } from "./sqore";
+import { Circuit } from "./circuit";
+import { StyleConfig } from "./styles";
+
+/**
+ * Render `circuit` into `container` at the specified layer depth.
+ *
+ * @param circuit Circuit to be visualized.
+ * @param container HTML element for rendering visualization into.
+ * @param style Custom visualization style.
+ * @param renderDepth Initial layer depth at which to render gates.
+ */
+export const draw = (
+  circuit: Circuit,
+  container: HTMLElement,
+  style: StyleConfig | string = {},
+  renderDepth = 0,
+): void => {
+  const sqore = new Sqore(circuit, style);
+  sqore.draw(container, renderDepth);
+};
+
+export { STYLES } from "./styles";
+
+// Export types
+export type { StyleConfig } from "./styles";
+export type { Circuit, Qubit, Operation } from "./circuit";

package/ux/circuit-vis/metadata.ts

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { DataAttributes } from "./circuit";
+
+/**
+ * Enum for the various gate operations handled.
+ */
+export enum GateType {
+  /** Measurement gate. */
+  Measure,
+  /** CNOT gate. */
+  Cnot,
+  /** SWAP gate. */
+  Swap,
+  /** X gate. */
+  X,
+  /** Single/multi qubit unitary gate. */
+  Unitary,
+  /** Single/multi controlled unitary gate. */
+  ControlledUnitary,
+  /** Nested group of classically-controlled gates. */
+  ClassicalControlled,
+  /** Group of nested gates */
+  Group,
+  /** Invalid gate. */
+  Invalid,
+}
+
+/**
+ * Metadata used to store information pertaining to a given
+ * operation for rendering its corresponding SVG.
+ */
+export interface Metadata {
+  /** Gate type. */
+  type: GateType;
+  /** Centre x coord for gate position. */
+  x: number;
+  /** Array of y coords of control registers. */
+  controlsY: number[];
+  /** Array of y coords of target registers.
+   *  For `GateType.Unitary` or `GateType.ControlledUnitary`, this is an array of groups of
+   *  y coords, where each group represents a unitary box to be rendered separately.
+   */
+  targetsY: (number | number[])[];
+  /** Gate label. */
+  label: string;
+  /** Gate arguments as string. */
+  displayArgs?: string;
+  /** Gate width. */
+  width: number;
+  /** Children operations as part of group. */
+  children?: (Metadata | Metadata[])[];
+  /** Custom data attributes to attach to gate element. */
+  dataAttributes?: DataAttributes;
+}