qsharp-lang 1.22.4-dev → 1.22.5-dev

package/ux/atoms/utils.ts

@@ -0,0 +1,32 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// **** Helper functions for rendering SVG elements ****
+
+type StringMap = Record<string, string>;
+
+export function createSvgElements(...tags: string[]): SVGElement[] {
+  return tags.map((tag) =>
+    document.createElementNS("http://www.w3.org/2000/svg", tag),
+  );
+}
+
+export function setAttributes(el: SVGElement, attrs: StringMap) {
+  for (const key in attrs) el.setAttribute(key, attrs[key]);
+}
+
+export function appendChildren(parent: Element, children: Element[]) {
+  children.forEach((child) => parent.appendChild(child));
+}
+
+export function addChildWithClass(
+  parent: HTMLElement,
+  childTag: string,
+  className: string,
+): HTMLElement {
+  const parentDoc = parent.ownerDocument;
+  const child = parentDoc.createElement(childTag);
+  child.classList.add(className);
+  parent.appendChild(child);
+  return child;
+}

package/ux/chem/index.tsx

@@ -0,0 +1,191 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { useRef, useEffect, useState } from "preact/hooks";
+import { createViewer, GLViewer } from "3dmol";
+
+import "./style.css";
+
+const themeAttribute = "data-vscode-theme-kind";
+
+export function MoleculeViewer(props: {
+  moleculeData: string;
+  cubeData: { [key: string]: string };
+  isoValue?: number;
+}) {
+  // Holds reference to the viewer div and 3Dmol viewer object.
+  const viewerRef = useRef<HTMLDivElement>(null);
+  const viewer = useRef<GLViewer | null>(null);
+  const activeCubeData = useRef([] as any[]);
+
+  const [viewStyle, setViewStyle] = useState("Sphere");
+  const [isoval, setIsoval] = useState(props.isoValue || 0.02);
+  const [cubeKey, setCubeKey] = useState(Object.keys(props.cubeData)[0] || "");
+
+  // Runs after the DOM has been created. Create the 3Dmol viewer and adds the model.
+  useEffect(() => {
+    if (props.moleculeData && viewerRef.current) {
+      const molViewer =
+        viewer.current ??
+        createViewer(viewerRef.current, {
+          backgroundColor: getComputedStyle(document.body).getPropertyValue(
+            "--vscode-editor-background",
+          ),
+        });
+      try {
+        molViewer.clear(); // If the model is being replaced, clear the old one. Perhaps should get and update instead?
+        molViewer.addModel(props.moleculeData.trim(), "xyz", {
+          assignBonds: true,
+        });
+      } catch (error) {
+        console.error("Error adding model:", error);
+      }
+      viewer.current = molViewer;
+      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();
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(document.body, { attributeFilter: [themeAttribute] });
+  }, [props.moleculeData]);
+
+  useEffect(() => {
+    const currViewer = viewer.current;
+    if (!currViewer) {
+      return;
+    }
+
+    if (cubeKey && props.cubeData[cubeKey]) {
+      activeCubeData.current.forEach((voldata) => {
+        currViewer.removeShape(voldata);
+      });
+      activeCubeData.current = [];
+      const cubeData = props.cubeData[cubeKey];
+      activeCubeData.current.push(
+        currViewer.addVolumetricData(cubeData.trim(), "cube", {
+          isoval,
+          opacity: 1,
+          color: "red",
+        }),
+      );
+      activeCubeData.current.push(
+        currViewer.addVolumetricData(cubeData.trim(), "cube", {
+          isoval: -1 * isoval,
+          opacity: 1,
+          color: "green",
+        }),
+      );
+    }
+
+    if (viewStyle === "Sphere") {
+      currViewer.setStyle({}, { sphere: { scale: 0.3 }, stick: {} });
+    } else if (viewStyle === "Stick") {
+      currViewer.setStyle({}, { stick: { radius: 0.2 } });
+    } else if (viewStyle === "Line") {
+      currViewer.setStyle({}, { line: { linewidth: 5.0 } });
+    }
+    currViewer.render();
+
+    // Sometimes keys are added later. If that's the case, change the cubeKey to the first available.
+    if (!cubeKey && Object.keys(props.cubeData).length > 0) {
+      setCubeKey(Object.keys(props.cubeData)[0]);
+    }
+  }, [viewStyle, isoval, cubeKey, props.moleculeData, props.cubeData]);
+
+  // React to changes in the initial isovalue prop, just in case the widget updates state in parts.
+  useEffect(() => {
+    setIsoval(props.isoValue || 0.02);
+  }, [props.isoValue]);
+
+  return (
+    <div id="viewer-container">
+      <div
+        id="viewer"
+        ref={viewerRef}
+        style="width: 640px; height: 480px;"
+      ></div>
+
+      <div id="view-dropdown-container" class="view-option">
+        <label for="viewSelector">Visualization Style:</label>
+        <select
+          id="viewSelector"
+          onChange={(e) => {
+            const style = (e.target as HTMLSelectElement).value;
+            setViewStyle(style);
+          }}
+        >
+          <option value="Sphere">Sphere</option>
+          <option value="Stick">Stick</option>
+          <option value="Line">Line</option>
+        </select>
+      </div>
+      {cubeKey ? (
+        <>
+          <div id="cube-dropdown-container" class="view-option">
+            <label for="cubeSelector">Cube selection:</label>
+            <select
+              id="cubeSelector"
+              onChange={(e) => {
+                const key = (e.target as HTMLSelectElement).value;
+                setCubeKey(key);
+              }}
+            >
+              {Object.keys(props.cubeData).map((key) => (
+                <option value={key} selected={key === cubeKey}>
+                  {key}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div id="isoval-slider-container" class="view-option">
+            <label for="isovalSlider">Adjust isovalue:</label>
+            <input
+              type="range"
+              id="isovalSlider"
+              min="0.005"
+              max="0.1"
+              step="0.005"
+              value={isoval}
+              onInput={(e) => {
+                const new_isoval = parseFloat(
+                  (e.target as HTMLInputElement).value,
+                );
+                setIsoval(new_isoval);
+              }}
+            />
+            <input
+              type="number"
+              id="isovalInput"
+              min="0.005"
+              max="0.1"
+              step="0.001"
+              value={isoval}
+              onInput={(e) => {
+                const new_isoval = parseFloat(
+                  (e.target as HTMLInputElement).value,
+                );
+                if (!isNaN(new_isoval)) {
+                  setIsoval(new_isoval);
+                }
+              }}
+            />
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/ux/chem/style.css

@@ -0,0 +1,83 @@
+#viewer {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+#viewer-container {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  /* border: 1px solid gray; */
+}
+
+#viewer {
+  width: 100%;
+  height: 100%;
+}
+
+#view-dropdown-container {
+  position: absolute;
+  top: 10px; /* distance from bottom */
+  left: 10px; /* distance from right */
+  height: 20px;
+  padding: 10px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: system-ui;
+}
+
+#viewSelector {
+  padding-left: 4px;
+}
+
+.view-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.view-option label {
+  margin-right: 0;
+  white-space: nowrap;
+  min-width: 120px;
+}
+
+.view-option select,
+.view-option input[type="range"] {
+  color: var(--vscode-editor-foreground);
+  background-color: var(--vscode-editor-background);
+}
+
+#cube-dropdown-container {
+  position: absolute;
+  top: 40px; /* distance from bottom */
+  left: 10px; /* distance from right */
+  padding: 10px;
+  height: 20px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: system-ui;
+}
+
+#isoval-slider-container {
+  position: absolute;
+  top: 70px; /* distance from bottom */
+  left: 10px; /* distance from right */
+  padding: 10px;
+  height: 40px;
+  border-radius: 4px;
+  z-index: 10;
+  font-family: system-ui;
+}
+
+#isovalSlider {
+  width: 100px;
+  outline: none;
+}
+
+#isovalInput {
+  width: 64px;
+}

