Hide all codes and make the UI feel real

[GiggleLiu]

I had so much fun playing with PlutoUI, thank the developers. In order to make the Web UI feel real, I made some widgets here https://gist.github.com/GiggleLiu/aff2af66a896cf8a05310b8ba66f540f

Two issues are addressed in this gist to make the UI real

1. hide all code editing features,
2. run a piece of code if and only if a "run" button is clicked.

However, both are not yet perfectly resolved.

1. I don't know how to completely eliminate spaces of empty cells. It revives every time when there is a new output, or a cell being selected., which makes the UI looks cheap.

2. In order to prevent the code block running repeatedly, I have to use some ugly design in the code. I wish there can be a "real" button that deterministically control the execution of a code block.

[fonsp]

Cool!

What you could do is output

<style>
body.hide_all_inputs pluto-input {
	display: none;
}
</style>

(or something)

and then with you button, you would do:

button.onclick = () => {
	document.body.classList.toggle("hide_all_inputs")
}

This would make it persistent, even when outputs are changed in other cells.

[fonsp]

Curious to see how you made the run button!

[GiggleLiu]

@fonsp

Thanks for your suggestion. It solves the first issue perfectly, expert is expert. :+1:

For code, see the updated gist.

[GiggleLiu]

For the second issue, I "solved" it in a hacky way.

1. create a button and bind it to the click counter run (initialized to -1)
2. create a mutable variable event_finished of type Ref
3. if and only if run is updated, or the first run, event_finished can be restored to false.
4. if and only if run counter is >= 0 and event_finished is false, the target code can be executed.
5. the target code will set event_finished to true to block multiple execution.

loophole: the requirement 3 is not perfectly implemented, because when one accidentally modifies the cell

let
    run
    event_finished[] = false
end;

It can still trigger execution. This cell must be hidden!

[GiggleLiu]

The counter is easy to implement. The hard bit is cut the variable dependency tree in pluto. e.g. using the following statement to tell pluto, this code block depends only on run, and the compiler stops analysing the variables in the code block.

@depends run begin
     ...
end

[fonsp]

Instead of writing a Julia mechanism to break out of reactivity, we could also create a "confirm wrapper" around multiple inputs, which delays updating the bond until you click submit:

https://github.com/fonsp/disorganised-mess/blob/master/confirm%20combine.jl

[GiggleLiu]

I love this feature, it is useful when one need to tune the parameters before running. But I don't quite understand how does this work when the menu contains multiple cells? For example, I am building a device control system that is 4 pages long...