4 ms·

Nice work! Other posts in this thread are touching on it, but graph layout and layer segmentations are where you could improve. Screen real-estate is the bigg

by jschrf 3y ago

Nice work! Other posts in this thread are touching on it, but graph layout and layer segmentations are where you could improve. Screen real-estate is the biggest challenge when visualizing large amounts of code. Similar to maps show different detail levels based on aspect ratio and zoom, you can decompose your "features" (mapping terminology) based on level, i.e. packages->modules->functions->code OP, have you ever used Gephi? I used to build static analysis tools for viz of large-scale codebases. Taking a bit of time to export analysis data into a Gephi format (GEXF in my case) really helped. In Gephi, you can play around with different layout algorithms (peep the plugins). This may help you select a layout algo or combination thereof to help render tons of data in a human-friendly form.

jschrf 3y ago
OP here's a couple examples of large scale static analysis diagrams. [1] is a TypeScript database with ~250K LoC. A fairly advanced product that would benefit from what you're building. The colors represent different architectural layers. Each node is a folder with files in it. Edges represent inbound/outbound dependencies. There's simply no way for it to be labelled effectively. [2] is the same codebase, but instead of inter-module dependencies, it's showing function/method calls. One takeaway after working in this space for a while was that visualizing spatial relationships of anything sufficiently complex is extremely hard on a monitor. These representations benefit tremendously from being interactive. [1] https://i.imgur.com/IdY5ghC.jpg https://i.imgur.com/IdY5ghC.jpg [2] https://i.imgur.com/rv4OYun.jpg https://i.imgur.com/rv4OYun.jpg