package/ux/circuit-vis/events.ts

@@ -170,11 +170,7 @@ class CircuitEvents {
           this.selectedOperation.controls != null &&
           this.selectedWire != null
         ) {
-          const controlIndex = this.selectedOperation.controls.findIndex(
-            (control) => control.qubit === this.selectedWire,
-          );
-          if (controlIndex !== -1)
-            this.selectedOperation.controls.splice(controlIndex, 1);
+          removeControl(this, this.selectedOperation, this.selectedWire);
         } else {
           // Otherwise, remove the selectedOperation
           removeOperation(this, selectedLocation);

package/ux/circuit-vis/formatters/gateFormatter.ts

@@ -164,7 +164,7 @@ const _zoomButton = (
   let { dataAttributes } = renderData;
   dataAttributes = dataAttributes || {};
 
-  const expanded = "expanded" in dataAttributes;
+  const expanded = dataAttributes["expanded"] == "true";
 
   const x = gateBoundingBoxX + 2;
   const y = gateBoundingBoxY + 2;

package/ux/circuit-vis/process.ts

@@ -213,7 +213,11 @@ const _opToRenderData = (
         ),
       }))
       .filter((col) => col.components.length > 0);
-    let childrenInstrs = processOperations(onZeroOps, registers);
+    let childrenInstrs = processOperations(
+      onZeroOps,
+      registers,
+      renderLocations,
+    );
     const zeroGates: GateRenderData[][] = childrenInstrs.renderDataArray;
     const zeroChildWidth: number = childrenInstrs.svgWidth;
 
