diff --git a/.gitignore b/.gitignore
index 7b713f6..bf2f680 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,7 @@
-*~
+.gitignore
+.project
+.pydevproject
+.settings
+google_api_key.txt
+static/js/d3.js
 *.pyc
-.idea
\ No newline at end of file
diff --git a/README.rst b/README.rst
index 0148fb7..6f866c7 100644
--- a/README.rst
+++ b/README.rst
@@ -4,12 +4,14 @@ api-client-python
 Getting started
 ---------------
 
-This Python client provides a simple web application which fetches data from the
+This Python client demonstrates a simple web-based genome browser that fetches data from the 
 `Google Genomics API`_, the NCBI Genomics API or the Local Readstore through a web
-interface.
+interface, and displays a pileup of reads with support for zooming and basic navigation and search.
+
+You can try out the sample genome browser, called GABrowse, now by going to https://gabrowse.appspot.com.
 
 It can be run with app engine or without.
-See `the docs <google-genomics.readthedocs.org/en/latest/api-client-python>`_
+See `the docs <http://google-genomics.readthedocs.org/en/latest/api-client-python>`_
 for more information.
 
 .. _Google Genomics Api: https://developers.google.com/genomics
@@ -48,29 +50,23 @@ Then install the required dependencies and run the ``localserver.py`` file::
 Enabling the Google API
 ~~~~~~~~~~~~~~~~~~~~~~~
 
-If you want to pull in data from `Google Genomics API`_ you will need to set
-``API_KEY`` in ``main.py`` to a valid Google API key.
-
-* First apply for access to the Genomics API by following the instructions at
-  https://developers.google.com/genomics/
+If you want to pull in data from `Google Genomics API`_ you will need to store a valid
+Google API key into a file named ``google_api_key.txt``.
 
-* Then create a project in the
-  `Google Developers Console <https://console.developers.google.com>`_
-  or select an existing one.
+* First create a `Genomics enabled project <https://console.developers.google.com/flows/enableapi?apiid=genomics>`_ 
+  in the Google Developers Console.
 
