qsharp-lang 1.15.4-dev → 1.16.1-dev

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

@@ -28,9 +28,9 @@ const formatInputs = (
   const registers: RegisterMap = {};
 
   let currY: number = startY;
-  qubits.forEach(({ id, numResults }) => {
+  qubits.forEach(({ id, numResults }, wireIndex) => {
     // Add qubit wire to list of qubit wires
-    qubitWires.push(_qubitInput(currY, id.toString()));
+    qubitWires.push(qubitInput(currY, wireIndex, id.toString()));
 
     // Create qubit register
     registers[id] = { type: RegisterType.Qubit, y: currY };
@@ -69,7 +69,11 @@ const formatInputs = (
  *
  * @returns SVG text component for the input register.
  */
-const _qubitInput = (y: number, subscript?: string): SVGElement => {
+const qubitInput = (
+  y: number,
+  wireIndex: number,
+  subscript?: string,
+): SVGElement => {
   const el: SVGElement = text("", leftPadding, y, 16);
 
   const subtext = subscript
@@ -80,8 +84,9 @@ const _qubitInput = (y: number, subscript?: string): SVGElement => {
 
   el.setAttribute("text-anchor", "start");
   el.setAttribute("dominant-baseline", "middle");
+  el.setAttribute("data-wire", wireIndex.toString());
   el.classList.add("qs-maintext");
   return el;
 };
 
-export { formatInputs, _qubitInput };
+export { formatInputs, qubitInput };

package/ux/circuit-vis/panel.ts

@@ -17,20 +17,45 @@ import { getGateWidth } from "./utils";
  * @param container     HTML element for rendering visualization into
  */
 const createPanel = (container: HTMLElement): void => {
-  if (container.querySelector(".panel") == null) {
-    const circuit = container.querySelector("svg[id]");
-    if (circuit == null) {
-      throw new Error("No circuit found in the container");
-    }
-
-    const wrapper = _elem("div", "");
+  // Find or create the wrapper
+  let wrapper: HTMLElement | null = container.querySelector(".circuit-wrapper");
+  const circuit = container.querySelector("svg[id]");
+  if (circuit == null) {
+    throw new Error("No circuit found in the container");
+  }
+  if (!wrapper) {
+    wrapper = _elem("div", "");
+    wrapper.className = "circuit-wrapper";
     wrapper.style.display = "block";
     wrapper.style.overflow = "auto";
     wrapper.style.width = "100%";
-    wrapper.appendChild(_qubitLineControl());
+    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
+  const prevMsg = wrapper.querySelector(".empty-circuit-message");
+  if (prevMsg) prevMsg.remove();
+
+  // Check if the circuit is empty by inspecting the .wires group
+  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);
+    return;
+  }
 
+  if (container.querySelector(".panel") == null) {
     const panelElem = _panel();
     container.prepend(panelElem);
     container.style.display = "flex";
@@ -39,28 +64,6 @@ const createPanel = (container: HTMLElement): void => {
   }
 };
 
-const _qubitLineControl = (): HTMLElement => {
-  const qubitLineControlElem = _elem("div", "qubit-line-control");
-  _children(qubitLineControlElem, [
-    _title("Add/Remove Qubit Lines:"),
-    _addQubitLineControl(),
-    _removeQubitLineControl(),
-  ]);
-  return qubitLineControlElem;
-};
-
-const _addQubitLineControl = (): HTMLElement => {
-  const addQubitLineControlElem = _elem("button", "add-qubit-line");
-  addQubitLineControlElem.textContent = "+";
-  return addQubitLineControlElem;
-};
-
-const _removeQubitLineControl = (): HTMLElement => {
-  const removeQubitLineControlElem = _elem("button", "remove-qubit-line");
-  removeQubitLineControlElem.textContent = "-";
-  return removeQubitLineControlElem;
-};
-
 /**
  * Function to produce panel element
  * @param context       Context object to manage extension state
@@ -280,7 +283,7 @@ const _makeUnitary = (gate: string): Unitary => {
   return {
     kind: "unitary",
     gate: gate,
-    targets: [{ qubit: 0 }],
+    targets: [],
   };
 };
 
@@ -294,8 +297,8 @@ const _makeMeasurement = (gate: string): Measurement => {
   return {
     kind: "measurement",
     gate: gate,
-    qubits: [{ qubit: 0 }],
-    results: [{ qubit: 0, result: 0 }],
+    qubits: [],
+    results: [],
   };
 };
 
@@ -303,7 +306,7 @@ const _makeKet = (gate: string): Ket => {
   return {
     kind: "ket",
     gate: gate,
-    targets: [{ qubit: 0 }],
+    targets: [],
   };
 };
 

package/ux/circuit-vis/process.ts

@@ -28,7 +28,7 @@ const processOperations = (
   registers: RegisterMap,
 ): { renderDataArray: GateRenderData[][]; svgWidth: number } => {
   if (componentGrid.length === 0)
-    return { renderDataArray: [], svgWidth: startX };
+    return { renderDataArray: [], svgWidth: startX + gatePadding * 2 };
   const numColumns: number = componentGrid.length;
   const columnsWidths: number[] = new Array(numColumns).fill(minGateWidth);
 

package/ux/circuit-vis/sqore.ts

@@ -16,7 +16,7 @@ import {
 import { GateRenderData, GateType } from "./gateRenderData";
 import { createUUID } from "./utils";
 import { gateHeight, minGateWidth, minToolboxHeight, svgNS } from "./constants";
-import { createDragzones } from "./draggable";
+import { createDropzones } from "./draggable";
 import { enableEvents } from "./events";
 import { createPanel } from "./panel";
 
@@ -145,7 +145,7 @@ export class Sqore {
     this.addGateClickHandlers(container, _circuit);
 
     if (this.isEditable) {
-      createDragzones(container, this);
+      createDropzones(container, this);
       createPanel(container);
       enableEvents(container, this, () => this.renderCircuit(container));
       if (this.editCallback != undefined) {

package/ux/circuit-vis/utils.ts

@@ -17,7 +17,7 @@ import { Register } from "./register";
  * @param obj2 - The second object or array to compare.
  * @returns True if the objects are deeply equal, false otherwise.
  */
-export const deepEqual = (obj1: unknown, obj2: unknown): boolean => {
+const deepEqual = (obj1: unknown, obj2: unknown): boolean => {
   if (obj1 === obj2) return true;
 
   if (
@@ -365,6 +365,20 @@ const getGateElems = (container: HTMLElement): SVGGraphicsElement[] => {
     : [];
 };
 
+/**
+ * Get list of qubit label elements for drag-and-drop.
+ *
+ * @param container The HTML container element containing the circuit visualization.
+ * @returns An array of SVGTextElement representing the qubit labels.
+ */
+const getQubitLabelElems = (container: HTMLElement): SVGTextElement[] => {
+  const circuitSvg = container.querySelector("svg[id]");
+  if (!circuitSvg) return [];
+  const labelGroup = circuitSvg.querySelector("g.qubit-input-states");
+  if (!labelGroup) return [];
+  return Array.from(labelGroup.querySelectorAll<SVGTextElement>("text"));
+};
+
 // Non-ASCII chars are fraught with danger. Copy/paste these when possible.
 // Use the following regex in VS Code to find invalid unicode chars
 // [^\x20-\x7e\u{03b8}-\u{03c8}\u{2020}\u{27e8}\u{27e9}]
@@ -379,6 +393,7 @@ const mathChars = {
 };
 
 export {
+  deepEqual,
   createUUID,
   getGateWidth,
   getChildTargets,
@@ -393,5 +408,6 @@ export {
   getToolboxElems,
   getHostElems,
   getGateElems,
+  getQubitLabelElems,
   mathChars,
 };

package/ux/qsharp-circuit.css

@@ -331,41 +331,8 @@
     opacity: 0.5;
   }
 
-  .qubit-line-control {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 8px;
-  }
-
-  .qubit-line-control .title {
-    margin-left: 16px;
-  }
-
-  .add-qubit-line,
-  .remove-qubit-line {
-    border-radius: 4px;
-    padding: 8px 16px;
-    margin: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    user-select: none;
-    background: var(--vscode-button-background, #007acc);
-    color: var(--vscode-button-foreground, #ffffff);
-    border: 1px solid var(--vscode-button-border, #005a9e);
-  }
-
-  .add-qubit-line:hover,
-  .remove-qubit-line:hover {
-    background: var(--vscode-button-hoverBackground, #005a9e);
-  }
-
-  .add-qubit-line:disabled,
-  .remove-qubit-line:disabled {
-    background: var(--vscode-button-secondaryBackground, #d4d4d4);
-    color: var(--vscode-disabledForeground, #a1a1a1);
-    border: 1px solid var(--vscode-button-secondaryBackground, #d4d4d4);
-    cursor: not-allowed;
+  .ghost-opacity {
+    opacity: 0.5;
   }
 }