Merge pull request #214 from nextstrain/experimental_merge

Experimental merge

src/actions/types.js

@@ -32,6 +32,7 @@ export const CHANGE_DATE_MAX = "CHANGE_DATE_MAX";
 export const CHANGE_ABSOLUTE_DATE_MIN = "CHANGE_ABSOLUTE_DATE_MIN";
 export const CHANGE_ABSOLUTE_DATE_MAX = "CHANGE_ABSOLUTE_DATE_MAX";
 export const CHANGE_COLOR_BY = "CHANGE_COLOR_BY";
+export const CHANGE_GEO_RESOLUTION = "CHANGE_GEO_RESOLUTION";
 export const SET_COLOR_SCALE = "SET_COLOR_SCALE";
 export const NEW_DATASET = "NEW_DATASET";
 export const RESET_CONTROLS = "RESET_CONTROLS";

src/components/controls/color-by.js

@@ -93,9 +93,9 @@ class ColorBy extends React.Component {
   render() {
     const styles = this.getStyles();
     const colorOptions = Object.keys(this.props.colorOptions).map((cOpt, i) =>
-      <option key={i} value={ cOpt }>
-        { this.props.colorOptions[cOpt].menuItem }
-      </option>);
+      <option key={i} value={ cOpt } selected={cOpt === this.state.selected ? true : false}>
+        { this.props.colorOptions[cOpt].menuItem.toLowerCase() }
+      </option> );
 
     return (
       <div style={styles.base}>

src/components/controls/controls.js

@@ -8,6 +8,7 @@ import DateRangeInputs from "./date-range-inputs";
 import ChooseLayout from "./choose-layout";
 import ChooseVirus from "./choose-virus";
 import ChooseMetric from "./choose-metric";
+import GeoResolution from "./geoResolution";
 import AllFilters from "./all-filter";
 import * as globals from "../../util/globals";
 import { titleStyles } from "../../globalStyles";
@@ -58,6 +59,7 @@ class Controls extends React.Component {
         <Search/>
 
         {header("Map Options")}
+        <GeoResolution/>
 
       </Flex>
     );

src/components/controls/geoResolution.js

@@ -0,0 +1,68 @@
+import React from "react";
+import _ from "lodash";
+import { select} from "../../globalStyles";
+import { connect } from "react-redux";
+import { CHANGE_GEO_RESOLUTION } from "../../actions/types";
+import { changeColorBy } from "../../actions/colors";
+import { modifyURLquery } from "../../util/urlHelpers";
+
+/* Why does this have colorBy set as state (here) and in redux?
+   it's for the case where we select genotype, then wait for the
+   base to be selected, so we modify state but not yet dispatch
+*/
+
+@connect((state) => {
+  return {
+    metadata: state.metadata.metadata,
+    geoResolution: state.controls.geoResolution,
+  };
+})
+class GeoResolution extends React.Component {
+  static contextTypes = {
+    router: React.PropTypes.object.isRequired
+  }
+  getStyles() {
+    return {
+      base: {
+        marginBottom: 10
+      }
+    };
+  }
+  createResolutions() {
+    let resolutions = null;
+
+    if (this.props.metadata) {
+      const resolutionKeys = _.keys(this.props.metadata.geo)
+      resolutions = resolutionKeys.map((resolution, i) => {
+        return (
+          <option key={i} value={ resolution }>
+            { resolution.toLowerCase() }
+          </option>
+        )
+      })
+    }
+    return resolutions;
+  }
+  render() {
+
+    const styles = this.getStyles();
+
+    return (
+      <div style={styles.base}>
+        <select
+          value={this.props.geoResolution}
+          style={select}
+          id="geoResolution"
+          onChange={(e) => {
+            this.props.dispatch({ type: CHANGE_GEO_RESOLUTION, data: e.target.value });
+            modifyURLquery(this.context.router, {r: e.target.value}, true);
+          }}
+        >
+        {this.createResolutions()}
+        </select>
+      </div>
+    );
+  }
+}
+
+export default GeoResolution;