fix(plugin-data-viewer): CB-407 multiple request while sorting

webapp/packages/plugin-data-spreadsheet/src/AgGridTable/AgGridTableController.ts

@@ -63,6 +63,7 @@ export class AgGridTableController implements IInitializableController, IDestruc
     headerHeight: 28,
     rowModelType: 'infinite',
     infiniteInitialRowCount: 0,
+    maxConcurrentDatasourceRequests: 1,
     cacheBlockSize: undefined, // to be set during init phase
 
     datasource: this.datasource,
@@ -216,7 +217,19 @@ export class AgGridTableController implements IInitializableController, IDestruc
 
   private handleSortChanged(event: SortChangedEvent) {
     const sortModel = event.api.getSortModel() as SortModel;
-    this.gridModel.onSortChanged(sortModel);
+    const newModel = this.gridModel.onSortChanged(sortModel);
+
+    if (sortModel.length !== newModel.length) {
+      event.api.setSortModel(newModel);
+    } else {
+      for (let i = 0; i < sortModel.length; i++) {
+        if (sortModel[i].colId !== newModel[i].colId
+          || sortModel[i].sort !== newModel[i].sort) {
+          event.api.setSortModel(newModel);
+          return;
+        }
+      }
+    }
   }
 
   /* Actions */

webapp/packages/plugin-data-spreadsheet/src/AgGridTable/TableColumnHeader/TableColumnHeader.tsx

@@ -105,7 +105,7 @@ export function TableColumnHeader(props: HeaderProps) {
     return function cleanup() {
       props.column.removeEventListener('sortChanged', onSortChanged);
     };
-  });
+  }, [props.column]);
 
   const handleSort = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {

webapp/packages/plugin-data-viewer/src/TableViewer/TableViewerModel.ts

@@ -133,6 +133,8 @@ export class TableViewerModel {
 
   private resetSubject: Subject<never>;
   private chunkChangeSubject: Subject<never>;
+  private updating = false;
+  private loading = false;
 
   @observable private _hasMoreRows = true;
   @observable private _isLoaderVisible = false;
@@ -166,10 +168,18 @@ export class TableViewerModel {
 
   cancelFetch = (): void => { };
 
-  refresh = async (): Promise<void> => {
+  refresh = async (skipResetUpdate = false): Promise<void> => {
+    if (!skipResetUpdate && this.isUpdateLocked()) {
+      return;
+    }
+
     this.resetData();
-    await this.onRequestData(0, this.getChunkSize());
-    this.resetSubject.next();
+    // if (skipDataLoad) {
+    //   await this.onRequestData(0, this.getChunkSize());
+    // }
+    if (!skipResetUpdate) {
+      this.resetSubject.next();
+    }
   };
 
   onShowDetails = (): void => {
@@ -294,6 +304,7 @@ export class TableViewerModel {
     }
 
     this._isLoaderVisible = !this.noLoaderWhileRequestingDataAsync;
+    this.loading = true;
 
     try {
       const response = await this.requestDataAsync(this, rowOffset, count);
@@ -314,6 +325,7 @@ export class TableViewerModel {
       this.showError(e);
       throw e;
     } finally {
+      this.loading = false;
       this._isLoaderVisible = false;
     }
   }
@@ -326,12 +338,34 @@ export class TableViewerModel {
     this.tableEditor.editCellValue(rowNumber, column, value, editing);
   }
 
-  onSortChanged(sorting: SortModel): void {
+  onSortChanged(sorting: SortModel): SortModel {
+    if (this.isUpdateLocked()) {
+      return this.getSortModel();
+    }
+
     this.sortedColumns.clear();
     for (const sort of sorting) {
       this.setColumnSorting(sort.colId, sort.sort === 'asc', true);
     }
-    this.refresh();
+    this.refresh(true);
+    return sorting;
+  }
+
+  getSortModel(): SortModel {
+    return Array.from(this.sortedColumns.values()).map(v => ({
+      colId: v.attribute,
+      sort: v.orderAsc ? 'asc' : 'desc',
+    }));
+  }
+
+  private isUpdateLocked(): boolean {
+    if (this.updating || this.loading) {
+      return true;
+    }
+
+    this.updating = true;
+    setTimeout(() => { this.updating = false; }, 1000);
+    return false;
   }
 
   @action