tqec icon indicating copy to clipboard operation
tqec copied to clipboard

Cancel Button for save qubit constellation

Open rryoung98 opened this issue 1 year ago • 6 comments

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: image

To be this: スクリーンショット 2024-02-14 午前10 26 21

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.

rryoung98 avatar Feb 14 '24 16:02 rryoung98