Define UI for visualize launch files dependencies and select JS/TS libraries to implment it

[yhisaki]

Defiene cool UI for visualizing launch files.

• Node-Tree Graph?
• Something like Directory View?

Which library should we select?

• D3.js
  • standard, customizable, but little difficult.
• dagre
• antd

[yhisaki]

test file to visualize
tree.json

[SamratThapa120]

https://github.com/vasturiano/react-force-graph?tab=readme-ov-file#:~:text=Force%2Ddirected%20tree%20(DAG%20mode)%20(source)

This react package seems like a good fit for our purpose

[yhisaki]

Thanks! It looks nice!

When we implement with react, vscode-webview-ui-toolkit-samples/hello-world-react-cra will be useful as a reference.

[SamratThapa120]

@yhisaki
This react package is good too. It has search feature too
https://github.com/frontend-collective/react-sortable-tree

[SamratThapa120]

I have been able to integrate this library to the extension, and it works quite well

[SamratThapa120]

Screencast.from.2024.05.13.09.52.40.webm

Here is what a functioning UI looks like using react-sortable-tree.
Features;
1) Collapse other nodes except ancestor nodes for easier viewing, upon clicking a node
2) right click to view the file represented by a node (the file path is wrong right now, so the file is not found in above video)
3) search feature using default vscode search option