Embedding VarSome Components

Instructions

Include the following lines at the bottom of your html page, just before the closing </body> tag:

<script>
    var varsomeConfig = {
        api_url: 'https://api.varsome.com',
        static_token: 'XXXXXXXXXX'
    }
</script>
<script src="https://assets.varsome.com/static/components/components-bundle.js"></script>

where XXXXXXXXXX is the static token for embedded components linked to your VarSome account (contact us to get one).

This enables you to include the actual VarSome components anywhere inside your html. For example:

<div style="max-width: 900px; margin: 0 auto;">
    <variant-request refgenome="hg19" query="chr7-140453136-A-C"></variant-request>
    <variant-details></variant-details>
    <region-browser></region-browser>
    <gwas-results></gwas-results>
    <structural-browser></structural-browser>
    <transcripts-results></transcripts-results>
    <ncbi-clinvar></ncbi-clinvar>
    <uniprot-variants></uniprot-variants>

    <frequencies-dbs></frequencies-dbs>
    <cancer-dbs></cancer-dbs>
    <prediction-scores></prediction-scores>

    <genes-results></genes-results>
</div>

This will render every available component with the data for chr7-140453136-A-C inside a centered div of 900px width. Every html tag will be replaced by the corresponding results “box” as seen on varsome.com. If there’s no data about the requested variant for a certain component it may not be displayed.

You could also place every individual component in different sections of your page. Every component occupies the full width of its parent container.

You can ommit any of the components you don’t need, with one exception:
The <variant-request ...> component is essential for the rest of the components to work, as it handles the requests to the API, so it must always be included.

Making requests

In case you want to make a request for a variant dynamically, you can just change the query attribute of <variant-request> using javascript. For example:

var req = document.getElementsByTagName('variant-request')[0];
req.setAttribute('query', 'chr2-179469737-C-T');

This will make a new request to the API for chr2-179469737-C-T and display the data for it inside each results component.

Available components

Variant request

<variant-request refgenome="" query=""></variant-request>
Attributes:

  • refgenome: Accepts values hg19 or hg38 to fetch results based on the corresponding reference genome.
  • query: Accepts values of the form chrX-NNNNNN-X-X or rsNNNNNN or BRAF:V600E or SYNGR1:c.607_608insACA for the requested variant.

This component handles the requests to the API for a variant, displaying a loading indicator while the request is being processed, displaying a variant selector in case more than one variants are returned (e.g in case of rs113488022) and any errors that occurred during the request.
It is essential that this component is included for the rest of the components to function.

Variant details

<variant-details></variant-details>
Renders details about the variant requested, such as the chromosome, position etc.

Region browser

<region-browser></region-browser>
Renders a region browser component displaying graphically transcripts, protein regions, pathogenicity and nearby variants in the region of the queried variant.

GWAS

<gwas-results></gwas-results>
Renders data provided by the GWAS database

Structural variants browser

<structural-browser></structural-browser>
Renders a structural browser component displaying graphically transcripts, protein regions(over 500bp), and structural variants in the region of the queried variant.

Transcripts

<transcripts-results></transcripts-results>
Renders the transcripts for this variant, provided by RefSeq and Ensembl databases.

ClinVar

<ncbi-clinvar></ncbi-clinvar>
Renders data provided by the NCBI ClinVar database.

UniProt Variants

<uniprot-variants></uniprot-variants>
Renders data provided by the UniProt variants database.

Frequencies databases

<frequencies-dbs></frequencies-dbs>
Renders data provided by gnomAD exomes, gnomAD genomes and ISB Kaviar3 databases.

Cancer databases

<cancer-dbs></cancer-dbs>
Renders data provided by ICGC Somatic, Sanger Cosmic, CIViC, IARC TP53 Somatic and IARC TP53 Germline databases.

Prediction scores

<prediction-scores></prediction-scores>
Renders data provided by DANN SNVs, GERP, dbNSFP and dbscSNV databases.

Genes

<genes-results></genes-results>
Renders gene data for the genes where the variant is located. Contains data from GHR genes, HPO, CGD, ExAC genes, dbNSFP genes and CIViC databases. Also includes the gene’s transcripts and statistics about gene variants with known pathogenicity.
Attributes:

  • showghrgenes: If set to false, the GHR genes sub-component will not be shown.
  • showhpo: If set to false, the HPO sub-component will not be shown.
  • showcgd: If set to false, the CGD sub-component will not be shown.
  • showtranscripts: If set to false, the transcripts sub-component will not be shown.
  • showgenestats: If set to false, the gene statistics sub-component will not be shown.
  • showexacgenes: If set to false, the ExAC genes sub-component will not be shown.
  • showdbnsfpgenes: If set to false, the dbNSFP genes sub-component will not be shown.
  • showcivic: If set to false, the CIViC genes sub-component will not be shown.

Please fill in the form below to provide us with confidential feedback.
If you are asking a question or reporting an issue, please be as specific as possible.


By using our site, you acknowledge that you have read and understand our Privacy policy OK