controls/color-by: Debounce position updates so that typing is smooth

This avoids triggering a new state on every keypress in a short
sequence, which is not only slow but inconsistent with expectations that
intermediate colorations are shown while, for example, backspacing a
position input to delete it.

400ms seemed about right in my testing (300ms was too quick for most
typists, 500ms seemed sluggish), but that value may want to be adjusted.

src/components/controls/color-by.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from 'prop-types';
 import { connect } from "react-redux";
 import Select from "react-select";
+import { debounce } from "lodash";
 import { sidebarField } from "../../globalStyles";
 import { controlsWidth, colorByMenuPreferredOrdering } from "../../util/globals";
 import { changeColorBy } from "../../actions/colors";
@@ -92,16 +93,23 @@ class ColorBy extends React.Component {
         });
 
         if (genotype) {
-          analyticsControlsEvent("color-by-genotype");
-          this.props.dispatch(changeColorBy(genotype));
+          this.dispatchColorByGenotype(genotype);
         }
       }
     } else {
-      analyticsControlsEvent(`color-by-${colorBySelected}`);
-      this.props.dispatch(changeColorBy(colorBySelected));
+      this.dispatchColorBy(colorBySelected);
     }
   }
 
+  dispatchColorBy(colorBy, name = colorBy) {
+    analyticsControlsEvent(`color-by-${name}`);
+    this.props.dispatch(changeColorBy(colorBy));
+  }
+
+  dispatchColorByGenotype = debounce((genotype) => {
+    this.dispatchColorBy(genotype, "genotype");
+  }, 400);
+
   getGtGeneOptions() {
     let options = [];
     if (this.props.geneMap) {