qsharp-lang 1.0.33 → 1.1.0-dev

package/ux/resultsTable.tsx

@@ -1,49 +1,35 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { useRef, useState } from "preact/hooks";
-import { type ReData } from "./reTable.js";
+import { useRef, useState, useEffect } from "preact/hooks";
 
-type CellValue = string | number | { value: string; sortBy: number };
+export type CellValue = string | number | { value: string; sortBy: number };
+export type Row = {
+  color: string;
+  cells: CellValue[];
+};
 
 // Note: column 0 is expected to be unique amongst all rows
 export function ResultsTable(props: {
   columnNames: string[];
-  data: ReData[];
+  rows: Row[];
   initialColumns: number[];
-  ensureSelected: boolean;
-  onRowSelected(rowId: string): void;
   onRowDeleted(rowId: string): void;
+  selectedRow: string | null;
+  onRowSelected(rowId: string): void;
 }) {
   const [showColumns, setShowColumns] = useState(props.initialColumns);
   const [sortColumn, setSortColumn] = useState<{
     columnId: number;
     ascending: boolean;
   } | null>(null);
-  const [selectedRow, setSelectedRow] = useState<string>("");
+
   const [showColumnMenu, setShowColumnMenu] = useState(false);
   const [showRowMenu, setShowRowMenu] = useState("");
 
-  const rows = props.data.map(ReDataToRow);
-
-  // Find the first row that is new in the current sort order
-  const newest = getSortedRows(rows).find(
-    (row) => (row[row.length - 1] as string) === "New",
-  );
-
-  // Select the first of the newest rows, otherwise preserve the existing selection
-  if (newest && props.ensureSelected) {
-    const rowId = newest[0].toString();
-    setSelectedRow(rowId);
-    props.onRowSelected(rowId);
-  } else if (!selectedRow && props.ensureSelected && rows.length > 0) {
-    const rowId = rows[0][0].toString();
-    setSelectedRow(rowId);
-    props.onRowSelected(rowId);
-  }
-
   // Use to track the column being dragged
   const draggingCol = useRef("");
+  const columnMenu = useRef<HTMLDivElement>(null);
 
   /*
   Note: Drag and drop events can occur faster than preact reconciles state.
@@ -79,6 +65,10 @@ export function ResultsTable(props: {
     }
   }
 
+  function onRowSelected(rowId: string) {
+    props.onRowSelected(rowId);
+  }
+
   function onDragOver(ev: DragEvent) {
     if (!(ev.target instanceof HTMLElement)) return;
     const thisColId = ev.target.closest("th")?.dataset["colid"];
@@ -156,7 +146,7 @@ export function ResultsTable(props: {
     }
   }
 
-  function getSortedRows(rows: CellValue[][]) {
+  function getSortedRows(rows: Row[]) {
     if (!sortColumn) return rows;
 
     const colIdx = sortColumn.columnId;
@@ -164,8 +154,8 @@ export function ResultsTable(props: {
 
     const sortedRows = [...rows];
     sortedRows.sort((a, b) => {
-      const aVal = a[colIdx];
-      const bVal = b[colIdx];
+      const aVal = a.cells[colIdx];
+      const bVal = b.cells[colIdx];
       if (typeof aVal === "string" && typeof bVal === "string") {
         return ascending ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
       } else if (typeof aVal === "number" && typeof bVal === "number") {
@@ -192,12 +182,9 @@ export function ResultsTable(props: {
     }
   }
 
-  function rowClicked(rowId: string) {
-    if (selectedRow === rowId && props.ensureSelected) return;
-
-    const newSelectedRow = selectedRow === rowId ? "" : rowId;
-    setSelectedRow(newSelectedRow);
-    props.onRowSelected(newSelectedRow);
+  function onRowClicked(rowId: string) {
+    const newSelectedRow = props.selectedRow === rowId ? "" : rowId;
+    onRowSelected(newSelectedRow);
   }
 
   function onClickRowMenu(ev: MouseEvent, rowid: string) {
@@ -246,19 +233,60 @@ export function ResultsTable(props: {
     e.stopPropagation();
     // Clear out any menus or selections for the row if needed
     setShowRowMenu("");
-    if (selectedRow === rowId) {
-      setSelectedRow("");
-      props.onRowSelected("");
+    if (props.selectedRow === rowId) {
+      onRowSelected("");
     }
     props.onRowDeleted(rowId);
   }
 
+  function onKeyDown(ev: KeyboardEvent) {
+    if (!props.selectedRow) return;
+    const sortedRowNames = getSortedRows(props.rows).map((row) =>
+      row.cells[0].toString(),
+    );
+    const currIndex = sortedRowNames.indexOf(props.selectedRow);
+
+    switch (ev.code) {
+      case "ArrowDown":
+        if (currIndex < sortedRowNames.length - 1) {
+          ev.preventDefault();
+          props.onRowSelected(sortedRowNames[currIndex + 1]);
+        }
+        break;
+      case "ArrowUp":
+        if (currIndex > 0) {
+          ev.preventDefault();
+          props.onRowSelected(sortedRowNames[currIndex - 1]);
+        }
+        break;
+      default:
+      // Not of interest
+    }
+  }
+
+  useEffect(() => {
+    // Post rendering, if the column menu is displayed, then ensure it
+    // has focus so that clicking anywhere outside of it caused the blur
+    // event that closes it.
+    if (showColumnMenu && columnMenu.current) {
+      columnMenu.current.focus();
+    }
+  });
+
   return (
-    <table class="qs-resultsTable-sortedTable">
+    <table
+      class="qs-resultsTable-sortedTable"
+      tabIndex={0}
+      onKeyDown={onKeyDown}
+    >
       <thead>
         <tr>
           <th>
-            <div style="position: relative">
+            <div
+              style="position: relative"
+              tabIndex={0}
+              onBlur={() => setShowColumnMenu(false)}
+            >
               <svg
                 width="16"
                 height="16"
@@ -283,6 +311,7 @@ export function ResultsTable(props: {
                 />
               </svg>
               <div
+                ref={columnMenu}
                 class={
                   showColumnMenu
                     ? "qs-resultsTable-columnMenu qs-resultsTable-showColumnMenu"
@@ -344,14 +373,14 @@ export function ResultsTable(props: {
         </tr>
       </thead>
       <tbody>
-        {getSortedRows(rows).map((row) => {
-          const rowId = row[0].toString();
+        {getSortedRows(props.rows).map((row) => {
+          const rowId = row.cells[0].toString();
           return (
             <tr
-              onClick={() => rowClicked(rowId)}
+              onClick={() => onRowClicked(rowId)}
               data-rowid={rowId}
               class={
-                rowId === selectedRow
+                rowId === props.selectedRow
                   ? "qs-resultsTable-sortedTableSelectedRow"
                   : undefined
               }
@@ -364,7 +393,7 @@ export function ResultsTable(props: {
                   <svg width="16" height="16" style="position: relative;">
                     <path
                       stroke-width="1.5"
-                      stroke="gray"
+                      stroke={row.color}
                       stroke-linecap="round"
                       d="M4,5 h8 M4,8 h8 M4,11 h8"
                     />
@@ -386,7 +415,9 @@ export function ResultsTable(props: {
               </td>
               {showColumns.map((idx) => {
                 return (
-                  <td data-colid={idx.toString()}>{getCellStr(row[idx])}</td>
+                  <td data-colid={idx.toString()}>
+                    {getCellStr(row.cells[idx])}
+                  </td>
                 );
               })}
             </tr>
@@ -396,25 +427,3 @@ export function ResultsTable(props: {
     </table>
   );
 }
-
-function ReDataToRow(data: ReData): CellValue[] {
-  return [
-    data.jobParams.runName,
-    data.jobParams.qubitParams.name,
-    data.jobParams.qecScheme.name,
-    data.jobParams.errorBudget,
-    data.physicalCounts.breakdown.algorithmicLogicalQubits,
-    data.physicalCounts.breakdown.algorithmicLogicalDepth,
-    data.logicalQubit.codeDistance,
-    data.physicalCounts.breakdown.numTstates,
-    data.physicalCounts.breakdown.numTfactories,
-    data.physicalCountsFormatted.physicalQubitsForTfactoriesPercentage,
-    {
-      value: data.physicalCountsFormatted.runtime,
-      sortBy: data.physicalCounts.runtime,
-    },
-    data.physicalCounts.rqops,
-    data.physicalCounts.physicalQubits,
-    data.new ? "New" : "Cached",
-  ];
-}

package/ux/scatterChart.tsx

@@ -0,0 +1,300 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useRef, useEffect } from "preact/hooks";
+import * as utils from "../src/utils.js";
+
+export type ScatterSeries = {
+  color: string;
+  items: PlotItem[];
+};
+
+export type PlotItem = {
+  x: number;
+  y: number;
+  label: string;
+};
+
+export type Axis = {
+  isTime: boolean;
+  label: string;
+};
+
+type Range = {
+  min: number;
+  max: number;
+};
+
+export function ScatterChart(props: {
+  data: ScatterSeries[];
+  xAxis: Axis;
+  yAxis: Axis;
+  onPointSelected(seriesIndex: number, pointIndex: number): void;
+  selectedPoint?: [number, number];
+}) {
+  const selectedTooltipDiv = useRef<HTMLDivElement>(null);
+
+  const { rangeX, rangeY } = utils.getRanges(props.data, 2 /* coefficient */);
+
+  function createAxisTicks(range: Range, isTime: boolean): utils.Tick[] {
+    return isTime
+      ? utils.CreateTimeTicks(range.min, range.max)
+      : utils.CreateIntegerTicks(range.min, range.max);
+  }
+
+  const xTicks = createAxisTicks(rangeX, props.xAxis.isTime);
+  const yTicks = createAxisTicks(rangeY, props.yAxis.isTime);
+
+  function coordinateToLogarithmic(value: number, range: Range): number {
+    return (
+      (Math.log(value) - Math.log(range.min)) /
+      (Math.log(range.max) - Math.log(range.min))
+    );
+  }
+
+  function toLogX(val: number): number {
+    return coordinateToLogarithmic(val, rangeX) * plotAreaWidth;
+  }
+
+  function toLogY(val: number): number {
+    return -coordinateToLogarithmic(val, rangeY) * plotAreaHeight;
+  }
+
+  const yAxisTitleWidth = 20;
+  const yAxisTickCaptionMaxWidth = 100;
+  const axisTickLength = 5;
+  const axisLineWidth = 1;
+  const xLeftMargin =
+    yAxisTitleWidth + yAxisTickCaptionMaxWidth + axisTickLength + axisLineWidth;
+  const xRightMargin = 160; // to show tooltips on the right hand side. If we can move tooltips dynamically, we can get rid of this.
+
+  const axisTitleHeight = 20;
+  const xAxisTickCaptionMaxHeight = 16;
+  const yMargin =
+    axisTitleHeight +
+    xAxisTickCaptionMaxHeight +
+    axisTickLength +
+    axisLineWidth;
+
+  const svgWidth = 960;
+  const svgViewBoxWidthPadding = 50;
+  const svgHeight = 480;
+  const svgViewBoxHeightPadding = 10;
+  const svgXMin = -xLeftMargin;
+
+  const plotAreaWidth = svgWidth - xLeftMargin - xRightMargin;
+  const plotAreaHeight = svgHeight - yMargin;
+
+  const viewBox = `${svgXMin} ${-plotAreaHeight - svgViewBoxHeightPadding} ${
+    svgWidth + svgViewBoxWidthPadding
+  } ${svgHeight + svgViewBoxHeightPadding}`;
+
+  const yAxisTextPaddingFromTicks = 5;
+  const yAxisTextYPadding = 4;
+
+  function renderTooltip(
+    topDiv: HTMLDivElement,
+    point: SVGCircleElement,
+    tooltip: HTMLDivElement,
+  ) {
+    const label = point.getAttribute("data-label");
+    tooltip.textContent = label;
+    const halfWidth = tooltip.offsetWidth / 2;
+    const pointRect = point.getBoundingClientRect();
+    const centerY = (pointRect.top + pointRect.bottom) / 2;
+    const centerX = (pointRect.left + pointRect.right) / 2;
+    const divRect = topDiv.getBoundingClientRect();
+    tooltip.style.left = `${centerX - divRect.left - halfWidth}px`;
+    tooltip.style.top = `${centerY - divRect.top + 12}px`;
+    tooltip.style.visibility = "visible";
+  }
+
+  function onPointMouseEvent(ev: MouseEvent, eventType: string) {
+    // Ensure we have a point as the target
+    if (!(ev.target instanceof SVGCircleElement)) return;
+    const target = ev.target as SVGCircleElement;
+    if (!target.classList.contains("qs-scatterChart-point")) return;
+
+    // Get the div enclosing the chart, and the popup child of it.
+    const topDiv = target.closest("div") as HTMLDivElement;
+    const popup = topDiv.querySelector(
+      ".qs-scatterChart-tooltip",
+    ) as HTMLDivElement;
+
+    switch (eventType) {
+      case "over":
+        {
+          renderTooltip(topDiv, target, popup);
+        }
+        break;
+      case "out":
+        popup.style.visibility = "hidden";
+        break;
+      case "click":
+        {
+          if (target.classList.contains("qs-scatterChart-point-selected")) {
+            // Clicked on the already selected point, so delete the point/row
+            props.onPointSelected(-1, 0);
+          } else {
+            const index = JSON.parse(target.getAttribute("data-index")!);
+            props.onPointSelected(index[0], index[1]);
+          }
+        }
+        break;
+      default:
+        console.error("Unknown event type: ", eventType);
+    }
+  }
+
+  function getSelectedPointData() {
+    if (!props.selectedPoint) return null;
+    const series = props.data[props.selectedPoint[0]];
+    const item = series.items[props.selectedPoint[1]];
+    return { ...item, color: series.color };
+  }
+  const selectedPoint = getSelectedPointData();
+
+  // Need to render first to get the element layout to position the tooltip
+  useEffect(() => {
+    if (!selectedTooltipDiv.current) return;
+    if (!props.selectedPoint) {
+      selectedTooltipDiv.current.style.visibility = "hidden";
+    } else {
+      // Locate the selected point and put the tooltip under it
+      const topDiv = selectedTooltipDiv.current.parentElement as HTMLDivElement;
+      const selectedPoint = topDiv?.querySelector(
+        ".qs-scatterChart-point-selected",
+      ) as SVGCircleElement;
+      if (!selectedPoint) return;
+      renderTooltip(topDiv, selectedPoint, selectedTooltipDiv.current);
+    }
+  });
+
+  // The mouse events (over, out, and click) bubble, so put the hanlders on the
+  // SVG element and check the target element in the handler.
+  return (
+    <div style="position: relative">
+      <svg
+        style="margin-top: 12px"
+        viewBox={viewBox}
+        width={svgWidth}
+        height={svgHeight}
+        onMouseOver={(ev) => onPointMouseEvent(ev, "over")}
+        onMouseOut={(ev) => onPointMouseEvent(ev, "out")}
+        onClick={(ev) => onPointMouseEvent(ev, "click")}
+      >
+        <line
+          class="qs-scatterChart-axis"
+          x1="0"
+          y1="0"
+          x2={plotAreaWidth}
+          y2="0"
+        />
+
+        {xTicks.map((tick) => {
+          return (
+            <>
+              <line
+                y1="1"
+                y2={axisTickLength}
+                x1={toLogX(tick.value)}
+                x2={toLogX(tick.value)}
+                class="qs-scatterChart-tick-line"
+              />
+              <text
+                y={axisTickLength + xAxisTickCaptionMaxHeight}
+                x={toLogX(tick.value)}
+                class="qs-scatterChart-x-tick-text"
+              >
+                {tick.label}
+              </text>
+            </>
+          );
+        })}
+
+        <line
+          class="qs-scatterChart-axis"
+          x1="0"
+          y1="0"
+          x2="0"
+          y2={-svgHeight}
+        />
+
+        {yTicks.map((tick) => {
+          return (
+            <>
+              <line
+                x1="0"
+                x2={-axisTickLength}
+                y1={toLogY(tick.value)}
+                y2={toLogY(tick.value)}
+                class="qs-scatterChart-tick-line"
+              />
+              <text
+                x={-axisTickLength - yAxisTextPaddingFromTicks}
+                y={toLogY(tick.value) + yAxisTextYPadding}
+                class="qs-scatterChart-y-tick-text"
+              >
+                {tick.label}
+              </text>
+            </>
+          );
+        })}
+
+        <text
+          x={plotAreaWidth / 2}
+          y={yMargin}
+          class="qs-scatterChart-x-axisTitle"
+        >
+          {props.xAxis.label} (logarithmic)
+        </text>
+
+        <text
+          x={xLeftMargin - axisTitleHeight}
+          y={plotAreaHeight / 2}
+          class="qs-scatterChart-y-axisTitle"
+        >
+          {props.yAxis.label} (logarithmic)
+        </text>
+
+        <text
+          class="qs-scatterChart-watermark"
+          x={xLeftMargin - axisTitleHeight}
+          y={-svgHeight + yMargin}
+        >
+          Created with Azure Quantum Resource Estimator
+        </text>
+        <g>
+          {props.data.map((series, seriesIdx) => {
+            return series.items.map((plot, plotIdx) => {
+              return (
+                <circle
+                  data-index={JSON.stringify([seriesIdx, plotIdx])}
+                  data-label={plot.label}
+                  class="qs-scatterChart-point qs-scatterChart-hover"
+                  cx={toLogX(plot.x)}
+                  cy={toLogY(plot.y)}
+                  stroke={series.color}
+                />
+              );
+            });
+          })}
+        </g>
+        {
+          // Render the selected point last, so it's always on top of the others
+          selectedPoint ? (
+            <circle
+              class="qs-scatterChart-point qs-scatterChart-point-selected"
+              data-label={selectedPoint.label}
+              cx={toLogX(selectedPoint.x)}
+              cy={toLogY(selectedPoint.y)}
+              stroke={selectedPoint.color}
+            />
+          ) : null
+        }
+      </svg>
+      <div class="qs-scatterChart-selectedInfo" ref={selectedTooltipDiv}></div>
+      <div class="qs-scatterChart-tooltip"></div>
+    </div>
+  );
+}

