qsharp-lang 1.0.34-dev → 1.1.0-dev

package/ux/estimatesOverview.tsx

@@ -13,14 +13,7 @@ import {
   SingleEstimateResult,
 } from "./data.js";
 import { ResultsTable, Row } from "./resultsTable.js";
-import {
-  Axis,
-  HideTooltip,
-  PlotItem,
-  ScatterChart,
-  ScatterSeries,
-  SelectPoint,
-} from "./scatterChart.js";
+import { Axis, PlotItem, ScatterChart, ScatterSeries } from "./scatterChart.js";
 
 const columnNames = [
   "Run name",
@@ -39,7 +32,7 @@ const columnNames = [
   "Physical qubits",
 ];
 
-const initialColumns = [0, 1, 2, 3, 4, 10, 11, 12];
+const initialColumns = [0, 10, 13, 11, 12];
 
 const xAxis: Axis = {
   isTime: true,
@@ -77,7 +70,6 @@ function reDataToRow(input: ReData, color: string): Row {
       },
       data.physicalCounts.rqops,
       data.physicalCounts.physicalQubits,
-      data.new ? "New" : "Cached",
     ],
     color: color,
   };
@@ -89,7 +81,7 @@ function frontierEntryToPlotEntry(entry: FrontierEntry): PlotItem {
     y: entry.physicalCounts.physicalQubits,
     label:
       entry.physicalCountsFormatted.runtime +
-      " " +
+      ", physical qubits: " +
       entry.physicalCountsFormatted.physicalQubits,
   };
 }
@@ -104,7 +96,7 @@ function reDataToRowScatter(data: ReData, color: string): ScatterSeries {
           y: data.physicalCounts.physicalQubits,
           label:
             data.physicalCountsFormatted.runtime +
-            " " +
+            ", physical qubits: " +
             data.physicalCountsFormatted.physicalQubits,
         },
       ],
@@ -117,6 +109,63 @@ function reDataToRowScatter(data: ReData, color: string): ScatterSeries {
   };
 }
 
