qsharp-lang 1.0.23-dev → 1.0.25-dev

package/ux/resultsTable.tsx

@@ -0,0 +1,385 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useRef, useState } from "preact/hooks";
+
+export type CellValue = string | number | { value: string; sortBy: number };
+
+// Note: column 0 is expected to be unique amongst all rows
+export function ResultsTable(props: {
+  columnNames: string[];
+  rows: CellValue[][];
+  initialColumns: number[];
+  ensureSelected: boolean;
+  onRowSelected(rowId: string): void;
+  onRowDeleted(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("");
+
+  if (!selectedRow && props.ensureSelected && props.rows.length > 0) {
+    const rowId = props.rows[0][0].toString();
+    setSelectedRow(rowId);
+    props.onRowSelected(rowId);
+  }
+
+  // Use to track the column being dragged
+  const draggingCol = useRef("");
+
+  /*
+  Note: Drag and drop events can occur faster than preact reconciles state.
+  This causes challenges where one event will set state, and the next event
+  that needs to use the latest state will still see old state.
+
+  So don't apply state changes in the drag and drop handlers. Instead, set
+  styles directly, and just update state if the 'drop' event changes column
+  order.
+  */
+
+  function onDragStart(ev: DragEvent) {
+    if (!(ev.target instanceof HTMLElement)) return;
+    const colid = ev.target.closest("th")?.dataset["colid"];
+    draggingCol.current = colid!;
+    ev.dataTransfer!.dropEffect = "move";
+  }
+
+  function onDragEnter(ev: DragEvent) {
+    // Get the column id of the column being entered
+    if (!(ev.target instanceof HTMLElement)) return;
+    const thisColId = ev.target.closest("th")?.dataset["colid"];
+    if (!thisColId || !draggingCol.current) return;
+
+    // If this column is different to the column being dragged, add the CSS class
+    if (draggingCol.current !== thisColId) {
+      ev.preventDefault();
+      ev.dataTransfer!.dropEffect = "move";
+      ev.target
+        .closest("table")!
+        .querySelectorAll(`[data-colid="${thisColId}"]`)
+        .forEach((elem) => elem.classList.add("qs-resultsTable-dragEnter"));
+    }
+  }
+
+  function onDragOver(ev: DragEvent) {
+    if (!(ev.target instanceof HTMLElement)) return;
+    const thisColId = ev.target.closest("th")?.dataset["colid"];
+    if (!thisColId || !draggingCol.current) return;
+
+    // If dragging something over a different column, allow the drop
+    if (draggingCol.current !== thisColId) {
+      ev.dataTransfer!.dropEffect = "move";
+      ev.preventDefault();
+    }
+  }
+
+  function onDragLeave(ev: DragEvent) {
+    // Remove the CSS class from the column being left
+    if (!(ev.target instanceof HTMLElement)) return;
+    const thisColId = ev.target.closest("th")?.dataset["colid"];
+    if (!thisColId) return;
+
+    ev.target
+      .closest("table")!
+      .querySelectorAll(`[data-colid="${thisColId}"]`)
+      .forEach((elem) => elem.classList.remove("qs-resultsTable-dragEnter"));
+    ev.preventDefault();
+  }
+
+  function onDrop(ev: DragEvent) {
+    if (!(ev.target instanceof HTMLElement)) return;
+    const thisColId = ev.target.closest("th")?.dataset["colid"];
+    if (!thisColId) return;
+
+    if (draggingCol.current) {
+      moveColumn(parseInt(draggingCol.current), parseInt(thisColId));
+      ev.preventDefault();
+    }
+  }
+
+  function onDragEnd(ev: DragEvent) {
+    // Called regardless of how dragging ends
+    // ev.target is the source element
+    // Just remove any dragEnter classes from cells that may remain
+    (ev.target as HTMLElement)
+      .closest("table")!
+      .querySelectorAll(`th, td`)
+      .forEach((elem) => elem.classList.remove("qs-resultsTable-dragEnter"));
+    draggingCol.current = "";
+  }
+
+  function moveColumn(oldIdx: number, newIdx: number) {
+    // Locate the indexes in the array where the column idx is
+    const arrIdxOld = showColumns.indexOf(oldIdx);
+    const arrIdxNew = showColumns.indexOf(newIdx);
+
+    const newColumns = [...showColumns];
+    const removed = newColumns.splice(arrIdxOld, 1);
+    newColumns.splice(arrIdxNew, 0, ...removed);
+    setShowColumns(newColumns);
+  }
+
+  function onSort(ev: MouseEvent) {
+    if (!(ev.currentTarget instanceof HTMLTableCellElement)) return;
+    const thisCol = ev.currentTarget.dataset["colid"];
+
+    if (sortColumn && thisCol === sortColumn.columnId.toString()) {
+      // Toggle the sort order
+      setSortColumn({
+        columnId: sortColumn.columnId,
+        ascending: !sortColumn.ascending,
+      });
+    } else {
+      // Set the sort column
+      setSortColumn({
+        columnId: parseInt(thisCol!),
+        ascending: true,
+      });
+    }
+  }
+
+  function getSortedRows(rows: CellValue[][]) {
+    if (!sortColumn) return rows;
+
+    const colIdx = sortColumn.columnId;
+    const ascending = sortColumn.ascending;
+
+    const sortedRows = [...rows];
+    sortedRows.sort((a, b) => {
+      const aVal = a[colIdx];
+      const bVal = b[colIdx];
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return ascending ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+      } else if (typeof aVal === "number" && typeof bVal === "number") {
+        return ascending ? aVal - bVal : bVal - aVal;
+      } else if (typeof aVal === "object" && typeof bVal === "object") {
+        return ascending
+          ? aVal.sortBy - bVal.sortBy
+          : bVal.sortBy - aVal.sortBy;
+      } else {
+        return 0;
+      }
+    });
+
+    return sortedRows;
+  }
+
+  function getCellStr(col: CellValue) {
+    if (typeof col === "object") {
+      return col.value;
+    } else if (typeof col === "number") {
+      return col.toLocaleString();
+    } else {
+      return col || "";
+    }
+  }
+
+  function rowClicked(rowId: string) {
+    if (selectedRow === rowId && props.ensureSelected) return;
+
+    const newSelectedRow = selectedRow === rowId ? "" : rowId;
+    setSelectedRow(newSelectedRow);
+    props.onRowSelected(newSelectedRow);
+  }
+
+  function onClickRowMenu(ev: MouseEvent, rowid: string) {
+    ev.stopPropagation();
+    if (showRowMenu === rowid) {
+      setShowRowMenu("");
+    } else {
+      setShowRowMenu(rowid!);
+    }
+  }
+
+  function onClickColumnMenu(ev: MouseEvent) {
+    ev.stopPropagation();
+    setShowRowMenu("");
+    setShowColumnMenu(!showColumnMenu);
+  }
+
+  function getColumnList() {
+    return props.columnNames.map((name, idx) => ({
+      name,
+      idx,
+      show: showColumns.includes(idx),
+    }));
+  }
+
+  function toggleColumn(idx: number) {
+    const newColumns = [...showColumns];
+    const arrIdx = newColumns.indexOf(idx);
+    if (arrIdx === -1) {
+      // Not currently showing, need to add it
+      if (idx > newColumns.length) {
+        // The column position is greater than the number of columns currently showing
+        // So just add to the end
+        newColumns.push(idx);
+      } else {
+        // Insert at the correct position
+        newColumns.splice(idx, 0, idx);
+      }
+    } else {
+      newColumns.splice(arrIdx, 1);
+    }
+    setShowColumns(newColumns);
+  }
+
+  function deleteRow(e: MouseEvent, rowId: string) {
+    e.stopPropagation();
+    // Clear out any menus or selections for the row if needed
+    setShowRowMenu("");
+    if (selectedRow === rowId) {
+      setSelectedRow("");
+      props.onRowSelected("");
+    }
+    props.onRowDeleted(rowId);
+  }
+
+  return (
+    <table class="qs-resultsTable-sortedTable">
+      <thead>
+        <tr>
+          <th>
+            <div style="position: relative">
+              <svg
+                width="16"
+                height="16"
+                style="position: relative;"
+                onClick={onClickColumnMenu}
+              >
+                <rect x="1" y="3.5" width="14" height="2" fill="black" />
+                <rect
+                  x="1"
+                  y="3"
+                  width="14"
+                  height="12"
+                  stroke="gray"
+                  stroke-width="1"
+                  fill="none"
+                  rx="2"
+                />
+                <path
+                  stroke="gray"
+                  stroke-width="1"
+                  d="M4.5,3 V15 M8,3 V15 M11.5,3 V15"
+                />
+              </svg>
+              <div
+                class={
+                  showColumnMenu
+                    ? "qs-resultsTable-columnMenu qs-resultsTable-showColumnMenu"
+                    : "qs-resultsTable-columnMenu"
+                }
+                style="position: absolute; top: 16; left: 0;"
+              >
+                {getColumnList().map((elem) => (
+                  <div
+                    width="100px"
+                    height="20px"
+                    class={
+                      elem.show
+                        ? "qs-resultsTable-columnSelected"
+                        : "qs-resultsTable-menuItem"
+                    }
+                    onClick={() => toggleColumn(elem.idx)}
+                  >
+                    {elem.name}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </th>
+          {showColumns.map((idx) => {
+            const isSortColumn = sortColumn?.columnId === idx;
+            return (
+              <th onClick={onSort} data-colid={idx.toString()}>
+                <span
+                  class={
+                    isSortColumn
+                      ? "qs-resultsTable-sortHeaderCell"
+                      : "qs-resultsTable-headerCell"
+                  }
+                  draggable
+                  onDragStart={onDragStart}
+                  onDragEnter={onDragEnter}
+                  onDragOver={onDragOver}
+                  onDragLeave={onDragLeave}
+                  onDragEnd={onDragEnd}
+                  onDrop={onDrop}
+                >
+                  {props.columnNames[idx]}
+                </span>
+                {isSortColumn ? (
+                  <svg
+                    width="16"
+                    height="16"
+                    style={`transform: rotate(${
+                      sortColumn!.ascending ? "0" : "180"
+                    }deg)`}
+                  >
+                    <polygon fill="gray" points="2,10 8,4 14,10" />
+                  </svg>
+                ) : null}
+              </th>
+            );
+          })}
+        </tr>
+      </thead>
+      <tbody>
+        {getSortedRows(props.rows).map((row) => {
+          const rowId = row[0].toString();
+          return (
+            <tr
+              onClick={() => rowClicked(rowId)}
+              data-rowid={rowId}
+              class={
+                rowId === selectedRow
+                  ? "qs-resultsTable-sortedTableSelectedRow"
+                  : undefined
+              }
+            >
+              <td>
+                <div
+                  style="position: relative"
+                  onClick={(e) => onClickRowMenu(e, rowId)}
+                >
+                  <svg width="16" height="16" style="position: relative;">
+                    <path
+                      stroke-width="1.5"
+                      stroke="gray"
+                      stroke-linecap="round"
+                      d="M4,5 h8 M4,8 h8 M4,11 h8"
+                    />
+                  </svg>
+                  {showRowMenu === rowId ? (
+                    <div
+                      class="qs-resultsTable-showColumnMenu"
+                      style="top: 16px; left: 0px;"
+                    >
+                      <div
+                        class="qs-resultsTable-menuItem"
+                        onClick={(e) => deleteRow(e, rowId)}
+                      >
+                        Delete
+                      </div>
+                    </div>
+                  ) : null}
+                </div>
+              </td>
+              {showColumns.map((idx) => {
+                return (
+                  <td data-colid={idx.toString()}>{getCellStr(row[idx])}</td>
+                );
+              })}
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}

package/ux/spaceChart.tsx

@@ -0,0 +1,148 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { ReData } from "./reTable.js";
+
+function getPieSegment(
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+  innerRadius: number,
+) {
+  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+  const startX = x + radius * Math.cos((Math.PI * startAngle) / 180);
+  const startY = y + radius * Math.sin((Math.PI * startAngle) / 180);
+  const endX = x + radius * Math.cos((Math.PI * endAngle) / 180);
+  const endY = y + radius * Math.sin((Math.PI * endAngle) / 180);
+  const innerStartX = x + innerRadius * Math.cos((Math.PI * startAngle) / 180);
+  const innerStartY = y + innerRadius * Math.sin((Math.PI * startAngle) / 180);
+  const innerEndX = x + innerRadius * Math.cos((Math.PI * endAngle) / 180);
+  const innerEndY = y + innerRadius * Math.sin((Math.PI * endAngle) / 180);
+  const d =
+    `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY} ` +
+    `L ${innerEndX} ${innerEndY} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStartX} ${innerStartY} Z`;
+  return d;
+}
+
+export function SpaceChart(props: { estimatesData: ReData }) {
+  const breakdown = props.estimatesData.physicalCounts.breakdown;
+
+  // The values to be shown on the pie chart
+  const physicalQubitsAlgorithm = breakdown.physicalQubitsForAlgorithm;
+  const physicalQubitsTFactory = breakdown.physicalQubitsForTfactories;
+
+  // TO CHECK: Divide by 0 concern here? Is there any (valid) algorithm that could
+  // be 0 physical qubits?
+  const percentQubitsAlgorithm =
+    physicalQubitsAlgorithm /
+    (physicalQubitsAlgorithm + physicalQubitsTFactory);
+  const breakAngleRaw = 360 * percentQubitsAlgorithm;
+
+  // The pie chart doesn't render correctly if the angle is 0 or 360
+  const breakAngle =
+    breakAngleRaw >= 360 ? 359.9 : breakAngleRaw <= 0 ? 0.1 : breakAngleRaw;
+
+  const numTFactories = breakdown.numTfactories;
+  const numQubitsPerTFactory = Math.round(
+    physicalQubitsTFactory / numTFactories,
+  );
+
+  return (
+    <div style="display: flex; flex-wrap: wrap; margin-top: 8px;">
+      <svg
+        class="qs-widget-spaceChart"
+        width="400"
+        height="400"
+        viewBox="50 0 450 450"
+        id="pieChart"
+      >
+        <path
+          d={getPieSegment(250, 185, 180, 0, breakAngle, 120)}
+          fill="var(--vscode-charts-yellow, yellow)"
+          stroke="white"
+        ></path>
+        <path
+          d={getPieSegment(250, 185, 180, breakAngle, 360, 120)}
+          fill="var(--vscode-charts-blue, blue)"
+          stroke="white"
+        ></path>
+        <text x="250" y="180" text-anchor="middle" font-size="16">
+          Total physical qubits
+        </text>
+        <text x="250" y="220" text-anchor="middle" font-size="32">
+          {props.estimatesData.physicalCountsFormatted.physicalQubits}
+        </text>
+        <rect
+          x="125"
+          y="400"
+          width="25"
+          height="25"
+          fill="var(--vscode-charts-yellow, yellow)"
+          stroke="white"
+          stroke-width="1"
+        />
+        <text x="155" y="408" text-anchor="start" font-size="12">
+          Algorithm qubits
+        </text>
+        <text x="155" y="425" text-anchor="start" font-size="16">
+          {physicalQubitsAlgorithm.toLocaleString()}
+        </text>
+        <rect
+          x="275"
+          y="400"
+          width="25"
+          height="25"
+          fill="var(--vscode-charts-blue, blue)"
+          stroke="white"
+          stroke-width="1"
+        />
+        <text x="305" y="408" text-anchor="start" font-size="12">
+          T factory qubits
+        </text>
+        <text x="305" y="425" text-anchor="start" font-size="16">
+          {physicalQubitsTFactory.toLocaleString()}
+        </text>
+      </svg>
+      <div class="spaceReport">
+        <div class="spaceReportHeader">Physical resource estimates</div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">Total physical qubits</div>
+          <div>
+            {props.estimatesData.physicalCounts.physicalQubits.toLocaleString()}
+          </div>
+        </div>
+        <div class="spaceReportHeader">T factory parameters</div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">Physical T factory qubits</div>
+          <div>{breakdown.physicalQubitsForTfactories.toLocaleString()}</div>
+        </div>
+        <div class="spaceReportHeader">Resource estimation breakdown</div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">T factory copies</div>
+          <div>{breakdown.numTfactories.toLocaleString()}</div>
+        </div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">Physical qubits per T factory</div>
+          <div>{numQubitsPerTFactory.toLocaleString()}</div>
+        </div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">Physical algorithmic qubits</div>
+          <div>{physicalQubitsAlgorithm.toLocaleString()}</div>
+        </div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">Logical algorithmic qubits</div>
+          <div>{breakdown.algorithmicLogicalQubits.toLocaleString()}</div>
+        </div>
+        <div class="spaceReportHeader">Logical qubit parameters</div>
+        <div class="spaceReportRow">
+          <div class="spaceDetailText">Physical qubits</div>
+          <div>
+            {props.estimatesData.logicalQubit.physicalQubits.toLocaleString()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ux/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "target": "ES2020",
+    "noEmit": true,
+    "lib": ["DOM", "ES2020"],
+    "rootDir": ".",
+    "strict": true /* enable all strict type-checking options */,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}