kornysietsma / toxic-code-explorer-demo

Demo of my work-in-progress toxic code visualisation thingy

ARCHIVED this is part of my older code tools - see https://kornysietsma.github.io/polyglot-tools-docs/ for latest stuff.

Toxic code explorer demo

Click here to see the live demo!

A fairly simple treemap to view simple language-agnostic code metrics:

• Lines of code
• Age since last change (months)
• Number of authors
• Indentation as a proxy for complexity
  • average (actually median) indentation
  • greatest (actually P95) indentation

These are fairly simple measures that just point you in the general direction of toxic code. They should not be mistaken for code quality metrics!

However, they have the huge advantage that they can be determined in an almost language-agnostic way, and quite quickly.

See below for tools used to produce these metrics

Pre-generated metrics are included for several big open-source projects. In time I'll publish the tools and scripts to calculate similar files yourself. At the moment it's all hard-coded to make it easy to demo.

Other tools

The metrics here are generated by:

• cloc2flare which takes the output of cloc and produces flare files
• csvmerge2flare which takes the output of code-maat and merges it with the flare files
• indent2flare which merges indentation data into the flare files
• pruneflare which I use to prune out things like vendor source code from flare files.

Generating metrics for a project

I've made a sample script in scripts/sample_code_analysis.sh that calculates all the metrics I have so far for a project (I use the atom editor as it makes another nice demo).

It's fairly simple:

• fetch the uberjars for all the tools listed above
• fetch the source code of the Atom editor as a sample
• run cloc and pipe the output to cloc2flare
• run git log to get log data for the last 5 years
• run code-maat to calculate age and author data
• pipe the code-maat output into csvmerge2flare to update the flare data with age and author data
• run indent2flare to add indentation data to the flare file
• do some simple bash scripting to wrap the JSON data so it can be used as a JavaScript source file.

This is just a sample! - you may well want to do things differently - prune out vendor code, merge several git repos, use a different url prefix, or other stuff.

But this is the general pattern.

It should be quite feasible to add your own metrics in similar ways, and tweak the UI to show them.

About the code

This code is originally based on some thrown-together work a few years ago - produced using sample d3 code and some very simple glue scripts in 2 or 3 days of frantic work.

It is far from perfect - it's been cleaned up but has some ugly warts around state management, still needs a fair bit of lovin'

My D3 approach is covered in more detail at https://github.com/kornysietsma/d3-modern-demo :

• native es6, this won't work on any browser more than a few months old! Specifically, it needs es6 module support - https://caniuse.com/#feat=es6-module - so no IE support for a start.
• it uses css grids in a fairly basic way, similarly needing a new browser
• it tries to prefer immutable data structures using immutable.js - actually I gave up and used mutating state in several areas, as d3 mutates things all over the place.
• no Ajax needed - data is exported as JavaScript objects so you can view the demo structures with a trivial http server, or on Github.

Run 'simple_server.sh' to view this on localhost - or when I have it set up properly you'll be able to view it on github.