A react component for generating heatmap type displays for ontology slims.


4371.11.23 years ago4 years agoMinified + gzip package size for @geneontology/ribbon in KB



Short form matrix view of all GO annotations for a given gene


  • Once node.js is on your machine then dependent packages need to be brought in. Running npm install in the components's root directory will install everything you need for development.
  • Note that you may need to run 'npm install' as sudo.


    npm install
    npm run build 

Demo Ribbon Server


Integration is demonstrated in the demo package.

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<Demo/>, document.getElementById('demo'));

With the Demo Component instantiating all of the lower components.

If not running react directly (or not wanting to load it via npm), you can import the libraries directly :

<script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>

Which will allow you to do as above.


  • fly img

  • zebrafish


  • mouse img

Build the library

npm run build will prepare the assets of the library for publishing to NPM.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.