Improve web app customization by allowing graph nodes to be filtered and compacted

[antoine-coulon]

Kudos to @pigoz for suggesting all these UI improvements. His great effect-sql project will be used in as an example in the following screen shots.

The goal of this feature request is to be able to customize the visualization of graph elements rendered such as

• compact directories to a single node during visualization
• be able to filter nodes that are displayed on screen (implemented in skott webapp v2)

1) compact directories to a single node during visualization

Skott generates a graph node per file. It would be great to be able to compact all the files within a specific directory/sub directory. For example on the screen shot just above, all the files included in src/builders would become a single node such as src/builders/* instead of represent each file by its own node.

Would become compacted into something like:

I think this would also need the UI to be more explicit towards nodes by making the distinction between folders and files, maybe by using icons or colors?

2) Filter graph nodes

Allowing nodes to be displayed/not displayed could also be an useful feature because Skott sometimes add nodes to the graph that are not valuable to visualize (module bundlers and test configs for instance).

I think this could be done via a CLI/API option from Skott by providing a ignore files glob pattern to also allow other display modes to benefit from that but most of the time I think it makes more sense for now to only hide some nodes dynamically depending on the analysis context (refactoring, architectural/design views). In the end, I think both will be possible.

Both those features need UI/UX thinking. My first thought would be to provide those features from the sidebar.

[antoine-coulon]

After the release of skott web application v2, nodes can now be filtered. I think that "compact" could still be an interesting feature to implement in a near future. Letting that issue opened so that anyone can track that.

[AdiMarianMutu]

I'd love to have this feature out-of-the-box with the webapp view! :)

However, how would this work with the Circular Dependencies feature? It would be nice if when using the compact mode, if there are any circular deps, the group becomes red and then when you click on it, the view only shows the files of that specific group.

I think you can take some inspiration from the Dep Graph NX uses :)

[antoine-coulon]

Hello @AdiMarianMutu,

Lately, a new "groupBy" property was introduced allowing to group files. Nonetheless, it's not directly integrated in the web application and we're tracking that in #125.

Few people had already been asking that, so it will probably land as the next feature on the web app.

However, how would this work with the Circular Dependencies feature? It would be nice if when using the compact mode, if there are any circular deps, the group becomes red and then when you click on it, the view only shows the files of that specific group.

This is what I had in mind, compact mode does not lose any information. It is just another graph, a compacted one. The goal would be to preserve all the information within each grouped node so that you can zoom-in/out. Any group containing circular dependencies would be red, and if groups have circular dependencies between them, a red arrow (the same way as between file nodes) would be drawn to show that something is cyclic involving these groups.

[AdiMarianMutu]

Hello @AdiMarianMutu,

Lately, a new "groupBy" property was introduced allowing to group files. Nonetheless, it's not directly integrated in the web application and we're tracking that in #125.

Few people had already been asking that, so it will probably land as the next feature on the web app.

However, how would this work with the Circular Dependencies feature? It would be nice if when using the compact mode, if there are any circular deps, the group becomes red and then when you click on it, the view only shows the files of that specific group.

This is what I had in mind, compact mode does not lose any information. It is just another graph, a compacted one. The goal would be to preserve all the information within each grouped node so that you can zoom-in/out. Any group containing circular dependencies would be red, and if groups have circular dependencies between them, a red arrow (the same way as between file nodes) would be drawn to show that something is cyclic involving these groups.

This sounds fantastic. Thanks for the amazing work!

Can't wait for those features to land into a future release 😊