search

GMOD / jbrowse

JBrowse 1, a full-featured genome browser built with JavaScript and HTML5. For JBrowse 2, see https://github.com/GMOD/jbrowse-components.
http://jbrowse.org
Other
463 stars 199 forks source link

Custom Menu Options #467

Closed chocolatebazzar closed 6 years ago

chocolatebazzar commented 10 years ago

Right now, we have JBrowse displaying the default tundra theme. However, we would like to make a couple of changes to the top menu (make the dropdown bigger, change the button colors, and add a link). What css and html files do we need to edit to customize these features?

cshukai commented 10 years ago

you can increase the following padding values in menubar.css to make dropdown bigger :

.tundra .globalMenu .dijitMenuItem td {
    padding: 0.5em 2px 0.5em 5px;

}
cmdcolin commented 10 years ago

Thanks @cshukai for the contribution. I think hacking on the CSS might be necessary.

I think the "theme" system is probably the best way to customize CSS styles (the plugin and configuration variables are somewhat limited for doing this), but unfortunately I also don't think we have documented this very well.

I also tried using the "claro" theme but it seemed a little buggy, so there might be more work to do to enable better themes! Thanks for the interest though.

As for the menu items, I would recommend a plugin architecture to add a menu item. Here's an example we have for WebApollo https://github.com/GMOD/Apollo/blob/master/client/apollo/js/main.js

rdhayes commented 10 years ago

@chocolatebazzar , how did this go for you?

I'm having similar problems altering the menu bar to suit our tastes. We basically just wish to: 1) move the "share" button 2) add a clickable icon to bring users back to our portal's homepage

The theme system is basically inscrutable. A custom theme might help, but a lot of the menubar is handled by the main JBrowse menubar.css file, no? I probably just need a push in the right direction. The quick route would be to just hack Browser.js, menubar.css, etc. as needed, but that's not sustainable.

I explored the plugin architecture suggestion, but I'm having trouble with that as well. Here's the very basic test version I have up and the code runs on JBrowse load, but the additional menu option never displays. I suspect I'm missing a puzzle piece here. define( [ 'dojo/_base/declare', 'dijit/MenuItem', 'dijit/MenuSeparator', 'dijit/CheckedMenuItem', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/form/Button', 'JBrowse/Plugin', ], function( declare, dijitMenuItem, dijitMenuSeparator, dijitCheckedMenuItem, dijitDropDownButton, dijitDropDownMenu, dijitButton, JBPlugin) {

return declare( JBPlugin, { constructor: function( args ) { var browser = this.browser; if (browser.config.show_nav) { var homeUrl = "http://zome-dev.phytozome.net/pz/portal.html"; console.log(homeUrl); browser.addGlobalMenuItem( 'Phytozome', new dijitMenuItem( { id: 'menubar_home_quickstart', label: 'General', onClick: function() { window.location = homeUrl; } }) ); } } }) });

Thanks!

cmdcolin commented 10 years ago

I think your code is fine here, you would just have to create a new menu tab before adding menu items to it. I tested this out

define(
[
'dojo/_base/declare',
'dijit/MenuItem',
'dijit/MenuSeparator',
'dijit/CheckedMenuItem',
'dijit/form/DropDownButton',
'dijit/DropDownMenu',
'dijit/form/Button',
'JBrowse/Plugin',
],
function( declare, dijitMenuItem, dijitMenuSeparator, dijitCheckedMenuItem, dijitDropDownButton, dijitDropDownMenu, dijitButton, JBPlugin) {

return declare( JBPlugin, {
constructor: function( args ) { 
var browser = this.browser;
if (browser.config.show_nav) {
var homeUrl = "http://zome-dev.phytozome.net/pz/portal.html";
browser.afterMilestone('initView',function() {
        browser.addGlobalMenuItem( 'phytozome', new dijitMenuItem({
            label: 'My label',
            id: 'menubar_phytozome',
            title: 'My title',
            iconClass: 'jbrowseIconClass', //example
            onClick: function() { 
                window.location=homeUrl;
            }   
        }));
        browser.renderGlobalMenu( 'phytozome', {}, browser.menuBar );
    }); 
}
}
})
});
chocolatebazzar commented 10 years ago

