Make tidy variant tables with MyVariant.info and Tabulator

2019-07-14

We can use the MyVariant.info API and Tabulator to create a web page for making tidy tables with genomic variants.

🐎 In action

Here is an animation that shows what this code can do:

myvariant.info with tabulator.js

💾 Download the code

Download the code and try it out yourself:

Open the HTML file in your favorite web browser, and it should work.

⚡ Try it here

See if the MyVariant.info service can guess the identifiers that match your query. We automatically add links to the Open Targets Genetics web service, which provides further links to many resources for researching genetic variants.

You can also try this as a standalone HTML page.


<!doctype html>

Quick variant lookup
    <button id="button-search" type="button" class="btn btn-primary mt-2">Search</button>

  </div>
</div>
<div class="col-12 col-md-9 themed-grid-col">

  <div id="example-table" class="mt-3"></div>

    <div class="progress mt-2">
      <div id="progress-api" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

  <div id="state" class="alert mt-2 mb-2"></div>

  <button id="download-tsv" type="button" class="btn btn-primary">Download TSV</button>
  <!-- <a id="share-link" href="#" target="_blank"><button type="button" class="btn btn-primary">Share</button></a> -->

  <!-- <button id="button-refresh" type="button" class="btn m-2 btn-secondary">Refresh</button> -->

</div>