WashU Epigenome Browser

Start the browser standalone

Install Node. Download the source code from our github repo.

Enter the frontend directory
npm install (try npm install --force if 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

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/react-plotly.js@2.3.0/dist/create-plotly-component.min.js"></script>
        <!-- the browser script and styles -->
        <script src="https://unpkg.com/epgg@53.6.0/umd/epgg.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/epgg@53.6.0/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/eg-react