[Gmod-ajax] putting JBrowse "in" another page

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

[Gmod-ajax] putting JBrowse "in" another page

Scott Cain
Hi All,

Let me start with the confession that my javascript skills are severely lacking :-)  I'd like to "brand" my JBrowse so that it fits in with the rest of WormBase, so I thought I'd just grab the bits from WormBase pages that provide the menu and whatnot that goes at the top of the page.  It's really pretty simple: I added a few lines to the end of the head and top of the body of the JBrowse index page, so that it looks like this:


    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link type="text/css" href="http://www.wormbase.org/css/main.min.css" rel="stylesheet" />

  </head>
  <body>
    <script type="text/javascript">
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET","http://www.wormbase.org/header?desktop=true",false);
        xmlHttp.send(null);
        document.write(xmlHttp.responseText);
    </script>

    <div id="GenomeBrowser" ...

The result is at http://dev.wormbase.org:9003/.  When you look at the initial page (where it lists available organisms to browse), it looks kind of OK; however, if you click on one of those organisms, you'll see the WormBase banner load, then briefly the top of JBrowse load (with the navigation stuff), and then quickly disappear, and then the faceted browsing tab appears (which works pretty much as you'd expect--it expands and you can select tracks; unfortunately, those tracks never show up).

So, my question is this: is there something obvious that I should be doing to make this work, or is it going to be ugly debugging of colliding javascript and css?  I really don't want to put JBrowse in an iframe, since that is really an unattractive solution.

Thanks much,
Scott
 
PS: I realize I'm somehow evil for the blocking, non-asyncronous call to wormbase to fetch the header, but so it goes :-)


--
------------------------------------------------------------------------
Scott Cain, Ph. D.                                   scott at scottcain dot net
GMOD Coordinator (http://gmod.org/)                     216-392-3087
Ontario Institute for Cancer Research

------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: putting JBrowse "in" another page

Colin
You might try giving the genome browser <div id="GenomeBrowser"> an absolute height and width (i.e. 1000px by 600px) because I think the layout on your page confused by the percentage based settings. Normally the browser is just using 100% width and 100% height so that it is fullscreen but there shouldn't be any problems with changing it like this.


-Colin

On Tue, Apr 21, 2015 at 3:42 PM, Scott Cain <[hidden email]> wrote:
Hi All,

Let me start with the confession that my javascript skills are severely lacking :-)  I'd like to "brand" my JBrowse so that it fits in with the rest of WormBase, so I thought I'd just grab the bits from WormBase pages that provide the menu and whatnot that goes at the top of the page.  It's really pretty simple: I added a few lines to the end of the head and top of the body of the JBrowse index page, so that it looks like this:


    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link type="text/css" href="http://www.wormbase.org/css/main.min.css" rel="stylesheet" />

  </head>
  <body>
    <script type="text/javascript">
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET","http://www.wormbase.org/header?desktop=true",false);
        xmlHttp.send(null);
        document.write(xmlHttp.responseText);
    </script>

    <div id="GenomeBrowser" ...

The result is at http://dev.wormbase.org:9003/.  When you look at the initial page (where it lists available organisms to browse), it looks kind of OK; however, if you click on one of those organisms, you'll see the WormBase banner load, then briefly the top of JBrowse load (with the navigation stuff), and then quickly disappear, and then the faceted browsing tab appears (which works pretty much as you'd expect--it expands and you can select tracks; unfortunately, those tracks never show up).

So, my question is this: is there something obvious that I should be doing to make this work, or is it going to be ugly debugging of colliding javascript and css?  I really don't want to put JBrowse in an iframe, since that is really an unattractive solution.

Thanks much,
Scott
 
PS: I realize I'm somehow evil for the blocking, non-asyncronous call to wormbase to fetch the header, but so it goes :-)


--
------------------------------------------------------------------------
Scott Cain, Ph. D.                                   scott at scottcain dot net
GMOD Coordinator (http://gmod.org/)                     <a href="tel:216-392-3087" value="+12163923087" target="_blank">216-392-3087
Ontario Institute for Cancer Research

------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax



------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: putting JBrowse "in" another page

Scott Cain
Hi Colin,

Perfect--I think that does it, though I put the width back to 100% and it still seems to work.  Cutting the width off at a defined pixel width is really unattractive :-) 

I wonder what the best value for height is?  If I make it too large, people with small screens will be out of luck, as some data will end up off the bottom of the page, where as if I make it too small, people with large screens will have a bunch of unused page at the bottom (unattractive but I guess not a huge problem).

Scott


Scott


On Tue, Apr 21, 2015 at 5:25 PM, Colin <[hidden email]> wrote:
You might try giving the genome browser <div id="GenomeBrowser"> an absolute height and width (i.e. 1000px by 600px) because I think the layout on your page confused by the percentage based settings. Normally the browser is just using 100% width and 100% height so that it is fullscreen but there shouldn't be any problems with changing it like this.


-Colin

On Tue, Apr 21, 2015 at 3:42 PM, Scott Cain <[hidden email]> wrote:
Hi All,

Let me start with the confession that my javascript skills are severely lacking :-)  I'd like to "brand" my JBrowse so that it fits in with the rest of WormBase, so I thought I'd just grab the bits from WormBase pages that provide the menu and whatnot that goes at the top of the page.  It's really pretty simple: I added a few lines to the end of the head and top of the body of the JBrowse index page, so that it looks like this:


    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link type="text/css" href="http://www.wormbase.org/css/main.min.css" rel="stylesheet" />

  </head>
  <body>
    <script type="text/javascript">
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET","http://www.wormbase.org/header?desktop=true",false);
        xmlHttp.send(null);
        document.write(xmlHttp.responseText);
    </script>

    <div id="GenomeBrowser" ...

