tqec
tqec copied to clipboard
Cancel Button for save qubit constellation
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:
- Click on create a constellation
- 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.