Sparkline view bugfixes

linnarsson-lab · Jan 23, 2016 · 201107e · 201107e
1 parent 66dd805
commit 201107e
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 19 deletions.
diff --git a/css/loom.css b/css/loom.css
@@ -47,7 +47,10 @@ code {
 a {
   cursor: pointer;
 }
-
+.sparkline-label {
+  vertical-align: super;
+  margin-left: 5px;
+}
 .scrollable-menu {
     height: auto;
     max-height: 200px;

diff --git a/js/heatmap-sidepanel.js b/js/heatmap-sidepanel.js
@@ -22,13 +22,13 @@ export class HeatmapSidepanel extends Component {
 							rowAttr: name
 						})}>{name}</a></li>;
 		});
-		var showOptionsForRows = ["Text", "Bars", "Quantitative", "Categorical"].map((name)=> {
+		var showOptionsForRows = ["Text", "Bars", "Heatmap", "Categorical"].map((name)=> {
 			return <li key={name}><a onClick={(event)=>dispatch({ 
 							type: 'SET_HEATMAP_PROPS', 
 							rowMode: name
 						})}>{name}</a></li>;
 		});
-		var showOptionsForCols = ["Text", "Bars", "Quantitative", "Categorical"].map((name)=> {
+		var showOptionsForCols = ["Text", "Bars", "Heatmap", "Categorical"].map((name)=> {
 			return <li key={name}><a onClick={(event)=>dispatch({ 
 							type: 'SET_HEATMAP_PROPS', 
 							colMode: name

diff --git a/js/landscape-sidepanel.js b/js/landscape-sidepanel.js
@@ -87,7 +87,7 @@ export class LandscapeSidepanel extends Component {
 							</button>
 							<ul className="dropdown-menu">
 								<li key="Categorical"><a onClick={(event)=>{this.props.onColorModeChange("Categorical");}}>Categorical</a></li>
-								<li key="Quantitative"><a onClick={(event)=>{this.props.onColorModeChange("Quantitative");}}>Quantitative</a></li>
+								<li key="Heatmap"><a onClick={(event)=>{this.props.onColorModeChange("Heatmap");}}>Quantitative</a></li>
 							</ul>
 						</div>
 						<div className="btn-group btn-block">

diff --git a/js/loom.js b/js/loom.js
@@ -19,7 +19,8 @@ class App extends Component {
   render() {
 	// Injected by connect() call:
 	const dispatch = this.props.dispatch;
-
+	const ds = this.props.dataState;
+
 	var view = <div></div>;
 
 	switch(this.props.viewState.view) {
@@ -53,15 +54,15 @@ class App extends Component {
 				onColorModeChange={(mode)=>dispatch({type: 'SET_LANDSCAPE_COLOR_MODE', mode: mode})}
 				onColorGeneChange={(gene)=>{
 					dispatch({type: 'SET_LANDSCAPE_COLOR_GENE', gene: gene});
-					dispatch(fetchGene(this.props.fileInfo.rowAttrs, gene));
+					dispatch(fetchGene(this.props.fileInfo.rowAttrs, gene, ds.genes));
 				}}
 				onXGeneChange={(gene)=>{
 					dispatch({type: 'SET_LANDSCAPE_X_GENE', gene: gene});
-					dispatch(fetchGene(this.props.fileInfo.rowAttrs, gene));
+					dispatch(fetchGene(this.props.fileInfo.rowAttrs, gene, ds.genes));
 				}}
 				onYGeneChange={(gene)=>{
 					dispatch({type: 'SET_LANDSCAPE_Y_GENE', gene: gene});
-					dispatch(fetchGene(this.props.fileInfo.rowAttrs, gene));
+					dispatch(fetchGene(this.props.fileInfo.rowAttrs, gene, ds.genes));
 				}}
 			/>
 			break;

diff --git a/js/reducers.js b/js/reducers.js
@@ -18,10 +18,10 @@ function viewState(state=initialViewState, action) {
 const initialSparklineState = {
 	type: "SET_SPARKLINE_PROPS",	// This will be set to the last action type
 
-	colAttr: "Tissue",
-	colMode: "Categorical",
+	colAttr: "CellID",
+	colMode: "Text",
 	orderByAttr: "(unordered)",	// meaning, original order
-	geneMode: "Quantitative",
+	geneMode: "Heatmap",
 	genes: ""
 }
 
@@ -40,8 +40,8 @@ const initialLandscapeState = {
 	xGene: "",
 	yCoordinate: "_tSNE2",
 	yGene: "",
-	colorAttr: "Tissue",
-	colorMode: "Categorical",
+	colorAttr: "CellID",
+	colorMode: "Heatmap",
 	colorGene: ""
 }
 

diff --git a/js/scatterplot.js b/js/scatterplot.js
@@ -46,7 +46,7 @@ export class Scatterplot extends React.Component {
 		var ymin = Math.min(...y);
 		var ymax = Math.max(...y);
 		var color = this.props.color;
-		var palette = (this.props.colorMode == "Quantitative" ? colors.solar9 : colors.category20);
+		var palette = (this.props.colorMode == "Heatmap" ? colors.solar9 : colors.category20);
 
 		// Calculate the color scale
 		if(color.length == 0) {

diff --git a/js/sparkline-sidepanel.js b/js/sparkline-sidepanel.js
@@ -36,7 +36,7 @@ export class SparklineSidepanel extends Component {
 				</li>
 			);
 		});
-		var optionsForCols = ["Text", "Bars", "Quantitative", "Categorical"].map((name)=> {
+		var optionsForCols = ["Text", "Bars", "Heatmap", "Categorical"].map((name)=> {
 			return (
 				<li key={name}>
 					<a onClick={(event)=>dispatch({ 
@@ -48,7 +48,7 @@ export class SparklineSidepanel extends Component {
 				</li>
 			);
 		});
-		var optionsForGenes = ["Bars", "Quantitative"].map((name)=> {
+		var optionsForGenes = ["Bars", "Heatmap"].map((name)=> {
 			return (
 				<li key={name}>
 					<a onClick={(event)=>dispatch({ 

diff --git a/js/sparkline-view.js b/js/sparkline-view.js
@@ -46,7 +46,7 @@ export class SparklineView extends Component {
 							screenRange={[0,600]}
 							mode={ss.geneMode}
 						/>
-						{gene}
+						<span className="sparkline-label">{gene}</span>
 					</div>
 				);	  			
 	  		} else {
@@ -85,7 +85,7 @@ export class SparklineView extends Component {
 						screenRange={[0,600]}
 						mode={ss.colMode}
 					/>
-					{ss.colAttr}
+					<span className="sparkline-label">{ss.colAttr}</span>
 					<div>
 						{geneSparklines}
 					</div>

diff --git a/js/sparkline.js b/js/sparkline.js
@@ -184,7 +184,7 @@ export class Sparkline extends React.Component {
 		if(this.props.mode == 'Bars') {
 			painter = new BarPainter(this.props.data, width/10);
 		}
-		if(this.props.mode == 'Quantitative') {
+		if(this.props.mode == 'Heatmap') {
 			painter = new QuantitativePainter();
 		}
 		painter.paint(context, width, height, Math.max(Math.floor(pixelsPer), 1), yoffset, data);