Feature/fancy config editor

[MW-0901]

Description

Implemented richer config editor using Monaco in order to reduce friction during bringup

How Has This Been Tested?

Need to implement more thorough testing, haven't tested on a physical robot but works in the simulator

• Unit tests: [Add your description here]
• Simulator testing: Works perfectly :)
• On-robot bench testing: [Add your description here]
• On-robot field testing: [Add your description here]

[dejabot]

I hadn't realized that Monaco is the VSCode editor. Super cool! This may be more than what we need for just JSON - esp since this ends up pulling in a lot of different JS files etc.

What would you think of trying a more self contained editor just for JSON?

Not prescriptive - just from a quick search I see https://github.com/LaNsHoR/native-json-editor. There are some other lightweight, self-contained ones. Do you think something like that could work?

Thank you again for working on this - this will be super helpful!

[MW-0901]

This may be more than what we need for just JSON - esp since this ends up pulling in a lot of different JS files etc.

If you look at the network tab, you can see that it doesn't actually request much other than the core editor component. I spent a bit yesterday removing all files other than the ones it requests, so the current state of the editor is no more than a rich json editor.

I doubt the RoboRIO would have any problem handling it, if that's what you're worried about, as the actual logic is quite simple and the editor itself is being stored in flash. I felt that it's worth it because of how mature and reliable vscode is. I think if I were to reimplement the fronted using another editor, I'd try codemirror, which seems interesting.

[rcahoon]

This is a great improvement, thank you!

[MW-0901]

This is a great improvement, thank you!

In response to Debajit's concern about Monaco's size, I made a new implementation of the fancy config UI today in Svelte that is only 908K and self-contained in one html file, vs Monaco which is a 4M JS bundle. I'm not sure if you want me to push the new frontend to this branch and swap to that right now, or if it's a good idea to continue with the current Monaco version and consider opening a new PR later.

you might put the FancyConfigUI directly under ConfigUI so they'll be listed together in the webpages' menu

By that, do you mean removing the original ConfigUI and replacing it with the new one? I was hesitant to do so at first, as I think it's good to at least keep the legacy version around somewhere, however if you think it's a good idea to replace the legacy config editor entirely I can do that as well.

EDIT: I misinterpreted what you meant, I'll make that change 😅

For the time being I'll try to resolve the changes you've requested, but I'd like your opinion on whether Monaco should be replaced with the new smaller Svelte version. I sent some screenshots and a little more detail about the new implementation on Discord if you want to see. Thanks for looking at this!

[MW-0901]

Ok, I've pushed some changes! I have:

• Placed the FancyConfigUI link above the legacy ConfigUI link
• Made CMD+s work if on MacOS (haven't tested cause I don't use a mac, but I'm confident it works. If you have one you can test it)
• I've created a README inside of the vs folder explaining how I obtained it. That required some retracing of my steps, and I think Monaco released a new differently structured version, so the library is differently structured now. Still works though!

[dejabot]

The README is very helpful, thanks Mark! And it looks like you were able to delete an additional ~100 files?

I'm sure that the roboRIO would be able to handle the editor footprint (and the exec would be in the browser, not roboRIO anyway). My concern was more around size and complexity vs what we need, eg all things equal bias towards simplicity, to make it as easy as possible to maintain this part of the codebase, to minimize fragility, etc.

The svelte editor is a nice find! That's great that it's reasonably self contained!

Do you happen to have a screenshot of what the Monaco editor looks like with JSON (apologies if I missed)? I imagine like any VSCode editing of JSON but visual is always super helpful.

Which do you think will be easier to:

1. use for day to day config editing?
2. maintain in the tree, esp if/as we want to update to new versions?
3. understand and debug, if necessary? (And do you have a sense as to whether or not either/both would require more debugging to ensure is working as expected?)

That's the criteria I'd personally use to evaluate choices - and would love to hear if you and Ryan have adds/edits to that. With a framework like that, what do you think?

Thank you again - very excited about this improvement!

[MW-0901]

use for day to day config editing

I think the svelte one is actually slightly better. It's easier to read the config when in tree mode, and when there's an error, it gives you a popup where you can click a button to take your cursor right to where the error is. While the tree mode is pretty unintuitive for me for writing a config, I think people who aren't as familiar with JSON/programming would appreciate it. Syntax highlighting is quite a bit better in Monaco, and while I personally don't care that much, others may care more.

maintain in the tree, esp if/as we want to update to new versions

The svelte one seems easier to maintain. It's an npm project configured to pack itself into a single file on build, so npm handles everything. The static html directory, including the tarred and gziped sourced code as well as the compiled editor is still just a total of 936K, vs monaco which is 4.7M. The only thing that would be inconvenient for some is if they don't have npm installed already, but having it be actually managed by a package manager is probably worth it in the long run.

understand and debug, if necessary?

In terms of understanding the source code, I think the monaco one is a little easier. Svelte has some conventions/syntax that aren't in typical vanilla JS, but it's not that hard to understand. As long as you know HTML/CSS/JS, you can read the monaco version. The Monaco is also likely easier to debug, as it is pure JS vs the svelte one which has more layers of abstraction. However, there is the fact that svelte is better at catching errors at compile time, so it's less likely to encounter a runtime error.

I've attached some screenshots showing both editors as well.

Svelte:

Monaco:

[dejabot]

this is looking pretty good! the svelte version looks much more manageable, tho as you said, the code is pretty obfuscated.

some questions, suggestions, and comments below.

@rcahoon to take a look as well (esp since Ryan requested changes in a prev review)

[dejabot]

this looks great, thank you!

@rcahoon do you mind taking a pass?

[rcahoon]

great work! very clean implementation of the API handler in WebServer.java