Switch to AntD TreeTable and remove deprecated code #32
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
One finding from testing:
|
|
Some more findings:
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #27
TreeTable.mp4
Tree
This PR removes the PrimeReact
TreeandTreeTable, as well as the VSCode Tree. Instead, it introduces the Ant Design (AntD) Tree Table, which is allows virtualization and provides a simpler API. Alongside this, all deprecated code has been removed, ensuring the project now exclusively uses the new component.Model
One major issue with the slow rendering was the back-and-forth communication between the VSCode extension and the webview. To address this, the peripheral model structure has been separated into three layers:
PeripheralNode): Handles data loading and updating.PeripheralNodeDTO): Contains the serialized data of the peripheral model, which is transferred to the webview.CDTTreeItem): Renders the tree table in the webview.UI-specific aspects have been moved to a custom converter (e.g.,
PeripheralNodeConverter). This converter uses the serialized data to create the tree for rendering (Serialization Model -> Display Model).The webview only sees the Serialization Model / Display Model.
Communication
UI-specific actions like expansion and pinning are handled directly in the webview, which updates the display model immediately. However, these updates are also propagated back to the extension to update the domain model when needed.
The webview can request a resync if necessary. In such cases, after an action is triggered, the entire serialized domain model is sent back to the webview to recreate the display model.
This means expansion happens instantly, and if any data changes, the extension can sync the local model accordingly.
Follow-up
I’ve tried to be as cautious as possible and avoided changing the peripheral model too much. It still includes "pinned" and "expansion" properties for now, but we should consider removing these in a follow-up PR.
While the tree feels smoother now, there’s still room for improvement. For instance, caching the peripheral models and serializing only the changes could make it even faster.
Instead of saving the expanded/pinned state directly in the Peripheral Model. We should move it to a custom service.
Most of the commands are not necessary anymore (e.g.,
Pin,Set Format). We should remove them and handle those cases directly in the webview. For example, we could show a context menu with the different formats instead of using the VSCode quick select.PS: Most of the changes are moving functionality around.