Numbat online editor

[sharkdp]

This is a first prototype of an online editor for Numbat with "immediate" results on the right hand side panel:

Try the latest version here

Any contributions — to the Design, the HTML, the JS part, the CSS — are very welcome! I'm not a frontend engineer. Feel free to branch off from this.

How to run this locally:

cd numbat-wasm
bash build.sh
cd www
python -m http.server
# Open http://0.0.0.0:8000/editor.html in the browser

To do:

• Error messages are broken
• Vertical alignment between input and output is super hacky

closes #536

[rben01]

I wonder how vertical alignment can work in the face of errors in the results pane. They usually take up many more lines than the input that generated them. Does the Ace editor support making certain lines multiple lines tall?

[sharkdp]

I wonder how vertical alignment can work in the face of errors in the results pane. They usually take up many more lines than the input that generated them. Does the Ace editor support making certain lines multiple lines tall?

Maybe that's okay because we would skip evaluating further lines if there was an error? The question probably remains though since there might also be multi-line values, like strings or long lists/structs.

[Goju-Ryu]

I’m currently experimenting with that actually. It is a challenge to be sure and ace doesn't seem to support features that makes it easy. I am however looking into some more 'hacky' solutions like manually setting the height or top of certain lines as a possible fix or if nothing else works add extra lines in the editor to compensate similar to how results are currently handled.

[sharkdp]

Maybe we need multiple editors? One for each input?

[Goju-Ryu]

Maybe we need multiple editors? One for each input?

If we do that, then I think a jupyter like interface would be a better fit than the side by side view. It would at least not be trivial to make it feel cohesive if each part was handled as a different editor while keeping the appearance of a single editor for the user.

[rben01]

I’m currently experimenting with that actually. It is a challenge to be sure and ace doesn't seem to support features that makes it easy. I am however looking into some more 'hacky' solutions like manually setting the height or top of certain lines as a possible fix or if nothing else works add extra lines in the editor to compensate similar to how results are currently handled.

I took a quick look at this and Ace resets lines’ top on every update, so you'd constantly be fighting it.

[Goju-Ryu]

I took a quick look at this and Ace resets lines’ top on every update, so you'd constantly be fighting it.

That's unfortunate. I’m pretty sure they are positioned with absolute as well so setting the height alone wouldn't work either.
The hack with inserting new lines should work but feels bad and would re-trigger the interpreter in all likelihood.
I’m considering if there could still be a css fix for it.

[sharkdp]

Maybe it's useful to do a bit of research into similar tools (see #536, #19). It's not like we have to use ace.js either. It's just something that worked reasonably well for the blog post (https://numbat.dev/articles/intro.html), but I haven't tried anything else.

[Goju-Ryu]

Maybe it's useful to do a bit of research into similar tools (see #536, #19). It's not like we have to use ace.js either. It's just something that worked reasonably well for the blog post (https://numbat.dev/articles/intro.html), but I haven't tried anything else.

I think that would probably be a good idea. Getting a more clear direction and finding tools that best fit that vision would probably be necessary in the long term in any case.

Should we maybe open a discussion about which kinds of UIs/frontends are desired and how to prioritize their development?

[sharkdp]

Should we maybe open a discussion about which kinds of UIs/frontends are desired and how to prioritize their development?

Sounds great.

The following Numbat "frontends"/clients currently come to mind:

• REPL interface, native (https://github.com/sharkdp/numbat/tree/master/numbat-cli)
• REPL interface, web (https://github.com/sharkdp/numbat/tree/master/numbat-wasm)
• REPL interface, web as PWA (Deliver as a PWA on the web #371)
• REPL interface, mobile (Website doesn't work well on phone #218 (comment))
• Editor interface, web (Numbat online editor #550)
• Launcher-like interface (https://github.com/MatthiasGrandl/Loungy, https://github.com/MatthiasGrandl/Loungy/blob/main/src/commands/root/numbat.rs)
• Numbat kernel for Jupyter notebooks (Jupyter Notebook Integration? #51, Jupyter kernel (WIP) #147)
• IRC bot with Numbat plugin (https://github.com/eminence/anna/)

[Goju-Ryu]

I think a Maple style interface would fit numbat well. It is a variation of the editor interface, but a style that I think would be well suited for many uses of numbat in larger calculations.

I'll also mention the possibility of a CodeMirror language pack, that while not strictly a frontend for the language, would make it significantly more accessible for third party editors to exist, making use of the wasm or cli frontend to run code and the language pack for editor functionality. This would probably only be worth it currently, if we end up using CodeMirror for the official editor though.

Using the vs-code extension as a pseudo frontend might also be worth considering. I seem to remember there being a reason it isn't published, but I couldn't find it. If indeed there is something stopping it from being published this suggestion can be disregarded.
My idea with this is that many scripting languages can be written in run through visual studio code, and would provide an easily accessible way of using numbat locally for longer lived usecases.

[sharkdp]

Not really an answer to your post, but maybe something else that might be interesting: This is the editor that is being used in VS code. It's open source: https://microsoft.github.io/monaco-editor/. Maybe this is a better ace alternative?

[Goju-Ryu]

Maybe this is a better ace alternative?

Hmm that is definitely worth checking out. I'll take a look at it and see if it might be a better fit.

[endigma]

Monaco is definitely the way to go here, you can probably unify development of any extra features here with the vscode extension if you do so. IIRC it even supports LSPs so if there was to be a numbat-lsp at some point that would also work.