-* On the **APIs & auth** tab, select APIs and turn the Genomics API to ON
-
-* On the **Credentials** tab, click **create new key** under
+* Once you are redirected to the **Credentials** tab, click **create new key** under
   the Public API access section.
 
 * Select **Server key** in the dialog that pops up, and then click **Create**.
   (You don't need to enter anything in the text box)
 
 * Copy the **API key** field value that now appears in the Public API access
-  section into the top of ``main.py``. It should look something like this::
-
-    API_KEY = "abcdef12345abcdef"
+  section into a new file named ``google_api_key.txt`` in the same directory as ``main.py``.
+  The file should consist of a single undecorated line like this::
 
+    abcdef12345abcdef
 
 Note: You can also reuse an existing API key if you have one.
 Just make sure the Genomics API is turned on.
@@ -152,12 +148,11 @@ from any API provider. It deploys on App Engine (to meet the
 
 Awesome possible features include:
 
-* Incorporating variant data into the UI.
 * Add more information to the read display (show inserts, highlight mismatches
   against the reference, etc)
 * Possibly cleaning up the js code to be more plugin friendly - so that pieces
   could be shared and reused (d3 library? jquery plugin?)
 * Staying up to date on API changes (readset searching now has pagination, etc)
-* Better searching of Snpedia (or another provider)
+* Better searching of Snpedia (or another provider - EBI?)
 * Other enhancement ideas are very welcome
 * (for smaller/additional tasks see the GitHub issues)
diff --git a/main.html b/main.html
index 0564556..3e300ca 100644
--- a/main.html
+++ b/main.html
@@ -23,11 +23,13 @@
   <script src="/https/github.com/static/js/d3.v3.min.js" charset="utf-8"></script>
   <script src="/https/github.com/static/js/underscore-min.js" charset="utf-8"></script>
   <script src="/https/github.com/static/js/jquery.bootpag.min.js" charset="utf-8"></script>
+  <script src="/https/github.com/static/js/rbtree.js" charset="utf-8"></script>
 
   <!-- Browser code -->
   <link rel="stylesheet" href="/https/github.com/static/css/main.css">
   <script src="/https/github.com/static/js/main.js" charset="utf-8"></script>
   <script src="/https/github.com/static/js/readgraph.js" charset="utf-8"></script>
+  <script src="/https/github.com/static/js/readcache.js" charset="utf-8"></script>
 </head>
 
 <body>
@@ -51,13 +53,13 @@ <h4 class="modal-title">About GABrowse</h4>
       </div>
       <div class="modal-body">
         <p class="lead">GABrowse is a sample application designed to demonstrate the capabilities of the
-        <a href="http://ga4gh.github.io/apis/reads/v0.1/">GA4GH Reads API v0.1</a>.</p>
+        <a href="http://ga4gh.github.io/apis/reads/v0.1/">GA4GH API v0.1</a>.</p>
 
-        <p>Currently, you can view Reads from Google, NCBI and EBI.</p>
+        <p>Currently, you can view data from Google, NCBI and EBI.</p>
 
         <p>
           <ul>
-            <li>Use the button on the left to select a Readset.</li>
+            <li>Use the button on the left to select a Readset or Callset.</li>
             <li>Once loaded, choose a chromosome and zoom or drag the main graph to
               explore <a href="http://en.wikipedia.org/wiki/DNA_sequence">Read data.</a></li>
             <li>Individual <a href="http://en.wikipedia.org/wiki/Nucleobase">bases</a>
@@ -76,12 +78,12 @@ <h4 class="modal-title">About GABrowse</h4>
   </div>
 </div>
 
-<div class="modal" id="readsetSearch">
+<div class="modal" id="setSearch">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <h4 class="modal-title">Select a readset to view</h4>
+        <h4 class="modal-title">Select data to view</h4>
       </div>
       <div class="modal-body">
         <form class="form-inline" style="margin-bottom: 10px">
@@ -97,7 +99,7 @@ <h4 class="modal-title">Select a readset to view</h4>
           <div class="form-group">
             {% for backend, data in backends.iteritems() %}
               <!-- TODO: Simplify this -->
-              <select class="form-control datasetSelector" id="datasetId{{ backend }}">
+              <select class="form-control datasetSelector" id="datasetId{{ backend }}" supportsCallsets="{{ data.supportsCallsets }}">
               {% for dataset, datasetId in data.datasets.iteritems() %}
                   <option value="{{ datasetId }}"> {{ dataset }} </option>
                 {% endfor %}
@@ -105,14 +107,30 @@ <h4 class="modal-title">Select a readset to view</h4>
             {% endfor %}
           </div>
           <div class="form-group">
-            <input type="text" class="form-control" placeholder="name" id="readsetName"/>
+            <input type="text" class="form-control" placeholder="name" id="setName"/>
           </div>
-          <button type="submit" class="btn btn-primary" onclick="return searchReadsets(this)">Search</button>
+          <button type="submit" class="btn btn-primary" onclick="searchSets(this); return false;">Search</button>
         </form>
-        <div id="readsetResults" class="list-group">
-          <img src="static/img/spinner.gif"/>
+        <div>
+          <ul class="nav nav-tabs">
+            <li class="active" id="READSETTab"><a>Readsets</a></li>
+            <li class="disabled" id="CALLSETTab"><a>Callsets</a></li>
+          </ul>
+          <div class="tab-content">
+            <div class="tab-pane active" id="searchPaneREADSET">
+              <div class="list-group results">
+                <img src="static/img/spinner.gif"/>
+              </div>
+              <div class="paginationContainer"></div>
+            </div>
+            <div class="tab-pane" id="searchPaneCALLSET">
+              <div class="list-group results">
+                <img src="static/img/spinner.gif"/>
+              </div>
+              <div class="paginationContainer"></div>
+            </div>
+          </div>
         </div>
-        <div id="readsetPagination"></div>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
@@ -124,32 +142,35 @@ <h4 class="modal-title">Select a readset to view</h4>
 <!-- Read browser -->
 <div class="toggleable reads">
   <div class="col-md-2">
-    <h4>Readsets</h4>
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#readsetSearch">
-      <span class="glyphicon glyphicon-plus"/> Add
+    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#setSearch">
+      <span class="glyphicon glyphicon-plus"></span> Add data
     </button>
-    <ul class="list-group" id="activeReadsets" style="margin-top: 20px">
 
-    </ul>
+    <h5 id="CALLSETTitle" style="display:none">Callsets</h5>
+    <ul class="list-group" id="activeCALLSET" style="margin-top: 20px"></ul>
+
+    <h5 id="READSETTitle" style="display:none">Readsets</h5>
+    <ul class="list-group" id="activeREADSET" style="margin-top: 20px"></ul>
+
+
     <div class="well" style="display: none" id="jumpDiv">
       <form role="form">
         <div class="form-group">
           <input type="text" class="form-control" name="name" placeholder="TAS2R38 or rs1726866 or 150,000" id="readsetPosition">
         </div>
         <button type="submit" class="btn btn-primary"
-                onclick="switchToLocation($('#readsetPosition').val()); return false;">Jump to position</button>
+                onclick="updateUserLocation($('#readsetPosition').val()); return false;">Jump to position</button>
         <div id="jumpResults" class="list-group"></div>
       </form>
     </div>
 
-    <div class="well" style="display: none" id="readDiv">
-
-    </div>
+    <div class="infoDiv" style="display: none" id="variantDiv"></div>
+    <div class="infoDiv" style="display: none" id="readDiv"></div>
   </div>
 
   <div class="col-md-10">
-    <div id="chooseReadsetMessage">
-      <h3><small>Add a readset to get started.</small></h3>
+    <div id="chooseSetMessage">
+      <h3><small>Add a readset or callset to get started.</small></h3>
     </div>
     <div id="sequences"></div>
     <svg id="graph"></svg>
diff --git a/main.py b/main.py
index 2e15e6d..68f592e 100644
--- a/main.py
+++ b/main.py
@@ -18,11 +18,8 @@
 - and it provides a simple set of apis to the javascript
 """
 
-# If this is set to a valid API key string, then the Google
-# backend will be enabled.
-GOOGLE_API_KEY = None
-
 import httplib2
+import time
 import jinja2
 import json
 import logging
@@ -39,31 +36,40 @@
     autoescape=True,
     extensions=['jinja2.ext.autoescape'])
 
+
 # TODO: Dataset information should come from the list datasets api call
 SUPPORTED_BACKENDS = {
   'NCBI' : {'name': 'NCBI',
             'url': 'http://trace.ncbi.nlm.nih.gov/Traces/gg/%s?%s',
+            'supportsPartialResponse': True,
             'datasets': {'SRP034507': 'SRP034507', 'SRP029392': 'SRP029392'}},
   'EBI' : {'name': 'EBI',
             'url': 'http://193.62.52.16/%s?%s',
             'datasets': {'All data': 'data'}},
   'LOCAL' : {'name': 'Local',
              'url': 'http://localhost:5000/%s?%s',
+             'supportsPartialResponse': True,
              'datasets': {'All': ''}},
 }
 
-if GOOGLE_API_KEY:
-  # Google requires a valid API key
-  SUPPORTED_BACKENDS['GOOGLE'] = {
-    'name': 'Google',
-    'url': 'https://www.googleapis.com/genomics/v1beta/%s?key='
-           + GOOGLE_API_KEY + "&%s",
-    'supportsNameFilter': True,
-    'datasets': {'1000 Genomes': '376902546192',
-                 'DREAM SMC Challenge': '337315832689',
-                 'PGP': '383928317087',
-                 'Simons Foundation' : '461916304629'}
-  }
+# Google requires a valid API key.  If the file 'google_api_key.txt' exists
+# then the Google API will be enabled.
+google_api_key_file = os.path.join(os.path.dirname(__file__), 'google_api_key.txt')
+if os.path.isfile(google_api_key_file):
+  with open(google_api_key_file, 'r') as file:
+    api_key = file.readline().strip()
+    SUPPORTED_BACKENDS['GOOGLE'] = {
+      'name': 'Google',
+      'url': 'https://www.googleapis.com/genomics/v1beta/%s?key='
+             + api_key + '&%s',
+      'supportsNameFilter': True,
+      'supportsPartialResponse': True,
+      #'supportsCallsets': True,
+      'datasets': {'1000 Genomes': '376902546192',
+                   'DREAM SMC Challenge': '337315832689',
+                   'PGP': '383928317087',
+                   'Simons Foundation' : '461916304629'}
+    }
 
 
 class ApiException(Exception):
@@ -93,39 +99,55 @@ def get_backend(self):
   def supports_name_filter(self):
     return SUPPORTED_BACKENDS[self.get_backend()].has_key('supportsNameFilter')
 
+  def supports_partial_response(self):
+    return SUPPORTED_BACKENDS[self.get_backend()].has_key('supportsPartialResponse')
+
   def get_base_api_url(self):
     return SUPPORTED_BACKENDS[self.get_backend()]['url']
 
-  def get_content(self, path, method='POST', body=None, params=""):
+  def get_content(self, path, method='POST', body=None, params=''):
+    uri= self.get_base_api_url() % (path, params)
+    startTime = time.clock()
     response, content = http.request(
-      uri= self.get_base_api_url() % (path, params),
+      uri,
       method=method, body=json.dumps(body) if body else None,
       headers={'Content-Type': 'application/json; charset=UTF-8'})
+    contentLen = len(content)
 
     try:
       content = json.loads(content)
     except ValueError:
-      logging.error("non-json api content %s" % content[:1000])
+      logging.error('while requesting {}'.format(uri))
+      logging.error('non-json api content %s' % content[:1000])
       raise ApiException('The API returned invalid JSON')
 
     if response.status >= 300:
-      logging.error("error api response %s" % response)
-      logging.error("error api content %s" % content)
+      logging.error('error api response %s' % response)
+      logging.error('error api content %s' % content)
       if 'error' in content:
         raise ApiException(content['error']['message'])
       else:
         raise ApiException('Something went wrong with the API call!')
+
+    logging.info('get_content {}: {}kb {}s'.format(uri, contentLen/1024, time.clock() - startTime))
     return content
 
-  def write_content(self, path, method='POST', body=None):
-    self.response.write(json.dumps(self.get_content(path, method, body)))
+  def write_response(self, content):
+    self.response.headers['Content-Type'] = "application/json"
+    self.response.write(json.dumps(content))
+    
+  def write_content(self, path, method='POST', body=None, params=''):
+    self.write_response(self.get_content(path, method, body, params))
 
 
-class ReadsetSearchHandler(BaseRequestHandler):
+class SetSearchHandler(BaseRequestHandler):
 
   def get(self):
-    readset_id = self.request.get('readsetId')
-    if not readset_id:
+    use_callsets = self.request.get('setType') == 'CALLSET'
+    set_type = 'callsets' if use_callsets  else 'readsets'
+    set_id = self.request.get('setId')
+
+    if not set_id:
       dataset_id = self.request.get('datasetId')
       name = self.request.get('name')
       if dataset_id:
@@ -137,33 +159,79 @@ def get(self):
       if self.supports_name_filter():
         body['name'] = name
 
-      response = self.get_content("readsets/search", body=body,
-                                  params="fields=readsets(id,name)")
+      response = self.get_content('%s/search' % set_type, body=body,
+                                  params='fields=%s(id,name)' % set_type)
 
       if not self.supports_name_filter() and name:
         name = name.lower()
-        response['readsets'] = [r for r in response['readsets']
+        response[set_type] = [r for r in response[set_type]
                                 if name in r['name'].lower()]
       self.response.write(json.dumps(response))
       return
 
-    # Single readset response
-    self.write_content("readsets/%s" % readset_id, method='GET')
+    # Single object response
+    if use_callsets:
+      callset = self.get_content('%s/%s' % (set_type, set_id), method="GET")
+
+      # For callsets, we also load up the variant summary data to get
+      # the available contigs and lengths
+      dataset_id = callset['datasetId']
+      summary = self.get_content('variants/summary', method="GET",
+                                 params='datasetId=%s' % dataset_id)
+
+      callset['contigs'] = [{'name': b['contig'], 'length': b['upperBound']}
+                            for b in summary['contigBounds']]
+      self.response.write(json.dumps(callset))
+      return
+
+    self.write_content('%s/%s' % (set_type, set_id), method='GET')
 
 
 class ReadSearchHandler(BaseRequestHandler):
 
   def get(self):
     body = {
-      'readsetIds': self.request.get('readsetIds').split(','),
+      'readsetIds': self.request.get('setIds').split(','),
       'sequenceName': self.request.get('sequenceName'),
       'sequenceStart': max(0, int(self.request.get('sequenceStart'))),
       'sequenceEnd': int(self.request.get('sequenceEnd')),
     }
+    readFields = self.request.get('readFields')
+    params = ''
+    if readFields and self.supports_partial_response():
+        params = 'fields=nextPageToken,reads(%s)' % readFields
+        body['maxResults'] = 1024
+    pageToken = self.request.get('pageToken')
+    if pageToken:
+      body['pageToken'] = pageToken
+
+    content = self.get_content('reads/search', body=body, params=params)
+
+    # Emulate support for partial responses by supplying only the
+    # requested fields to the client.
+    if readFields and not self.supports_partial_response():
+      fields = readFields.split(',')
+      def filterKeys(dict, keys):
+        return { key: dict[key] for key in keys }
+      newReads = [ filterKeys(read, fields) for read in content['reads']]
+      content['reads'] = newReads
+      
+    self.write_response(content)
+
+
+class VariantSearchHandler(BaseRequestHandler):
+
+  def get(self):
+    body = {
+      'callsetIds': self.request.get('setIds').split(','),
+      'contig': self.request.get('sequenceName'),
+      'startPosition': max(0, int(self.request.get('sequenceStart'))),
+      'endPosition': int(self.request.get('sequenceEnd')),
+    }
     pageToken = self.request.get('pageToken')
     if pageToken:
       body['pageToken'] = pageToken
-    self.write_content("reads/search", body=body)
+    self.write_content('variants/search', body=body)
 
 
 class BaseSnpediaHandler(webapp2.RequestHandler):
@@ -258,7 +326,8 @@ def get(self):
     [
      ('/', MainHandler),
      ('/api/reads', ReadSearchHandler),
-     ('/api/readsets', ReadsetSearchHandler),
+     ('/api/variants', VariantSearchHandler),
+     ('/api/sets', SetSearchHandler),
      ('/api/snps', SnpSearchHandler),
      ('/api/alleles', AlleleSearchHandler),
     ],
diff --git a/static/css/main.css b/static/css/main.css
index be2e659..cdeecd8 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -50,6 +50,7 @@ limitations under the License.
 #sequences .sequence .title {
   white-space: normal;
   word-wrap: break-word;
+  display: inline-block;
 }
 
 #sequences .sequence .summary {
@@ -60,19 +61,32 @@ limitations under the License.
   color: white;
 }
 
-#readDiv h4 {
+#sequences .sequence .badge {
+  background-color: #ddd;
+}
+
+#sequences .sequence.active .badge {
+  background-color: white;
+  color: #428bca;
+}
+
+.infoDiv h4 {
   word-wrap: break-word;
 }
 
-#readsetSearch .modal-body {
+#setSearch .modal-body {
   padding-bottom: 0;
 }
 
-#readsetPagination {
+#setSearch .results {
+  padding-top: .75em;
+}
+
+.paginationContainer {
   text-align: center;
 }
 
-#readsetPagination ul {
+.paginationContainer ul {
   margin: 0;
 }
 
@@ -96,7 +110,7 @@ limitations under the License.
 svg {
   margin-top: 20px;
   width: 100%;
-  height: 800px;
+  height: 800px; /* Height is updated in readgraph.js */
   display: none;
 }
 .axis line,
@@ -137,6 +151,10 @@ svg {
   text-anchor: middle;
 }
 
+.variant .outline {
+  stroke: black;
+}
+
 .coverageSummary, .coverage {
   fill: none;
   stroke: black;
diff --git a/static/js/main.js b/static/js/main.js
index bcda8ae..279c50b 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -13,6 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+"use strict";
+
+var CALLSET_TYPE = "CALLSET";
+var READSET_TYPE = "READSET";
 
 function toggleUi(clazz, link) {
   $(".toggleable").hide();
@@ -42,76 +46,150 @@ function showAlert(message, type) {
   }, type == 'danger' ? 5000 : 3000);
 }
 
+function assert(condition) {
+  if (!condition) {
+    console.error('assert failed');
+  }
+}
+
 function closeButton() {
   return $('<button type="button" class="close" aria-hidden="true">&times;</button>');
 }
 
-function addReadset(backend, id, opt_location) {
-  if (readgraph.hasReadset(id)) {
-    if (opt_location) {
-      readgraph.jumpGraph(opt_location);
+var loadedSetData = {};
+function loadSet(backend, readsetIds, callsetIds, opt_location, setType, id) {
+  if (_.has(loadedSetData, id)) {
+    return false;
+  }
+
+  showMessage('Loading data');
+
+  $.getJSON('/api/sets', {backend: backend, setType: setType, setId: id})
+    .done(function(res) {
+      var sequenceData = res.contigs || res.fileData[0].refSequences;
+      loadedSetData[id] = {id: id, name: res.name, type: setType,
+        backend: backend, sequences: sequenceData};
+      updateSets(backend, readsetIds, callsetIds, opt_location);
+    });
+  return true;
+}
+
+function updateSets(backend, readsetIds, callsetIds, opt_location) {
+  // Load missing readsets
+  for (var i = 0; i < readsetIds.length; i++) {
+    if (loadSet(backend, readsetIds, callsetIds, opt_location, READSET_TYPE, readsetIds[i])) {
+      // Wait for the set to callback
+      return;
     }
-    return;
   }
-  showMessage('Loading readset');
 
-  $.getJSON('/api/readsets', {'backend' : backend, 'readsetId': id})
-      .done(function(res) {
-        readgraph.addReadset(backend, id, res.fileData[0].refSequences);
-        if (opt_location) {
-          readgraph.jumpGraph(opt_location);
-        }
+  // Load missing callsets
+  for (var j = 0; j < callsetIds.length; j++) {
+    if (loadSet(backend, readsetIds, callsetIds, opt_location, CALLSET_TYPE, callsetIds[j])) {
+      // Wait for the set to callback
+      return;
+    }
+  }
 
-        // TODO: Get this data from a better location
-        var backendName = $('#backend option[value=' + backend + ']').text().trim();
-        var name = backendName + ": " + res.name;
-
-        var readsetList = $('#activeReadsets').empty();
-        var li = $('<li>', {'id': 'readset-' + id, 'class': 'list-group-item'})
-            .text(name).appendTo(readsetList);
-        closeButton().appendTo(li).click(function() {
-          li.remove();
-          readgraph.removeReadset(id);
-          return false;
-        });
-      });
+  // TODO: Get this data from a better location
+  // TODO: Allow data from different backends to be loaded at the same time
+  var backendName = $('#backend option[value=' + backend + ']').text().trim();
+
+  updateListItems(backendName, READSET_TYPE, readsetIds, loadedSetData);
+  updateListItems(backendName, CALLSET_TYPE, callsetIds, loadedSetData);
+
+  // Update readgraph with new sets
+  var setData = _.filter(loadedSetData, function(data) {
+    return (_.contains(readsetIds, data.id) && data.type == READSET_TYPE) ||
+      (_.contains(callsetIds, data.id) && data.type == CALLSET_TYPE);
+  });
+
+  readgraph.updateSets(setData);
+  if (setData.length > 0 && opt_location) {
+    readgraph.jumpGraph(opt_location);
+  }
+}
+
+function updateListItems(backendName, setType, ids, loadedSetData) {
+  $('#' + setType + 'Title').toggle(ids.length > 0);
+  var setList = $('#active' + setType).empty();
+
+  $.each(ids, function(i, id) {
+    var name = loadedSetData[id].name;
+
+    var li = $('<li>', {'id': setType + '-' + id, 'class': 'list-group-item'})
+      .appendTo(setList);
+
+    closeButton().appendTo(li).click(function() {
+      removeSet(id, setType);
+      return false;
+    });
+
+    var displayName = backendName + ": " + name;
+    $('<div/>', {'class': 'setName'}).text(displayName).appendTo(li);
+  });
 }
 
-function searchReadsets(button) {
+function searchSets(button) {
   if (button) {
     button = $(button);
     button.button('loading');
   }
 
-  var div = $('#readsetResults').html('<img src="static/img/spinner.gif"/>');
   var backend = $('#backend').val();
-  var datasetId = $('#datasetId' + backend).val();
+  var datasetSelector = $('#datasetId' + backend);
+  var datasetId = datasetSelector.val();
+  var supportsCallsets = datasetSelector.attr("supportsCallsets");
+
+  searchSetsOfType(button, READSET_TYPE, backend, datasetId);
+
+  $("#CALLSETTab").toggleClass("disabled", !supportsCallsets);
+  if (supportsCallsets) {
+    searchSetsOfType(button, CALLSET_TYPE, backend, datasetId);
+  } else {
+    // Make sure the readset tab is selected
+    $("#READSETTab").click();
+  }
+}
+
+function setSearchTab(setType) {
+  $('.tab-pane').hide();
+  $('.nav-tabs li').removeClass("active");
+  $('#' + setType + 'Tab').addClass('active');
+  $('#searchPane' + setType).show();
+}
+
+function searchSetsOfType(button, setType, backend, datasetId) {
+  var tabPane = $('#searchPane' + setType);
+  var div = tabPane.find('.results')
+    .html('<img src="static/img/spinner.gif"/>');
 
   function getItemsOnPage(page) {
-    return $('#readsetResults .list-group-item[page=' + page + ']');
+    return div.find('.list-group-item[page=' + page + ']');
   }
 
-  var readsetsPerPage = 10;
-  $.getJSON('/api/readsets', {'backend': backend, 'datasetId': datasetId,
-      'name': $('#readsetName').val()})
+  var setsPerPage = 10;
+  $.getJSON('/api/sets', {'backend': backend, 'datasetId': datasetId,
+      'setType': setType, 'name': $('#setName').val()})
       .done(function(res) {
         div.empty();
 
-        var pagination = $('#readsetPagination');
+        var pagination = tabPane.find('.paginationContainer');
         pagination.hide();
 
-        if (!res.readsets) {
-          div.html('No readsets found');
+        var sets = res.readsets || res.callsets;
+        if (!sets) {
+          div.html('No data found');
           return;
         }
 
-        var totalPages = Math.ceil(res.readsets.length / readsetsPerPage);
+        var totalPages = Math.ceil(sets.length / setsPerPage);
 
-        $.each(res.readsets, function(i, data) {
-          var page = Math.floor(i / readsetsPerPage) + 1;
+        $.each(sets, function(i, data) {
+          var page = Math.floor(i / setsPerPage) + 1;
           $('<a/>', {'href': '#', 'class': 'list-group-item', 'page': page})
               .text(data.name).appendTo(div).click(function() {
-            switchToReadset(backend, data.id);
+            switchToSet(backend, setType, data.id);
             return false;
           }).hide();
         });
@@ -124,7 +202,7 @@ function searchReadsets(button) {
             total: totalPages,
             maxVisible: 10
           }).on("page", function(event, newPage) {
-            $('#readsetResults .list-group-item').hide();
+            div.find('.list-group-item').hide();
             getItemsOnPage(newPage).show();
           });
         }
@@ -132,32 +210,60 @@ function searchReadsets(button) {
       }).always(function() {
         button && button.button('reset');
       });
-  return false;
 }
 
 
 // Hash functions
 function setAnchor(map) {
-  window.location.hash = $.param(map);
+  window.location.hash = $.param(map, true);
 }
 
+var arrayKeys = ['readsetId', 'callsetId'];
 function getAnchorMap() {
   var hashParts = window.location.hash.substring(1).split('&');
   var map = {};
   for (var i = 0; i < hashParts.length; i++) {
     var option = decodeURIComponent(hashParts[i]).split('=');
-    map[option[0]] = option[1]
+    var key = option[0];
+    var value = option[1];
+
+    if (!_.contains(arrayKeys, key)) {
+      map[key] = value;
+    } else if (map[key]) {
+      map[key].push(value);
+    } else {
+      map[key] = [value];
+    }
   }
 
   return map;
 }
 
-function switchToReadset(backend, id) {
-  setAnchor({
-    backend: backend,
-    readsetId: id
-  });
-  $('#readsetSearch').modal('hide');
+function removeSet(id, setType) {
+  var state = getAnchorMap();
+  var key = setType == READSET_TYPE ? 'readsetId' : 'callsetId';
+  state[key] = _.without(state[key], id);
+  if (state[key].length == 0) {
+    delete state[key];
+  }
+  setAnchor(state);
+}
+
+function switchToSet(backend, setType, id) {
+  var state = getAnchorMap();
+  var key = setType == READSET_TYPE ? 'readsetId' : 'callsetId';
+
+  if (setType == READSET_TYPE) {
+    state[key] = [id];
+  } else {
+    state[key] = (state[key] || []);
+    state[key].push(id);
+  }
+
+  // TODO: Support multiple backends at once
+  state.backend = backend;
+  setAnchor(state);
+  $('#setSearch').modal('hide');
 }
 
 function switchToLocation(location) {
@@ -165,25 +271,34 @@ function switchToLocation(location) {
   setAnchor(state);
 }
 
+function updateUserLocation(location) {
+  switchToLocation(readgraph.jumpGraph(location));
+}
+
 function handleHash() {
   var state = getAnchorMap();
   if (state.backend) {
     $("#backend").val(state.backend);
-    if (state.readsetId) {
-      addReadset(state.backend, state.readsetId, state.location);
 
-      if (state.location) {
-        $("#readsetPosition").val(state.location);
-      }
+    updateSets(state.backend, (state.readsetId || []).slice(0, 1),
+      state.callsetId || [], state.location);
+    if (state.location) {
+      // Strip off the chromosome prefix
+      var colonIndex = state.location.indexOf(":");
+      var location = state.location.substring(colonIndex + 1);
+      $("#readsetPosition").val(location);
     }
   }
 }
 
 
-// Show the about popup when the page loads, read the hash,
-// and prep the initial readset search
+// Show the about popup when the page loads the first time, read the hash,
+// and prep the initial set search
 $(document).ready(function() {
-  $('#about').modal('show');
+  if (!sessionStorage.getItem('about-shown')) {
+    sessionStorage.setItem('about-shown', true);
+    $('#about').modal('show');
+  }
 
   $(document).ajaxError(function(e, xhr) {
     showError('Sorry, the api request failed for some reason. ' +
@@ -195,7 +310,21 @@ $(document).ready(function() {
 
   $('#backend').change(function() {
     $('.datasetSelector').hide();
-    $('#datasetId' + $(this).val()).show()
+    $('#datasetId' + $(this).val()).show();
   }).change();
-  searchReadsets();
+
+  // TODO: Simplify with general searchTab classes
+  $("#READSETTab").click(function() {
+    setSearchTab(READSET_TYPE);
+    return false;
+  });
+  $("#CALLSETTab").click(function() {
+    if ($(this).hasClass("disabled")) {
+      return false;
+    }
+    setSearchTab(CALLSET_TYPE);
+    return false;
+  });
+
+  searchSets();
 });
\ No newline at end of file
diff --git a/static/js/rbtree.js b/static/js/rbtree.js
new file mode 100644
index 0000000..b5bc328
--- /dev/null
+++ b/static/js/rbtree.js
@@ -0,0 +1,493 @@
+/* Copyright (C) 2011 by Vadim Graboys
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+RBTree = (function(window) {
+var global = window;
+var require = function(name) {
+    var fn = require.m[name];
+    if (fn.mod) {
+        return fn.mod.exports;
+    }
+
+    var mod = fn.mod = { exports: {} };
+    fn(mod, mod.exports);
+    return mod.exports;
+};
+
+require.m = {};
+require.m['./treebase'] = function(module, exports) {
+
+function TreeBase() {}
+
+// removes all nodes from the tree
+TreeBase.prototype.clear = function() {
+    this._root = null;
+    this.size = 0;
+};
+
+// returns node data if found, null otherwise
+TreeBase.prototype.find = function(data) {
+    var res = this._root;
+
+    while(res !== null) {
+        var c = this._comparator(data, res.data);
+        if(c === 0) {
+            return res.data;
+        }
+        else {
+            res = res.get_child(c > 0);
+        }
+    }
+
+    return null;
+};
+
+// returns iterator to node if found, null otherwise
+TreeBase.prototype.findIter = function(data) {
+    var res = this._root;
+    var iter = this.iterator();
+
+    while(res !== null) {
+        var c = this._comparator(data, res.data);
+        if(c === 0) {
+            iter._cursor = res;
+            return iter;
+        }
+        else {
+            iter._ancestors.push(res);
+            res = res.get_child(c > 0);
+        }
+    }
+
+    return null;
+};
+
+// Returns an interator to the tree node immediately before (or at) the element
+TreeBase.prototype.lowerBound = function(data) {
+    return this._bound(data, this._comparator);
+};
+
+// Returns an interator to the tree node immediately after (or at) the element
+TreeBase.prototype.upperBound = function(data) {
+    var cmp = this._comparator;
+
+    function reverse_cmp(a, b) {
+        return cmp(b, a);
+    }
+
+    return this._bound(data, reverse_cmp);
+};
+
+// returns null if tree is empty
+TreeBase.prototype.min = function() {
+    var res = this._root;
+    if(res === null) {
+        return null;
+    }
+
+    while(res.left !== null) {
+        res = res.left;
+    }
+
+    return res.data;
+};
+
+// returns null if tree is empty
+TreeBase.prototype.max = function() {
+    var res = this._root;
+    if(res === null) {
+        return null;
+    }
+
+    while(res.right !== null) {
+        res = res.right;
+    }
+
+    return res.data;
+};
+
+// returns a null iterator
+// call next() or prev() to point to an element
+TreeBase.prototype.iterator = function() {
+    return new Iterator(this);
+};
+
+// calls cb on each node's data, in order
+TreeBase.prototype.each = function(cb) {
+    var it=this.iterator(), data;
+    while((data = it.next()) !== null) {
+        cb(data);
+    }
+};
+
+// calls cb on each node's data, in reverse order
+TreeBase.prototype.reach = function(cb) {
+    var it=this.iterator(), data;
+    while((data = it.prev()) !== null) {
+        cb(data);
+    }
+};
+
+// used for lowerBound and upperBound
+TreeBase.prototype._bound = function(data, cmp) {
+    var cur = this._root;
+    var iter = this.iterator();
+
+    while(cur !== null) {
+        var c = this._comparator(data, cur.data);
+        if(c === 0) {
+            iter._cursor = cur;
+            return iter;
+        }
+        iter._ancestors.push(cur);
+        cur = cur.get_child(c > 0);
+    }
+
+    for(var i=iter._ancestors.length - 1; i >= 0; --i) {
+        cur = iter._ancestors[i];
+        if(cmp(data, cur.data) > 0) {
+            iter._cursor = cur;
+            iter._ancestors.length = i;
+            return iter;
+        }
+    }
+
+    iter._ancestors.length = 0;
+    return iter;
+};
+
+
+function Iterator(tree) {
+    this._tree = tree;
+    this._ancestors = [];
+    this._cursor = null;
+}
+
+Iterator.prototype.data = function() {
+    return this._cursor !== null ? this._cursor.data : null;
+};
+
+// if null-iterator, returns first node
+// otherwise, returns next node
+Iterator.prototype.next = function() {
+    if(this._cursor === null) {
+        var root = this._tree._root;
+        if(root !== null) {
+            this._minNode(root);
+        }
+    }
+    else {
+        if(this._cursor.right === null) {
+            // no greater node in subtree, go up to parent
+            // if coming from a right child, continue up the stack
+            var save;
+            do {
+                save = this._cursor;
+                if(this._ancestors.length) {
+                    this._cursor = this._ancestors.pop();
+                }
+                else {
+                    this._cursor = null;
+                    break;
+                }
+            } while(this._cursor.right === save);
+        }
+        else {
+            // get the next node from the subtree
+            this._ancestors.push(this._cursor);
+            this._minNode(this._cursor.right);
+        }
+    }
+    return this._cursor !== null ? this._cursor.data : null;
+};
+
+// if null-iterator, returns last node
+// otherwise, returns previous node
+Iterator.prototype.prev = function() {
+    if(this._cursor === null) {
+        var root = this._tree._root;
+        if(root !== null) {
+            this._maxNode(root);
+        }
+    }
+    else {
+        if(this._cursor.left === null) {
+            var save;
+            do {
+                save = this._cursor;
+                if(this._ancestors.length) {
+                    this._cursor = this._ancestors.pop();
+                }
+                else {
+                    this._cursor = null;
+                    break;
+                }
+            } while(this._cursor.left === save);
+        }
+        else {
+            this._ancestors.push(this._cursor);
+            this._maxNode(this._cursor.left);
+        }
+    }
+    return this._cursor !== null ? this._cursor.data : null;
+};
+
+Iterator.prototype._minNode = function(start) {
+    while(start.left !== null) {
+        this._ancestors.push(start);
+        start = start.left;
+    }
+    this._cursor = start;
+};
+
+Iterator.prototype._maxNode = function(start) {
+    while(start.right !== null) {
+        this._ancestors.push(start);
+        start = start.right;
+    }
+    this._cursor = start;
+};
+
+module.exports = TreeBase;
+
+};
+require.m['__main__'] = function(module, exports) {
+
+var TreeBase = require('./treebase');
+
+function Node(data) {
+    this.data = data;
+    this.left = null;
+    this.right = null;
+    this.red = true;
+}
+
+Node.prototype.get_child = function(dir) {
+    return dir ? this.right : this.left;
+};
+
+Node.prototype.set_child = function(dir, val) {
+    if(dir) {
+        this.right = val;
+    }
+    else {
+        this.left = val;
+    }
+};
+
+function RBTree(comparator) {
+    this._root = null;
+    this._comparator = comparator;
+    this.size = 0;
+}
+
+RBTree.prototype = new TreeBase();
+
+// returns true if inserted, false if duplicate
+RBTree.prototype.insert = function(data) {
+    var ret = false;
+
+    if(this._root === null) {
+        // empty tree
+        this._root = new Node(data);
+        ret = true;
+        this.size++;
+    }
+    else {
+        var head = new Node(undefined); // fake tree root
+
+        var dir = 0;
+        var last = 0;
+
+        // setup
+        var gp = null; // grandparent
+        var ggp = head; // grand-grand-parent
+        var p = null; // parent
+        var node = this._root;
+        ggp.right = this._root;
+
+        // search down
+        while(true) {
+            if(node === null) {
+                // insert new node at the bottom
+                node = new Node(data);
+                p.set_child(dir, node);
+                ret = true;
+                this.size++;
+            }
+            else if(is_red(node.left) && is_red(node.right)) {
+                // color flip
+                node.red = true;
+                node.left.red = false;
+                node.right.red = false;
+            }
+
+            // fix red violation
+            if(is_red(node) && is_red(p)) {
+                var dir2 = ggp.right === gp;
+
+                if(node === p.get_child(last)) {
+                    ggp.set_child(dir2, single_rotate(gp, !last));
+                }
+                else {
+                    ggp.set_child(dir2, double_rotate(gp, !last));
+                }
+            }
+
+            var cmp = this._comparator(node.data, data);
+
+            // stop if found
+            if(cmp === 0) {
+                break;
+            }
+
+            last = dir;
+            dir = cmp < 0;
+
+            // update helpers
+            if(gp !== null) {
+                ggp = gp;
+            }
+            gp = p;
+            p = node;
+            node = node.get_child(dir);
+        }
+
+        // update root
+        this._root = head.right;
+    }
+
+    // make root black
+    this._root.red = false;
+
+    return ret;
+};
+
+// returns true if removed, false if not found
+RBTree.prototype.remove = function(data) {
+    if(this._root === null) {
+        return false;
+    }
+
+    var head = new Node(undefined); // fake tree root
+    var node = head;
+    node.right = this._root;
+    var p = null; // parent
+    var gp = null; // grand parent
+    var found = null; // found item
+    var dir = 1;
+
+    while(node.get_child(dir) !== null) {
+        var last = dir;
+
+        // update helpers
+        gp = p;
+        p = node;
+        node = node.get_child(dir);
+
+        var cmp = this._comparator(data, node.data);
+
+        dir = cmp > 0;
+
+        // save found node
+        if(cmp === 0) {
+            found = node;
+        }
+
+        // push the red node down
+        if(!is_red(node) && !is_red(node.get_child(dir))) {
+            if(is_red(node.get_child(!dir))) {
+                var sr = single_rotate(node, dir);
+                p.set_child(last, sr);
+                p = sr;
+            }
+            else if(!is_red(node.get_child(!dir))) {
+                var sibling = p.get_child(!last);
+                if(sibling !== null) {
+                    if(!is_red(sibling.get_child(!last)) && !is_red(sibling.get_child(last))) {
+                        // color flip
+                        p.red = false;
+                        sibling.red = true;
+                        node.red = true;
+                    }
+                    else {
+                        var dir2 = gp.right === p;
+
+                        if(is_red(sibling.get_child(last))) {
+                            gp.set_child(dir2, double_rotate(p, last));
+                        }
+                        else if(is_red(sibling.get_child(!last))) {
+                            gp.set_child(dir2, single_rotate(p, last));
+                        }
+
+                        // ensure correct coloring
+                        var gpc = gp.get_child(dir2);
+                        gpc.red = true;
+                        node.red = true;
+                        gpc.left.red = false;
+                        gpc.right.red = false;
+                    }
+                }
+            }
+        }
+    }
+
+    // replace and remove if found
+    if(found !== null) {
+        found.data = node.data;
+        p.set_child(p.right === node, node.get_child(node.left === null));
+        this.size--;
+    }
+
+    // update root and make it black
+    this._root = head.right;
+    if(this._root !== null) {
+        this._root.red = false;
+    }
+
+    return found !== null;
+};
+
+function is_red(node) {
+    return node !== null && node.red;
+}
+
+function single_rotate(root, dir) {
+    var save = root.get_child(!dir);
+
+    root.set_child(!dir, save.get_child(dir));
+    save.set_child(dir, root);
+
+    root.red = true;
+    save.red = false;
+
+    return save;
+}
+
+function double_rotate(root, dir) {
+    root.set_child(!dir, single_rotate(root.get_child(!dir), !dir));
+    return single_rotate(root, dir);
+}
+
+module.exports = RBTree;
+};
+return require('__main__');
+})(window);
diff --git a/static/js/readcache.js b/static/js/readcache.js
new file mode 100644
index 0000000..2677498
--- /dev/null
+++ b/static/js/readcache.js
@@ -0,0 +1,199 @@
+/*
+Copyright 2014 Google Inc. All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+"use strict";
+
+/*
+ * Return whether two ranges overlap at all.
+ */
+function overlaps(start1, end1, start2, end2) {
+  return start1 < end2 && end1 > start2;
+};
+
+/*
+ * A data structure for keeping track of all the reads we have loaded.
+ * The objects in the cache have already been processed, and so must have
+ * their computed fields like end and readPieces (rather than the raw fields
+ * like originalBases).
+ */
+var readCache = new function() {
+  /*
+   * Whether we're caching base data.  All reads stored into the cache
+   * should have the 'originalBases' property if and only if this is true.
+   * When this changes from true to false, all cached base data is cleared.
+   * But when this changes from false to true, reads without base data are
+   * preserved until they can be updated to include the base data.
+   */
+  var wantBases = false;
+  this.__defineGetter__("wantBases", function() { return wantBases; });
+
+  /*
+   * The range [start,end) of sequence positions for which we are caching reads.
+   * There should never be any reads inside the cache that lie entirely outside
+   * this range.
+   */
+  var start = 0;
+  var end = 0;
+  this.__defineGetter__("start", function() { return start; });
+  this.__defineGetter__("end", function() { return end; });
+
+  // A map from read ID to read object.
+  var readsById = {};
+
+  // An array of RBTrees, one per track, containing all the reads assigned to
+  // that track by position.
+  var yTracks = [];
+
+  /*
+   * Returns all the reads in the cache.
+   */
+  this.getReads = function() {
+    return d3.values(readsById);
+  };
+
+  /*
+   * Clear the entire cache.
+   */
+  this.clear = function() {
+    wantBases = false;
+    start = 0;
+    end = 0;
+    readsById = {};
+    yTracks = [];
+  };
+
+  // Remove a specific read from the cache.
+  function removeRead(read) {
+    var removed = yTracks[read.yOrder].remove(read);
+    assert(removed);
+    assert(readsById[read.id] === read);
+    delete readsById[read.id];
+  };
+
+  /*
+   * Reset the cache range, clearing elements / base data that are no longer
+   * necessary.
+   */
+  this.setRange = function(newStart, newEnd, newBases) {
+    // Find all reads outside the new range and remove them.
+    // Ideally our RBTree implementation would just support
+    // efficiently removing ranges of nodes, or removing given an iterator.
+    for (var y = 0; y < yTracks.length; y++) {
+      var tree = yTracks[y];
+
+      // Remove nodes from the front as long as they're outside our range.
+      for(var read = tree.min(); read && read.end < newStart; read = tree.min()) {
+        assert(read.yOrder == y);
+        removeRead(read);
+      }
+
+      // Remove nodes from the end as long as they're outside our range.
+      for(var read = tree.max(); read && read.position >= newEnd; read = tree.max()) {
+        assert(read.yOrder == y);
+        removeRead(read);
+      }
+    }
+
+    // Discard stored bases if we don't want them anymore.
+    if (wantBases && !newBases) {
+      $.each(readsById, function(id, read) {
+        read.readPieces = [];
+      });
+    }
+
+    // Discard any cached reads that are now entirely outside our desired window.
+    $.each(readsById, function(id, read) {
+      if (!overlaps(read.position, read.end, newStart, newEnd)) {
+        delete readsById[id];
+      } else if (!newBases) {
+        read.readPieces = [];
+      }
+    });
+
+    start = newStart;
+    end = newEnd;
+    wantBases = newBases;
+  };
+
+  /*
+   * Return whether the cache already contains a read with the specified
+   * id and base status.
+   */
+  this.hasRead = function(id, bases) {
+    var existingRead = readsById[id];
+    if (existingRead && bases == ('readPieces' in existingRead)) {
+      return true;
+    }
+    return false;
+  };
+
+  // Comparer function for the RBTrees
+  function readOverlapComparer(r1, r2) {
+    if (overlaps(r1.position, r1.end, r2.position, r2.end)) {
+      return 0;  // reads that overlap are considered "equal"
+    }
+    // Since we know that no two reads in the tree overlap, we can sort
+    // just by the start position.
+    return r1.position - r2.position;
+  }
+
+  /*
+   * Adds the supplied read to the cache if it's still relevant, assigning a
+   * free yOrder property to thr read.
+   * If a read with this ID already exists, updates the read (eg. to add
+   * or remove base data) without changing the yOrder.
+   */
+  this.addOrUpdateRead = function(read) {
+    // The read should have already been processed.
+    assert('end' in read);
+    assert('readPieces' in read);
+    assert(!('originalBases' in read));
+
+    // If we don't actually want this read anymore, do nothing.
+    if (!overlaps(read.position, read.end, start, end)
+            || (read.readPieces.length > 0) != wantBases) {
+      return;
+    }
+
+    var existingRead = readsById[read.id];
+    if (existingRead) {
+      read.yOrder = existingRead.yOrder;
+      var removed = yTracks[read.yOrder].remove(existingRead);
+      assert(removed);
+      var inserted = yTracks[read.yOrder].insert(read);
+      assert(inserted);
+    } else {
+      // Find the lowest available track for this read.
+      assert(!('yOrder' in read));
+      for(read.yOrder = 0;; read.yOrder++) {
+        if (read.yOrder < yTracks.length) {
+          if (yTracks[read.yOrder].insert(read)) {
+            // Successfully inserted into this track.
+            break;
+          }
+        } else {
+          // Need a new track.
+          var newTree = new RBTree(readOverlapComparer);
+          yTracks[read.yOrder] = newTree;
+          var inserted = newTree.insert(read);
+          assert(inserted);
+          break;
+        }
+      }
+    }
+    readsById[read.id] = read;
+  };
+};
+
diff --git a/static/js/readgraph.js b/static/js/readgraph.js
index b8c80c8..6672796 100644
--- a/static/js/readgraph.js
+++ b/static/js/readgraph.js
@@ -13,13 +13,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+"use strict";
 
 var readgraph = new function() {
   var cigarMatcher = /([0-9]+[MIDNSHP=X])/gi
 
   var width = 0;
   var height = 800;
-  var margin = 30;
+  var margin = 40;
 
   var textHeight, textWidth = 0;
 
@@ -37,26 +38,58 @@ var readgraph = new function() {
   var unsupportedMessage = null;
 
   // Current state
-  var readsetIds = [];
-  var readsetBackend = null;
-  var sequences = null;
+  // Format: {id, type, backend, sequences}
+  var setObjects = [];
+  var mergedSequences = [];
   var currentSequence = null;
   var readStats = {}; // Map from position to stat information
-  var xhrTimeout = null;
+
+  var readTrackLength = 0;
+  var callsetTrackLength = 0;
 
   // Dom elements
-  var svg, positionIndicator, readGroup, readDiv, spinner = null;
+  var svg, axisGroup, readGroup, readDiv, variantDiv, spinner = null;
+  var hoverline, positionIndicator, positionIndicatorBg, positionIndicatorText;
+
+  var updateHeight = function() {
+    height = (readTrackLength + callsetTrackLength) * textHeight + 100;
+    height = Math.max(height, 450);
+    var totalTracks = (height - 100) / textHeight;
+
+    y.range([margin, height - margin*2]).domain([totalTracks, -1]);
+    $('#graph').height(height);
+
+    // TODO: Reduce duplicate height setting code
+    axisGroup.attr('transform', 'translate(0,' + (height - margin) + ')');
+    positionIndicatorBg.attr('height', height - margin);
+    positionIndicatorText.attr('y', height - margin - textHeight);
+    hoverline.attr("y2", height);
+
+    zoom.size([width, height]);
+
+    return totalTracks;
+  };
+
+  var clamp = function(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+  };
 
   var getScaleLevel = function() {
     return Math.floor(Math.log(zoom.scale()) / Math.log(zoomLevelChange) + .1);
   };
 
+  // Called at high frequency for any navigation of the UI (not just zooming).
+  // Should only do low-latency operations.
   var handleZoom = function() {
-    var tx = zoom.translate()[0];
-    // TODO: This isn't strict enough
-    tx = Math.max(tx, (1 - zoom.scale()) * width);
-    tx = Math.min(tx, 0);
-    zoom.translate([tx, 0]);
+    // Limit the domain (without changing the scale).  D3 should really
+    // handle this for us, see https://github.com/mbostock/d3/issues/1084.
+    // Note that we don't want to reset the domain itself because that
+    // also resets the scale and translation.
+    if (x.domain()[0] < 1) {
+      zoom.translate([zoom.translate()[0] - x(1) + x.range()[0], 0]);
+    } else if (x.domain()[1] > currentSequence.length) {
+      zoom.translate([zoom.translate()[0] - x(currentSequence.length) + x.range()[1], 0]);
+    }
     svg.select(".axis").call(xAxis);
 
     // Update scale bar
@@ -64,14 +97,25 @@ var readgraph = new function() {
     updateDisplay();
   };
 
+  // Called when a navigation operation has completed.  This is the place to
+  // do more expensive operations than simple UI updates.  Should not be
+  // called frequently.
+  var handleZoomEnd = function() {
+    handleZoom();
+    var scaleLevel = getScaleLevel();
+    if (scaleLevel >= 4) {
+      var sequenceStart = parseInt(x.domain()[0]);
+      var sequenceEnd = parseInt(x.domain()[1]);
+      ensureReadsCached(sequenceStart, sequenceEnd, scaleLevel > 5);
+    }
+  };
+
   var moveToSequencePosition = function(position) {
-    position = Math.max(0, position);
-    position = Math.min(currentSequence['length'], position);
+    position = clamp(position, 1, currentSequence.length);
 
     var newX = x(position);
     newX = zoom.translate()[0] - newX + width / 2;
     zoom.translate([newX, 0]);
-    handleZoom();
   };
 
   var setupRun = false;
@@ -91,11 +135,12 @@ var readgraph = new function() {
     minRange = (width / textWidth / 2); // Twice the zoom of individual bases
 
     readDiv = $('#readDiv');
+    variantDiv = $('#variantDiv');
 
 
     // Svg init
     // Reads Axis
-    svg.append('g')
+    axisGroup = svg.append('g')
         .attr('transform', 'translate(0,' + (height - margin) + ')')
         .attr('class', 'axis');
 
@@ -104,7 +149,7 @@ var readgraph = new function() {
         width/2, height/4);
 
     // Hover line
-    var hoverline = svg.append("line")
+    hoverline = svg.append("line")
         .attr("class", "hover hoverline")
         .attr("x1", 0).attr("x2", 0)
         .attr("y1", 0).attr("y2", height);
@@ -115,8 +160,7 @@ var readgraph = new function() {
 
     svg.on("mousemove", function() {
       var mouseX = d3.mouse(this)[0];
-      mouseX = Math.max(margin, mouseX);
-      mouseX = Math.min(width - margin, mouseX);
+      mouseX = clamp(mouseX, margin, width - margin);
 
       if (mouseX > width * 2/3) {
         hovertext.attr('x', mouseX - 3).style('text-anchor', 'end');
@@ -144,11 +188,11 @@ var readgraph = new function() {
     positionIndicator = svg.append('g')
         .attr('transform', 'translate(0,0)')
         .attr('class', 'axis');
-    positionIndicator.append('rect')
+    positionIndicatorBg = positionIndicator.append('rect')
         .attr('class', 'positionIndicator background')
         .attr('x', 0).attr('y', 0)
         .attr('width', textWidth * 1.5).attr('height', height - margin);
-    positionIndicator.append('text')
+    positionIndicatorText = positionIndicator.append('text')
         .attr('class', 'positionIndicator text')
         .attr('x', 3)
         .attr('y', height - margin - textHeight);
@@ -169,15 +213,12 @@ var readgraph = new function() {
       } else {
         newZoom = zoom.scale() / zoomLevelChange;
       }
-      newZoom = Math.max(1, newZoom);
-      newZoom = Math.min(maxZoom, newZoom);
+      newZoom = clamp(newZoom, 1, maxZoom);
       zoom.scale(newZoom);
-
-      handleZoom();
       moveToSequencePosition(middleX);
     };
 
-    zoom = d3.behavior.zoom().size([width, height]).on("zoom", handleZoom);
+    zoom = d3.behavior.zoom().size([width, height]).on("zoom", handleZoom).on("zoomend", handleZoomEnd);;
     svg.call(zoom);
 
     // Zoom background
@@ -205,6 +246,9 @@ var readgraph = new function() {
   };
 
   var chrLocation = /^(.*):(\d*)$/;
+
+  // Jumps the graph to the given user-entered position
+  // Returns a bookmarkable position value
   this.jumpGraph = function(location) {
     var jumpResults = $("#jumpResults").empty();
 
@@ -212,14 +256,14 @@ var readgraph = new function() {
     if (chrLocation.test(location)) {
       var matches = chrLocation.exec(location);
       jumpToPosition(parseInt(matches[2].replace(/,/g, '')), matches[1], true);
-      return;
+      return location;
     }
 
     var position = parseInt(location.replace(/,/g, ''));
     // Numbered locations
     if (position > 0) {
       jumpToPosition(position, null, true);
-      return;
+      return currentSequence.name + ":" + position;
     }
 
     // Queried locations
@@ -257,15 +301,16 @@ var readgraph = new function() {
         $("#jumpResults .list-group-item").click();
       }
     });
+    return location;
   };
 
   var fuzzyFindSequence = function(chr) {
-    var actualNames = _.pluck(sequences, 'name');
+    var actualNames = _.pluck(mergedSequences, 'name');
     var possibleNames = [chr, "chr" + chr];
     possibleNames = _.intersection(actualNames, possibleNames);
 
     if (possibleNames.length > 0) {
-      return _.findWhere(sequences, {name: possibleNames[0]});
+      return _.findWhere(mergedSequences, {name: possibleNames[0]});
     }
     return null;
   };
@@ -275,15 +320,13 @@ var readgraph = new function() {
       // Update our sequence
       var sequence = fuzzyFindSequence(chr);
       if (!sequence) {
-        showError('This readset doesn\'t have the sequence ' + chr +
-          '. Please try a different position.');
         return;
       }
 
       selectSequence(sequence);
     }
 
-    var currentLength = currentSequence['length'];
+    var currentLength = currentSequence.length;
     if (position > currentLength) {
       showError('This sequence only has ' + xFormat(currentLength) +
           ' bases. Please try a smaller position.');
@@ -298,9 +341,9 @@ var readgraph = new function() {
     var zoomLevel = baseView ? maxZoom : maxZoom / zoomLevelChange; // Read level
     if (zoom.scale() != zoomLevel) {
       zoom.scale(zoomLevel);
-      handleZoom();
     }
     moveToSequencePosition(position);
+    handleZoomEnd();
   };
 
   var addImage = function(parent, name, width, height, x, y,
@@ -321,6 +364,7 @@ var readgraph = new function() {
   };
 
   var selectSequence = function(sequence) {
+    readCache.clear();
     currentSequence = sequence;
     $('.sequence').removeClass('active');
     var div = $('#' + sequenceId(sequence.name)).addClass('active');
@@ -339,7 +383,7 @@ var readgraph = new function() {
     }
 
     // Axis and zoom
-    x.domain([0, sequence['length']]);
+    x.domain([1, sequence['length']]);
     maxZoom = Math.ceil(Math.max(1, sequence['length'] / minRange));
     zoomLevelChange = Math.pow(maxZoom, 1/6);
     zoom.x(x).scaleExtent([1, maxZoom]).size([width, height]);
@@ -351,10 +395,17 @@ var readgraph = new function() {
     return '/static/img/' + name + '.png';
   };
 
+  var getSequenceName = function(sequence) {
+    return sequence.name;
+  };
+
   var updateSequences = function() {
     var sequencesDiv = $("#sequences").empty();
+    var allSequences = _.flatten(_.pluck(setObjects, 'sequences'));
+    var indexedSequences = _.countBy(allSequences, getSequenceName);
+    mergedSequences = _.uniq(allSequences, false, getSequenceName);
 
-    $.each(sequences, function(i, sequence) {
+    $.each(mergedSequences, function(i, sequence) {
       var title, imageUrl;
 
       if (sequence.name.indexOf('X') != -1) {
@@ -374,6 +425,7 @@ var readgraph = new function() {
       }
 
       var summary = xFormat(sequence['length']) + " bases";
+      var setCount = indexedSequences[sequence.name];
 
       var sequenceDiv = $('<div/>', {'class': 'sequence',
         id: sequenceId(sequence.name)}).appendTo(sequencesDiv);
@@ -381,6 +433,10 @@ var readgraph = new function() {
         $('<img>', {'class': 'pull-left', src: imageUrl}).appendTo(sequenceDiv);
       }
       $('<div>', {'class': 'title'}).text(title).appendTo(sequenceDiv);
+      if (setObjects.length != setCount) {
+        $('<div>', {'class': 'badge pull-right'}).text(setCount)
+          .appendTo(sequenceDiv);
+      }
       $('<div>', {'class': 'summary'}).text(summary).appendTo(sequenceDiv);
 
       sequenceDiv.click(function() {
@@ -391,51 +447,103 @@ var readgraph = new function() {
     $('#jumpDiv').show();
   };
 
-  var updateDisplay = function(opt_skipReadQuery) {
+  // Update the UI for the current position.  Called frequently during a drag
+  // or zoom operation, and so this must be very fast (<16ms for 60fps dragging).
+  // This shouldn't create or manipulate any SVG/DOM objects for things not being
+  // displayed (eg. offscreen letters).
+  var updateDisplay = function() {
+    var maxY = updateHeight();
+
     var scaleLevel = getScaleLevel();
     var summaryView = scaleLevel < 2;
     var coverageView = scaleLevel == 2 || scaleLevel == 3;
     var readView = scaleLevel == 4 || scaleLevel == 5;
     var baseView = scaleLevel > 5;
 
-    var reads = readGroup.selectAll(".read");
-    var outlines = reads.selectAll(".outline");
-    var letters = reads.selectAll(".letter");
-
-    toggleVisibility(unsupportedMessage, summaryView || coverageView);
-    toggleVisibility(outlines, readView);
-    toggleVisibility(letters, baseView);
-    toggleVisibility(positionIndicator, baseView);
-
     var sequenceStart = parseInt(x.domain()[0]);
     var sequenceEnd = parseInt(x.domain()[1]);
 
-    if (!opt_skipReadQuery && (readView || baseView)) {
-      queryReads(sequenceStart, sequenceEnd);
+    var readsInView = readCache.getReads().filter(function(read) {
+      return overlaps(read.position, read.end, sequenceStart, sequenceEnd);
+    });
+    var reads = readGroup.selectAll(".read").data(readsInView,
+      function(read) { return read.id; });
+    reads.enter().append("g")
+      .attr('class', 'read')
+      .on("mouseover", showRead)
+      .on("mouseout", deselectObject);
+    reads.exit().remove();
+
+    var variants = readGroup.selectAll(".variant");
+
+    var readOutlines = reads.selectAll(".outline")
+      .data(function(read, i) { return [read];});
+    readOutlines.enter().append('polygon')
+      .attr('class', 'outline');
+    readOutlines.exit().remove();
+
+    var readLetters = reads.selectAll(".letter");
+
+    var variantOutlines = variants.selectAll(".outline");
+    var variantLetters = variants.selectAll(".letter");
+
+    // If we are trying to do base view but have no reads with bases yet, then
+    // just show reads for now.
+    if (baseView && readsInView.length
+        && readsInView.every(function (r) { return r.readPieces.length == 0; })) {
+      baseView = false;
+      readView = true;
     }
 
+    toggleVisibility(unsupportedMessage, summaryView || coverageView);
+    toggleVisibility(readOutlines, readView);
+    toggleVisibility(variantOutlines, readView);
+    toggleVisibility(readLetters, baseView);
+    toggleVisibility(variantLetters, baseView);
+    toggleVisibility(positionIndicator, baseView);
     // TODO: Bring back coverage and summary views
+
     if (readView) {
-      outlines.attr("points", outlinePoints);
+      readOutlines.attr("points", readOutlinePoints);
+      variantOutlines
+        .attr("x1", function(data) { return x(data.rx) + textWidth; })
+        .attr("x2", function(data) { return x(data.rx) + textWidth; })
+        .attr("y1", function(data) { return y(maxY - data.ry); })
+        .attr("y2", function(data) { return y(maxY - data.ry) + textHeight; });
+      readLetters.remove();
 
     } else if (baseView) {
-      letters.style('display', function(data, i) {
-            if (data.rx < sequenceStart || data.rx >= sequenceEnd - 1) {
-              return 'none';
-            } else {
-              return 'block';
-            }
-          })
-          .attr("x", function(data, i) {
+      var filterLetters = function(read) {
+        return read.readPieces.filter(function(letter) {
+          return letter.rx >= sequenceStart && letter.rx < sequenceEnd;
+        });
+      };
+      readLetters = readLetters.data(filterLetters, function(letter, i) {
+        // Although the docs don't say so explicitly, it appears that the
+        // key only needs to be unique within the group (read) as opposed to
+        // across all groups.
+        return letter.rx;
+      });
+
+      readLetters.enter().append('text')
+        .attr('class', 'letter')
+        .style('opacity', function(data, i) { return opacity(data.qual); })
+        .text(function(data, i) { return data.letter; });
+      readLetters.exit().remove();
+
+      readLetters.attr("x", function(data, i) {
             return x(data.rx) + textWidth;
           })
           .attr("y", function(data, i) {
-            return y(data.ry) + textHeight/2;
+            return y(this.parentNode.__data__.yOrder) + textHeight/2;
           });
+
+      // Red position highlight box
       var position = positionIndicator.attr('position');
       var indicatorX = x(position) + textWidth/2 - 2;
       positionIndicator.attr('transform', 'translate(' + indicatorX + ',0)');
 
+      // Read base stats
       var snp = positionIndicator.attr('snp');
       var loaded = positionIndicator.attr('loaded');
       if (!loaded && snp && readStats[position]) {
@@ -450,6 +558,14 @@ var readgraph = new function() {
           }
         });
       }
+
+      // Variants
+      variantLetters.attr("x", function(data, i) {
+            return x(data.rx) + textWidth;
+          })
+          .attr("y", function(data, i) {
+            return y(maxY - data.ry) + textHeight/2;
+          });
     }
   };
 
@@ -482,7 +598,7 @@ var readgraph = new function() {
     return points.join(' ');
   };
 
-  var outlinePoints = function(read, i) {
+  var readOutlinePoints = function(read, i) {
     var yTracksLength = y.domain()[0];
     var barHeight = Math.min(30, Math.max(2,
         (height - margin * 3) / yTracksLength - 5));
@@ -495,7 +611,7 @@ var readgraph = new function() {
       return '0,0';
     }
 
-    var startY = y(read.yOrder);
+    var startY = y(this.parentNode.__data__.yOrder);
     var endY = startY + barHeight;
     var midY = (startY + barHeight / 2);
 
@@ -520,73 +636,146 @@ var readgraph = new function() {
     return stringifyPoints(points);
   };
 
-  // Read details
-  var showRead = function(read, i) {
-    readDiv.empty().show();
+  // Hover details
+  var showObject = function(item, div, title, fields) {
+    div.empty().show();
+    closeButton().appendTo(div).click(function() {
+      div.hide();
+    });
 
-    $("<h4/>").text("Read: " + read.name).appendTo(readDiv);
-    var dl = $("<dl/>").addClass("dl").appendTo(readDiv);
+    $("<h4/>").text(title).appendTo(div);
+    var dl = $("<dl/>").addClass("dl-horizontal").appendTo(div);
 
-    var addField = function(title, field) {
-      if (field) {
-        $("<dt/>").text(title).appendTo(dl);
-        $("<dd/>").text(field).appendTo(dl);
-      }
-    };
+    $.each(fields, function(i, field) {
+      addField(dl, field[0], field[1]);
+    });
 
-    addField("Position", read.position);
-    addField("Length", read.length);
-    addField("Mate position", read.matePosition);
-    addField("Mapping quality", read.mappingQuality);
-    addField("Cigar", read.cigar);
+    d3.select(item).classed("selected", true);
+  };
 
-    d3.select(this).classed("selected", true);
+  var addField = function(dl, title, field) {
+    if (field) {
+      $("<dt/>").text(title).appendTo(dl);
+      $("<dd/>").text(field).appendTo(dl);
+    }
+  };
+
+  var showRead = function(read) {
+    showObject(this, readDiv, "Read: " + read.name, [
+      ["Position", read.position],
+      ["Length", read.length],
+      ["Mate position", read.matePosition],
+      ["Mapping quality", read.mappingQuality],
+      ["Cigar", read.cigar]
+    ]);
   };
 
-  var hideRead = function(read, i) {
+  var showVariant = function(data) {
+    var variant = data.variant;
+    var call = variant.calls[data.callIndex];
+
+    showObject(this, variantDiv, "Variant: " + variant.names.join(", "), [
+      ["Callset name", call.callsetName],
+      ["Position", variant.position]
+    ]);
+  };
+
+  var deselectObject = function(read, i) {
     d3.select(this).classed("selected", false);
   };
 
-  var setYOrder = function(read, yOrder) {
-    read.yOrder = yOrder;
 
-    for (var r = 0; r < read.readPieces.length; r++) {
-      read.readPieces[r].ry = read.yOrder;
+  // D3 object creation
+
+  var getGenotype = function(variant, call) {
+
+    // TODO: Switch to genotype field when its ready
+    var genotype = [];
+    var splits = call.info["GT"][0].split(/[|\/]/);
+    for (var g = 0; g < splits.length; g++) {
+      var allele = splits[g];
+      if (allele == 0) {
+        genotype.push(variant.referenceBases);
+      } else {
+        genotype.push(variant.alternateBases[allele - 1]);
+      }
     }
+
+    return genotype;
   };
 
-  var clearReads = function() {
-    if (readGroup) {
-      readGroup.selectAll('.read').remove();
-    }
-    if (readDiv) {
-      readDiv.hide();
-    }
-    if (positionIndicator) {
-      toggleVisibility(positionIndicator, false);
+  var setVariants = function(variants) {
+    var data = [];
+    var maxCalls = 0;
+
+    $.each(variants, function(i, variant) {
+      maxCalls = Math.max(variant.calls.length, maxCalls);
+
+      $.each(variant.calls, function(callIndex, call) {
+        data.push({
+          id: variant.id + call.callsetId,
+          rx: variant.position,
+          ry: callIndex,
+          genotype: getGenotype(variant, call).join(";"),
+          variant: variant,
+          callIndex: callIndex
+          // TODO: Use likelihood for opacity
+        });
+      });
+
+    });
+
+    var variantDivs = readGroup.selectAll(".variant").data(data,
+        function(data){ return data.id; });
+
+    variantDivs.enter().append("g")
+        .attr('class', 'variant')
+        .on("mouseover", showVariant)
+        .on("mouseout", deselectObject);
+
+    var outlines = variantDivs.selectAll('.outline')
+        .data(function(variant, i) { return [variant];});
+    outlines.enter().append('line').attr('class', 'outline');
+
+    var baseView = getScaleLevel() > 5;
+    if (baseView) {
+      var bases = variantDivs.selectAll(".letter")
+          .data(function(variant, i) { return [variant];});
+
+      bases.enter().append('text')
+          .attr('class', 'letter')
+          .text(function(data, i) { return data.genotype; });
     }
-    readStats = {};
+
+    variantDivs.exit().remove();
+
+    callsetTrackLength = maxCalls;
+    updateDisplay();
   };
 
-  var setReads = function(reads) {
-    var yTracks = [];
-    var readIds = {};
-    readStats = {};
+  var updateReads = function(reads) {
+    var newReadIds = {};
+
     $.each(reads, function(readi, read) {
-      // Interpret the cigar
-      // TODO: Compare the read against a reference as well
+      read.id = read.id || (read.name + read.position + read.cigar);
 
-      // TODO: Nobody is handing back actually unique ids right now
-      read.id = (read.id || read.name) + read.position + read.cigar;
-      if (readIds[read.id]) {
+      if (newReadIds[read.id]) {
         showError('There is more than one read with the ID ' + read.id +
-            ' - this will cause display problems');
+            ' - extras ignored');
+        return;
       }
-      readIds[read.id] = true;
+      newReadIds[read.id] = true;
 
+      // Skip this read if we already have exactly it.
+      if (readCache.hasRead(read)) {
+        return;
+      }
+
+      // Interpret the cigar
+      // TODO: Compare the read against a reference as well
       read.name = read.name || read.id;
       read.readPieces = [];
-      read.index = readi;
+
       if (!read.cigar) {
         // Hack for unmapped reads
         read.length = 0;
@@ -606,9 +795,13 @@ var readgraph = new function() {
         });
       };
 
-      var bases = read.originalBases.split('');
+      var bases = null;
+      if (read.originalBases) {
+        bases = read.originalBases.split('');
+      }
       var baseIndex = 0;
       var matches = read.cigar.match(cigarMatcher);
+      read.length = 0;
 
       for (var m = 0; m < matches.length; m++) {
         var match = matches[m];
@@ -624,7 +817,10 @@ var readgraph = new function() {
           case 'N':
             // Deletions get placeholders inserted
             for (var b = 0; b < baseCount; b++) {
-              addLetter(baseType, '-', 100);
+              if (bases) {
+                addLetter(baseType, '-', 100);
+              }
+              read.length++;
             }
             break;
           case 'S': // TODO: Reveal this skipped data somewhere
@@ -636,139 +832,201 @@ var readgraph = new function() {
           case '=':
             // Matches and insertions get displayed
             for (var j = 0; j < baseCount; j++) {
-              addLetter(baseType, bases[baseIndex],
+              if (bases) {
+                addLetter(baseType, bases[baseIndex],
                   read.baseQuality.charCodeAt(baseIndex) - 33);
+              }
               baseIndex++;
+              read.length++;
             }
             break;
         }
       }
 
-      read.length = read.readPieces.length;
+      // Remove data that's now redundant with readPieces.
+      if (bases) {
+        delete read.originalBases;
+        delete read.baseQuality;
+      }
+
       read.end = read.position + read.length;
       // The 5th flag bit indicates this read is reversed
       read.reverse = (read.flags >> 4) % 2 == 1;
 
-      for (var i = 0; i < yTracks.length; i++) {
-        if (yTracks[i] < read.position) {
-          yTracks[i] = read.end;
-          setYOrder(read, i);
-          return;
-        }
-      }
-
-      setYOrder(read, yTracks.length);
-      yTracks.push(read.end);
+      // Create or update the entry in the cache, assuming we still want it.
+      // Note that we can't easily test to see if we still want the read before
+      // doing the work above because we need to compute read.end.
+      readCache.addOrUpdateRead(read);
     });
 
-    y.domain([yTracks.length, -1]);
-
-    readGroup.selectAll('.read').remove();
-    if (reads.length == 0) {
-      // Update the data behind the graph
-      return;
-    }
-
-    var reads = readGroup.selectAll(".read").data(reads,
-        function(read){ return read.id; });
-
-    reads.enter().append("g")
-        .attr('class', 'read')
-        .attr('index', function(read, i) { return read.index; })
-        .on("mouseover", showRead)
-        .on("mouseout", hideRead);
+    updateDisplay();
+  };
 
-    var outlines = reads.selectAll('.outline')
-        .data(function(read, i) { return [read];});
-    outlines.enter().append('polygon')
-        .attr('class', 'outline');
+  // Data loading
 
-    var baseView = getScaleLevel() > 5;
-    if (baseView) {
-      var letters = reads.selectAll(".letter")
-          .data(function(read, i) { return read.readPieces; });
+  var makeQueryParams = function(sequenceStart, sequenceEnd, type, opt_bases) {
+    var sets = _.where(setObjects, {type: type});
+    if (sets.length == 0) {
+      return null;
+    }
 
-      letters.enter().append('text')
-          .attr('class', 'letter')
-          .style('opacity', function(data, i) { return opacity(data.qual); })
-          .text(function(data, i) { return data.letter; });
+    var setIds = _.pluck(sets, 'id');
+    var setBackends = _.uniq(_.pluck(sets, 'backend'));
+    if (setBackends.length > 1) {
+      showError("Currently all sets of the same type " +
+        "must be from the same backend");
+      return null;
     }
-    reads.exit().remove();
-    updateDisplay(true);
-  };
 
-  var makeQueryParams = function(sequenceStart, sequenceEnd, type) {
     var queryParams = {};
-    queryParams.readsetIds = readsetIds.join(',');
-    queryParams.backend = readsetBackend;
-    queryParams.type = type;
+    queryParams.setIds = setIds.join(',');
+    queryParams.backend = setBackends[0];
     queryParams.sequenceName = currentSequence.name;
     queryParams.sequenceStart = parseInt(sequenceStart);
     queryParams.sequenceEnd = parseInt(sequenceEnd);
+
+    if (type == READSET_TYPE) {
+      var baseFields = opt_bases ? ',originalBases,baseQuality' : '';
+      // TODO: Google Read ID is rather long (increases transfer volume by ~50%
+      // in read view).  Should we synthesize our own instead?
+      queryParams.readFields = 'id,name,position,matePosition,mappingQuality,cigar' + baseFields;
+    }
+
     return queryParams;
   };
 
-  var queryReads = function(sequenceStart, sequenceEnd) {
-    queryApi(sequenceStart, sequenceEnd, 'reads', setReads);
+  var MIN_CACHE_FACTOR = 0.5;
+  var MAX_CACHE_FACTOR = 1;
+
+  var ensureReadsCached = function(start, end, bases) {
+
+    // Cache additional data than just what's requested so that we can do
+    // some small navigations quickly and without incurring redudant transfers.
+    // Smaller values of the cache factor result in more redundant read
+    // operations, larger values use more memory and reduce the likelihood of
+    // temporarily seeing missing reads.
+    var addingBases = bases && !readCache.wantBases;
+    var windowSize = end - start;
+    if (start - windowSize * MIN_CACHE_FACTOR >= readCache.start
+        && end + windowSize * MIN_CACHE_FACTOR <= readCache.end
+        && !addingBases) {
+      return;
+    }
+
+    var desiredStart = start - windowSize * MAX_CACHE_FACTOR;
+    desiredStart = clamp(desiredStart, 1, currentSequence.length);
+    var desiredEnd = end + windowSize * MAX_CACHE_FACTOR;
+    desiredEnd = clamp(desiredEnd, 1, currentSequence.length);
+
+    if (overlaps(desiredStart, desiredEnd, readCache.start, readCache.end)
+        && !addingBases) {
+      // Don't re-request the reads we already have.  This will still retransfer
+      // reads which overlap the boundaries, but that should be small in practice.
+      if (desiredStart < readCache.start) {
+        queryData(desiredStart, readCache.start, bases);
+      }
+      if (desiredEnd > readCache.end) {
+        queryData(readCache.end, desiredEnd, bases);
+      }
+    } else {
+      queryData(desiredStart, desiredEnd, bases);
+    }
+
+    readCache.setRange(desiredStart, desiredEnd, bases);
   };
 
-  // TODO: Make this cleaner
-  var queryApi = function(sequenceStart, sequenceEnd, type, handler) {
-    var queryParams = makeQueryParams(sequenceStart, sequenceEnd, type);
+  var queryData = function(start, end, bases) {
+    var readParams = makeQueryParams(start, end, READSET_TYPE, bases);
+    var variantParams = makeQueryParams(start, end, CALLSET_TYPE);
 
-    if (xhrTimeout) {
-      clearTimeout(xhrTimeout);
+    if (readParams) {
+      callXhr('/api/reads', readParams, updateReads);
+    }
+    if (variantParams) {
+      callXhr('/api/variants', variantParams, setVariants);
     }
-
-    xhrTimeout = setTimeout(function() {
-      callXhr('/api/reads', queryParams, handler);
-    }, 500);
   };
 
-  var callXhr = function(url, queryParams, handler, opt_reads) {
-    spinner.style('display', 'block');
+
+  var pendingLoads = 0;
+  var totalLoads = 0;
+  var startLoadMonitor = function() {
+    if (!pendingLoads) {
+      spinner.style('display', 'block');
+    }
+    pendingLoads++;
+    var loadIndex = totalLoads++;
+    var timeLabel = 'readgraph load[' + loadIndex + ']'
+    if ('time' in console) {
+      console.time(timeLabel);
+    }
+    if ('timeStamp' in console) {
+      console.timeStamp(timeLabel + ' start');
+    }
+
+    // Callers should invoke this callback on completion
+    return function() {
+      pendingLoads--;
+      if (!pendingLoads) {
+        spinner.style('display', 'none');
+      }
+      if ('time' in console) {
+        console.timeEnd(timeLabel);
+      }
+      if ('timeStamp' in console) {
+        console.timeStamp(timeLabel + ' finish');
+      }
+    };
+  }
+
+  var totalReadBytes = 0;
+  var callXhr = function(url, queryParams, handler, opt_monitor, opt_data) {
+    var onComplete = opt_monitor || startLoadMonitor();
     $.getJSON(url, queryParams)
-        .done(function(res) {
-          lastQueryParams = queryParams;
-          var reads = (opt_reads || []).concat(res.reads || []);
-          handler(reads);
+        .done(function(res, status, jqXHR) {
+          var data;
+          if (res.reads) {
+            var len = Number.parseInt(jqXHR.getResponseHeader('Content-Length'));
+            totalReadBytes += len;
+            console.log('readgraph ' + res.reads.length
+              + (res.reads.length && 'originalBases' in res.reads[0] ? ' full' : ' partial')
+              + ' reads (' + Math.round(len/1024) + 'kb), total ' + Math.round(totalReadBytes/1024) + 'kb');
+            // Reads are handled incrementally, but variants aren't yet.
+            // Eventually variants will be updated to follow the same pattern.
+            handler(res.reads);
+          } else {
+            data = (opt_data || []).concat(res.variants || []);
+            handler(data);
+          }
 
           if (res.nextPageToken) {
             queryParams['pageToken'] = res.nextPageToken;
-            callXhr(url, queryParams, handler, reads);
+            callXhr(url, queryParams, handler, onComplete, data);
           } else {
-            spinner.style('display', 'none');
+            onComplete();
           }
         })
         .fail(function() {
-          spinner.style('display', 'none');
+          onComplete();
         });
   };
 
-  this.hasReadset = function(id) {
-    return $.inArray(id, readsetIds) != -1;
-  };
-
-  // TODO: Support multiple readsets
-  this.addReadset = function(backend, id, sequenceData) {
-    readsetBackend = backend;
-    readsetIds = [id];
-    if (readsetIds.length == 1) {
-      sequences = sequenceData;
-      updateSequences();
-      $('#chooseReadsetMessage').hide();
-      clearReads();
+  this.updateSets = function(setData) {
+    if (_.isEqual(setObjects, setData)) {
+      return;
     }
-  };
 
-  this.removeReadset = function(id) {
-    readsetIds = _.without(readsetIds, id);
-    if (readsetIds.length == 0) {
-      sequences = [];
-      updateSequences();
-      $('#chooseReadsetMessage').show();
+    setObjects = setData;
+    updateSequences();
+
+    if (setObjects.length == 0) {
+      $('#chooseSetMessage').show();
       $('#graph').hide();
       $('#jumpDiv').hide();
+      $('.infoDiv').hide();
+
+    } else {
+      $('#chooseSetMessage').hide();
     }
-  }
+  };
 };