Show HN: GitHub project structure visualizer | Hacker News Reader

Show HN: GitHub project structure visualizer

veniversum.github.io

141 pointsveniversum40 comments

I'm looking forward to one day being shown a "visualizer" that actually gives me sane insight into the structure, instead of some wibbly-wobbly animated node graph that I have to click around and zoom in/out. These things can sometimes look pretty, but usually I'm left none the wiser about the actual structure.

Completely agree - Gource is also mentioned here and does something similar.

Probably more useful tools are CodeCity and JSCity, that go beyond the layout of the repo and get to the function level, so they are able to give potentially useful insights like coupling or complexity of classes. In any case, there's a long way to go as far as the effort of running these programs actually being worth it.

https://wettel.github.io/codecity.html

https://github.com/aserg-ufmg/JSCity

To be fair, I don't think the point of gource is to be "useful" so much as "cool and interesting"

What would that look/behave like? I ask because I'm starting out on making some tooling for gaining insights into coupling and coherence in ruby, and I'm at a brainstorming phase.

E.g. automatic domain concept detection and suggested refactorings around domain concepts.

Re-organizing file systems into virtual filesystems based on multiple views/perspectives on the project, etc.

Any ideas you have would be really good timing to hear about

Not really regarding what, but on the how front, I remember that one guy invented what he called "hive plots", and he seems to be claiming they're some kind of a panaceum to so called "hairball" plots:

http://www.hiveplot.net/

(His (?) earlier invention of a "circular graph" seems also to have gained some traction in sciency publications - see http://circos.ca/intro/circular_approach/)

How about an Oculus Rift app with a 3D circuit?

I honestly think "writing" code in 3d with VR could be incredibly effective. I'm starting to work on a project to test it out.

A treemap is a good static alternative to a literal tree of nodes. There are already programs like WinDirStat that use them to visualize file systems.

https://en.wikipedia.org/wiki/Treemap

http://windirstat.info/

There is an extension for Chrome I use that does this pretty well, IMO. OctoTree : https://chrome.google.com/webstore/detail/octotree/bkhaagjah...

This tool might solve your problem, Cause it shows the actual structure

https://github.com/timqian/js-code-structure

Would rooting the tree help?

https://nemu.pointysoftware.net/sink/nephscreen-1456332101.p...

At one frame per minute, I'm looking forward to where this goes

Edit: Progress report (~1h): https://nemu.pointysoftware.net/sink/nephscreen-1456335941.p...

Up to about 1fps. The DOM tree continues to gather its factions together under one banner. Meanwhile, the smaller but more easily organized devtools and webidl factions are making an early power play.

In the same vein, gource is pretty cool. It shows the same sort of graph, but animated as it changes over time. So you can watch the project develop, and even see who was working on which files at which time. It's great to put up on a screen during launch celebrations or whatever.

http://gource.io/

Why does it move and wiggle? It makes it unnecessarily hard to click on nodes. Also, it took me at least 30 seconds to figure out how to start at all as I didn't notice the small inputs in the upper lefthand corner.

Because it's using a graph layout algorithm called Force Directed Graph Drawing, where you basically connect the nodes together with springs and then run a simulation.

The algorithm's really simple and works pretty well, but unfortunately it doesn't really have the concept of 'finished' --- you just keep simulating until it looks right. Some implementations watch for small deltas and when the change rate gets low they stop the simulation, but it can take a while and people frequently don't bother.

I agree, it shouldn't have to be moving immediately. It makes the page much laggier than it has to be.

Neat! Here's an annotated version of the repo for my programming language Wren:

http://i.imgur.com/x3yztG8.png

I think it says good things about Wren that the largest section, by far, is tests. Then a big blob for docs. The actual language interpreter itself is quite small.

Glad to see it being put to good use!

You should make the example text ("Try atom/atom") a link so I don't have to type in the boxes myself :)

I'm impressed with how fast this loads. Nice work!

Suggestion: add an option to look at file contents and analyze cross-file dependencies (eg c/c++ #includes or java imports)

That's a cool idea!

However as of right now this is a completely client-side JS app, it might take too much processing power and API requests to analyze individual files.

Seems not to work for this site I made http://veniversum.me/git-visualizer/?owner=rr1000&repo=place... , but works for everything else. I guess node_modules are the issue?

Very nice visualisation!

It would be good to gracefully handle large graphs. I typed in "torvalds/linux" and my tab froze!

Yeah, I should've probably put up a warning not to try huge repos.

Here's what torvalds/linux looks like on the visualizer (pretty cool!): https://imgur.com/a/AHNcn

That's incredible. I feel like I'm looking at a cell slide of a living organism.

You might be interested in Gource then, it visualizes a repo in a very similar manner, but animates along the commit timeline.

Here's a recording of the linux repo being parsed by gource. https://www.youtube.com/watch?v=5iFnzr73XXk

Yup, that was what came to mind at first too!

I have build a similar project showing the code structure.

https://github.com/timqian/js-code-structure

The idea to make it a website is great, I might build a similar website for js-code-structure

To the author and any other with the same problem: I had to disable ublock origin to view the form at top left

awesome tool! One feature request:

Being able to search/filter by name. I often find some file being included in the build and its a pain to track down exactly who uses it (ok, not a huge pain, but it would be so much easier to do it in this)

neato, but would be much more neato if I didn't need to hover for labels [1] - at least at the first few levels

also would be cool to color/heatmap them by recent modification dates, filesize, LOC, etc.

[1] https://en.m.wikipedia.org/wiki/Mystery_meat_navigation

Great suggestions!

Might make it so that root level directories have their label always shown.

I did something like this for Neo4j, if you're curious:

image: http://www.gravitypersists.com/assets/neo3.gif

https://github.com/neo4j-contrib/versal-cypher-gadget/blob/m...

Aaaah! That thing is moving! It's alive!

I tried dotnet/corefx but quickly realized my mistake. Very cool once you get a repo that is a bit smaller.

Sneaky. You knew we wouldn't be able to resist! Worth it to see the pseudo-organic growth though, if you zoom out enough (but not too far).

There is no error message when you target a repo that is (now, unexpectedly) 404.

torvalds/linux

is utter chaos, brings chrome to a crawl :P

python/cpython (takes a long time...) clojure/clojure

Are interesting visualizations as well.

Reply on news.ycombinator.com