Add path visualizer JS files (#201)

Author: theRoughCode

src/Kernel/client/ExecutionPathVisualizer/constants.ts

@@ -0,0 +1,51 @@
+/**
+ * Enum for the various gate operations handled.
+ */
+export enum GateType {
+    /** Measurement gate. */
+    Measure,
+    /** CNOT gate. */
+    Cnot,
+    /** SWAP gate. */
+    Swap,
+    /** Single/multi qubit unitary gate. */
+    Unitary,
+    /** Single/multi controlled unitary gate. */
+    ControlledUnitary,
+    /** Nested group of classically-controlled gates. */
+    ClassicalControlled,
+    /** Invalid gate. */
+    Invalid
+};
+
+// Display attributes
+/** Left padding of SVG. */
+export const leftPadding: number = 20;
+/** x coordinate for first operation on each register. */
+export const startX: number = 80;
+/** y coordinate of first register. */
+export const startY: number = 40;
+/** Minimum width of each gate. */
+export const minGateWidth: number = 40;
+/** Height of each gate. */
+export const gateHeight: number = 40;
+/** Padding on each side of gate. */
+export const gatePadding: number = 10;
+/** Padding on each side of gate label. */
+export const labelPadding: number = 10;
+/** Height between each qubit register. */
+export const registerHeight: number = gateHeight + gatePadding * 2;
+/** Height between classical registers. */
+export const classicalRegHeight: number = gateHeight;
+/** Classical box inner padding. */
+export const classicalBoxPadding: number = 15;
+/** Additional offset for control button. */
+export const controlBtnOffset: number = 40;
+/** Control button radius. */
+export const controlBtnRadius: number = 15;
+/** Default font size for gate labels. */
+export const labelFontSize: number = 14;
+/** Default font size for gate arguments. */
+export const argsFontSize: number = 12;
+/** Starting x coord for each register wire. */
+export const regLineStart: number = 40;

src/Kernel/client/ExecutionPathVisualizer/executionPath.ts

@@ -0,0 +1,43 @@
+import { Register } from "./register";
+
+/**
+ * Structure of JSON representation of the execution path of a Q# operation.
+ */
+export interface ExecutionPath {
+    /** 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;
+};
+
+/**
+ * Represents an operation and the registers it acts on.
+ */
+export interface Operation {
+    /** Gate label. */
+    gate: string;
+    /** Gate arguments as string. */
+    argStr?: string,
+    /** Classically-controlled gates.
+     *  - children[0]: gates when classical control bit is 0.
+     *  - children[1]: gates when classical control bit is 1.
+    */
+    children?: Operation[][];
+    /** Whether gate is a controlled operation. */
+    controlled: boolean;
+    /** Whether gate is an adjoint operation. */
+    adjoint: boolean;
+    /** Control registers the gate acts on. */
+    controls: Register[];
+    /** Target registers the gate acts on. */
+    targets: Register[];
+};

src/Kernel/client/ExecutionPathVisualizer/formatters/formatUtils.ts

@@ -0,0 +1,104 @@
+import { labelFontSize } from "../constants";
+
+// Helper functions for basic SVG components
+
+/**
+ * Given an array of SVG elements, group them as an SVG group using the `<g>` tag.
+ * 
+ * @param svgElems Array of SVG elements.
+ * 
+ * @returns SVG string for grouped elements.
+ */
+export const group = (...svgElems: (string | string[])[]): string =>
+    ['<g>', ...svgElems.flat(), '</g>'].join('\n');
+
+/**
+ * Generate the SVG representation of a control dot used for controlled operations.
+ * 
+ * @param x      x coord of circle.
+ * @param y      y coord of circle.
+ * @param radius Radius of circle.
+ * 
+ * @returns SVG string for control dot.
+ */
+export const controlDot = (x: number, y: number, radius: number = 5): string =>
+    `<circle cx="${x}" cy="${y}" r="${radius}" stroke="black" fill="black" stroke-width="1"></circle>`;
+
+/**
+ * Generate an SVG line.
+ * 
+ * @param x1          x coord of starting point of line.
+ * @param y1          y coord of starting point of line.
+ * @param x2          x coord of ending point of line.
+ * @param y2          y coord fo ending point of line.
+ * @param strokeWidth Stroke width of line.
+ * 
+ * @returns SVG string for line.
+ */
+export const line = (x1: number, y1: number, x2: number, y2: number, strokeWidth: number = 1): string =>
+    `<line x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke="black" stroke-width="${strokeWidth}"></line>`;
+
+/**
+ * Generate the SVG representation of a unitary box that represents an arbitrary unitary operation.
+ * 
+ * @param x      x coord of box.
+ * @param y      y coord of box.
+ * @param width  Width of box.
+ * @param height Height of box.
+ * 
+ * @returns SVG string for unitary box.
+ */
+export const box = (x: number, y: number, width: number, height: number): string =>
+    `<rect x="${x}" y="${y}" width="${width}" height="${height}" stroke="black" fill="white" stroke-width="1"></rect>`;
+
+/**
+ * Generate the SVG text element from a given text string.
+ * 
+ * @param text String to render as SVG text.
+ * @param x    Middle x coord of text.
+ * @param y    Middle y coord of text.
+ * @param fs   Font size of text.
+ * 
+ * @returns SVG string for text.
+ */
+export const text = (text: string, x: number, y: number, fs: number = labelFontSize): string =>
+    `<text font-size="${fs}" font-family="Arial" x="${x}" y="${y}" dominant-baseline="middle" text-anchor="middle" fill="black">${text}</text>`;
+
+/**
+ * Generate the SVG representation of the arc used in the measurement box.
+ * 
+ * @param x  x coord of arc.
+ * @param y  y coord of arc.
+ * @param rx x radius of arc.
+ * @param ry y radius of arc.
+ * 
+ * @returns SVG string for arc.
+ */
+export const arc = (x: number, y: number, rx: number, ry: number): string =>
+    `<path d="M ${x + 2 * rx} ${y} A ${rx} ${ry} 0 0 0 ${x} ${y}" stroke="black" fill="none" stroke-width="1"></path>`;
+
+/**
+ * Generate a dashed SVG line.
+ * 
+ * @param x1 x coord of starting point of line.
+ * @param y1 y coord of starting point of line.
+ * @param x2 x coord of ending point of line.
+ * @param y2 y coord fo ending point of line.
+ * 
+ * @returns SVG string for dashed line.
+ */
+export const dashedLine = (x1: number, y1: number, x2: number, y2: number): string =>
+    `<line x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke="black" stroke-dasharray="8, 8" stroke-width="1"></line>`;
+
+/**
+ * Generate the SVG representation of the dashed box used for enclosing groups of operations controlled on a classical register.
+ * 
+ * @param x      x coord of box.
+ * @param y      y coord of box.
+ * @param width  Width of box.
+ * @param height Height of box.
+ * 
+ * @returns SVG string for dashed box.
+ */
+export const dashedBox = (x: number, y: number, width: number, height: number): string =>
+    `<rect x="${x}" y ="${y}" width="${width}" height="${height}" stroke="black" fill-opacity="0" stroke-dasharray="8, 8" stroke-width="1"></rect>`;