qsharp-lang 1.22.4-dev → 1.22.5-dev

package/ux/atoms/index.css

@@ -0,0 +1,226 @@
+/* Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License. */
+
+/* Default colors, or theme set explicitly to light */
+/* data-vscode-theme-kind="vscode-dark" or "vscode-light" or "vscode-high-contrast" or "vscode-high-contrast-light" */
+:root,
+[data-theme="light"],
+[data-vscode-theme-kind="vscode-light"],
+[data-vscode-theme-kind="vscode-high-contrast-light"] {
+  --qs-atoms-primay-color: #222;
+  --qs-atoms-background-color: #eee;
+  --qs-atoms-qubitbox: #bbd;
+  --qs-atoms-qubit: #123;
+  --qs-atoms-label: #aaa;
+  --qs-atoms-gate: #66d;
+  --qs-atoms-gate-cz: #ec4;
+  --qs-atoms-gate-mz: #822;
+  --qs-atoms-gate-reset: #282;
+}
+/* User has set OS preference for dark (explict theme will override) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --qs-atoms-primay-color: #eee;
+    --qs-atoms-background-color: #222;
+    --qs-atoms-qubitbox: #446;
+    --qs-atoms-qubit: #9df;
+    --qs-atoms-label: #666;
+    --qs-atoms-gate: #ccf;
+    --qs-atoms-gate-cz: #b91;
+    --qs-atoms-gate-mz: #e88;
+    --qs-atoms-gate-reset: #8e8;
+  }
+}
+/* Explicit dark theme set (should match above dark preference values) */
+[data-theme="dark"],
+[data-vscode-theme-kind="vscode-dark"],
+[data-vscode-theme-kind="vscode-high-contrast"] {
+  --qs-atoms-primay-color: #eee;
+  --qs-atoms-background-color: #222;
+  --qs-atoms-qubitbox: #446;
+  --qs-atoms-qubit: #9df;
+  --qs-atoms-label: #666;
+  --qs-atoms-gate: #ccf;
+  --qs-atoms-gate-cz: #b91;
+  --qs-atoms-gate-mz: #e88;
+  --qs-atoms-gate-reset: #8e8;
+}
+
+.qs-atoms-app {
+  background-color: var(--qs-atoms-background-color);
+  color: var(--qs-atoms-primay-color);
+  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
+  box-sizing: border-box;
+  width: 600px;
+  border: 1px solid gray;
+  border-radius: 8px;
+  margin: auto;
+  margin-top: 24px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.qs-atoms-app:focus {
+  outline: none;
+}
+
+.qs-atoms-toolstrip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.qs-atoms-toolbar {
+  height: 28px;
+  user-select: none;
+}
+
+.qs-atoms-icon > circle {
+  stroke: var(--qs-atoms-primay-color);
+  stroke-width: 6;
+  fill: transparent;
+  cursor: pointer;
+}
+
+.qs-atoms-icon > .qs-atoms-info-dot {
+  fill: var(--qs-atoms-primay-color);
+  stroke: none;
+  pointer-events: none;
+}
+
+.qs-atoms-icon > circle:hover {
+  stroke-width: 10;
+}
+
+.qs-atoms-icon > path {
+  stroke: none;
+  fill: var(--qs-atoms-primay-color);
+  pointer-events: none;
+}
+
+.qs-atoms-icon > .qs-atoms-icon-line {
+  fill: none;
+  stroke-width: 16;
+  stroke: var(--qs-atoms-primay-color);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.qs-atoms-slider:focus {
+  outline: none;
+}
+
+.qs-atoms-step {
+  text-align: end;
+  margin-right: 20px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.qs-atoms-bigsmall {
+  margin-left: auto;
+}
+
+.qs-atoms-zones {
+  margin: 8px auto;
+}
+
+.qs-atoms-zone-text {
+  font-size: 8px;
+  font-family: system-ui;
+  fill: gray;
+  stroke-width: 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.qs-atoms-label {
+  font-size: 6px;
+  font-family: system-ui;
+  fill: var(--qs-atoms-label);
+  stroke-width: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  text-anchor: middle;
+  dominant-baseline: central;
+  width: 20px;
+}
+
+.qs-atoms-zonebox {
+  stroke: var(--qs-atoms-background-color);
+  stroke-width: 0.75;
+  fill: var(--qs-atoms-qubitbox);
+}
+
+.qs-atoms-qubit {
+  stroke: none;
+  fill: var(--qs-atoms-qubit);
+}
+
+.qs-atoms-qubit-trail-start {
+  stroke: gray;
+  stroke-width: 1px;
+  fill: var(--qs-atoms-qubitbox);
+  r: 3px;
+}
+
+.qs-atoms-qubit-trail {
+  stroke: gray;
+  stroke-width: 1px;
+  fill: none;
+  stroke-dasharray: 1, 1;
+}
+
+.qs-atoms-qubit-highlight {
+  stroke: orange;
+  stroke-width: 1px;
+}
+
+.qs-atoms-gate {
+  fill: var(--qs-atoms-gate);
+  stroke-width: 0;
+}
+
+.qs-atoms-gate-cz {
+  fill: var(--qs-atoms-gate-cz);
+}
+.qs-atoms-gate-mz {
+  fill: var(--qs-atoms-gate-mz);
+}
+
+.qs-atoms-gate-reset {
+  fill: var(--qs-atoms-gate-reset);
+}
+
+.qs-atoms-gate-text {
+  stroke-width: 0;
+  fill: var(--qs-atoms-background-color);
+  font-size: 5px;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  text-anchor: middle;
+  dominant-baseline: central;
+}
+
+.qs-atoms-gate-text-small {
+  font-size: 4px;
+}
+
+.qs-atoms-info-box {
+  position: absolute;
+  display: none;
+  left: 40px;
+  top: 50px;
+  border: 1px solid gray;
+  border-radius: 8px;
+  background-color: var(--qs-atoms-background-color);
+  color: var(--qs-atoms-primay-color);
+  padding: 16px;
+  width: 250px;
+}
+
+.qs-atoms-info-box-grid {
+  display: grid;
+  grid-template-columns: 50px 200px;
+  padding: 8px;
+}

package/ux/atoms/index.ts

@@ -0,0 +1,192 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import {
+  createPlayerControls,
+  createScrubberControls,
+  createZoomControls,
+} from "./controls.js";
+import "./index.css";
+import { Layout, type ZoneLayout, type TraceData } from "./layout.js";
+import { addChildWithClass } from "./utils.js";
+
+export type { TraceData, ZoneLayout };
+
+export function Atoms(
+  container: HTMLElement,
+  zoneLayout: ZoneLayout,
+  trace: TraceData,
+) {
+  // On first load, Python might still be syncing the underlying model, so just bail if required data is missing
+  if (!zoneLayout.zones?.length || !trace.steps?.length) return;
+
+  container.classList.add("qs-atoms-app");
+  const toolstrip = addChildWithClass(container, "div", "qs-atoms-toolstrip");
+
+  const zoomControls = createZoomControls();
+  const playerControls = createPlayerControls();
+  const scrubberControls = createScrubberControls();
+  scrubberControls.setRange(trace.steps.length);
+
+  toolstrip.appendChild(zoomControls);
+  toolstrip.appendChild(scrubberControls.element);
+  toolstrip.appendChild(playerControls);
+
+  // Render the layout
+  const zones = addChildWithClass(container, "div", "qs-atoms-zones");
+  const layout = new Layout(zoneLayout, trace);
+  zones.appendChild(layout.container);
+
+  scrubberControls.setNavHandler((step: number) => layout.gotoStep(step));
+
+  function setAppWidth() {
+    const newWidth = layout.width * layout.scale + 32;
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    newWidth > 600
+      ? (container.style.width = `${newWidth}px`)
+      : (container.style.width = "600px");
+  }
+
+  function onZoomIn() {
+    layout.zoomIn();
+    setAppWidth();
+  }
+
+  function onZoomOut() {
+    layout.zoomOut();
+    setAppWidth();
+  }
+
+  // Wire up the controls
+  container.tabIndex = 0;
+  container.addEventListener("keydown", (e) => {
+    switch (e.key) {
+      case "ArrowRight":
+        e.preventDefault();
+        e.stopPropagation();
+        scrubberControls.next();
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        e.stopPropagation();
+        scrubberControls.prev();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        e.stopPropagation();
+        onZoomIn();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        e.stopPropagation();
+        onZoomOut();
+        break;
+      case "f":
+        e.preventDefault();
+        e.stopPropagation();
+        layout.faster();
+        break;
+      case "s":
+        e.preventDefault();
+        e.stopPropagation();
+        layout.slower();
+        break;
+      case "p":
+        e.preventDefault();
+        e.stopPropagation();
+        onPlayPause();
+        break;
+      case "t":
+        e.preventDefault();
+        e.stopPropagation();
+        layout.cycleAnimation();
+        break;
+    }
+  });
+
+  const info = container.querySelector(
+    "[data-control='info']",
+  ) as SVGCircleElement;
+  const next = container.querySelector(
+    "[data-control='next']",
+  ) as SVGCircleElement;
+  const prev = container.querySelector(
+    "[data-control='prev']",
+  ) as SVGCircleElement;
+  const play = container.querySelector(
+    "[data-control='play']",
+  ) as SVGCircleElement;
+  const pause = container.querySelector(
+    "[data-control='pause']",
+  ) as SVGCircleElement;
+  const zoomIn = container.querySelector(
+    "[data-control='zoom-in']",
+  ) as SVGCircleElement;
+  const zoomOut = container.querySelector(
+    "[data-control='zoom-out']",
+  ) as SVGCircleElement;
+
+  let playTimer: any; // Different platforms have different types for setTimeout
+  function onPlayPause() {
+    // If it was playing, pause it
+    if (playTimer) {
+      pause.parentElement!.style.display = "none";
+      play.parentElement!.style.display = "inline";
+      clearTimeout(playTimer);
+      playTimer = undefined;
+      return;
+    }
+
+    // Else start playing
+    play.parentElement!.style.display = "none";
+    pause.parentElement!.style.display = "inline";
+
+    if (scrubberControls.isAtEnd()) scrubberControls.reset();
+
+    function onTimeout() {
+      if (scrubberControls.isAtEnd()) {
+        pause.parentElement!.style.display = "none";
+        play.parentElement!.style.display = "inline";
+        playTimer = undefined;
+      } else {
+        scrubberControls.next();
+        playTimer = setTimeout(onTimeout, layout.stepInterval);
+      }
+    }
+    playTimer = setTimeout(onTimeout, 0);
+  }
+
+  const infoBox = document.createElement("div");
+  infoBox.innerHTML = `
+  <b>Keyboard shortcuts</b>
+  <div class="qs-atoms-info-box-grid">
+    <div>Left</div><div>Step back</div>
+    <div>Right</div><div>Step forward</div>
+    <div>Up</div><div>Zoom in</div>
+    <div>Down</div><div>Zoom out</div>
+    <div>P</div><div>Play / Pause </div>
+    <div>F</div><div>Faster animation</div>
+    <div>S</div><div>Slower animation</div>
+    <div>T</div><div>Toggle animation type</div>
+  </div>
+  `;
+  infoBox.classList.add("qs-atoms-info-box");
+  container.appendChild(infoBox);
+
+  info.addEventListener("mouseover", () => {
+    infoBox.style.display = "block";
+  });
+  info.addEventListener("mouseout", () => {
+    infoBox.style.display = "none";
+  });
+
+  next.addEventListener("click", () => scrubberControls.next());
+  prev.addEventListener("click", () => scrubberControls.prev());
+  zoomIn.addEventListener("click", onZoomIn);
+  zoomOut.addEventListener("click", onZoomOut);
+
+  play.addEventListener("click", onPlayPause);
+  pause.addEventListener("click", onPlayPause);
+
+  setTimeout(onZoomOut, 16);
+}