Week 3: Initial layout

My original plan for this week was to extract the code from TGAC’s browser rendering BAM files. I had a look at the source code, but it relied heavily on getting the position of the elements pre-calculated in the web-server. So I decided to use it just as a reference and start my rendering from the scratch. In order to get a better feeling of a real use scenario of how the component will be used, and because I need to compare several BAM files in simultaneously, I decided to start the prototype of a Tablet/IGV-like SAM viewer. Also, I set myself the task of BioJS objects and start to use the communication between them with events. From my point of view, it is similar to the AWT model to handle events, but there is only one way to be sure you understand a concept: coding it.

The BAM viewers I know only display a single alignment file at the time. That is going to be my starting point, however, I’m interested on comparing several alignment files at the same time. So, I will need to be able to have multiple BAMViewer objects in screen at the same time, and synchronised. For that, I’ll need to have some sort of callback when I select from the list of chromosomes the chromosome to be displayed in the main window. With that intent, I “register” all the windows that will have a callback in the Biojs.BAMRegionList object.

    
   add_region_callback: function(component){
     this.callbacks.push(component)
    },

    _region_click: function(region){
     arrayLength= this.callbacks.length;
     for (var i = 0; i < arrayLength; i++) {
      this.callbacks[i].setRegion(region);
     }
    }

Finally, I set up the frames for the divs that I’m going to be testing: