Capture the moment...

Hey there,

So I have been working on this feature for PINV were you can share the exact configuration that you got while visualizing your interactions. This share URL can be by getting a url or by embedding PINV into your web site or blog. This makes me think in this blog, which I kind of unintentionally abandoned, so why not to write a post about the new feature demonstrating it on my blog and try to get me into the habit of writing again as a bonus.

Besides the capability of sharing a status, I have also worked in several other features, like resizing the nodes, linking to other services in the web, including legends for colors and sizes, what I'm saying is that there are a lot of new features there for you to explore, please play with the app and let me know any bugs, suggestions and comments on the forum: https://groups.google.com/group/pinv_biosual

So back to been able to include your visualization into your web, it is pretty easy and looks cool, just check it out here:

The idea behind this new feature is to allow to share and to collaborate in a simple way. Researchers can now explore their data using PINV and when they found something interesting, they can click into the share icon, copy the unique URL and send it to a collaborator who with this link can now open PINV and display all the features that the first researcher had used (e.g. queries, colors, zooming, re-location of nodes, etc.). For example you can go and check in PINV the configuration above by following this LINK.

The second scenario of the sharing feature is to included in your website and as you saw above is not only about the URL, but to include the whole PINV in the middle of your page, and yeah I know, there is nothing incredible new on it, I'm just following the same idea of things like google maps, you tube, prezi, etc. and actually following it a bit too close... the strategy of all of them, including PINV is to give the user a piece of HTML code that represents an iframe to include a compact version of the web content.
An iframe in HTML is an element to create a frame in your page where all its content is coming from a separate web page, it doesn't have to be in the same server, and therefore makes life easier at the moment of including a complete web application in the middle of another web page.
For instance, the youtube compact version doesn't include the side suggestions or the comments, it is limited to the video; and then when is included as an iframe in other page it looks like the video is part of the page.
Likewise PINV compact version only displays the graphic (network or circle layout) and hides any headers and side tools. Nonetheless those tools are still active, they have just been hidden, and if the link included in the iframe use any of this tools to get the final display it does it. For example, if the person sharing the visualization have used a rule to resize the nodes depending on a feature(e.g. closeness) this rule is executed on the iframe graphic, even when the panel of rules is not visible.

If you want to try it by yourself I'd suggest to go through this tutorial I made a month ago to get familiar with some other features in PINV. Once you get the final view, you can press on the share button, and get the link, I just did it and the link I got is this one: http://biosual.cbio.uct.ac.za/pinViewer.html?status=021f90c1e054674498cf87ecb9fb48b8.json, hopefully this result page looks similar to the one you created.

But if what you want is to included in your blog you can copy the HTML to Embed textfield content that should look similar to:

<iframe width="800" height="600" src="http://biosual.cbio.uct.ac.za/pinViewer.html?status=021f90c1e054674498cf87ecb9fb48b8.json&embedded=true" frameborder="0" allowfullscreen></iframe>

In blogger you can go to the HTML view and paste that, and that's it, your view is included in your blog, like here:
I'm going to avoid any technicalities right now, that's maybe material for another blog post.

As usual I'm looking forward to your comments, suggestions or bug reports, is the only way I really have to know if I'm on the right track.

Cheers!!

Biosual Viewer. First prototype.

Hello there!

So here is the first post of actual work of the year, although most of it was done last year. So, the last time I post here the status of the protein-protein interaction viewer looked like this: http://biosual.cbio.uct.ac.za/interactions/, and my efforts since november have been focused in making it look like this: http://biosual.cbio.uct.ac.za/biosual/tests/pinv/pinv.html Notice the difference?
No, I am not talking about the logo and new name. So try again, check both pages and see the difference! If you didn't notice a change its because I did my job well, in case you notice let me know and I will try to correct that.

Warning: I am going to start being quite technical so if you are not into web development you might get lost. Badly lost!

The thing is what i did was to change the way Ajax-Solr (the library I'm using to get the data) includes its widgets so they can be loaded from a config file, I also make sure all those widgets are now completely agnostic of the other widgets, and I also create some PHP scripting in order to generate a single javascript that contains all the Ajax-Solr files, all the widgets and its dependencies, so pretty much I change hell of a lot in the background with the goal of having a single config file indicating which visual components should be included in the page. It is still in a work on progress stage, but the fact that I'm getting something as close to the application with the original version of AjaxSolr, makes me thing I'm in a good path!

You may be asking why to change so many things if at the end it is going to look almost the same. Well that has to be with the big picture of my project. The viewer has to be dynamic enough to display different setups that users can configure, so what im doing here is been able to create a runnable javascript that include all the required code to show the different graphic components by just passing few parameters.

The key is the configuration file, which is saved in the installation of biosual, then retrieved identifying it by its id. this separation allows me to in future develop a tool to create that configuration file. I'm sure there are lots of requirements i have to go through to get that authoring tool, however the process of this development help me to identify lots of them.

So lets explain some details of this whole thing. I'll start for the PHP script, mainly because it kind of works as the controller of the whole thing and in that way it gives me the chance to have some sort of order in the descriptions. The idea is to have a single point to ask for the resources of a viewer instance. A html page that wants to include an instance of the viewer requires to have an empty [div] component that will be the container of it, and to include as a javascript the path to the PHP script sending as parameters: (i)the id of the instance to create, (ii)the target id, and (iii) the type of data.
There are 3 types of data so far: json returns the MDC configuration file,that indicates which widgets/components are part of this viewer instance; js to get a bundle of all the java scripts files associated with the given id; the third option is css to get a single file with all the css files from the different widgets, dependencies etc.

So the basic HTML file that includes a viewer instance is like follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>PINV - Biosual Architecture</title>
  <link href="../../include.php?id=pinv&type=css" media="screen" rel="stylesheet" type="text/css"></link>
  <script src="../../include.php?id=pinv&target=here&type=js" type="text/javascript"></script>
  <link href="http://fonts.googleapis.com/css?family=Jura" rel="stylesheet" type="text/css"></link>
 </head>
 <body>
  <div id="here">
</div>
</body>

Notice that there is just a single javascript tag in this code, the PHP script will create a unified resource that includes the dependencies, the whole Ajax-Solr library, the selected widgets ant its own dependencies. The order to include all this files is key to make the whole thing to work, so here is a high level view of this, and below some explanations of each step.

1. Add a list of mandatory dependencies, which in the current version is composed by jquery, jquery-ui, ajax-solr and biojs. This dependencies can be located in the same machine where the script is located or somewhere accessible via Web.
2. The configuration file is loaded through the id parameter passed in the URL.
3. One of the options in the config file is to assign a template. this is basically a HTML piece of code that works as layout for the components. In this step the PHP script creates a variable in the javascript code containing the selected template, and them a piece of executable js is added to inject the template into the target div.
4. There are scripts that are associated with a configuration in particular (eg. making 2 widgets to work together) in this case those scripts are listed in the configuration option js and the PHP script adds them in to the response here.
5. And here is the core of a viewer configuration: the widgets. A widget should be a component that can be executed by itself in the biosual framework, and follow the idea of ajax-solr iwgets, having functions that will be caled at the initialization of the widget and whenever new data is been captured for the Viewer. The way a widget is defined in biosual(at least for now) is as a sub-folder in the folder widgets, it requires a file there called widget.json, the file follows a JSON format and allows to specify the javascript file of the widget, any dependencies a style file on CSS format, and a HTML snippet of code that will be injected whenever the MDC file indicates. An example of the widget configuration below.
   

   {
       "name": "Search with Autocomplete",
       "description": "a text based widget to start a search",
       "dependencies":["jquery.autocomplete.js"],
       "dependenciesCSS":["jquery.autocomplete.css"],
       "js": "AutocompleteWidget.js",
       "html": "AutocompleteWidget.html",
       "css": "AutocompleteWidget.css"
   }
   

   
   This configuration indicates the widget is in the file "AutocompleteWidget.js", but that it requires the file "jquery.autocomplete.js". it also contains the CSSs, HTML and some metadata for the widget.
   A widget can be created but never been used, it is just when is part of a MDC file, that is included, starting for including all its dependencies, then the widget file itself, and in last the HTML to be included in the target explicitly indicated in the MDC file.
6. A subset of the MDC file is included: widgets, parameters and server
7. Finally the loader.js is included. This is a piece of software that uses the previous parameters and scripts to create an instance of the Ajax-Solr manager that includes all the widgets and starts the page.
8. The final resource is included in the web page. The loader.js is executed once the page has been loaded.

There are implementation details that I will post in a future post but for now this one is long enough. By the way, if anybody is interested enough in checking put the code I have a git repository with it: https://github.com/4ndr01d3/biosual/tree/ajaxSolrFromPHP

So let me know any opinions!!
Cheerio!!!

[Off Topic] Holidays!!! :-)

