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>