This web component allows to visualize GO-CAM from any website and create entity/activity views to highlight the flow of causal relationships.
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@^1/dist/wc-gocam-viz/wc-gocam-viz.esm.js"></script>
<script nomodule="" src="https://unpkg.com/@geneontology/wc-gocam-viz@^1/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.
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-vizSomewhere 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.