From 6978e411c4f7c95bfb2681b8759f539b7e0973c1 Mon Sep 17 00:00:00 2001
From: anandtiwary <52081890+anandtiwary@users.noreply.github.com>
Date: Thu, 29 Oct 2020 17:25:16 -0700
Subject: [PATCH] fix: fix table scrolling and loading issues

- Load Async is built to show loaders for content rendered inside it.
  We are using it in table as a placeholder where the loader wrapper
  stays after the cdk table has loaded all data. This creates lots of
  layout issues especially when using with flex container

- Introducing a new hide property in table loading state to remove the
  loader wrapper once loading is completed. In case of error or no data,
  the loader will automatically take the entire space.

- removing host properties as it interferes with flex properties for parent container

- adding flex grow to explorer table
---
 .../src/table/data/table-cdk-data-source.ts   |  19 +-
 .../components/src/table/table.component.scss |   9 +-
 .../components/src/table/table.component.ts   | 219 +++++++++---------
 .../pages/explorer/explorer.component.scss    |   3 +-
 4 files changed, 133 insertions(+), 117 deletions(-)

diff --git a/projects/components/src/table/data/table-cdk-data-source.ts b/projects/components/src/table/data/table-cdk-data-source.ts
index df7032483..a9db7d254 100644
--- a/projects/components/src/table/data/table-cdk-data-source.ts
+++ b/projects/components/src/table/data/table-cdk-data-source.ts
@@ -34,10 +34,9 @@ export class TableCdkDataSource implements DataSource<TableRow> {
   private readonly cachedValues: Map<string, unknown[]> = new Map<string, unknown[]>();
   private lastRowChange: StatefulTableRow | undefined;
   private readonly rowsChange$: Subject<StatefulTableRow[]> = new Subject<StatefulTableRow[]>();
-  private readonly loadingStateSubject: Subject<Observable<StatefulTableRow[]>> = new Subject<
-    Observable<StatefulTableRow[]>
-  >();
-  public loadingStateChange$: Observable<Observable<StatefulTableRow[]>> = this.loadingStateSubject.asObservable();
+  private readonly loadingStateSubject: Subject<TableLoadingState> = new Subject<TableLoadingState>();
+
+  public loadingStateChange$: Observable<TableLoadingState> = this.loadingStateSubject.asObservable();
 
   public constructor(
     private readonly tableDataSourceProvider: TableDataSourceProvider,
@@ -55,7 +54,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
   public connect(): Observable<ReadonlyArray<TableRow>> {
     this.buildChangeObservable()
       .pipe(
-        tap(() => this.loadingStateSubject.next(NEVER)),
+        tap(() => this.loadingStateSubject.next({loading$: NEVER})),
         mergeMap(([columnConfigs, pageEvent, filter, changedColumn, changedRow]) =>
           this.buildDataObservable(columnConfigs, pageEvent, filter, changedColumn, changedRow)
         )
@@ -65,7 +64,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
     return this.rowsChange$.pipe(
       tap(rows => this.cacheRows(rows)),
       tap(rows => this.cacheFilterableValues(rows)),
-      tap(rows => this.loadingStateSubject.next(of(rows)))
+      tap(rows => this.loadingStateSubject.next({loading$: of(rows), hide: rows.length >  1}))
     );
   }
 
@@ -271,7 +270,7 @@ export class TableCdkDataSource implements DataSource<TableRow> {
           : rows
       ),
       catchError(error => {
-        this.loadingStateSubject.next(throwError(error));
+        this.loadingStateSubject.next({loading$: throwError(error)});
 
         return [];
       })
@@ -331,3 +330,9 @@ export class TableCdkDataSource implements DataSource<TableRow> {
     }
   }
 }
+
+
+export interface TableLoadingState {
+  loading$: Observable<StatefulTableRow[]>;
+  hide?: boolean;
+}
diff --git a/projects/components/src/table/table.component.scss b/projects/components/src/table/table.component.scss
index 2010a3326..34d92be4e 100644
--- a/projects/components/src/table/table.component.scss
+++ b/projects/components/src/table/table.component.scss
@@ -1,11 +1,12 @@
 @import 'mixins';
 @import 'layout';
 
-:host {
+.table {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
+  position: relative;
 }
 
 .title-row {
@@ -18,6 +19,7 @@
 
 .table {
   width: 100%;
+  flex: 1 1 0;
   overflow: auto;
 }
 
@@ -122,7 +124,10 @@
 }
 
 .state-watcher {
-  flex: 1 1;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  background: transparent;
 }
 
 .pagination-controls {
diff --git a/projects/components/src/table/table.component.ts b/projects/components/src/table/table.component.ts
index 35f04c9f4..7675baa70 100644
--- a/projects/components/src/table/table.component.ts
+++ b/projects/components/src/table/table.component.ts
@@ -45,126 +45,133 @@ import {
 } from './table-api';
 import { TableColumnConfigExtended, TableService } from './table.service';
 
-// tslint:disable max-file-line-count
+// tslint:disable: template-cyclomatic-complexity component-max-inline-declarations max-file-line-count
 @Component({
   selector: 'ht-table',
   styleUrls: ['./table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <!-- Search -->
-    <div *ngIf="this.searchable" class="table-controls">
-      <ht-search-box
-        class="search-box"
-        [placeholder]="this.searchPlaceholder"
-        (valueChange)="this.applyFilter($event)"
-      ></ht-search-box>
-    </div>
+    <div class="table">
+      <!-- Search -->
+      <div *ngIf="this.searchable" class="table-controls">
+        <ht-search-box
+          class="search-box"
+          [placeholder]="this.searchPlaceholder"
+          (valueChange)="this.applyFilter($event)"
+        ></ht-search-box>
+      </div>
 
-    <!-- Table -->
-    <cdk-table
-      *ngIf="this.dataSource"
-      [multiTemplateDataRows]="this.isDetailType()"
-      [dataSource]="this.dataSource"
-      [ngClass]="[this.display, this.pageable && this.isTableFullPage ? 'bottom-margin' : '']"
-      class="table"
-    >
-      <!-- Columns -->
-      <div *ngFor="let columnDef of this.columnConfigs$ | async; trackBy: this.trackItem; index as index">
-        <ng-container [cdkColumnDef]="columnDef.id">
-          <cdk-header-cell
-            *cdkHeaderCellDef
-            [style.flex-basis]="columnDef.width"
-            [style.max-width]="columnDef.width"
-            class="header-cell"
-          >
-            <div
-              *ngIf="index !== 0"
-              class="header-column-resize-handle"
-              (mousedown)="this.onResizeMouseDown($event, index)"
+      <!-- Table -->
+      <cdk-table
+        *ngIf="this.dataSource"
+        [multiTemplateDataRows]="this.isDetailType()"
+        [dataSource]="this.dataSource"
+        [ngClass]="[this.display, this.pageable && this.isTableFullPage ? 'bottom-margin' : '']"
+        class="table"
+      >
+        <!-- Columns -->
+        <div *ngFor="let columnDef of this.columnConfigs$ | async; trackBy: this.trackItem; index as index">
+          <ng-container [cdkColumnDef]="columnDef.id">
+            <cdk-header-cell
+              *cdkHeaderCellDef
+              [style.flex-basis]="columnDef.width"
+              [style.max-width]="columnDef.width"
+              class="header-cell"
             >
-              <div class="header-column-divider"></div>
-            </div>
-            <ht-table-header-cell-renderer
-              class="header-cell-renderer"
-              [metadata]="this.metadata"
-              [columnConfig]="columnDef"
-              [index]="index"
-              [sort]="columnDef.sort"
-              (sortChange)="this.onHeaderCellClick(columnDef)"
+              <div
+                *ngIf="index !== 0"
+                class="header-column-resize-handle"
+                (mousedown)="this.onResizeMouseDown($event, index)"
+              >
+                <div class="header-column-divider"></div>
+              </div>
+              <ht-table-header-cell-renderer
+                class="header-cell-renderer"
+                [metadata]="this.metadata"
+                [columnConfig]="columnDef"
+                [index]="index"
+                [sort]="columnDef.sort"
+                (sortChange)="this.onHeaderCellClick(columnDef)"
+              >
+              </ht-table-header-cell-renderer>
+            </cdk-header-cell>
+            <cdk-cell
+              *cdkCellDef="let row"
+              [style.flex-basis]="columnDef.width"
+              [style.max-width]="columnDef.width"
+              [style.margin-left]="this.indent(columnDef, row)"
+              [ngClass]="{
+                'child-row': this.isChildRow(row),
+                'expander-column': this.isExpanderColumn(columnDef),
+                'detail-expanded': this.isDetailExpanded(row)
+              }"
+              class="data-cell"
             >
-            </ht-table-header-cell-renderer>
-          </cdk-header-cell>
-          <cdk-cell
-            *cdkCellDef="let row"
-            [style.flex-basis]="columnDef.width"
-            [style.max-width]="columnDef.width"
-            [style.margin-left]="this.indent(columnDef, row)"
-            [ngClass]="{
-              'child-row': this.isChildRow(row),
-              'expander-column': this.isExpanderColumn(columnDef),
-              'detail-expanded': this.isDetailExpanded(row)
-            }"
-            class="data-cell"
-          >
-            <ht-table-data-cell-renderer
-              class="data-cell-renderer"
-              [metadata]="this.metadata"
-              [columnConfig]="columnDef"
-              [index]="this.columnIndex(columnDef, index)"
-              [rowData]="row"
-              [cellData]="row[columnDef.id]"
-              (click)="this.onDataCellClick(row)"
-            ></ht-table-data-cell-renderer>
+              <ht-table-data-cell-renderer
+                class="data-cell-renderer"
+                [metadata]="this.metadata"
+                [columnConfig]="columnDef"
+                [index]="this.columnIndex(columnDef, index)"
+                [rowData]="row"
+                [cellData]="row[columnDef.id]"
+                (click)="this.onDataCellClick(row)"
+              ></ht-table-data-cell-renderer>
+            </cdk-cell>
+          </ng-container>
+        </div>
+
+        <!-- Expandable Detail Column -->
+        <ng-container [cdkColumnDef]="this.expandedDetailColumnConfig.id" *ngIf="this.isDetailType()">
+          <cdk-cell *cdkCellDef="let row" [attr.colspan]="this.columnConfigsSubject.value.length" class="expanded-cell">
+            <ht-table-expanded-detail-row-cell-renderer
+              *ngIf="this.isRowExpanded(row)"
+              [row]="row"
+              [expanded]="this.isRowExpanded(row)"
+              [content]="this.detailContent"
+            ></ht-table-expanded-detail-row-cell-renderer>
           </cdk-cell>
         </ng-container>
-      </div>
 
-      <!-- Expandable Detail Column -->
-      <ng-container [cdkColumnDef]="this.expandedDetailColumnConfig.id" *ngIf="this.isDetailType()">
-        <cdk-cell *cdkCellDef="let row" [attr.colspan]="this.columnConfigsSubject.value.length" class="expanded-cell">
-          <ht-table-expanded-detail-row-cell-renderer
-            *ngIf="this.isRowExpanded(row)"
-            [row]="row"
-            [expanded]="this.isRowExpanded(row)"
-            [content]="this.detailContent"
-          ></ht-table-expanded-detail-row-cell-renderer>
-        </cdk-cell>
-      </ng-container>
+        <!-- Header Row -->
+        <ng-container *ngIf="this.isShowHeader()">
+          <cdk-header-row *cdkHeaderRowDef="this.visibleColumns()" class="header-row"></cdk-header-row>
+        </ng-container>
 
-      <!-- Header Row -->
-      <ng-container *ngIf="this.isShowHeader()">
-        <cdk-header-row *cdkHeaderRowDef="this.visibleColumns()" class="header-row"></cdk-header-row>
-      </ng-container>
+        <!-- Data Rows -->
+        <cdk-row
+          *cdkRowDef="let row; columns: this.visibleColumns()"
+          (mouseenter)="this.onDataRowMouseEnter(row)"
+          (mouseleave)="this.onDataRowMouseLeave()"
+          [ngClass]="{ 'selected-row': this.shouldHighlightRowAsSelection(row), 'hovered-row': this.isHoveredRow(row) }"
+          class="data-row"
+        ></cdk-row>
+
+        <!-- Expandable Detail Rows -->
+        <ng-container *ngIf="this.isDetailType()">
+          <cdk-row *cdkRowDef="let row; columns: [this.expandedDetailColumnConfig.id]" class="expandable-row"></cdk-row>
+        </ng-container>
+      </cdk-table>
 
-      <!-- Data Rows -->
-      <cdk-row
-        *cdkRowDef="let row; columns: this.visibleColumns()"
-        (mouseenter)="this.onDataRowMouseEnter(row)"
-        (mouseleave)="this.onDataRowMouseLeave()"
-        [ngClass]="{ 'selected-row': this.shouldHighlightRowAsSelection(row), 'hovered-row': this.isHoveredRow(row) }"
-        class="data-row"
-      ></cdk-row>
-
-      <!-- Expandable Detail Rows -->
-      <ng-container *ngIf="this.isDetailType()">
-        <cdk-row *cdkRowDef="let row; columns: [this.expandedDetailColumnConfig.id]" class="expandable-row"></cdk-row>
+      <!-- State Watcher -->
+      <ng-container *ngIf="this.dataSource?.loadingStateChange$ | async as loadingState">
+        <div class="state-watcher" *ngIf="!loadingState.hide">
+          <ng-container class="state-watcher" *htLoadAsync="loadingState.loading$"></ng-container>
+        </div>
       </ng-container>
-    </cdk-table>
-
-    <!-- State Watcher -->
-    <div class="state-watcher">
-      <ng-container class="state-watcher" *htLoadAsync="this.dataSource?.loadingStateChange$ | async"></ng-container>
-    </div>
-
-    <!-- Pagination -->
-    <div class="pagination-controls" *ngIf="this.pageable" [style.position]="this.isTableFullPage ? 'fixed' : 'sticky'">
-      <ht-paginator
-        *htLetAsync="this.urlPageData$ as pageData"
-        (pageChange)="this.onPageChange($event)"
-        [pageSizeOptions]="this.pageSizeOptions"
-        [pageSize]="pageData?.pageSize"
-        [pageIndex]="pageData?.pageIndex"
-      ></ht-paginator>
+      <!-- Pagination -->
+      <div
+        class="pagination-controls"
+        *ngIf="this.pageable"
+        [style.position]="this.isTableFullPage ? 'fixed' : 'sticky'"
+      >
+        <ht-paginator
+          *htLetAsync="this.urlPageData$ as pageData"
+          (pageChange)="this.onPageChange($event)"
+          [pageSizeOptions]="this.pageSizeOptions"
+          [pageSize]="pageData?.pageSize"
+          [pageIndex]="pageData?.pageIndex"
+        ></ht-paginator>
+      </div>
     </div>
   `
 })
diff --git a/projects/observability/src/pages/explorer/explorer.component.scss b/projects/observability/src/pages/explorer/explorer.component.scss
index 41c06f9d4..e01cca1ac 100644
--- a/projects/observability/src/pages/explorer/explorer.component.scss
+++ b/projects/observability/src/pages/explorer/explorer.component.scss
@@ -16,7 +16,6 @@
 
   .visualization-panel {
     padding-top: 8px;
-
     .label {
       @include body-1-medium;
     }
@@ -31,7 +30,7 @@
 
   .results-panel {
     overflow: hidden;
-
+    flex: 1 1 auto;
     .label {
       @include body-1-medium;
     }