Hey guys...

I know! it's been a while since the last post, and i have no excuses, so this is going to be my new year resolution: I'll post at least once a month but I will try to do it every second week, and to make it easier on me, I will allow myself to write [Off Topic] posts every now and then, and this is the first one of those.

Here I'm going to share my experiences in the last 2 weeks outside of the PhD work, University, and actually outside of any city because what we did for the christmas season was to hike for 6 days in the Tsitsikamma trail, one of the best experiences i have have in this country!

So for those who don't know the Tsitsikamma trail is a 65km hike on the mountains in the border of the Western and Eastern Cape provinces in South Africa, and if you have heard about the highest comercial bungy jumping in the world located in the Bloukrans bridge then you know which mountains were we hiking!

Pre-Hike

So everything started some months ago when a friend randomly commented to her wife that it would be pretty cool to do this hike, less than a week later she have booked over christmas and send the invite to 4 more people including me! Lucky me!!! And here is a Pic of the group few seconds before starting the adventure:

The Team(From left to right): Brett, Gustavo, Tamsin, Julie,  Natasha and Sean.

It sounds kind of hardcore eh.. 5 days hike in South African mountains! Well it wasn't that intense and our back packs weren't as big as you might be thinking right now. First thing to mention about it is that the fees that you pay to do this hike include accommodation in 5 huts that are strategically located in the hike with an average distance of about 14km between each 2 huts, so we didn't have to carry tents (bags looking smaller eh!). However that's not the biggest deal of it! For some bucks extra in your fees you can have your "equipment" portered, meaning they will take some bags for you from hut to hut, including stuff that needs to be refrigerated. In conclusion our bags were 1-day bags.
For more details about the package that we took to do this hike check this website (http://www.mtoecotourism.co.za/tsitsikama.htm).

But I'm sure that when this company created the portered option the weren't expecting us. Our portered  package included the expected (e.g. sleeping bags, clothes, first aid, etc.) but it also include lots of food, candies, and most amazingly 4 beers per night per person, it was incredible to finish a 14km hike day and having a beer waiting for you every time! although the beers were semi-cold, nothing is perfect eh!

The preparation for the hike included small hikes around table mountain and a one in the Krom River, close to the tunnel in Paarl, nonetheless we were planning to do lots of more training, but you know how it is an at the end we did just a few short ones. We also had hiking meetings, deciding what o take with us and having interesting discussions about how 4 beers was the appropriate number! And a day before have a last packing meeting organising stuff. All this was actually really easy because Tamsin is super organised and most of the meetings were more about aprove what she propose.

The Hike

The first day

So with everything ready we drove for about 6 hours in two cars and leave one of them at the end of the trail and came back to the start point for a introduction about storms, river flooding, scape routes, snakes and a few more appealing facts of the trail!!
I didn't really knew much about the details of the day by day of this hike, kind of wanted to be ignorant of many of the difficulties and be surprised for the awesomeness. The only think I knew was that the first one was short, just to get to the first hut and that in reality everything starts in the second day. But you know you cannot be too ready, so I put on my full hiking gear, boots on, backpack well tied, and a south american soccer t-shirt!
And then I found out I was over dress for this first day, the walk was really short and on beach sand, I think it took me longer to get ready that to do that first segment, and then I understood why the plan was to walk in the evening to a restaurant located 2 km away from the first hut. So yeah we started the hike in a restaurant, the intimidating thing there was seen a tree full of destroyed shoes; as this restaurant is the common final point of the Otter trail, which is a well known trail in SA that starts where our trail finish and ends where we start, although the difference is that the otter path goes closer to the sea and tsitsikamma is on the mountains. So after our first disappointing encounter with Mitchell's (the local beer), we came back to the hut and try to sleep.

Natures Valley Beach

We didn't felt very welcome in the first hut, each hut is prepared for 24 people and been high season it was full, so when we arrived beds were already taken and a big family(12 hikers) were accommodated in the different rooms, so our group split  in the available beds and it really felt like we didn't belong into that group, we were too old for the kids and too young for the seniors.

Day number 2

So given our discomfort in this place we started earlier than everybody else at about 5am. and put a fast pace to start the hike, with only one problem the first kilometer is a freaking hard hill, and been that close to the beach the humidity was killer. We were exhausted (i like to think in plural here), and that was just the very beginning, what in hell have I sign for? The only rule of our group was no moaning, so we just took it and move on.

Luckily things starting to get better, the following part was mainly on forest area and it was a cloudy day, kind of perfect weather for hiking so we were able to walk non-stoping for a couple of hours to reach a nice waterfall that became our first swimming spot.

We were there until it started raining, not heavily but raining anyway, by then the full family and the rest of the hiking group have reach this place, actually the youngsters over took us even before the waterfall, they were really fit and prepared for the hike, some of them didn't even have portered items so they were hiking with massive bags and still been faster than me!

The signs indicated that this spot was 9km though, and in theory the first day was 13.4 so we though we were really close to the huts, this until the next sign appeared and said something like you have walked 12 km and need to walk 4.9km more, and somehow that should add to 13.4... mmm something wasn't alright with my maths eh!! 

Anyways it wasn't that bad, we were in the hut just after midday, and the first 16.9km of the hike were over, most importantly the first earned beer was in our hands.

That was my favorite hut Blaaukrantz, the view was amazing and we took over the kitchen side and actually took our mattresses there and sleept there. And here is a pic of our view from our sleeping bags. Among other things the relation with the rest of the hikers improved and kind of everybody found their space in the bigger picture.

The Third day

With our batteries fully charged and after having an awesome evening we restarted the hike the next day, but this time we were in not hurry; this place was so cool that we took our time to pack, have breakfast and basically just enjoy the view. But we have to continue and relatively close(3 or 4 kilometers) we got to Bloukrans river which as Sean pointed later is the geographical divisor between the western cape and the eastern cape, two of the nine provinces of SouthAfrica. And this river was  the one with more swimming spots in the whole hike, although everybody(including us) stops in the first one because you just dont see the other pools.

That day was also rainy and therefore we didn't stayed longer in that river, we swim there just not for too long. after that came what it was the longest flat segment of the whole hike, about 5km on the top of a long mountain, I would say it was the easiest part at least for me, Julie wasn't feeling allright that day so she couldn't really enjoy that part as the rest of us did. And was there when i put some music in my ears for the first time on the hike, and it was Mr James Blake debut album who give me some company for during that time, if you haven't listen to his music give it a try. I really like that album and i was the perfect companion there.

The rest of that traject wasn't particularly memorable, just walking and walking, an actually a bit disappointing because in the maps close to the next hub appears something called the twin pots, that somebody even described as a natural jacuzzi spot, but it wasn't. the water didnt ran much there and therefore the look of the place wasn't as inviting as the previous swimming spots, as a matter of fact none of us swim there.

And once in the Keurbos hut it was christmas so we put our bags down and proceed to eat ice cream. Yes you heard right we had ice cream!! Natasha was in her own mission with this, it kind of became the big question until there... is Nats Ice cream gonna make it?? and it did!! it wast perfectly frozen but it was still ice cream in the middle of nowhere! what a luxury... then we play Evil Santa(see the thieving santa part in this wiki-link http://en.wikipedia.org/wiki/Secret_Santa). And we had Filet for supper, just delicious!!

Dia Cuarto

And the forth day came, another late start and with it a bit of a hangover, not a bad one but that uncomfortable small headache was there, lucky it stop as we started walking. and it was a nice down hill to a river, not too complicated. The hardest part was to find a spot with some shade because was in the 4th day that the weather change dramatically and from drizzling days and nights it when to full sunny summer. Which at the time we though was awesome, swimming and chilling in that spot, and then a snake appeared, or that was what Sean though it was, when in reality it was a mouse, a swimming mouse, so everything was pretty OK.

The problem came afterwards; the first long up hill of the hike was waiting for us, and under that powerful sun it was really challenging. Im not sure of this, but I think we walked like 100km... OK just around 5km but it really felt like a lot more, specially because it was kind of open, very few trees and the sun was quite 'picante'!

But there is always a rainbow after an storm, or at least thats what "Ice Age 4" tough me yesterday. And in this case the rainbow was in the shape of a small current of a river, it wasn't the biggest river on the hike, we couldn't even swim on it, but for sure it was the most expected one and it didn't disappointed at all, we all sumerge our head in that 30cm deep water and it was marvellous! Even now I feel the refreshing feeling of that moment.
As you can imagine we didn't have too many energies that day to take pics, or at least not in the camera where the pics Im posting were taken. We will share all the pics and I might update something here later.

Checking in the map, that spot is half way the hut, but the second half felt a lot shorter, thanks to be in a forest covered area, so we were in the next hut i not time flat, or at least thats how I remembered now. So we arrived to the Heuningbos hut and the cool think of this one is that there is a river 100mts away, so we took some beers to the river and celebrate the culmination of another successful hiking day.

Day FiiiiiiiiiiiiiiiiVeeeeeee!

Uff that was long! The number of Kilometers is just above 13 and I can pretty much describe the terrein  with 4 words(actually just 2): UP-DOWN-UP-DOWN, and thats it. The first part UP was alright, not too sunny and although it was a long up hill, I didn't struggle any more than normal, I actually had more issues with the subsequent down hill, I wasn't happy there, my knees were starting to feel the almost 50km that so far we had walked.

In a super "clever" move, our bags were heavier that day as we decided to have breakfast in the top of the first hill, but somehow that decision changed and the breakfast just happened at the end of the downhill, my poor Julie really suffered with that decision and her energy was really down there, nonetheless she made it and we have our breakfast as an award for finishing the first hill.

The problem was that the first mountain end up being the easy one, the second UP hill was for sure the hardest part of the whole hike, the sun was again over us and the few trees around were pines with not much shade, at some point the hike became in steps of 10mts from shade to shade, one thing that helped was that almost at the top some wind appeared and refreshed a bit.

But again we did it, and the satisfaction at the top was great. At that moment we were so tired that we just look for the closest shade and collapsed there, to realise minutes later that it wasn't the most confy spot, but who cares it was our spot, our moment of glory.

The down hill wasn't particularly easy, the wind was at the other side of the mountain and it was still hot but in comparison with the up hill it was OK and after a couple of Kms the a forest cover appeared and the even a small river was waiting for us to be fresh for the last little piece. Which was a bit of an uphill again but on a pleasant weather and with the conviction than the hard part was over!

The last hut was called Sleepkloof, and there we have a great time, enjoying every single zip of our beers, and the rest of the drinks that we bring, oh did I mentioned that besides the beers we had whisky, brandy, rum and amarula?? Yeah, the pleasures of having your stuff portered from hut to hut!!

Last day.

We knew that the last day was a short one, but it actually was way too short, the big sign of civilisation appeared just when we were warming up, kind of sad.

And here a final pic with all the hikers that finished this adventure with our group, some of the 24 that started with us were just there for 3 days, and others didn't stop at the last hut so they finished a day earlier. In any case here is the pic:

[Edit]

Minor comment on it... the geek on me(and my friends) took part of the whole process, lots of planning was made through whatsapp messages, the food per day was a google doc, whe collaboratively we decide what where we gona have.. Ok collaborative mean here Tamsin though in great ideas per each day and we just complement it, and the last evidence of our geekyness on this adventure is the whole tracked path on GPS, check it out: 

View Tsitsikamma Hike 2012 in a larger map

Post-Hike

That was amazing, so to delebrate the whole team stay in the area for 5 more days backpacking, one day in storm rivers mouth (www.tubenaxe.co.za) and 4 in sedgefield(www.afrovibe.co.za) but that is a different story!

And the winner is...

Hey People!!!

So this post is going to be a bit different, no coding, no snapshots, no javascript! I promise!!

This week was the annual bioinformatics conference here in South Africa, it was really cool to see old friends and to know what are they up to these days, and also pretty interesting to know new people and their works.

Submitting a work for this conference was a little different form others, they didn't allow to select between posters or oral presentations. You have to submit your abstract and if accepted they decide the participation type (poster or talk).

Honestly I'm not fan of poster sessions, I found them hard to deal with, people go and check the poster without rally been interested on them, and the presenter find himself repeating the same speech several times in the best case scenario, worst case been nobody show interest in your work and you just stay in front of your poster with nothing to do for as long as the session goes. So, obviously when I wrote my abstract for this conference I was hoping to get an oral presentation.

And... poor me, they select the abstract for a poster... damn! I even though I was not gonna take part of the conference anymore, or just going but not presenting. To be honest, their reasons for not giving me a talk were pretty valid, my abstract didn't have many details of my research, and it was more about Web Visualization in general, and I did it that way because when I wrote it, I didn't have anything I want it to present, all I have where my sketches and a couple of the components I have talk about here, but not real results! Anyway I still thing I could it done a really cool introduction talk about web visualization for bioinformatics.

Anyways, I reckon a poster presentation is better than nothing, so if I was gonna make a poster I was gonna do a really cool one. So I started by asking my self why I dont like posters, and one of the things I hate of poster sessions is that most of the posters look like their author just put the whole content of a paper in the limited space of the poster, so it end up been a lot of text, in a small font that you can't read from distance, a couple of stats graphics, and two or three logos.

It also bothers me the square that research posters are these days, boxes, texts, graphics, logos. But apparently I'm not the only one with this kind of concerns. A friend from the lab sent me this link (http://betterposters.blogspot.com/) after listening to all my quetching!

In contrast to when I wrote the abstract, last week i had a tool in a prototype state that i can really show, so I decide to focus the poster about it, I'm obviously talking about the interaction application that I have chatted so much in this blog (just have a look to this, this and this posts).

So, with the idea of doing something different and inspired on the application it self, I though I can do the poster resembling the networks that the software is visualizing, and here is a very quick sketch that I did with that idea on mind.

Sketch for the poster layout

So the first decision is which software to use to design a poster. A lot of people uses MS PowerPoint for it, but I haven't using that since i met google docs, unfortunately I dont think is feasible to work on design in a web application, specially for something big as a poster, at least not for now.

I have worked with several packages for design before: photoshop, fireworks, illustrator and Gimp. I discover recently that Gimp finally release a version runs on OSX natively, and thats a great deal for me cause I always like it Gimp, but the fact that it was running on X11 made it unnatural to use... Anyway going too technical again, what I'm saying is that if you work in a Mac, you should give it a try to the newest version of Gimp, for you photo editing and design tasks. Is a good software with GNU licence!!

Took me 2 days of work to get the design as I wanted, for one thing it was the first time using this new versin of Gimp, and on the other hand, my design skill were a little rusted. But I did get what I wanted at least in form, the content was still missing. :-)

Besides the normal headers, this layout organize the poster's content in four circles, I took some ideas of the betterposters blog that I mentioned: Using a QR code that points to the website of the tool(actually pointing to this blog), and helping the reader by putting signs of the order that the poster should be read.

Other thing that I considered was which font to use, it really irritates me seen posters, presentation or in fact anything that uses the wrong font, for instance, have you seen the new font that the music channel VH1 is using? I hate it, is too big, looks so unprofessional. Dunno if is just me but AGHHRRHH!

I found a nice idea of how to choose your font between hundreds and is to create a poster with the name of the font using that font, so you can see all the fonts in a simple glance, check the idea here. The fonts they are using in those posters are the over 500 freely available fonts of google, you can use it on web anytime, or download the ones that you like and install it in your computer.

And the content of it, oh well, you can read it yourself, and if you have read my previous blog posts,
you certainly have read over 90% of what's in the poster, only difference is that in the poster I'm a little bit more format, therefore I wont talk about it in this post. You can have a look to a reduce image of the poster:

Final View of the Poster.

The Gimp file with all the layers can be download from here, in case you want to adapt it for your own poster. And if you were wondering about the title of this post is because it was a price for the best poster of the event and guess who was the winner!! :-) Here is the pic of the poster in a wall of my office with the winning certificate!! just to show off!!