Sorry to say, but I never solved this problem. I did look around the CSS files, but there is no clear origin of where the menu buttons are created. I eventually had to give up and just go with what JBrowse provided.

rdhayes commented 10 years ago

Aside from adding to jbrowse.conf:

[ plugins.PhytozomeHeader ] location = plugins/PhytozomeHeader

And having your modified code in plugins/PhytozomeHeader/js/main.js

What am I missing? I still get nothing new displayed.

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 1:26 PM, Colin notifications@github.com wrote:

I think your code is fine here, you would just have to create a new menu tab before adding menu items to it. I tested this out

define( [ 'dojo/_base/declare', 'dijit/MenuItem', 'dijit/MenuSeparator', 'dijit/CheckedMenuItem', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/form/Button', 'JBrowse/Plugin', ], function( declare, dijitMenuItem, dijitMenuSeparator, dijitCheckedMenuItem, dijitDropDownButton, dijitDropDownMenu, dijitButton, JBPlugin) {

return declare( JBPlugin, { constructor: function( args ) { var browser = this.browser; if (browser.config.show_nav) { var homeUrl = "http://zome-dev.phytozome.net/pz/portal.html"; browser.afterMilestone('initView',function() { browser.addGlobalMenuItem( 'phytozome', new dijitMenuItem({ label: 'My label', id: 'menubar_phytozome', title: 'My title', iconClass: 'jbrowseIconClass', //example onClick: function() { window.location=homeUrl; } })); browser.renderGlobalMenu( 'phytozome', {}, browser.menuBar ); }); } } }) });

— Reply to this email directly or view it on GitHub https://github.com/GMOD/jbrowse/issues/467#issuecomment-57699538.

cmdcolin commented 10 years ago

That exact same setup that you have works for me (except I called it TestPlugin)

Maybe clearing cache would help?

rdhayes commented 10 years ago

My IDs in addGlobalMenuItem() and renderGlobalMenu() weren't matching exactly ('Phytozome' versus 'phytozome'). So we are heading in the right direction.

Next step is to change this to a DIV with an image that provides the link, which is my actual end goal. I'll keep responding to this ticket to save this for others.

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 1:58 PM, Colin notifications@github.com wrote:

That exact same setup that you have works for me (except I called it TestPlugin)

Maybe clearing cache would help?

— Reply to this email directly or view it on GitHub https://github.com/GMOD/jbrowse/issues/467#issuecomment-57705992.

rdhayes commented 10 years ago

This is looking good. Next, I'm hoping to do a simple innerHTML swap with onmouseenter and onmouseout/onmouseleave events. I've tried using dojo.connect to control this, without full success. The mouseover image swap works, but the reverse doesn't fire (no console message). Is this a dojo version problem, or is there something more subtle wrong? I don't see other error messages, but the onclick event doesn't register if I include both dojo.connect() calls below.

Thanks!

For full context, I'm adding an HTML element with the plugin architecture and this plugin main.js:

define( [ 'dojo/_base/declare', 'dijit/MenuItem', 'dijit/MenuSeparator', 'dijit/CheckedMenuItem', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/form/Button', 'JBrowse/Plugin', ], function( declare, dijitMenuItem, dijitMenuSeparator, dijitCheckedMenuItem, dijitDropDownButton, dijitDropDownMenu, dijitButton, JBPlugin) {

return declare( JBPlugin, { constructor: function( args ) { var thisB = this; var browser = this.browser; if (browser.config.show_nav) { browser.afterMilestone('initView', function() { var homeLink = dojo.create( 'a', { id: 'homeLink', className: 'homeLink', innerHTML: '<img class="homeLinkImg" src="/pz/site/images/svg/PhytozomeLogo.svg">', title: 'return to Phytozome homepage', href: "/pz/portal.html", onClick: function() { window.location = homeUrl; return false; } }, browser.menuBar.shareLink ); if (homeLink) { browser.menuBar.appendChild( homeLink ); // no support for onmouseout or onmouseleave dojo connect() attributes? //var linkElem = dojo.byId("homeLink");

                //dojo.connect(linkElem, 'onmouseenter', null,

function() { console.log("mouse over"); this.innerHTML = '<img class="homeLinkImg" s\ rc="/pz/site/images/svg/PhytozomeLogoDark.svg">'; return false; });

                //dojo.connect(linkElem, 'onmouseout', null, function()

{ console.log("mouse out"); this.innerHTML = '<img class="homeLinkImg" src=\ "/pz/site/images/svg/PhytozomeLogo.svg">'; return false; });

            }
        });
    }
},
})
});

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 2:13 PM, Richard Hayes rdhayes@lbl.gov wrote:

My IDs in addGlobalMenuItem() and renderGlobalMenu() weren't matching exactly ('Phytozome' versus 'phytozome'). So we are heading in the right direction.

Next step is to change this to a DIV with an image that provides the link, which is my actual end goal. I'll keep responding to this ticket to save this for others.

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 1:58 PM, Colin notifications@github.com wrote:

That exact same setup that you have works for me (except I called it TestPlugin)

Maybe clearing cache would help?

— Reply to this email directly or view it on GitHub https://github.com/GMOD/jbrowse/issues/467#issuecomment-57705992.

rdhayes commented 10 years ago

Hi all,

Still no luck getting a mouseout / mouseleave event to fire in my plugin. I tried adding dojo/mouse and dojo/on to the require section and adjusting my syntax to:

                on(linkElem, mouse.enter, function(evt) {

console.log("mouse over"); this.innerHTML = '<img class="homeLinkImg" src="/pz/site/image\ s/svg/PhytozomeLogoDark.svg">'; return false; }); on(linkElem, mouse.leave, function(evtGenomeView.js) { console.log("mouse out"); this.innerHTML = '<img class="homeLinkImg" src="/p\ z/site/images/svg/PhytozomeLogo.svg">'; return false; });

The mouse.enter function (console log and innerHTML change) still fires, but the mouse.leave never does.

Any help is appreciated, since I appear to otherwise be following the dojo documentation!

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Sun, Oct 19, 2014 at 8:42 PM, Richard Hayes rdhayes@lbl.gov wrote:

This is looking good. Next, I'm hoping to do a simple innerHTML swap with onmouseenter and onmouseout/onmouseleave events. I've tried using dojo.connect to control this, without full success. The mouseover image swap works, but the reverse doesn't fire (no console message). Is this a dojo version problem, or is there something more subtle wrong? I don't see other error messages, but the onclick event doesn't register if I include both dojo.connect() calls below.

Thanks!

For full context, I'm adding an HTML element with the plugin architecture and this plugin main.js:

define( [ 'dojo/_base/declare', 'dijit/MenuItem', 'dijit/MenuSeparator', 'dijit/CheckedMenuItem', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/form/Button', 'JBrowse/Plugin', ], function( declare, dijitMenuItem, dijitMenuSeparator, dijitCheckedMenuItem, dijitDropDownButton, dijitDropDownMenu, dijitButton, JBPlugin) {

return declare( JBPlugin, { constructor: function( args ) { var thisB = this; var browser = this.browser; if (browser.config.show_nav) { browser.afterMilestone('initView', function() { var homeLink = dojo.create( 'a', { id: 'homeLink', className: 'homeLink', innerHTML: '<img class="homeLinkImg" src="/pz/site/images/svg/PhytozomeLogo.svg">', title: 'return to Phytozome homepage', href: "/pz/portal.html", onClick: function() { window.location = homeUrl; return false; } }, browser.menuBar.shareLink ); if (homeLink) { browser.menuBar.appendChild( homeLink ); // no support for onmouseout or onmouseleave dojo connect() attributes? //var linkElem = dojo.byId("homeLink");

                //dojo.connect(linkElem, 'onmouseenter', null,

function() { console.log("mouse over"); this.innerHTML = '<img class="homeLinkImg" s\ rc="/pz/site/images/svg/PhytozomeLogoDark.svg">'; return false; });

                //dojo.connect(linkElem, 'onmouseout', null,

function() { console.log("mouse out"); this.innerHTML = '<img class="homeLinkImg" src=\ "/pz/site/images/svg/PhytozomeLogo.svg">'; return false; });

            }
        });
    }
},
})
});

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 2:13 PM, Richard Hayes rdhayes@lbl.gov wrote:

My IDs in addGlobalMenuItem() and renderGlobalMenu() weren't matching exactly ('Phytozome' versus 'phytozome'). So we are heading in the right direction.

Next step is to change this to a DIV with an image that provides the link, which is my actual end goal. I'll keep responding to this ticket to save this for others.

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 1:58 PM, Colin notifications@github.com wrote:

That exact same setup that you have works for me (except I called it TestPlugin)

Maybe clearing cache would help?

— Reply to this email directly or view it on GitHub https://github.com/GMOD/jbrowse/issues/467#issuecomment-57705992.

rdhayes commented 10 years ago

Adding the gmod-ajax list to this, in case others have more dojo experience.

I also cleared up that cut-and-paste typo from the mouse.leave on() call in my plugin, with no change to behavior:

                on(linkElem, mouse.enter, function(evt) {

console.log("mouse over"); this.innerHTML = '<img class="homeLinkImg" src="/pz/site/image\ s/svg/PhytozomeLogoDark.svg">' ; return false; }); on(linkElem, mouse.leave, function(evt) { console.log("mouse out"); this.innerHTML = '<img class="homeLinkImg" src="/p\ z/site/images/svg/PhytozomeLogo.svg">'; return false; });

The mouse.enter event fires off fine, but the mouse.leave never runs. Same in Chrome or Firefox

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Fri, Nov 7, 2014 at 4:37 PM, Richard Hayes rdhayes@lbl.gov wrote:

Hi all,

Still no luck getting a mouseout / mouseleave event to fire in my plugin. I tried adding dojo/mouse and dojo/on to the require section and adjusting my syntax to:

                on(linkElem, mouse.enter, function(evt) {

console.log("mouse over"); this.innerHTML = '<img class="homeLinkImg" src="/pz/site/image\ s/svg/PhytozomeLogoDark.svg">'; return false; }); on(linkElem, mouse.leave, function(evtGenomeView.js) { console.log("mouse out"); this.innerHTML = '<img class="homeLinkImg" src="/p\ z/site/images/svg/PhytozomeLogo.svg">'; return false; });

The mouse.enter function (console log and innerHTML change) still fires, but the mouse.leave never does.

Any help is appreciated, since I appear to otherwise be following the dojo documentation!

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Sun, Oct 19, 2014 at 8:42 PM, Richard Hayes rdhayes@lbl.gov wrote:

This is looking good. Next, I'm hoping to do a simple innerHTML swap with onmouseenter and onmouseout/onmouseleave events. I've tried using dojo.connect to control this, without full success. The mouseover image swap works, but the reverse doesn't fire (no console message). Is this a dojo version problem, or is there something more subtle wrong? I don't see other error messages, but the onclick event doesn't register if I include both dojo.connect() calls below.

Thanks!

For full context, I'm adding an HTML element with the plugin architecture and this plugin main.js:

define( [ 'dojo/_base/declare', 'dijit/MenuItem', 'dijit/MenuSeparator', 'dijit/CheckedMenuItem', 'dijit/form/DropDownButton', 'dijit/DropDownMenu', 'dijit/form/Button', 'JBrowse/Plugin', ], function( declare, dijitMenuItem, dijitMenuSeparator, dijitCheckedMenuItem, dijitDropDownButton, dijitDropDownMenu, dijitButton, JBPlugin) {

return declare( JBPlugin, { constructor: function( args ) { var thisB = this; var browser = this.browser; if (browser.config.show_nav) { browser.afterMilestone('initView', function() { var homeLink = dojo.create( 'a', { id: 'homeLink', className: 'homeLink', innerHTML: '<img class="homeLinkImg" src="/pz/site/images/svg/PhytozomeLogo.svg">', title: 'return to Phytozome homepage', href: "/pz/portal.html", onClick: function() { window.location = homeUrl; return false; } }, browser.menuBar.shareLink ); if (homeLink) { browser.menuBar.appendChild( homeLink ); // no support for onmouseout or onmouseleave dojo connect() attributes? //var linkElem = dojo.byId("homeLink");

                //dojo.connect(linkElem, 'onmouseenter', null,

function() { console.log("mouse over"); this.innerHTML = '<img class="homeLinkImg" s\ rc="/pz/site/images/svg/PhytozomeLogoDark.svg">'; return false; });

                //dojo.connect(linkElem, 'onmouseout', null,

function() { console.log("mouse out"); this.innerHTML = '<img class="homeLinkImg" src=\ "/pz/site/images/svg/PhytozomeLogo.svg">'; return false; });

            }
        });
    }
},
})
});

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 2:13 PM, Richard Hayes rdhayes@lbl.gov wrote:

My IDs in addGlobalMenuItem() and renderGlobalMenu() weren't matching exactly ('Phytozome' versus 'phytozome'). So we are heading in the right direction.

Next step is to change this to a DIV with an image that provides the link, which is my actual end goal. I'll keep responding to this ticket to save this for others.

Richard D. Hayes, Ph.D. Joint Genome Institute / Lawrence Berkeley National Lab http://phytozome.jgi.doe.gov

On Thu, Oct 2, 2014 at 1:58 PM, Colin notifications@github.com wrote:

That exact same setup that you have works for me (except I called it TestPlugin)

Maybe clearing cache would help?

— Reply to this email directly or view it on GitHub https://github.com/GMOD/jbrowse/issues/467#issuecomment-57705992.

vivekkrish commented 9 years ago

In our implementation of JBrowse within the Arabidopsis Information Portal (AIP) project, we have done the following to allow users to be able to get back to the main website, [https://www.araport.org]().

{
        suppressUsageStatistics: true,
        datasets: {
                arabidopsis:  { url: '?data=arabidopsis', name: 'Arabidopsis TAIR10 Genome Release' },
        },
        projectHome: {
            logo: '<img src="https://s.gravatar.com/avatar/978e836a9d65238a784543ad932637cd.png" alt="Arabidopsis thaliana" height="27px" />',
            href: 'https://www.araport.org',
            title: 'AIP Home'
        },
}
    if (this.config.projectHome) {
        var projectHome = this.config.projectHome;
        dojo.create('a', {
            className: 'powered_by',
            innerHTML: projectHome['logo'],
            title: projectHome['title'],
            href: projectHome['href']
        }, parent );
    }

The result can be see here: https://apps.araport.org/jbrowse/?data=arabidopsis

This is definitely not a very elegant implementation. Like @cmdcolin suggested, we will try migrating to using a plugin architecture.

Hope this helps! Vivek

cmdcolin commented 9 years ago

Thanks Vivek, that's actually not too bad of an approach!

I agree that making the menu configuration more elegant would be a good project though. For example, even the right-click menu for track features is a little awkward (e.g. menuTemplate). There is a footnote here that I made that describes how the menuTemplate configuration items overwrite the default menu items, and that you can create placeholders to fix it, but honestly, this placeholder approach is fairly awkward. I think it would be possible to add special menu configurations to make this more flexible, and this might also generalize to the top menu bar too