qsharp-lang 1.15.2-dev → 1.15.4-dev

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

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Metadata, GateType } from "../metadata";
+import { GateRenderData, GateType } from "../gateRenderData";
 import {
   minGateWidth,
   gateHeight,
@@ -26,58 +26,68 @@ import {
   dashedBox,
 } from "./formatUtils";
 
+import { mathChars } from "../utils";
+
 /**
- * Given an array of operations (in metadata format), return the SVG representation.
+ * Given an array of operations render data, return the SVG representation.
  *
- * @param opsMetadata 2D array of Metadata representation of operations.
+ * @param renderData 2D array of rendering data for gates.
  * @param nestedDepth Depth of nested operations (used in classically controlled and grouped operations).
  *
  * @returns SVG representation of operations.
  */
 const formatGates = (
-  opsMetadata: Metadata[][],
+  renderData: GateRenderData[][],
   nestedDepth = 0,
 ): SVGElement => {
-  const formattedGates: SVGElement[] = opsMetadata
-    .map((col) => col.map((metadata) => formatGate(metadata, nestedDepth)))
+  const formattedGates: SVGElement[] = renderData
+    .map((col) => col.map((renderData) => formatGate(renderData, nestedDepth)))
     .flat();
   return group(formattedGates);
 };
 
 /**
- * Takes in an operation's metadata and formats it into SVG.
+ * Takes in an operation's rendering data and formats it into SVG.
  *
- * @param metadata Metadata object representation of gate.
+ * @param renderData The rendering data of the gate.
  * @param nestedDepth Depth of nested operations (used in classically controlled and grouped operations).
  *
  * @returns SVG representation of gate.
  */
-const formatGate = (metadata: Metadata, nestedDepth = 0): SVGElement => {
-  const { type, x, controlsY, targetsY, label, displayArgs, width } = metadata;
+const formatGate = (
+  renderData: GateRenderData,
+  nestedDepth = 0,
+): SVGElement => {
+  const { type, x, controlsY, targetsY, label, displayArgs, width } =
+    renderData;
   switch (type) {
     case GateType.Measure:
-      return _createGate([_measure(x, controlsY[0])], metadata, nestedDepth);
+      return _createGate([_measure(x, controlsY[0])], renderData, nestedDepth);
     case GateType.Unitary:
       return _createGate(
         [_unitary(label, x, targetsY as number[][], width, displayArgs)],
-        metadata,
+        renderData,
         nestedDepth,
       );
     case GateType.X:
-      return _createGate([_x(metadata, nestedDepth)], metadata, nestedDepth);
+      return _createGate([_x(renderData)], renderData, nestedDepth);
     case GateType.Ket:
-      return _createGate([_ket(label, metadata)], metadata, nestedDepth);
+      return _createGate([_ket(label, renderData)], renderData, nestedDepth);
     case GateType.Swap:
       return controlsY.length > 0
-        ? _controlledGate(metadata, nestedDepth)
-        : _createGate([_swap(metadata, nestedDepth)], metadata, nestedDepth);
+        ? _controlledGate(renderData, nestedDepth)
+        : _createGate(
+            [_swap(renderData, nestedDepth)],
+            renderData,
+            nestedDepth,
+          );
     case GateType.Cnot:
     case GateType.ControlledUnitary:
-      return _controlledGate(metadata, nestedDepth);
+      return _controlledGate(renderData, nestedDepth);
     case GateType.Group:
-      return _groupedOperations(metadata, nestedDepth);
+      return _groupedOperations(renderData, nestedDepth);
     case GateType.ClassicalControlled:
-      return _classicalControlled(metadata);
+      return _classicalControlled(renderData);
     default:
       throw new Error(`ERROR: unknown gate (${label}) of type ${type}.`);
   }
@@ -86,23 +96,24 @@ const formatGate = (metadata: Metadata, nestedDepth = 0): SVGElement => {
 /**
  * Groups SVG elements into a gate SVG group.
  *
- * @param svgElems       Array of SVG elements.
- * @param dataAttributes Custom data attributes to be attached to SVG group.
+ * @param svgElems - Array of SVG elements that make up the gate.
+ * @param renderData - Render data containing information about the gate, such as data attributes.
+ * @param nestedDepth - Depth of nested operation.
  *
  * @returns SVG representation of a gate.
  */
 const _createGate = (
   svgElems: SVGElement[],
-  metadata: Metadata,
+  renderData: GateRenderData,
   nestedDepth: number,
 ): SVGElement => {
-  const { dataAttributes } = metadata || {};
+  const { dataAttributes } = renderData || {};
   const attributes: { [attr: string]: string } = { class: "gate" };
   Object.entries(dataAttributes || {}).forEach(
     ([attr, val]) => (attributes[`data-${attr}`] = val),
   );
 
-  const zoomBtn: SVGElement | null = _zoomButton(metadata, nestedDepth);
+  const zoomBtn: SVGElement | null = _zoomButton(renderData, nestedDepth);
   if (zoomBtn != null) svgElems = svgElems.concat([zoomBtn]);
   return group(svgElems, attributes);
 };
@@ -111,19 +122,19 @@ const _createGate = (
  * Returns the expand/collapse button for an operation if it can be zoomed-in or zoomed-out,
  * respectively. If neither are allowed, return `null`.
  *
- * @param metadata Operation metadata.
+ * @param renderData Operation render data.
  * @param nestedDepth Depth of nested operation.
  *
  * @returns SVG element for expand/collapse button if needed, or null otherwise.
  */
 const _zoomButton = (
-  metadata: Metadata,
+  renderData: GateRenderData,
   nestedDepth: number,
 ): SVGElement | null => {
-  if (metadata == undefined) return null;
+  if (renderData == undefined) return null;
 
-  const [x1, y1] = _gatePosition(metadata, nestedDepth);
-  let { dataAttributes } = metadata;
+  const [x1, y1] = _gatePosition(renderData, nestedDepth);
+  let { dataAttributes } = renderData;
   dataAttributes = dataAttributes || {};
 
   const expanded = "expanded" in dataAttributes;
@@ -154,16 +165,16 @@ const _zoomButton = (
 /**
  * Calculate position of gate.
  *
- * @param metadata Operation metadata.
+ * @param renderData Operation render data.
  * @param nestedDepth Depth of nested operations.
  *
  * @returns Coordinates of gate: [x1, y1, x2, y2].
  */
 const _gatePosition = (
-  metadata: Metadata,
+  renderData: GateRenderData,
   nestedDepth: number,
 ): [number, number, number, number] => {
-  const { x, width, type, targetsY } = metadata;
+  const { x, width, type, targetsY } = renderData;
 
   const ys = targetsY?.flatMap((y) => y as number[]) || [];
   const maxY = Math.max(...ys);
@@ -225,6 +236,31 @@ const _measure = (x: number, y: number): SVGElement => {
   return group([mBox, mArc, meter]);
 };
 
+const use_katex = true;
+
+function _style_gate_text(gate: SVGTextElement) {
+  if (!use_katex) return;
+  let label = gate.textContent || "";
+
+  // In general, use the regular math font
+  gate.classList.add("qs-maintext");
+
+  // Wrap any latin or greek letters in tspan with KaTeX_Math font
+  // Style the entire Greek + Coptic block (https://unicodeplus.com/block/0370)
+  // Note this deliberately leaves ASCII digits [0-9] non-italic
+  const italicChars = /[a-zA-Z\u{0370}-\u{03ff}]+/gu;
+
+  label = label.replace(italicChars, `<tspan class='qs-mathtext'>$&</tspan>`);
+
+  // Replace a trailing ' with the proper unicode dagger symbol
+  label = label.replace(
+    /'$/,
+    `<tspan dx="2" dy="-3" style="font-size: 0.8em;">${mathChars.dagger}</tspan>`,
+  );
+
+  gate.innerHTML = label;
+}
+
 /**
  * Creates the SVG for a unitary gate on an arbitrary number of qubits.
  *
@@ -302,12 +338,15 @@ const _unitaryBox = (
     uBox.setAttribute("class", cssClass);
   }
   const labelY = y + height / 2 - (displayArgs == null ? 0 : 7);
-  const labelText: SVGElement = text(label, x, labelY);
+  const labelText = text(label, x, labelY);
+  _style_gate_text(labelText);
+
   const elems = [uBox, labelText];
   if (displayArgs != null) {
     const argStrY = y + height / 2 + 8;
 
-    const argButton: SVGElement = text(displayArgs, x, argStrY, argsFontSize);
+    const argButton = text(displayArgs, x, argStrY, argsFontSize);
+    _style_gate_text(argButton);
     argButton.setAttribute("class", "arg-button");
     elems.push(argButton);
   }
@@ -315,18 +354,18 @@ const _unitaryBox = (
 };
 
 /**
- * Creates the SVG for a SWAP gate on y coords given by targetsY.
+ * Creates the SVG for a SWAP gate on y coords given by `renderData`.
  *
- * @param x          Centre x coord of SWAP gate.
- * @param targetsY   y coords of target registers.
+ * @param renderData - The render data containing information about the gate, including position and targets.
+ * @param nestedDepth - The depth of nested operations (used for adjusting padding and positioning).
  *
  * @returns SVG representation of SWAP gate.
  */
-const _swap = (metadata: Metadata, nestedDepth: number): SVGElement => {
-  const { x, targetsY } = metadata;
+const _swap = (renderData: GateRenderData, nestedDepth: number): SVGElement => {
+  const { x, targetsY } = renderData;
 
   // Get SVGs of crosses
-  const [x1, y1, x2, y2] = _gatePosition(metadata, nestedDepth);
+  const [x1, y1, x2, y2] = _gatePosition(renderData, nestedDepth);
   const ys = targetsY?.flatMap((y) => y as number[]) || [];
 
   const bg: SVGElement = box(x1, y1, x2, y2, "gate-swap");
@@ -339,11 +378,12 @@ const _swap = (metadata: Metadata, nestedDepth: number): SVGElement => {
 /**
  * Creates the SVG for an X gate
  *
+ * @param renderData - The render data containing information about the gate, including position and targets.
+ *
  * @returns SVG representation of X gate.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const _x = (metadata: Metadata, _: number): SVGElement => {
-  const { x, targetsY } = metadata;
+const _x = (renderData: GateRenderData): SVGElement => {
+  const { x, targetsY } = renderData;
   const ys = targetsY.flatMap((y) => y as number[]);
   return _oplus(x, ys[0]);
 };
@@ -352,14 +392,14 @@ const _x = (metadata: Metadata, _: number): SVGElement => {
  * Creates the SVG for a ket notation (e.g "|0⟩" or "|1⟩") gate.
  *
  * @param label    The label for the ket notation (e.g., "0" or "1").
- * @param metadata The metadata object containing information about the gate's position and appearance.
+ * @param renderData The render data containing information about the gate's position and appearance.
  *
  * @returns SVG representation of the ket notation gate.
  */
-const _ket = (label: string, metadata: Metadata): SVGElement => {
-  const { x, targetsY, width } = metadata;
+const _ket = (label: string, renderData: GateRenderData): SVGElement => {
+  const { x, targetsY, width } = renderData;
   const gate = _unitary(
-    `|${label}〉`,
+    `|${label}${mathChars.rangle}`,
     x,
     targetsY as number[][],
     width,
@@ -367,7 +407,7 @@ const _ket = (label: string, metadata: Metadata): SVGElement => {
     false,
     "gate-ket",
   );
-  gate.querySelector("text")!.setAttribute("class", "ket-text");
+  gate.querySelector("text")!.classList.add("ket-text");
   return gate;
 };
 
@@ -399,17 +439,17 @@ const _cross = (x: number, y: number): SVGElement => {
 /**
  * Produces the SVG representation of a controlled gate on multiple qubits.
  *
- * @param metadata Metadata of controlled gate.
+ * @param renderData Render data of controlled gate.
  *
  * @returns SVG representation of controlled gate.
  */
 const _controlledGate = (
-  metadata: Metadata,
+  renderData: GateRenderData,
   nestedDepth: number,
 ): SVGElement => {
   const targetGateSvgs: SVGElement[] = [];
-  const { type, x, controlsY, label, displayArgs, width } = metadata;
-  let { targetsY } = metadata;
+  const { type, x, controlsY, label, displayArgs, width } = renderData;
+  let { targetsY } = renderData;
 
   // Get SVG for target gates
   switch (type) {
@@ -442,7 +482,7 @@ const _controlledGate = (
   vertLine.style.pointerEvents = "none";
   const svg: SVGElement = _createGate(
     [vertLine, ...controlledDotsSvg, ...targetGateSvgs],
-    metadata,
+    renderData,
     nestedDepth,
   );
   return svg;
@@ -467,42 +507,43 @@ const _oplus = (x: number, y: number, r = 15): SVGElement => {
 /**
  * Generates the SVG for a group of nested operations.
  *
- * @param metadata Metadata representation of gate.
+ * @param renderData Render data of gate.
  * @param nestedDepth Depth of nested operations (used in classically controlled and grouped operations).
  *
  * @returns SVG representation of gate.
  */
 const _groupedOperations = (
-  metadata: Metadata,
+  renderData: GateRenderData,
   nestedDepth: number,
 ): SVGElement => {
-  const { children } = metadata;
-  const [x1, y1, x2, y2] = _gatePosition(metadata, nestedDepth);
+  const { children } = renderData;
+  const [x1, y1, x2, y2] = _gatePosition(renderData, nestedDepth);
 
   // Draw dashed box around children gates
   const box: SVGElement = dashedBox(x1, y1, x2, y2);
   const elems: SVGElement[] = [box];
   if (children != null)
-    elems.push(formatGates(children as Metadata[][], nestedDepth + 1));
-  return _createGate(elems, metadata, nestedDepth);
+    elems.push(formatGates(children as GateRenderData[][], nestedDepth + 1));
+  return _createGate(elems, renderData, nestedDepth);
 };
 
 /**
  * Generates the SVG for a classically controlled group of operations.
  *
- * @param metadata Metadata representation of gate.
+ * @param renderData Render data of gate.
  * @param padding  Padding within dashed box.
  *
  * @returns SVG representation of gate.
  */
 const _classicalControlled = (
-  metadata: Metadata,
+  renderData: GateRenderData,
   padding: number = groupBoxPadding,
 ): SVGElement => {
-  const { controlsY, dataAttributes } = metadata;
-  const targetsY: number[] = metadata.targetsY as number[];
-  const children: Metadata[][][] = metadata.children as Metadata[][][];
-  let { x, width } = metadata;
+  const { controlsY, dataAttributes } = renderData;
+  const targetsY: number[] = renderData.targetsY as number[];
+  const children: GateRenderData[][][] =
+    renderData.children as GateRenderData[][][];
+  let { x, width } = renderData;
 
   const controlY = controlsY[0];
 

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

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import { Qubit } from "../circuit";
-import { RegisterType, RegisterMap, RegisterMetadata } from "../register";
+import { RegisterType, RegisterMap, RegisterRenderData } from "../register";
 import {
   leftPadding,
   startY,
@@ -10,10 +10,11 @@ import {
   classicalRegHeight,
 } from "../constants";
 import { group, text } from "./formatUtils";
+import { mathChars } from "../utils";
 
 /**
  * `formatInputs` takes in an array of Qubits and outputs the SVG string of formatted
- * qubit wires and a mapping from register IDs to register metadata (for rendering).
+ * qubit wires and a mapping from register IDs to register rendering data.
  *
  * @param qubits List of declared qubits.
  *
@@ -45,7 +46,7 @@ const formatInputs = (
 
     // Add classical wires
     registers[id].children = Array.from(Array(numResults), () => {
-      const clsReg: RegisterMetadata = {
+      const clsReg: RegisterRenderData = {
         type: RegisterType.Classical,
         y: currY,
       };
@@ -71,38 +72,15 @@ const formatInputs = (
 const _qubitInput = (y: number, subscript?: string): SVGElement => {
   const el: SVGElement = text("", leftPadding, y, 16);
 
-  // Create the main text node
-  const mainText = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "tspan",
-  );
-  mainText.textContent = "|𝜓";
+  const subtext = subscript
+    ? `<tspan baseline-shift="sub" font-size="65%">${subscript}</tspan>`
+    : "";
 
-  // Create the subscript node if provided
-  if (subscript) {
-    const subscriptText = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "tspan",
-    );
-    subscriptText.textContent = subscript;
-    subscriptText.setAttribute("baseline-shift", "sub");
-    subscriptText.setAttribute("font-size", "65%");
-    mainText.appendChild(subscriptText);
-  }
-
-  // Add the closing part of the text
-  const closingText = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "tspan",
-  );
-  closingText.textContent = "⟩";
-
-  // Append all parts to the main SVG text element
-  el.appendChild(mainText);
-  el.appendChild(closingText);
+  el.innerHTML = `|<tspan class="qs-mathtext">${mathChars.psi}</tspan>${subtext}${mathChars.rangle}</tspan>`;
 
   el.setAttribute("text-anchor", "start");
   el.setAttribute("dominant-baseline", "middle");
+  el.classList.add("qs-maintext");
   return el;
 };
 

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

@@ -3,22 +3,22 @@
 
 import { RegisterMap } from "../register";
 import { regLineStart } from "../constants";
-import { Metadata, GateType } from "../metadata";
+import { GateRenderData, GateType } from "../gateRenderData";
 import { group, line } 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 registers    Map from register IDs to register render data.
+ * @param measureGates Array of measurement gate render data.
  * @param endX         End x coord.
  *
  * @returns SVG representation of register wires.
  */
 const formatRegisters = (
   registers: RegisterMap,
-  measureGates: Metadata[],
+  measureGates: GateRenderData[],
   endX: number,
 ): SVGElement => {
   const formattedRegs: SVGElement[] = [];

package/ux/circuit-vis/{metadata.ts → gateRenderData.ts}

@@ -15,7 +15,7 @@ export enum GateType {
   Swap,
   /** X gate. */
   X,
-  /** |0〉 or |1〉 gate. */
+  /** |0⟩or |1⟩ gate. */
   Ket,
   /** Single/multi qubit unitary gate. */
   Unitary,
@@ -30,10 +30,10 @@ export enum GateType {
 }
 
 /**
- * Metadata used to store information pertaining to a given
+ * Rendering data used to store information pertaining to a given
  * operation for rendering its corresponding SVG.
  */
-export interface Metadata {
+export interface GateRenderData {
   /** Gate type. */
   type: GateType;
   /** Centre x coord for gate position. */
@@ -52,7 +52,7 @@ export interface Metadata {
   /** Gate width. */
   width: number;
   /** Children operations as part of group. */
-  children?: Metadata[][] | Metadata[][][];
+  children?: GateRenderData[][] | GateRenderData[][][];
   /** Custom data attributes to attach to gate element. */
   dataAttributes?: DataAttributes;
 }

package/ux/circuit-vis/panel.ts

@@ -9,7 +9,7 @@ import {
   verticalGap,
 } from "./constants";
 import { formatGate } from "./formatters/gateFormatter";
-import { GateType, Metadata } from "./metadata";
+import { GateType, GateRenderData } from "./gateRenderData";
 import { getGateWidth } from "./utils";
 
 /**
@@ -83,7 +83,7 @@ const _createToolbox = (): HTMLElement => {
   let prefixX = 0;
   let prefixY = 0;
   const gateElems = Object.keys(toolboxGateDictionary).map((key, index) => {
-    const { width: gateWidth } = toMetadata(toolboxGateDictionary[key], 0, 0);
+    const { width: gateWidth } = toRenderData(toolboxGateDictionary[key], 0, 0);
 
     // Increment prefixX for every gate, and reset after 2 gates (2 columns)
     if (index % 2 === 0 && index !== 0) {
@@ -169,19 +169,19 @@ const _title = (text: string): HTMLElement => {
 };
 
 /**
- * Wrapper to generate metadata based on _opToMetadata with mock registers and limited support
+ * Wrapper to generate render data based on _opToRenderData with mock registers and limited support
  * @param operation     Operation object
  * @param x             x coordinate at starting point from the left
  * @param y             y coordinate at starting point from the top
- * @returns             Metadata object
+ * @returns             GateRenderData object
  */
-const toMetadata = (
+const toRenderData = (
   operation: Operation | undefined,
   x: number,
   y: number,
-): Metadata => {
+): GateRenderData => {
   const target = y + 1 + gateHeight / 2; // offset by 1 for top padding
-  const metadata: Metadata = {
+  const renderData: GateRenderData = {
     type: GateType.Invalid,
     x: x + 1 + minGateWidth / 2, // offset by 1 for left padding
     controlsY: [],
@@ -190,54 +190,54 @@ const toMetadata = (
     width: -1,
   };
 
-  if (operation === undefined) return metadata;
+  if (operation === undefined) return renderData;
 
   switch (operation.kind) {
     case "unitary": {
       const { gate, controls } = operation;
 
       if (gate === "SWAP") {
-        metadata.type = GateType.Swap;
+        renderData.type = GateType.Swap;
       } else if (controls && controls.length > 0) {
-        metadata.type =
+        renderData.type =
           gate === "X" ? GateType.Cnot : GateType.ControlledUnitary;
-        metadata.label = gate;
+        renderData.label = gate;
         if (gate !== "X") {
-          metadata.targetsY = [[target]];
+          renderData.targetsY = [[target]];
         }
       } else if (gate === "X") {
-        metadata.type = GateType.X;
-        metadata.label = gate;
+        renderData.type = GateType.X;
+        renderData.label = gate;
       } else {
-        metadata.type = GateType.Unitary;
-        metadata.label = gate;
-        metadata.targetsY = [[target]];
+        renderData.type = GateType.Unitary;
+        renderData.label = gate;
+        renderData.targetsY = [[target]];
       }
       break;
     }
     case "measurement":
-      metadata.type = GateType.Measure;
-      metadata.controlsY = [target];
+      renderData.type = GateType.Measure;
+      renderData.controlsY = [target];
       break;
     case "ket":
-      metadata.type = GateType.Ket;
-      metadata.label = operation.gate;
-      metadata.targetsY = [[target]];
+      renderData.type = GateType.Ket;
+      renderData.label = operation.gate;
+      renderData.targetsY = [[target]];
       break;
   }
 
   if (operation.args !== undefined && operation.args.length > 0)
-    metadata.displayArgs = operation.args[0];
+    renderData.displayArgs = operation.args[0];
 
-  metadata.width = getGateWidth(metadata);
-  metadata.x = x + 1 + metadata.width / 2; // offset by 1 for left padding
+  renderData.width = getGateWidth(renderData);
+  renderData.x = x + 1 + renderData.width / 2; // offset by 1 for left padding
 
-  return metadata;
+  return renderData;
 };
 
 /**
  * Generate an SVG gate element for the Toolbox panel based on the type of gate.
- * This function retrieves the operation metadata from the gate dictionary,
+ * This function retrieves the operation render data from the gate dictionary,
  * formats the gate, and returns the corresponding SVG element.
  *
  * @param gateDictionary - The dictionary containing gate operations.
@@ -255,9 +255,9 @@ const _gate = (
 ): SVGElement => {
   const gate = gateDictionary[type];
   if (gate == null) throw new Error(`Gate ${type} not available`);
-  const metadata = toMetadata(gate, x, y);
-  metadata.dataAttributes = { type: type };
-  const gateElem = formatGate(metadata).cloneNode(true) as SVGElement;
+  const renderData = toRenderData(gate, x, y);
+  renderData.dataAttributes = { type: type };
+  const gateElem = formatGate(renderData).cloneNode(true) as SVGElement;
   gateElem.setAttribute("toolbox-item", "true");
 
   return gateElem;
@@ -322,7 +322,6 @@ const toolboxGateDictionary: GateDictionary = {
   H: _makeUnitary("H"),
   SX: _makeUnitary("SX"),
   Reset: _makeKet("0"),
-  ResetOne: _makeKet("1"),
   Measure: _makeMeasurement("Measure"),
 };
 
@@ -330,4 +329,4 @@ toolboxGateDictionary["RX"].params = [{ name: "theta", type: "Double" }];
 toolboxGateDictionary["RY"].params = [{ name: "theta", type: "Double" }];
 toolboxGateDictionary["RZ"].params = [{ name: "theta", type: "Double" }];
 
-export { createPanel, toolboxGateDictionary, toMetadata };
+export { createPanel, toolboxGateDictionary, toRenderData };