And a last note, in a different topic, today finally my paper on MyDas is available online, check it out:
http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0044180

Time for a beer to celebrate, Cheers!!

Small Pieces

Hey there people!

In the same spirit of catching up and writing about the things I worked recently (I just noticed I didn't made a single post in the whole month of July), this post describes some small developments that I've made to improve the Interactions Application (See this post).

To be honest, the protein interaction application app is getting more and more interesting, at least for me :-) and for the look of things for  my supervisor as well. We had a brainstorm meeting about a month ago, and from there a whole set of requirements for this app has been documented. Mmm.. documented might be a little to formal... the document is just a page with ideas in no particular order, and I've been working on it based on a combination of two factors: coolness and estimate time of development. I think everybody prefer something cool and simple, than something massive and with low visual/usability impact!

Let's start by a new component I developed, a frame to display the features of a particular entity, and in our app we are talking about proteins and it interactions. In previous versions of the app, there was not way for the user to get extra information about the protein or about its interactions. This is nothing new, there are dozens of pop-up windows, fully configurable and even for jquery, but I also though that it wasn't one for biojs, and if the idea is to reuse all this parts in the framework that I'm gonna create, I've better start to keep this developments under the same library, which, by the way will be a future technical post about implementing the interaction frame as a BioJs Component.

