Proving that our codebase is certified spaghetti with graphs

Spaghetti Suspicions

During the last big feature push for Vivid I felt like our app was getting more impressive at the expense of organization — basically an inevitability in any codebase.

Some of the cool things you can do with Vivid

Vivid is an in-browser styling editor that lets you quickly modify your code — feel free to check it out here.

I was proud of our new features, especially the command palette functionality we built out. Our code itself was nice too!

But I was still starting to see files that imported from way too many separate modules. Unsure whether the grind was getting to me or not, I decided to do some digging and collect real, concrete data on the topic.

The Vivid command palette (this little pane can do a lot, trust me)

The Process

To start with, I got a list of all our imports with find and grep

find . -type f -name "*.ts*"
grep -E "import "

After some regex find-and-replace magic and a little Python to sum duplicate lines, I ended up with a clean CSV of import counts between any two modules in our codebase.

After that, I used pandas, bokeh, and holoviews to make a Chord diagram (really popular with genetics research, apparently) over the data. After a little Photoshop to make it ✨pretty✨, I was left with this:

So… much… spaghetti…

Wrapping Up

Besides being pretty to look at, I think this chart does a good job of showing the biggest problem with our code structure—lots of exports we made to be used locally ended up being really useful elsewhere and making a mess of our module hierarchy.

The fix isn’t too bad, we just have to start extracting those exports, mostly utility functions, into their own more generic module that others can import from.

All in all, a fun and useful excercise! If anyone’s interested in us releasing the code to do this for your own codebase, let me know in the comments.

And be sure to check out Vivid, the imports are spaghetti but the app is 🤌🏼