added connection of settings (cpm ,log) to the backend

aertslab · Feb 19, 2018 · 22eff2b · 22eff2b
1 parent 5da6d18
commit 22eff2b
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 19 deletions.
diff --git a/scope-client/src/components/AppSidebar.jsx b/scope-client/src/components/AppSidebar.jsx
@@ -11,7 +11,8 @@ export default class AppSidebar extends Component {
 			uploadLoomFile: null,
 			uploadLoomModalOpened: false,
 			uploadLoomProgress: 0,
-			myLooms: []
+			myLooms: [],
+			settings: BackendAPI.getSettings()
 		}
 		this.updateMyLooms();
 	}
@@ -32,10 +33,10 @@ export default class AppSidebar extends Component {
 					<Menu.Header>SETTINGS</Menu.Header>
 					<Menu.Menu>
 						<Menu.Item>
-							<Checkbox toggle label="Log transform"/>
+							<Checkbox toggle label="Log transform" checked={this.state.settings.hasLogTransform} onChange={this.toggleLogTransform.bind(this)} />
 						</Menu.Item>
 						<Menu.Item>
-							<Checkbox toggle label="CPM normalize"/>
+							<Checkbox toggle label="CPM normalize" checked={this.state.settings.hasCpmNormalization} onChange={this.toggleCpmNormization.bind(this)} />
 						</Menu.Item>
 					</Menu.Menu>
 				</Menu.Item>
@@ -109,6 +110,16 @@ export default class AppSidebar extends Component {
 		this.setState({ uploadLoomModalOpened: !this.state.uploadLoomModalOpened })
 	}
 
+	toggleCpmNormization() {
+		BackendAPI.setSetting('hasCpmNormalization', !this.state.settings.hasCpmNormalization);
+		this.setState({settings: BackendAPI.getSettings()});
+	}
+
+	toggleLogTransform() {
+		BackendAPI.setSetting('hasLogTransform', !this.state.settings.hasLogTransform);
+		this.setState({settings: BackendAPI.getSettings()});
+	}
+
 	selectLoomFile(event, selection) {
 		selection.forEach((selected) => {
 			const [event, file] = selected;

diff --git a/scope-client/src/components/common/API.jsx b/scope-client/src/components/common/API.jsx
@@ -2,7 +2,10 @@ class API {
 	constructor() {
 		this.GBC = require("grpc-bus-websocket-client");
 		this.GBCConnection = new this.GBC("ws://localhost:8081/", 'src/proto/s.proto', { scope: { Main: 'localhost:50052' } }).connect();
+
 		this.activeLoom = null;
+		this.activeLoomChangeListeners = [];
+
 		this.features = {
 			'gene': {
 				0: {type: 'gene', value: ''},
@@ -16,9 +19,12 @@ class API {
 			}, 
 		};
 		this.featureChangeListeners = [];
-		this.activeLoomChangeListeners = [];
-		this.hasLogTranform = true;
-		this.hasCpmTranform = true;
+
+		this.settings = {
+			hasLogTransform: true,
+			hasCpmNormalization: true
+		}
+		this.settingsChangeListeners = [];
 	}
 
 	getConnection() {
@@ -58,6 +64,20 @@ class API {
 	}
 
 
+	getSettings() {
+		return this.settings;
+	}
+
+	setSetting(key, value) {
+		this.settings[key] = value;
+		this.settingsChangeListeners.forEach((listener) => {
+			listener(this.settings);
+		})
+	}
+
+	onSettingsChange(listener) {
+		this.settingsChangeListeners.push(listener);
+	}
 
 }
 

diff --git a/scope-client/src/components/common/TSNEViewer.jsx b/scope-client/src/components/common/TSNEViewer.jsx
@@ -33,6 +33,9 @@ export default class TSNEViewer extends Component {
         this.h = parseInt(this.props.height);
         this.maxn = 200000;
         this.texture = PIXI.Texture.fromImage("src/images/particle@2x.png");
+        BackendAPI.onSettingsChange(() => {
+            this.getFeatureColors(this.props.activeFeatures, this.props.loomFile);
+        })
     }
 
     render() {
@@ -98,26 +101,27 @@ export default class TSNEViewer extends Component {
 
     componentWillMount() {
         if (this.props.loomFile != null) {
-            this.getPoints(this.props.loomFile);
-        }
-        if (this.props.activeFeatures != null) {
-            this.getFeatureColors(this.props.activeFeatures);
+            this.getPoints(this.props.loomFile, () => {
+                this.getFeatureColors(this.props.activeFeatures, this.props.loomFile);
+            });
         }
     }
 
     componentWillReceiveProps(nextProps) {
         if (this.props.loomFile != nextProps.loomFile) {            
-            this.getPoints(nextProps.loomFile);
-        }
-        if (Object.is(this.props.activeFeatures, nextProps.activeFeatures)) {
-            this.getFeatureColors(nextProps.activeFeatures);
+            this.getPoints(nextProps.loomFile, () => {
+                this.getFeatureColors(nextProps.activeFeatures, nextProps.loomFile);
+            });
+        } else {
+            this.getFeatureColors(nextProps.activeFeatures, nextProps.loomFile);
         }
     }
 
     componentDidMount() {
         this.initGraphics();
     }
 
+
 /*
     shouldComponentUpdate = (nextProps, nextState) => {
         // Update the rendering only if feature is different
@@ -361,7 +365,8 @@ export default class TSNEViewer extends Component {
         //this.transformDataPoints();
     }
 
-    getPoints(loomFile) {
+    getPoints(loomFile, callback) {
+        console.log('loom:', loomFile);
         let query = {
             loomFilePath: loomFile
         };
@@ -377,6 +382,7 @@ export default class TSNEViewer extends Component {
                 this.setState({ coord: c })
                 this.endBenchmark()
                 this.initializeDataPoints()
+                callback()
             });
         });
     }
@@ -414,21 +420,23 @@ export default class TSNEViewer extends Component {
 
     }
 
-    getFeatureColors(features) {
+    getFeatureColors(features, loomFile) {
         this.startBenchmark("Getting point feature colors")
+        let settings = BackendAPI.getSettings();
         let query = {
-            loomFilePath: this.props.loomFile,
+            loomFilePath: loomFile,
             featureType: [features[0].type, features[1].type, features[2].type],
             feature: [features[0].value, features[1].value, features[2].value],
-            hasLogTranform: true, //this.props.logtransform
-            hasCpmTranform: true //, this.props.cpmnormalise
+            hasLogTranform: settings.hasLogTransform,
+            hasCpmTranform: settings.hasCpmNormalization
         };
         BackendAPI.getConnection().then((gbc) => {
             gbc.services.scope.Main.getCellColorByFeatures(query, (err, response) => {
                 if(response !== null) {
                     this.endBenchmark()
                     this.updateDataPoints(response.color)
                 } else {
+                    this.endBenchmark()
                     this.resetDataPoints()
                 }
             });