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 =

; break; case 'show_message': - markup =
{ this.message }
; break; + markup =
{ this.state.message }
; break; default: markup = (