diff --git a/src/widget/widget-plot/plot.js b/src/widget/widget-plot/plot.js index 444d540..0b3d4a8 100644 --- a/src/widget/widget-plot/plot.js +++ b/src/widget/widget-plot/plot.js @@ -80,7 +80,7 @@ class Plot extends React.Component { } // check if data is invalid - if (props.data == null || props.data.length === 0 || props.data[0].length === 0) { + if (props.data == null || props.data.length === 0) { // create empty plot axes let xScale; let yScale; @@ -116,11 +116,14 @@ class Plot extends React.Component { // only show data in requested time let data = props.data; + let icDataset = data.find(function(element) { + return element !== undefined; + }) - const firstTimestamp = data[0][data[0].length - 1].x - (props.time + 1) * 1000; - if (data[0][0].x < firstTimestamp) { + const firstTimestamp = icDataset[icDataset.length - 1].x - (props.time + 1) * 1000; + if (icDataset[0].x < firstTimestamp) { // only show data in range (+100 ms) - const index = data[0].findIndex(value => value.x >= firstTimestamp - 100); + const index = icDataset.findIndex(value => value.x >= firstTimestamp - 100); data = data.map(values => values.slice(index)); } @@ -177,7 +180,11 @@ class Plot extends React.Component { if (this.props.yUseMinMax) { yRange = [this.props.yMin, this.props.yMax]; } else if (this.props.data.length > 0) { - yRange = [this.props.data[0][0].y, this.props.data[0][0].y]; + let icDataset = this.props.data.find(function(element) { + return element !== undefined; + }) + + yRange = [icDataset[0].y, icDataset[0].y]; this.props.data.forEach(values => { const range = extent(values, p => p.y); diff --git a/src/widget/widget.js b/src/widget/widget.js index a178a0e..743241b 100644 --- a/src/widget/widget.js +++ b/src/widget/widget.js @@ -69,14 +69,12 @@ class Widget extends React.Component { // TODO make sure that the signals are only the signals that belong to the scenario at hand let signals = SignalStore.getState(); let icIDs = []; - if ( props.data.signalIDs.length > 0){ - for (let i in props.data.signalIDs.length){ - let signal = signals.find(s => s.id === props.data.signalIDs[i]); - let config = configs.find(m => m.id === signal.configID); - icIDs[i] = config.icID; - } - } + for (let id of props.data.signalIDs){ + let signal = signals.find(s => s.id === id); + let config = configs.find(m => m.id === signal.configID); + icIDs[signal.id] = config.icID; + } return { icData: icData, @@ -138,7 +136,7 @@ class Widget extends React.Component { } else if (widget.type === 'Label') { return } else if (widget.type === 'PlotTable') { - return this.props.onWidgetStatusChange(w, this.props.index)} paused={this.props.paused} /> + return this.props.onWidgetStatusChange(w, this.props.index)} paused={this.props.paused} /> } else if (widget.type === 'Image') { return } else if (widget.type === 'Button') { diff --git a/src/widget/widgets/plot-table.js b/src/widget/widgets/plot-table.js index e16b7b1..b4b6f83 100644 --- a/src/widget/widgets/plot-table.js +++ b/src/widget/widgets/plot-table.js @@ -27,124 +27,85 @@ class WidgetPlotTable extends Component { super(props); this.state = { - preselectedSignals: [], signals: [] }; } componentDidUpdate(prevProps: Readonly

