Cancel Button for save qubit constellation

[rryoung98]

Describe the bug

On the frontend side we want to make sure the user experience is as nice as possible. When a user clicks on the button to make the qubit constellation there should also be a button to "cancel" to go back to the 0th step which is to create a circuit

Steps to reproduce the behavior:

1. Click on create a constellation
2. Try and go back to the "create a constellation" step.

Expected behavior

The solution would be to add the cancel button in this format, it's a good starting point for those who are new to JS and pixi.

  const cancelQubitConstellationButton = new Button(
    'Cancel Qubit Constellation',
    x,
    y + 50,
    'Red'
  );

  const lattice = new QubitLattice(workspace, app);
  createQubitConstellationButton.on('click', () => {
    workspace.removeChild(createQubitConstellationButton);
    workspace.addChild(saveQubitConstellationButton);
    workspace.addChild(cancelQubitConstellationButton);
    app.view.addEventListener('click', lattice.selectQubitForConstellation);
  });

Your task would be to add the button and also give the cancelQubitConstellationButton the ability to clear selected qubits and revert back to the 0th step in the Task Flow.

Screenshots and MP4s

Need this:

To be this:

Play around with the size color and spacing to make it a nice user inviting and friendly button.

Browser info (please complete for frontend bugs):

Bonus points to use a browser check plugin such as browsercheck to ensure the button renders correctly.

[smburdick]

I think this falls into the "feature" category as much as bug, but it is a good opportunity nonetheless

[rryoung98]

yes good point

[pandey-tushar]

Which file is the Save Qubit Constellation written in?

[smburdick]

Which file is the Save Qubit Constellation written in?

@pandey-tushar All of the logic for dictating button placement is in frontend/src/control-flow.js

https://github.com/QCHackers/tqec/blob/7fa9558d2b0992c62fc5da566ea6c91a7c73484e/frontend/src/control-flow.js#L90

[KabirDubey]

I'm looking for a first issue, is anyone working on this? @pandey-tushar

[smburdick]

As I said elsewhere, this issue should really be folded into the bigger undo/redo infrastructure we want, as it's referenced in a different issue.

[KabirDubey]

Removing my assignment to prioritize backend work instead (see 6/19 discussion on the frontend).

[KabirDubey]

As I said elsewhere, this issue should really be folded into the bigger undo/redo infrastructure we want, as it's referenced in a different issue.

Should we close this issue and explicitly link a separate issue outlining the vision for undo/redo actions (or make one if it doesn't already exist)? I wasn't present for this conversation, not sure what's being referenced in this comment.

[Gistbatch]

Hi Kabir, the referenced issues are #152 and potentially #176; if you still want to do the task, you should get in contact with @giangiac. He is driving most of the front-end development.