Issue #820 open

Bitbucket should have somthing like Github's Network graph (BB-336)

Colin Barrett
created an issue

A blog post on how the feature works: http://github.com/blog/39-say-hello-to-the-network-graph-visualizer

Here's a use-case:

I've forked project foo. I've been hacking on it for a while and haven't been paying attention to what's been going on in the mainline foo repository. I know that some of my changes have been pulled in, but don't know when that last was. The Network graph would allow me to easily see this.

Similarly, if I maintain project bar, it allows me to see, at a glance, changes in the various forks of my project.

UI doesn't have to be identical, or even similar -- but I've found that those two tasks are quite common and I don't see a good way of accomplishing them in the current UI. If I've missed something, feel free to let me know :)

Bitbucket rules, btw.

Comments (40)

  1. Martin Geisler

    I agree -- this would be a very nice addition. I manage the mercurial-i18n tree where there is a clone for each language (currently four). It would be nice if I could quickly see the number of pending changesets in each clone by going to http://bitbucket.org/mg/mercurial-i18n/descendants/.

    The GUI could be as simple as adding "x pending changesets" to the list after the clone name. Sorting by number of pending changesets would be awesome when the number of clones grow.

  2. Jesper Nøhr
    • changed status to open

    Do any of you know an open source implementation of generating a graph such as the one Github has?

    Preferably Javascript/SVG/Canvas, and not Flash.

  3. David Vega

    I was also going to suggest raphael, however that is SVG and SVG does not scale to very complex/long structures.

    What I'm going to suggest is fairly experimental (used in production by the author though) but it would be the best equivalent I know: http://github.com/anutron/art , the author is one of the mootools core developers (he wrote the official mootools book too btw).

  4. Leonardo Santagada

    I don't know if I got what I read but I think this ART package does exactly the same thing as Raphaël, it uses svg or vml as a backend for drawing.

    And I don't know how SVG scales, but github does not support the network graph for heavily forked projects anyway (and I think bitbucket will do the same) so that might not be a problem.

  5. David Vega

    SVG != Canvas

    SVG are images made out of XML (dates some way back, apart from raphael there is AmpleSDK).

    Canvas are bitmap images generated by scripts (Javascript/HTML, HTML5 stuff).

  6. Leonardo Santagada

    Yep and what I said is that I think ART is using SVG and VML and not drawing using canvas. Maybe I missed something in the code, but it looked like it was just generating SVG/VML DOM elements. That is what raphaël does, and what I thought you were complaining about.

    summing up (again, the info from ART is speculative, I haven't fully understood the code):

    Github network graph = Canvas or Flash Raphaël and mootools.ART = SVG or VML (VML is for IE)

    The cool thing about SVG is that the browser handles events and that the actual drawing, so maybe for static stuff which reacts to mouse events it can be faster than Canvas.

  7. Axel Hecht

    The raphael author has a demo up for a network graph on raphael.js, http://raphaeljs.com/github/demo.html. Might be a snapshot of http://github.com/michaeldv/fat_free_crm/network.

    I think that svg could be more performant for a network graph, in particular as most of the drawing is panning, and not so much about dom node creation or manipulation.

    If needed, one could even do some magic ala google maps, i.e., only render the visible areas (plus some border) instead of the complete graph, and then do some dynamic off-screen creation of areas which might get visible soon on panning.

  8. Leonardo Santagada

    From one of your linked articles: "Whether or not you use Canvas or SVG mostly depends on your specific application. A graphics-intensive game, where many objects are redrawn all the time is probably best implemented in Canvas. On the other hand, applications like map viewers may involve large rendering areas and might lend themselves better to SVG."

    A network graph I think would not have any moving parts (you can do scrolling using divs in SVG) so I don't think most or any of those benchmarks apply.

    The blog may talk that ART draws using Canvas, but I didn't see any code that does it, can you find it? I only saw SVG and VML code in there; If you can actually point the code that draws this svg kind of tree that he is building in Canvas I would love to take a look at it (I'm not doing that to annoy you, I would really be interested in a javascript svg rasterizer).

    This discussion totally sidestepped in a SVG vs Canvas, which I think is not the important issue here. Just using one of the many tools we talked about is good enough to do the network graph thing, if the bitbucket people need any help I'm offering to do it (for free of course), I just enjoy having this place to host my code and to look at other people code.

    The most important thing to me is that you implement Ian Bicking's idea of somehow hiding (or fade out) the not interesting forks (the ones without commits or that all commits have been merged).

  9. Axel Hecht

    I didn't mean to say that the licensing is in the comment, just wanted to point at where I found it. Probably need to get Dmitry to just explicitly say something.

  10. David Vega

    Whoops, sorry Leonardo, I really thought that was the case.

    If this script is not used for some reason, I was thinking perhaps something more original from Bitbucket would be as nice, even if more simple. I was thinking that the same Changesets page we have could be done with infinite scrolling and with a SVG/Canvas approach... and perhaps clicking each node would pop up the summary of the changeset; just an idea.

    This one is for SVG and is really mature: http://www.amplesdk.com/

  11. Anonymous

    Often, times when individuals apply for http://www.lebron9southbeach2012.com/, they either do not pay attention to what the qualifications are, or they simply lie about what their http://www.airyeezy2buy.com/ are in hopes that the employer will not actually check. This is not only a waste of time http://www.jordan4mars.net/ is a waste of the employers' valuable money. This can be avoided altogether by using an online agency as they do all the preliminary research about the candidate for you prior to you even seeing them on their database. http://www.retrojordan7olympic.com/

  12. Alex S

    I'd switch from github to bitbucket if it had this network diagram. we have quite a few branches in our projects and it's too hard to get the whole picture without looking at a github-like network diagram.

  13. Bevan Rudge

    There is something similar (but not as useful as GitHub's alternative) on the left margin of the commits tab on BitBucket. You may need to make the browser wider to see it all.

  14. cturhan

    +1 Well, I thought it was just me. Understanding the graph is just a pain. Sometimes, to understand the graph I do a empty commit on master. I believe master branch always should always be leftmost.

  15. cturhan

    Just wanted to bump up this issue. I believe it's not a difficult feature to implement as bitbucket already has a similar tree graph. What should be done is to align branches to left according to their forked branches.

    The first post belongs to 2009 and this means 5+ years passed since then. Any devs here for an explanation of how doable this is?

  16. Ryan Porter

    This is one of the biggest concerns for my team for switching a repo from GitHub to BitBucket. We're not sure if we want to do it because we need to balance the JIRA integration against the network graph and decide which is more important to us. Since apparently we can't have both. BitBucket would be a clear winner if it had a better way to visualize the branches in a complex project. That thing on the left side of the commits page is a useless toy compared to the network graph at GitHub.

  17. Bevan Rudge

    There are various GUI tools that show something similar. Try the GitHub desktop software application to start with. The git CLI also has an option to show branches as a network graph. [image: ryanalynporter] Ryan Porter commented on issue #820: Bitbucket should have somthing like Github's Network graph (BB-336) https://bitbucket.org/site/master/issue/820/bitbucket-should-have-somthing-like

    This is one of the biggest concerns for my team for switching a repo from GitHub to BitBucket. We're not sure if we want to do it because we need to balance the JIRA integration against the network graph and decide which is more important to us. Since apparently we can't have both. BitBucket would be a clear winner if it had a better way to visualize the branches in a complex project. That thing on the left side of the commits page is a useless toy compared to the network graph at GitHub. View this issue https://bitbucket.org/site/master/issue/820/bitbucket-should-have-somthing-like or add a comment by replying to this email. Unwatch this issue https://bitbucket.org/api/1.0/site/master/issue/820/unwatch/bevan/33836d0ed8caaec19f07601fbc691387cdc61ae1/ to stop receiving email updates. [image: Bitbucket] https://bitbucket.org

  18. Log in to comment