diff --git a/src/components/app.js b/src/components/app.js index 818c18fb1..aafbb20c7 100644 --- 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} /> diff --git a/src/components/charts/entropy.js b/src/components/charts/entropy.js index 058b4dc07..f16081aac 100644 --- 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 index b72f0b8f9..37ce81b67 100644 --- 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 ( - 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))