eg-react
eg-react copied to clipboard
lidaof
WashU Epigenome Browser
WashU Epigenome Browser
Start the browser standalone
Install Node. Download the source code from our github repo.
- Enter the
frontenddirectory npm install(trynpm install --forceif getting error)npm start
Your local browser is available at localhost:3000/browser.
Use your own data API (optional)
Enter the backend directory. npm install, and then npm run setup. MongoDB must be installed and running.
Documentation
Please check all the documentation at https://eg.rtfd.io/.
Reporting Issues
If you found an issue, please report it along with any relevant details to reproduce it. Thanks.
Asking for help
- The issue tracker.
- The Google groups.
- The Slack channel.
Contributions
Yes please! Feature requests / pull requests are welcome.
CDN
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/epgg@latest/umd/epgg.css" />
<!-- JS -->
<script src="https://target.wustl.edu/dli/eg/epgg.js"></script>
<script>
renderBrowserInElement(contents, container);
</script>
Embedding the browser in any HTML file
Create a HTML page with following contents: (the example shows how to embed a mouse browser with 2 bigWig tracks from ENCODE data portal and 1 from our own server)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<title>WashU Epigenome Browser</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://cdn.plot.ly/plotly-cartesian-latest.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/create-plotly-component.min.js"></script>
<!-- the browser script and styles -->
<script src="https://unpkg.com/[email protected]/umd/epgg.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/umd/epgg.css" />
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<h1>Embedding test</h1>
<div id="embed" style="width: 1000px"></div>
<h2>some other headings</h2>
<script>
const container = document.getElementById("embed");
const contents = {
genomeName: "mm10",
displayRegion: "chr5:51997494-52853744",
trackLegendWidth: 120,
isShowingNavigator: true,
tracks: [
{
type: "geneannotation",
name: "refGene",
genome: "mm10",
},
{
type: "geneannotation",
name: "gencodeM19Basic",
genome: "mm10",
},
{
type: "ruler",
name: "Ruler",
},
{
type: "bigWig",
name: "ChipSeq of Heart",
url: "https://www.encodeproject.org/files/ENCFF641FBI/@@download/ENCFF641FBI.bigWig",
options: { color: "red" },
metadata: { Sample: "Heart" },
},
{
type: "bigWig",
name: "ChipSeq of Liver",
url: "https://www.encodeproject.org/files/ENCFF555LBI/@@download/ENCFF555LBI.bigWig",
options: { color: "blue" },
metadata: { Sample: "Liver" },
},
{
type: "bedGraph",
name: "test",
url: "https://wangftp.wustl.edu/~rsears/Stuart_Little/RNA_083018/WangT_7176-5_ALDH_STRANDED_Signal.Unique.combo.out.bg.gz",
},
],
metadataTerms: ["Sample"],
regionSets: [],
regionSetViewIndex: -1,
};
renderBrowserInElement(contents, container);
</script>
</body>
</html>
The key API is the function renderBrowserInElement, it accepts the contents array as first argument,
and container as second argument which is a DOM element.
lidaof