New Zooming Functionality

package.json

@@ -40,6 +40,7 @@
     "d3-collection": "^1.0.4",
     "d3-color": "^1.0.3",
     "d3-ease": "^1.0.3",
+    "d3-format": "^1.3.0",
     "d3-interpolate": "^1.1.5",
     "d3-scale": "^1.0.5",
     "d3-selection": "^1.1.0",

src/components/app.js

@@ -33,8 +33,8 @@ const Contents = ({sidebarOpen, showSpinner, styles, availableWidth, availableHe
   /* Calculate reponsive geometries. chart: entropy, frequencies. big: map, tree */
   const chartWidthFraction = 1;
   let bigWidthFraction = grid ? 0.5 : 1;
-  let chartHeightFraction = 0.3;
-  let bigHeightFraction = grid ? 0.7 : 0.88;
+  let chartHeightFraction = 0.36;
+  let bigHeightFraction = grid ? 0.64 : 0.88;
   if (narrative) {
     /* heights */
     const numThinPanels = true + show("entropy") + show("frequencies") - 1;

src/components/controls/color-by.js

@@ -90,12 +90,12 @@ class ColorBy extends React.Component {
         value={this.state.geneSelected}
         options={gtGeneOptions}
         clearable={false}
-        searchable={false}
+        searchable={true}
         multi={false}
         onChange={(opt) => {
           const gene = opt.value;
           const position = this.state.positionSelected;
-          this.setState({geneSelected: gene});
+          this.setState({geneSelected: gene, positionSelected:gene+" positions..."});
           this.setGenotypeColoring(gene, position);
         }}
       />
@@ -129,12 +129,18 @@ class ColorBy extends React.Component {
   }
 
   setGenotypeColoring(gene, position) {
-    if (!position) return;
+    if (!position) {
+      if (gene==="nuc") return;
+      position = "1"; /* if it's a gene, set position to trigger zoom */
+    }
+    if (position.split(',').length === 1 && parseInt(position.split(','), 10) >= this.props.geneLength[gene]) {
+      position = "1"; /* if it's a position outside the gene, set to 1 to trigger zoom in another gene! */
+    }
     const positions = position.split(',').filter((x) =>
       parseInt(x, 10) > 0 && parseInt(x, 10) < this.props.geneLength[gene]
     );
     if (!positions.length) return;
-    const colorBy = "gt-" + gene + "_" + positions.join(',');
+    const colorBy = "gt-"+gene+"_"+positions.join(','); 
     analyticsControlsEvent("color-by-genotype");
     this.props.dispatch(changeColorBy(colorBy));
   }