Make selected UI elements more visible

[gaurav]

Selected phyloreferences are not highlighted brightly enough -- make them really intensely coloured, and consider scrolling to them when they are selected. Remember that changing from black to any other colour reduces the constrast between them, so think about highlighting their background as well.

The idea here seems to be that my eye/screen setup is better than most, so I should make it really obvious and garish on my screen, and then it'll be visible for them.

[gaurav]

In 33dbd8f, I've moved the node descriptions into CSS so it's easier to edit them. Currently, I'm trying:

• Nodes: 10pt
• Internal specifier node: 12pt green bolder
• External specifier node: 12pt magenta bolder
• Terminal nodes without taxonomic units: turkey red italic bolder
• Internal label: 12pt serif italic
• Selected internal label: 16pt blue

[gaurav]

I've found a new way of testing this: Ctrl+Win+C on Windows 10 turns Windows into black and white mode, which is a neat way of making sure your formatting is clear enough without any colours at all.

[gaurav]

Increasing the font size and changing the font colour don't seem to have helped very much. I'll try adding a coloured (light-grey) rectangle behind the text as a highlight, as in https://stackoverflow.com/a/16873128/27310

[gaurav]

Yesterday, @ncellinese and I discussed how to improve the visualization of selected phyloreferences, and we came up with the following plan:

1. Don't highlight terminals with parsing errors, which are currently displayed in red. This might be better as an optional mode that is useful when reading phylogenies (i.e. it might be better as part of Improve malformed Newick errors and detection #41).
2. Included terminals and edges should be bolded and coloured in a particular colour, e.g. blue.
3. Internal specifiers should be coloured green.
4. External specifiers should be coloured in another colour (orange?).
5. Rather than trying to write the name of the phyloreference on the phylogeny itself, we should add a symbol to the pinning node (like a pin or a flag) and then add the name of the clade to the legend.
6. We probably don't need to display all the clades on a phylogeny -- we should probably only show the selected phyloreference by default, but with an option to toggle on and off all the other clade names.
7. There should be a legend showing what each of these colours mean.

Since these all have the overall goal of improving the display of making selected UI more visible, I'll add it to this issue. However, I anticipate that some of these items will be separated into new issues once I have a better grasp on what works, what is possible with Phylotree.js, and what we need. Here's a rough sketch of how we imagined this would look:

[gaurav]

• When a clade resolves to a terminal node, we should make the font size larger (the same size as the clade label in the tree) so as to make it clear that this node was resolved as the entire clade.

[gaurav]

• Add a circle at the leaf node to make it clear that it is a clade.
• Add a legend (blue = specifier, black = resolved clade)
• "Actual resolved node" should include the label after the text (e.g. 'node24 (labeled as Crocodilus)')
• Use another color for clade (maybe purple or green), since blue is already used for specifiers -- we can also make leaf node clades into the same color to make the distinction clear

[gaurav]

• Orange (external terminals) and deep blue (internal terminals)
• If a terminal node is the pinning node, it should be deep blue (to indicate an internal terminal) and then we use the circle to indicate that the clade is present here. It should also be large and in bold as it currently is. It should be in italics like other clade names.

[gaurav]

• If it's a terminal node, we should use the phyloreference name rather than the terminal name (and them maybe add the terminal name afterwards). e.g. [em][strong][font 16]Caimaninae[/font][/strong][/em] [font 14](Caiman crocodylus)[/font 14]

[gaurav]

• Don't need a legend: it is somewhat clear from the context why certain things are highlighted.