From 22eff2baaf9fdb90a2729e4c5b61241ba0d02d8e Mon Sep 17 00:00:00 2001 From: Lukasz Kreft Date: Mon, 19 Feb 2018 11:33:52 +0100 Subject: [PATCH] added connection of settings (cpm ,log) to the backend --- scope-client/src/components/AppSidebar.jsx | 17 ++++++++-- scope-client/src/components/common/API.jsx | 26 ++++++++++++-- .../src/components/common/TSNEViewer.jsx | 34 ++++++++++++------- 3 files changed, 58 insertions(+), 19 deletions(-) diff --git a/scope-client/src/components/AppSidebar.jsx b/scope-client/src/components/AppSidebar.jsx index 3ae6c139..b3c8b19c 100644 --- 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 { SETTINGS - + - + @@ -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 index d61d79e4..976477c9 100644 --- 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 index 682c450f..abdc7d60 100644 --- 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,19 +101,19 @@ 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); } } @@ -118,6 +121,7 @@ export default class TSNEViewer extends Component { 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,14 +420,15 @@ 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) => { @@ -429,6 +436,7 @@ export default class TSNEViewer extends Component { this.endBenchmark() this.updateDataPoints(response.color) } else { + this.endBenchmark() this.resetDataPoints() } });