44[ ![ npm package] [ npm-badge ]] [ npm ]
55[ ![ Coveralls] [ coveralls-badge ]] [ coveralls ]
66
7- A React component for generating a heatmap type display for Gene Ontology (GO) slims.
7+ A React component for generating a heatmap type display for Ontology slims.
88
99## Getting started
1010
@@ -67,11 +67,10 @@ Browse to whatever URL is indicated on your screen.
6767
6868The Ribbon component takes the following properties.
6969
70- * noResults -
7170
7271| Name | Description | Type | Default |
7372| :-----| :------------| ------| :--------|
74- | data | The GO slim terms | Array of objects (see below) | |
73+ | data | The slim terms (see below) | Array of objects | |
7574| heatLevels | The number of gradients to use in the heatmap | number | 8 |
7675| baseRGB | The RGB values that the gradient is based on. | Array of RGB numbers | [ 0,96,96] |
7776| noResults | Content to display if no data is supplied | String or custom compoment| |
@@ -84,12 +83,20 @@ This callback is called when the block or text label for the block is clicked.
8483It is passed the object that represents the slim term as the first argument
8584and the event object as the second.
8685
86+ ``` JSX
87+
88+ const handleOnClick = (term , evt ) => {
89+ console .log (" Term ID " + term .id );
90+ console .log (" Term name " + term .name );
91+ console .log (" # Descendant terms " + term .descendant_terms .length );
92+ }
93+
8794## Data object structure.
8895
8996The data property takes an array of objects that describes the ontology slim that we are
9097generating a ribbon for . Each object has 3 properties, an ` id` , a ` name` , and ` descendant_terms` .
9198The first two properties are strings while ` descendant_terms` is an array of terms contained by
92- this slim term. The ` descendant_terms ` array objects must contain an ` id ` and ` name ` field as well.
99+ this slim term . The objects in the ` descendant_terms` array must contain an ` id` and ` name` field as well.
93100
94101` ` ` JSON
95102[
0 commit comments