@geneontology/wc-ribbon-strips
v0.0.37
Published
Ribbon Strips Web Component
Downloads
6,932
Keywords
Readme
Ribbon Strips Web Component
The Ribbon Strips is a Web Component to quickly visualize annotation summaries for a gene or gene set. Try the GO ribbon here: http://geneontology.org/ribbon.html
Getting Started
Script tag
- Put a script tag
<script src='https://unpkg.com/@geneontology/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
<html>
<head>
<script type="module" src="https://unpkg.com/@geneontology/wc-ribbon-strips/dist/wc-ribbon-strips/wc-ribbon-strips.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@geneontology/wc-ribbon-strips/dist/wc-ribbon-strips/wc-ribbon-strips.js"></script>
</head>
<body>
<!-- This add the ribbon strips to your page and load two RGD genes -->
<wc-ribbon-strips subjects="RGD:620474,RGD:3889" />
</body>
</html>Node Modules
- Run
npm install @geneontology/wc-ribbon-strips --save - Put a script tag similar to this
<script src='node_modules/@geneontology/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 = "https://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>