ebi-scea-tsne-widget
v1.0.0-rc2
Published
tSNE widget visualizes Single Cell Expression Atlas data
Downloads
3
Readme
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
- Install dependencies with NPM or your package manager of choice.
npx webpack-dev-server
- 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" />