Circuit Editor State Visualization Panel#2870
Open
ScottCarda-MS wants to merge 80 commits intomainfrom
Open
Conversation
…ctored panel state a bit.
Comment on lines
+116
to
+118
| loadingTimer = setTimeout(() => { | ||
| if (activeLoadingRequestId !== requestId) return; | ||
| loadingShownAtMs = performance.now(); |
Check notice
Code scanning / devskim
If untrusted data (data from HTTP requests, user submitted files, etc.) is included in an setTimeout statement it can allow an attacker to inject their own code. Note
Comment on lines
+141
to
+142
| hideLoadingTimer = setTimeout(() => { | ||
| if (activeLoadingRequestId !== requestId) return; |
Check notice
Code scanning / devskim
If untrusted data (data from HTTP requests, user submitted files, etc.) is included in an setTimeout statement it can allow an attacker to inject their own code. Note
billti
reviewed
Jan 31, 2026
billti
reviewed
Jan 31, 2026
billti
reviewed
Jan 31, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This adds a collapsible State Visualization Panel to the Circuit Editor for seeing the quantum state resulting from running the circuit on qubits assumed to be in |0> state. The panel starts collapse on the right side of the editor window and expands when clicked:

The state is show with a probability density bar graph for each base state in superposition, and a phase diagram to indicate the phase associated with that base state as well. The color of the bar in the bar graph as well as the phase diagram also indicate phase:

The default maximum number of columns is 16. If there are too many states to represent, an "Others" column will be created. The following shows this as well as that state labels will go vertical if too long:

If the circuit is empty, the visualizer shows that it can't represent the state of an empty circuit:

Currently the visualizer can't support Measurement or Reset gates, as they create mixed states, and the visualizer is currently only able to show one superposition state:

There is also development toolbar that is hidden by default:

This toolbar let developers (like me) try out some experimental features and use mock data sets to test the limits of the state visualizer without having to make code changes and rebuild. This is useful for development but may not be appropriate for regular users of the circuit editor, so it is hidden by default. To enable the toolbar set the hidden setting of
Q#.dev.showStateDevToolbartotruein your settings JSON.Lastly I want to point out some things that are intentionally left out of this PR but may be implemented in future PRs: