fix when DiagnosticsToolBox has error frontend has no responed issue

IDAES-UI/src/components/flowsheet_main_component/flowsheet_diagnostics_component/diagnostics_display/diagnostics_display.module.css

@@ -122,4 +122,8 @@
     background-color: white;
     box-shadow: 0px 0px 10px rgb(219, 219, 219);
     border-radius: 3px;
+}
+
+.error_message{
+    color: red;
 }

IDAES-UI/src/components/flowsheet_main_component/flowsheet_diagnostics_component/diagnostics_display/diagnostics_display.tsx

@@ -4,6 +4,7 @@ import axios from "axios";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { messageBarTemplateGenerator } from "@/components/message_bar_component/message_bar_template_generator_utility_fn";
 import css from "./diagnostics_display.module.css";
 
 export default function DiagnosticsDisplay(props:any){
@@ -167,8 +168,17 @@ export default function DiagnosticsDisplay(props:any){
                 return copyState
             })
 
-        }catch(error){
+        }catch(error:any){
+            messageBarTemplateGenerator("diagnosticFNRunError", false, error.response.data.error)
             console.log(error)
+            const diagnosticsRunnerContentContainer = document.getElementById("diagnosticsRunner_content_container");
+            if(diagnosticsRunnerContentContainer){
+                const errorTemplate = `
+                    <pre class="${css.error_message}">${error.response.data.error}<pre>
+                    <br>
+                `
+                diagnosticsRunnerContentContainer.innerHTML+= errorTemplate
+            }
         }
     }
 

IDAES-UI/src/components/flowsheet_main_component/flowsheet_diagnostics_runner_component/flowsheet_diagnostic_runner_component.tsx

@@ -36,7 +36,11 @@ export default function FlowsheetDiagnosticsRunner(){
     },[displayLength])
 
     return(
-        <div className={css.diagnosticsRunner_content_container} style={{"overflowY" : "scroll"}}>
+        <div 
+            className={css.diagnosticsRunner_content_container} 
+            id="diagnosticsRunner_content_container" 
+            style={{"overflowY" : "scroll"}}
+        >
             {display}
         </div>
     )

IDAES-UI/src/components/message_bar_component/message_bar_template_generator_utility_fn.tsx

@@ -1,6 +1,6 @@
 import css from "./message_bar.module.css";
 
-export function messageBarTemplateGenerator(whichCalled:string, succeed:boolean){
+export function messageBarTemplateGenerator(whichCalled:string, succeed:boolean, error?:any){
 
     let templateBgClass:string = "bg-successful";
     succeed ? templateBgClass = "bg-successful" : templateBgClass = "bg-error";
@@ -34,6 +34,12 @@ export function messageBarTemplateGenerator(whichCalled:string, succeed:boolean)
         message = "Diagnostics refresh failed! Please restart the server!";
     }
 
+    // diagnostics fn run
+    if(whichCalled == "diagnosticFNRunError" && !succeed){
+        let currentError:string | undefined = undefined;
+        error ? message = error : message = `Run diagnostics failed, please check your python terminal.`
+    }
+
     // initial template
     const messageBarTemplate = `
         <div id='messageBarTextContainer' 

idaes_ui/fv/model_server.py

@@ -31,6 +31,7 @@
 from urllib.parse import urlparse
 import time
 import os
+import traceback
 
 # package
 from idaes_ui.fv.flowsheet import FlowsheetDiff, FlowsheetSerializer
@@ -405,44 +406,58 @@ def _put_fs(self, id_):
         self._write_text(200, message="success")
 
     def _put_diagnostic(self, id_):
-        # TODO: id_ in here is not from query param but from frontend, if id_ from do_PUT is None
-        # reading request json data
-        content_length = int(self.headers.get("Content-Length", 0))
-        request_body = self.rfile.read(content_length).decode("utf-8")
-        request_data = json.loads(request_body)
-
-        # get function name from request
-        function_name = request_data.get("function_name", "")
-        id_ = request_data.get("id", "")
-
-        # get fs
-        fs = self.server._get_flowsheet_obj(id_)
+        try:
+            # TODO: id_ in here is not from query param but from frontend, if id_ from do_PUT is None
+            # reading request json data
+            content_length = int(self.headers.get("Content-Length", 0))
+            request_body = self.rfile.read(content_length).decode("utf-8")
+            request_data = json.loads(request_body)
+
+            # get function name from request
+            function_name = request_data.get("function_name", "")
+            id_ = request_data.get("id", "")
+
+            # get fs
+            fs = self.server._get_flowsheet_obj(id_)
+
+            # create diagnosticToolbox instence
+            dt_instance = DiagnosticsToolbox(fs)
+
+            # base on pass in function name as function name and run diagnosticToolBox.function_name
+            if hasattr(dt_instance, function_name):
+                # read dt function from dt instance
+                current_function = getattr(dt_instance, function_name)
+                # initial streamIO use as stream to capture diagnostics output or its default will print to terminal
+                output_stream = io.StringIO()
+                # run current function
+                current_function(stream=output_stream)
+            else:
+                # return error function not exists
+                self._write_json(
+                    500,
+                    {
+                        "error": f"Error function name {function_name} is not exists in diagnosticsToolBox instance"
+                    },
+                )
 
-        # create diagnosticToolbox instence
-        dt_instance = DiagnosticsToolbox(fs)
-
-        # base on pass in function name as function name and run diagnosticToolBox.function_name
-        if hasattr(dt_instance, function_name):
-            # read dt function from dt instance
-            current_function = getattr(dt_instance, function_name)
-            # initial streamIO use as stream to capture diagnostics output or its default will print to terminal
-            output_stream = io.StringIO()
-            # run current function
-            current_function(stream=output_stream)
-        else:
-            # return error function not exists
-            return {
-                "error": f"Error function name {function_name} is not exists in diagnosticsToolBox instance"
-            }
+            # read captured output content
+            captured_output = output_stream.getvalue()
 
-        # read captured output content
-        captured_output = output_stream.getvalue()
+            # close StreamIO
+            output_stream.close()
 
-        # close StreamIO
-        output_stream.close()
+            # return respond
+            self._write_json(200, {"diagnostics_runner_result": captured_output})
+        except Exception as e:
+            traceback.print_exc()
 
-        # return respond
-        self._write_json(200, {"diagnostics_runner_result": captured_output})
+            # Return 500 status code and error message
+            self._write_json(
+                500,
+                {
+                    "error": f"Error running diagnostics: {str(e)}, please check your flowsheet!"
+                },
+            )
 
     # === Internal methods ===