⚙️ Fixes dependency tree-view

[AdiAkhileshSingh15]

Changes Summary

This PR aims to make the Dependency Tree View tidy and render it free from unwanted UI glitches. As discussed in the issue #182, it was not properly retracting for open branches.
After confirming that the issue was with the tree rendering package, which was unable to deal with the complex data generated by StatWrap, and not the data object itself, I explored some npm packages which MIT (or Apache2) license, namely @carbon/charts-react, gojs & react-d3-tree, etc.
The first one didn't offer much control over the UI for tree-view, gojs didn't quite fit into how we render the data and the code format, so, I went with this d3-tree which worked quite well and fit better than the earlier one, which I later came to know while noticing no changes in the package.json, that this was earlier used to render the dependency tree as well :))
Which left me trying to render the old one, but it was not properly setup so, the view was cluttered at a corner.
I'd thus like to clean that up, as now it's of no use, if you allow.

Styling and color-scheme used was upto my color-sense which I don't think is good enough :) The prop values are set by trial and testing the UI, so, I'd suggest you to modify these with what looks better to you.

Attachments

Initial view for depth 2.

When the app branch is closed with backend branch open.

When the backend branch is closed with app branch open.

ScreenRec isn't currently working, transition is looking quite decent. Will try to attach it as well though, later.

Related Issue 🐛

Closes #182

Checklist ✅

• Confirmed that the issue lies with the echarts package, and not the data generated by StatWrap.
• Tree is functioning alright, with smooth transition animations of contraction, expansion, focus & zoom.
• I have tested all the changes locally.

Reviewer

@lrasmus

[Abhijay007]

Hi @AdiAkhileshSingh15,

Thank you for your contributions. However, the current dependency tree-view is not resolving the issue properly; it is also causing some new ones:

It is not seamless, and it requires multiple clicks to open the dependency tree view. I tried it locally, and as a user, I find it more difficult than the previous one. Sometimes it gets auto-zoomed, and it also requires multiple clicks to open the graph. You added some more info, which is good, but the way it's displayed makes the tree less user-friendly. I suggest making it a bit similar to the previous version or just solving the problems we had previously instead of changing the styles entirely. I think this approach might enable us to achieve better results rather than revamping it all.

As you can see in the video below, sometimes it requires multiple clicks and gets auto-zoomed when clicked on the last node of the dependency tree. I believe this needs to be fixed :

StatWrap.2024-03-15.09-52-24.mp4

Also, the extra info that you added here like "asset type" is nice, but I am not sure if we need that. If we really need it, then I think it can be displayed in a much better way.

[AdiAkhileshSingh15]

Hi @Abhijay007

Actually, what you are facing with Auto-zooming is because this graph has enabled zooming on scroll/double-click so when you are not acquainted with the scroll and zoom mechanism, you might make mistakes zooming it in, for that, I'd like to tell you how exactly the zoom/move works with this one.

User Interactions

1. We can zoom in/out with the scroll of the mouse up/down (or a 2-finger glide up/down on the touchpad for a laptop)
2. We can also zoom in to an area with a double-click there.
3. We also get a zoom when we click on any of the nodes, that actually centers the node in the tree workspace, which seemed quite relevant to the view, as while one tries to open a branch, they'd like to shift the focus on the node generally.
4. To move the tree, we can just double-click and not lift the mouse (or uninterrupted left-click) on it to catch it and move it wherever we want.

These probably sum up the zoom/move interactions, if I missed any I'd surely let you all know. I've checked myself that am not getting any unwanted zoom/move other than these.

And, for the multiple clicks to open dependency tree - I believe you're talking about it when we load this tree while we come from some other page, or when we initially render it, for which I'd recommend you to not click multiple times, and just wait for it to render, actually this is the what I faced with the earlier tree-view as well, the data being very complex, that too used to take a bit of time to load completely, and I believe their speeds are comparable.
I'm attaching video comparisons between the two, we can notice a very slight difference between the load times for the two, but, the functionality it offers after loading is quite better compared to the previous one which just seemed a static tree view with clickable nodes. We can though make it similar to the previous one as well by disabling zoom/move etc,but, I believe these would come of great help to the end-users.

Attachments

Current Treeview

2424a333-70af-4a37-8a1b-c9d5384b8613.mp4

New Treeview Demonstration

bbd749a1-54c9-48c5-877b-25e2ab7747d1.mp4

The addition of "asset type" can be discussed with how the maintainers would want it to look, this is just the UI and view that looked decent to me, and the font family that looked pretty cool with this tree view, we can obviously alter those things as I get some input. The one great thing with this package is that it offers quite decent control over the UI and functionality.

@lrasmus Please take a look at it and suggest any changes to make it better.

[lrasmus]

Thank you @AdiAkhileshSingh15 for the proposed fix, and @Abhijay007 for your feedback! I'd like to run this by a few of the other team members to get their input as well.

[lrasmus]

@AdiAkhileshSingh15 - per the comment made, we would love to play around with the changes you've made more. We would like some hands on time to test ourselves, so my request is to have your changes available in the D3 version of the tree. We are not going to fully enable it in the main version yet, but this is a great contribution, and we would love to have it in the code base to work with more. Thanks!

[AdiAkhileshSingh15]

Thanks for your response @lrasmus
Sure, I'd shift these changes to the d3 version of the tree, so the team members can take their time to test and play with it, and may eventually enable it in the main. 😄

[AdiAkhileshSingh15]

@lrasmus Please check, I've updated the branch

[lrasmus]

Thank you! Changes look good, we are excited to try this out more.

[lrasmus]

We would love to have this available to try out. We had created 2 versions of the tree and graph components - one for D3 and one for ECharts. Because this uses react-d3-tree, could you please move these changes to the file: https://github.com/StatTag/StatWrap/blob/master/app/components/Workflow/DependencyTree/DependencyTreeD3.js?