Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3D circuit visualization using Typescript dev environment #4334

Merged
merged 224 commits into from
Aug 11, 2021

Conversation

seunomonije
Copy link
Contributor

@seunomonije seunomonije commented Jul 19, 2021

3D circuit visualization

This PR implements the features discussed in the 3D Quantum Circuits RFC.

Relevant Issues and PRs

#1075 - 3D diagrams for circuits
#4171 - Typescript development in Cirq and prototype bloch sphere implementation

Features implemented

  • All features of a Cirq Typescript widget
  • End to end display of circuits
    • Serialization of cirq.Circuit objects, re-representation in Typescript
  • Support for arbitrary length gates
  • Testing for the different components
  • Customizable gate labels
  • Camera switching, zooming, panning
  • A short jupyter notebook example
capture.5.mp4

@seunomonije seunomonije marked this pull request as ready for review August 9, 2021 19:15
@seunomonije seunomonije requested review from cduck, vtomole and a team as code owners August 9, 2021 19:15
Copy link
Contributor

@balopat balopat left a comment

Choose a reason for hiding this comment

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

We are very close in my opinion to merging!!
Added a couple of nits - please address the outstanding comments from Will as well.

cirq-web/cirq_ts/src/circuit/components/grid_qubit_test.ts Outdated Show resolved Hide resolved
cirq-web/cirq_ts/src/circuit/components/meshes.ts Outdated Show resolved Hide resolved
cirq-web/cirq_ts/src/circuit/components/types.ts Outdated Show resolved Hide resolved
* displayed using three.js
*/
export class GridCircuit extends Group {
readonly moments: number;
Copy link
Contributor

Choose a reason for hiding this comment

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

A still outstanding issue. I wonder about this number as well - why do we need it at all? It seems like that this is just used as the initial default moment number for the qubits... Consider just passing it in to the private addQubit method and then we don't even have to store it. Also rename to initial_num_moments.

* Class constructor
* @param moments The number of moments of the circuit. This
* determines the length of all the qubit lines in the diagram.
* @param qubits A list of GridCoord objects representing the locations of the
Copy link
Contributor

Choose a reason for hiding this comment

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

+1 to the suggestion, it would be more Cirq-y as well - though that might be a bit of a larger refactoring at this point.

cirq-web/cirq_ts/src/circuit/main.ts Outdated Show resolved Hide resolved
cirq-web/cirq_web/circuits/circuit.py Show resolved Hide resolved
cirq-web/cirq_web/circuits/symbols.py Show resolved Hide resolved
@balopat balopat added this to the v0.12 milestone Aug 10, 2021
Copy link
Contributor

@balopat balopat left a comment

Choose a reason for hiding this comment

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

Looks good - the last thing is the docstring in grid_circuit, as I commented above. Also maybe in a follow-up PR, I would change the e2e test to display a bit richer circuit with all the symbols at an angle that it shows the X in the middle of the circle for X gates, but other than that it looks great!

@balopat balopat dismissed wcourtney’s stale review August 11, 2021 12:14

comments are resolved

@balopat balopat added automerge Tells CirqBot to sync and merge this PR. (If it's running.) front_of_queue_automerge CirqBot uses this label to indicate (and remember) what's being merged next. and removed automerge Tells CirqBot to sync and merge this PR. (If it's running.) labels Aug 11, 2021
@balopat balopat merged commit 0d4a31b into quantumlib:master Aug 11, 2021
@balopat balopat removed automerge Tells CirqBot to sync and merge this PR. (If it's running.) front_of_queue_automerge CirqBot uses this label to indicate (and remember) what's being merged next. labels Aug 11, 2021
rht pushed a commit to rht/Cirq that referenced this pull request May 1, 2023
…#4334)

### 3D circuit visualization
This PR implements the features discussed in the [3D Quantum Circuits RFC](https://docs.google.com/document/d/1dLKj8oAF_JhDWU4zLU7XMz3aBXymd0hk_9n6U0mEtms/edit?usp=sharing).

#### Relevant Issues and PRs
quantumlib#1075 - 3D diagrams for circuits
quantumlib#4171 - Typescript development in Cirq and prototype bloch sphere implementation

#### Features implemented
 - All features of a [Cirq Typescript widget](quantumlib#4171)
 - End to end display of circuits
   - Serialization of cirq.Circuit objects, re-representation in Typescript
 - Support for arbitrary length gates
 - Testing for the different components
 - A short jupyter notebook example


https://user-images.githubusercontent.com/17647506/126213608-0c2d09d1-d5c2-4fa0-a8ae-3f0780f09912.mp4
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla: yes Makes googlebot stop complaining.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants