Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to create multiple instances on the same page #384

Open
hzlnutspread opened this issue Jan 16, 2023 · 6 comments
Open

Unable to create multiple instances on the same page #384

hzlnutspread opened this issue Jan 16, 2023 · 6 comments
Assignees
@turner

Comments

@hzlnutspread
Copy link

hzlnutspread commented Jan 16, 2023 •
edited
Loading

Hi there. I am trying to render two different hic reports on the same page. This is the code that I have tried. I also noticed issue 124 mentioned this as solved but It doesn't seem to be working.

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Juicebox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
    />

    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/juicebox.css"
    />
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/juicebox.min.js"
    ></script>
  </head>

  <body>
    <div>First container</div>
    <div id="app-container"></div>
    <div>Second container</div>
    <div id="app-container2"></div>

    <script type="module">
      // FIRST MAP
      const config = {
        url: "https://www.encodeproject.org/files/ENCFF718AWL/@@download/ENCFF718AWL.hic",
        name: "TEST1",
      };

      const container = document.getElementById("app-container");

      juicebox.init(container, config).then(function (hicBrowser) {
        console.log("Juicebox loaded");
      });

      // SECOND MAP
      const config2 = {
        url: "https://www.encodeproject.org/files/ENCFF718AWL/@@download/ENCFF718AWL.hic",
        name: "TEST2",
      };

      const container2 = document.getElementById("app-container2");

      juicebox.init(container2, config2).then(function (hicBrowser) {
        console.log("Juicebox loaded");
      });
    </script>
  </body>
</html>

The second declaration of juicebox.init for container2 seems to be overriding the first instance. I have also tried passing the config as a list of two different configurations, however, this still does not work.

Is there a way to render two different .hic files at the same time? Thanks @jrobinso
@jrobinso
Copy link
Contributor

I think it should be possible, I know we've done it in the past, however I don't seem to have any examples. So this might be a regression. Leave this open, I don't know when I'll have time to look at this. In the meantime, you can load multiple maps into the same container. Example below.

@turner any thoughts?


<script type="module">


    const container = document.getElementById("app-container");


    const config = {
        "syncDatasets": false,
        "browsers": [
            {
                "backgroundColor": "255,255,255",
                "url": "https://hicfiles.s3.amazonaws.com/external/dekker/4dn/h1hesc.hic",
                "name": "4DN H1 hESC",
                "state": "3,3,2,0,0,640,640,1.454380698186564,NONE",
                "colorScale": "602,255,0,0",
                "nvi": "23671753603,36479"
            },
            {
                "backgroundColor": "255,255,255",
                "url": "https://hicfiles.s3.amazonaws.com/external/dekker/4dn/h1hesc_rep1.hic",
                "name": "4DN H1 hESC rep1",
                "state": "4,4,2,0,0,640,640,1.5066364510726402,NONE",
                "colorScale": "602,255,0,0",
                "nvi": "23671754721,36479"
            }
        ]
    }

    juicebox.init(container, config)
        .then(function (hicBrowser) {

        })


</script>

@turner turner self-assigned this Jan 16, 2023
@turner
Copy link
Contributor

turner commented Jan 16, 2023 •
edited
Loading

This should work. Note I'm using release 2.2.5

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Juicebox - multiple instances</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/juicebox.css"/>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/juicebox.min.js"></script>
</head>

<body>
<div id="app-container"></div>

<script type="module">

    const config_multiple_browsers =
        {
            "browsers":
                [
                    {
                        url: "https://www.encodeproject.org/files/ENCFF718AWL/@@download/ENCFF718AWL.hic",
                        name: "TEST1",
                    },
                    {
                        url: "https://www.encodeproject.org/files/ENCFF718AWL/@@download/ENCFF718AWL.hic",
                        name: "TEST2",
                    }
                ]
        };

    juicebox.init(document.getElementById('app-container'), config_multiple_browsers).then(thangs => {
        const [ browserA, browserB ] = thangs
        console.log(`${ browserA.id } and ${ browserB.id } are good to go`)
    })

</script>
</body>
</html>

@jrobinso
Copy link
Contributor

@turner That is not the question, my example also works for putting multiple juicebox browsers in a single div. See the poster's example code, the question is about putting separate browsers in separate divs. You can do this with igv.js. And at one time we could do this with juicebox.js. I think the problem is calling juicebox.init() twice, so maybe there is another function for the second and subsequent instances.

@turner
Copy link
Contributor

turner commented Jan 16, 2023

@jrobinso ah, yes, it is indeed an init issue. each call will discard pre-exisiting browser instance(s) and create however many are in the config passed to it.

@jrobinso
Copy link
Contributor

OK its a bug then.

@hzlnutspread
Copy link
Author

Thanks @turner and @jrobinso very much for the replies so far! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@turner turner

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@turner @jrobinso @hzlnutspread