Skip to content

Latest commit

 

History

History
54 lines (38 loc) · 2.58 KB

readme.md

File metadata and controls

54 lines (38 loc) · 2.58 KB
Raw

Built With Stencil

GO-CAM visualization Web Component

This web component allows to visualize GO-CAM from any website and create entity/activity views to highlight the flow of causal relationships.

Usage

Script tags

For a simple, static website using <script> tags is a quick way to get started. For example:

<html>
  <head>
    <script type="module" src="https://unpkg.com/@geneontology/wc-gocam-viz/dist/wc-gocam-viz/wc-gocam-viz.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/@geneontology/wc-gocam-viz/dist/wc-gocam-viz/wc-gocam-viz.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <wc-gocam-viz 
      id="gocam-1"
      gocam-id="568b0f9600000284"
    ></wc-gocam-viz>
  </body>
</html>

This will render a GO-CAM model highlighting the flow of regulations between genes/activities.

NPM package

Installation

To use the web component as part of a larger front-end application that has its own bundling process, first install the dependency:

npm install @geneontology/wc-gocam-viz

Registering custom elements

Somewhere near the top level of your application you must define the custom components from this package:

import { defineCustomElements } from '@geneontology/wc-gocam-viz/loader'

defineCustomElements()

Now the <wc-gocam-viz> element can be used in your application's markup.