qsharp-lang 1.22.2-dev → 1.22.4-dev

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,20 @@ 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;
-
   /**
    * Initializes Sqore object.
    *
@@ -62,9 +69,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 +88,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 +106,7 @@ export class Sqore {
     // Create copy of circuit to prevent mutation
     const _circuit: Circuit =
       circuit ?? JSON.parse(JSON.stringify(this.circuit));
-    const renderDepth = this.renderDepth;
+    const renderDepth = this.options.renderDepth || 0;
 
     // Assign unique locations to each operation
     _circuit.componentGrid.forEach((col, colIndex) =>
@@ -150,16 +153,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 +206,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(

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/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);