, prevState: Readonly, snapshot: SS): void { - if (this.props.config == null) { - return; - } - - // Update internal selected signals state with props (different array objects) - 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(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(this.props.widget.customProperties.preselectedSignals, this.props.widget.customProperties.signals); - this.setState({ signals: intersection }); - - this.updatePreselectedSignalsState(this.props); - } - } - - // Perform the intersection of the lists, alternatively could be done with Sets ensuring unique values - computeIntersection(preselectedSignals, selectedSignals) { - return preselectedSignals.filter( s => selectedSignals.includes(s)); - } - - updatePreselectedSignalsState(props) { - // Create checkboxes using the signal indices from component config - if(props.config.outputMapping){ - const preselectedSignals = props.config.outputMapping.reduce( - // Loop through component config signals - (accum, signal, signal_index) => { - // Append them if they belong to the current selected type - if (props.widget.customProperties.preselectedSignals.indexOf(signal_index) > -1) { - accum.push( - { - index: signal_index, - name: signal.name, - type: signal.type - } - ) + // Identify if there was a change in the selected signals + if (JSON.stringify(prevProps.widget.signalIDs) !== JSON.stringify(this.props.widget.signalIDs) + || this.state.signals.length === 0) { + // Update the currently selected signals + let intersection = [] + let signalID, sig; + for (signalID of this.props.widget.signalIDs) { + for (sig of this.props.signals) { + if (signalID === sig.id) { + intersection.push(sig); } - return accum; - }, []); - - this.setState({ preselectedSignals }); + } } + + this.setState({signals: intersection}); + } } updateSignalSelection(signal_index, checked) { // Update the selected signals and propagate to parent component var new_widget = Object.assign({}, this.props.widget, { - signals: checked? this.state.signals.concat(signal_index) : this.state.signals.filter( (idx) => idx !== signal_index ) + signals: checked ? this.state.signals.concat(signal_index) : this.state.signals.filter((idx) => idx !== signal_index) }); this.props.onWidgetChange(new_widget); } render() { + let checkBoxes = []; let icData = []; let legendSignals = []; - // Data passed to plot - if (this.props.config) { + let showLegend = false; - const ic = this.props.config.icID; + if (this.state.signals.length > 0) { - if (this.props.data[ic] != null && this.props.data[ic].output != null && this.props.data[ic].output.values != null) { - icData = this.props.data[ic].output.values.filter((values, index) => ( - this.props.widget.customProperties.signals.findIndex(value => value === index) !== -1 - )); - } + showLegend = true; + + // get data of preselected signals + let signal; + for (signal of this.state.signals) { + + // determine ID of infrastructure component related to signal (via config) + let icID = this.props.icIDs[signal.id] + + if (this.props.data[icID] != null && this.props.data[icID].output != null && this.props.data[icID].output.values != null) { + if (this.props.data[icID].output.values[signal.index] !== undefined){ + icData.push(this.props.data[icID].output.values[signal.index]); + } + } + } - if (this.state.preselectedSignals && this.state.preselectedSignals.length > 0) { // Create checkboxes using the signal indices from component config - checkBoxes = this.state.preselectedSignals.map( (signal) => { - var checked = this.state.signals.indexOf(signal.index) > -1; - var chkBxClasses = classNames({ + checkBoxes = this.state.signals.map((signal) => { + let checked = this.state.signals.indexOf(signal.index) > -1; + let chkBxClasses = classNames({ 'btn': true, 'btn-default': true, 'active': checked }); - return this.updateSignalSelection(signal.index, e.target.checked) } > { signal.name } + return this.updateSignalSelection(signal.index, e.target.checked)}> {signal.name} }); } - // Prepare an array with the signals to show in the legend - legendSignals = this.state.preselectedSignals.reduce( (accum, signal, i) => { - if (this.state.signals.includes(signal.index)) { - accum.push({ - index: signal.index, - name: signal.name, - type: signal.type - }); - } - return accum; - }, []);} - - let showLegend = false; - if(legendSignals !== []){ - showLegend = true; - } - return (

- { checkBoxes.length > 0 ? ( + {checkBoxes.length > 0 ? ( - { checkBoxes } + {checkBoxes} - ) : ( No signal has been pre-selected. ) + ) : (No signal has been pre-selected.) }
@@ -162,13 +123,12 @@ class WidgetPlotTable extends Component { />
- {showLegend? ( - ) : (
) + {showLegend ? ( + ) : (
) }
); } } - export default WidgetPlotTable;