Refactored socket connection (#73)

* initial commit

* added recommendations page | error handling | redux store

* updated unit testing

* added constant for GPU limit

* added new slice

* redux store handling relevant states

* changed comment

* change connection lifecycle

* merged with main

* deleted console log messages

* reset error text on restart

Author: johncalesp

deepview-explore/react-ui/src/App.js

@@ -40,6 +40,8 @@ function App() {
 
   function restartProfiling() {
     console.log("restartProfiling");
+    setTextChanged(false);
+    setErrorText("");
     vscodeApi.postMessage({
       command: "restart_profiling_clicked",
     });
@@ -95,6 +97,13 @@ function App() {
       }, 1000);
     }
 
+    // Connection request when UI renders for the 1rst time
+    if (vscodeApi) {
+      vscodeApi.postMessage({
+        command: "connect",
+      });
+    }
+
     return () => {
       window.removeEventListener("message", () => {}); //remove event listener before re-render to avoid memory leaks
     };
@@ -179,16 +188,14 @@ function App() {
                   />
                 </div>
                 <div className="innpv-contents-subrows">
-                  <MemThroughputContainer
-                    SENDMOCK={sendMock}
-                  />
+                  <MemThroughputContainer SENDMOCK={sendMock} />
                   <Habitat />
                   <EnergyConsumption />
                 </div>
               </div>
             </Tab>
             <Tab eventKey="deploy" title="Deployment">
-              <DeploymentTab/>
+              <DeploymentTab />
             </Tab>
           </Tabs>
         </Container>

deepview-explore/react-ui/src/sections/ProviderPanel.js

@@ -185,6 +185,20 @@ const ProviderPanel = () => {
     fetchData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if (analysisState["habitat"].error) {
+    return (
+      <div className="innpv-memory innpv-subpanel">
+        <Subheader icon="database">Providers</Subheader>
+        <Container fluid>
+          <Row className="mt-2">
+            <Alert variant="danger">
+              There was an error obtaining accurate DeepView Predictions
+            </Alert>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
   return (
     <>
       {providerPanelSettings.plotData &&

deepview-explore/src/skyline_session.ts

@@ -91,8 +91,7 @@ export class SkylineSession {
         this.webviewPanel.webview.onDidReceiveMessage(this.webview_handle_message.bind(this));
         this.webviewPanel.onDidDispose(this.disconnect.bind(this));
         this.webviewPanel.webview.html = this._getHtmlForWebview();
-        this.connect();
-
+        
         vscode.workspace.onDidChangeTextDocument(this.on_text_change.bind(this));
         this.restart_profiling = this.restart_profiling.bind(this);
     }
@@ -121,6 +120,7 @@ export class SkylineSession {
             "status": true
         };
         this.webviewPanel.webview.postMessage(connectionMessage);
+        this.on_open();
     }  
 
     on_open() {
@@ -142,17 +142,18 @@ export class SkylineSession {
     }
 
     connect() {
-        this.connection.connect(this.port, this.addr, this.on_open.bind(this));
+        this.connection.connect(this.port, this.addr);
     }
 
     disconnect() {
-        this.connection.destroy()
+        this.connection.destroy();
     }
 
-    restart_profiling() {
-        console.log("restart_profiling", this.startSkyline);
-        this.resetBackendConnection = true;
-        this.disconnect();
+    async restart_profiling() {
+        this.reset_payload();
+        let json_msg = await this.generateStateJson();
+        json_msg['message_type'] = 'analysis';
+        this.webviewPanel.webview.postMessage(json_msg);
     }
 
     on_text_change() {
@@ -172,6 +173,26 @@ export class SkylineSession {
         this.webviewPanel.webview.postMessage(errorEvent);
     }
 
+    on_close_connection() {
+        this.msg_initialize = undefined;
+        this.reset_payload();
+        let connectionMessage = {
+            "message_type": "connection",
+            "status": false
+        };
+        
+        if (this.webviewPanel.active) {
+            this.webviewPanel.webview.postMessage(connectionMessage);
+        }        
+    }
+
+    reset_payload(){
+        this.msg_throughput = undefined;
+        this.msg_breakdown = undefined;
+        this.msg_habitat = undefined;
+        this.msg_energy = undefined;
+    }
+
     webview_handle_message(msg: any) {
         console.log("webview_handle_message");
         console.log(msg);
@@ -337,25 +358,6 @@ export class SkylineSession {
         editor.setDecorations(simpleDecoration, Array.from(decorations.values()));
     }
 
-    on_close_connection() {
-        if (this.resetBackendConnection)
-        {
-            this.startSkyline?.();
-        }
-        let connectionMessage = {
-            "message_type": "connection",
-            "status": false
-        };
-        this.msg_initialize = undefined;
-        this.msg_throughput = undefined;
-        this.msg_breakdown = undefined;
-        this.msg_habitat = undefined;
-        this.msg_energy = undefined;
-        if (this.webviewPanel.active) {
-            this.webviewPanel.webview.postMessage(connectionMessage);
-        }        
-    }
-
     private _getHtmlForWebview() {
         const buildPath = resolve(this.reactProjectRoot);
         console.log("resolved buildPath", buildPath);
@@ -466,7 +468,6 @@ export class SkylineSession {
             for (let prediction of this.msg_habitat.getPredictionsList()) {
                 predictions.push([ prediction.getDeviceName(), prediction.getRuntimeMs() ]);
             }
-            console.log(this.msg_habitat.getAnalysisError()?.getErrorMessage());
             fields['habitat'] = {
                 predictions,
                 error: this.msg_habitat.getAnalysisError()?.getErrorMessage()