Integrate alternative frontend #166
Conversation
* the visualization is a simple ASCII diagram * the box has fixed dimensions * the plaquette format is constrained (exactly 1 ancilla, then only x or z data qubits)
|
@smburdick @rryoung98 I believe you asked to be the reviewers. |
|
Fantastic! Added @smburdick, @vtomole and myself for review. |
There was a problem hiding this comment.
Looks good! I think we can merge this as a tutorial, and copy/edit circuit.js into the main frontend. Should be easy enough since it was build as a class.
If you have time, you can address the (minor) comments of mine, but I don't consider any of them blockers.
| @@ -0,0 +1,23 @@ | |||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | |||
There was a problem hiding this comment.
I think frontend-tutorial is a better name to frontend_v2
There was a problem hiding this comment.
I am not sure that I'd call this a tutorial.
| <div className="Tabs"> | ||
| <script>console.log('test log from App.js (tabs)')</script> | ||
| <button id='tab1'>Tab 1</button> | ||
| <button id="tab2">Tab 2</button> |
There was a problem hiding this comment.
Did you manage to get tabbing working? If not, remove the buttons
There was a problem hiding this comment.
I did not manage to make the tab content appear/disappear on click.
| /** | ||
| * Create a button formed by a Text graphics plus a rounded rectangular background | ||
| */ | ||
| export const button = (text, x, y, buttonColor = 'black', fontColor = 'white', isLeftAligned = true) => { |
There was a problem hiding this comment.
For instructional purposes, I think it is better to extend the Container class, as we currently do.
Apply the suggestions from the review of PR #166. Add the option to generate the circuit as an ASCII art or a STIM code snippet. NOTE: I do not think that the name "tutorial" is appropriate for this alternative frontend. Currently, the folder does not contain any explanation of the code nor the commits provide a step-by-step guide (the commits have been squashed in the merge). --------- Co-authored-by: rryoung98 <ritsukiyoung98@gmail.com>
The "step-by-step frontend" started as an educational project, but became the playground to explore an alternative frontend design. It reached the maturity to be integrated in the main branch. That's the goal of this PR.
NOTE: The alternative frontend is contained in the folder named
<repo>/frontend_v2/.