Quickstart: There's a demo in index.html.
Longer:
<!-- the library for the webcomponent -->
<script src="dist/main.js" type="module"></script>
<!-- imjs is the library that loads data from intermine -->
<script src="http://cdn.intermine.org/js/intermine/imjs/3.15.0/im.min.js" charset="UTF-8"></script>This links to the relevant scripts to define the component and fetch data.
Where you want your webcomponent to appear, add the following:
<biojs-component-interaction-graph
intermineService="http://www.flymine.org/flymine/service/"
searchTerm="zen"
searchClass="Gene"
searchOrganism="D. melanogaster">
</biojs-component-interaction-graph>Some notes on usage:
intermineServicevalue must point to the webservices from an InterMine. for a full list of InterMines, see registry.intermine.org. e.g. if you are interested in rat data, set ratmine to be the url, or for plants you might want legumemine or phytomine.searchOrganismThe format for the organism name must be in abbreviated format - e.g. D. melanogaster works, Drosophila melanogaster would not.searchTerm- must be an identifier for a Gene or ProteinsearchClass- choose either Gene or Protein. (Case matters)
npm 6+, ideally installed via nvm.
Once this repo is cloned, in your terminal, run:
npm installIn your terminal, run
npx webpackThis uses hybrids.js to implement webcomponents easily.