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.
I am starting to enjoy the idea of sketching, so here is the sketch of the visual component that I was developing:
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:
In this way the html just have the structure of the chromosome, and all the looks resides in the CSS:
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.
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:
Cheers!!
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. |
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>
.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!!
Hey Gustavo! This is a really simple but cool implementation you've got here! :) A certainly useful component to have available!
ReplyDeleteWould it be possible, though, to change (somehow) the width of the chromosomes so their relative length is correct? (having a Chr2 a bit longer than Chr1 feels strange...)
Great work, nonetheless! And congratulations for being able to refrain yourself from coding for this long!
Hey Bernat! Thanks for the comments!
DeleteThe width of the Chromosome is taking the 100% of the DIV, meaning that if you create the divs with different sizes the chromosome will be draw in that proportion. SO to do what you want is a matter of knowing the sizes of the chromosome beforehand, and create the container DIVs in scale. The issue then is more about knowing that all the DAS called have response.
What I'm saying is that is not complicated, but it requires more code that the necessary to demonstrate the example. When I got some time for it, I will create the example, and put a comment here!
Cheers man!
Hey Bernat,
DeleteCheck the implementation with proportional sizes here (http://web.cbio.uct.ac.za/~gustavo/biojs/areaselector/TestChromosome.html) and check the second part of this post with some info about it. (http://biosual.blogspot.com/2012/05/update-to-chromosome-component.html)
Chao!