Single Cell Expression Atlas Organ Anatomogram

This is an organ anatomogram for Single Cell Expression Atlas that we use to illustrate the experiments.

See demo here.

The ontology IDs are sourced from Uberon, EFO and Plant Ontology.

To install: npm install --save @ebi-gene-expression-group/organ-anatomogram

You can use it as a React component:

import Anatomogram from '@ebi-gene-expression-group/organ-anatomogram'

...

<Anatomogram .../>

Alternatively, if you don’t use React we’re providing a convenience render method:

import {render} from '@ebi-gene-expression-group/organ-anatomogram'

...

render(options, target)

Where options are the props passed as an object, and target is an ID of the DOM element that will contain the anatomogram.

For example code, have a look at the demo component and how we use it in our Expression Atlas Heatmap. If you want to see it in action, go to an organism part experiment in Atlas or a search that returns organism part experiments.

Props

| Name | Type | Default value | Description | |------------------|----------|:--------------:|----------------------------------------------------------------------| | species | string | - | Required. This is the only props needed to be declared for testing. Specify the species or the organ shown in the page | | showIds | array | [] | | | highlightIds | array | [] | | | selectIds | array | [] | | | showColour | string | grey | | | highlightColour | string | red | | | selectColour | string | purple | | | showOpacity | number | 0.4 | | | highlightOpacity | number | 0.4 | | | selectOpacity | number | 0.4 | | | onMouseOver | function | () => {} | Required, but with default value. Callback invoked when the mouse is hovered on a tissue | | onMouseOut | function | () => {} | Required, but with default value. Callback invoked when the mouse is hovered off a tissue | | onClick | function | () => {} | Required, but with default value. Callback invoked when a tissue is clicked | | onInjected | function | () => {} | Callback invoked when SVG is injected |

For a list of available species and IDs have a look at src/json/svgsMetadata.json. The file is automatically generated every time the package is published.

All three callbacks take a single string argument, the ID of the tissue affected by the mouse event.

The state of a tissue is either not shown, shown, highlighted or selected. On mouseover the opacity is increased by 0.2. You can read a more technically inclined description of the anatomogram behaviour in the repository wiki.

Building

To use the anatomogram in a browser you need to build and bundle the package:

npm run dist -- --output-public-path='<URL>'

<URL> is the URL (absolute or relative) from which you’ll be serving the anatomogram (e.g. /anatomogram/dist/ for the gh-pages branch we use to build the demo page). Remember to append a final slash! This is required so that the code knows where to look for static assets (i.e. SVGs and PNGs). You can read more about this option in Webpack’s documentation site.

After building, deployment of anatomogramDemo.bundle.js is optional, only if you want to host the demo component.

Include the following in your HTML:

<script src="<URL>/vendors.bundle.js"></script>
<script src="<URL>/anatomogram.bundle.js"></script>

<script>
anatomogram.render(options, target)
</script>

Building for a particular species

You can take out all the unnecessary SVGs and PNGs and change Anatomogram.defaultProps.species to any of the supported species. You can see an example in the mouse branch.

Contribute

Read carefully our authoring guidelines before adding new tissues or updating IDs in an existing anatomogram or adding a new SVG.

Run npm run parseSvgs to parse the updated IDs. When you are finished run a local copy of the demo page:

rm -rf node-modules
npm install
npx webpack-dev-server -d

Go to localhost:9000 and see that the tissues show up like you want them to.

Licence

Code is distributed under the Apache License version 2.0. All images, anatomograms and switcher icons, are distributed under the Creative Commons Attribution 4.0 International license.