Add a "Stop" button when running

[certik]

If you make a mistake in the code and it does not finish quickly (say infinite loop or too large a loop), we need to add some button to be able to stop it.

One idea is to turn the Run button into a Stop button. Another idea is to make the Stop button to pop up next to it, and it will disappear when it finishes.

[faze-geek]

I have set up the website and successfully run it on my local machine. I will try this out soon.
I am thinking of a diff like this -

<div>
                <Button disabled={disabled} onClick={() => handleUserTabChange(activeTab)}> <PlayCircleOutlined /> Run </Button>
                <Button disabled={!disabled} onClick={() => {/* Add code to stop the execution here */}}> <PlayCircleOutlined /> Stop </Button>
</div>

Basically, The disabled prop of this button is set to the opposite of the Run button's disabled prop to ensure that it is only clickable when the program is running. Now I will need to add the code to stop the execution in the onClick event handler of this button.

[certik]

Something like that, yes.

[diivi]

When I start an infinite loop on the website, it becomes unresponsive and I can't click anything unless execution completes.

[faze-geek]

Yes, the unresponsiveness should be dealt with first. I didn't even need a infinite loop. Simply printing numbers upto 100 didn't fetch a response in the output terminal.

[certik]

Let's say a long (or infinite) loop is running in WASM.

• How can one stop the execution from JavaScript after pressing the Stop button and ensuring the button can be clicked if the UI is not responsive?
• What are some techniques to ensure the GUI is responsive?
• Is it possible to give the program N seconds to finish (say with N=3), and always kill it if it doesn't finish?
• We can start with N=1, and if it times out, the user can then select a larger time out manually, in exchange for unresponsive UI (if there is no other way to deal with the unresponsiveness).

[diivi]

One way to deal with unresponsiveness is using web workers.