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

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

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.

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

...

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

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.

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>

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

You can see how this looks on our example page.

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;
}

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.