@ebi-gene-expression-group/scxa-tsne-widget

Single Cell Expression Atlas t-SNE widget

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.