diff --git a/src/widget/widgets/topology.js b/src/widget/widgets/topology.js index 8aad399..1eb64fc 100644 --- a/src/widget/widgets/topology.js +++ b/src/widget/widgets/topology.js @@ -65,19 +65,12 @@ function show(element) { if(element !== undefined) { element.style.visibility = 'inherit'; } - else{ - console.log("MouseOver, show, element undefined.") - } } function hide(element) { if (element !== undefined) { element.style.visibility = 'hidden'; - } else { - console.log("MouseLeave, hide, element undefined.") } - - } // De-initialize functions @@ -91,25 +84,45 @@ class WidgetTopology extends React.Component { super(props); this.svgElem = React.createRef(); this.Viewer = null; - this.dashboardState = 'initial' - this.message = '' - let file = this.props.files.find(file => file.id === parseInt(this.props.widget.customProperties.file, 10)); this.state = { - file: file + file: this.props.files.find(file => file.id === parseInt(this.props.widget.customProperties.file, 10)), + dashboardState: 'initial', + message: '' }; } static getDerivedStateFromProps(props, state){ + // find the selected file of the widget, is undefined if no file is selected let file = props.files.find(file => file.id === parseInt(props.widget.customProperties.file, 10)); - if (state.file === undefined || state.file.id !== file.id) { - return{ - file: file - }; + let dashboardState = state.dashboardState; + let message = state.message; + + if(file === undefined){ + dashboardState = 'show_message'; + message = 'Select a topology model.' + } else if (!file.hasOwnProperty('data') && dashboardState === 'show_message'){ + // data of file is missing, start download + dashboardState = 'loading'; + message = ''; + AppDispatcher.dispatch({ + type: 'files/start-download', + data: file.id, + token: props.token + }); + } else if (file.hasOwnProperty('data') && (dashboardState === 'loading'|| dashboardState === 'show_message')){ + //file is available set state to ready + dashboardState = 'ready' + message = ''; } - return null + + return{ + file: file, + dashboardState:dashboardState, + message: message, + }; } componentDidMount() { @@ -124,13 +137,12 @@ class WidgetTopology extends React.Component { //this.Viewer.fitToViewer(); - // Query the file referenced by the widget - let widgetFile = parseInt(this.props.widget.customProperties.file, 10); - if (widgetFile !== -1 && this.state.file === undefined) { - this.dashboardState = 'loading'; + // Query the file referenced by the widget (if any) + if (this.state.file !== undefined) { + this.setState({dashboardState: 'loading'}); AppDispatcher.dispatch({ type: 'files/start-download', - data: widgetFile, + data: this.state.file.id, token: this.props.token }); } @@ -142,43 +154,25 @@ class WidgetTopology extends React.Component { componentDidUpdate(prevProps: Readonly
, prevState: Readonly, snapshot: SS): void {
- if(this.state.file === undefined) {
- // No file has been selected
- this.dashboardState = 'show_message';
- this.message = 'Select a topology model first.';
- return;
- }
-
- if((prevState.file === undefined && this.state.file !== undefined)
- || (this.state.file.id !== prevState.file.id && this.state.file.id !== -1)) {
- // if file has changed, download new file
- this.dashboardState = 'loading';
- AppDispatcher.dispatch({
- type: 'files/start-download',
- data: this.state.file.id,
- token: this.props.token
- });
- } else if (this.state.file.hasOwnProperty("data") && this.dashboardState === 'loading') {
- // data of file has been newly downloaded (did not exist in previous state)
- this.dashboardState = 'ready';
-
- } else if(this.state.file.hasOwnProperty("data") && this.dashboardState === 'ready'){
+ if(this.state.dashboardState === 'ready'){
+ //Topology file incl data downloaded, init SVG (should happen only once!)
if (this.svgElem) {
let cimsvgInstance = new cimsvg(this.svgElem.current);
cimsvg.setCimsvg(cimsvgInstance);
cimsvgInstance.setFileCount(1);
// transform data blob into string format
this.state.file.data.text().then(function(content) {
- cimsvgInstance.loadFile(content);
- cimsvgInstance.fit();
- attachComponentEvents();
+ cimsvgInstance.loadFile(content);
+ cimsvgInstance.fit();
+ attachComponentEvents();
});
+ this.setState({dashboardState: 'loaded'});
}
else {
console.error("The svgElem variable is not initialized before the attempt to create the cimsvg instance.");
}
- }
+ }
}
render() {
@@ -192,11 +186,11 @@ class WidgetTopology extends React.Component {
position: "right"
}
- switch(this.dashboardState) {
+ switch(this.state.dashboardState) {
case 'loading':
markup =