wc-ribbon-strips
v0.0.2
Published
Ribbon Strips Web Component
Readme
Ribbon Strips Web Component
Getting Started
To start the component in a dev environment:
npm install
npm startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm testUsing this component
Script tag
- Put a script tag
<script src='https://unpkg.com/[email protected]/dist/wc-ribbon-strips.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
<html>
<head>
<script src="https://unpkg.com/[email protected]/dist/wc-ribbon-strips.js"/>
</head>
<body>
<wc-ribbon-strips subjects="RGD:620474,RGD:3889"></wc-ribbon-strips>
</body>
</html>Node Modules
- Run
npm install wc-ribbon-strips --save - Put a script tag similar to this
<script src='node_modules/wc-ribbon-strips/dist/wc-ribbon-strips.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
More advanced integration
This script will load two specific genes as in the above example but by creating the HTML element through javascript after fetching the data model required for the ribbon to work. It will also configure several attributes.
<script>
let baseAPIURL = "http://api.geneontology.org/api/ontology/ribbon/";
let subjects = ["RGD:620474","RGD:3889"].join("&subject=");
let query = baseAPIURL + '?subset=goslim_agr&subject=' + subjects;
console.log('API query is ' + query);
async function loadData() {
// fetch the json data
let response = await fetch(query);
let data = await response.json();
// create the ribbon strips element
var element = await document.createElement("wc-ribbon-strips");
element.setAttribute("data", JSON.stringify(data));
element.setAttribute("binary-color", "false");
element.setAttribute("new-tab", "true");
element.setAttribute("selection-mode", 1);
element.setAttribute("subject-position", 1);
await document.body.appendChild(element);
// add a listener whenever a cell is clicked
document.addEventListener('cellClick', function hideMenu(e, v) {
console.log('Cell Clicked' , e.detail);
});
// add a listener whenever a group is clicked
document.addEventListener('groupClick', function hideMenu(e, v) {
console.log('Group Clicked' , e.detail);
});
}
loadData();
</script>