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.

Sign up for GitHub

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

Jump to bottom

Typescript development in Cirq and prototype bloch sphere implementation #4171

Merged
merged 165 commits into from
Jul 2, 2021
Merged

Typescript development in Cirq and prototype bloch sphere implementation #4171

merged 165 commits into from
Jul 2, 2021

Conversation

seunomonije
Copy link
Contributor

@seunomonije seunomonije commented Jun 8, 2021 •
edited by balopat
Loading

Typescript Development in Cirq

This PR implements the features discussed in the Typescript Development in Cirq RFC.

Listed below are the features included in the PR:

  • Infrastructure and directory structure to allow Typescript development in Cirq, including:
    • Bundling Typescript into Javascript, and examples of how to use these bundles
    • Hot reloading development environment for both browser and notebook settings
    • Typescript testing framework using Mocha and Chai, including a test for the bloch sphere.
    • Coverage checks for Typescript unit tests. (100% coverage needed in CI)
    • End-to-end integration between the Python and Javascript (the bloch sphere)
    • Example of full coverage testing of the Python side
    • CI for the Typescript environment for testing and linting.
    • Check scripts for testing and linting
  • An example 3d bloch sphere implementation. This bloch sphere can be viewed:
    • In the browser (development)
    • In a Jupyter notebook (development and production)
    • Via a generated HTML file. This file can be sent anywhere and be viewed in the browser, regardless of if the recipient has Cirq installed or not.
  • A up-to-date package on Test PyPI representing the state of the cirq-web package as of 6/16/21.
  • Documentation for using cirq-web in the README files.

colab_web_pr_trial

@seunomonije
add node_modules to .gitignore, add three.js to package-lock
4648e65
@seunomonije
Merge branch 'master' of https://github.com/quantumlib/Cirq
621b729
@seunomonije
initial refactoring
8832853
@seunomonije
move package-lock into the web subdirectory
5516b55
@seunomonije
readme, slight refactor
7a2aacd
@seunomonije
Merge branch 'master' of https://github.com/quantumlib/Cirq
bbf8af2
@seunomonije
add live-server
490a8b2
@seunomonije
added more to readme file
a08a196
@seunomonije
prettier
b3a3a7e
@seunomonije
small changes to readme
2c66c8a
@seunomonije
typescript
bb015e0
@seunomonije
small change to readme
eb1a435
@seunomonije
hacking endpoint from friday
724a9da
@seunomonije
refactor/progress dump
86199a6
@seunomonije
post gts lint. The extra interface files might not stay.
1f52ac8
@seunomonije
rename to cirq-web
391258d
@seunomonije
refactor and additional files
2650381
@seunomonije
refactor again
064de3f
@seunomonije
updated setup
be5564c
@seunomonije
init file
6d8b533
@seunomonije
refactor, split cirq-web into its own package
eddb58f
@seunomonije
update versions to match
8015fac
@seunomonije
add cirq-web autopkg to script
1557b52
@seunomonije
moved python init
ee9f890
@seunomonije
small test changes cuz colab is being difficult
09127f8
@seunomonije
new bundle to upload
df2e359
@seunomonije
lowercase cirq
03e8bd0
@seunomonije
fix dev browser environment
f574154
@seunomonije
pre presentation
c24ffe3
@seunomonije
post presentation state
e78d85d
@balopat
Copy link
Contributor

balopat commented Jul 2, 2021 •
edited
Loading

OK, one last push:

  • make the Widget class abstract and to use the Template method pattern (I do recommend also reviewing the gang of four design patterns!)
  • remove the write output file method
  • run git checkout master .gitignore && git commit -am "revert .gitignore"

balopat
balopat reviewed Jul 2, 2021
View reviewed changes
cirq-web/cirq_web/widget.py Outdated Show resolved Hide resolved
balopat
balopat reviewed Jul 2, 2021
View reviewed changes
cirq-web/cirq_web/widget.py Outdated Show resolved Hide resolved
balopat
balopat reviewed Jul 2, 2021
View reviewed changes
cirq-web/cirq_web/widget.py Outdated Show resolved Hide resolved
balopat
balopat reviewed Jul 2, 2021
View reviewed changes
cirq-web/cirq_web/widget.py Outdated Show resolved Hide resolved
wcourtney
wcourtney reviewed Jul 2, 2021
View reviewed changes
Copy link
Collaborator

@wcourtney wcourtney left a comment

Choose a reason for hiding this comment

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

LGTM % some nits and the radius unit issue which you could punt to an issue. Deferring to @balopat for final approval.

cirq-web/cirq_ts/src/bloch_sphere/bloch_sphere_test.ts Outdated Show resolved Hide resolved
cirq-web/cirq_ts/src/bloch_sphere/bloch_sphere_test.ts Outdated Show resolved Hide resolved
cirq-web/cirq_ts/src/bloch_sphere/bloch_sphere_test.ts Outdated Show resolved Hide resolved
cirq-web/cirq_ts/src/bloch_sphere/components/meridians_test.ts Outdated Show resolved Hide resolved
cirq-web/cirq_ts/src/bloch_sphere/components/sphere.ts