I started by creating a static HTML with its CSS to define the look of the frame, see screenshot above. A simplified version of the HTML is below this text, and basically is a DIV element with a header and a list as content. The rest is CSS magic to make it look nice. Click here to see the static example.

<div class="protein">
  <header class="protein-label">P64747</header>
  <ul>
 <li class="protein-description"><h2>Uncharacterized protein Rv0893c/MT0917</h2></li>
 <li><b>Gene-Name:</b>Rv0893c</li>
 <li><b>%GC: </b>60.63</li>
 <li><b>Location: </b>Unknown</li>
 ...
  </ul>
</div>

Obviously this is interesting only if the features are loaded dynamically, and that's when this as a BioJs component is useful. So the component has a constructor method that creates the skeleton of the frame, and activates 2 optional features: to be able to minimize, and to be draggable. I used Jquery UI for these functionalities, and thats why this component has it as dependency. If you wanna check the code you can go to the repository. But also you can play with it in this link and see it in a simple demo, or you can always go to the Interactions app, and see it working in a real environment, and there you will see some of the thing I'll chat in future posts.

All right, this post was a short one.. but better that way... dont wanna start mixing oranges and apples, and actually that leaves me material to talk about it in a next post.

Chau gente!

Back into interacting!

WOW, is been a while!!

