Configurable themes

[ihh]

We currently have a 'theme' config parameter but all it does is change the dijit theme, and there are (as far as I know) no working examples of how to use it. Nor is there any documentation.

It shouldn't be too hard (famous last words; but seriously. GSoC, student, or intern project?) to add a user-configurable theme; not just for dijit, but for the JBrowse CSS and icon images too.

We could then develop a few different themes and showcase them on jbrowse.org, including e.g. a more minimal black-and white theme like the one used by https://github.com/wurmlab/afra

[nathandunn]

@cmdcolin @deepakunni3 .. would the work you did for the dark themes either help address this or is this something we leverage in the future?

[hexylena]

@ihh oooh yes! I tried hacking on this the other day (we use a lot of material-design themed stuff interally) and had mixed results.

• theme can be set in the config file
• tundra works fine
• everything else has serious issues, I believe due to the CSS styling that uses "tundra" as a selector. When the theme is changed, the class on the root div/body element (can't remember) changes as well.

I was playing with a calmer/lighter tweaks to the default theme the other day, but I'd love to see more options exposed.

https://lotus.au.dk/genome/ is another nice example

[bhofmei]

You can use CSS to overwrite specific features even for the tundra theme. Although not ideal, the easiest way is to create a jbrowse plugin and put all of the custom CSS in the main.css. As a plugin, the CSS will take priority over the default tundra theme when specified correctly.

Here's an example for the browser I've modified. Plant Methylome

Pretty much anything worth changing or could changed was changed. I can provide more information on the details if you are interested.

Having better support for themes is one of the possible google summer of code projects, so we might see better support for this in the fall. I've also thought about implementing it myself, but I won't be able to until at least the summer.

[enuggetry]

It looks beautiful!

[rdhayes]

Yes, that looks great!

Would you be willing to share the plugin code you are using? I like the button option to hide track labels as a better method of dealing with feature overlap on the left-hand side than adding more vertical spacing.

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

On Tue, Mar 22, 2016 at 10:41 AM, Eric Y notifications@github.com wrote:

It looks beautiful!

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/GMOD/jbrowse/issues/704#issuecomment-199929326

[bhofmei]

That button isn't my own plugin in. It comes with JBrowse v 1.12.0+. It's the HideTrackLabels plugin, you can activate it by adding

[ plugins. HideTrackLabels ]
location = plugins/HideTrackLabels

to jbrowse.conf (or the json equivalent to jbrowse_conf.json).

I will attach the CSS file (called txt file here since you can't upload a CSS file apparently) that changes the colors for the browser. This does not change any of the icon images, but in general switches the color scheme from blue to green with red and blue accents for navigation. (In the future I want to change the color of the highlighted region, but I haven't done this yet because it would require creating a new set of highlight icon buttons in the correct color).

[emsanz]

Hi! I wanted to modify the default styles as well and thanks to your help, specially @bhofmei for sharing your CSS file, I could do it!

Here I attach a PDF where I've documented (more or less) the CSS files and colors I've modified, just in case it can help someone else

To see the results, you can check http://popfly.uab.cat

PD: If you can't load the browser, try it with Mozilla Firefox, since we've noted some problems with Chrome and IExplorer. Any feedback on this will be helpful!

[cmdcolin]

@emsanz Cool! The chrome error is weird though. It actually looks like it is caused by the repeated appending to the strings in the admixture function (and the IBD function too).

That is pretty weird and seems like a browser bug or something, but I tested just making it into a regular string i.e. instead of

    + '<div class="classDiv_help_dialog">'
    + '    <div class="mainData">'
    + '    <dl>'
...

I did this

'<div class="classDiv_help_dialog">    <div class="mainData">    <dl>     ...'

Then the call stack error goes away.

[cmdcolin]

Just since I thought that browser bug was so silly, here is a reproducible case

(echo "<script>var s='Generates a call stack error'";for i in {1..100000}; do echo "+' $i'"; done; echo "</script>")>err.html

Open err.html and you'll see an error in the dev console

[emsanz]

@cmdcolin hallelujah! It's not the cleanest solution, but as you said, using a single line for the HTML code works fine!

I'll try to find an alternative using external JS files like JBrowse do with the General Help dialog in src/JBrowse/View/Dialog/QuickHelp.js but I fear I will have the same "call stack" message.

Many thanks!

[cmdcolin]

@emsanz Glad that helps :) I thought that was crazy...had to get it fixed. There are some alternative ways to import the external files, and I think using the "string appending" thing like QuickHelp does have the call stack error

You could try using dojo/text https://dojotoolkit.org/reference-guide/1.10/dojo/text.html to import the content or just download regular HTML file contents with AJAX too!

Thanks for sharing the configurations though. Both the CSS and the menubar configs are quite interesting.

[hexylena]

Made a dark theme based on an apollo PR of mine. Live Demo.

Might be a good starting place as a demo of "how to create a theme as a plugin", which is probably easier than using the native Dojo facilities?

[hexylena]

Working on an afra inspired minimalist theme as well. Apparently you can use CSS to re-arrange blocks so I moved the two genome rulers next to each other.

(DNA sequence is just brewer blues/greens, stops are black, starts are green. Seems not awful?)

Comments welcome. Update: Live Demo. Haven't really worked on the feature info popups, that's coming soon.

[keiranmraine]

@erasche I'd support that rearrangement of the rulers for inclusion into the default layout.

[hexylena]

@keiranmraine I thought about this over breakfast: if you don't mind loading many (small) plugins, I can split up the modifications I'm making into "theme components".

E.g. you as an admin can pick and choose which ones you want, the rearranged rulers, the flat look, the invisible grid lines, the colour scheme. I'll test this idea out today and see how it works.

(Update/Explanation: I have little hope/energy for design arguments over inclusion as a default, and making it a configurable default seems like it would be a bit of work. Easier for me to just release a tiny plugin.)

[hexylena]

@keiranmraine https://github.com/jbrowse-themes now has all the theme components that I use (except the dark theme which I'm yet to break apart). They all, additionally, include examples of how to load them in individual trackList.jsons. (I should add the syntax for jbrowse.conf, but it isn't too different.)

Live demos of all the theme components are now available on the JBrowse Plugin Registry, just look for "Theme"