ebi-scea-tsne-widget

tSNE widget visualizes Single Cell Expression Atlas data

Usage no npm install needed!

<script type="module">
  import ebiSceaTsneWidget from 'https://cdn.skypack.dev/ebi-scea-tsne-widget';
</script>

README

Single Cell Expression Atlas t-SNE widget

Build Status Coverage Status

An easy-to-embed React component to visualise t-SNE plots from Single Cell Expression Atlas.

Build and test

  1. Install dependencies with NPM or your package manager of choice.
  2. npx webpack-dev-server
  3. Browse over to http://localhost:9000

API

React

If you include it as a React component, you need to specify two props to determine what combination of experiment-gene to display. Additionally, there are a few optional props to customise the presentation and layout.

Required props

Name Type Comment
experimentAccession string Accession of the experiment you want to visualise
geneId string Ensembl gene ID for which to show expression (can be left out empty)

Optional props

Name Type Default value Comment
wrapperClassName string row expanded Wrapper class from the EBI Visual Framework (a Foundation flavour) that takes all available horizontal space
clusterPlotClassName string small-12 large-6 columns Grid settings that use half width in small and medium-sized screens and half width in large screens
expressionPlotClassName string small-12 large-6 columns
height number 800 Height of the plot area (minus the legend)

Example

import React from 'react'
import TSnePlotWidget from 'ebi-scea-tsne-widget'

...

<TSnePlotWidget
  experimentAccession={`E-ENAD-15`}
  geneId={`ENSMUSG00000041147`}
/>

JavaScript widget

If you only want to show the widget on your website, we provide a convenience render method that takes an element ID where to mount the component plus an options object that encapsulates the props described above.

Bundling

After installing dependencies run Webpack to create your JS bundles: npx webpack -p*

  • -p creates production bundles, without console messages. Replace it with -d if you want to see more nitty-gritty details

You will need to include these two JS scripts in your page:

<script src="../dist/vendors.bundle.js"></script>
<script src="../dist/TSnePlotWidgetDemo.bundle.js"></script>

Example

<script>
  TSnePlotWidgetDemo.render({
    experimentAccession: 'E-ENAD-15',
    geneId: 'ENSMUSG00000041147'
  }, 'target')
</script>

You can see how this looks on our example page.

Caveats

Highcharts

We use Highcharts as our plotting library and React Select to render the colouring drop-down. Here are useful styles with some comments to make all display fine. Scope them if you need to if they clash with yours:

/* Override EBI VF styles for components that use React-Select */
input {
  height: unset;
  box-shadow: none;
  margin: 0;
}

/* Fix for Highcharts tooltip being cut off */
.highcharts-container {
  overflow: visible !important;
}
svg {
  overflow: visible !important;
}

EBI Visual Framework

If you want to include the EBI Visual Framework to take advantage of the default visual settings, you should include at least these two CSS files in your environment:

<link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/libraries/foundation-6/css/foundation.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.2/css/ebi-global.css" type="text/css" media="all" />

Read more bout the EBI Visual Framework here.