@geneontology/wc-gocam-viz
Advanced tools
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/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"
show-go-cam-selector=true
show-has-input=false
show-has-output=false
show-gene-product=true
show-activity=false
></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-viz
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.
The legend feature of the component requires image assets to be served by your
application. These assets are distributed in the
node_modules/@geneontology/wc-gocam-viz/dist/wc-gocam-viz/assets directory. If
your applications uses a bundler you should configure it to automatically copy
the files in that directory to an assets directory in the build ouput.
A webpack configuration that uses the CopyWebpackPlugin to do this might look like:
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'node_modules/@geneontology/wc-gocam-viz/dist/wc-gocam-viz/assets'),
to: path.resolve(__dirname, 'dist/assets'),
},
],
}),
],
};
For other bundlers, consider a similar configuration using one of the following plugins:
FAQs
Web component to visualize GO-CAM
The npm package @geneontology/wc-gocam-viz receives a total of 395 weekly downloads. As such, @geneontology/wc-gocam-viz popularity was classified as not popular.
We found that @geneontology/wc-gocam-viz demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.