Make tags more colourful #7072

hexylena · 2018-12-04T16:51:26Z

EDIT

After much discussion we've settled on these Options.

Original Post

Today I was running through the peaks2genes tutorial and found that my eyes struggled to recognise if I was looking at something tagged #peaks or #genes, and this wasn't great, they just all looked the same when scanning across a history. (I've added an example at the end.) So I've implemented coloured tags. The colours are done automatically from a hash of the string so they're stateless and consistent.

Whole UI:

It just hashes the tag, and then pulls out some bits of that number. I've done a %10 which means that the lightest colour that can theoretically be generated is which doesn't have super amazing legibility but it isn't that bad (tags are already bad due to small size for that, this isn't making it that much worse.)

I chose a hash function at random by googling, if there's something more appropriate (or already in codebase) let me know. You could probably optimise the colour distributions, I think the dark colours do not have a high perceptual difference but I'm not sure what to do about this. You could probably find a better mapping.

Light colours are also an option / nice?

Original	New
These colours I found difficult when scanning my history	With this patch it's much easier to scan! (Faked screenshot because I'm lazy and didn't want to backport it to 18.05)

The text was updated successfully, but these errors were encountered:

martenson · 2018-12-04T17:07:49Z

client/galaxy/scripts/utils/utils.js

+}
+
+export function generateTagColor(tagValue) {
+    //var r = (15 - ((hash & 0xf) % 6)).toString(16),


This was the 'light' version, left it in so I would not forget what I did, but should be dropped before merge.

martenson · 2018-12-04T17:11:58Z

Is it possible that these generated colors will be unreadable/colorblind unfriendly?

martenson · 2018-12-04T17:44:44Z

% 10, even if it permits some light colours + W3C algo for font fix.

💯

martenson · 2018-12-04T17:53:38Z

@erasche border is exactly what I was just exploring after @jxtx suggested it, light grey 1px border looks very good on these I think

hexylena · 2018-12-04T17:55:30Z

@martenson agreed, it's pretty nice! I like it.

So Galaxy community:

Option 1	Option 2

jxtx · 2018-12-04T17:58:06Z

I like option 2 but maybe the border should be the same hue as the bg but darker.

hexylena · 2018-12-04T18:03:37Z

@jxtx sure, that's possible. Give me a few minutes.

dannon · 2018-12-04T18:09:17Z

I was worried about 'too many lines' cluttering up the UI there with borders, but this looks nice. Same color but darker is a great idea.

hexylena · 2018-12-04T18:20:43Z

Dunno, can't tell much difference from grey lines. But I have imperfect colour vision (red-green blindness). Personally prefer grey lines but yeah.

Another example. I've converted the code to use HSL (so the 'darker' could be implemented easily,) and it's taking some tries to find similarly good distributions to what I saw in RGB pastels.

hexylena · 2018-12-04T18:23:11Z

A little bit better

Pastel

Dark

martenson · 2018-12-04T18:25:46Z

I think @jxtx meant the background color of the dataset not the background of the tag.

hexylena · 2018-12-04T18:28:02Z

@martenson oh, hmm. (thanks for clarification)

nsoranzo · 2018-12-04T19:01:57Z

Pastel with gray border (i.e. Option 2) looks best to me.

hexylena · 2018-12-04T19:05:52Z

Ok created some nice fake histories with lots of tags to show it off. Here are two we can put to the community :)

Option Null	Option 1	Option 2

shiltemann · 2018-12-04T19:10:40Z

this is cool, will be really nice for histories with many tags 👍

My vote goes to Option2 :)

jxtx · 2018-12-04T21:19:40Z

I think @jxtx meant the background color of the dataset not the background of the tag.

No, I meant the color of the tag. I liked that one.

hexylena · 2018-12-04T23:10:05Z

@jxtx Yeah, ok, when I zoom in like 500% I can see it, I'm looking at it again and it's ok. It looks a bit funny on yellow but the others are nice? Less grey is always good. I'll play around with it a bit and just find one that isn't too contrasting that certain ones stand out too much, but it's better than grey. Anything is better than grey.

martenson · 2018-12-04T23:12:03Z

@jxtx my apologies

We have a poll now. :) https://help.galaxyproject.org/t/what-colors-of-galaxy-tags-do-you-like-the-most/101 I will add the color-border option. @erasche can you please get me comparable screenshot?

hexylena · 2018-12-04T23:15:50Z

