nbtutor - separate out the visualisation window into a floating dialog?

[psychemedia]

The nbtutor visualisation appears in the code cell that the nbtutor magic is running it. With the notebook layout split into a two column view, this makes things cramped when using nbtutor.

Possible solutions:

• button to toggle "two column" vs normal single column layout;
• floating nbtutor visualisation panel. (At the moment, the visualiser is inside a div with a unique id and class nbtutor-canvas)

Re: floating the panel, could it be floated like the nbev3devsim widget in a JQuery dialog widget?

[psychemedia]

Inspecting the widget, we can extract the visualisation div id and then open it as a dialog using a proof of concept such as:

%%HTML
<script>$( "#SPECIFIC_ID" ).dialog()</script>

We can perhaps then address rig this to be always the case in the src:

https://github.com/lgpage/nbtutor/blob/07798a044cf6e1fd4eaac2afddeef3e13348dbcd/src/es6/notebook/notebook.es6#L49

The nbtutor package doesn't install directly from the repo - it requires a build step first - so doing a quick test of the above tweak is fiddly...