The functioning HTML client part of the Savant Web Client. Only tested and known to work in Google Chrome.
Savant Web Client
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,
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
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.
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.
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.
custom and/or adapted code manages the rendering of the tracks using the
on top of a number of different canvas elements. We also make use of the
and a number of jQuery plugins to simplify the setup and manipulation of the interface
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.
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.
In the Savant Web Client:
- Mouse focus displays do not work well when zoomed out because
the colors blend on the canvas and cannot be easily matched
to the correct legend data.
- Some very large data ranges fail to render in the web client
even though they do render in the desktop client.
- Missing "too much data to display" checks for non-sequence track views.
In both the Savant Desktop Client (v1.0) & Web Client:
- Inconsistent arc pair renderings in the mate pair view. Sometimes when
zooming and panning the arcs shown change in ways you would not
expect based on the context of the last view
(e.g. some arcs disappear and some appear out of nowhere).
This is especially troublesome as an obstacle to providing
animated panning of the tracks.
- Slow downs and freezing can occur when too many mate pairs are in the
- The Savant class singleton is set after the constructor is complete which
is too late for plugins and other code that tries to access
the singleton before the Savant class constructor finishes. It needs
to be set somewhere inside the constructor rather that after the
- RangeController shift operations do not shift the same amount backwards and forwards
because of rounding. Must use floor instead of round.
In Savant Desktop Client (v1.0) Only:
- Does not accept text field range input with spaces even though it
is displayed with spaces.
- Blank spaces sometimes appear in sequence track due to off by one rounding errors in the drawing calculations