package/ux/spaceChart.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { ReData } from "./reTable.js";
+import { SingleEstimateResult } from "./data.js";
 
 function getPieSegment(
   x: number,
@@ -26,7 +26,7 @@ function getPieSegment(
   return d;
 }
 
-export function SpaceChart(props: { estimatesData: ReData }) {
+export function SpaceChart(props: { estimatesData: SingleEstimateResult }) {
   const breakdown = props.estimatesData.physicalCounts.breakdown;
 
   // The values to be shown on the pie chart

package/ux/tsconfig.json

@@ -4,7 +4,6 @@
     "target": "ES2020",
     "noEmit": true,
     "lib": ["DOM", "ES2020"],
-    "rootDir": ".",
     "strict": true /* enable all strict type-checking options */,
     "jsx": "react-jsx",
     "jsxImportSource": "preact",

package/dist/vsdiagnostic.d.ts

@@ -1,19 +0,0 @@
-import { type VSDiagnostic } from "../lib/web/qsc_wasm.js";
-export { type VSDiagnostic } from "../lib/web/qsc_wasm.js";
-/**
- * @param positions - An array of utf-8 code unit indexes to map to utf-16 code unit indexes
- * @param source - The source code to do the mapping on
- * @returns An object where the keys are the utf-8 index and the values are the utf-16 index
- */
-export declare function mapUtf16UnitsToUtf8Units(positions: Array<number>, source: string): {
-    [index: number]: number;
-};
-/**
- * @param positions - An array of utf-8 code unit indexes to map to utf-16 code unit indexes
- * @param source - The source code to do the mapping on
- * @returns An object where the keys are the utf-8 index and the values are the utf-16 index
- */
-export declare function mapUtf8UnitsToUtf16Units(positions: Array<number>, source: string): {
-    [index: number]: number;
-};
-export declare function mapDiagnostics(diags: VSDiagnostic[], code: string): VSDiagnostic[];