))}
-
Samples (OpenQASM)
+
Tools
+
onSelected("bloch")}
+ >
+ Bloch sphere
+
+
Samples (OpenQASM)
{props.openqasmSamples.map((name) => (
+
+// Dedicated entry point for the Bloch sphere panel. Keeping this separate from
+// the shared webview.tsx bundle means three.js only lands in this chunk instead
+// of bloating the webview.js used by every other panel.
+
+const vscodeApi = acquireVsCodeApi();
+
+import { render } from "preact";
+import {
+ BlochSphere,
+ setRenderer,
+ detectThemeChange,
+ updateStyleSheetTheme,
+} from "qsharp-lang/ux";
+import "./webview.css";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - there are no types for this
+import mk from "@vscode/markdown-it-katex";
+import markdownIt from "markdown-it";
+const md = markdownIt("commonmark");
+md.use(mk, {
+ enableMathBlockInHtml: true,
+ enableMathInlineInHtml: true,
+});
+setRenderer((input: string) => md.render(input));
+
+window.addEventListener("load", main);
+
+function main() {
+ render(
, document.body);
+ detectThemeChange(document.body, (isDark: boolean) => {
+ updateStyleSheetTheme(
+ isDark,
+ "github-markdown",
+ /(light\.css)|(dark\.css)/,
+ "light.css",
+ "dark.css",
+ );
+ });
+ vscodeApi.postMessage({ command: "ready" });
+}
diff --git a/source/vscode/src/webview/tsconfig.json b/source/vscode/src/webview/tsconfig.json
index 818fc9ad164..b38e422d8eb 100644
--- a/source/vscode/src/webview/tsconfig.json
+++ b/source/vscode/src/webview/tsconfig.json
@@ -4,6 +4,7 @@
"target": "ES2022",
"noEmit": true,
"allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
"lib": ["DOM", "ES2022"],
"rootDir": ".",
"strict": true /* enable all strict type-checking options */,
diff --git a/source/vscode/src/webviewPanel.ts b/source/vscode/src/webviewPanel.ts
index e7f4c199378..20a9c116293 100644
--- a/source/vscode/src/webviewPanel.ts
+++ b/source/vscode/src/webviewPanel.ts
@@ -54,6 +54,13 @@ export function registerWebViewCommands(context: ExtensionContext) {
}),
);
+ context.subscriptions.push(
+ commands.registerCommand(`${qsharpExtensionId}.showBloch`, async () => {
+ const message = { command: "bloch" };
+ sendMessageToPanel({ panelType: "bloch" }, true, message);
+ }),
+ );
+
const handleShowHistogram = async (resource?: vscode.Uri, expr?: string) => {
clearCommandDiagnostics();
@@ -204,6 +211,7 @@ type PanelType =
| "estimates"
| "help"
| "circuit"
+ | "bloch"
| "documentation";
const panels: Record
= {
@@ -211,6 +219,7 @@ const panels: Record = {
estimates: {},
circuit: {},
help: {},
+ bloch: {},
documentation: {},
};
@@ -219,6 +228,7 @@ const panelTypeToTitle: Record = {
estimates: "QDK Estimates",
circuit: "QDK Circuit",
help: "Q# Help",
+ bloch: "Bloch Sphere",
documentation: "Q# Documentation",
};
@@ -256,7 +266,10 @@ function createPanel(
QSharpWebViewType,
title,
{
- viewColumn: ViewColumn.Three,
+ // The Bloch sphere is a standalone interactive view, so open it in
+ // the active (main) editor column rather than beside the source.
+ // Other panels (help, circuit, histogram, etc.) open to the side.
+ viewColumn: type == "bloch" ? ViewColumn.Active : ViewColumn.Three,
preserveFocus: true,
},
{
@@ -293,7 +306,10 @@ export function sendMessageToPanel(
message: any,
) {
const panelRecord = getOrCreatePanel(panel.panelType, panel.id);
- if (reveal) panelRecord.panel.reveal(ViewColumn.Beside);
+ if (reveal)
+ panelRecord.panel.reveal(
+ panel.panelType == "bloch" ? ViewColumn.Active : ViewColumn.Beside,
+ );
if (message) panelRecord.panel.sendMessage(message);
}
@@ -333,8 +349,9 @@ export class QSharpWebViewPanel {
const katexCss = getUri(["out", "katex", "katex.min.css"]);
const githubCss = getUri(["out", "katex", "github-markdown-dark.css"]);
- const webviewCss = getUri(["out", "webview", "webview.css"]);
- const webviewJs = getUri(["out", "webview", "webview.js"]);
+ const bundleName = this.type == "bloch" ? "bloch" : "webview";
+ const webviewCss = getUri(["out", "webview", `${bundleName}.css`]);
+ const webviewJs = getUri(["out", "webview", `${bundleName}.js`]);
const resourcesUri = getUri(["resources"]);
return /*html*/ `
@@ -409,6 +426,7 @@ export class QSharpViewViewPanelSerializer implements WebviewPanelSerializer {
panelType !== "histogram" &&
panelType !== "circuit" &&
panelType !== "help" &&
+ panelType !== "bloch" &&
panelType != "documentation"
) {
// If it was loading when closed, that's fine