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

Quantum js vis branch #35

Open
wants to merge 39 commits into
base: ltnln-npm-package
Choose a base branch
from
Open

Conversation

Altanali
Copy link
Collaborator

The following PR includes the quantum-js-vis package which contains a modularized Q-Circuit-Editor and Q-Bloch-Sphere. As well, it edits the <script> and references in all the HTML files that create the quantumjavascript.app site to reference build/bundle.js, a bundle of all the Qjs Node modules needed to run the website.

Lastly, this PR includes a module/CSS bundling script for the website and to establish a bundle that can be used in a Jupyter Notebook to call the braket() method to inject an editor into the Notebook.

@Altanali Altanali self-assigned this Aug 11, 2021
Copy link

@AjinkyaGawali AjinkyaGawali left a comment

Choose a reason for hiding this comment

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

Overall sprinkle comments here and there to explain complicate code chunks usually around the regex part, also try using explicit variable names wherever you can(eg: re is used for regex pattern multiple times).
Overall great work!

.Q-circuit,
.Q-circuit-palette {

position: relative;
width: 50%;
width: 100%;

Choose a reason for hiding this comment

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

What does this change do ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

width: 100% for Q-circuit-palette was the original CSS in Q.js. 50% creates too small a Q-circuit-palette for the browser.

@@ -1,6 +1,6 @@
/*

Copyright © 2019–2020, Stewart Smith. See LICENSE for details.
Copyright © 2019–2020, Stewart Smith. See LICENSE for details.

Choose a reason for hiding this comment

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

seems like a unicode issue

in to “essential global Q.js styles” which will
remain here in Q.css, and “documentation-specific”
in to “essential global Q.js styles” which will
remain here in Q.css, and “documentation-specific”

Choose a reason for hiding this comment

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

ditto

@@ -341,6 +341,8 @@ svg, :root {
max-width: 100%;
overflow-x: auto;
font-family: var( --Q-font-family-sans );
/*letter-spacing: 0.03em;*/

Choose a reason for hiding this comment

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

we can remove code that we are not using, we you are still experimenting and will need to uncomment this in future

padding: 1em;
font-family: var( --Q-font-family-mono );
/*font-family: var( --Q-font-family-mono );*/

Choose a reason for hiding this comment

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

ditto

test("Testing evaluateInput() with input 'help' and an empty circuit.", () => {
let expectedText = runner.printMenu();
runner.evaluateInput("help", circuit);
expect(console.log).toHaveBeenCalled();

Choose a reason for hiding this comment

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

redundant test, the next line takes care of this assert already

//create empty circuit.
test("Check that evaluateOperation is called once for input 'h(1, [1])'", () => {
let circuit = quantumjs.Q();
runner.evaluateInput("h(1, [1])", circuit);

Choose a reason for hiding this comment

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

check if H was not present before

runner.evaluateInput("h( 1 , [ 1 ], 3)", circuit)
expect(circuit.get(1, 1)).toBeUndefined();
})
test("Check that evaluateOperation is called for input 'x(1, [1, 2])'", () => {

Choose a reason for hiding this comment

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

Using mocks you can assert whether a function is called or not https://jestjs.io/docs/mock-functions Your test description talks about it is checking whether a fucntion is called or not, but it is not really checking that, use mocks to test that

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ah, I wasn't sure how to test user prompts! Thank you, I'll look into mocking prompt()!

Object.entries(quantumjs.Gate.constants).forEach(function(entry) {
let gate = entry[1];
let input = gate.nameCss + (gate.is_multi_qubit ? "(1, [1, 2])" : "(1, [1])");
console.log(input);

Choose a reason for hiding this comment

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

I think this log is for dev purposes, so can be removed

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Good call! Removed!

let circuit = quantumjs.Q();
//Set a hadamard operation on the circuit.
circuit.set$('H', 1, [1]);
runner.evaluateInput('remove( 1 , [ 1 ] )', circuit);

Choose a reason for hiding this comment

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

use mocks here as well

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.

None yet

2 participants