Skip to content

Bloch Sphere Widget - Command and Dev Playground - #3306

Open
Scott Carda (ScottCarda-MS) wants to merge 78 commits into
mainfrom
sccarda/bloch
Open

Bloch Sphere Widget - Command and Dev Playground#3306
Scott Carda (ScottCarda-MS) wants to merge 78 commits into
mainfrom
sccarda/bloch

Conversation

@ScottCarda-MS

@ScottCarda-MS Scott Carda (ScottCarda-MS) commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Bloch Sphere View for Q# UX (Playground + VS Code)

Summary

This PR introduces an interactive Bloch sphere view in the shared Q# UX package and wires it into both:

  • the dev playground (as a first-class Tools view)
  • the VS Code extension webview (via a dedicated command)

It also adds the synthesis data/tooling used by the Bloch Rz helper.

What’s Included

New Bloch UX surface

  • Adds a new Bloch widget implementation in the shared UX layer.
  • Includes gate application controls, sequence playback/history, and Rz synthesis integration.
  • Includes theme-aware rendering/styling for host environments.

Shared math and compute cleanup

  • Introduces shared quantum math primitives used across Bloch/state visualization paths.
  • Refactors relevant state-viz worker computation to align with shared math utilities.

Rz synthesis artifacts and generator source

  • Adds checked-in lookup artifacts:
    • source/npm/qsharp/rz-array.json
    • source/npm/qsharp/rz-details.json
  • Adds generator source/tooling for reproducibility:
    • source/npm/qsharp/tools/rz-synthesis.ts
    • source/npm/qsharp/tools/tsconfig.json

Playground integration

  • Adds Bloch view routing/rendering in the dev playground.
  • Adds navigation entry placement under Tools.

VS Code integration

  • Adds/updates webview command plumbing for Bloch panel display.
  • Ensures webview/learning webview type-check configs support shared UX JSON import path.

Packaging and dependency updates

  • Updates npm dependency metadata and lockfiles.
  • Updates component governance manifest for shipped dependency compliance.

Key Files (high signal)

  • source/npm/qsharp/ux/bloch.tsx
  • source/npm/qsharp/ux/blochGates.ts
  • source/npm/qsharp/ux/quantum-math.ts
  • source/npm/qsharp/ux/cplx.ts
  • source/npm/qsharp/ux/circuit-vis/state-viz/worker/stateCompute.ts
  • source/npm/qsharp/rz-array.json
  • source/npm/qsharp/rz-details.json
  • source/npm/qsharp/tools/rz-synthesis.ts
  • source/playground/src/nav.tsx
  • source/playground/src/main.tsx
  • source/vscode/src/webviewPanel.ts
  • source/vscode/src/webview/webview.tsx

Screenshots

image

@ScottCarda-MS Scott Carda (ScottCarda-MS) changed the title Sccarda/bloch Bloch Sphere Widget - Command and Dev Playground Jun 11, 2026
Comment thread source/npm/qsharp/ux/bloch.tsx Fixed
@amcasey

Copy link
Copy Markdown
Member

Does our target audience already know which vectors lie along the X, Y, and Z axes?

@amcasey

Copy link
Copy Markdown
Member

I like the updates, especially the new wireframe. The experience LGTM, but I haven't reviewed the code.

@amcasey Andrew Casey (amcasey) left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Within the limits of my ability to review, LGTM

Comment thread source/npm/qsharp/ux/bloch/bloch.tsx Outdated
Comment thread source/npm/qsharp/ux/bloch/bloch.tsx
Comment thread source/npm/qsharp/ux/bloch/bloch.tsx
Comment thread source/npm/qsharp/ux/bloch/bloch.tsx Outdated
Comment thread source/npm/qsharp/ux/bloch/bloch.tsx
Comment thread source/npm/qsharp/ux/bloch/bloch.tsx Outdated
Comment thread source/npm/qsharp/ux/qsharp-ux.css Outdated
Comment thread source/npm/qsharp/ux/quantum-math.ts Outdated

@amcasey Andrew Casey (amcasey) left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The experience and the code seem fine to me. We should discuss which release this will be included in.

export { ScatterChart } from "./scatterChart.js";
export { EstimatesOverview } from "./estimatesOverview.js";
export { EstimatesPanel } from "./estimatesPanel.js";
export { BlochSphere } from "./bloch/bloch.js";

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this intent to still then remove this out of here and into its own path in package.json? Maybe in the "sccarda/webfiew file size" PR (which looks like it needs updating again now after the changes here)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There were two possible strategies here: lazy-load the Bloch Sphere or separate the Bloch-Sphere into its own webview. This branch went with the latter of those. The sccarda/WebviewFileSize branch does indeed implement the other strategy of lazy-loading, but that might be obsolete since we are separating the Bloch Sphere into its own webview in this branch.

"target": "ES2022",
"noEmit": true,
"allowImportingTsExtensions": true,
"resolveJsonModule": true,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does learning now need to resolve JSON modules? Does it somehow transitively reference the Bloch code? (Or is this in preparation for maybe having the Bloch sphere in the learning content)

"skipLibCheck": true,
"types": ["node"]
},
"include": ["./*.ts", "../ux/cplx.ts"]

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you need to explicitly list the files? Doesn't it find the file in the local dir by default and then follow that to the imported module?

@@ -0,0 +1,944 @@
[

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this file need to be checked in for any reason? Does anything import/use it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants