qsharp-lang 1.25.4-dev → 1.25.5-dev

package/ux/circuit-vis/panel.ts

@@ -1,7 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Ket, Measurement, Operation, Unitary } from "./circuit.js";
+import {
+  Ket,
+  Measurement,
+  Operation,
+  Unitary,
+  type Circuit,
+} from "./circuit.js";
+import { ensureStateVisualization } from "./state-viz/stateVizController.js";
+import type { StateColumn } from "./state-viz/stateViz.js";
+import type { PrepareStateVizOptions } from "./state-viz/worker/stateVizPrep.js";
 import {
   gateHeight,
   horizontalGap,
@@ -12,55 +21,80 @@ import { formatGate } from "./formatters/gateFormatter.js";
 import { GateType, GateRenderData } from "./gateRenderData.js";
 import { getMinGateWidth } from "./utils.js";
 
-/**
- * Create a panel for the circuit visualization.
- * @param container     HTML element for rendering visualization into
- */
-const createPanel = (container: HTMLElement): void => {
-  // Find or create the wrapper
+const getOrCreateCircuitWrapper = (container: HTMLElement) => {
   let wrapper: HTMLElement | null = container.querySelector(".circuit-wrapper");
-  const circuit = container.querySelector("svg.qviz");
+  const circuit = container.querySelector("svg.qviz") as SVGElement | null;
   if (circuit == null) {
     throw new Error("No circuit found in the container");
   }
   if (!wrapper) {
-    wrapper = _elem("div", "");
+    wrapper = document.createElement("div");
     wrapper.className = "circuit-wrapper";
-    wrapper.style.display = "block";
-    wrapper.style.overflow = "auto";
-    wrapper.style.width = "100%";
     wrapper.appendChild(circuit);
     container.appendChild(wrapper);
   } else if (circuit.parentElement !== wrapper) {
-    // If wrapper exists but SVG is not inside, ensure it's appended
     wrapper.appendChild(circuit);
   }
 
-  // Remove any previous message
+  return { wrapper, circuit };
+};
+
+const attachToolboxPanelIfMissing = (
+  container: HTMLElement,
+  createToolboxPanel: () => HTMLElement,
+): void => {
+  if (container.querySelector(".panel") != null) return;
+  container.prepend(createToolboxPanel());
+};
+
+const removeEmptyCircuitMessage = (wrapper: HTMLElement): void => {
   const prevMsg = wrapper.querySelector(".empty-circuit-message");
   if (prevMsg) prevMsg.remove();
+};
 
-  // Check if the circuit is empty by inspecting the .wires group
+const addEmptyCircuitMessageIfEmpty = (
+  wrapper: HTMLElement,
+  circuit: SVGElement,
+): void => {
   const wiresGroup = circuit?.querySelector(".wires");
   if (!wiresGroup || wiresGroup.children.length === 0) {
     const emptyMsg = document.createElement("div");
     emptyMsg.className = "empty-circuit-message";
     emptyMsg.textContent =
       "Your circuit is empty. Drag gates from the toolbox to get started!";
-    emptyMsg.style.padding = "2em";
-    emptyMsg.style.textAlign = "center";
-    emptyMsg.style.color = "#888";
-    emptyMsg.style.fontSize = "1.1em";
     wrapper.appendChild(emptyMsg);
   }
+};
 
-  if (container.querySelector(".panel") == null) {
-    const panelElem = _panel();
-    container.prepend(panelElem);
-    container.style.display = "flex";
-    container.style.height = "80vh";
-    container.style.width = "95vw";
-  }
+const applyCircuitEditorLayoutClasses = (
+  container: HTMLElement,
+  wrapper: HTMLElement,
+): void => {
+  container.classList.add("circuit-editor-container");
+  wrapper.classList.add("circuit-wrapper");
+};
+
+/**
+ * Create a panel for the circuit visualization.
+ * @param container         HTML element for rendering visualization into
+ * @param computeStateVizColumnsForCircuitModel Optional callback to compute
+ * state visualization columns from a circuit model, which enables state
+ * visualization features when provided.
+ */
+const createPanel = (
+  container: HTMLElement,
+  computeStateVizColumnsForCircuitModel?: (
+    model: Circuit,
+    opts?: PrepareStateVizOptions,
+  ) => Promise<StateColumn[]>,
+): void => {
+  const { wrapper, circuit } = getOrCreateCircuitWrapper(container);
+  removeEmptyCircuitMessage(wrapper);
+  attachToolboxPanelIfMissing(container, _panel);
+  addEmptyCircuitMessageIfEmpty(wrapper, circuit);
+  applyCircuitEditorLayoutClasses(container, wrapper);
+
+  ensureStateVisualization(container, computeStateVizColumnsForCircuitModel);
 };
 
 /**
@@ -82,7 +116,6 @@ const enableRunButton = (
 
 /**
  * Function to produce panel element
- * @param context       Context object to manage extension state
  * @returns             HTML element for panel
  */
 const _panel = (): HTMLElement => {
@@ -94,7 +127,6 @@ const _panel = (): HTMLElement => {
 
 /**
  * Function to produce toolbox element
- * @param context       Context object to manage extension state
  * @returns             HTML element for toolbox
  */
 const _createToolbox = (): HTMLElement => {
@@ -129,6 +161,11 @@ const _createToolbox = (): HTMLElement => {
   const runButtonGroup = _createRunButton(prefixY + gateHeight + 20);
   svgElem.appendChild(runButtonGroup);
 
+  // Size SVG to content height so the toolbox panel can scroll when window is short
+  const totalSvgHeight = prefixY + 2 * gateHeight + 32; // gates + button + padding
+  svgElem.setAttribute("height", totalSvgHeight.toString());
+  svgElem.setAttribute("width", "100%");
+
   // Generate toolbox panel
   const toolboxElem = _elem("div", "toolbox-panel");
   _children(toolboxElem, [_title("Toolbox")]);

package/ux/circuit-vis/sqore.ts

@@ -25,6 +25,8 @@ import { createDropzones } from "./draggable.js";
 import { enableEvents } from "./events.js";
 import { createPanel, enableRunButton } from "./panel.js";
 import { getMinMaxRegIdx } from "./utils.js";
+import type { StateColumn } from "./state-viz/stateViz.js";
+import type { PrepareStateVizOptions } from "./state-viz/worker/stateVizPrep.js";
 
 /**
  * Contains render data for visualization.
@@ -46,12 +48,25 @@ type GateRegistry = {
   [location: string]: Operation;
 };
 
+export type EditorHandlers = {
+  editCallback: (circuitGroup: CircuitGroup) => void;
+  // When provided, enables the Run button in the toolbox.
+  runCallback?: () => void;
+  // Optional callback to offload state visualization computation.
+  // When provided (e.g., by the VS Code webview), the state visualizer can
+  // compute state in a Web Worker without relying on globals.
+  computeStateVizColumnsForCircuitModel?: (
+    model: Circuit,
+    opts?: PrepareStateVizOptions,
+  ) => Promise<StateColumn[]>;
+};
+
 export type DrawOptions = {
   renderDepth?: number;
-  isEditable?: boolean;
-  editCallback?: (circuitGroup: CircuitGroup) => void;
-  runCallback?: () => void;
   renderLocations?: (l: SourceLocation[]) => { title: string; href: string };
+  // When provided, enables editing behaviors (dropzones, run button, etc.) and
+  // requires the callbacks necessary to support those behaviors.
+  editor?: EditorHandlers;
 };
 
 /**
@@ -65,9 +80,7 @@ export class Sqore {
    * Initializes Sqore object.
    *
    * @param circuitGroup Group of circuits to be visualized.
-   * @param isEditable Whether the circuit is editable.
-   * @param editCallback Callback function to be called when the circuit is edited.
-   * @param runCallback Callback function to be called when the circuit is run.
+   * @param options Optional rendering/interaction options.
    */
   constructor(
     public circuitGroup: CircuitGroup,
@@ -139,17 +152,16 @@ export class Sqore {
     }
     this.addGateClickHandlers(container, _circuit);
 
-    if (this.options.isEditable) {
+    const editor = this.options.editor;
+    const isEditable = editor != null;
+    if (isEditable) {
       createDropzones(container, this);
-      createPanel(container);
-      if (this.options.runCallback != undefined) {
-        const callback = this.options.runCallback;
-        enableRunButton(container, callback);
+      createPanel(container, editor.computeStateVizColumnsForCircuitModel);
+      if (editor.runCallback) {
+        enableRunButton(container, editor.runCallback);
       }
       enableEvents(container, this, () => this.renderCircuit(container));
-      if (this.options.editCallback != undefined) {
-        this.options.editCallback(this.minimizeCircuits(this.circuitGroup));
-      }
+      editor.editCallback(this.minimizeCircuits(this.circuitGroup));
     }
   }
 
@@ -241,12 +253,14 @@ export class Sqore {
     // expanded group borders need to fit between qubit wires.
     const rowHeights = getRowHeights(qubits, componentGrid);
 
+    const isEditable = this.options.editor != null;
+
     // Draw the qubit labels.
     // Also calculate other register render data to be used later in the rendering.
     const { qubitLabels, registers, svgHeight } = formatInputs(
       qubits,
       rowHeights,
-      this.options.isEditable ? undefined : this.options.renderLocations,
+      isEditable ? undefined : this.options.renderLocations,
     );
 
     // Calculate the render data for the operations.
@@ -259,7 +273,7 @@ export class Sqore {
       topY,
       bottomY,
       registers,
-      this.options.isEditable ? undefined : this.options.renderLocations,
+      isEditable ? undefined : this.options.renderLocations,
     );
 
     // Draw the operations.