Merge pull request #164 from nextstrain/fix-genotype-coloring-v2

Fix color by genotype after entropy click
nextstrain · Feb 2, 2017 · ee7e45b · ee7e45b
2 parents b645c7c + 188fb9a
commit ee7e45b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/src/components/app.js b/src/components/app.js
@@ -410,6 +410,7 @@ class App extends React.Component {
               sidebar={this.state.sidebarOpen || this.state.sidebarDocked}
               changeRoute={this.changeRoute.bind(this)}
               location={this.state.location}
+              router={this.props.router}              
             />
         </Background>
       </Sidebar>

diff --git a/src/components/charts/entropy.js b/src/components/charts/entropy.js
@@ -8,6 +8,7 @@ import Card from "../framework/card";
 import d3 from "d3";
 import { parseGenotype } from "../../util/getGenotype";
 import computeResponsive from "../../util/computeResponsive";
+import { changeColorBy } from "../../actions/controls";
 
 @connect(state => {
   return {
@@ -22,13 +23,10 @@ class Entropy extends React.Component {
     /* check here to see if this.props.browserDimensions has changed and rerender */
   }
 
-  setColorByQuery(colorBy) {
-    const newQuery = Object.assign({}, this.props.location.query,
-                                   {colorBy: colorBy});
-    this.props.changeRoute(this.props.location.pathname, newQuery);
+  setColorByGenotype(colorBy) {
+    this.props.dispatch(changeColorBy(colorBy, this.props.router))
   }
 
-
   drawEntropy() {
     const responsive = computeResponsive({
       horizontal: 1,
@@ -116,7 +114,7 @@ class Entropy extends React.Component {
                 y={y(e.y)}
                 width="1" height={y(0) - y(e.y)}
                 cursor={"pointer"}
-                onClick={() => {this.setColorByQuery("gt-nuc_" + (e.x + 1));}}
+                onClick={() => {this.setColorByGenotype("gt-nuc_" + (e.x + 1));}}
                 fill={"#CCC"}
                 stroke={"#CCC"}
               />
@@ -130,7 +128,7 @@ class Entropy extends React.Component {
                 y={y(e.y)}
                 width="2.5" height={y(0) - y(e.y)}
                 cursor={"pointer"}
-                onClick={() => {this.setColorByQuery("gt-" + e.prot + "_" + (e.codon + 1));}}
+                onClick={() => {this.setColorByGenotype("gt-" + e.prot + "_" + (e.codon + 1));}}
                 fill={e.fill}
                 stroke={"#CCC"}
               />

diff --git a/src/components/controls/color-by.js b/src/components/controls/color-by.js
@@ -57,9 +57,15 @@ class ColorBy extends React.Component {
   }
 
   genotypeInput() {
+    let placeholder = "Genome position";
+    if (this.props.colorBy) {
+      if (this.props.colorBy.slice(0,2) === "gt") {
+        placeholder = this.props.colorBy.slice(3);
+      }
+    }
     if (this.state.selected === "gt") {
       return (
-        <input type="text" placeholder="Genome position"
+        <input type="text" placeholder={placeholder}
                onChange={(e) => this.setGenotypeColorBy(e.target.value)}
         />
       );
@@ -69,9 +75,6 @@ class ColorBy extends React.Component {
   }
 
   setGenotypeColorBy(genotype) {
-    console.log("setGenotypeColorBy");
-    console.log("genotype");
-    console.log(genotype);
     if (parseGenotype("gt-" + genotype, this.props.geneLength)) {
       // We got a valid genotype, set query params and state
       this.props.dispatch(changeColorBy("gt-" + genotype, this.props.router))