RFC: revamp skott web application

[antoine-coulon]

Started in #72

The goal is to rebuild the application from scratch to add a lot of features and DX improvements, but also enhance maintainability and reduce complexity.

The Graph network would still remain the central piece of the application, but a lot of data collected by skott is still not leveraged.

Currently, I'm thinking of adding 6 sections:

• Summary section: visualize global stats (as it was done in the previous version but in a better way) + listing npm (+ show unused dependencies) & node.js dependencies (if flags were enabled)
• File Explorer section: visualize files à la VS Code using a file explorer that would allow you to browse files, filter files and interact with them (focus on file, isolate file, etc)
• Graph Configuration section: configuring the graph, changing the layout mode allowing to draw graphs differently based on user choice (hexagonal architecture -> hierarchical layout) as it's too complex to do it automatically. But also changing nodes colors, nodes spacing, etc.
• Dependencies Explorer section: section focused on displaying dependencies of the graph either they are internal (cycles), external (third-party) or builtin (native to the Node.js platform).
• Cycles Explorer section: section focused on cyclic dependencies that allows you to filter out cycles and better see what's the composition of each cycle, using the Network only we can't distinguish sub-cycles
• Interactive Playground section: focused on graph traversal, filtering dependencies starting from nodes, etc. This would allow a user to say isolate one file and draw me all it's deep dependencies or isolate one file and draw me all files that depend on it.

Here is a preview of the UI:

[antoine-coulon]

Revamp has released in skott-webapp@2.0.0 (shipped with skott@0.31.0).

Missing features still to be implemented are:

• Cycles Explorer section: section focused on cyclic dependencies that allows you to filter out cycles and better see what's the composition of each cycle, using the Network only we can't distinguish sub-cycles
• Interactive Playground section: focused on graph traversal, filtering dependencies starting from nodes, etc. This would allow a user to say isolate one file and draw me all it's deep dependencies or isolate one file and draw me all files that depend on it.