@martenson I'd say don't bother updating poll due to:

the poll is already started, when I updated the option names to be more descriptive it wiped out previous votes
it's pretty subtle? I do not think anyone will notice or say "I definitely do not want pastels because of the border colour", or would be able to tell the difference between that + grey due to how much stuff is going on in the UI, there are boxes open, datasets, tool menus, etc. I will claim PR author's discretion over those 100 pixels that would change.

martenson · 2018-12-04T23:20:11Z

@erasche You got it.

when I updated the option names to be more descriptive it wiped out previous votes

This is nice behavior actually.

hexylena · 2018-12-04T23:21:04Z

This is nice behavior actually.

Agreed, I can immediately imagine a bunch of bad uses for polls if it didn't. I like it!

hexylena · 2018-12-05T14:56:03Z

Final version, I'm pretty happy :) Here it is zoomed

Full screen version

Ready for review / merge.

martenson · 2018-12-05T15:04:30Z

Thanks a bunch!

hexylena added 2 commits Dec 4, 2018

Implement colourful tags

eeffb26

Move to correct location

e6c4292

hexylena added kind/enhancement area/UI-UX labels Dec 4, 2018

hexylena added this to the 19.01 milestone Dec 4, 2018

This comment has been hidden.

Sign in to view

martenson reviewed Dec 4, 2018

View changes

This comment has been hidden.

Sign in to view

Add colorFg function

5865fe3

This comment has been hidden.

Sign in to view

Replace with style function

12576ef

revert to grey border

0e7f2b3

cleanup/docs

ad9787e

martenson merged commit c4dbf86 into galaxyproject:dev Dec 5, 2018
0 of 6 checks passed

Loading

hexylena deleted the colour-tags branch Dec 5, 2018

hexylena mentioned this pull request Apr 24, 2019

Import colour tags from Galaxy galaxyproject/training-material#1347

Merged

dannon mentioned this pull request May 8, 2019

History "hastag" improvements/issues #3730

Open

12 tasks

galaxyproject / galaxy Public

Make tags more colourful #7072

Make tags more colourful #7072

hexylena commented Dec 4, 2018 •

edited

Loading

This comment has been hidden.

martenson Dec 4, 2018

hexylena Dec 4, 2018 •

edited

Loading

martenson commented Dec 4, 2018

This comment has been hidden.

martenson commented Dec 4, 2018

This comment has been hidden.

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018

jxtx commented Dec 4, 2018

hexylena commented Dec 4, 2018

dannon commented Dec 4, 2018

hexylena commented Dec 4, 2018

hexylena commented Dec 4, 2018 •

edited

Loading

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018 •

edited

Loading

This comment has been hidden.

nsoranzo commented Dec 4, 2018

hexylena commented Dec 4, 2018 •

edited

Loading

shiltemann commented Dec 4, 2018

jxtx commented Dec 4, 2018

hexylena commented Dec 4, 2018

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018

hexylena commented Dec 5, 2018

martenson commented Dec 5, 2018

galaxyproject / galaxy Public

Make tags more colourful #7072

Make tags more colourful #7072

Conversation

hexylena commented Dec 4, 2018 • edited Loading

This comment has been hidden.

martenson Dec 4, 2018

Choose a reason for hiding this comment

hexylena Dec 4, 2018 • edited Loading

Choose a reason for hiding this comment

martenson commented Dec 4, 2018

This comment has been hidden.

martenson commented Dec 4, 2018

This comment has been hidden.

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018

jxtx commented Dec 4, 2018

hexylena commented Dec 4, 2018

dannon commented Dec 4, 2018

hexylena commented Dec 4, 2018

hexylena commented Dec 4, 2018 • edited Loading

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018 • edited Loading

This comment has been hidden.

nsoranzo commented Dec 4, 2018

hexylena commented Dec 4, 2018 • edited Loading

shiltemann commented Dec 4, 2018

jxtx commented Dec 4, 2018

hexylena commented Dec 4, 2018

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018

martenson commented Dec 4, 2018

hexylena commented Dec 4, 2018

hexylena commented Dec 5, 2018

martenson commented Dec 5, 2018

hexylena commented Dec 4, 2018 •

edited

Loading

hexylena Dec 4, 2018 •

edited

Loading

hexylena commented Dec 4, 2018 •

edited

Loading

hexylena commented Dec 4, 2018 •

edited

Loading

hexylena commented Dec 4, 2018 •

edited

Loading