Merge branch 'main' of github.com:hypertrace/hypertrace-ui into StylingRadioGroup

Author: Patricio Albizu

projects/assets-library/assets/icons/note.svg

@@ -65,6 +65,7 @@ const iconsRootPath = 'assets/icons';
         { key: IconType.MoreVertical, url: `${iconsRootPath}/more-vertical.svg` },
         { key: IconType.NoData, url: `${iconsRootPath}/no-data.svg` },
         { key: IconType.Node, url: `${iconsRootPath}/node.svg` },
+        { key: IconType.Note, url: `${iconsRootPath}/note.svg` },
         { key: IconType.OpenInNewTab, url: `${iconsRootPath}/open-in-new-tab.svg` },
         { key: IconType.Search, url: `${iconsRootPath}/search.svg` },
         { key: IconType.SidebarCollapse, url: `${iconsRootPath}/sidebar-collapse.svg` },

projects/assets-library/src/icons/icon-library.module.ts

@@ -78,6 +78,7 @@ export const enum IconType {
   NoData = 'svg:noData',
   Node = 'node',
   None = 'none',
+  Note = 'svg:note',
   OpenInNewTab = 'svg:open-in-new-tab',
   PageView = 'pageview',
   Previous = 'navigate_before',

projects/assets-library/src/icons/icon-type.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { TypedSimpleChanges } from '@hypertrace/common';
-import { Observable } from 'rxjs';
+import { merge, Observable, Subject } from 'rxjs';
 import { ButtonSize, ButtonStyle } from '../button/button';
 import { PageEvent } from './page.event';
 import { PaginationProvider } from './paginator-api';
@@ -90,17 +90,26 @@ export class PaginatorComponent implements OnChanges, PaginationProvider {
   }
   private _totalItems: number = 0;
 
+  private readonly pageSizeInputSubject: Subject<PageEvent> = new Subject();
+
   @Output()
   public readonly pageChange: EventEmitter<PageEvent> = new EventEmitter();
 
-  public readonly pageEvent$: Observable<PageEvent> = this.pageChange.asObservable();
+  // Caused either by a change in the provided page, or user change being emitted
+  public readonly pageEvent$: Observable<PageEvent> = merge(this.pageChange, this.pageSizeInputSubject);
 
   public constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}
 
   public ngOnChanges(changes: TypedSimpleChanges<this>): void {
     if (changes.totalItems) {
       this.gotoFirstPage();
     }
+    if (changes.pageIndex || changes.pageSize) {
+      this.pageSizeInputSubject.next({
+        pageSize: this.pageSize,
+        pageIndex: this.pageIndex
+      });
+    }
   }
 
   public onPageSizeChange(pageSize: number): void {

projects/components/src/paginator/paginator.component.ts

@@ -42,7 +42,10 @@ $header-height: 32px;
   flex-direction: row;
   height: 44px;
   min-height: 44px;
-  cursor: pointer;
+
+  &.selectable {
+    cursor: pointer;
+  }
 
   &.selected-row {
     background: $blue-1;

projects/components/src/table/table.component.scss

@@ -24,7 +24,7 @@ import {
   TypedSimpleChanges
 } from '@hypertrace/common';
 import { without } from 'lodash-es';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
+import { BehaviorSubject, combineLatest, merge, Observable, Subject } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 import { FilterAttribute } from '../filtering/filter/filter-attribute';
 import { PageEvent } from '../paginator/page.event';
@@ -144,7 +144,11 @@ import { TableColumnConfigExtended, TableService } from './table.service';
           *cdkRowDef="let row; columns: this.visibleColumnIds$ | async"
           (mouseenter)="this.onDataRowMouseEnter(row)"
           (mouseleave)="this.onDataRowMouseLeave()"
-          [ngClass]="{ 'selected-row': this.shouldHighlightRowAsSelection(row), 'hovered-row': this.isHoveredRow(row) }"
+          [ngClass]="{
+            'selected-row': this.shouldHighlightRowAsSelection(row),
+            'hovered-row': this.isHoveredRow(row),
+            selectable: this.supportsRowSelection()
+          }"
           class="data-row"
         ></cdk-row>
 
@@ -168,7 +172,7 @@ import { TableColumnConfigExtended, TableService } from './table.service';
         [style.position]="this.isTableFullPage ? 'fixed' : 'sticky'"
       >
         <ht-paginator
-          *htLetAsync="this.pagination$ as pagination"
+          *htLetAsync="this.currentPage$ as pagination"
           (pageChange)="this.onPageChange($event)"
           [pageSizeOptions]="this.pageSizeOptions"
           [pageSize]="pagination?.pageSize"
@@ -335,9 +339,15 @@ export class TableComponent
   /*
    * Pagination
    */
-  public readonly pagination$: Observable<Partial<PageEvent> | undefined> = this.activatedRoute.queryParamMap.pipe(
-    map(params => this.getPagination(params))
-  );
+  // For pushing changes to the page explicitly
+  private readonly pageSubject: Subject<Partial<PageEvent>> = new Subject();
+  // When route, sort or filters change, reset pagination
+  public readonly paginationReset$: Observable<Partial<PageEvent>> = combineLatest([
+    this.activatedRoute.queryParamMap,
+    this.columnState$,
+    this.filters$
+  ]).pipe(map(([params]) => this.calculateDefaultPagination(params)));
+  public readonly currentPage$: Observable<Partial<PageEvent>> = merge(this.pageSubject, this.paginationReset$);
 
   public dataSource?: TableCdkDataSource;
   public isTableFullPage: boolean = false;
@@ -691,11 +701,16 @@ export class TableComponent
     return this.selectionMode === TableSelectionMode.Multiple;
   }
 
+  public supportsRowSelection(): boolean {
+    return this.hasMultiSelect() || this.hasSingleSelect();
+  }
+
   public isRowExpanded(row: StatefulTableRow): boolean {
     return this.hasExpandableRows() && row.$$state.expanded;
   }
 
   public onPageChange(pageEvent: PageEvent): void {
+    this.pageSubject.next(pageEvent);
     if (this.syncWithUrl) {
       this.navigationService.addQueryParametersToUrl({
         [TableComponent.PAGE_INDEX_URL_PARAM]: pageEvent.pageIndex,
@@ -711,7 +726,7 @@ export class TableComponent
     this.pageChange.emit(pageEvent);
   }
 
-  private getPagination(params: ParamMap): Partial<PageEvent> {
+  private calculateDefaultPagination(params: ParamMap): Partial<PageEvent> {
     return this.syncWithUrl
       ? {
           pageSize: new NumberCoercer({ defaultValue: this.pageSize }).coerce(