I'm the first one to be sorry of no having post recently. I've been busy with the paper I mentioned before and is going to get publish pretty soon! :-) Also, the things I have worked on recently are more improvements than anything else and all around the Interaction Viewer(See this post), so I had the feeling it wasn't enough for a post, however now that i checked there are several things I have to talk about, so this might be a long post, or to be split in several. So let's stop of excuses...

First thing I did was to add the Ruler Component (See previous post) into the Interactions Viewer . The initial step is to define the rules for the component, this has to be in a JSON format. Here the rules defined then:

rules: {
  "location": [ ],
  "action": ["Highlight", "Show", "Hide", "Color" ],
  "target": [ {
   "name": "Proteins",
   "conditions": [ {
    "name": "interactions with",
    "type": "selects",
    "amount": 1,
    "values": [ ]
   }, {
    "name": "number of interactions",
    "type": "numeric_comparison"
   }, {
    "name": "accession number",
    "type": "text_comparison"
   } ]
  }, {
   "name": "Interactions",
   "conditions": [ {
    "name": "protein",
    "type": "selects",
    "amount": 1,
    "values": [ ]
   }, {
    "name": "proteins",
    "type": "selects",
    "amount": 2,
    "values": [ ]
   }, {
    "name": "score",
    "type": "numeric_comparison"
   }, {
    "name": "type of evidence",
    "type": "selects",
    "amount": 1,
    "values": [ 
      "neighborhood",
      "fusion", 
      "cooccurrence", 
      "txt_mining",  
      "microarray",  
      "similarity",  
      "domain",  
      "experimental",  
      "knowledge",  
      "pdb",  
      "interlogs" 
    ]
   }
   ]
  } ]
}

As you might noticed some of the values are empty arrays, those will be populated once a Solr response is obtained. What I'm trying to say is, if a rule requires a set of protein to select from, that field is dynamically filled with the proteins presented in the graphic.

The Ruler component triggers events when a rule is added, removed or re-ordered. Is then the interactions app, who applies the existing rules into the graphic, so all this events are going to call the same function:

self.ruler.onRuleCreated(function( objEvent ) {
 self.manager.widgets["graph"].applyRules();
}); 
self.ruler.onRuleRemoved(function( objEvent ) {
 self.manager.widgets["graph"].applyRules();
}); 
self.ruler.onOrderChanged(function( objEvent ) {
 self.manager.widgets["graph"].applyRules();
}); 

The actions defined in the rules where completely related with displaying options: Show, Hide, Highlight and Color. So my strategy for the applyRules method was to create selectors that operate over the interactions graphic(SVG) to filter the elements that pass certain rule, and then operate the respective action on all of them. The full method is rather long so I wont put the whole thing here (You can check it in the repository), instead here are some important snippets of that code.

The method start by getting the active rules and restarting the graphic to get ride of any previous display changes cause by old rules. Then it loops trough the active rules and built the string selector depending on each case. The only rule evaluated in the following code is Proteins Interacting with a specific protein. The selector is an string containing all the IDs of the nodes that represent proteins interacting with the one selected by the user. This is quite easy because when displaying the graphic, a structure with this info was created: self.graph.interactionsA.

