search

antoine-coulon / skott

All-in-one devtool to automatically analyze, search and visualize project modules and dependencies from JavaScript, TypeScript (JSX/TSX) and Node.js (ES6, CommonJS)
MIT License
645 stars 25 forks source link

Webapp display mode node spacing #80

Closed EdoMagen closed 11 months ago

EdoMagen commented 1 year ago

Hi, I'm trying Skott out on a pretty big codebase - looks great so far, but on the webapp display many nodes are layed out one on top of the other. Is there any parameter that can determine minimal node spacing?

image
antoine-coulon commented 1 year ago

Hello @EdoMagen, unfortunately the current visualization is facing few limitations feature-wise, that's why I initiated one month ago a whole RFC to revamp the webapp entirely #72. It will include node spacing and allow layout to be customized a little bit more and of course many other features. So this will for sure be fixed in the next version of the webapp.

Consequently I'm sorry but I have unfortunately nothing to help you with as of today to improve the visualization of your project with 3k+ nodes. If you ever think of something else that could be helpful on your side for such big projects let me know (directly in the RFC please so that we can keep the discussion there). For instance, I've thought about filtering nodes in a way that would help you draw only subset of such graphs.

EdoMagen commented 1 year ago

Thanks for the quick reply @antoine-coulon, as for ideas:

  1. Lazy loading nodes by depth / maybe loading nodes as you traverse the graph / maybe layering the graph
  2. Outside the box - 3D using something like https://vasturiano.github.io/3d-force-graph/example/large-graph/ or https://plotly.com/javascript/3d-point-clustering/

Just thoughts, keep up the good work!

antoine-coulon commented 1 year ago

Thanks to you @EdoMagen for this feedback and these feature suggestions!

1 - Yes, for big graphs I'll for sure need to find a way of layering or clustering. This could be great to add that amongst graph visualisation options panel. 2 - 3D would be super cool, but could you provide me inputs about why it would be better in your opinion than a 2D plan for projects? It would naturally act as a layering system leveraging the 3D depth (Z axis) but I'm afraid the whole graph in the whole plan would be hard to represent in a way that would provide a big picture as the 2D does. But 3D could definitely be a nice idea to explore

EdoMagen commented 1 year ago

@antoine-coulon re: #2 - For big projects I'm not sure if 2D would allow enough spacing as edges would intersect more than if there was 1 more dimension to direct the edge to, maybe it will just require more distance between vertices. It's possible that there is a magic number that will tell from how many edges/vertices would cause too much intersection (e.g. - more than 360 vertices per edge) and force 3D but maybe a 2D / 3D toggle would allow users to visualize as needed. Just thoughts :)

antoine-coulon commented 1 year ago

@EdoMagen re! Yes indeed 2D is pretty tricky as skott would need to determine the best layout and spacing automatically depending on the graph shape, thing that is near to be impossible + sometimes cycles are making the task even harder. That's why I was leaning towards a panel where one could configure himself the settings that fit best for his project and 2D/3D could be one of these things (and also node spacing, but also graph layout, hierarchical, brain networks, etc).

Thanks for the discussion, I highly appreciate it, that confirms me that skott needs a lot of UI improvements for the graph visualisation part. Lot of work ahead but we'll get there for sure!

antoine-coulon commented 11 months ago

Hello @EdoMagen, I just released the v2 of the web application for skott.

This includes many ways of configuring the 2D graph that can improve node spacing, you can chose a type of layout ("cluster" or "hierarchical") and play with options such as node spacing that can help customize spacing between nodes.

Note that some spacing algorithms (depending on the chosen layout type) may fit better to your project so feel free to test them all.

Note also that there is an option improve spacing that will be disabled by default as it's introducing performance bottlenecks on heavy graphs, but it can be worth it to enable it even though it might take few minutes to build a whole graph with 3k+ nodes as shown on your screen shot.

I'll experiment graph renderers relying on WebGL to bypass these perf limitations in the feature, but to date vis-js is the best solution to match visual interactivity with node spacing. the advise I would provide if perfs are really bad is just to reduce the provided dataset size by filtering it upfront (using CLI options) or filtering in the webapp using the file explorer.

Let me know how it goes whenever you upgrade to the v2 :)