Flex: Social Graph Browser with Favicons

There is a new version of the Social Graph Browser application.

Sample App

This now has added ‘favicon’ goodness!

After all the graft required to add support for 4,8 and 24bpp bitmap types to the flexlib IconLoader class I wasn’t sure if it was going to be worth all the groundwork but I have to say I reckon this looks pretty good.

This is a graph front end to the Google Social Graph API. It presents the same sort of information you can fetch from the example applications but on a connected graph.

You can find a full FlexBuilder2 project here.

You can find a full FlexBuilder3 project here.

These are complete the complete projects. If you have FB2 or Fb3 the instructions to get them to run are:

Update #1
Probably the last update I’ll make. I have added the ability to double cllick on a favicon and it will requery the Google API for the supplied URI. I.e. it will perform a search on that node. I wanted to implement back and forward buttons for the queries but I find that I’ve run out of steam. If you want to go back you must select ‘Edges In’, requery where you came from and it should appear as one of the nodes.

Update #2
There is a whole bunch of stuff I am supposed to be getting on with as regards the IFrame component but I can’t help myself from coming back to this application and tweaking it.

I have now hooked the grid into the visible nodes of the graph so the grid rows represent all the nodes you can see. I have removed the ‘double-click to navigate’ from the node icons and instead you now double click the row in the grid to indicate where you want to navigate to. Remember your original root node is always in the list but if you navigate away from this you should always be able to go back by selecting ‘Edges In’ and double clicking the node you jumped from. As I have said before this interface is pretty experimental and I am just trying out new things. The best ideas should stick.

Update #3
Some of the favicons for obvious sites like ‘linkedin’ weren’t getting loaded. This was due to a fault in the regular expression used to parse the source url and turn it into one which can fetch the favicon for the site. This was the reason for some of the blank favicons on the end of nodes. The other that some sites use GIF files and not ICO files. Currently GIF files are not handled.

Update #4
I have made quite a few fixes to this plus I have generated a Flex3 version of the project.

– Graph builder generates all the nodes with relationships then tries to join the primary nodes (those generated from valid urls in the initial query) with a relationship and then as a plain edge. The reason for this was that urls in the query were not appearing on the graph unless there was a proper relationship.

– I have had to modify the base graphing library to fix an irritating bug where the mouse-up wasn’t getting captured when dragging the graph.

– GIF icons will cause the graph builder to attempt to match an appropriate icon for the relationship.

– If you switch the favicon proxy off it will use default icons.

– I am no longer using the socgraph proxy script since Google have deployed a crossdomain.xml file for the endpoint. The switch is still there though.

Update #5
I should really stop fannying around with this and do some work on the IFrame but I am starting to get bloody minded about this – I will get this working with no errors if it kills me.

– Definitive bug fix for loading icon (for now at least). There should be _no_ more exceptions to do with these anymore.

– Integrated a new edge renderer. This one now indicates the direction of the label relationship. Can’t decide if this looks better or worse than the old one.

– I _think_ the bug where dragging the graph gets stuck is fixed.

I started to bring in some of the other layouts that are available for flexvizgraphlib but there are issues with the rendering of the labels so I had to leave them out for now.

– The autofit seems flaky as to when it gets applied.
– From a large graph, if you make a query with no nodes the old node connectors sometimes ‘ghost’ i.e. they are still there.
– I am seeing occasional query failures. Strangely this never happened with the proxy.
A query with a large number of nodes will cause your browser to come to a standstill. Try focussing your search to ‘Edges In’ or on a particular uri.
The IconLoader is still occasionally throwing errors for parsing icons. As I see them I will try to track them down. If your site causing an exception mail/comment me and I will try and figure out what’s going on.
I am sometimes seeing an exception from the processing of the graph data. Haven’t tracked that one down yet. It happens after a query but before the graph has been drawn.
Nodes which should get the default favicon don’t have anything. I think this is because the favicon is being returned but the bitmap is corrupt or blank. Strange.


5 Responses to “Flex: Social Graph Browser with Favicons”

  1. Jerome on January 31st, 2009 1:49 pm

    There are more components here.

  2. Sandeep on January 25th, 2010 9:38 pm

    Can I use the above framework to build a custom Organization Chart?

  3. Administrator on February 1st, 2010 11:08 am

    The code is free for any use (although it’s a but old now).

  4. Marcelo Marmol on October 26th, 2010 2:56 pm

    I am developing an opensource project based in J2EE in backend and Flex in the front end. I am looking for a commponent like this, do you have any idea of an uptodate version of your commponent or something similar?

    Cheers and keep the good work!

  5. Administrator on October 30th, 2010 5:07 pm

    Marcelo, I am not planning to update the application at the moment. The code is free so you can download it and use it as long as you stick to the original license. I had to use a python proxy script to fetch data but you could modify this for a j2ee backend easily. If you are in fact referring to the graphing component it is called BirdEye and you can find it here: http://code.google.com/p/birdeye/