lidaof / eg-react

WashU Epigenome Browser
https://epigenomegateway.wustl.edu
Other
66 stars 29 forks source link

Embedding error #342

Open HuangCZNJMU opened 7 months ago

HuangCZNJMU commented 7 months ago

Hi, I have a question, when I use China's network to open the following HTML, it cannot display properly. But when I use the USA's network to open the following HTML, it can display normally. Why is this?

<!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>
lidaof commented 7 months ago

Hi @HuangCZNJMU this is interesting..i actually don't know..I guess the reason is probably due to some library were failed to load on the network? you can open Chrome's web console to check if any of the external libraries cannot be loaded.