, prevState: Readonly, snapshot: SS): void {
+
// if token stored locally, request user
- if (nextState.token == null) {
+ if (this.state.token == null) {
const token = localStorage.getItem('token');
const currentUser = localStorage.getItem('currentUser');
- if (token != null && token !== '' && nextState.currentUser == null) {
+ if (token != null && token !== '' && this.state.currentUser == null) {
AppDispatcher.dispatch({
type: 'users/logged-in',
token: token,
@@ -65,12 +66,13 @@ class Login extends Component {
}
} else {
// check if logged in
- if (nextState.currentUser != null) {
+ if (this.state.currentUser != null) {
// save login in local storage
- localStorage.setItem('token', nextState.token);
- localStorage.setItem('currentUser', JSON.stringify(nextState.currentUser));
+ localStorage.setItem('token', this.state.token);
+ localStorage.setItem('currentUser', JSON.stringify(this.state.currentUser));
}
}
+
}
render() {
diff --git a/src/user/logout.js b/src/user/logout.js
index 2e19b43..dd1eafc 100644
--- a/src/user/logout.js
+++ b/src/user/logout.js
@@ -25,7 +25,7 @@ import { Redirect } from 'react-router-dom';
import AppDispatcher from '../common/app-dispatcher';
class Logout extends React.Component {
- componentWillMount() {
+ componentDidMount() {
AppDispatcher.dispatch({
type: 'users/logout'
});
diff --git a/src/widget/edit-widget-aspect-control.js b/src/widget/edit-widget-aspect-control.js
index 59af823..4152dbb 100644
--- a/src/widget/edit-widget-aspect-control.js
+++ b/src/widget/edit-widget-aspect-control.js
@@ -35,8 +35,10 @@ class EditWidgetAspectControl extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return{
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-checkbox-control.js b/src/widget/edit-widget-checkbox-control.js
index 41c17c6..66c8c57 100644
--- a/src/widget/edit-widget-checkbox-control.js
+++ b/src/widget/edit-widget-checkbox-control.js
@@ -35,8 +35,10 @@ class EditWidgetCheckboxControl extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return{
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-color-control.js b/src/widget/edit-widget-color-control.js
index cadafa8..7b9443b 100644
--- a/src/widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget-color-control.js
@@ -49,9 +49,10 @@ class EditWidgetColorControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-color-zones-control.js b/src/widget/edit-widget-color-zones-control.js
index 3e64684..741d43f 100644
--- a/src/widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget-color-zones-control.js
@@ -41,8 +41,10 @@ class EditWidgetColorZonesControl extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
addZone = () => {
diff --git a/src/widget/edit-widget-html-content.js b/src/widget/edit-widget-html-content.js
index e11fd60..f931ba9 100644
--- a/src/widget/edit-widget-html-content.js
+++ b/src/widget/edit-widget-html-content.js
@@ -36,9 +36,10 @@ class EditWidgetHTMLContent extends React.Component {
event.stopPropagation();
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-image-control.js b/src/widget/edit-widget-image-control.js
index 501e5eb..fe0c433 100644
--- a/src/widget/edit-widget-image-control.js
+++ b/src/widget/edit-widget-image-control.js
@@ -39,8 +39,10 @@ class EditImageWidgetControl extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
startFileUpload = () => {
diff --git a/src/widget/edit-widget-min-max-control.js b/src/widget/edit-widget-min-max-control.js
index b45aac8..e21530f 100644
--- a/src/widget/edit-widget-min-max-control.js
+++ b/src/widget/edit-widget-min-max-control.js
@@ -35,8 +35,10 @@ class EditWidgetMinMaxControl extends React.Component {
}
}
- componentWillReceiveProps(nextProps) {
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return{
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-number-control.js b/src/widget/edit-widget-number-control.js
index e937aa8..d86722f 100644
--- a/src/widget/edit-widget-number-control.js
+++ b/src/widget/edit-widget-number-control.js
@@ -33,9 +33,10 @@ class EditWidgetNumberControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return{
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-orientation.js b/src/widget/edit-widget-orientation.js
index 2da449d..248f1c7 100644
--- a/src/widget/edit-widget-orientation.js
+++ b/src/widget/edit-widget-orientation.js
@@ -35,9 +35,10 @@ class EditWidgetOrientation extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
handleOrientationChange(orientation) {
diff --git a/src/widget/edit-widget-parameters-control.js b/src/widget/edit-widget-parameters-control.js
index 1831a5c..8fc37f8 100644
--- a/src/widget/edit-widget-parameters-control.js
+++ b/src/widget/edit-widget-parameters-control.js
@@ -32,9 +32,10 @@ class EditWidgetParametersControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
handleChange(value) {
diff --git a/src/widget/edit-widget-signal-control.js b/src/widget/edit-widget-signal-control.js
index 18a180f..1f01bb7 100644
--- a/src/widget/edit-widget-signal-control.js
+++ b/src/widget/edit-widget-signal-control.js
@@ -33,9 +33,10 @@ class EditWidgetSignalControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-signals-control.js b/src/widget/edit-widget-signals-control.js
index 19ca43b..947e8fc 100644
--- a/src/widget/edit-widget-signals-control.js
+++ b/src/widget/edit-widget-signals-control.js
@@ -33,9 +33,10 @@ class EditWidgetSignalsControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
handleSignalChange(checked, index) {
diff --git a/src/widget/edit-widget-text-control.js b/src/widget/edit-widget-text-control.js
index c94887f..c0fc069 100644
--- a/src/widget/edit-widget-text-control.js
+++ b/src/widget/edit-widget-text-control.js
@@ -31,9 +31,10 @@ class EditWidgetTextControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- // Update state's widget with props
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return {
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/edit-widget-time-control.js b/src/widget/edit-widget-time-control.js
index cd3d372..736dc70 100644
--- a/src/widget/edit-widget-time-control.js
+++ b/src/widget/edit-widget-time-control.js
@@ -33,8 +33,10 @@ class EditWidgetTimeControl extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- this.setState({ widget: nextProps.widget });
+ static getDerivedStateFromProps(props, state){
+ return{
+ widget: props.widget
+ };
}
render() {
diff --git a/src/widget/widget-plot/plot.js b/src/widget/widget-plot/plot.js
index 044598d..299b8f9 100644
--- a/src/widget/widget-plot/plot.js
+++ b/src/widget/widget-plot/plot.js
@@ -77,26 +77,26 @@ class Plot extends React.Component {
this.removeInterval();
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.time !== this.props.time) {
+ componentDidUpdate(prevProps: Readonly
, prevState: Readonly, snapshot: SS): void {
+ if (prevProps.time !== this.props.time) {
this.createInterval();
}
let labelMargin = 0;
- if (nextProps.yLabel !== '') {
+ if (this.props.yLabel !== '') {
labelMargin = 30;
}
// check if data is invalid
- if (nextProps.data == null || nextProps.data.length === 0 || nextProps.data[0].length === 0) {
+ if (this.props.data == null || this.props.data.length === 0 || this.props.data[0].length === 0) {
// create empty plot axes
- const xScale = scaleTime().domain([Date.now() - nextProps.time * 1000, Date.now()]).range([0, nextProps.width - leftMargin - labelMargin - rightMargin]);
+ const xScale = scaleTime().domain([Date.now() - this.props.time * 1000, Date.now()]).range([0, this.props.width - leftMargin - labelMargin - rightMargin]);
let yScale;
- if (nextProps.yUseMinMax) {
- yScale = scaleLinear().domain([nextProps.yMin, nextProps.yMax]).range([nextProps.height + topMargin - bottomMargin, topMargin]);
+ if (this.props.yUseMinMax) {
+ yScale = scaleLinear().domain([this.props.yMin, this.props.yMax]).range([this.props.height + topMargin - bottomMargin, topMargin]);
} else {
- yScale = scaleLinear().domain([0, 10]).range([nextProps.height + topMargin - bottomMargin, topMargin]);
+ yScale = scaleLinear().domain([0, 10]).range([this.props.height + topMargin - bottomMargin, topMargin]);
}
const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
@@ -106,17 +106,20 @@ class Plot extends React.Component {
return;
}
- // only show data in requested time
- let data = nextProps.data;
+ // check if requested time frame has changed
+ if(this.props.time !== prevProps.time) {
+ // only show data in requested time
+ let data = this.props.data;
- const firstTimestamp = data[0][data[0].length - 1].x - (nextProps.time + 1) * 1000;
- if (data[0][0].x < firstTimestamp) {
- // only show data in range (+100 ms)
- const index = data[0].findIndex(value => value.x >= firstTimestamp - 100);
- data = data.map(values => values.slice(index));
+ const firstTimestamp = data[0][data[0].length - 1].x - (this.props.time + 1) * 1000;
+ if (data[0][0].x < firstTimestamp) {
+ // only show data in range (+100 ms)
+ const index = data[0].findIndex(value => value.x >= firstTimestamp - 100);
+ data = data.map(values => values.slice(index));
+ }
+
+ this.setState({data, labelMargin});
}
-
- this.setState({ data, labelMargin });
}
createInterval() {
diff --git a/src/widget/widget.js b/src/widget/widget.js
index 41de002..b0a8ee5 100644
--- a/src/widget/widget.js
+++ b/src/widget/widget.js
@@ -78,7 +78,7 @@ class Widget extends React.Component {
};
}
- componentWillMount() {
+ componentDidMount() {
if (this.state.sessionToken == null) {
return;
}
@@ -125,7 +125,7 @@ class Widget extends React.Component {
simulationModel = model;
}
-
+
if (widget.type === 'CustomAction') {
return
, prevState: Readonly, snapshot: SS): void {
+ if(prevState.minValue !== this.state.minValue){
+ this.gauge.setMinValue(this.state.minValue);
+ }
+ if(prevState.maxValue !== this.state.maxValue){
+ this.gauge.maxValue = this.state.maxValue
}
- const simulator = nextProps.simulationModel.simulator;
+ // update gauge's value
+ if(prevState.value !== this.state.value){
+ this.gauge.set(this.state.value)
+ }
+
+ // update labels
+ if(prevState.minValue !== this.state.minValue || prevState.maxValue !== this.state.maxValue){
+ this.updateLabels(this.state.minValue, this.state.maxValue)
+ }
+
+ }
+
+ static getDerivedStateFromProps(props, state){
+ if (props.simulationModel == null) {
+ return{value:0};
+ }
+
+ const simulator = props.simulationModel.simulator;
// update value
- if (nextProps.data == null || nextProps.data[simulator] == null
- || nextProps.data[simulator].output == null
- || nextProps.data[simulator].output.values == null
- || nextProps.data[simulator].output.values.length === 0
- || nextProps.data[simulator].output.values[0].length === 0) {
- this.setState({ value: 0 });
- return;
+ if (props.data == null
+ || props.data[simulator] == null
+ || props.data[simulator].output == null
+ || props.data[simulator].output.values == null
+ || props.data[simulator].output.values.length === 0
+ || props.data[simulator].output.values[0].length === 0) {
+ return{value:0};
}
+ // memorize if min or max value is updated
+ let updateValue = false;
+ let updateMinValue = false;
+ let updateMaxValue = false;
+
// check if value has changed
- const signal = nextProps.data[simulator].output.values[nextProps.widget.customProperties.signal];
+ const signal = props.data[simulator].output.values[props.widget.customProperties.signal];
// Take just 3 decimal positions
// Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
if (signal != null) {
const value = Math.round(signal[signal.length - 1].y * 1e3) / 1e3;
- if (this.state.value !== value && value != null) {
- this.setState({ value });
+ let minValue = null;
+ let maxValue = null;
+ if (state.value !== value && value != null) {
+ //value has changed
+ updateValue = true;
// update min-max if needed
let updateLabels = false;
- let minValue = this.state.minValue;
- let maxValue = this.state.maxValue;
+
+ minValue = state.minValue;
+ maxValue = state.maxValue;
if (minValue == null) {
minValue = value - 0.5;
updateLabels = true;
-
- this.setState({ minValue });
- this.gauge.setMinValue(minValue);
+ updateMinValue = true;
}
if (maxValue == null) {
maxValue = value + 0.5;
updateLabels = true;
-
- this.setState({ maxValue });
- this.gauge.maxValue = maxValue;
+ updateMaxValue = true;
}
- if (nextProps.widget.customProperties.valueUseMinMax) {
- if (this.state.minValue > nextProps.widget.customProperties.valueMin) {
- minValue = nextProps.widget.customProperties.valueMin;
-
- this.setState({ minValue });
- this.gauge.setMinValue(minValue);
-
+ if (props.widget.customProperties.valueUseMinMax) {
+ if (state.minValue > props.widget.customProperties.valueMin) {
+ minValue = props.widget.customProperties.valueMin;
+ updateMinValue = true;
updateLabels = true;
}
- if (this.state.maxValue < nextProps.widget.customProperties.valueMax) {
- maxValue = nextProps.widget.customProperties.valueMax;
-
- this.setState({ maxValue });
- this.gauge.maxValue = maxValue;
-
+ if (state.maxValue < props.widget.customProperties.valueMax) {
+ maxValue = props.widget.customProperties.valueMax;
+ updateMaxValue = true;
updateLabels = true;
}
}
if (updateLabels === false) {
// check if min/max changed
- if (minValue > this.gauge.minValue) {
- minValue = this.gauge.minValue;
- updateLabels = true;
-
- this.setState({ minValue });
+ if (minValue > state.gauge.minValue) {
+ minValue = state.gauge.minValue;
+ updateMinValue = true;
}
- if (maxValue < this.gauge.maxValue) {
- maxValue = this.gauge.maxValue;
- updateLabels = true;
-
- this.setState({ maxValue });
+ if (maxValue < state.gauge.maxValue) {
+ maxValue = state.gauge.maxValue;
+ updateMaxValue = true;
}
}
-
- if (updateLabels) {
- this.updateLabels(minValue, maxValue);
- }
-
- // update gauge's value
- this.gauge.set(value);
}
- }
+
+ // prepare returned state
+ let returnState = null;
+ if(updateValue === true){
+ returnState["value"] = value;
+ }
+ if(updateMinValue === true){
+ returnState["minValue"] = minValue;
+ }
+ if(updateMaxValue === true){
+ returnState["maxValue"] = maxValue;
+ }
+
+ return returnState
+ } // if there is a signal
+
+
}
updateLabels(minValue, maxValue, force) {
diff --git a/src/widget/widgets/image.js b/src/widget/widgets/image.js
index a38c0b7..2427084 100644
--- a/src/widget/widgets/image.js
+++ b/src/widget/widgets/image.js
@@ -25,14 +25,15 @@ import AppDispatcher from '../../common/app-dispatcher';
import config from '../../config';
class WidgetImage extends React.Component {
- componentWillReceiveProps(nextProps) {
+
+ componentDidMount() {
// Query the image referenced by the widget
- let widgetFile = nextProps.widget.customProperties.file;
- if (widgetFile && !nextProps.files.find(file => file._id === widgetFile)) {
+ let widgetFile = this.props.widget.customProperties.file;
+ if (widgetFile && !this.props.files.find(file => file.id === widgetFile)) {
AppDispatcher.dispatch({
type: 'files/start-load',
data: widgetFile,
- token: nextProps.token
+ token: this.props.token
});
}
}
diff --git a/src/widget/widgets/input.js b/src/widget/widgets/input.js
index 464f9b0..dfd1318 100644
--- a/src/widget/widgets/input.js
+++ b/src/widget/widgets/input.js
@@ -34,24 +34,25 @@ class WidgetInput extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.simulationModel == null) {
- return;
+ static getDerivedStateFromProps(props, state){
+ if (props.simulationModel == null) {
+ return null;
}
+ let returnState = null;
// Update value
- if (nextProps.widget.customProperties.default_value && this.state.value === undefined) {
- this.setState({
- value: nextProps.widget.customProperties.default_value
- });
+ if (props.widget.customProperties.default_value && this.state.value === undefined) {
+ returnState["value"] = props.widget.customProperties.default_value;
}
// Update unit
- if (nextProps.widget.customProperties.simulationModel && nextProps.simulationModel.inputMapping && this.state.unit !== nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type) {
- this.setState({
- unit: nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type
- });
+ if (props.widget.customProperties.simulationModel
+ && props.simulationModel.inputMapping
+ && state.unit !== props.simulationModel.inputMapping[props.widget.customProperties.signal].type) {
+ returnState["unit"] = props.simulationModel.inputMapping[props.widget.customProperties.signal].type;
}
+
+ return returnState;
}
valueIsChanging(newValue) {
diff --git a/src/widget/widgets/lamp.js b/src/widget/widgets/lamp.js
index 8ca0bcc..88845cd 100644
--- a/src/widget/widgets/lamp.js
+++ b/src/widget/widgets/lamp.js
@@ -33,25 +33,28 @@ class WidgetLamp extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.simulationModel == null) {
- this.setState({ value: '' });
- return;
+ static getDerivedStateFromProps(props, state){
+ if (props.simulationModel == null) {
+ return{ value: ''};
}
- const simulator = nextProps.simulationModel.simulator;
+ const simulator = props.simulationModel.simulator;
// update value
- if (nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].output == null || nextProps.data[simulator].output.values == null) {
- this.setState({ value: '' });
- return;
+ if (props.data == null
+ || props.data[simulator] == null
+ || props.data[simulator].output == null
+ || props.data[simulator].output.values == null) {
+ return{value:''};
}
// check if value has changed
- const signal = nextProps.data[simulator].output.values[nextProps.widget.customProperties.signal];
- if (signal != null && this.state.value !== signal[signal.length - 1].y) {
- this.setState({ value: signal[signal.length - 1].y });
+ const signal = props.data[simulator].output.values[props.widget.customProperties.signal];
+ if (signal != null && state.value !== signal[signal.length - 1].y) {
+ return { value: signal[signal.length - 1].y };
}
+
+ return null;
}
render() {
diff --git a/src/widget/widgets/plot-table.js b/src/widget/widgets/plot-table.js
index 7cd0cbf..397189e 100644
--- a/src/widget/widgets/plot-table.js
+++ b/src/widget/widgets/plot-table.js
@@ -36,25 +36,25 @@ class WidgetPlotTable extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.simulationModel == null) {
+ componentDidUpdate(prevProps: Readonly
, prevState: Readonly, snapshot: SS): void {
+ if (this.props.simulationModel == null) {
return;
}
// Update internal selected signals state with props (different array objects)
- if (this.props.widget.customProperties.signals !== nextProps.widget.customProperties.signals) {
- this.setState( {signals: nextProps.widget.customProperties.signals});
+ if (prevProps.widget.customProperties.signals !== this.props.widget.customProperties.signals) {
+ this.setState( {signals: this.props.widget.customProperties.signals});
}
// Identify if there was a change in the preselected signals
- if (JSON.stringify(nextProps.widget.customProperties.preselectedSignals) !== JSON.stringify(this.props.widget.customProperties.preselectedSignals) || this.state.preselectedSignals.length === 0) {
+ if (JSON.stringify(prevProps.widget.customProperties.preselectedSignals) !== JSON.stringify(this.props.widget.customProperties.preselectedSignals)
+ || this.state.preselectedSignals.length === 0) {
// Update the currently selected signals by intersecting with the preselected signalsWidget
// Do the same with the plot values
- var intersection = this.computeIntersection(nextProps.widget.customProperties.preselectedSignals, nextProps.widget.customProperties.signals);
+ var intersection = this.computeIntersection(this.props.widget.customProperties.preselectedSignals, this.props.widget.customProperties.signals);
this.setState({ signals: intersection });
- this.updatePreselectedSignalsState(nextProps);
- return;
+ this.updatePreselectedSignalsState(this.props);
}
}
@@ -63,14 +63,14 @@ class WidgetPlotTable extends Component {
return preselectedSignals.filter( s => selectedSignals.includes(s));
}
- updatePreselectedSignalsState(nextProps) {
+ updatePreselectedSignalsState(props) {
// Create checkboxes using the signal indices from simulation model
- if(nextProps.simulationModel.outputMapping){
- const preselectedSignals = nextProps.simulationModel.outputMapping.reduce(
+ if(props.simulationModel.outputMapping){
+ const preselectedSignals = props.simulationModel.outputMapping.reduce(
// Loop through simulation model signals
(accum, model_signal, signal_index) => {
// Append them if they belong to the current selected type
- if (nextProps.widget.customProperties.preselectedSignals.indexOf(signal_index) > -1) {
+ if (props.widget.customProperties.preselectedSignals.indexOf(signal_index) > -1) {
accum.push(
{
index: signal_index,
@@ -81,7 +81,7 @@ class WidgetPlotTable extends Component {
}
return accum;
}, []);
-
+
this.setState({ preselectedSignals });
}
}
diff --git a/src/widget/widgets/plot.js b/src/widget/widgets/plot.js
index 7a2425d..08e023a 100644
--- a/src/widget/widgets/plot.js
+++ b/src/widget/widgets/plot.js
@@ -34,24 +34,28 @@ class WidgetPlot extends React.Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.simulationModel == null) {
- this.setState({ data: [], legend: [] });
- return;
+
+ static getDerivedStateFromProps(props, state){
+
+ if (props.simulationModel == null) {
+ return{
+ data: [],
+ legend: [],
+ };
}
- const simulator = nextProps.simulationModel.simulator;
+ const simulator = props.simulationModel.simulator;
// Proceed if a simulation with models and a simulator are available
- if (simulator && nextProps.data[simulator] != null && nextProps.data[simulator] != null && nextProps.data[simulator].output != null && nextProps.data[simulator].output.values != null) {
- const chosenSignals = nextProps.widget.customProperties.signals;
+ if (simulator && props.data[simulator] != null && props.data[simulator] != null && props.data[simulator].output != null && props.data[simulator].output.values != null) {
+ const chosenSignals = props.widget.customProperties.signals;
- const data = nextProps.data[simulator].output.values.filter((values, index) => (
- nextProps.widget.customProperties.signals.findIndex(value => value === index) !== -1
+ const data = props.data[simulator].output.values.filter((values, index) => (
+ props.widget.customProperties.signals.findIndex(value => value === index) !== -1
));
// Query the signals that will be displayed in the legend
- const legend = nextProps.simulationModel.outputMapping.reduce( (accum, model_signal, signal_index) => {
+ const legend = props.simulationModel.outputMapping.reduce( (accum, model_signal, signal_index) => {
if (chosenSignals.includes(signal_index)) {
accum.push({ index: signal_index, name: model_signal.name, type: model_signal.type });
}
@@ -59,10 +63,17 @@ class WidgetPlot extends React.Component {
return accum;
}, []);
- this.setState({ data, legend });
+ return{
+ data: data,
+ legend: legend,
+ };
} else {
- this.setState({ data: [], legend: [] });
+ return{
+ data: [],
+ legend: [],
+ };
}
+
}
render() {
diff --git a/src/widget/widgets/slider.js b/src/widget/widgets/slider.js
index b536edd..602ad92 100644
--- a/src/widget/widgets/slider.js
+++ b/src/widget/widgets/slider.js
@@ -40,32 +40,42 @@ class WidgetSlider extends Component {
this.state = {
unit: 'bla',
-
+
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.simulationModel == null) {
- return;
+ static getDerivedStateFromProps(props, state){
+ if (props.simulationModel == null) {
+ return null;
}
+ let returnState = {};
+
// Update value
- if (nextProps.widget.customProperties.default_value && this.state.value === undefined) {
- this.setState({
- value: nextProps.widget.customProperties.default_value,
- });
+ if (props.widget.customProperties.default_value && state.value === undefined) {
+ returnState["value"] = props.widget.customProperties.default_value;
}
// Update unit
- if (nextProps.widget.customProperties.simulationModel && nextProps.simulationModel.inputMapping && this.state.unit !== nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type) {
- this.setState({
- unit: nextProps.simulationModel.inputMapping[nextProps.widget.customProperties.signal].type
- });
+ if (props.widget.customProperties.simulationModel
+ && props.simulationModel.inputMapping &&
+ state.unit !== props.simulationModel.inputMapping[props.widget.customProperties.signal].type) {
+ returnState["unit"] = props.simulationModel.inputMapping[props.widget.customProperties.signal].type;
}
+ if (returnState !== {}){
+ return returnState;
+ }
+ else{
+ return null;
+ }
+
+ }
+
+ componentDidUpdate(prevProps: Readonly
, prevState: Readonly, snapshot: SS): void {
// Check if the orientation changed, update the size if it did
- if (this.props.widget.customProperties.orientation !== nextProps.widget.customProperties.orientation) {
- let baseWidget = nextProps.widget;
+ if (this.props.widget.customProperties.orientation !== prevProps.widget.customProperties.orientation) {
+ let baseWidget = this.props.widget;
// Exchange dimensions and constraints
let newWidget = Object.assign({}, baseWidget, {
@@ -77,8 +87,9 @@ class WidgetSlider extends Component {
maxHeight: baseWidget.customProperties.maxWidth
});
- nextProps.onWidgetChange(newWidget);
+ this.props.onWidgetChange(newWidget);
}
+
}
valueIsChanging(newValue) {
@@ -141,4 +152,4 @@ export default WidgetSlider;
{ fields.value }
{ this.props.widget.customProperties.showUnit && fields.unit }
, prevState: Readonly, snapshot: SS): void {
+ const file = this.props.files.find(file => file._id === this.props.widget.customProperties.file);
// Ensure model is requested only once or a different was selected
- if (this.props.widget.customProperties.file !== nextProps.widget.customProperties.file || (this.state.dashboardState === 'initial' && file)) {
+ if (prevProps.widget.customProperties.file !== this.props.widget.customProperties.file
+ || (prevState.dashboardState === 'initial' && file)) {
+
this.setState({'dashboardState': 'loading' });
if (file) {
fetch(new Request('/' + config.publicPathBase + file.path))
@@ -141,7 +143,7 @@ class WidgetTopology extends React.Component {
}
} else {
// No file has been selected
- if (!nextProps.widget.customProperties.file) {
+ if (!this.props.widget.customProperties.file) {
this.setState({
'dashboardState': 'show_message',
'message': 'Select a topology model first.'});
diff --git a/src/widget/widgets/value.js b/src/widget/widgets/value.js
index 49393db..6c9d32b 100644
--- a/src/widget/widgets/value.js
+++ b/src/widget/widgets/value.js
@@ -32,28 +32,31 @@ class WidgetValue extends Component {
};
}
- componentWillReceiveProps(nextProps) {
- if (nextProps.simulationModel == null) {
- this.setState({ value: '' });
- return;
+ static getDerivedStateFromProps(props, state){
+ if (props.simulationModel == null) {
+ return{ value: '' };
}
- const simulator = nextProps.simulationModel.simulator;
+ const simulator = props.simulationModel.simulator;
// update value
- if (nextProps.data == null || nextProps.data[simulator] == null || nextProps.data[simulator].output == null || nextProps.data[simulator].output.values == null) {
- this.setState({ value: '' });
- return;
+ if (props.data == null || props.data[simulator] == null || props.data[simulator].output == null || props.data[simulator].output.values == null) {
+ return{ value: '' };
}
- //const unit = nextProps.simulationModel.outputMapping[nextProps.widget.customProperties.signal].type;
+ // TODO fixme (unit)
+ //const unit = props.simulationModel.outputMapping[props.widget.customProperties.signal].type;
const unit = 42;
// check if value has changed
- const signal = nextProps.data[simulator].output.values[nextProps.widget.customProperties.signal];
- if (signal != null && this.state.value !== signal[signal.length - 1].y) {
- this.setState({ value: signal[signal.length - 1].y, unit });
+ const signal = props.data[simulator].output.values[props.widget.customProperties.signal];
+ if (signal != null && state.value !== signal[signal.length - 1].y) {
+ return {
+ value: signal[signal.length - 1].y,
+ unit: unit,
+ };
}
+
}
render() {