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!!

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!

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!!

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!!