Collect webview messages async (#4405)

* collect experiments webview message async

* collect plots webview message async

Author: mattseddon

extension/src/experiments/index.ts

@@ -224,7 +224,7 @@ export class Experiments extends BaseRepository<TableData> {
   public toggleColumnStatus(path: string) {
     const status = this.columns.toggleStatus(path)
 
-    this.notifyColumnsChanged()
+    void this.notifyColumnsChanged()
 
     return status
   }
@@ -605,7 +605,7 @@ export class Experiments extends BaseRepository<TableData> {
       this.experiments.getErrors()
     )
     this.experimentsChanged.fire()
-    this.notifyColumnsChanged()
+    void this.notifyColumnsChanged()
   }
 
   private notifyColumnsChanged() {

extension/src/experiments/model/index.ts

@@ -42,7 +42,7 @@ import {
 
 type StarredExperiments = Record<string, boolean | undefined>
 
-export type SelectedExperimentWithColor = Experiment & {
+type SelectedExperimentWithColor = Experiment & {
   displayColor: Color
   selected: true
 }

extension/src/experiments/webview/messages.ts

@@ -68,9 +68,13 @@ export class WebviewMessages {
     this.update = update
   }
 
-  public sendWebviewMessage() {
+  public async sendWebviewMessage() {
     const webview = this.getWebview()
-    void webview?.show(this.getWebviewData())
+    if (!webview) {
+      return
+    }
+    const data = await this.getWebviewData()
+    return webview.show(data)
   }
 
   public handleMessageFromWebview(message: MessageFromWebview) {
@@ -264,46 +268,80 @@ export class WebviewMessages {
 
   private toggleShowOnlyChanged() {
     this.columns.toggleShowOnlyChanged()
-    this.sendWebviewMessage()
-    sendTelemetryEvent(
-      EventName.VIEWS_EXPERIMENTS_TABLE_REFRESH,
-      undefined,
-      undefined
-    )
+    return Promise.all([
+      this.sendWebviewMessage(),
+      sendTelemetryEvent(
+        EventName.VIEWS_EXPERIMENTS_TABLE_REFRESH,
+        undefined,
+        undefined
+      )
+    ])
   }
 
-  private getWebviewData(): TableData {
-    const filters = this.experiments.getFilters()
-    const rows = this.experiments.getRowData()
-    const selectedColumns = this.columns.getSelected()
-
-    const showOnlyChanged = this.columns.getShowOnlyChanged()
+  private async getWebviewData(): Promise<TableData> {
+    const [
+      changes,
+      cliError,
+      columnOrder,
+      columnWidths,
+      selectedColumns,
+      filters,
+      hasBranchesToSelect,
+      hasCheckpoints,
+      hasColumns,
+      hasConfig,
+      hasMoreCommits,
+      hasRunningWorkspaceExperiment,
+      isShowingMoreCommits,
+      rows,
+      selectedBranches,
+      selectedForPlotsCount,
+      showOnlyChanged,
+      sorts
+    ] = await Promise.all([
+      this.columns.getChanges(),
+      this.experiments.getCliError() || null,
+      this.columns.getColumnOrder(),
+      this.columns.getColumnWidths(),
+      this.columns.getSelected(),
+      this.experiments.getFilters(),
+      this.experiments.getAvailableBranchesToShow().length > 0,
+      this.experiments.hasCheckpoints(),
+      this.columns.hasNonDefaultColumns(),
+      this.pipeline.hasPipeline(),
+      this.experiments.getHasMoreCommits(),
+      this.experiments.hasRunningWorkspaceExperiment(),
+      this.experiments.getIsShowingMoreCommits(),
+      this.experiments.getRowData(),
+      this.experiments.getSelectedBranches(),
+      this.experiments.getSelectedRevisions().length,
+      this.columns.getShowOnlyChanged(),
+      this.experiments.getSorts()
+    ])
 
     const columns = showOnlyChanged
       ? collectColumnsWithChangedValues(selectedColumns, rows, filters)
       : selectedColumns
 
     return {
-      changes: this.columns.getChanges(),
-      cliError: this.experiments.getCliError() || null,
-      columnOrder: this.columns.getColumnOrder(),
-      columnWidths: this.columns.getColumnWidths(),
+      changes,
+      cliError,
+      columnOrder,
+      columnWidths,
       columns,
       filters: filters.map(({ path }) => path),
-      hasBranchesToSelect:
-        this.experiments.getAvailableBranchesToShow().length > 0,
-      hasCheckpoints: this.experiments.hasCheckpoints(),
-      hasColumns: this.columns.hasNonDefaultColumns(),
-      hasConfig: this.pipeline.hasPipeline(),
-      hasMoreCommits: this.experiments.getHasMoreCommits(),
-      hasRunningWorkspaceExperiment:
-        this.experiments.hasRunningWorkspaceExperiment(),
-      isShowingMoreCommits: this.experiments.getIsShowingMoreCommits(),
+      hasBranchesToSelect,
+      hasCheckpoints,
+      hasColumns,
+      hasConfig,
+      hasMoreCommits,
+      hasRunningWorkspaceExperiment,
+      isShowingMoreCommits,
       rows,
-      selectedBranches: this.experiments.getSelectedBranches(),
-      selectedForPlotsCount: this.experiments.getSelectedRevisions().length,
+      selectedBranches,
+      selectedForPlotsCount,
       showOnlyChanged,
-      sorts: this.experiments.getSorts()
+      sorts
     }
   }
 

extension/src/plots/webview/messages.ts

@@ -61,18 +61,12 @@ export class WebviewMessages {
   }
 
   public async sendWebviewMessage() {
-    const selectedRevisions = this.plots.getSelectedRevisionDetails()
-
-    await this.getWebview()?.show({
-      cliError: this.errors.getCliError()?.error || null,
-      comparison: this.getComparisonPlots(),
-      custom: this.getCustomPlots(),
-      hasPlots: !!this.paths.hasPaths(),
-      hasUnselectedPlots: this.paths.getHasUnselectedPlots(),
-      sectionCollapsed: this.plots.getSectionCollapsed(),
-      selectedRevisions,
-      template: this.getTemplatePlots(selectedRevisions)
-    })
+    const webview = this.getWebview()
+    if (!webview) {
+      return
+    }
+    const data = await this.getWebviewData()
+    return webview.show(data)
   }
 
   public handleMessageFromWebview(message: MessageFromWebview) {
@@ -140,6 +134,39 @@ export class WebviewMessages {
     }
   }
 
+  private async getWebviewData(): Promise<TPlotsData> {
+    const selectedRevisions = this.plots.getSelectedRevisionDetails()
+
+    const [
+      cliError,
+      comparison,
+      custom,
+      hasPlots,
+      hasUnselectedPlots,
+      sectionCollapsed,
+      template
+    ] = await Promise.all([
+      this.errors.getCliError()?.error || null,
+      this.getComparisonPlots(),
+      this.getCustomPlots(),
+      !!this.paths.hasPaths(),
+      this.paths.getHasUnselectedPlots(),
+      this.plots.getSectionCollapsed(),
+      this.getTemplatePlots(selectedRevisions)
+    ])
+
+    return {
+      cliError,
+      comparison,
+      custom,
+      hasPlots,
+      hasUnselectedPlots,
+      sectionCollapsed,
+      selectedRevisions,
+      template
+    }
+  }
+
   private setPlotSize(
     section: PlotsSection,
     nbItemsPerRow: number,