how to load my own local genome and other data in html embeeding?

[tulab-sjtu]

Hello! Dr.Li, I want to show jbrowser of my own research species in my own database, how could i modify the code to load my own data? could you give me some suggestions about apis of data import?Thanks!

<title>WashU Epigenome Browser</title> <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> <script src="https://unpkg.com/epgg@53.6.0/umd/epgg.js"></script> You need to enable JavaScript to run this app.

Embedding test

some other headings

<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>

[lidaof]

Hi @tulab-sjtu , in order to support custom genomes, you would need to install a local mirror and follow https://eg.readthedocs.io/en/latest/add.html, if needed, we can schedule a zoom call to discuss the details.
Thank you!

[tulab-sjtu]

Thank you for your response! I'd like to ask what versions of Node.js and npm are suitable for my case. I've tried deploying your genome browser to my local server before, but encountered some difficulties. I tried using the latest version of Node.js, but it seems incompatible and throws many errors. I also attempted versions 16.0,15.0 and 14.0 of Node.js to run the application without success. Later, I tried running it with Docker, and it worked, but the layout of option buttons on the page, which should have been on the same line, became somewhat messy. I'm not sure if the issue lies in the system version of my server or elsewhere.