Hello everyone, exciting announcement about skott, the web application automatically embedded has now reached v2, after several months of development and after many issues were opened by the community asking for improvements!

If you never heard of skott, here is the first blog post introducing the tool. The API is not really up-to-date and much more feature were added since then but the introduction still remains valid!

skott is all-in-one devtool to automatically analyze, search and visualize dependencies from your JavaScript and TypeScript projects.

Installation and quick run

npm install skott -g
skott --displayMode=webapp

Here is a pretty quick overview of what you can achieve with the new version of the web application:

Graph Visualization is hard, and being able to extract valuable information from graphs with hundreds or thousands of nodes and edges is not an easy thing.

In that web application v2, the focus was on improving the experience dealing with the information that was generated by skott.

Graph configuration

Probably the most asked section! One of the biggest drawbacks of the v1 of the web application was its inability to render graphs accordingly to their sizes, shapes, and user preferences. Graph Visualization is complex because depending on the size and on the shape of the links between all the nodes, some layouts and parameters might fit better. Because it's hard to automatically determine the best configuration out there for anyone's project, I made the choice to offer some customization over graph rendering, let's see that:

• Cluster layout

Cluster layout builds graph based on connections between nodes. Especially useful when having a graph with a lot of interconnected nodes, including circular dependencies.

Three node spacing algorithms are currently available: "Barnes Hut", "Repulsion", "Force Atlas 2". These are all provided by vis-js, the library skott uses to draw graphs.

• Hierarchical layout

Hierarchical arranges nodes in a hierarchical fashion. It helps visualizing graph structures that naturally use some sort of hierarchical architecture that is no circular dependencies between parent and children nodes.

Note that depending on graph size, some layouts, algorithms or options might perform and fit better. For instance "Improve Spacing" option improves node spacing and layout rendering but takes up to 100x more time to render the graph.

In most cases, what you want is to reduce the dataset upfront to avoid rendering huge graphs that will both be a costly operation but also will be harder to visualize correctly.

File Explorer

File Explorer section provides a VSCode like explorer to browse files and directories. The whole purpose is to have an easy way to navigate through the graph by recreating the file tree as it would appear in an IDE. It also provides ways of filtering folders (either via the glob pattern or command actions available on each folder) and focusing on files.

Dependencies

Section that allows to enhance the rendered graph by highlighting circular, third-party, or builtin dependencies.

As of today this section just ported the existing features that were initially introduced in web application v1.

This section is pretty minimalist for now but it has a lot of potential, such as displaying unused dependencies (unused npm dependencies are already collected by skott itself).

Summary

Summary sections aims to provide global stats about the project itself, number of files traversed, number of circular dependencies, exhaustive lists of third-party dependencies (npm) and builtin (Node.js) dependencies used throughout the project, etc.

More to come!

A lot of information collected by skott is not yet displayed in the web application, but it's only a matter of time.

Cycles explorer

I think this will be a super useful section to fight against circular dependencies. Currently, skott only highlights nodes involved in circular dependencies. However, highlighting is not enough and can be misleading when you want to have a clear and granular vision about each independent cycle.

This section shape is not settled yet so don't hesitate to suggest features if you have ideas that could be useful for you in mind!

Interactive playground

skott provides a Graph API that can help recreating sub-graphs where only direct or deep nodes and parent/children are involved.

This would provide capabilities to focus on specific modules and recreate the sub graph that these modules are involved in, reducing the overall noise that can be introduced by drawing the whole graph.

Thanks for reading! If you ever come to use skott, share your feedback, open issues/discussions, I'm trying to make the project very interactive and reactive to contributions. Also if you like it, don't forget to drop ⭐️ :)