Copy over quantum-viz.js source code

compiler/qsc_circuit/src/circuit.rs

@@ -9,7 +9,7 @@ use serde::Serialize;
 use std::{fmt::Display, fmt::Write, ops::Not, vec};
 
 /// Representation of a quantum circuit.
-/// Implementation of <https://github.com/microsoft/quantum-viz.js/wiki/API-schema-reference>
+/// Implementation of `CircuitData` type from `qsharp-lang` npm package.
 #[derive(Clone, Serialize, Default, Debug, PartialEq)]
 pub struct Circuit {
     pub operations: Vec<Operation>,

npm/qsharp/src/browser.ts

@@ -191,3 +191,5 @@ export type {
 };
 
 export * as utils from "./utils.js";
+
+export type { Circuit as CircuitData } from "./shared/circuit.js";

npm/qsharp/src/compiler/compiler.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { type Circuit as CircuitData } from "@microsoft/quantum-viz.js/lib/circuit.js";
+import { type Circuit as CircuitData } from "../shared/circuit.js";
 import {
   IDocFile,
   IOperationInfo,

npm/qsharp/src/debug-service/debug-service.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { type Circuit as CircuitData } from "@microsoft/quantum-viz.js/lib/circuit.js";
+import { type Circuit as CircuitData } from "../shared/circuit.js";
 import type {
   DebugService,
   IBreakpointSpan,

npm/qsharp/src/shared/README.md

@@ -0,0 +1 @@
+This directory contains shared modules to be referenced from both `qsharp/src/` and `qsharp/ux/`.

npm/qsharp/src/shared/circuit.ts

@@ -0,0 +1,72 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { Register } from "./register.js";
+
+/**
+ * Circuit to be visualized.
+ */
+export interface Circuit {
+  /** Array of qubit resources. */
+  qubits: Qubit[];
+  operations: Operation[];
+}
+
+/**
+ * Represents a unique qubit resource bit.
+ */
+export interface Qubit {
+  /** Qubit ID. */
+  id: number;
+  /** Number of classical registers attached to quantum register. */
+  numChildren?: number;
+}
+
+/**
+ * Conditions on when to render the given operation.
+ */
+export enum ConditionalRender {
+  /** Always rendered. */
+  Always,
+  /** Render classically-controlled operation when measurement is a zero. */
+  OnZero,
+  /** Render classically-controlled operation when measurement is a one. */
+  OnOne,
+  /** Render operation as a group of its nested operations. */
+  AsGroup,
+}
+
+/**
+ * Custom data attributes (e.g. data-{attr}="{val}")
+ */
+export interface DataAttributes {
+  [attr: string]: string;
+}
+
+/**
+ * Represents an operation and the registers it acts on.
+ */
+export interface Operation {
+  /** Gate label. */
+  gate: string;
+  /** Formatted gate arguments to be displayed. */
+  displayArgs?: string;
+  /** Nested operations within this operation. */
+  children?: Operation[];
+  /** Whether gate is a measurement operation. */
+  isMeasurement: boolean;
+  /** Whether gate is a conditional operation. */
+  isConditional: boolean;
+  /** Whether gate is a controlled operation. */
+  isControlled: boolean;
+  /** Whether gate is an adjoint operation. */
+  isAdjoint: boolean;
+  /** Control registers the gate acts on. */
+  controls?: Register[];
+  /** Target registers the gate acts on. */
+  targets: Register[];
+  /** Specify conditions on when to render operation. */
+  conditionalRender?: ConditionalRender;
+  /** Custom data attributes to attach to gate element. */
+  dataAttributes?: DataAttributes;
+}

npm/qsharp/src/shared/register.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+/**
+ * Type of register.
+ */
+export enum RegisterType {
+  Qubit,
+  Classical,
+}
+
+/**
+ * Represents a register resource.
+ */
+export interface Register {
+  /** Type of register. If missing defaults to Qubit. */
+  type?: RegisterType;
+  /** Qubit register ID. */
+  qId: number;
+  /** Classical register ID (if classical register). */
+  cId?: number;
+}
+
+/**
+ * Metadata for qubit register.
+ */
+export interface RegisterMetadata {
+  /** Type of register. */
+  type: RegisterType;
+  /** y coord of register */
+  y: number;
+  /** Nested classical registers attached to quantum register. */
+  children?: RegisterMetadata[];
+}
+
+/**
+ * Mapping from qubit IDs to their register metadata.
+ */
+export interface RegisterMap {
+  [id: number]: RegisterMetadata;
+}

npm/qsharp/ux/circuit-vis/README.md

@@ -0,0 +1 @@
+The code in this folder was copied and adapted from `https://github.com/microsoft/quantum-viz.js`.

npm/qsharp/ux/circuit-vis/circuit.ts

@@ -0,0 +1,10 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+export {
+  ConditionalRender,
+  type Circuit,
+  type DataAttributes,
+  type Operation,
+  type Qubit,
+} from "../../src/shared/circuit";

npm/qsharp/ux/circuit-vis/constants.ts

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+// SVG Namespace
+export const svgNS = "http://www.w3.org/2000/svg";
+
+// Display attributes
+/** Left padding of SVG. */
+export const leftPadding = 20;
+/** x coordinate for first operation on each register. */
+export const startX = 80;
+/** y coordinate of first register. */
+export const startY = 40;
+/** Minimum width of each gate. */
+export const minGateWidth = 40;
+/** Height of each gate. */
+export const gateHeight = 40;
+/** Padding on each side of gate. */
+export const gatePadding = 10;
+/** Padding on each side of gate label. */
+export const labelPadding = 10;
+/** Height between each qubit register. */
+export const registerHeight: number = gateHeight + gatePadding * 2;
+/** Height between classical registers. */
+export const classicalRegHeight: number = gateHeight;
+/** Group box inner padding. */
+export const groupBoxPadding = gatePadding;
+/** Padding between nested groups. */
+export const nestedGroupPadding = 2;
+/** Additional offset for control button. */
+export const controlBtnOffset = 40;
+/** Control button radius. */
+export const controlBtnRadius = 15;
+/** Default font size for gate labels. */
+export const labelFontSize = 14;
+/** Default font size for gate arguments. */
+export const argsFontSize = 12;
+/** Starting x coord for each register wire. */
+export const regLineStart = 40;