qsharp-lang 1.22.3-dev → 1.22.5-dev

package/ux/circuit-vis/process.ts

@@ -8,7 +8,12 @@ import {
   controlBtnOffset,
   groupBoxPadding,
 } from "./constants.js";
-import { ComponentGrid, Operation, ConditionalRender } from "./circuit.js";
+import {
+  ComponentGrid,
+  Operation,
+  ConditionalRender,
+  SourceLocation,
+} from "./circuit.js";
 import { GateRenderData, GateType } from "./gateRenderData.js";
 import { Register, RegisterMap } from "./register.js";
 import { getGateWidth } from "./utils.js";
@@ -26,6 +31,7 @@ import { getGateWidth } from "./utils.js";
 const processOperations = (
   componentGrid: ComponentGrid,
   registers: RegisterMap,
+  renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
 ): { renderDataArray: GateRenderData[][]; svgWidth: number } => {
   if (componentGrid.length === 0)
     return { renderDataArray: [], svgWidth: startX + gatePadding * 2 };
@@ -40,7 +46,11 @@ const processOperations = (
   const renderDataArray: GateRenderData[][] = componentGrid.map(
     (col, colIndex) =>
       col.components.map((op) => {
-        const renderData: GateRenderData = _opToRenderData(op, registers);
+        const renderData: GateRenderData = _opToRenderData(
+          op,
+          registers,
+          renderLocations,
+        );
 
         if (
           op != null &&
@@ -141,6 +151,7 @@ const _getClassicalRegStart = (
 const _opToRenderData = (
   op: Operation | null,
   registers: RegisterMap,
+  renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
 ): GateRenderData => {
   const renderData: GateRenderData = {
     type: GateType.Invalid,
@@ -202,7 +213,11 @@ const _opToRenderData = (
         ),
       }))
       .filter((col) => col.components.length > 0);
-    let childrenInstrs = processOperations(onZeroOps, registers);
+    let childrenInstrs = processOperations(
+      onZeroOps,
+      registers,
+      renderLocations,
+    );
     const zeroGates: GateRenderData[][] = childrenInstrs.renderDataArray;
     const zeroChildWidth: number = childrenInstrs.svgWidth;
 
@@ -214,7 +229,7 @@ const _opToRenderData = (
         ),
       }))
       .filter((col) => col.components.length > 0);
-    childrenInstrs = processOperations(onOneOps, registers);
+    childrenInstrs = processOperations(onOneOps, registers, renderLocations);
     const oneGates: GateRenderData[][] = childrenInstrs.renderDataArray;
     const oneChildWidth: number = childrenInstrs.svgWidth;
 
@@ -236,7 +251,11 @@ const _opToRenderData = (
     conditionalRender == ConditionalRender.AsGroup &&
     (children?.length || 0) > 0
   ) {
-    const childrenInstrs = processOperations(children!, registers);
+    const childrenInstrs = processOperations(
+      children!,
+      registers,
+      renderLocations,
+    );
     renderData.type = GateType.Group;
     renderData.children = childrenInstrs.renderDataArray;
     // _zoomButton function in gateFormatter.ts relies on
@@ -274,6 +293,10 @@ const _opToRenderData = (
   // Set gate width
   renderData.width = getGateWidth(renderData);
 
+  if (op.metadata?.source && renderLocations) {
+    renderData.link = renderLocations([op.metadata.source]);
+  }
+
   // Extend existing data attributes with user-provided data attributes
   if (dataAttributes != null)
     renderData.dataAttributes = {

package/ux/circuit-vis/sqore.ts

@@ -12,6 +12,7 @@ import {
   ComponentGrid,
   Operation,
   Column,
+  SourceLocation,
 } from "./circuit.js";
 import { GateRenderData, GateType } from "./gateRenderData.js";
 import {
@@ -44,14 +45,21 @@ type GateRegistry = {
   [location: string]: Operation;
 };
 
+export type DrawOptions = {
+  renderDepth?: number;
+  isEditable?: boolean;
+  editCallback?: (circuitGroup: CircuitGroup) => void;
+  runCallback?: () => void;
+  renderLocations?: (l: SourceLocation[]) => { title: string; href: string };
+};
+
 /**
  * Entrypoint class for rendering circuit visualizations.
  */
 export class Sqore {
   circuit: Circuit;
   gateRegistry: GateRegistry = {};
-  renderDepth = 0;
-
+  renderDepth: number = this.options.renderDepth ?? 0;
   /**
    * Initializes Sqore object.
    *
@@ -62,9 +70,7 @@ export class Sqore {
    */
   constructor(
     public circuitGroup: CircuitGroup,
-    readonly isEditable = false,
-    private editCallback?: (circuitGroup: CircuitGroup) => void,
-    private runCallback?: () => void,
+    private options: DrawOptions = {},
   ) {
     if (
       this.circuitGroup == null ||
@@ -83,13 +89,11 @@ export class Sqore {
    * Render circuit into `container` at the specified layer depth.
    *
    * @param container HTML element for rendering visualization into.
-   * @param renderDepth Initial layer depth at which to render gates.
    */
-  draw(container: HTMLElement, renderDepth = 0): void {
+  draw(container: HTMLElement): void {
     // Inject into container
     if (container == null) throw new Error(`Container not provided.`);
 
-    this.renderDepth = renderDepth;
     this.renderCircuit(container);
   }
 
@@ -103,7 +107,6 @@ export class Sqore {
     // Create copy of circuit to prevent mutation
     const _circuit: Circuit =
       circuit ?? JSON.parse(JSON.stringify(this.circuit));
-    const renderDepth = this.renderDepth;
 
     // Assign unique locations to each operation
     _circuit.componentGrid.forEach((col, colIndex) =>
@@ -115,7 +118,7 @@ export class Sqore {
     // Render operations starting at given depth
     _circuit.componentGrid = this.selectOpsAtDepth(
       _circuit.componentGrid,
-      renderDepth,
+      this.renderDepth,
     );
 
     // If only one top-level operation, expand automatically:
@@ -126,7 +129,9 @@ export class Sqore {
       Object.prototype.hasOwnProperty.call(
         _circuit.componentGrid[0].components[0].dataAttributes,
         "location",
-      )
+      ) &&
+      _circuit.componentGrid[0].components[0].dataAttributes["expanded"] !==
+        "false"
     ) {
       const location: string =
         _circuit.componentGrid[0].components[0].dataAttributes["location"];
@@ -150,16 +155,16 @@ export class Sqore {
     }
     this.addGateClickHandlers(container, _circuit);
 
-    if (this.isEditable) {
+    if (this.options.isEditable) {
       createDropzones(container, this);
       createPanel(container);
-      if (this.runCallback != undefined) {
-        const callback = this.runCallback;
+      if (this.options.runCallback != undefined) {
+        const callback = this.options.runCallback;
         enableRunButton(container, callback);
       }
       enableEvents(container, this, () => this.renderCircuit(container));
-      if (this.editCallback != undefined) {
-        this.editCallback(this.minimizeCircuits(this.circuitGroup));
+      if (this.options.editCallback != undefined) {
+        this.options.editCallback(this.minimizeCircuits(this.circuitGroup));
       }
     }
   }
@@ -203,10 +208,14 @@ export class Sqore {
     };
 
     const { qubits, componentGrid } = circuit;
-    const { qubitWires, registers, svgHeight } = formatInputs(qubits);
+    const { qubitWires, registers, svgHeight } = formatInputs(
+      qubits,
+      this.options.isEditable ? undefined : this.options.renderLocations,
+    );
     const { renderDataArray, svgWidth } = processOperations(
       componentGrid,
       registers,
+      this.options.isEditable ? undefined : this.options.renderLocations,
     );
     const formattedGates: SVGElement = formatGates(renderDataArray);
     const measureGates: GateRenderData[] = flatten(renderDataArray).filter(
@@ -330,11 +339,11 @@ export class Sqore {
         } else {
           selectedCol.push(op);
         }
-        selectedOps.push({ components: selectedCol });
-        if (extraCols.length > 0) {
-          selectedOps.push(...extraCols);
-        }
       });
+      selectedOps.push({ components: selectedCol });
+      if (extraCols.length > 0) {
+        selectedOps.push(...extraCols);
+      }
     });
     return selectedOps;
   }
@@ -471,7 +480,7 @@ export class Sqore {
         // Collapse parent gate and its children
         if (opId.startsWith(parentLoc)) {
           op.conditionalRender = ConditionalRender.Always;
-          delete op.dataAttributes["expanded"];
+          op.dataAttributes["expanded"] = "false";
         }
       }),
     );

package/ux/circuit.tsx

@@ -5,7 +5,7 @@ import * as qviz from "./circuit-vis/index.js";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { CircuitProps } from "./data.js";
 import { Spinner } from "./spinner.js";
-import { toCircuitGroup } from "./circuit-vis/circuit.js";
+import { SourceLocation, toCircuitGroup } from "./circuit-vis/circuit.js";
 
 // For perf reasons we set a limit on how many gates/qubits
 // we attempt to render. This is still a lot higher than a human would
@@ -23,6 +23,7 @@ export function Circuit(props: {
   isEditable: boolean;
   editCallback?: (fileData: qviz.CircuitGroup) => void;
   runCallback?: () => void;
+  renderLocations: (s: SourceLocation[]) => { title: string; href: string };
 }) {
   let unrenderable = false;
   let qubits = 0;
@@ -67,6 +68,7 @@ function ZoomableCircuit(props: {
   isEditable: boolean;
   editCallback?: (fileData: qviz.CircuitGroup) => void;
   runCallback?: () => void;
+  renderLocations: (s: SourceLocation[]) => { title: string; href: string };
 }) {
   const circuitDiv = useRef<HTMLDivElement>(null);
   const [zoomLevel, setZoomLevel] = useState(100);
@@ -88,6 +90,7 @@ function ZoomableCircuit(props: {
         props.circuitGroup,
         container,
         props.isEditable,
+        props.renderLocations,
         props.editCallback,
         props.runCallback,
       );
@@ -174,17 +177,16 @@ function ZoomableCircuit(props: {
     circuitGroup: qviz.CircuitGroup,
     container: HTMLDivElement,
     isEditable: boolean,
+    renderLocations?: (s: SourceLocation[]) => { title: string; href: string },
     editCallback?: (fileData: qviz.CircuitGroup) => void,
     runCallback?: () => void,
   ) {
-    qviz.draw(
-      circuitGroup,
-      container,
-      0,
+    qviz.draw(circuitGroup, container, {
       isEditable,
       editCallback,
       runCallback,
-    );
+      renderLocations,
+    });
     return container.getElementsByClassName("qviz")[0]!;
   }
 
@@ -329,8 +331,40 @@ export function CircuitPanel(props: CircuitProps) {
           isEditable={props.isEditable}
           editCallback={props.editCallback}
           runCallback={props.runCallback}
+          renderLocations={renderLocations}
         ></Circuit>
       ) : null}
     </div>
   );
 }
+
+function renderLocations(locations: SourceLocation[]) {
+  const qdkLocations = locations.map((location) => {
+    const position = {
+      line: location.line,
+      character: location.column,
+    };
+    return {
+      source: location.file,
+      span: {
+        start: position,
+        end: position,
+      },
+    };
+  });
+
+  const titles = locations.map((location) => {
+    const basename =
+      location.file.replace(/\/+$/, "").split("/").pop() ?? location.file;
+    const title = `${basename}:${location.line + 1}:${location.column + 1}`;
+    return title;
+  });
+  const title = titles.length > 1 ? `${titles[0]}, ...` : titles[0];
+
+  const argsStr = encodeURIComponent(JSON.stringify([qdkLocations]));
+  const href = `command:qsharp-vscode.gotoLocations?${argsStr}`;
+  return {
+    title,
+    href,
+  };
+}

package/ux/histogram.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
 
 const menuItems = [
   {
@@ -18,22 +18,67 @@ const menuItems = [
   },
 ];
 const maxMenuOptions = 3;
-const defaultMenuSelection: { [idx: string]: number } = {
-  itemCount: 0,
-  sortOrder: 0,
-  labels: 0,
-};
 
-const reKetResult = /^\[(?:(Zero|One), *)*(Zero|One)\]$/;
+function getDefaultMenuSelection(
+  labels?: "raw" | "kets" | "none",
+  items?: "all" | "top-10" | "top-25",
+  sort?: "a-to-z" | "high-to-low" | "low-to-high",
+): {
+  [idx: string]: number;
+} {
+  const selection = {
+    itemCount: 0,
+    sortOrder: 0,
+    labels: 0,
+  };
+  switch (items) {
+    case "top-10":
+      selection["itemCount"] = 1;
+      break;
+    case "top-25":
+      selection["itemCount"] = 2;
+      break;
+    default:
+      selection["itemCount"] = 0;
+      break;
+  }
+  switch (sort) {
+    case "high-to-low":
+      selection["sortOrder"] = 1;
+      break;
+    case "low-to-high":
+      selection["sortOrder"] = 2;
+      break;
+    default:
+      selection["sortOrder"] = 0;
+      break;
+  }
+  switch (labels) {
+    case "kets":
+      selection["labels"] = 1;
+      break;
+    case "none":
+      selection["labels"] = 2;
+      break;
+    default:
+      selection["labels"] = 0;
+      break;
+  }
+  return selection;
+}
+
+const reKetResult = /^\[(?:(Zero|One|Loss), *)*(Zero|One|Loss)\]$/;
 function resultToKet(result: string): string {
   if (typeof result !== "string") return "ERROR";
 
   if (reKetResult.test(result)) {
     // The result is a simple array of Zero and One
     // The below will return an array of "Zero" or "One" in the order found
-    const matches = result.match(/(One|Zero)/g);
+    const matches = result.match(/(One|Zero|Loss)/g);
     let ket = "|";
-    matches?.forEach((digit) => (ket += digit == "One" ? "1" : "0"));
+    matches?.forEach(
+      (digit) => (ket += digit == "One" ? "1" : digit == "Zero" ? "0" : "-"),
+    );
     ket += "⟩";
     return ket;
   } else {
@@ -47,10 +92,21 @@ export function Histogram(props: {
   filter: string;
   onFilter: (filter: string) => void;
   shotsHeader: boolean;
+  labels?: "raw" | "kets" | "none";
+  items?: "all" | "top-10" | "top-25";
+  sort?: "a-to-z" | "high-to-low" | "low-to-high";
 }) {
   const [hoverLabel, setHoverLabel] = useState("");
   const [scale, setScale] = useState({ zoom: 1.0, offset: 1.0 });
-  const [menuSelection, setMenuSelection] = useState(defaultMenuSelection);
+  const [menuSelection, setMenuSelection] = useState(() => {
+    return getDefaultMenuSelection(props.labels, props.items, props.sort);
+  });
+
+  useEffect(() => {
+    setMenuSelection(
+      getDefaultMenuSelection(props.labels, props.items, props.sort),
+    );
+  }, [props.labels, props.items, props.sort]);
 
   const gMenu = useRef<SVGGElement>(null);
   const gInfo = useRef<SVGGElement>(null);
@@ -92,9 +148,12 @@ export function Histogram(props: {
   }
 
   bucketArray.sort((a, b) => {
+    const a_label = showKetLabels ? resultToKet(a[0]) : a[0];
+    const b_label = showKetLabels ? resultToKet(b[0]) : b[0];
+
     // If they can be converted to numbers, then sort as numbers, else lexically
-    const ax = Number(a[0]);
-    const bx = Number(b[0]);
+    const ax = Number(a_label);
+    const bx = Number(b_label);
     switch (menuSelection["sortOrder"]) {
       case 1: // high-to-low
         return a[1] < b[1] ? 1 : -1;
@@ -104,7 +163,7 @@ export function Histogram(props: {
         break;
       default: // a-z
         if (!isNaN(ax) && !isNaN(bx)) return ax < bx ? -1 : 1;
-        return a[0] < b[0] ? -1 : 1;
+        return a_label < b_label ? -1 : 1;
         break;
     }
   });
@@ -248,6 +307,8 @@ export function Histogram(props: {
     setScale({ zoom: newZoom, offset: boundScrollOffset });
   }
 
+  const label_class = showKetLabels ? "bar-label bar-label-ket" : "bar-label";
+
   return (
     <>
       {props.shotsHeader ? (
@@ -262,10 +323,12 @@ export function Histogram(props: {
             const x = barBoxWidth * idx + barPaddingSize;
             const labelX = barBoxWidth * idx + barBoxWidth / 2 - fontOffset;
             const y = barAreaHeight + 15 - height;
-            const barLabel = `${label} at ${(
-              (entry[1] / totalAllBuckets) *
-              100
-            ).toFixed(2)}%`;
+            const barLabel =
+              props.shotCount == 0
+                ? `${entry[1]}`
+                : `${label} at ${((entry[1] / totalAllBuckets) * 100).toFixed(
+                    2,
+                  )}%`;
             let barClass = "bar";
 
             if (entry[0] === props.filter) {
@@ -289,7 +352,7 @@ export function Histogram(props: {
                 </rect>
                 {
                   <text
-                    class="bar-label"
+                    class={label_class}
                     x={labelX}
                     y="85"
                     visibility={showLabels ? "visible" : "hidden"}

package/ux/index.ts

@@ -20,3 +20,5 @@ export { EstimatesOverview } from "./estimatesOverview.js";
 export { EstimatesPanel } from "./estimatesPanel.js";
 export { Circuit, CircuitPanel } from "./circuit.js";
 export { setRenderer, Markdown } from "./renderers.js";
+export { Atoms, type ZoneLayout, type TraceData } from "./atoms/index.js";
+export { MoleculeViewer } from "./chem/index.js";

package/ux/qsharp-circuit.css

@@ -72,6 +72,34 @@
     fill: var(--vscode-button-secondaryForeground, #ffffff);
   }
 
+  a.qs-circuit-source-link .qs-qubit-label {
+    pointer-events: auto;
+  }
+
+  /* Hover effect for clickable gates */
+  a.qs-circuit-source-link:hover .gate-unitary {
+    fill: var(--vscode-button-secondaryHoverBackground, #4d4d4d);
+  }
+
+  a.qs-circuit-source-link:hover .gate-measure,
+  a.qs-circuit-source-link:hover .gate-ket {
+    fill: var(--vscode-button-hoverBackground, #005a9e);
+  }
+
+  a.qs-circuit-source-link:hover .qs-qubit-label {
+    fill: var(--vscode-editorLink-activeForeground, #5d5d5d);
+  }
+
+  a.qs-circuit-source-link:hover .control-dot {
+    fill: var(--vscode-editorLink-activeForeground, #5d5d5d);
+    stroke: var(--vscode-editorLink-activeForeground, #5d5d5d);
+  }
+
+  a.qs-circuit-source-link:hover .oplus > line,
+  a.qs-circuit-source-link:hover .oplus > circle {
+    stroke: var(--vscode-editorLink-activeForeground, #5d5d5d);
+  }
+
   /* Default style for arg-button */
   .arg-button {
     fill: var(--vscode-editor-foreground, #ffffff);
@@ -108,7 +136,7 @@
   }
 
   /* Measurement gate icon */
-  .gate > g > line,
+  .qs-line-measure,
   .arc-measure {
     stroke: var(--vscode-button-foreground, #ffffff);
     fill: none;

package/ux/qsharp-ux.css

@@ -350,11 +350,12 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
 }
 
 .bar {
-  fill: var(--vscode-button-background, var(--nav-background));
+  fill: var(--vscode-editorInfo-foreground, var(--nav-background));
 }
 
 .bar:hover {
-  fill: var(--vscode-button-hoverBackground, var(--nav-hover-background));
+  stroke: gray;
+  stroke-width: 0.5;
 }
 
 .bar-selected {
@@ -364,11 +365,15 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
 
 .bar-label {
   font-size: 3pt;
-  fill: var(--vscode-button-foreground, var(--main-color));
+  fill: var(--vscode-icon-foreground, var(--main-color));
   text-anchor: end;
   pointer-events: none;
 }
 
+.bar-label-ket {
+  font-family: "Courier", monospace;
+}
+
 .histo-label {
   font-size: 3.5pt;
   fill: var(--vscode-foreground, #3b3b3b);