microsoft / quantum-viz.js Goto Github PK
View Code? Open in Web Editor NEWquantum-viz.js is a configurable tool for rendering quantum circuits using pure HTML.
License: Other
quantum-viz.js is a configurable tool for rendering quantum circuits using pure HTML.
License: Other
Is your feature request related to a problem? Please describe.
I would like to draw a circuit that has distinct timesteps at which certain operations are applied. Currently, if there is no operation on a qubit at a certain timestep, the next operation for that qubit is graphed immediately after the last operation.
For example:
Here is a circuit I drew using quantum-viz. The intended circuit was:
The drawn circuit more appropriately describes:
Describe the solution you'd like
I would like to be able to use an "invisible gate" (an idle/no-op) that simply leaves a blank line where an operation would go. This would be like the identity operators used below, except that it would not be visible. Of course, the line indicating the qubit would still be there - ideally, it would look exactly like the line for qubit 1 below the measurement in the image above.
Describe alternatives you've considered
Here is the same circuit as above with idles (identity operators) where I would like spaces:
Though this fix is okay for small circuits, it clutters the visual and makes circuits difficult to read. It would be very nice if I could replace these idles with an "invisible" gate.
Describe the bug
When there is a nested circuit - an operation within an operation, and both are open, closing the top operation keeps the inner one semi-open.
After reopening the top operation, the inner one is with a minus sign (-) - as an open operation, but it is actually closed.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I would expect one of the two:
Screenshots
Edit:
This issue is connected to #17.
We want to rename the project from its original name of "Sqore" to "QuantumViz" or "qviz".
This involves renaming function names, documentation, etc.
Is your feature request related to a problem? Please describe.
It would be nice to have a way to generate qviz's json from the trace of a QIR program.
Describe the solution you'd like
Something on the lines of how we generate the json of a Q# program, i.e., use a tracer to identify the gates that might be executed on a QIR program and serialize this trace on the json expected by qviz.
Describe the bug
Widget not rendering in jupyter notebook
To Reproduce
Steps to reproduce the behaviour:
pip install jupyter
)quantum-viz
(pip install quantum-viz
)jupyter
executable selected)jupyter notebook
Expected behavior
An in-notebook visualisation of the quantum-viz.js
widget.
Additional context
Add any other context about the problem here. e.g.
pip list
:Package Version
-------------------- -----------
appnope 0.1.3
argon2-cffi 21.3.0
argon2-cffi-bindings 21.2.0
asttokens 2.0.5
attrs 21.4.0
backcall 0.2.0
beautifulsoup4 4.11.1
bleach 5.0.0
cffi 1.15.0
click 8.1.3
debugpy 1.6.0
decorator 5.1.1
defusedxml 0.7.1
entrypoints 0.4
executing 0.8.3
fastjsonschema 2.15.3
ipykernel 6.15.0
ipython 7.28.0
ipython-genutils 0.2.0
ipywidgets 7.7.0
jedi 0.18.1
Jinja2 3.1.2
jsonschema 4.6.0
jupyter 1.0.0
jupyter-client 7.3.4
jupyter-console 6.4.3
jupyter-core 4.10.0
jupyterlab-pygments 0.2.2
jupyterlab-widgets 1.1.0
MarkupSafe 2.1.1
matplotlib-inline 0.1.3
mistune 0.8.4
nbclient 0.6.4
nbconvert 6.5.0
nbformat 5.4.0
nest-asyncio 1.5.5
notebook 6.4.11
packaging 21.3
pandocfilters 1.5.0
parso 0.8.3
pexpect 4.8.0
pickleshare 0.7.5
pip 22.0.4
prometheus-client 0.14.1
prompt-toolkit 3.0.29
psutil 5.9.1
ptyprocess 0.7.0
pure-eval 0.2.2
pycparser 2.21
Pygments 2.12.0
pyparsing 3.0.9
pyrsistent 0.18.1
python-dateutil 2.8.2
pyzmq 23.2.0
qtconsole 5.3.1
QtPy 2.1.0
quantum-viz 1.0.4
Send2Trash 1.8.0
setuptools 62.3.2
six 1.16.0
soupsieve 2.3.2.post1
stack-data 0.3.0
terminado 0.15.0
tinycss2 1.1.1
tornado 6.1
traitlets 5.3.0
varname 0.8.3
wcwidth 0.2.5
webencodings 0.5.1
wheel 0.37.1
widgetsnbextension 3.6.0
Is your feature request related to a problem? Please describe.
In some areas of quantum computing it is common to use post-selected measurement gates to explain
why a circuit works when all measurement outcomes are zero and then proceed to explaining a circuit
for a general case. I would like to be able to visualize such circuits with quantum-viz.js.
Describe the solution you'd like
I would like post-selected Pauli measurement gates to be available as basic gates.
Describe alternatives you've considered
Ability for a user to add custom one, two and multiple-qubit gates with custom drawing of the gates.
Additional context
Below are examples of the gates that would be nice to have
Is your feature request related to a problem? Please describe.
Currently, qviz shows only the operations of a quantum program. One key feature is the ability to group operations and expand them to make the program easier to understand.
Another tool that could greatly help developers to visualize a quantum program would be the ability to easily compare the state of the quantum system before and after each operation; this would greatly help in visualizing the effect of each operation.
Describe the solution you'd like
This is a very rough draft of what I have in mind:
Namely, you can select any gate and show the before/after state of the system.
How we represent state is very important: we need to come up with a scalable way to represent a state for many qubits (it's easy when it's 2 but becomes complicated when it's 10+). Ideally, is something that should quickly tell users what's the value we get with the highest probability when measured, and how is the phase affected. In the mock, the top basis state vectors are shown with their size proportional to their probability. It also shows the phase of these top basis state vectors and a histogram with all the probabilities.
Is your feature request related to a problem? Please describe.
Microsoft Edge Tools recommend this setting to reduce issues when working with different OSes.
Describe the solution you'd like
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"DOM",
"ES2019",
],
"declaration": true,
"strict": true,
"outDir": "lib",
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
]
}
Describe alternatives you've considered
No change.
It would be nice to have consumer-facing tests that tests the compiled code in a sample TypeScript project or JS code. This could be an end-to-end test that imports qviz
and includes some tests to make sure all components of package are exported as expected.
Describe the bug
When the last operation is removed from a group, the group collapses and can't be removed/fixed
To Reproduce
Steps to reproduce the behavior:
H
outsideRX
outsideExpected behavior
Should remove the group all together if there are no more gates left.
I'm troubleshooting an issue observed with %trace keyword and my jupyter installation with the Q# kernel, namely -- I can't seem to get horizontal scrolling to work appropriately.
⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.
Describe the bug
With Python 3.9, I get an error when trying to open the qviz widget on a Jupyter Notebook in the dev environment.
To Reproduce
I followed the steps in the CONTRIBUTING.md, namely install the dev environment using poetry
:
pip install poetry nox nox-poetry
poetry install
Then, installed Jupyter Notebook with:
pip install notebook
During installation I see the versions of
traitlets
anipython
replaced, since the latest version of notebook for Python 3.9 requires a newer, incompatible, version:
nbclient, ipykernel, argon2-cffi, nbconvert, notebook
Attempting uninstall: traitlets
Found existing installation: traitlets 4.3.3
Uninstalling traitlets-4.3.3:
Successfully uninstalled traitlets-4.3.3
Attempting uninstall: ipython
Found existing installation: ipython 7.16.1
Uninstalling ipython-7.16.1:
Successfully uninstalled ipython-7.16.1
ERROR: pip's dependency resolver does not currently take into account all the packages that are installed. This behaviour is the source of the following dependency conflicts.
quantum-viz 0.0.0 requires ipython<8.0.0, but you have ipython 8.3.0 which is incompatible.
After installing, I tried opening any of the notebooks in quantum-viz/examples
, I get this error:
---------------------------------------------------------------------------
VarnameRetrievingError Traceback (most recent call last)
Input In [3], in <cell line: 1>()
----> 1 Viewer(bell)
File C:\Repos\quantum-viz.js\quantum-viz\quantum_viz\widget.py:59, in Viewer.__init__(self, circuit, width, height)
48 """
49 Create Viewer instance.
50
(...)
56 :type height: int, optional
57 """
58 try:
---> 59 self.name = varname()
60 except ImproperUseError:
61 self.name = "_"
Expected behavior
The widget should work fine with Python 3.9
Additional context
Add any other context about the problem here. e.g.
Describe the bug
No support for dragging gate inside of classically-controlled group
To Reproduce
Steps to reproduce the behavior:
Measure
into classically-controlled groupMeasure
out of groupExpected behavior
Should be able to drag Measure
gate in / out of classically-controlled group
Is your feature request related to a problem? Please describe.
It would be great and useful if you could add the SWAP gate in the qviz.
Describe the solution you'd like
You may add an attribute "isSWAP" to the Operation Properties.
Describe the bug
Error TS2315: Type 'IsTuple' is not generic when building production.
To Reproduce
npm run build:prod
Expected behavior
Command should compile successfully without errors
Additional context
Currently the process to release new packages versions are:
main
v[version-number]
convention)cd quantum-viz; poetry build; twine upload dist/*
npm login; npm publish --access public
This should all be automated by some GitHub action.
There are open compliance tasks that need to be reviewed for your quantum-viz.js repo.
To bring this repository to the standard required for 2021, we require administrators of this and all Microsoft GitHub repositories to complete a small set of tasks within the next 60 days. This is critical work to ensure the compliance and security of your microsoft GitHub organization.
Please take a few minutes to complete the tasks at: https://repos.opensource.microsoft.com/orgs/microsoft/repos/quantum-viz.js/compliance
You can close this work item once you have completed the compliance tasks, or it will automatically close within a day of taking action.
If you no longer need this repository, it might be quickest to delete the repo, too.
More information about GitHub inside Microsoft and the new GitHub AE product can be found at https://aka.ms/gim or by contacting [email protected]
FYI: current admins at Microsoft include @matthiastroyer, @george-moussa, @guenp, @msoeken, @guanghaolow, @jgukelberger, @cesarzc, @cgranade, @jenshnielsen, @johnazariah, @vadym-kl, @rmshaffer, @apaetz
quantum-viz
depends on qiskit-terra (<1,>=0.19.1)
https://www.wheelodex.org/projects/quantum-viz/ which is reaching EoL:
Important
The package qiskit-terra
is not going to be updated after August 15th, 2024. Since Qiskit 0.44 (released on July 27th, 2023), the qiskit
meta-package only contains qiskit-terra
. In Qiskit 1.0 and beyond, the meta-package architecture is removed.
If you are installing or depending on qiskit-terra
, consider changing that to qiskit
: Either qiskit>=0.x,<1
(if you did not transition to Qiskit 1.0 yet) or qiskit>=0.x,<2
(to also include Qiskit 1.*).
Read more.
It would be great to have the sample circuits for teleport/qrng/grover as part of the npm package so we can just consume them.
Describe the bug
A dependency in devDependencies causes error at installation
To Reproduce
Steps to reproduce the behavior:
npm install
Expected behavior
Command should run without any errors
Causes
Additional context
It would be helpful to document what the input schema should look like so that users can create their own inputs.
This will also be helpful to create qviz objects from other packages such as Q# and Qiskit.
There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.
Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.
Is your feature request related to a problem? Please describe.
It would be great if we could visualize an OpenQASM circuit using q-viz.
Describe the solution you'd like
Ideally this would all work using just javascript. We would have a javascript method that takes OpenQASM as a string, and parse it into a Sqore that can then be visualized. For example:
const teleport = `
// quantum teleportation example
OPENQASM 2.0;
include "qelib1.inc";
qreg q[3];
creg c0[1];
creg c1[1];
creg c2[1];
// optional post-rotation for state tomography
gate post q { }
u3(0.3,0.2,0.1) q[0];
h q[1];
cx q[1],q[2];
barrier q;
cx q[0],q[1];
h q[0];
measure q[0] -> c0[0];
measure q[1] -> c1[0];
if(c0==1) z q[2];
if(c1==1) x q[2];
post q[2];
measure q[2] -> c2[0];
`;
const circuit = parse(teleport);
qviz.draw(circuit, sampleDiv, qviz.STYLES['Default']);
For OpenQASM 3.0, we might need to do something similar to what we do with Q#, i.e. run a trace of the program and generate the json from the corresponding gates.
Is your feature request related to a problem? Please describe.
It would be nice to have a way to generate qviz's json from a Cirq circuit object.
Describe the solution you'd like
Something on the lines of adding a creating a convert_to_qviz()
method that takes a Cirq's Circuit object and returns a dictionary/ojbect that can be serialized to the json that qviz supports. For example:
import json
import cirq
from quantum_viz import convert_to_qviz
# Create qubits
q0 = cirq.LineQubit(0)
q1 = cirq.LineQubit(1)
q2 = cirq.LineQubit(2)
# Create a circuit
circuit = cirq.Circuit(
cirq.H(q0), # H gate
cirq.CNOT(q0, q1),
cirq.CNOT(q1, q2),
cirq.measure(q0, key='q0'),
cirq.measure(q1, key='q1'),
cirq.measure(q2, key='q2'),
)
qviz = convert_to_qviz(circuit)
print(json.dumps(qviz))
We want to be able to expose the functionality that quantum-viz offers to Python packages. This would involve writing a python wrapper around this library.
Some places to look at:
Describe the bug
Display arguments are not displayed for measurements.
To Reproduce
Steps to reproduce the behavior:
'qubits': [ {'id': 0, 'numChildren': 1}, {'id': 1, 'numChildren': 1} ], 'operations': [{ 'gate': 'MZZ', 'displayArgs': 'arg', 'isMeasurement': 'True', 'isControlled': 'True', 'controls': [{'qId': 0}], 'targets': [{'qId': 1}] }]
widget = Viewer(circuit) widget._ipython_display_()
Expected behavior
I expected to see the requested arguments displayed for the operation.
Screenshots
In this image, I input displayArgs = "arg"
for each operation.
Additional context
We want to add a CI pipeline to this repo so that GitHub automatically runs checks upon PR submission.
We can copy the code from https://github.com/microsoft/quantum-viz.js/blob/main/azure-pipelines.yml and turn it into a Github action. Specifically, we want to:
This feature would implement a GUI that allows users to drag and drop gates to create a circuit.
The user can then export the circuit as a JSON to be shared/used as input to qviz.
Relevant resources:
Currently, we generate gates as strings. However, it would be better to generate them as DOM elements so that we can easily add in functionality and properties to the elements directly.
Is your feature request related to a problem? Please describe.
It would be nice to have a way to generate qviz's json from a Qiskit QuantumCircuit object.
Describe the solution you'd like
Something on the lines of adding a creating a convert_to_qviz()
method that takes a Qiskit's Circuit object and returns a dictionary/ojbect that can be serialized to the json that qviz supports. For example:
import json
from qiskit import QuantumCircuit
from quantum_viz import convert_to_qviz
circuit = QuantumCircuit(2, 2)
circuit.name = "Qiskit Sample - Bell circuit"
circuit.h(0)
circuit.cx(0, 1)
circuit.measure([0,1], [0, 1])
qviz = convert_to_qviz(circuit)
print(json.dumps(qviz))
Our current API for the package looks like this:
const sampleCircuit = {
qubits: [
// ...
],
operations: [
// ...
],
};
const sampleDiv = document.getElementById('sample');
qviz.draw(sampleCircuit, sampleDiv, qviz.STYLES['Default']);
A few things that would make for a good interface are:
A good example of an interface that we can draw inspiration from is d3.js:
d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
We can select a DOM element, add data to it, and customize it. A similar API for Sqore would work really well.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.