applyRules: function(){
 var self =this;
 var rules = self.manager.widgets["ruler"].ruler.getActiveRules();
 var model = self.manager.widgets["ruler"].rules;
 //Reseting the graph 
 self.graph.vis.selectAll("circle").attr("visibility", 'visible').attr("class", 'node').style("stroke","#fff");
 self.graph.vis.selectAll("line").attr("visibility", 'visible').attr("class", 'link').style("stroke","#999");
 
 var selector ="";
 for (var i=0;i<rules.length;i++){
  selector ="";
  var rule=rules[i];
  if (rule.target==model.target[0].name){ //Proteins
   switch (rule.condition){
    case model.target[0].conditions[0].name: // interactions with
     for (var j=0;j<self.graph.interactionsA[rule.parameters[0]].length;j++){
      selector +="[id =node_"+self.graph.interactionsA[rule.parameters[0]][j].name+"],";
     }
     selector = selector.substring(0, selector.length-1);
     break;

If for example i had 3 proteins in my graphic: p1, p2 and p3. And assuming there are interaction between all of them, a rule like Proteins Interacting with a P1 would generate a selector string like [id =node_p2],[id =node_p3]. All the missing logic in this code deals with the creation of the selector for all the combinations for the defined rules. Some of the generated selectors are explicitly listing the id nodes, such as in this first case, and in other cases the selector uses some wildcards to select several nodes with a simpler string.

Once the selector is created an action is executed with it, so for instance if the action is to highlight, the code self.graph.highlight(selector); is invoked. And that method in the interactions component is defined as:

  highlight: function(selector){
   var self=this;
   self.vis.selectAll(selector).style("stroke", '#3d6');
  },

I decided that actions won't really change the color of the node, but instead the color of the border, this with the purpose of conserving the color that relates a protein with the queried protein.

And all that, to be able to display an interaction like this:

All the nteractions of the proteins O05300 and Q7D8M9, highlighting the proteins interacting with O05300.

You can play with all the rules in the live version of this app at http://biosual.cbio.uct.ac.za/interactions/. And you might notice a lot of other details that I haven't talked here yet, but that's material for a next post. Promise to do it quicker than this time!

Chau Gente!

Ruling the world!!

Hey guys,

Is been a while eh! As I have said, my goal is to write a post per week, but you might notice that I skiped the last 3 weeks. I was busy with the edition of a paper, I wish writing formal academic documents was as easy as writing for this blog, but is not, specially with several authors, plus reviewers, etc.

Anyways, the paper is about MyDas and I hope this version get publish, I promise to put a link here whenever that happen(if does happen). I still have to work in one more section of it, but is mainly done, so I decide to be back to do some sketching, developing components, using them somewhere! Much more fun!

Remember that interaction component? Well, I though the next step of it was to make that graph more dynamic, so the user can highlight proteins that is interested on, and hide those that are just causing noise in the view. So that requires the user to define some rules for it.

That made me think that the definition of rules for filtering, selection, execution, etc. is a common task in many different scopes, but a lot of them can be written following the same structure:

In [a location in the page] do [an action] to [the target] when [a condition]

So, I thought that it would be useful to have a component to deal with the common tasks of creating, removing displaying and sorting rules. As usual I started by doing a sketch of my idea:

Sketch for a component to define rules

The idea is that the options for the rules are the input of the component, and then, the component should create the forms, lists and will control the look and feel of the rules. The execution of the rules is then responsibility of the one using the "ruler".

So in my idea of the standard rule, conditions can use different type of parameters (text, selects, etc.). And a condition is applicable to a specific target, which then creates the hierarchy Target>Condition>Parmeter. This information should be the input of the component as a JSON  document

{
 "location": [ "Some part of the page" ],
 "action": ["Action 1", "Action 2", "Action 3" ],
 "target": [ {
  "name": "First Target",
  "conditions": [ {
   "name": "Select from",
   "type": "selects",
   "amount": 1,
   "values": ["An Option","another option"  ]
  }, {
   "name": "number",
   "type": "numeric_comparison"
  }, {
   "name": "some text",
   "type": "text_comparison"
  } ]
 } ]
}

So a condition has a type, and the Ruler component will generate the different form components depending on the type, for example a 'selects' type creates a select with the options in the array of values, and the numeric comparison, creates a select with the comparison operandos ('==', '>', etc.) plus a textfield where the user can input a number.

So I implemented this idea using again Biojs. In reality is something simple: When the user clicks in [Add Rule] the component creates a DIV with the text of the rule and generates Select elements for the different parts of the rule. It also visualize/hide the conditions depending of which target is selected, and does the same for the parameters.

When the rule is added, is move to the top list and an event is triggered to inform which ever component is interest about the new rule. Rules can be removed and that also is informed by events, and the order of the rules can be adjusted. Other components can always ask for the current active rules through a method provided.

And I think the key factor is to make it look nice with CSS! So here is how it looks:

Snapshot of the sample view of the Ruler component

And you can play with it Here. I haven't updated the component to the BioJs registry because is not yet documented. Once I do it, I'll edit this post so you can download the component on BioJs. Here is the link in the BioJs registry.

And just to mention this, I did implemented in the protein interaction viewer, you can have a look Here. But this blog is getting long so I will describe what i did there in the next post.

Thanks for reading, and as usual please give me your feedback I do appreciate any ideas/comments about this!

Hasta la proxima!!

Protein Interactions

Hello there...

This one took a little longer than expected, but here I'm with another post.

This time is about a collaboration with some of the guys in my lab, that between ideas, data and some work we have created a neat Web Interface to visualize protein-protein Interaction. For now this is Tuberculosis (TB) data, but the idea can be apply to any other protein interaction dataset. This was one in about a week, so don't expect anything more than a prototype.

So, two weeks ago in our weekly seminar, one of the other students of CBIO was presenting something about the interaction of proteins between TB and human. This is an approach used to try to understand how the mycobacteria affects the normal behaviour of a human, or something like that :-P

Anyways, she was presenting this graphs representing the interactions and some questions appear about the surrounding proteins, and how those interact and if there is any correlation between the unconnected parts of the graph. Obviously I was not understanding much of it, but I though that an interactive visualisation of that data may help this clever people to answer their questions.

The graphics that my friend was showing were generated by cytoscape, a very well known tool for this kind of data. I don't know much details of this tool, I kind of remember playing with it a while ago, so to be honest I cannot talk much about its strengths or weaknesses. The only think was the in that moment it was not available, and therefore the valid biological questions were not answered in the seminar room.

Part of the discussion went about the available visualisation tools for this data and how useful (or not) they are. I thought that a web visualisation of this should be, not just possible but simple enough for me to implement, obviously hoping to find a generic graph library. And once displaying the data, it would be possible to play with the representation using web techniques.

After the talk a very enthusiastic friend came to me and started talking about the same idea, plus he actually knew a couple of libraries to displays networks: protovis and Jit. I also did my homework and found out that protovis have become d3 and found another option as well called arbor.

Before seen those examples my worry in this was an algorithm to organize the layout of the nodes in the network, to avoid overlapping and to see the network in a nice way. But if you check those examples the are using a very cool algorithm called force, which pretty much simulates repulsion forces among nodes and tension forces using the links and it does it on the flight, creating a very cool effect.

While I was busy playing with different libraries my friend got some of the data and create a dummy example using protovis. One of the ways to input data in protovis is to have a json file with a particular structure. So, what my friend did was to create a python script to convert a subset of the data into json, and use that to create the graph. Simple and nice as I like it! Below is an image of a part of the generated graph, and here is the link for you to see the example.

15 - Network of 2000 human protein interacting.

But here is our first real challenge, that was a subset of 2000 proteins, and the performance of that is very poor as you can see. Clearly we were asking too much to the SVG engine of the browser. The big problem is that the original file have over 300000 interactions, we were not using 1% of the data and we were reaching the limits of the browser.

In Web development there is a pattern that I have followed for a while, try to make it happen in the client, but if not possible, simply do it in the server. OK, thats not exactly a massive piece of wisdom, specially when in web development there are virtually those two options: server or client. However I know of many developers who insist in doing stuff in the server that now is totally possible in the client, were the latter gaves lots of potential advantages, specially in the usability point of view.

So what I did was to create a Solr server with the protein data, this will open the possibility of doing interesting queries with very short response time, and really easy to implement. Here I make a parenthesis, If you are a developer and you dont know what is Solr, make yourself a favor and go to learn about it, is totally worth the effort.

Back in track, for this proof of concept I am using a very simple dataset of just over 66000 interactions, each of those been the 2 protein interacting and a score of how reliable is this information. in conclusion, for now is just possible to query for protein or score, but the potential of Solr is there and is just a matter of putting more info, such as annotation of each protein.

There is a nice javascript library to deal with Solr queries called AJAX Solr, I have used before in other projects, so I was familiar with it, besides is easy to use and it has a well organize code structure. Its concept is basically to have widgets that react to the moment a Solr response is catched. Moreover, those widgets are also able to execute new queries.

So what I did was to create a widget for AjaxSolr, that uses d3 to generate the graph based in a Solr response, for example, if I query for all the interactions were the protein with UniProt Id Q10387 is presented, I got 45 interactions, so the widget creates nodes for each protein and links for each interaction and just let d3 to do its job!

The rest was just to adapt some of the widgets that the AJAX Solr tutorial has, like the autocomplete or the list of current queries. Here the main change is that the tutorial work joining the queries as a disjunction, I mean using AND operators: query1 AND query2 AND query3. but in our case we require to use conjunctions (OR). and that changes a little of the logic there, but is not big deal.

So here is How it looks, and if you want to play with it you can go to this URL: http://biosual.cbio.uct.ac.za/interactions/. We have many ideas to implement here, and for that we need to put more data in the server, and also the way of drawing the graph can get improved, however we think this is a very nice start point.

16- TB protein protein interactions viewer

And you might noticed I didn't put any code in this blog, oh well if you want some code the good news is that because is a collaborative project with my friends at the lab we set up a google code repository, so you can go and get all the code of this, and everytime any of us make some improvement is gonna be there for you: http://code.google.com/p/biological-networks/. 

Chao gente!!!

PS: After having develop the prototype a friend told me about a HTML5 library of cytoscape, I guess i didn't did my state of the art homework as good as I though, so I am going to have to check this and see if is worth to use it instead of d3.

Update to the chromosome component

Hello people,

I know the previous post was quite technical, but this one in contrast is even more technical :-p Not really, I think i have to put this technical details here. So take this as a warning and if you are not into HTML5 programming, you might want to skip this port, and just check this link to see what im working on, I promise other posts no so techy!

So for those few that made it here this post to show you how I used the AreaSelector component to interact with the Chromosome one, so read those post if you haven't yet!

Firstly, the selector is optional for the chromosome component, so there is a new option in the constructor called includeSelector (true by default) and when all the bands have been loaded the selector is added. Then, every time the selector changes, the chromosome listen that event, refresh the corresponding coordinates and generates its own event telling the outside world that the selection have change. The last part of the code below is to insure that if the container DIV changes its size or position, the changes get propagated to the selector. So here is that piece of code:

//Setting up the selector in case is included
if (self.opt.includeSelector){
  //The selector just allows horizontal interaction and is preseted in the first band
  self.opt.selector = new Biojs.AreaSelector({
    target: self.opt.target+'_chr',
    resize_top: false,
    resize_bottom: false,
    area:[0,-5,$('#'+firstid).width(),20]
  });

  //Creating attributes in the object to save chromosome coordinates where is visible, starting in the first band
  self.opt.selector.from = 0; 
  self.opt.selector.to = firstW; 
  self.opt.selector.fromWatcher=false;

  //When the selector change its position the chromosome coordinates have to be updated
  self.opt.selector.onRegionChanged(function( objEvent ) {
    if (!self.opt.selector.fromWatcher){
      self.opt.selector.from = self._getCoordinateFromLeft(objEvent.region[0]);
      self.opt.selector.to = self._getCoordinateFromLeft(objEvent.region[2]);
      self.raiseEvent('onSelectorChanged', {
        chromosome_id : self.opt.model.id,
        selector_start: self.opt.selector.from,
        selector_stop: self.opt.selector.to
      });
    }
  });

  //if the div containing the chromosome is resized or moved the selector is modified with
  $("#"+self.opt.target).watch("left,top,width,height,display", function() {
    self.opt.selector.fromWatcher=true;
    if (self.opt.selector.from!=null && self.opt.selector.to!=null )
      self.moveSelectorToCoordinates(self.opt.selector.from,self.opt.selector.to);
    self.opt.selector.fromWatcher=false;
  }, 100, "_containerMove");

}

Other methods were implemented, mostly to handle conversion between the DIV coordinates and its coresponding chromosome coordinate. A method to directly change the position of the selector was added, so other components can interact with the chromosome view. Lastly 3 more events are associated with this component:  onModelLoaded to indicate that the DAS model has been succesfully loaded, onDASLoadFail in  the case the DAS source have any problem to be loaded, and onSelectorChanged for any position change on the selector.

The final result looks like the image below, and the code is now in the biojs registry here so you can play with it and use it whenever you want.

14 - Chromosome + AreaSelector component

Another part I worked on, came from a comment of a friend in this blog, and is that when displaying all the chromosomes, they were draw in the same size, which is not a good representation, each chromosome have a different number of nucleotides, and therefore its dimension vary.

The component was developed to auto-adjust to the assigned size of the container DIV, meaning that if we create DIV that are proportional to the size of the chromosomes, the representation will be more accurate.

The only problem is that a to be abe to calculate the proportions i need to know the size of all the chromosome, and because the info is geting asynchronous, is not something that we can just loop.

So what I did was to use the event onModelLoaded, to know when the component has finished loading the model, and in this way externally capture the size of that component, to adjust the width of the DIVs every time another chromosome is completed.
The DIV sizes, are then calculated with respect of the longest chromosome represented, this one has a width of 100% and all the other percentages are just proportion of it... Wow, thats a lot of words for just this piece of code:

  inst[i].onModelLoaded(function( objEvent ) {
    $("#holder_"+objEvent.model.id).data("size",1*objEvent.model.stop);
    adjustSizes(1*objEvent.model.stop)
  }); 

...

var maxSize=0;

var adjustSizes= function(size){
  if (maxSize<size)
    maxSize=size;
  for (var i in chromosomes){
    var chr=chromosomes[i];
    if($("#holder_"+chr).data("size") != undefined){
      var size = $("#holder_" + chr).data("size");
      $("#holder_"+chr).width( (size/maxSize)*100 +"%");
    }
  }
}

Below you can find a screenshot of this running, but if you want is to watch it in your browser just go to this LINK.

15 - Chromosome X and Y in proportion.

And that's me for now... Thanks for reading this, and please give me some feedback about it, I would like to know if someone is reading this and if is making any sense.

Hasta la vista!!!

Area Selector and Chromosome Component

.position() .offset() .left . top .width() .height() .parent()

Those are the 'words' that I have written the most during the last few days. And the ones that I have spoken I had better avoid mentioning, in case it causes my blog to be censored.

Here is the story: after having finished the Chromosome component, I thought it would be cool to freely select and adjust areas in the chromosome, and not just select the bands as it was doing. I thought that a semi-transparent div at the top of the chromosome could do the trick, so it was just a matter of some styling and I have a div that shows what's selected in the chromosome. Then it's just javascript playing with the DOM to modify position, and size.

Simple! So let's start with a static HTML and its CSS. The Div is going to contain other divs that will work as the points to scale the div:

<div class='selector'>
  <div class='scaler top'></div>
  <div class='scaler bottom'></div>
  <div class='scaler left'></div>
  <div class='scaler right'></div>
</div>

So I defined a couple of styles in the CSS, defining the transparency, the position and size:

.selector {
  border: 1px solid #FF0000;
  position: absolute;
  margin-left: 0px;
  margin-top: -5px;
  height: 25px;
  width: 30px;
  z-index: 10;
  background-color: rgb(100%, 75%, 75%);
  opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
}

.scaler {
  position: absolute;
  height: 5px;
  width: 5px;
  background-color: white;
  border: 1px solid red;
}

You can check the fully working code here. It looks like this:

12- Snapshot of the chromosome component with a overlapping div

So how hard could it be to make that div fully dynamic as an independent component? Easy peasy!
How wrong I was!! Well I'm not trying to say that it's incredibly complicated, but something that I estimated doing in one day took me the whole week. Hope that this is not going to be the rule in the rest of this project.

In reality the whole thing is not complicated, it's just a matter of transforming coordinates from the HTML document to the Chromosome space, and vice-versa. Plus having control of events to drag&drop the scalers to modify the size, location of the selector div. And saying it in that way makes me think again that it was something easy.

So, I tried to do the trick with mousedown() mouseup() events recalculating coordinates and redrawing things, but this didn't work because if you move your mouse too quickly you will move out of the scaler div, and it wont recognise the mouseup() event.

Then I realised that I was committing the classic mistake of reinventing the wheel. I mean that above is the description of a Draggable component in jquery UI, and for a moment I even thought that the whole thing could it be done by the Resizable component. But this one just modifies the size from the bottom-right corner, and what I want is something I can change from any side, conclusion back to my idea, but now using a jqueryui.

Here is the code for the draggable actions of the right scaler, the other scalers are pretty much the same, although the left and top required modifying the position of the div and not just increasing the width or height.

$("#"+self.opt.target+" .selector .right").draggable({
  axis: "x",
  start :function(event) {
    self.updateScalers();
    $(this).parent().css('border-right-width',"0px");
  },
  stop :function(event) {
    $("#"+self.opt.target+" .selector").width(self._removePx($(this).css('left'))+5);
    $(this).parent().css('border-right-width',"1px");
    self.updateScalers();
    self.raiseEvent('onRegionChanged', {
      region : self.getCoveredArea()
    });
  }
});

Obviously there is a lot more code than this, but this pretty much describes the task. The function updateScalers, repositions the divs that I used to create the effect. It also recalculates the limits of the enclosing div.

Another thing that I did for this component was to make sure that if the container changes its position, the constrains get automatically updated. In order to do that i found a plugin for jquery to watch a DOM element and react in that case. You can read some details here.

So this is how the Area Selector looks, I also created some methods and triggered some events in this component, so it can really interact with other elements.

13- Snapshot of the Area Selector component

You can play with it here, and soon it will be on the repository. I will update this post once it is online.
I just finished the interaction between this and the chromosome component and I will post about it at the beginning of the week.
For now, I'll be back to my super-lazy weekend, hope you guys are enjoying yours. :-)


EDIT: Here is the link of the AreaSelector in the registry (LINK)

A chromosome component

Hello People!

So, it have to happened, took me a while before falling in the temptation of starting to code. If you are a developer you know that until you have something running you dont feel like you have progress, no matter how much documentation, design, architecture or any of that so-called work have you done, the only progress is in code running, am I right??

So my lame excuse to start coding this time was about getting familiar with Biojs, I have mentioned before, this is the javascript library of web components that a friend is developing, I though about using this as the base of the Registry component of BIOsual, and the only way to really understand a library is to develop with it, isn't it?

And where else to start that by a 'Hello World' Tutorial. Biojs is as agnostic as me, although in javascript that term is not related with religions, what it means is that it doesn't know or even better, it doesn't care if you are using a framework (eg. jquery, YUI, prototype), so the developer can choose to use whatever works better for him/her, which in my case is jquery, so the tutorial uses it, but it could it be done using any other library or by no using any, but just plain js.

Anyways, in an attempt of learning by been productive I decided to do a mini-project with Biojs, and develop a small component, that help me to understand completely the library, but that it could be used as uno of the components for BIOsual, and then I though in a chromosome, displaying its bands. Here a  little of biology about the chromosome bands.

The Idea

I am starting to enjoy the idea of sketching, so here is the sketch of the visual component that I was developing:

9 -  Bands of a chromosome.

Inspired in the way that myKaryoView displays the chromosome, I decide to display a chromosome based on html elements, myKarioView does it with <a> but i decide to go with <div> just to avoid the '#' in the URL when you use those elements to trigger an click event instead of a normal link.

Then I though that getting that is something that can be done by plain HTML with some CSS styling, and then I literally came out of bed with the idea of doing some HTML+CSS that represents a chromosome, with the idea of doing the HTML as simple as posible, and this is how the code looks:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="biojs.chromosome.css" media="screen" />

  </head>
  <body>
    <h1>Basic html example for a chromosome

    <div id='Chrmosome:8' class='chromosome' style='min-width: 480px;'>
      <div id='p11.22' class='band gpos25 first' style='width: 25%;'></div>
      <div id='p11.21' class='band gneg' style='width: 15%;'></div>
      <div id='p11.1' class='band q_acen' style='width: 10%;'></div>
      <div id='p11.1' class='band p_acen' style='width: 30%;'></div>
      <div id='p11.1' class='band gpos75' style='width: 12%;'></div>
      <div id='p11.1' class='band gpos50 last' style='width: 6%;'></div>
    </div>
  </body>
</html>

In this way the html just have the structure of the chromosome, and all the looks resides in the CSS:

.band {
   position: relative;
   z-index: 3;

   height: 15px;
   border: 1px solid #333;
   border-right: 0px;
   border-left: 0px;
   border-image: initial;
   cursor: pointer;
   float:left;
}

.q_acen, .first{
   border-left: 1px solid #333;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
   -webkit-top-bottom-left-radius: 4px;

   -moz-border-radius-bottomright: 4px;
   -moz-border-radius-topleft: 4px;

}

.p_acen,.q_acen {
   background-color: #DDD;
}

There is more in the CSS but is pretty much copy/paste of what you seen here to create the rest of the borders, and the different colours for the band's types, so it looks like the image below, and you can check that HTML here.

10 - HTML test for displaying a chromosome

The implementation

It looks cool, but the whole point is that it should be generated from real data, and here is where the javascript became important. Firstly I'm gonna take the information from this Ensemble DAS source, and for this example I am using the chromosome 8 of the human data set, but it apply to any organism with a chromosome based genome, and in the URL just change the segment to get a different chromosome.

For the parsing of the DAS response I'm using JsDAS, a library that allows me to do the ajax query to a das server and gave me the response as a javascript model, you can check the tutorial and see how easy is to work with this library.

From there is just a matter of create a DIV element for each feature in that response. As I mentioned before I'm using jquery here, it really makes my life easier to deal with the DOM of the page, and the whole point is to use BioJS. Following the rules of Biojs, or any framework in particular, feels like you are doing more work than need it, but in the case of Biojs, the benefits really are worth.

To begin with, you have to document with javadoc style, and for those like me, that love java, documenting in this way takes out part of the tediousness of the documenting task, not completely, but anything that helps there is welcome!

BioJs has a mvn file to facilitate the generation via maven of the documentation, reorganize the code, but most importantly, it creates a web registry, where based on the created documentation is able to visualize, important information of the module, for instance, methods, events, dependencies, and even a live example of the component, so whoever is having a look to the available components, can always see a demo of the components.

Creating a full registry of your components in your machine is nice, but the whole point is to create a community, and to do that the components have to be web visible, meaning having a central repository.  For now the repository is based on the components that have been sync in the source repository of the library, but the main developer confirmed that there is work in progress to create a repository similar to the jquery one,  exciting news from there!

So without more talking here is my chromosome component in the BioJs repository, so anyone can use it! but in a more selfish point of view, the firs component that can be used for BIOsual, given the good experience with it I think i should keep thinking in the visual components using it, and in doing the registry of BIOsual based on BioJs.

Lastly, here is a page displaying all the human chromosomes that looks like this:

11- snapshot of the chromosome component

Cheers!!