+
+ {t("Codon {{codon}} in protein {{protein}}", {codon: d.codon, protein: this.selectedCds.name})}
+
+
+
+ {t("Nuc positions {{positions}}", {positions: nucCoordinates.join(", ")})}
+
+
+
+ {cds.strand==='-' ? 'Negative strand' : `Positive strand${cds.strand!=='+' ? ' (assumed)' : ''}`}
+ {`, ${frame}`}
+
+
+
+ {this.showCounts ? `${t("Num changes observed")}: ${d.y}` : `${t("Normalised Shannon entropy")}: ${d.y}`}
+
+
+ {t("Click to color tree & map by this genotype")}
+
+
+
+ {t("Nucleotide {{nuc}}", {nuc})}
+
+
+ {overlaps}
+
+
+ {this.showCounts ? `${t("Num changes observed")}: ${d.y}` : `${t("Normalised Shannon entropy")}: ${d.y}`}
+
+
+ {t("Click to color tree & map by this genotype")}
+
+
+
-
);
@@ -162,13 +178,12 @@ class Entropy extends React.Component {
setUp(props) {
const chart = new EntropyChart(
this.d3entropy,
- props.annotations,
- props.geneMap,
- props.geneLength[nucleotide_gene],
+ props.genomeMap,
{ /* callbacks */
onHover: this.onHover.bind(this),
onLeave: this.onLeave.bind(this),
- onClick: this.onClick.bind(this)
+ onClick: this.onClick.bind(this),
+ onCdsClick: this.onCdsClick.bind(this)
}
);
chart.render(props);
@@ -204,50 +219,17 @@ class Entropy extends React.Component {
updateParams.zoomMax = nextProps.zoomMax;
updateParams.zoomMin = nextProps.zoomMin;
}
- if (this.props.bars !== nextProps.bars) { /* will always be true if mutType has changed */
- updateParams.aa = nextProps.mutType === "aa";
- updateParams.newBars = nextProps.bars;
- updateParams.maxYVal = nextProps.maxYVal;
+ if (this.props.bars !== nextProps.bars) {
+ updateParams.newBars = [nextProps.bars, nextProps.maxYVal];
}
- if (this.props.colorBy !== nextProps.colorBy && (isColorByGenotype(this.props.colorBy) || isColorByGenotype(nextProps.colorBy))) {
- if (isColorByGenotype(nextProps.colorBy)) {
- const colorByGenotype = decodeColorByGenotype(nextProps.colorBy, nextProps.geneLength);
- if (colorByGenotype.aa) { /* if it is a gene, zoom to it */
- updateParams.gene = colorByGenotype.gene;
- updateParams.start = nextProps.geneMap[updateParams.gene].start;
- updateParams.end = nextProps.geneMap[updateParams.gene].end;
- } else { /* if a nuc, want to do different things if 1 or multiple */
- const positions = colorByGenotype.positions;
- const zoomCoord = this.state.chart.zoomCoordinates;
- const maxNt = this.state.chart.maxNt;
- /* find out what new coords would be - if different enough, change zoom */
- let startUpdate, endUpdate;
- if (positions.length > 1) {
- const start = Math.min.apply(null, positions);
- const end = Math.max.apply(null, positions);
- startUpdate = start - (end-start)*0.05;
- endUpdate = end + (end-start)*0.05;
- } else {
- const pos = positions[0];
- const eitherSide = maxNt*0.05;
- const newStartEnd = (pos-eitherSide) <= 0 ? [0, pos+eitherSide] :
- (pos+eitherSide) >= maxNt ? [pos-eitherSide, maxNt] : [pos-eitherSide, pos+eitherSide];
- startUpdate = newStartEnd[0];
- endUpdate = newStartEnd[1];
- }
- /* if the zoom would be different enough, change it */
- if (!(startUpdate > zoomCoord[0]-maxNt*0.4 && startUpdate < zoomCoord[0]+maxNt*0.4) ||
- !(endUpdate > zoomCoord[1]-maxNt*0.4 && endUpdate < zoomCoord[1]+maxNt*0.4) ||
- !(positions.every((x) => x > zoomCoord[0]) && positions.every((x) => x < zoomCoord[1]))) {
- updateParams.gene = colorByGenotype.gene;
- updateParams.start = startUpdate;
- updateParams.end = endUpdate;
- }
- }
- updateParams.selected = decodeColorByGenotype(nextProps.colorBy, nextProps.geneLength);
- } else {
- updateParams.clearSelected = true;
- }
+ if (this.props.selectedCds !== nextProps.selectedCds) {
+ updateParams.selectedCds = nextProps.selectedCds;
+ }
+ if (this.props.showCounts !== nextProps.showCounts) {
+ updateParams.showCounts = nextProps.showCounts;
+ }
+ if (!equalArrays(this.props.selectedPositions, nextProps.selectedPositions)) {
+ updateParams.selectedPositions = nextProps.selectedPositions
}
if (Object.keys(updateParams).length) {
this.state.chart.update(updateParams);
@@ -264,20 +246,21 @@ class Entropy extends React.Component {
}
}
+ title() {
+ if (this.props.width<500) return "Diversity";
+ if (this.props.selectedCds===nucleotide_gene) {
+ return "Nucleotide diversity of genome"
+ }
+ return `Amino acid diversity of CDS ${this.props.selectedCds.name}`
+ }
+
render() {
- const { t } = this.props;
const styles = getStyles(this.props.width);
return (
-
-
+
+
+ {this.state.hovered ? this.state.hovered.tooltip(this.props.t) : null}
+
- {this.aaNtSwitch(styles)}
+ {this.resetLayout(styles)}
{this.entropyCountSwitch(styles)}
+
+
+
+
+
+ This panel displays the observed diversity across the current genome or a selected CDS
+ {` (currently you are viewing ${this.props.selectedCds===nucleotide_gene?'the genome':`CDS ${this.props.selectedCds.name}`}). `}
+
+ The lower axis shows the genome with +ve strand CDSs above and -ve strand CDSs below and
+ the grey overlay allows zooming in to a region.
+ The upper axis shows either the zoomed in region of the genome or a selected CDS;
+ in the latter case the coordinates represent amino acids.
+
+ Clicking on a CDS will select it and show it on the upper axis.
+ {` Clicking "Reset Layout" will always return you to viewing the entire genome.`}
+
-
-
- {
- mutType === "aa" ? t("Codon {{codon}} in protein {{protein}}", {codon: hovered.d.codon, protein: hovered.d.prot}) :
- hovered.d.prot ? `${t("Nucleotide {{nuc}}", {nuc: hovered.d.x})} (${t("Codon {{codon}} in protein {{protein}}", {codon: codonFromNuc, protein: hovered.d.prot})})` :
- t("Nucleotide {{nuc}}", {nuc: hovered.d.x})
- }
-
-
-
- {mutType === "aa" ? t("Nuc positions {{a}} to {{b}}", {a: nucPos-2, b: nucPos}) : ``}
-
-
-
- {isNegStrand === null ? `` : isNegStrand ? t("Negative strand") : t("Positive strand")}
-
-
-
- {showCounts ? `${t("Num mutations")}: ${hovered.d.y}` : `${t("entropy")}: ${hovered.d.y}`}
-
-
- {t("Click to color tree & map")}
-
-
+ {children}