Improve error handling (#38)

Improve error handling and making status service more flexible so that
it can be used across application

Author: jharajeev55

package-lock.json

@@ -1,9 +1,8 @@
 <div>
+  <app-banner-display class="global-banner"></app-banner-display>
+
   <div>
-    <app-main-sweep
-      *ngIf="isMainSweepVisible"
-      [sweepConfig]="sweepConfig"
-    ></app-main-sweep>
+    <app-main-sweep *ngIf="isMainSweepVisible" [sweepConfig]="sweepConfig"></app-main-sweep>
     <app-empty-config *ngIf="!isMainSweepVisible"></app-empty-config>
   </div>
-</div>
+</div>

script-gen-ui/src/app/app.component.html

@@ -7,10 +7,14 @@ import { SweepModel } from './model/sweep_data/sweepModel';
 import { IpcData } from './model/ipcData';
 import { MainSweepComponent } from './components/main-sweep/main-sweep.component';
 import { EmptyConfigComponent } from './components/empty-config/empty-config.component';
+import { BannerDisplayComponent } from './components/main-sweep/banner-display/banner-display.component';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { BrowserModule } from '@angular/platform-browser';
+import { StatusService } from './services/status.service';
+import { StatusMsg } from './model/sweep_data/statusMsg';
+import { StatusType } from './model/interface';
 
 
 declare const acquireVsCodeApi: unknown;
@@ -27,7 +31,8 @@ const vscode = typeof acquireVsCodeApi === 'function' ? acquireVsCodeApi() : { p
     MatIconModule,
     MainSweepComponent,
     EmptyConfigComponent,
-  ],
+    BannerDisplayComponent
+],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
@@ -39,7 +44,7 @@ export class AppComponent implements OnInit, OnDestroy {
   sweepConfig: SweepConfig | undefined;
   isMainSweepVisible = false;
 
-  constructor(private webSocketService: WebSocketService) {}
+  constructor(private webSocketService: WebSocketService, private statusService: StatusService) {}
 
   ngOnInit() {
     this.webSocketService.connect();
@@ -58,6 +63,7 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   processServerData(message: string): void {
+     this.statusService.show(new StatusMsg({ message: "Loading data...", status_type: StatusType.Info, time_stamp: Date.now().toString() }))
     try {
       // Parse the message as an IpcData object
       const ipcData: IpcData = JSON.parse(message);
@@ -67,7 +73,9 @@ export class AppComponent implements OnInit, OnDestroy {
         ipcData.request_type === 'initial_response' ||
         ipcData.request_type === 'evaluated_response' ||
         ipcData.request_type === 'reset_response'
-      ) {
+      )
+      {
+        vscode.postMessage({ command: 'update_session' , payload: message});
         // Parse the json_value as the SweepModel
         const data = JSON.parse(ipcData.json_value);
         if (data.sweep_model) {
@@ -77,7 +85,7 @@ export class AppComponent implements OnInit, OnDestroy {
           // Update visibility based on the device list
           if (this.sweepConfig.device_list.length > 0) {
             this.isMainSweepVisible = true;
-            vscode.postMessage({ command: 'update_session' , payload: message});
+            
           }
         } else {
           console.error('sweep_model property is missing in the data');
@@ -97,6 +105,7 @@ export class AppComponent implements OnInit, OnDestroy {
     } catch (error) {
       console.log('Error parsing server data:', error);
     }
+     this.statusService.clear()
   }
 
   ngOnDestroy(): void {

script-gen-ui/src/app/app.component.ts

@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, Inject, ChangeDetectorRef } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { BrowserModule } from '@angular/platform-browser';
 import { StatusMsg } from '../../../model/sweep_data/statusMsg';
+import { StatusService } from '../../../services/status.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-banner-display',
@@ -12,6 +14,43 @@ import { StatusMsg } from '../../../model/sweep_data/statusMsg';
   templateUrl: './banner-display.component.html',
   styleUrl: './banner-display.component.scss',
 })
-export class BannerDisplayComponent {
-  @Input() statusMsg: StatusMsg | undefined;
+export class BannerDisplayComponent implements OnInit, OnDestroy {
+  private _external?: StatusMsg;
+  private _service?: StatusMsg;
+  private _displayed?: StatusMsg;
+  private _sub?: Subscription;
+
+  @Input()
+  set statusMsg(value: StatusMsg | undefined) {
+    this._external = value;
+    this.updateDisplayed();
+  }
+  get statusMsg(): StatusMsg | undefined {
+    return this._displayed;
+  }
+
+  constructor(
+    @Inject(StatusService) private statusService: StatusService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this._sub = this.statusService.status$.subscribe((msg: StatusMsg | undefined) => {
+      this._service = msg;
+      this.updateDisplayed();
+      this.cdr.detectChanges(); // Trigger change detection
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._sub?.unsubscribe();
+  }
+
+  clearServiceMessage(): void {
+    this.statusService.clear();
+  }
+
+  private updateDisplayed(): void {
+    this._displayed = this._external ?? this._service;
+  }
 }

script-gen-ui/src/app/components/main-sweep/banner-display/banner-display.component.ts

@@ -1,9 +1,3 @@
-<div *ngIf="statusMsg">
-  <app-banner-display
-    [statusMsg]="statusMsg"
-    class="banner-display"
-  ></app-banner-display>
-</div>
 <div class="parent-container">
   <div
     class="input-container"

script-gen-ui/src/app/components/main-sweep/main-sweep.component.html

@@ -35,9 +35,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { PlotContainerComponent } from './plot-container/plot-container.component';
 import { InputNumericComponent } from '../controls/input-numeric/input-numeric.component';
 import { ListComponent } from './list/list.component';
-import { BannerDisplayComponent } from './banner-display/banner-display.component';
-import { StatusMsg } from '../../model/sweep_data/statusMsg';
 import { TooltipComponent } from './tooltip/tooltip.component';
+import { StatusService } from '../../services/status.service';
 
 @Component({
   selector: 'app-main-sweep',
@@ -54,9 +53,8 @@ import { TooltipComponent } from './tooltip/tooltip.component';
     TimingComponent,
     PlotContainerComponent,
     ListComponent,
-    BannerDisplayComponent,
     TooltipComponent
-  ],
+],
   templateUrl: './main-sweep.component.html',
   styleUrls: ['./main-sweep.component.scss'],
 })
@@ -137,10 +135,8 @@ export class MainSweepComponent implements OnChanges {
   isStepExpanded = false;
   isSweepExpanded = false;
   channelsExpanderState: Map<string, boolean> = new Map<string, boolean>();
-  statusMsg: StatusMsg | undefined;
-  private statusMsgTimeout: number | undefined;
 
-  constructor(private webSocketService: WebSocketService) {}
+  constructor(private webSocketService: WebSocketService, private statusService: StatusService) {}
 
   // ngOnInit() {
   //   this.updateSweepListsWithNames();
@@ -322,16 +318,7 @@ export class MainSweepComponent implements OnChanges {
 
   updateStatusMsg() {
     if (this.sweepConfig && this.sweepConfig.status_msg) {
-      this.statusMsg = this.sweepConfig.status_msg;
-
-      // Clear any previous timeout
-      if (this.statusMsgTimeout !== undefined) {
-        window.clearTimeout(this.statusMsgTimeout);
-      }
-      // Set a new timeout to clear the statusMsg after 5 seconds
-      this.statusMsgTimeout = window.setTimeout(() => {
-        this.statusMsg = undefined;
-      }, 5000);
+      this.statusService.showTemporary(this.sweepConfig.status_msg, 5000);
     }
   }
 

script-gen-ui/src/app/components/main-sweep/main-sweep.component.ts

@@ -113,9 +113,9 @@ export interface IDevice {
 }
 
 export enum StatusType {
-  Info,
-  Warning,
-  Error,
+  Info = "Info",
+  Warning = "Warning",
+  Error = "Error",
 }
 
 export interface IStatusMsg {

script-gen-ui/src/app/model/interface.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { StatusMsg } from '../model/sweep_data/statusMsg';
+
+@Injectable({ providedIn: 'root' })
+export class StatusService {
+  private readonly _status = new BehaviorSubject<StatusMsg | undefined>(undefined);
+  readonly status$: Observable<StatusMsg | undefined> = this._status.asObservable();
+
+  show(msg: StatusMsg | undefined): void {
+    this._status.next(msg);
+  }
+
+  showTemporary(msg: StatusMsg, timeoutMs = 5000): void {
+    this.show(msg);
+    if (timeoutMs > 0) {
+      setTimeout(() => {
+        // Only clear if the message is still the same instance
+        if (this._status.getValue() === msg) {
+          this.clear();
+        }
+      }, timeoutMs);
+    }
+  }
+
+  clear(): void {
+    this._status.next(undefined);
+  }
+}

script-gen-ui/src/app/services/status.service.ts

@@ -2,6 +2,9 @@ import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { IpcData } from './model/ipcData';
 import { v4 as uuidv4 } from 'uuid';
+import { StatusMsg } from './model/sweep_data/statusMsg';
+import { StatusType } from './model/interface';
+import { StatusService } from './services/status.service';
 
 @Injectable({
   providedIn: 'root',
@@ -10,8 +13,7 @@ export class WebSocketService {
   private socket: WebSocket;
   private messageSubject: Subject<string> = new Subject<string>();
   private readonly CHUNK_SIZE = 30 * 1024; // 30 KB per chunk
-
-  constructor() {
+  constructor(private statusService: StatusService) {
     this.socket = new WebSocket('ws://localhost:27950/ws');
   }
 
@@ -80,8 +82,14 @@ export class WebSocketService {
         'WebSocket is not open. ReadyState:',
         this.socket.readyState
       );
-    }
+      const msg = new StatusMsg({
+        message: "WebSocket connection failed. Please close and relaunch the TSP Script Generation webView UI", 
+        status_type: StatusType.Error, 
+        time_stamp: Date.now().toString()
+      });
+      this.statusService.show(msg);
   }
+}
 
   getMessages(): Observable<string> {
     return this.messageSubject.asObservable();