double helix DNA strand


Test Client
The functioning HTML client part of the Savant Web Client. Only tested and known to work in Google Chrome.

Savant Web Client

A CSC2431 Project by Andrew Trusty
April 2010

The Savant Web Client is a web-based genome browser useful for visualizing and analyzing high throughput sequencing data. It is based on the Savant desktop genome browser built by Fiume et al. and supports many of the features of the Savant desktop browser. Unlike most web-based genome browsers, the Savant Web Client retains all the speed, interactivity and usability of a desktop-based browser.


Some of the newer web-based genome browsers such as JBrowse, BioViz, X:Map and the Genome Projector have made significant progress towards providing quicker and more interactive genome data visualization and analysis experience. The key to their success lies in their use of newer web technologies, most notably AJAX. X:Map and the Genome Projector both take advantage of the Google Maps API to allow users to zoom and pan genome data. Like older web-based genome browsers such as the UCSC and Ensembl browsers, this approach leaves most of the heavy lifting on the server side which has to render all the different images the client views. JBrowse and BioViz are most similar to the Savant Web Client in that they push the work of rendering onto the user's web browser. JBrowse uses thousands of carefully placed and styled HTML DIV elements to compose it's views and BioViz uses the SVG vector layout format.

The Savant Web Client was designed to take advantage of the newest HTML5 web standards. These standards were created to provide desktop-like application functionality to web applications. In particular, the Savant Web Client uses the HTML5 canvas element for rendering and the web socket API for fast bidirectional communication. The canvas element was designed to support dynamic, scriptable 2D bitmap rendering in browsers and has been used successfully to power a new generation of online games including a recent port of the classic 3D shooter Quake 2. The web socket API provides an improvement over AJAX in terms of increased request speed (due to less HTTP overhead) and native support for bidirectional communication.

Standard View
Figure 1: The Savant Web Client interface showing the sequence track and the standard view of the BAM intervals track from RNA reads of a Plasmodium bacterium.

Figure 1 shows a screenshot of the Savant Web Client while displaying the genome and BAM data for a Plasmodium bacterium. The tracks are rendered almost exactly the same way that the Savant desktop browser renders them. The only significant changes are in the interface surrounding and on top of the tracks. The track control bar at the bottom looks different but has all the same controls as the desktop version of Savant except for the genome scale view which is represented by the long thin bar directly above the sequence track. The controls are also all mapped to keyboard and mouse shortcuts for quicker access.

New additions include the local scale shown directly above the track control bar, the sequence color legend, a sequence focus display on the top left of the sequence track and a focus line on the BAM interval track which follows the users mouse. The local scale gives the user a reference for how many base pairs are currently being displayed and is broken into segments of N base pairs (where N is the number shown at the bottom left of the scale). The local scale can also be used to make exact measurements. Clicking once on the scale activates the display of the ruler functionality which shows how many base pairs separate the place on the scale that was clicked and the current mouse position over the scale. Clicking a second time deactivates the measurement display. The sequence color legend shows what each of the colors on the sequence track represents and allows the user to change the color scheme by clicking on any of the colors in the legend. The sequence focus display shows which base lines up with the users current mouse position. The focus line shows the index of the base pair that the mouse is closest to and allows the user to more easily line up the BAM intervals with the sequence track.

Variants View
Figure 2: The sequence track and the variants view of the BAM intervals track from RNA reads of a Plasmodium bacterium.

The screenshot in Figure 2 shows the variants view of the BAM intervals track. New additions to this view include another legend with color changing functionality and a variant focus display. The variant focus display appears in the top right of the variant view track and shows which type of variant the user's mouse is currently hovering over. The screenshot in Figure 3 shows the mate pairs view of the BAM intervals track. The only new addition in this view is another color control legend.

Mate Pairs View
Figure 3: The sequence track and the mate pairs view of the BAM intervals track from RNA reads of a Plasmodium bacterium.