@@ -225,7 +229,7 @@ const _opToRenderData = (
         ),
       }))
       .filter((col) => col.components.length > 0);
-    childrenInstrs = processOperations(onOneOps, registers);
+    childrenInstrs = processOperations(onOneOps, registers, renderLocations);
     const oneGates: GateRenderData[][] = childrenInstrs.renderDataArray;
     const oneChildWidth: number = childrenInstrs.svgWidth;
 
@@ -247,7 +251,11 @@ const _opToRenderData = (
     conditionalRender == ConditionalRender.AsGroup &&
     (children?.length || 0) > 0
   ) {
-    const childrenInstrs = processOperations(children!, registers);
+    const childrenInstrs = processOperations(
+      children!,
+      registers,
+      renderLocations,
+    );
     renderData.type = GateType.Group;
     renderData.children = childrenInstrs.renderDataArray;
     // _zoomButton function in gateFormatter.ts relies on
@@ -285,8 +293,8 @@ const _opToRenderData = (
   // Set gate width
   renderData.width = getGateWidth(renderData);
 
-  if (op.source && renderLocations) {
-    renderData.link = renderLocations([op.source]);
+  if (op.metadata?.source && renderLocations) {
+    renderData.link = renderLocations([op.metadata.source]);
   }
 
   // Extend existing data attributes with user-provided data attributes

package/ux/circuit-vis/sqore.ts

@@ -59,6 +59,7 @@ export type DrawOptions = {
 export class Sqore {
   circuit: Circuit;
   gateRegistry: GateRegistry = {};
+  renderDepth: number = this.options.renderDepth ?? 0;
   /**
    * Initializes Sqore object.
    *
@@ -106,7 +107,6 @@ export class Sqore {
     // Create copy of circuit to prevent mutation
     const _circuit: Circuit =
       circuit ?? JSON.parse(JSON.stringify(this.circuit));
-    const renderDepth = this.options.renderDepth || 0;
 
     // Assign unique locations to each operation
     _circuit.componentGrid.forEach((col, colIndex) =>
@@ -118,7 +118,7 @@ export class Sqore {
     // Render operations starting at given depth
     _circuit.componentGrid = this.selectOpsAtDepth(
       _circuit.componentGrid,
-      renderDepth,
+      this.renderDepth,
     );
 
     // If only one top-level operation, expand automatically:
@@ -129,7 +129,9 @@ export class Sqore {
       Object.prototype.hasOwnProperty.call(
         _circuit.componentGrid[0].components[0].dataAttributes,
         "location",
-      )
+      ) &&
+      _circuit.componentGrid[0].components[0].dataAttributes["expanded"] !==
+        "false"
     ) {
       const location: string =
         _circuit.componentGrid[0].components[0].dataAttributes["location"];
@@ -337,11 +339,11 @@ export class Sqore {
         } else {
           selectedCol.push(op);
         }
-        selectedOps.push({ components: selectedCol });
-        if (extraCols.length > 0) {
-          selectedOps.push(...extraCols);
-        }
       });
+      selectedOps.push({ components: selectedCol });
+      if (extraCols.length > 0) {
+        selectedOps.push(...extraCols);
+      }
     });
     return selectedOps;
   }
@@ -478,7 +480,7 @@ export class Sqore {
         // Collapse parent gate and its children
         if (opId.startsWith(parentLoc)) {
           op.conditionalRender = ConditionalRender.Always;
-          delete op.dataAttributes["expanded"];
+          op.dataAttributes["expanded"] = "false";
         }
       }),
     );

package/ux/index.ts

@@ -20,3 +20,5 @@ export { EstimatesOverview } from "./estimatesOverview.js";
 export { EstimatesPanel } from "./estimatesPanel.js";
 export { Circuit, CircuitPanel } from "./circuit.js";
 export { setRenderer, Markdown } from "./renderers.js";
+export { Atoms, type ZoneLayout, type TraceData } from "./atoms/index.js";
+export { MoleculeViewer } from "./chem/index.js";