Improving the Dependency Wheel at the GitMerge Hackathon

Last week I attended to the GitMerge Conference in Berlin. It was sponsored by GitHub and Google. On Saturday their was the hackathon day. I found somebody who want to contribute to the dependency wheel project. Many Thanks to Coding46 for his contributions!

The dependency wheel project is a JavaScript Library which enables you to draw a circle of dots and connect the dots according to his dependencies. Here is an example:

687474703a2f2f6d656469612d63616368652d6563352e70696e7465726573742e636f6d2f75706c6f61642f37323632303631323731313836373532325f475551696f6b76555f632e6a7067

I integrated this library into the VersionEye project to display dependencies of Software Libraries. Some users complaint that they can’t see the direction of the dependency. In the graph above you can’t see if dom4j is requesting pull-parser or pull-parser is requesting dom4j.

At the GitMerge Hackathon we did some brainstorming how we could solve this problem. We decided to solve the problem with different color. If you go with the mouse cursor over a dot we highlight the outgoing dependencies with a violet color and the incoming dependencies with a green color. Here is an example.

Screen Shot 2013-05-15 at 11.08.16 AM

In the graph above you can directly see the directions. Actionpack depends for example on activesupport, activemodel, builder, erubis, journey, rack, rack-cache, rack-test and sprockets. 2 other dependencies in the circle are depending on Actionpack. Actionmailer and railties are both depending on actionpack.

If you now move the curser to the actionmailer dot, the color of the connection to actionpack changes to green.

Screen Shot 2013-05-15 at 11.15.55 AM

Again many Thanks to Coding46 for his contributions and his help. Without him this wouldn’t be done.

One thought on “Improving the Dependency Wheel at the GitMerge Hackathon

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s