More significant use of color

[jcahill]

First Thoughts - Color

Contrast Issues

1. These elements lack sufficient contrast for comfortable editing:
   • The light-blue of unselected nodes
   • the dark-grey of sockets
   • the light-grey of the editor canvas.

Protocol Tabs

1. Accessibility metrics get upset when red and green are used as primary UI values.
2. Protocol tabs could be more informative wrt the saved status of drafts.
3. As a start, maybe this could work:
   • use same yellow for current protocol and selected node
   • append * to active tab's name with unsaved changes.

Sockets Lack Visual Cues

1. Selected sockets can't be realistically distinguished from unselected ones.
2. Also, I find it helpful for nodal editors to indicate connected/disconnected status.

Text-Heavy Nodes

1. PAML models are much text-heavier than typical graphical models.
2. Lots of text is also necessarily within close proximity of unrelated sockets.
   • ex. the long term dispenseVelocity crowding nearby End timepoint text.
3. Pairing text color with socket selection or other visual hierarchy could help here.

Current Color Summary

/*****************************
          NODES
*****************************/

.editor .node {
  background:       #caebf2;
  border-color:     #a9a9a9;
}

.node.selected {
  background:       #ffd92c;
  border-color:     #e3c000;
}

/*****************************
          SOCKETS 
*****************************/

.editor .node .socket.number {
  background:       grey;
}

.editor .node .socket.timepoint {
  background:       #49d30f;
}

/*****************************
          TABS
*****************************/

#editor-protocol-tabs .dropdown:not(.current-protocol) {
  background-color: #caebf2;
}

#editor-protocol-tabs .dropdown.current-protocol {
  background-color: #ff3b3f;
}