Ghost User requested to merge feature/color-utils into develop Jun 09, 2018

Created by: S4K4YUME

First off, sorry, but this has become a bit of a frankenstein merge. I will try to highlight some of the changes.

What is in this merge

Mainly there is the color utility and gradient implementation. The windowComponent now is also subscribed to the global settings changing, and the colors/gradients have also been implemented in the treemap and the GPT. Additionally those two visualizations received some improvements and fixes. (See the issues that are fixed.)

What is sort of fixed?

#176 (closed) redrawAll was an event emitted from each and every tab. Additionally the logic in this method was calling a .slice() which I think was obsolete, and it felt like it didn't truly only rerender the activeTab, although some sorting based on it is included.

The current work-around might be good for the final product, but I'm uncertain about this. Hence I strongly propose to leave this issue open and fix it in a different PR by somebody who is a bit more experienced in this specific aspect of our tool.

Image tax

What can still be improved

The gradient calculation might not be as optimized as it could be yet, however, with the recent opengl improvements the behaviour is quite neat and still fast for (relatively) large visualizations. Only on truly large sets such as the NCBI there is the occasional hickup, though this might have been solved with the redrawAll thing.

As this merge already contains quite a bit of usefull - mixed - content, it would be beneficial for us to merge the features that are included.

How to use the color library stuff

Colors and Palettes

Palettes.ts is where we define the default palettes we want to use in our visualization. This stores a few Palette instances, which in turn contain a primary and a secondary Color object. These Color objects have Color.rgb attributes which can be passed along to with drawing the shapes.

Additionally, for the activePalette we calculate two gradientmaps. One for unselected nodes, and one for selected nodes. This way we can support some neat gradient color based on subtrees.

Defining colors / palettes

You should not have to define this if you are working on a visualization, see the next topic. If you have a really good idea for a color palette however, then Palettes.ts is the place to be (note the plural form, not the singular PalettE.ts)

Using Colors / Palettes in your visualization

The GPT shows a very clear example of how to implement this. Please follow that example.

Additional comments from Jules

I have a few things I'd like to add to the opening post regarding some of the changes/additions in this PR.

Generalized Pythagoras Tree:

Height scaling now works properly
Settings have been implemented
Colors are now based on gradients of the palettes
Somewhat optimized code (there wasn't much in it, perhaps it needs updating for the optimizations by @RoanH ?)

Additionally this is the "feature list" of the gradients:

Linear RGB (A -> B)
HSV (A -> B)
HSV Inverse (A -> B, but reverse color circle)

Also includes settings for switching between them, as well as the ability to be able to switch between generating the gradient based on the maximum depth of the tree or generating it per subtree depth so that every leaf ends in the final color. Gradient generation also works with interaction/subtree selection and should be future proof for generating based on subtrees. Future features TODO:

Generate gradients based on more than two colors (i.e. A -> B -> C -> D -> E)
Color picker so that user can choose the colors to use

As noted in the original post, we feel like it is better if this would be added later.

Conclusion

Quite a substantial addition. Still has room for some minor changes for the non-breaking 'problems' as highlighted, but @teards and I think it is valueable to us as a group if this gets pulled as it is now. Then it also becomes easier to solve - whatever should still be changed or optimized (as possibly the gradient) - on separate branches.jawe

Feature/color utils