This is an embeddable component to load igv.js. It was bootstrapped with Create React App.
Insert this html tag somewhere in your html and use the component's javascript package available on Github:
<rnacentral-genome-browser></rnacentral-genome-browser>
<script type="text/javascript" src="https://rnacentral.github.io/rnacentral-genome-browser/build/genome-browser.js"></script>
To load this component for a specific sequence, you need to pass the Unique RNA Sequence identifier (URS) and the Species-specific Id (NCBI taxid), for example:
<rnacentral-genome-browser data='{"urs": "URS0000650B1E", "taxid": "9606"}'></rnacentral-genome-browser>
Click here to see how you can find an RNAcentral identifier for an RNA sequence.
For a minimal example, see index.html.
In the project directory, you can run:
Runs the app in the development mode. Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes. You may also see any lint errors in the console.
Builds the app for production to the build
folder with FTP deployment configuration.
It correctly bundles React in production mode and optimizes the build for the best performance.
This command automatically sets REACT_APP_FTP_FOLDER=.genome-browser
environment variable for proper FTP folder structure.
Performs a clean build by first removing the existing build
folder, then building the app for production.
Use this command when experiencing cache issues or when you need to ensure a completely fresh build.
All build scripts use cross-env
to ensure compatibility across Windows, macOS, and Linux environments.
See the section about deployment for more information.
Embedding igv.js inside a shadow DOM breaks the UI when using IGV version 2, which is why I’m adding the IGV styles
directly to the igv.css
file. While version 3 resolves this problem, it occasionally triggers an error in our widget
when using the "Go to location" link. We need to investigate potential solutions for this issue.