Skip to content

Conversation

@ScottCarda-MS
Copy link
Contributor

@ScottCarda-MS ScottCarda-MS commented Jan 21, 2026

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:
State Viz 1

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:
State Viz 2

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:
State Viz Other

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

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:
image

There is also development toolbar that is hidden by default:
image

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.showStateDevToolbar to true in 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:

  • While some snapshot tests where added for the state visualizer, I didn't add snapshot tests showing the whole editor with an opened visualizer panel. I had difficulties getting snapshots to be consistent (exactly the same) across different environments. This is something I can look into in the future.
  • Setting the panel to be expanded by default instead of collapsed. Currently the panel starts collapsed, and this helps obfuscate the initialization process of the panel. When starting expanded the initialization causes some resizing that may look strange to the user. Having the panel expanded by default also causes some of the snapshots tests to try to capture the panel mid-initialization which looks strange and may appear unexpected.
  • Removing the "Run" button from the toolbox. The "Run" button is arguably superseded by the state panel as they were both meant to help circuit-writers be able to see what state the circuits they were writing would produce. The state visualizer, I believe, does a much better job of this as it is much faster, doesn't require clicking a button, shows the state in a much more ideal way, and doesn't require using (maybe considered abusing) the entry point expression of Q# programs which was controversial.
  • Removing the frontend simulator in stateCompute.ts and use the rust simulator. The frontend simulator is very simple and works well (and fast) with the limited circuits that can appear in the circuit editor. There are concerns that this simulator will not scale nicely as we add more complex capabilities to the circuit editor, however, and we don't want to maintain more simulators than are needed, so there is a desire to replace the usage of the frontend simulator with the use of the rust simulator, which is currently used by the "Run" button. This is another reason to keep the "Run" button until we are able to make use of the rust simulator in the state visualizer panel. This is something that I want to do in a follow up PR.
  • Remove the dev-toolbar. I find this toolbar very useful in the development of the visualizer, but I'm hopeful that it can be removed once we are more confident about the look/feel of the visualizer and the functionality we want it to have. I'd first like to have the visualizer out in the world and used by folks, getting feedback and and making tweaks to the design. When we have settled in a more long-term sense on the visualizer, the dev-toolbar could be removed.

@ScottCarda-MS ScottCarda-MS marked this pull request as ready for review January 23, 2026 21:52
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.

2 participants