Wc-ribbon-strips NPM

Ribbon Strips Web Component

Getting Started

To start the component in a dev environment:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Using this component

Script tag

Put a script tag <script src='https://unpkg.com/wc-ribbon-strips@0.0.1/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/wc-ribbon-strips@0.0.1/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>

@infinitebrahmanuniverse/nolb-wc @everything-registry/sub-chunk-3118

0.0.2

4 years ago

0.0.1

4 years ago