lemmy
commented
1 year ago Great work! The CI will now upload the .vsix artifact automatically if you rebase to master. By the way, here are a few more usability issues with the old web form:
- It is a nuisance to scroll back up again with long error traces to hit the "Check again" button
- Manually collapsing long counterexamples is a pain
- Missing an easy way to copy a state from the trace in TLA+ format to the clipboard to, e.g., make it the initial state for the next check
afonsonf
Hi, here is the draft PR for the migration of the extension webui (tla+ build window) to use the vscode toolkit. The webui was also rewritten in react, I go in detail on the changes bellow.
Resolves https://github.com/tlaplus/vscode-tlaplus/issues/261
UI Changes
I've focused primarly on migration of the code to react and the introduction of the toolkit, therefore, the old and new ui are mostly the same visually.
The biggest change is the introduction of pannels to condense the information (see prints):
Also, from initial stress tests the performance appears to be at least the same (specs I used to test it: https://github.com/afonsonf/vscode-tlaplus-stress-specs). I changed the filter text field to not update the ui on input but on change as it lags the ui if you update it on every input. Also some improvements by not rendering hidden variables in the tree view to have better performance.
New UI
Old UI
Implementation
The webui is composed of two parts. An extension side part that is responsible for instanciating the webui and its lifecycle, has access to the full vscode api, and can send and receive messages from the webui. And the webui part, which has access to a very limited vscode api that allows it only to receive and send messages to the extension part.
The extension part is now in a panels folder, and the logic was cleaned up and moved into a class. Removed also the logic that checked for the source of the check result because I did not find a use for it, but if required I can add it back.
For the webui part a new folder was created, that includes the css and react code. I divided the UI in four main components: Header, Stats, Outputs, and Error Traces.
The implementation of the UI elements is mostly the same with the exception of the panels and that, in the Error Trace, the hidden variables in the tree view are not "processed" to have better performace.
The icons were also changed to use the icon library from vscode: https://github.com/microsoft/vscode-codicons.
In terms of implementation I have followed some other vscode extension projects that have webui components, like:
I would say one of the biggest differences with those projects is that I did not use class components since they are considered legacy: https://react.dev/reference/react/Component
References