Merge branch 'master' into controls-to-map

* master:
  Fix bug with display of genotype colorby control
  tip modal click behavior. closes #252
  Map colors by genotype. Fixes #220.
  version bump to 1.1.2 for release
  add gates tweet

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextstrain-auspice",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Nextstrain auspice",
   "scripts": {
     "clean": "rimraf dist",

src/components/controls/color-by.js

@@ -57,15 +57,15 @@ class ColorBy extends React.Component {
   }
 
   genotypeInput() {
-    let placeholder = "Genome position";
+    let value = "";
     if (this.props.colorBy) {
       if (this.props.colorBy.slice(0, 2) === "gt") {
-        placeholder = this.props.colorBy.slice(3);
+        value = this.props.colorBy.slice(3);
       }
     }
     if (this.state.selected === "gt") {
       return (
-        <input type="text" placeholder={placeholder}
+        <input type="text" placeholder="Genome position" value={value}
           onChange={(e) => this.setGenotypeColorBy(e.target.value)}
         />
       );

src/components/map/map.js

@@ -26,6 +26,7 @@ import getLatLongs from "../../util/mapHelpersLatLong";
     colorBy: state.controls.colorBy,
     map: state.map,
     geoResolution: state.controls.geoResolution,
+    sequences: state.sequences
   };
 })
 class Map extends React.Component {
@@ -230,7 +231,8 @@ class Map extends React.Component {
       this.state.map,
       this.props.colorBy,
       this.props.geoResolution,
-      this.props.colorScale.scale,
+      this.props.colorScale,
+      this.props.sequences
     );
   }
   createMap() {

src/components/tree/tipSelectedPanel.js

@@ -1,3 +1,4 @@
+/*eslint-env browser*/
 import React from "react";
 import {infoPanelStyles} from "../../globalStyles";
 
@@ -34,11 +35,17 @@ const TipSelectedPanel = ({tip, goAwayCallback}) => {
     }
   };
 
+  const stopProp = (e) => {
+    if (!e) {e = window.event;}
+    e.cancelBubble = true;
+    if (e.stopPropagation) {e.stopPropagation();}
+  };
+
   const makePanel = () => {
     if (!tip) {return null;}
     return (
       <div style={styles.container} onClick={() => goAwayCallback(tip)}>
-        <div className={"panel"} style={infoPanelStyles.panel}>
+        <div className={"panel"} style={infoPanelStyles.panel} onClick={(e) => stopProp(e)}>
           <p style={infoPanelStyles.modalHeading}>
             {`${tip.n.strain}`}
           </p>

src/util/mapHelpersLatLong.js

@@ -1,7 +1,7 @@
 import {averageColors} from "./colorHelpers";
+import {getTipColorAttribute} from "./treeHelpers";
 
-const getLatLongs = (nodes, visibility, metadata, map, colorBy, geoResolution, colorScale) => {
-
+const getLatLongs = (nodes, visibility, metadata, map, colorBy, geoResolution, colorScale, sequences) => {
   const aggregatedLocations = {}; /* demes */
   const aggregatedTransmissions = {}; /* edges, animation paths */
   const demesToColors = {};
@@ -29,13 +29,14 @@ const getLatLongs = (nodes, visibility, metadata, map, colorBy, geoResolution, c
   */
   nodes.forEach((n, i) => {
     /* demes only count terminal nodes */
+    const tipColorAttribute = getTipColorAttribute(n, colorScale, sequences);
     if (!n.children && visibility[i] === "visible") {
       // look up geo1 geo2 geo3 do lat longs differ
       if (aggregatedLocations[n.attr[geoResolution]]) {
-        aggregatedLocations[n.attr[geoResolution]].push(colorScale(n.attr[colorBy]));
+        aggregatedLocations[n.attr[geoResolution]].push(colorScale.scale(tipColorAttribute));
       } else {
         // if we haven't added this pair, add it
-        aggregatedLocations[n.attr[geoResolution]] = [colorScale(n.attr[colorBy])];
+        aggregatedLocations[n.attr[geoResolution]] = [colorScale.scale(tipColorAttribute)];
       }
     }
     /* transmissions count internal node transitions as well
@@ -51,9 +52,9 @@ const getLatLongs = (nodes, visibility, metadata, map, colorBy, geoResolution, c
           visibility[child.arrayIdx] === "visible") {
           const transmission = n.attr[geoResolution] + "/" + child.attr[geoResolution];
           if (aggregatedTransmissions[transmission]) {
-            aggregatedTransmissions[transmission].push(colorScale(n.attr[colorBy]));
+            aggregatedTransmissions[transmission].push(colorScale.scale(n.attr[colorBy]));
           } else {
-            aggregatedTransmissions[transmission] = [colorScale(n.attr[colorBy])];
+            aggregatedTransmissions[transmission] = [colorScale.scale(n.attr[colorBy])];
           }
         }
       });

src/util/treeHelpers.js

@@ -139,7 +139,7 @@ export const calcBranchThickness = function (nodes, visibility, rootIdx) {
   ));
 };
 
-const getTipColorAttribute = function (node, colorScale, sequences) {
+export const getTipColorAttribute = function (node, colorScale, sequences) {
   if (colorScale.colorBy.slice(0, 3) === "gt-" && colorScale.genotype) {
     return getGenotype(colorScale.genotype[0][0],
                        colorScale.genotype[0][1],

src/version.js

@@ -1 +1 @@
-export const version = "1.1.1";
+export const version = "1.1.2";