⚠️ EXPERIMENTAL ⚠️

This repository is where we are doing experimental work to consolidate GO web component development into a single repository. This is a work in progress and may undergo significant changes as work progresses.

For the latest stable version of the GO web components, please visit:

• wc-gocam-viz
• wc-ribbon

---

GO Web Components

This repository contains a collection of web components produced by the Gene Ontology Consortium focusing on the display of GO Annotation data and GO-CAM models.

Installation

These web components are framework-agnostic and designed to be integrated into any web application. The two main ways to install the components are via NPM or by using files served from a CDN.

NPM

To install the components via NPM, run the following command:

npm install @geneontology/web-components

Once the package is installed, there are two ways to include the components in your application. The first method is to use the top-level lazy loader. Add this code near the beginning of your application code:

import "@geneontology/web-components";

This will allow you to use all custom elements provided by this package. The necessary code for each component is fetched on demand when it is first used.

The second method is to import the individual component or components directly. For example, to use only wc-go-ribbon component:

import "@geneontology/web-components/wc-go-ribbon";

In this case, no dynamic code fetching happens at runtime. This can lead to a more performant final application, but it requires you manage the imports for each component you use.

CDN

If your application does not use a build system or package manager, you can include the components directly from a CDN. Add the following script tag to your HTML file:

<script
  type="module"
  src="https://unpkg.com/@geneontology/web-components"
></script>

Usage

wc-go-ribbon

The wc-go-ribbon component displays a ribbon of GO terms associated with one or more gene products.

Example

<wc-go-ribbon subjects="RGD:620474,RGD:3889"></wc-go-ribbon>

Documentation

https://github.com/geneontology/web-components/blob/main/src/components/go-ribbon/readme.md

wc-gocam-viz

The wc-gocam-viz component displays a GO-CAM model as a network diagram along with a list of processes and activities in the model.

Example

<wc-gocam-viz gocam-id="635b1e3e00001811" show-legend="true"></wc-gocam-viz>

Documentation

https://github.com/geneontology/web-components/blob/main/src/components/go-gocam-pathway/readme.md