qsharp-lang 1.25.2-dev → 1.25.3-dev

package/ux/atoms/layout.ts

@@ -4,17 +4,59 @@
 import { appendChildren, createSvgElements, setAttributes } from "./utils.js";
 
 // Zones will be rendered from top to bottom in array order
+// Supports both old format (rows count) and new format (rowStart/rowEnd)
+type ZoneDataInput = {
+  title: string;
+  kind: "register" | "interaction" | "measurement";
+} & (
+  | { rows: number; rowStart?: never; rowEnd?: never }
+  | { rowStart: number; rowEnd: number; rows?: never }
+);
+
+// Normalized internal format always uses rowStart/rowEnd
 type ZoneData = {
   title: string;
-  rows: number;
+  rowStart: number;
+  rowEnd: number;
   kind: "register" | "interaction" | "measurement";
 };
 
 export type ZoneLayout = {
   cols: number;
-  zones: ZoneData[];
+  zones: ZoneDataInput[];
+  // The instructions may assume certain columns are missing, but we don't render that visually.
+  // e.g. if `skipCols: [0,9]` was provided, then a `move(0,1)` would actually move to visual column 0,
+  // and a `move(1,10)` would move to visual column 8.
+  skipCols?: number[];
 };
 
+// Normalize zone data to always use rowStart/rowEnd format
+function normalizeZones(zones: ZoneDataInput[]): ZoneData[] {
+  let nextRowStart = 0;
+  return zones.map((zone) => {
+    if ("rowStart" in zone && zone.rowStart !== undefined) {
+      // New format with explicit rowStart/rowEnd
+      return {
+        title: zone.title,
+        rowStart: zone.rowStart,
+        rowEnd: zone.rowEnd,
+        kind: zone.kind,
+      };
+    } else {
+      // Old format with rows count - convert to rowStart/rowEnd
+      const rowStart = nextRowStart;
+      const rowEnd = nextRowStart + zone.rows - 1;
+      nextRowStart = rowEnd + 1;
+      return {
+        title: zone.title,
+        rowStart,
+        rowEnd,
+        kind: zone.kind,
+      };
+    }
+  });
+}
+
 export type TraceData = {
   metadata: any;
   qubits: Array<[number, number]>;
@@ -51,25 +93,40 @@ export function fillQubitLocations(
   layout: ZoneLayout,
 ): Array<[number, number]> {
   const qubits: Array<[number, number]> = [];
-  let currRow = 0;
-  layout.zones.forEach((zone) => {
-    for (let row = 0; row < zone.rows; ++row) {
-      if (zone.kind === "register") {
+  const normalizedZones = normalizeZones(layout.zones);
+  normalizedZones.forEach((zone) => {
+    if (zone.kind === "register") {
+      for (let row = zone.rowStart; row <= zone.rowEnd; ++row) {
         for (let col = 0; col < layout.cols; ++col) {
-          qubits.push([currRow, col]);
+          qubits.push([row, col]);
         }
       }
-      ++currRow;
     }
   });
 
   return qubits;
 }
 
-function parseMove(op: string): { qubit: number; to: Location } | undefined {
+// Maps an instruction column to a visual column by accounting for skipped columns.
+// For each column in skipCols that is less than the instruction column, we subtract 1.
+function mapColumn(col: number, skipCols?: number[]): number {
+  if (!skipCols || skipCols.length === 0) {
+    return col;
+  }
+  const skippedBefore = skipCols.filter((c) => c < col).length;
+  return col - skippedBefore;
+}
+
+function parseMove(
+  op: string,
+  skipCols?: number[],
+): { qubit: number; to: Location } | undefined {
   const match = op.match(/move\((\d+), (\d+)\) (\d+)/);
   if (match) {
-    const to: Location = [parseInt(match[1]), parseInt(match[2])];
+    const to: Location = [
+      parseInt(match[1]),
+      mapColumn(parseInt(match[2]), skipCols),
+    ];
     return { qubit: parseInt(match[3]), to };
   }
   return undefined;
@@ -89,12 +146,39 @@ function parseGate(
   }
 }
 
+function parseZoneOp(
+  op: string,
+  layout: ZoneLayout,
+): { op: "zone_cz" | "zone_mresetz"; zoneIndex: number } | undefined {
+  // If we get a naked 'cz' or 'mresetz', treat it as a zone op for the first zone of the matching type
+  if (op === "cz") {
+    return {
+      op: "zone_cz",
+      zoneIndex: layout.zones.findIndex((z) => z.kind === "interaction"),
+    };
+  }
+  if (op === "mresetz") {
+    return {
+      op: "zone_mresetz",
+      zoneIndex: layout.zones.findIndex((z) => z.kind === "measurement"),
+    };
+  }
+  const match = op.match(/^(zone_cz|zone_mresetz)\s+(\d+)$/);
+  if (match) {
+    return {
+      op: match[1] as "zone_cz" | "zone_mresetz",
+      zoneIndex: parseInt(match[2]),
+    };
+  }
+  return undefined;
+}
+
 /*
 We want to build up a cache of the qubit location at each 'n' steps so that scrubbing is fast.
 Storing for each step is too large for the number of steps we want to handle. Also, the building
 of the cache can take a long time, so we want to chunk it up to avoid blocking the UI thread.
 */
-function TraceToGetLayoutFn(trace: TraceData) {
+function TraceToGetLayoutFn(trace: TraceData, skipCols?: number[]) {
   const STEP_SIZE = 100; // How many steps between each cache entry
 
   const cacheEntries = Math.ceil(trace.steps.length / STEP_SIZE);
@@ -116,7 +200,7 @@ function TraceToGetLayoutFn(trace: TraceData) {
     }
     // Extract the move operations in the prior step, to apply to the prior layout
     const moves = trace.steps[stepIndex - 1].ops
-      .map(parseMove)
+      .map((op) => parseMove(op, skipCols))
       .filter((x) => x != undefined);
 
     // Then apply them to the layout
@@ -221,7 +305,9 @@ export class Layout {
   height: number;
   scale: number = initialScale;
   qubits: Location[];
-  rowOffset: number[];
+  rowOffsetMap: Map<number, number>; // Maps absolute row numbers to visual Y offsets
+  normalizedZones: ZoneData[];
+  effectiveCols: number; // Visual column count after accounting for skipCols
   currentStep = 0;
   trackParent: SVGGElement;
   activeGates: SVGElement[] = [];
@@ -237,9 +323,15 @@ export class Layout {
   ) {
     if (!trace.qubits?.length) {
       trace.qubits = fillQubitLocations(layout);
+    } else if (layout.skipCols?.length) {
+      // Map the initial qubit column positions if skipCols is provided
+      trace.qubits = trace.qubits.map(([row, col]) => [
+        row,
+        mapColumn(col, layout.skipCols),
+      ]);
     }
     this.trace = trace;
-    this.getStepLayout = TraceToGetLayoutFn(trace);
+    this.getStepLayout = TraceToGetLayoutFn(trace, layout.skipCols);
 
     this.qubits = structuredClone(trace.qubits);
 
@@ -248,11 +340,20 @@ export class Layout {
       "svg",
     );
 
-    const totalRows = layout.zones.reduce((prev, curr) => prev + curr.rows, 0);
+    // Normalize zones to always use rowStart/rowEnd format
+    this.normalizedZones = normalizeZones(layout.zones);
+
+    // Calculate effective columns (visual count after skipping)
+    this.effectiveCols = layout.cols - (layout.skipCols?.length ?? 0);
+
+    const totalRows = this.normalizedZones.reduce(
+      (prev, curr) => prev + (curr.rowEnd - curr.rowStart + 1),
+      0,
+    );
 
     this.height =
       totalRows * qubitSize + zoneSpacing * (layout.zones.length + 1);
-    this.width = layout.cols * qubitSize + colPadding;
+    this.width = this.effectiveCols * qubitSize + colPadding;
 
     setAttributes(this.container, {
       viewBox: `-5 0 ${this.width} ${this.height}`,
@@ -261,21 +362,20 @@ export class Layout {
     });
 
     // Loop through the zones, calculating the row offsets, and rendering the zones
-    this.rowOffset = [];
+    // Maps absolute row numbers to visual Y offsets
+    this.rowOffsetMap = new Map();
     let nextOffset = zoneSpacing;
-    let nextRowNum = 0;
-    layout.zones.forEach((zone, index) => {
-      this.renderZone(index, nextOffset, nextRowNum);
-      for (let i = 0; i < zone.rows; ++i) {
-        this.rowOffset.push(nextOffset);
+    this.normalizedZones.forEach((zone, index) => {
+      this.renderZone(index, nextOffset);
+      for (let row = zone.rowStart; row <= zone.rowEnd; ++row) {
+        this.rowOffsetMap.set(row, nextOffset);
         nextOffset += qubitSize;
-        ++nextRowNum;
       }
       nextOffset += zoneSpacing; // Add spacing after each zone
     });
 
     const colNumOffset = nextOffset - 8;
-    this.renderColNums(layout.cols, colNumOffset);
+    this.renderColNums(this.effectiveCols, colNumOffset);
 
     // Put the track parent before the qubits, so the qubits render on top
     this.trackParent = createSvgElements("g")[0] as SVGGElement;
@@ -319,8 +419,9 @@ export class Layout {
     return this.trace.steps[step].ops;
   }
 
-  private renderZone(zoneIndex: number, offset: number, firstRowNum = 0) {
-    const zoneData = this.layout.zones[zoneIndex];
+  private renderZone(zoneIndex: number, offset: number) {
+    const zoneData = this.normalizedZones[zoneIndex];
+    const zoneRows = zoneData.rowEnd - zoneData.rowStart + 1;
     const g = createSvgElements("g")[0];
     setAttributes(g, {
       transform: `translate(0 ${offset})`,
@@ -333,32 +434,32 @@ export class Layout {
       setAttributes(rect, {
         x: "0",
         y: "0",
-        width: `${this.layout.cols * qubitSize}`,
-        height: `${zoneData.rows * qubitSize}`,
+        width: `${this.effectiveCols * qubitSize}`,
+        height: `${zoneRows * qubitSize}`,
         rx: `${zoneBoxCornerRadius}`,
       });
       appendChildren(g, [rect]);
 
       // Draw the lines between the rows
-      for (let i = 1; i < zoneData.rows; i++) {
+      for (let i = 1; i < zoneRows; i++) {
         const path = createSvgElements("path")[0];
         setAttributes(path, {
-          d: `M 0,${i * qubitSize} h${this.layout.cols * qubitSize}`,
+          d: `M 0,${i * qubitSize} h${this.effectiveCols * qubitSize}`,
         });
         appendChildren(g, [path]);
       }
       // Draw the lines between the columns
-      for (let i = 1; i < this.layout.cols; i++) {
+      for (let i = 1; i < this.effectiveCols; i++) {
         const path = createSvgElements("path")[0];
         setAttributes(path, {
-          d: `M ${i * qubitSize},0 v${zoneData.rows * qubitSize}`,
+          d: `M ${i * qubitSize},0 v${zoneRows * qubitSize}`,
         });
         appendChildren(g, [path]);
       }
     } else {
       // For the interaction zone draw each doublon
-      for (let row = 0; row < zoneData.rows; ++row) {
-        for (let i = 0; i < this.layout.cols; i += 2) {
+      for (let row = 0; row < zoneRows; ++row) {
+        for (let i = 0; i < this.effectiveCols; i += 2) {
           const rect = createSvgElements("rect")[0];
           setAttributes(rect, {
             x: `${i * qubitSize}`,
@@ -376,12 +477,12 @@ export class Layout {
       }
     }
 
-    // Number the rows
-    for (let i = 0; i < zoneData.rows; ++i) {
-      const rowNum = firstRowNum + i;
+    // Number the rows using the absolute row numbers from rowStart to rowEnd
+    for (let i = 0; i < zoneRows; ++i) {
+      const rowNum = zoneData.rowStart + i;
       const label = createSvgElements("text")[0];
       setAttributes(label, {
-        x: `${this.layout.cols * qubitSize + 5}`,
+        x: `${this.effectiveCols * qubitSize + 5}`,
         y: `${i * qubitSize + 5}`,
         class: "qs-atoms-label",
       });
@@ -435,16 +536,20 @@ export class Layout {
     setAttributes(g, {
       transform: `translate(0 ${offset})`,
     });
-    // Number the columns
-    for (let i = 0; i < cols; ++i) {
+    // Number the columns, showing original column numbers (skipping those in skipCols)
+    const skipCols = this.layout.skipCols ?? [];
+    let visualCol = 0;
+    for (let origCol = 0; visualCol < cols; ++origCol) {
+      if (skipCols.includes(origCol)) continue;
       const label = createSvgElements("text")[0];
       setAttributes(label, {
-        x: `${i * qubitSize + 5}`,
+        x: `${visualCol * qubitSize + 5}`,
         y: `5`,
         class: "qs-atoms-label",
       });
-      label.textContent = `${i}`;
+      label.textContent = `${origCol}`;
       appendChildren(g, [label]);
+      ++visualCol;
     }
     appendChildren(this.container, [g]);
   }
@@ -588,7 +693,27 @@ export class Layout {
   }
 
   getQubitRowOffset(row: number) {
-    return this.rowOffset[row];
+    const offset = this.rowOffsetMap.get(row);
+    if (offset === undefined) {
+      throw `Row ${row} not found in layout`;
+    }
+    return offset;
+  }
+
+  // Returns array of qubit indices that are currently in the specified zone
+  getQubitsInZone(zoneIndex: number): number[] {
+    const zone = this.normalizedZones[zoneIndex];
+    if (!zone) {
+      throw `Zone ${zoneIndex} not found`;
+    }
+    const qubitsInZone: number[] = [];
+    for (let i = 0; i < this.qubits.length; i++) {
+      const [row] = this.qubits[i];
+      if (row >= zone.rowStart && row <= zone.rowEnd) {
+        qubitsInZone.push(i);
+      }
+    }
+    return qubitsInZone;
   }
 
   getLocationCenter(row: number, col: number): [number, number] {
@@ -645,7 +770,7 @@ export class Layout {
       const ops = this.getOpsAtStep(qubitLocationIndex);
       let trailId = 0;
       ops.forEach((op) => {
-        const move = parseMove(op);
+        const move = parseMove(op, this.layout.skipCols);
         if (move) {
           // Apply the move animation
           const [oldX, oldY] = this.getQubitCenter(move.qubit);
@@ -718,11 +843,52 @@ export class Layout {
             });
           // TODO: Check if you can/should cancel when scrubbing
         } else {
-          // Wasn't a move, so render the gate
-          const gate = parseGate(op);
-          if (!gate) throw `Invalid gate: ${op}`;
-          const arg = gate.arg ? gate.arg.substring(0, 4) : undefined;
-          this.renderGateOnQubit(gate.qubit, gate.gate.toUpperCase(), arg);
+          // Check if it's a zone operation
+          const zoneOp = parseZoneOp(op, this.layout);
+          if (zoneOp) {
+            const qubitsInZone = this.getQubitsInZone(zoneOp.zoneIndex);
+            if (zoneOp.op === "zone_cz") {
+              // For zone_cz, render CZ gates on pairs of qubits in doublons
+              // Group qubits by their row, then pair adjacent columns
+              const qubitsByRow = new Map<number, number[]>();
+              for (const qubitIdx of qubitsInZone) {
+                const [row] = this.qubits[qubitIdx];
+                if (!qubitsByRow.has(row)) {
+                  qubitsByRow.set(row, []);
+                }
+                qubitsByRow.get(row)!.push(qubitIdx);
+              }
+              // For each row, find pairs in doublons (col 0-1, 2-3, 4-5, etc.)
+              for (const [, qubitsInRow] of qubitsByRow) {
+                // Sort by column
+                qubitsInRow.sort(
+                  (a, b) => this.qubits[a][1] - this.qubits[b][1],
+                );
+                for (let i = 0; i < qubitsInRow.length - 1; i++) {
+                  const q1 = qubitsInRow[i];
+                  const q2 = qubitsInRow[i + 1];
+                  const col1 = this.qubits[q1][1];
+                  const col2 = this.qubits[q2][1];
+                  // Check if they're in the same doublon (even-odd pair)
+                  if (Math.floor(col1 / 2) === Math.floor(col2 / 2)) {
+                    this.renderGateOnQubit(q1, "CZ");
+                    i++; // Skip the next qubit since we've paired it
+                  }
+                }
+              }
+            } else if (zoneOp.op === "zone_mresetz") {
+              // For zone_mresetz, render MZ gate on all qubits in the zone
+              for (const qubitIdx of qubitsInZone) {
+                this.renderGateOnQubit(qubitIdx, "MZ");
+              }
+            }
+          } else {
+            // Wasn't a move or zone op, so render the gate
+            const gate = parseGate(op);
+            if (!gate) throw `Invalid gate: ${op}`;
+            const arg = gate.arg ? gate.arg.substring(0, 4) : undefined;
+            this.renderGateOnQubit(gate.qubit, gate.gate.toUpperCase(), arg);
+          }
         }
       });
     }

package/ux/chem/index.tsx

@@ -5,8 +5,7 @@ import { useRef, useEffect, useState } from "preact/hooks";
 import { createViewer, GLViewer } from "3dmol";
 
 import "./style.css";
-
-const themeAttribute = "data-vscode-theme-kind";
+import { detectThemeChange } from "../themeObserver.js";
 
 export function MoleculeViewer(props: {
   moleculeData: string;
@@ -29,7 +28,7 @@ export function MoleculeViewer(props: {
         viewer.current ??
         createViewer(viewerRef.current, {
           backgroundColor: getComputedStyle(document.body).getPropertyValue(
-            "--vscode-editor-background",
+            "--qdk-host-background",
           ),
         });
       try {
@@ -44,22 +43,15 @@ export function MoleculeViewer(props: {
       viewer.current.zoomTo();
     }
 
-    // Respond to theme changes
-    const callback = (mutations: MutationRecord[]) => {
-      for (const mutation of mutations) {
-        if (mutation.attributeName === themeAttribute) {
-          const newBackgroundColor = getComputedStyle(
-            document.body,
-          ).getPropertyValue("--vscode-editor-background");
-          if (viewer.current) {
-            viewer.current.setBackgroundColor(newBackgroundColor, 1.0);
-            viewer.current.render();
-          }
-        }
+    detectThemeChange(document.body, () => {
+      const newBackgroundColor = getComputedStyle(
+        document.body,
+      ).getPropertyValue("--qdk-host-background");
+      if (viewer.current) {
+        viewer.current.setBackgroundColor(newBackgroundColor, 1.0);
+        viewer.current.render();
       }
-    };
-    const observer = new MutationObserver(callback);
-    observer.observe(document.body, { attributeFilter: [themeAttribute] });
+    });
   }, [props.moleculeData]);
 
   useEffect(() => {

package/ux/chem/style.css

@@ -47,8 +47,8 @@
 
 .view-option select,
 .view-option input[type="range"] {
-  color: var(--vscode-editor-foreground);
-  background-color: var(--vscode-editor-background);
+  color: var(--qdk-host-foreground);
+  background-color: var(--qdk-host-background);
 }
 
 #cube-dropdown-container {

package/ux/qdk-theme.css

@@ -68,6 +68,7 @@ body[data-jp-theme-light="true"],
 body[data-vscode-theme-kind="vscode-light"],
 body[data-vscode-theme-kind="vscode-high-contrast-light"] {
   /* Set any non-theme specific values here only */
+  --qdk-font-family: system-ui, "Segoe UI", "Roboto", sans-serif;
   --qdk-font-family-monospace: var(
     --vscode-editor-font-family,
     "Consolas",
@@ -88,6 +89,7 @@ body[data-vscode-theme-kind="vscode-high-contrast-light"] {
     var(--jp-widgets-color, #222)
   );
   --qdk-background-accent: #ddd;
+  --qdk-foreground-muted: #aaa;
 
   /* Used for text that must stand out on various backgrounds */
   --qdk-text-high-contrast: #000;
@@ -96,7 +98,7 @@ body[data-vscode-theme-kind="vscode-high-contrast-light"] {
   --qdk-widget-outline: #ccc;
 
   /* Use for menus */
-  --qdk-menu-fill: #ccc;
+  --qdk-menu-fill: #c4dbeb;
   --qdk-menu-fill-hover: #9cf;
   --qdk-menu-fill-selected: #7af;
 
@@ -105,6 +107,13 @@ body[data-vscode-theme-kind="vscode-high-contrast-light"] {
   --qdk-shape-fill-selected: #b5c5f2;
   --qdk-shape-stroke-selected: #587ddd;
   --qdk-shape-stroke-hover: #6b6b6b;
+
+  --qdk-gate-generic: #66d;
+  --qdk-gate-pair: #eae753;
+  --qdk-gate-measure: #822;
+  --qdk-gate-reset: #282;
+  --qdk-atom-fill: #0078d4;
+  --qdk-atom-trail: #fa0;
 }
 
 /* Set these variables on the body element if attributes indicate a dark theme choice */
@@ -122,6 +131,7 @@ body[data-vscode-theme-kind="vscode-high-contrast"] {
     var(--jp-widgets-color, #eee)
   );
   --qdk-background-accent: #333;
+  --qdk-foreground-muted: #666;
 
   /* Used for text that must stand out on various backgrounds */
   --qdk-text-high-contrast: #fff;
@@ -139,4 +149,11 @@ body[data-vscode-theme-kind="vscode-high-contrast"] {
   --qdk-shape-fill-selected: #ffd54f;
   --qdk-shape-stroke-selected: #ffecb3;
   --qdk-shape-stroke-hover: #c5c5c5;
+
+  --qdk-gate-generic: #ccf;
+  --qdk-gate-pair: #b91;
+  --qdk-gate-measure: #e88;
+  --qdk-gate-reset: #8e8;
+  --qdk-atom-fill: #9df;
+  --qdk-atom-trail: #fa0;
 }