/**
* Class constructor
* @param radius the desired radius of the sphere
Copy link
Collaborator

Choose a reason for hiding this comment

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

IIUC, the size of the sphere could be radius 1, but will be various sizes on the screen depending on the distance of the camera. In the DOM, it's common to align on 'pixels' as the absolute unit of distance on the screen, and I think that makes sense for the radius here. WDYT?

Here is a case of someone trying to align pixels with the three.js world space.

@balopat - do you have any preference whether this gets punted to a new issue vs completed now?

@balopat balopat mentioned this pull request Jul 2, 2021
Open
balopat
balopat approved these changes Jul 2, 2021
View reviewed changes
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.

LGTM with some final tiny nits

cirq-web/cirq_web/widget.py Outdated Show resolved Hide resolved
cirq-web/cirq_web/widget.py Outdated Show resolved Hide resolved
cirq-web/cirq_web/widget_test.py Outdated Show resolved Hide resolved
cirq-web/cirq_web/bloch_sphere/bloch_sphere.py Show resolved Hide resolved
@balopat balopat dismissed wcourtney’s stale review July 2, 2021 22:49

nits were addressed, #4283 opened

@balopat balopat added the automerge Tells CirqBot to sync and merge this PR. (If it's running.) label Jul 2, 2021
@CirqBot
Copy link
Collaborator

CirqBot commented Jul 2, 2021

Automerge cancelled: No approved review.

@CirqBot CirqBot removed the automerge Tells CirqBot to sync and merge this PR. (If it's running.) label Jul 2, 2021
@balopat balopat added the automerge Tells CirqBot to sync and merge this PR. (If it's running.) label Jul 2, 2021
@CirqBot
Copy link
Collaborator

CirqBot commented Jul 2, 2021

Automerge cancelled: No approved review.

@CirqBot CirqBot removed the automerge Tells CirqBot to sync and merge this PR. (If it's running.) label Jul 2, 2021
@balopat
Copy link
Contributor

balopat commented Jul 2, 2021

I think the automerge bot might be dying on this PR due to its size :)

@balopat balopat added the automerge Tells CirqBot to sync and merge this PR. (If it's running.) label Jul 2, 2021
@CirqBot
Copy link
Collaborator

CirqBot commented Jul 2, 2021

Automerge cancelled: No approved review.

@CirqBot CirqBot removed the automerge Tells CirqBot to sync and merge this PR. (If it's running.) label Jul 2, 2021
@balopat balopat merged commit 24bac55 into quantumlib:master Jul 2, 2021
@seunomonije seunomonije mentioned this pull request Jul 19, 2021
Merged
balopat pushed a commit that referenced this pull request Aug 11, 2021
@seunomonije
3D circuit visualization using Typescript dev environment (#4334)
0d4a31b 
### 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
#1075 - 3D diagrams for circuits
#4171 - Typescript development in Cirq and prototype bloch sphere implementation

#### Features implemented
 - All features of a [Cirq Typescript widget](#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
rht pushed a commit to rht/Cirq that referenced this pull request May 1, 2023
@seunomonije @rht
Typescript development in Cirq and prototype Bloch sphere implementat…
11905bf 
…ion (quantumlib#4171)

Typescript development in Cirq and prototype Bloch sphere implementation.

### Typescript Development in Cirq

This PR implements the features discussed in the [Typescript Development in Cirq RFC](https://docs.google.com/document/d/16LybO9bNqL3LaIy1pZCJQXSPvKs5g3IqKkkE3efqM8U/edit). 

#### Listed below are the features included in the PR:
 - Infrastructure and directory structure to allow Typescript development in Cirq, including:
   - Bundling Typescript into Javascript, and examples of how to use these bundles
   - Hot reloading development environment for both browser and notebook settings
   - Typescript testing framework using Mocha and Chai, including a test for the bloch sphere.
   - Coverage checks for Typescript unit tests. (100% coverage needed in CI)
   - End-to-end integration between the Python and Javascript (the bloch sphere)
   - Example of full coverage testing of the Python side
   - CI for the Typescript environment for testing and linting. 
   - Check scripts for testing and linting
 - An example 3d bloch sphere implementation. This bloch sphere can be viewed:
   - In the browser (development)
   - In a Jupyter notebook (development and production)
   - Via a generated HTML file. This file can be sent anywhere and be viewed in the browser, regardless of if the recipient has Cirq installed or not. 
 - A [up-to-date package on Test PyPI](https://test.pypi.org/project/cirq-web/0.12.0.dev20210616161134/) representing the state of the cirq-web package as of 6/16/21.
 - Documentation for using cirq-web in the README files.

![colab_web_pr_trial](https://user-images.githubusercontent.com/17647506/122309538-1673ab80-ced4-11eb-96dd-112ea46b6df9.gif)
rht pushed a commit to rht/Cirq that referenced this pull request May 1, 2023
@seunomonije @rht
3D circuit visualization using Typescript dev environment (quantumlib…
712a17d 
…#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
Reviewers

@wcourtney wcourtney wcourtney left review comments

@95-martin-orion 95-martin-orion 95-martin-orion left review comments

@balopat balopat balopat approved these changes

@cduck cduck Awaiting requested review from cduck

@vtomole vtomole Awaiting requested review from vtomole

Assignees

@balopat balopat

@wcourtney wcourtney

Labels
cla: yes Makes googlebot stop complaining.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@seunomonije @balopat @CirqBot @wcourtney @95-martin-orion