The result is at http://dev.wormbase.org:9003/.  When you look at the initial page (where it lists available organisms to browse), it looks kind of OK; however, if you click on one of those organisms, you'll see the WormBase banner load, then briefly the top of JBrowse load (with the navigation stuff), and then quickly disappear, and then the faceted browsing tab appears (which works pretty much as you'd expect--it expands and you can select tracks; unfortunately, those tracks never show up).

So, my question is this: is there something obvious that I should be doing to make this work, or is it going to be ugly debugging of colliding javascript and css?  I really don't want to put JBrowse in an iframe, since that is really an unattractive solution.

Thanks much,
Scott
 
PS: I realize I'm somehow evil for the blocking, non-asyncronous call to wormbase to fetch the header, but so it goes :-)


--
------------------------------------------------------------------------
Scott Cain, Ph. D.                                   scott at scottcain dot net
GMOD Coordinator (http://gmod.org/)                     <a href="tel:216-392-3087" value="+12163923087" target="_blank">216-392-3087
Ontario Institute for Cancer Research

------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax





--
------------------------------------------------------------------------
Scott Cain, Ph. D.                                   scott at scottcain dot net
GMOD Coordinator (http://gmod.org/)                     216-392-3087
Ontario Institute for Cancer Research

------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax
Reply | Threaded
Open this post in threaded view
|

Re: putting JBrowse "in" another page

Keiran Raine
Hi Scott,

We have JBrowse embedded in a page so we can jump around based on a BED file of locations (once you select the required tracks).  We've se the inner pane to be roughly the size most users would have viewable in a standard JBrowse, but it becomes scrollable when lots of tracks are present.  As the controls for jumping between position outside of JB become keyboard shortcuts the users don't need control.

FYI, I didn't do the bulk of this but I can pull the code if anyone wants to use it as a base.  We also have the same which runs over VCF files (backed by a tabix server).

Anyway see the attachment for how it looks:



Keiran Raine
Principal Bioinformatician
Cancer Genome Project
Wellcome Trust Sanger Institute

Tel:+44 (0)1223 834244 Ext: 7703
Office: H104

On 21 Apr 2015, at 22:41, Scott Cain <[hidden email]> wrote:

Hi Colin,

Perfect--I think that does it, though I put the width back to 100% and it still seems to work.  Cutting the width off at a defined pixel width is really unattractive :-) 

I wonder what the best value for height is?  If I make it too large, people with small screens will be out of luck, as some data will end up off the bottom of the page, where as if I make it too small, people with large screens will have a bunch of unused page at the bottom (unattractive but I guess not a huge problem).

Scott


Scott


On Tue, Apr 21, 2015 at 5:25 PM, Colin <[hidden email]> wrote:
You might try giving the genome browser <div id="GenomeBrowser"> an absolute height and width (i.e. 1000px by 600px) because I think the layout on your page confused by the percentage based settings. Normally the browser is just using 100% width and 100% height so that it is fullscreen but there shouldn't be any problems with changing it like this.


-Colin

On Tue, Apr 21, 2015 at 3:42 PM, Scott Cain <[hidden email]> wrote:
Hi All,

Let me start with the confession that my javascript skills are severely lacking :-)  I'd like to "brand" my JBrowse so that it fits in with the rest of WormBase, so I thought I'd just grab the bits from WormBase pages that provide the menu and whatnot that goes at the top of the page.  It's really pretty simple: I added a few lines to the end of the head and top of the body of the JBrowse index page, so that it looks like this:


    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <link type="text/css" href="http://www.wormbase.org/css/main.min.css" rel="stylesheet" />

  </head>
  <body>
    <script type="text/javascript">
        var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET","http://www.wormbase.org/header?desktop=true",false);
        xmlHttp.send(null);
        document.write(xmlHttp.responseText);
    </script>

    <div id="GenomeBrowser" ...

The result is at http://dev.wormbase.org:9003/.  When you look at the initial page (where it lists available organisms to browse), it looks kind of OK; however, if you click on one of those organisms, you'll see the WormBase banner load, then briefly the top of JBrowse load (with the navigation stuff), and then quickly disappear, and then the faceted browsing tab appears (which works pretty much as you'd expect--it expands and you can select tracks; unfortunately, those tracks never show up).

So, my question is this: is there something obvious that I should be doing to make this work, or is it going to be ugly debugging of colliding javascript and css?  I really don't want to put JBrowse in an iframe, since that is really an unattractive solution.

Thanks much,
Scott
 
PS: I realize I'm somehow evil for the blocking, non-asyncronous call to wormbase to fetch the header, but so it goes :-)


--
------------------------------------------------------------------------
Scott Cain, Ph. D.                                   scott at scottcain dot net
GMOD Coordinator (http://gmod.org/)                     <a href="tel:216-392-3087" value="+12163923087" target="_blank">216-392-3087
Ontario Institute for Cancer Research

------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax





--
------------------------------------------------------------------------
Scott Cain, Ph. D.                                   scott at scottcain dot net
GMOD Coordinator (http://gmod.org/)                     216-392-3087
Ontario Institute for Cancer Research
------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax


-- The Wellcome Trust Sanger Institute is operated by Genome Research Limited, a charity registered in England with number 1021457 and a company registered in England with number 2742969, whose registered office is 215 Euston Road, London, NW1 2BE.

------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
Gmod-ajax mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/gmod-ajax