Fixing edit of Topology window, file changes work now #217

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<P>, prevState: Readonly<S>, 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 = <div style={spinnerContainerStyle}><div className="loader" /></div>; break;
       case 'show_message':
-        markup = <div style={msgContainerStyle}><div style={msgStyle}>{ this.message }</div></div>; break;
+        markup = <div style={msgContainerStyle}><div style={msgStyle}>{ this.state.message }</div></div>; break;
       default:
         markup = (<div>
           <UncontrolledReactSVGPanZoom