There are a couple minor differences in how the Savant Web Client renders tracks when compared to the desktop version of Savant. First, the web client fills the sequence track completely whereas the desktop client sometimes leaves blank spaces due to a rounding error*. Second, both clients perform intelligent resizing and resolution changes when the tracks change size and the host window is resized but the web client attempts to fill as much space in the track at every resolution (except high resolution standard and variant views where the strands are are kept from growing too tall). The desktop client on the other hand uses a set of fixed ranges that it applies for different resolutions which do not always utilize the full space available in the track. Third, when the mate pair view encounters a huge amount of pairs to display (>4000) it attempts to cull repetitive pairs which have the same type and start and end almost the same places in order to prevent the rendering from wasting time rendering arcs that do not significantly change the display of the mate pair track.

Due to details of the implementation of the Savant Web Client which we will discuss later, there is also one very unique affordance and one considerable drawback of the current design. If more than one user accesses the same Savant Web Client server address at the same time, they will both see the same exact thing and they will be affected by each others actions. If one users pans the other users tracks will pan as well and if one user zooms, the other will have their tracks zoom. This effectively makes the Savant Web Client a collaborative tool for genome analysis. The drawback being that a Savant Web Client server in its current form cannot support multiple separate genome browsing sessions.

There are also a number of features that the Savant Web Client lacks in comparison to the desktop client. All these features are technically feasible but were not included due to a lack of time. This includes the coverage view, screenshots, bookmarks, undo/redo, batch runs and the manual loading of genomes and tracks present on the server (the Savant Web Client server automatically loads a single genome and BAM track when launched). Support for loading data from the client side in the web browser may be feasible for small data files but is likely impractical for large data files because sending them to the server would take too long and there is no standard browser API that provides for random file access and an average users computer will not be able to load the whole file into memory.


There are two parts to the Savant Web Client, a client and a server. The server is an augmented version of the Savant desktop client and the client is a single web page.

In order to turn the desktop version of Savant into a server, we added only four Java classes and one library. The jWebSocket library does most of the work supporting the communication from Savant to the web client using web sockets. We modified the main Savant file to run a jWebSocket server on startup and automatically load the Plasmodium genome and BAM intervals track pictures in the Figures 1-3. We built the web client on top of a stream publish/subscribe example provided by jWebSocket. In this model, the web client simply subscribes to the Savant server data stream and receives new data whenever a view is changed. The SavantStream class manages this by acting as a Savant RangeChangeListener that pushes the new range data every time the range changes. The client can also causes the view to change by sending requests that are handled by the SavantControllerPlugin class which simply maps client requests onto RangeController and FrameController method calls. The last two classes are a jWebSocket server management class that configures and starts the jWebSocketServer and an LZW compression library that we use to compress data sent across the web sockets. We did try to turn the server code into a Savant plugin but after an hour of unsuccessful attempts at getting Savant to run a bare bones plugin we gave up.

The client side consists of one HTML page, a few stylesheets and a lot of Javascript code. We use the jWebSocket Javascript library to handle the web socket communication. Lots of custom and/or adapted code manages the rendering of the tracks using the Processing library on top of a number of different canvas elements. We also make use of the jQuery library and a number of jQuery plugins to simplify the setup and manipulation of the interface elements. And there is a Javascript LZW compression library that decompresses data sent from the server. The client currently only caches the information necessary to render the data visible within the current field of view of the tracks. And this cache only serves to support the dynamic resizing of the tracks. All panning and zooming of tracks results in new data being received and rendered by the client. The client was developed and tested only in the Google Chrome web browser due to its established support for the new HTML5 standards used by the Savant Web Client. It is currently the only browser that supports the web socket API that the Savant Web Client depends on.

Future Work

There is a lot of room to expand and polish the Savant Web Client. The first step would be to implement those features mentioned previously that currently only the Savant desktop client has. The web client should also be ported to work on browsers other than Google Chrome. Though future versions of the other major web browsers will include the HTML5 APIs that the web client depends on, there already exist ways to provide this functionality in existing browsers (e.g. the use of long-polling AJAX requests to simulate web sockets).

The collaborative side effect of the current server implementation could also be improved by providing chat functionality and visual displays of what remote users are doing (e.g. mouse selections, mouse pointer location). It is even more crucial that the Savant web server be augmented to support multiple users and multiple distinct sessions. This is probably the most difficult change since it might require significant changes in the architecture of the Savant Java code.

Bugs etc.

In the Savant Web Client:

In both the Savant Desktop Client (v1.0) & Web Client:

In Savant Desktop Client (v1.0) Only: