Skip to content

Latest commit

 

History

History
154 lines (128 loc) · 6.05 KB

README.md

File metadata and controls

154 lines (128 loc) · 6.05 KB
Raw

WashU Epigenome Browser

WashU Epigenome Browser Logo

Start the browser standalone

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

  1. Enter the frontend directory
  2. npm install (try npm install --force if getting error)
  3. 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

  1. The issue tracker.
  2. The Google groups.
  3. 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.