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()
}
});