fix: monitor widget unnecessary updates

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

Diff for: arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -496,15 +496,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(TabBarToolbarContribution).toService(MonitorViewContribution);
   bind(WidgetFactory).toDynamicValue((context) => ({
     id: MonitorWidget.ID,
-    createWidget: () => {
-      return new MonitorWidget(
-        context.container.get<MonitorModel>(MonitorModel),
-        context.container.get<MonitorManagerProxyClient>(
-          MonitorManagerProxyClient
-        ),
-        context.container.get<BoardsServiceProvider>(BoardsServiceProvider)
-      );
-    },
+    createWidget: () => context.container.get(MonitorWidget),
   }));
 
   bind(MonitorManagerProxyFactory).toFactory(

Diff for: arduino-ide-extension/src/browser/monitor-manager-proxy-client-impl.ts

@@ -39,7 +39,7 @@ export class MonitorManagerProxyClientImpl
   readonly onMonitorSettingsDidChange =
     this.onMonitorSettingsDidChangeEmitter.event;
 
-  protected readonly onMonitorShouldResetEmitter = new Emitter();
+  protected readonly onMonitorShouldResetEmitter = new Emitter<void>();
   readonly onMonitorShouldReset = this.onMonitorShouldResetEmitter.event;
 
   // WebSocket used to handle pluggable monitor communication between
@@ -132,6 +132,7 @@ export class MonitorManagerProxyClientImpl
   }
 
   async startMonitor(settings?: PluggableMonitorSettings): Promise<void> {
+    await this.boardsServiceProvider.reconciled;
     this.lastConnectedBoard = {
       selectedBoard: this.boardsServiceProvider.boardsConfig.selectedBoard,
       selectedPort: this.boardsServiceProvider.boardsConfig.selectedPort,
@@ -156,7 +157,7 @@ export class MonitorManagerProxyClientImpl
                   ? Port.keyOf(this.lastConnectedBoard.selectedPort)
                   : undefined)
             ) {
-              this.onMonitorShouldResetEmitter.fire(null);
+              this.onMonitorShouldResetEmitter.fire();
               this.lastConnectedBoard = {
                 selectedBoard: selectedBoard,
                 selectedPort: selectedPort,

Diff for: arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx

@@ -1,5 +1,9 @@
 import * as React from '@theia/core/shared/react';
-import { injectable, inject } from '@theia/core/shared/inversify';
+import {
+  injectable,
+  inject,
+  postConstruct,
+} from '@theia/core/shared/inversify';
 import { Emitter } from '@theia/core/lib/common/event';
 import { Disposable } from '@theia/core/lib/common/disposable';
 import {
@@ -19,6 +23,7 @@ import {
 } from '../../../common/protocol';
 import { MonitorModel } from '../../monitor-model';
 import { MonitorSettings } from '../../../node/monitor-settings/monitor-settings-provider';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
 
 @injectable()
 export class MonitorWidget extends ReactWidget {
@@ -43,40 +48,38 @@ export class MonitorWidget extends ReactWidget {
   protected closing = false;
   protected readonly clearOutputEmitter = new Emitter<void>();
 
-  constructor(
-    @inject(MonitorModel)
-    protected readonly monitorModel: MonitorModel,
-
-    @inject(MonitorManagerProxyClient)
-    protected readonly monitorManagerProxy: MonitorManagerProxyClient,
+  @inject(MonitorModel)
+  private readonly monitorModel: MonitorModel;
+  @inject(MonitorManagerProxyClient)
+  private readonly monitorManagerProxy: MonitorManagerProxyClient;
+  @inject(BoardsServiceProvider)
+  private readonly boardsServiceProvider: BoardsServiceProvider;
+  @inject(FrontendApplicationStateService)
+  private readonly appStateService: FrontendApplicationStateService;
 
-    @inject(BoardsServiceProvider)
-    protected readonly boardsServiceProvider: BoardsServiceProvider
-  ) {
+  constructor() {
     super();
     this.id = MonitorWidget.ID;
     this.title.label = MonitorWidget.LABEL;
     this.title.iconClass = 'monitor-tab-icon';
     this.title.closable = true;
     this.scrollOptions = undefined;
     this.toDispose.push(this.clearOutputEmitter);
-    this.toDispose.push(
-      Disposable.create(() => this.monitorManagerProxy.disconnect())
-    );
   }
 
-  protected override onBeforeAttach(msg: Message): void {
-    this.update();
-    this.toDispose.push(this.monitorModel.onChange(() => this.update()));
-    this.getCurrentSettings().then(this.onMonitorSettingsDidChange.bind(this));
-    this.monitorManagerProxy.onMonitorSettingsDidChange(
-      this.onMonitorSettingsDidChange.bind(this)
-    );
-
-    this.monitorManagerProxy.startMonitor();
+  @postConstruct()
+  protected init(): void {
+    this.toDispose.pushAll([
+      Disposable.create(() => this.monitorManagerProxy.disconnect()),
+      this.monitorModel.onChange(() => this.update()),
+      this.monitorManagerProxy.onMonitorSettingsDidChange((event) =>
+        this.updateSettings(event)
+      ),
+    ]);
+    this.startMonitor();
   }
 
-  onMonitorSettingsDidChange(settings: MonitorSettings): void {
+  private updateSettings(settings: MonitorSettings): void {
     this.settings = {
       ...this.settings,
       pluggableMonitorSettings: {
@@ -92,10 +95,6 @@ export class MonitorWidget extends ReactWidget {
     this.update();
   }
 
-  override dispose(): void {
-    super.dispose();
-  }
-
   protected override onCloseRequest(msg: Message): void {
     this.closing = true;
     super.onCloseRequest(msg);
@@ -125,7 +124,7 @@ export class MonitorWidget extends ReactWidget {
     this.update();
   }
 
-  protected onFocusResolved = (element: HTMLElement | undefined) => {
+  protected onFocusResolved = (element: HTMLElement | undefined): void => {
     if (this.closing || !this.isAttached) {
       return;
     }
@@ -159,17 +158,28 @@ export class MonitorWidget extends ReactWidget {
     ];
   }
 
-  private getCurrentSettings(): Promise<MonitorSettings> {
+  private async startMonitor(): Promise<void> {
+    await this.appStateService.reachedState('ready');
+    await this.boardsServiceProvider.reconciled;
+    await this.syncSettings();
+    await this.monitorManagerProxy.startMonitor();
+  }
+
+  private async syncSettings(): Promise<void> {
+    const settings = await this.getCurrentSettings();
+    this.updateSettings(settings);
+  }
+
+  private async getCurrentSettings(): Promise<MonitorSettings> {
     const board = this.boardsServiceProvider.boardsConfig.selectedBoard;
     const port = this.boardsServiceProvider.boardsConfig.selectedPort;
     if (!board || !port) {
-      return Promise.resolve(this.settings || {});
+      return this.settings || {};
     }
     return this.monitorManagerProxy.getCurrentSettings(board, port);
   }
 
   protected render(): React.ReactNode {
-    debugger;
     const baudrate = this.settings?.pluggableMonitorSettings
       ? this.settings.pluggableMonitorSettings.baudrate
       : undefined;