anatomogram

Expression Atlas Anatomogram

This is an anatomogram for 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 anatomogram

You can use it as a React component:

import Anatomogram from 'anatomogram'

...

<Anatomogram .../>
 

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

import {render} from '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 https://github.com/gxa/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	-	This is the only required attribute of the anatomogram
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	() => {}	Callback invoked when the mouse is hovered on a tissue
onMouseOut	function	() => {}	Callback invoked when the mouse is hovered off a tissue
onClick	function	() => {}	Callback invoked when a tissue is clicked

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 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. 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>/vendorCommons.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:

webpack-dev-server -d

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