This post describes how you can build your own visualization of the navigation inside a React web application.
Such visualization can transform a complex user journey into a more easy to understand, interactive network graph.
Context in my company
Tech stack:
- react SPA
- react-router
- 30+ screens
- screens grouped in multiple bundles, loaded only when/if needed
- folder structure:
src/screens/<bundle>/<screen>
Problem
No single place to view all these routes, that would allow new developers to quickly understand:
- how the screens are split into bundles
- the available navigation pathways between these screens
The alternatives would have been to:
- Look inside the collaborative design tool. However there was no representation of ALL the screens, but rather they were spread in multiple places, usually grouped by feature.
- Look inside the codebase, and follow the code. But this would be too tedious if you just want an overview of ALL the screens.
Solution
This started as a side project that I played with in a few evenings, since I wasn't sure if the end result would look good, or if my colleagues would find it useful.
The idea was simple: run a script that would generate a network graph made of:
- nodes
[{ id, bundle }]
- screens, grouped by their bundle - edges
[{ from, to }]
- directed arrows between the screens, indicating that the navigation between these 2 screens is possible.
These nodes and edges would be generated by looking through the codebase, with an algorithm described by the following pseudocode:
nodes = [];
edges = [];
bundles = findBundles(); // find all the src/screens/<bundle>
bundles.forEach(bundle => {
screens = findScreens(); // find all the src/screens/bundle/<screen>
screens.forEach(screen => {
nodes.push({ id: screen, bundle });
paths = findDestinationPaths(); // regexp of PATH.[...] inside src/screens/bundle/screen
paths.forEach(path => {
edges.push({ from: screen, to: mapPathToScreen(path) });
});
});
This script will output 2 files: nodes.js
and edges.js
. These files were added to .gitignore
.
Drawing the graph
I used vis.js network library (link) for drawing the network graph.
This library comes with a few useful built-in features, out of which I used:
- left-to-right hierarchical layout
- color grouping, based on the bundle
- physics engine, using repulsion solver
NOTE: I had to play around with some of the options, in order to find the ones that gave the best looking output.
Running the script
I added a new script entry inside package.json
, that does:
"view-network": "node scripts/network/extract.js && http-sever scripts/network/index.html
The index.html
file will do a few things:
- import the generated
nodes.js
andedges.js
- import the drawing library
- draw the graph
- add extra UI features, such as a dropdown select menu, so that you can choose which bundles to view.
Result
Here are 2 examples of graphs that can be generated:
NOTE: I had to add some blur, so that I don't share confidential details.
Another example, using a different layout:
Conclusion
Sometimes your side-projects can turn out to be useful for your company.
Top comments (0)