+function createRunNames(estimatesData: ReData[]): string[] {
+  // If there's only 1 entry, use the shared run name
+  if (estimatesData.length === 1) {
+    return [estimatesData[0].jobParams.sharedRunName];
+  }
+
+  const fields: string[][] = [];
+
+  estimatesData.forEach(() => {
+    fields.push([]);
+  });
+
+  // Could be multiple runs, e.g. against different algorithms.
+  addIfDifferent(fields, estimatesData, (data) => data.jobParams.sharedRunName);
+
+  addIfDifferent(
+    fields,
+    estimatesData,
+    (data) => data.jobParams.qubitParams.name,
+  );
+
+  addIfDifferent(
+    fields,
+    estimatesData,
+    (data) => data.jobParams.qecScheme.name,
+  );
+
+  addIfDifferent(fields, estimatesData, (data) =>
+    String(data.jobParams.errorBudget),
+  );
+
+  const proposedRunNames = fields.map((field) => field.join(", "));
+  if (new Set(proposedRunNames).size != proposedRunNames.length) {
+    // If there are duplicates, add the run index to the name.
+    return proposedRunNames.map(
+      (runName, index) => runName + " (" + index + ")",
+    );
+  }
+
+  return proposedRunNames;
+}
+
+function addIfDifferent(
+  fields: string[][],
+  estimatesData: ReData[],
+  fieldMethod: (data: ReData) => string,
+): void {
+  const arr = estimatesData.map(fieldMethod);
+
+  const set = new Set(arr);
+  if (set.size > 1) {
+    arr.forEach((field, index) => {
+      fields[index].push(field);
+    });
+  }
+}
+
 export function EstimatesOverview(props: {
   estimatesData: ReData[];
   colors: string[] | null;
@@ -126,36 +175,45 @@ export function EstimatesOverview(props: {
   setEstimate: (estimate: SingleEstimateResult | null) => void;
 }) {
   const [selectedRow, setSelectedRow] = useState<string | null>(null);
+  const [selectedPoint, setSelectedPoint] = useState<[number, number]>();
+
+  const runNameRenderingError =
+    props.runNames != null &&
+    props.runNames.length > 0 &&
+    props.runNames.length != props.estimatesData.length
+      ? "Warning: The number of runNames does not match the number of estimates. Ignoring provided runNames."
+      : "";
+
+  const runNames =
+    props.runNames != null &&
+    props.runNames.length == props.estimatesData.length
+      ? props.runNames
+      : createRunNames(props.estimatesData);
 
   props.estimatesData.forEach((item, idx) => {
-    if (
-      props.runNames != null &&
-      props.runNames.length == props.estimatesData.length
-    ) {
-      item.jobParams.runName = props.runNames[idx];
-    } else {
-      if (item.jobParams.runName == null) {
-        // Start indexing with 0 to match with the original object indexing.
-        item.jobParams.runName = `(${idx})`;
-      }
-    }
+    // Start indexing with 0 to match with the original object indexing.
+    item.jobParams.runName = runNames[idx];
   });
 
   function onPointSelected(seriesIndex: number, pointIndex: number): void {
+    if (seriesIndex < 0) {
+      // Point was deselected
+      onRowSelected("");
+      return;
+    }
+
     const data = props.estimatesData[seriesIndex];
     props.setEstimate(CreateSingleEstimateResult(data, pointIndex));
     const rowId = props.estimatesData[seriesIndex].jobParams.runName;
     setSelectedRow(rowId);
+    setSelectedPoint([seriesIndex, pointIndex]);
   }
 
   function onRowSelected(rowId: string) {
     setSelectedRow(rowId);
-    // On any selection, clear the "new" flag on all rows. This ensures that
-    // new rows do not steal focus from the user selected row.
-    props.estimatesData.forEach((data) => (data.new = false));
-    HideTooltip();
     if (!rowId) {
       props.setEstimate(null);
+      setSelectedPoint(undefined);
     } else {
       const index = props.estimatesData.findIndex(
         (data) => data.jobParams.runName === rowId,
@@ -163,76 +221,85 @@ export function EstimatesOverview(props: {
 
       if (index == -1) {
         props.setEstimate(null);
+        setSelectedPoint(undefined);
       } else {
         const estimateFound = props.estimatesData[index];
+        setSelectedPoint([index, 0]);
         props.setEstimate(CreateSingleEstimateResult(estimateFound, 0));
-        SelectPoint(index, 0);
       }
     }
   }
 
+  const colorRenderingError =
+    props.colors != null &&
+    props.colors.length > 0 &&
+    props.colors.length != props.estimatesData.length
+      ? "Warning: The number of colors does not match the number of estimates. Ignoring provided colors."
+      : "";
+
   const colormap =
     props.colors != null && props.colors.length == props.estimatesData.length
       ? props.colors
       : ColorMap(props.estimatesData.length);
 
-  if (props.isSimplifiedView) {
+  function getResultTable() {
+    return (
+      <ResultsTable
+        columnNames={columnNames}
+        rows={props.estimatesData.map((dataItem, index) =>
+          reDataToRow(dataItem, colormap[index]),
+        )}
+        initialColumns={initialColumns}
+        selectedRow={selectedRow}
+        onRowSelected={onRowSelected}
+        onRowDeleted={props.onRowDeleted}
+      />
+    );
+  }
+
+  function getScatterChart() {
     return (
-      <>
-        <ResultsTable
-          columnNames={columnNames}
-          rows={props.estimatesData.map((dataItem, index) =>
-            reDataToRow(dataItem, colormap[index]),
-          )}
-          initialColumns={initialColumns}
-          ensureSelected={true}
-          onRowDeleted={props.onRowDeleted}
-          selectedRow={selectedRow}
-          setSelectedRow={onRowSelected}
-        />
-        <ScatterChart
-          xAxis={xAxis}
-          yAxis={yAxis}
-          data={props.estimatesData.map((dataItem, index) =>
-            reDataToRowScatter(dataItem, colormap[index]),
-          )}
-          onPointSelected={onPointSelected}
-        />
-      </>
+      <ScatterChart
+        xAxis={xAxis}
+        yAxis={yAxis}
+        data={props.estimatesData.map((dataItem, index) =>
+          reDataToRowScatter(dataItem, colormap[index]),
+        )}
+        onPointSelected={onPointSelected}
+        selectedPoint={selectedPoint}
+      />
     );
   }
 
   return (
-    <>
-      <details open>
-        <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;">
-          Results
-        </summary>
-        <ResultsTable
-          columnNames={columnNames}
-          rows={props.estimatesData.map((dataItem, index) =>
-            reDataToRow(dataItem, colormap[index]),
-          )}
-          initialColumns={initialColumns}
-          selectedRow={selectedRow}
-          setSelectedRow={onRowSelected}
-          ensureSelected={true}
-          onRowDeleted={props.onRowDeleted}
-        />
-      </details>
-      <details open>
-        <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;">
-          Qubit-time diagram
-        </summary>
-        <ScatterChart
-          xAxis={xAxis}
-          yAxis={yAxis}
-          data={props.estimatesData.map((dataItem, index) =>
-            reDataToRowScatter(dataItem, colormap[index]),
-          )}
-          onPointSelected={onPointSelected}
-        />
-      </details>
-    </>
+    <div className="qs-estimatesOverview">
+      {runNameRenderingError != "" && (
+        <div class="qs-estimatesOverview-error">{runNameRenderingError}</div>
+      )}
+      {colorRenderingError != "" && (
+        <div class="qs-estimatesOverview-error">{colorRenderingError}</div>
+      )}
+      {!props.isSimplifiedView ? (
+        <>
+          <details open>
+            <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;">
+              Results
+            </summary>
+            {getResultTable()}
+          </details>
+          <details open>
+            <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;">
+              Space-time diagram
+            </summary>
+            {getScatterChart()}
+          </details>
+        </>
+      ) : (
+        <>
+          {getResultTable()}
+          {getScatterChart()}
+        </>
+      )}
+    </div>
   );
 }

package/ux/estimatesPanel.tsx

@@ -0,0 +1,94 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useState } from "preact/hooks";
+import { type ReData, SingleEstimateResult } from "./data.js";
+import { EstimatesOverview } from "./estimatesOverview.js";
+import { ReTable } from "./reTable.js";
+import { SpaceChart } from "./spaceChart.js";
+
+export function EstimatesPanel(props: {
+  estimatesData: ReData[];
+  colors: string[];
+  runNames: string[];
+  calculating: boolean;
+  renderer: (input: string) => string;
+  onRowDeleted: (rowId: string) => void;
+}) {
+  const [estimate, setEstimate] = useState<SingleEstimateResult | null>(null);
+
+  return (
+    <>
+      <div style="display:flex; height:64px; align-items: center; position: relative">
+        <svg
+          width="48"
+          height="48"
+          viewBox="96 96 828 828"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g fill="none" stroke="gray" stroke-width="8">
+            <path d="M 512 135 L 819 313 L 819 667 L 512 845 L 205 667 L 205 313 L 512 135 Z" />
+            <path d="M 205 580 L 742 890 L 819 845 L 818 756 L 205 402" />
+            <path d="M 204 579 L 743 268" />
+            <path d="M 664 224 L 207 489" />
+            <path d="M 206 400 L 588 180" />
+            <path d="M 205 667 L 818 313" />
+            <path d="M 205 490 L 820 845" />
+            <path d="M 207 314 L 818 667" />
+            <path d="M 282 269 L 820 580" />
+            <path d="M 820 490 L 357 223" />
+            <path d="M 435 180 L 818 400" />
+            <path d="M 281 710 L 281 271" />
+            <path d="M 357 755 L 357 223" />
+            <path d="M 283 711 L 820 400" />
+            <path d="M 434 797 L 434 181" />
+            <path d="M 511 136 L 511 844" />
+            <path d="M 588 799 L 588 182" />
+            <path d="M 665 223 L 665 845" />
+            <path d="M 742 887 L 742 267" />
+            <path d="M 665 845 L 816 758" />
+            <path d="M 433 801 L 820 577" />
+            <path d="M 820 489 L 360 755" />
+          </g>
+        </svg>
+        {props.calculating ? (
+          <svg
+            width="40"
+            height="40"
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+            class="codicon-modifier-spin"
+            style="position: absolute; top: 11px; left: 4px;"
+          >
+            <path d="M2.006 8.267L.78 9.5 0 8.73l2.09-2.07.76.01 2.09 2.12-.76.76-1.167-1.18a5 5 0 0 0 9.4 1.983l.813.597a6 6 0 0 1-11.22-2.683zm10.99-.466L11.76 6.55l-.76.76 2.09 2.11.76.01 2.09-2.07-.75-.76-1.194 1.18a6 6 0 0 0-11.11-2.92l.81.594a5 5 0 0 1 9.3 2.346z"></path>
+          </svg>
+        ) : null}
+        <h1>Azure Quantum Resource Estimator</h1>
+      </div>
+      <EstimatesOverview
+        estimatesData={props.estimatesData}
+        isSimplifiedView={false}
+        onRowDeleted={props.onRowDeleted}
+        setEstimate={setEstimate}
+        runNames={props.runNames}
+        colors={props.colors}
+      ></EstimatesOverview>
+      {!estimate ? null : (
+        <>
+          <details open>
+            <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;">
+              Space diagram
+            </summary>
+            <SpaceChart estimatesData={estimate} />
+          </details>
+          <details open>
+            <summary style="font-size: 1.5em; font-weight: bold; margin: 24px 8px;">
+              Resource Estimates
+            </summary>
+            <ReTable mdRenderer={props.renderer} estimatesData={estimate} />
+          </details>
+        </>
+      )}
+    </>
+  );
+}

package/ux/generate_report_code.py

@@ -52,7 +52,7 @@ path_map = {
     "logicalQubit/logicalCyclesPerSecond": "numberFormatF64.format(result.physicalCounts.breakdown.clockFrequency)",
     "logicalQubit/logicalCycleTime": "numberFormat.format(result.logicalQubit.logicalCycleTime)",
     "logicalQubit/physicalQubits": "numberFormat.format(result.logicalQubit.physicalQubits)",
-    "physicalCounts/breakdown/algorithmicLogicalDepth": "numberFormat.format(result.physicalCountsFormatted.algorithmicLogicalDepth)",
+    "physicalCounts/breakdown/algorithmicLogicalDepth": "numberFormat.format(result.physicalCounts.breakdown.algorithmicLogicalDepth)",
     "physicalCounts/breakdown/algorithmicLogicalQubits": "numberFormat.format(result.physicalCounts.breakdown.algorithmicLogicalQubits)",
     "physicalCounts/breakdown/cliffordErrorRate": "result.physicalCounts.breakdown.cliffordErrorRate",
     "physicalCounts/breakdown/logicalDepth": "numberFormat.format(result.physicalCounts.breakdown.logicalDepth)",

package/ux/histogram.tsx

@@ -35,7 +35,6 @@ function resultToKet(result: string): string {
     // 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);
-    matches?.reverse();
     let ket = "|";
     matches?.forEach((digit) => (ket += digit == "One" ? "1" : "0"));
     ket += "⟩";

package/ux/index.ts

@@ -11,3 +11,4 @@ export { ReTable } from "./reTable.js";
 export { SpaceChart } from "./spaceChart.js";
 export { ScatterChart } from "./scatterChart.js";
 export { EstimatesOverview } from "./estimatesOverview.js";
+export { EstimatesPanel } from "./estimatesPanel.js";

package/ux/output_data.md

@@ -498,7 +498,7 @@ This is the probability in which executing a single T gate may fail.
 
 [//]: # "physicalCountsFormatted/logicalDepthFactor"
 
-_Factor, the initial number of logical cycles is multiplied by_
+_Factor the initial number of logical cycles is multiplied by_
 
 This is the factor takes into account a potential overhead to the initial number of logical cycles.
 

package/ux/qsharp-ux.css

@@ -28,7 +28,10 @@ modern-normalize (see https://mattbrictson.com/blog/css-normalize-and-reset for
 /* TODO: Use the qs- prefixes and apply consistently */
 :root {
   --heading-background: #262679;
-  --main-background: var(--vscode-editor-background, #ececf0);
+  --main-background: var(
+    --vscode-editor-background,
+    var(--jp-layout-color0, #ececf0)
+  );
   --main-color: var(
     --vscode-editor-foreground,
     var(--jp-widgets-color, #202020)
@@ -529,6 +532,7 @@ html {
 .qs-resultsTable-sortedTable {
   border-collapse: collapse;
   margin: 12px 0px;
+  outline: none;
 }
 
 .qs-resultsTable-sortedTable th,
@@ -548,11 +552,11 @@ html {
 }
 
 .qs-resultsTable-sortedTable tbody tr:hover {
-  background: var(--vscode-list-hoverBackground);
+  background: var(--vscode-list-hoverBackground, var(--js-layout-color2));
 }
 
 .qs-resultsTable-sortedTableSelectedRow td {
-  background: var(--vscode-button-background);
+  background: var(--vscode-button-background, var(--jp-layout-color3));
   color: var(--vscode-button-foreground);
   font-weight: 600;
 }
@@ -565,7 +569,7 @@ html {
 .qs-resultsTable-showColumnMenu {
   display: block;
   position: absolute;
-  background-color: var(--vscode-menu-background);
+  background-color: var(--vscode-menu-background, var(--main-background));
   border: 1px solid #8888;
   padding: 4px;
   z-index: 100;
@@ -574,7 +578,7 @@ html {
 
 .qs-resultsTable-menuItem {
   cursor: pointer;
-  background-color: var(--vscode-list-hoverBackground);
+  background-color: var(--vscode-list-hoverBackground, var(--jp-layout-color1));
   padding: 4px;
   margin: 2px;
   font-size: 14px;
@@ -582,7 +586,7 @@ html {
 }
 
 .qs-resultsTable-menuItem:hover {
-  background-color: var(--vscode-menu-border);
+  background-color: var(--vscode-menu-border, var(--jp-layout-color2));
 }
 
 .qs-resultsTable-columnSelected {
@@ -590,8 +594,8 @@ html {
   padding: 4px;
   font-weight: 400;
   font-size: 14px;
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
+  background-color: var(--vscode-button-background, var(--jp-brand-color1));
+  color: var(--vscode-button-foreground, var(--jp-ui-inverse-font-color0));
   margin: 2px;
   border-radius: 3px;
 }
@@ -616,10 +620,6 @@ html {
   animation: codicon-spin 1.5s steps(45) infinite;
 }
 
-.qs-scatterChart {
-  font-size: 14px;
-}
-
 .qs-scatterChart-x-axisTitle,
 .qs-scatterChart-y-axisTitle {
   text-anchor: middle;
@@ -632,19 +632,20 @@ html {
   transform: rotate(180deg);
 }
 
-.qs-scatterChart-line {
-  stroke: var(--border-color);
-}
-
 .qs-scatterChart-point {
   r: 2px;
   stroke-width: 4px;
 }
 
-.qs-scatterChart-point-selected,
-.qs-scatterChart-point:hover {
-  r: 6px;
-  stroke-width: 3px;
+.qs-scatterChart-hover:hover {
+  r: 4px;
+  stroke-width: 4px;
+  fill: white;
+}
+
+.qs-scatterChart-point-selected {
+  r: 8px;
+  stroke-width: 4px;
   fill: white;
 }
 
@@ -652,3 +653,45 @@ html {
   font-size: 16px;
   fill: var(--main-color);
 }
+
+.qs-scatterChart-tooltip,
+.qs-scatterChart-selectedInfo {
+  position: absolute;
+  visibility: hidden;
+  background: var(--main-background);
+  color: var(--main-color);
+  border: var(--border-color) 1px solid;
+  padding: 4px;
+}
+
+/* This rule adds the little triange pointer at the top */
+.qs-scatterChart-tooltip::after,
+.qs-scatterChart-selectedInfo::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent var(--border-color) transparent;
+}
+
+.qs-scatterChart-axis,
+.qs-scatterChart-tick-line {
+  stroke: var(--border-color);
+}
+
+.qs-scatterChart-x-tick-text {
+  text-anchor: middle;
+  fill: var(--main-color);
+}
+
+.qs-scatterChart-y-tick-text {
+  text-anchor: end;
+  fill: var(--main-color);
+}
+
+.qs-estimatesOverview-error {
+  color: red;
+}

package/ux/report.ts

@@ -39,7 +39,7 @@ export function CreateReport(result: SingleEstimateResult): ReportData {
     explanation: `This is a runtime estimate for the execution time of the algorithm. In general, the execution time corresponds to the duration of one logical cycle (${numberFormat.format(
       result.logicalQubit.logicalCycleTime,
     )} nanosecs) multiplied by the ${numberFormat.format(
-      result.physicalCountsFormatted.algorithmicLogicalDepth,
+      result.physicalCounts.breakdown.algorithmicLogicalDepth,
     )} logical cycles to run the algorithm. If however the duration of a single T factory (here: ${numberFormat.format(
       result.tfactory == null ? 0 : result.tfactory.runtime,
     )} nanosecs) is larger than the algorithm runtime, we extend the number of logical cycles artificially in order to exceed the runtime of a single T factory.`,
@@ -108,7 +108,7 @@ export function CreateReport(result: SingleEstimateResult): ReportData {
     label: "Logical depth",
     description: `Number of logical cycles performed`,
     explanation: `This number is usually equal to the logical depth of the algorithm, which is ${numberFormat.format(
-      result.physicalCountsFormatted.algorithmicLogicalDepth,
+      result.physicalCounts.breakdown.algorithmicLogicalDepth,
     )}. However, in the case in which a single T factory is slower than the execution time of the algorithm, we adjust the logical cycle depth to exceed the T factory's execution time.`,
   });
   entries.push({
@@ -553,7 +553,7 @@ export function CreateReport(result: SingleEstimateResult): ReportData {
   entries.push({
     path: "physicalCountsFormatted/logicalDepthFactor",
     label: "Logical depth factor",
-    description: `Factor, the initial number of logical cycles is multiplied by`,
+    description: `Factor the initial number of logical cycles is multiplied by`,
     explanation: `This is the factor takes into account a potential overhead to the initial number of logical cycles.`,
   });
   entries.push({