More on SegAnnDB

Making the chromosome viewer more interactive

As per my last blog post, I had arrived at a pretty static overview of chromosome that we are viewing, which looked something like:

* The upper part is the overview of the chrome and is the standard zoom file.
* The lower part is the zoomed in chromosome, and its zoom levels can be modified. Current zoom levels are – ipad, chrome\_ubuntu, chrome\_windows (no changes 
here)

Well, now after a few more iterations I have made the overview part more interactive. Now the user can click on any part of the overview at any zoom level to see the highlighted part.

So, this is what we have right now ->

How this works ?

Making the overview more interactive was a crucial part of UX in SegAnnDB. To get this I used some basic javascript and css. First of all, I am precalculating the rectangle width and then using JS dynamically adding elements to DOM.

All the cool rectangles you see as we hover over the chromosome overview, are nothing but just <a> tags which have some cool CSS rules applied to them. Lets take a look at meaty portions of the code -

  for (var i = 1; i <= numLinks; i++)
    {
      // lets create the links
      // calculate the href value
      var hrefVal = "?width="+zoomLevel + "&index=" + i;

      // create a linear scale for making the title
      var x = d3.scale.linear()
              .domain([1, widthBase])
              .range([0, zooms[zoomLevel]]);

      // title values we use inverted range to get the values
      var basePixel = (i - 1) * 1250;
      var xstartBP = x.invert(basePixel);
      var xendBP = x.invert(basePixel + 1250);

      // generate the title string
      var title = xstartBP + "-" + xendBP;

      // make the string of link
      var link = "";

      // append the links to overview
      overviewDiv.append(link);

      // lets see if we are in chrome_ubuntu
      var url = window.location.href;
      var res = url.indexOf("chrome_ubuntu")

      // calculate the base pair range of each idex using reverse
      // this is the bottom list of links
      // We don't want to append 800 additional elements to the DOM
      if (res == -1)
      {
        divElem.append(""+i+"");
        // add the breaks after every 35 values to the bottom list of links
        if (i % 35 == 0)
          divElem.append("
");
      }
    }

The above loop, goes over all the number of links that we need to generate and adds each link to the overview div. Now with each link I added these CSS rules, all the new CSS rules are defined in the bottom most section of file bioviz.css. Relevant rules are -

a.overviewLink {
    height: inherit;
    display: inline-block; }

a.overviewLink:hover {
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    background-color: rgba(242, 6, 255, 0.2); }
a.overviewLink:active {
    border-bottom: 1px solid blue;
    border-top: 1px solid red;
    background-color: rgba(242, 6, 255, 0.2);
}

All of the code can be found at my github repository for SegAnnDB

Linking back to old chromosome viewer

Another additional feature that I have been working on, is that we wanted to reenable the old chromosome viewer for SegAnnDB. Now, the code was already there and all I had to do was create some new end points and add links to switch between both the new and old chromosome viewer.

The new endpoint that I added is - config.add_route('old_chrom', '/profile_old/{name}/{chr}/')

So in a nutshell, the web links for the old chromosome viewer look like - http://localhost:8080/profile_old/ES0004/1/?width=ipad

In the screenshots below you can clearly see a link to the old chromosome viewer and new chromosome viewer Imgur

Few minor code changes were also required, in Javascript code. In file chromDisplay.js I had to make some modifications so that we can differentiate between when we are viewing through the old chrom viewer and the new one, and handle each case appropriately.

OAuth2 login

I am also working on OAuth2 based login for SegAnnDB, right now we use ‘pyramid_persona` python module to handle all of the authentication, it inturn implements session based authentication by extending pyramids base authentication system.

Documentation and Styling I also worked on improving the documentation of code, I have added comments and docstrings in both JS and python code, wherever I coulde. More over I also, indented most of python files to PEP-8 and JS file as well.

More on the OAuth2 login in coming blog post! That’s it for now :)