Educational: step-by-step coding of the frontend

[giangiac]

Hi TQEC friends,

I am unfamiliar with JavaScript, React, Pixi, ... but would like to help developing the frontend part.
I opted for a hands-on approach to learn those language & libraries, with the side benefit of familiarizing with the frontend codebase.

I started by setting up a template React project with:
https://create-react-app.dev/
and then continued by adding snippets of code from the tqecjs frontend:
https://github.com/giangiac/tqec/tree/test-frontend/step-by-step-frontend

I noticed that this may be helpful to the community members who, like me, need to learn the basics of a web app.
If there is interest, I can create a PR to track the extension of the "step-by-step frontend coding", with the commit message indicating the functionality added by each of them.
Checking the commit content will help locating the part of code responsible for that functionality.

[smburdick]

@giangiac If you'd like, you can go ahead and open this PR.

One thing I noticed was that the commit history shows you the tutorial steps for building up the frontend piece-by-piece.

[giangiac]

In the last few commits, the step-by-step frontend explored a different approach for adding and saving plaquettes.

• We defined a few areas thanks to the addition of "red squares".
  The central square represents a sort of "plaquette building area".
  The other squares on the right represent the locations where the plaquettes are stored.
• The red squares are just guides for the eyes and a plaquette can extend beyond them.
  Ideally, they corresponds to the basic cell used when templating the plaquette arrays.
• The qubits in a plaquette are marked as 'X', 'Z', or 'A'.
  X and Z qubits are data qubits and their label suggest the Pauli factor associated to them in the stabilizer.
  A qubits are ancilla qubits.
  Their label also includes the relative coordinates w.r.t. the top-left corner of the relevant red square.

frontend_2024-02-08.mp4

[giangiac]

On the circuit-writing function

Currently it is just a placeholder and it assumes that:

• there is a single ancilla qubit
• it is possible to apply a CNOT between every data qubit and the ancilla
• the gate timing is fixed and the order follows the order in which qubits are clicked when composing the plaquette

For its implementation, I did not define a proper circuit class but have a simple function creating the ASCII art.

The automatically-generated circuit should be considered a starting point that the user can modify via the GUI.
Ideally, one wants the option of adding gates and moving them around.

[giangiac]

Comments on the differences with the original frontend

• instead of qubits, the initial white circles are "positions" where the qubits may be added
• clicking a position adds a qubits there
• when a plaquette is created, qubits are added to it
• instead of dragging the plaquette around, I opted for a button to move it to predefined areas
• the plaquette's qubits are moved accordingly, thus freeing the option to add new qubits in the plaquette-building area for the next plaquette

[smburdick]

@giangiac I think your work here is also addressing #46, which is essential to the main app, on top of having this educational tool for newcomers. Would you be able to spin off the circuit builder into a separate branch, and open a pull request for that specific issue?

[giangiac]

@giangiac I think your work here is also addressing #46, which is essential to the main app, on top of having this educational tool for newcomers. Would you be able to spin off the circuit builder into a separate branch, and open a pull request for that specific issue?

Sam, I'll create a separate PR with the relevant code.

[rryoung98]

hi @giangiac and @smburdick I looked at your step-by-step branch and it's great! thank you @giangiac. I'm thinking of getting started with the connection between frontend and backend. Do you want me to wait until the new pr is made?

[smburdick]

hi @giangiac and @smburdick I looked at your step-by-step branch and it's great! thank you @giangiac. I'm thinking of getting started with the connection between frontend and backend. Do you want me to wait until the new pr is made?

@rryoung98 Are you referring to #38?

[giangiac]

hi @giangiac and @smburdick I looked at your step-by-step branch and it's great! thank you @giangiac. I'm thinking of getting started with the connection between frontend and backend. Do you want me to wait until the new pr is made?

Thanks, @rryoung98!
I have no clue how to connect the JS frontend with the Python backend. One "cheap" option is that the backend simply parses the .txt file with the library of plaquettes/circuits and take over from there. Effectively, this means two separate "programs/apps" that just agree on the output/input file format.

Is there a way to have a deeper integration?
How do you envision that?

An idea (not sure how realistic) may be having multiple "tabs" in the webapp. The first tab being the frontend, then the user can switch to other tabs for the template creation, etc etc. The code enabling the frontend functionalities (and thus the other tabs) is in Python, so I am not sure how/if that works.

[smburdick]

hi @giangiac and @smburdick I looked at your step-by-step branch and it's great! thank you @giangiac. I'm thinking of getting started with the connection between frontend and backend. Do you want me to wait until the new pr is made?

Thanks, @rryoung98! I have no clue how to connect the JS frontend with the Python backend. One "cheap" option is that the backend simply parses the .txt file with the library of plaquettes/circuits and take over from there. Effectively, this means two separate "programs/apps" that just agree on the output/input file format.

Is there a way to have a deeper integration? How do you envision that?

An idea (not sure how realistic) may be having multiple "tabs" in the webapp. The first tab being the frontend, then the user can switch to other tabs for the template creation, etc etc. The code enabling the frontend functionalities (and thus the other tabs) is in Python, so I am not sure how/if that works.

@giangiac You're spot on, actually -- the frontend and backend communicate via REST APIs, using a predetermined JSON schema.

Your multi-tab idea was sketched up in one of our design files in the shared Gdrive, but I don't think we've looked into those as a group lateley.

[rryoung98]

Yes, it's going to be just rest apis with json (we will need to tweak your ascii circuits into something easier to parse like qasm).

[smburdick]

Marking this as closed -- @giangiac