anatomogram - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

package.json

 {
   "name": "anatomogram",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Anatomogram component for Expression Atlas heatmap",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,3 +0,2 @@
-Expression Atlas Anatomogram
-============================================
+# Expression Atlas Anatomogram
 
@@ -15,13 +14,74 @@ [![Build Status](https://travis-ci.org/gxa/atlas-anatomogram.svg?branch=master)](https://travis-ci.org/gxa/atlas-anatomogram) [![Coverage Status](https://coveralls.io/repos/github/gxa/atlas-anatomogram/badge.svg?branch=master)](https://coveralls.io/github/gxa/atlas-anatomogram?branch=master) [![Dependency Status](https://gemnasium.com/badges/github.com/gxa/atlas-anatomogram.svg)](https://gemnasium.com/github.com/gxa/atlas-anatomogram) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)
 
-You can reuse it as a React component or add a non-React wrapper. For example uses, see the code for the demo component and how we use it in github.com/gxa or get in touch.
+You can use it as a React component:
+```
+import Anatomogram from 'anatomogram'
 
-Contribute
-----------
+...
 
-To update the anatomograms or ontology IDs read our [authoring guidelines](https://github.com/gxa/anatomogram/wiki#AuthoringGuidelines). Run `npm run parseSvgs` to parse the updated IDs.
+<Anatomogram .../>
+ 
+```
 
-To add new anatomograms put them in the `src/svg` directory, then edit the config `src/json/svgs.json`. The format is pretty straightforward.
+Alternatively, if you don’t use React we’re providing a convenience `render` method:
+```
+import {render} from 'anatomogram'
 
-When you are finished run a local copy of the demo page:
+...
+
+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](https://github.com/gxa/anatomogram/blob/master/html/AnatomogramDemo.js) 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](https://www.ebi.ac.uk/gxa/experiments/E-MTAB-513) or [a search that returns organism part 
+experiments](https://www.ebi.ac.uk/gxa/search?geneQuery=[{%22value%22:%22zinc%20finger%22}]).
+
+## Props
+
+| Name              | Type     | Default value    | Description                                                          |
+|-------------------|----------|:----------------:|----------------------------------------------------------------------|
+| species           | string   |       -          |                                                                      |
+| 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`](https://github.com/gxa/anatomogram/blob/master/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 in 
+0.2. You can read a more inclined description of the anatomogram behaviour in [the 
+wiki](https://github.com/gxa/anatomogram/wiki).
+
+## Building
+```
+npm run dist -- --output-public-path <URL>
+```
+
+`<URL>` is the URL (absolute or relative) from which you’ll be serving the anatomogram. 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](https://webpack.js.org/configuration/output/#output-publicpath).
+
+## Contribute
+
+Read carefully [the authoring guidelines](https://github.com/gxa/anatomogram/blob/master/src/svg/README.md) before adding new 
+tissues or IDs to 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
@@ -28,0 +88,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

13403033

increased by0.03%

Number of lines in readme file

90

increased by200%

No dependency changes