feat: adding a custom control template option for table (hypertrace#1189)

* feat: adding a custom control template option for table

* refactor: adding interaction controls

* refactor: updating tests

Author: anandtiwary

projects/components/src/table/controls/table-controls.component.ts

@@ -6,14 +6,16 @@ import {
   IterableDiffer,
   IterableDiffers,
   OnChanges,
-  Output
+  Output,
+  TemplateRef
 } from '@angular/core';
 import { IconType } from '@hypertrace/assets-library';
 import { TypedSimpleChanges } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
 import { MultiSelectJustify } from '../../multi-select/multi-select-justify';
 import { MultiSelectSearchMode, TriggerLabelDisplayMode } from '../../multi-select/multi-select.component';
 import { ToggleItem } from '../../toggle-group/toggle-item';
+import { StatefulTableRow } from '../table-api';
 import {
   TableCheckboxChange,
   TableCheckboxControl,
@@ -86,6 +88,13 @@ import {
           [activeItem]="this.activeViewItem"
           (activeItemChange)="this.onViewChange($event)"
         ></ht-toggle-group>
+
+        <!-- Custom Control -->
+        <ng-container *ngIf="this.customControlContent">
+          <ng-container
+            *ngTemplateOutlet="this.customControlContent; context: { selectedRows: this.selectedRows }"
+          ></ng-container>
+        </ng-container>
       </div>
     </div>
   `
@@ -114,6 +123,12 @@ export class TableControlsComponent implements OnChanges {
   @Input()
   public activeViewItem?: ToggleItem;
 
+  @Input()
+  public selectedRows?: StatefulTableRow[] = [];
+
+  @Input()
+  public customControlContent?: TemplateRef<{ selectedRows?: StatefulTableRow[] }>;
+
   @Output()
   public readonly searchChange: EventEmitter<string> = new EventEmitter<string>();
 

projects/components/src/table/table.component.test.ts

@@ -60,7 +60,7 @@ describe('Table component', () => {
         queryParamMap: EMPTY
       }),
       mockProvider(DomElementMeasurerService, {
-        measureHtmlElement: (): ClientRect => ({
+        measureHtmlElement: (): Partial<ClientRect> => ({
           top: 0,
           left: 0,
           bottom: 20,
@@ -397,37 +397,6 @@ describe('Table component', () => {
     });
   }));
 
-  test('should trigger toggle row selection for multi row select config', () => {
-    const columns = buildColumns();
-    const spectator = createHost(
-      `<ht-table [columnConfigs]="columnConfigs" [data]="data" [selectionMode]="selectionMode"
-         [mode]="mode" (selectionsChange)="selectionsChange($event)"></ht-table>`,
-      {
-        hostProps: {
-          columnConfigs: columns,
-          data: buildData(),
-          selectionMode: TableSelectionMode.Multiple,
-          mode: TableMode.Flat
-        }
-      }
-    );
-
-    const row: StatefulTableRow = {
-      $$state: {
-        parent: undefined,
-        expanded: false,
-        selected: false,
-        root: false,
-        leaf: true,
-        depth: 1
-      }
-    };
-
-    const spyToggleRowSelection = spyOn(spectator.component, 'toggleRowSelected');
-    spectator.component.onDataCellClick(row);
-    expect(spyToggleRowSelection).toHaveBeenCalledWith(row);
-  });
-
   test('should emit selections on toggle select', () => {
     const mockSelectionsChange = jest.fn();
     const columns = buildColumns();

projects/components/src/table/table.component.ts

@@ -272,6 +272,9 @@ export class TableComponent
   @Input()
   public pageSize?: number = 50;
 
+  @Output()
+  public readonly rowClicked: EventEmitter<StatefulTableRow> = new EventEmitter<StatefulTableRow>();
+
   @Output()
   public readonly selectionsChange: EventEmitter<StatefulTableRow[]> = new EventEmitter<StatefulTableRow[]>();
 
@@ -548,9 +551,7 @@ export class TableComponent
   }
 
   public onDataRowClick(row: StatefulTableRow): void {
-    if (this.hasSelectableRows()) {
-      this.toggleRowSelected(row);
-    }
+    this.rowClicked.emit(row);
   }
 
   public onDataRowMouseEnter(row: StatefulTableRow): void {
@@ -695,10 +696,6 @@ export class TableComponent
     return this.isDetailType() && row.$$state.expanded;
   }
 
-  public hasSelectableRows(): boolean {
-    return this.hasSingleSelect() || this.hasMultiSelect();
-  }
-
   public hasSingleSelect(): boolean {
     return this.selectionMode === TableSelectionMode.Single;
   }

projects/observability/src/shared/dashboard/widgets/table/selections/table-widget-row-selection.model.test.ts renamed to projects/observability/src/shared/dashboard/widgets/table/selections/table-widget-row-interaction.model.test.ts

@@ -1,8 +1,8 @@
-import { TableWidgetRowSelectionModel } from './table-widget-row-selection.model';
+import { TableWidgetRowInteractionModel } from './table-widget-row-interaction.model';
 
-describe('TableWidgetRowSelectionModel applies to current row depth', () => {
+describe('TableWidgetRowInteractionModel applies to current row depth', () => {
   test('works for default properties', () => {
-    const model = new TableWidgetRowSelectionModel();
+    const model = new TableWidgetRowInteractionModel();
     model.handler = {
       execute: jest.fn()
     };
@@ -13,7 +13,7 @@ describe('TableWidgetRowSelectionModel applies to current row depth', () => {
   });
 
   test('works for higher row depth', () => {
-    const model = new TableWidgetRowSelectionModel();
+    const model = new TableWidgetRowInteractionModel();
     model.handler = {
       execute: jest.fn()
     };
@@ -26,7 +26,7 @@ describe('TableWidgetRowSelectionModel applies to current row depth', () => {
   });
 
   test('works correctly when applyToChildRows is false', () => {
-    const model = new TableWidgetRowSelectionModel();
+    const model = new TableWidgetRowInteractionModel();
     model.handler = {
       execute: jest.fn()
     };

projects/observability/src/shared/dashboard/widgets/table/selections/table-widget-row-selection.model.ts renamed to projects/observability/src/shared/dashboard/widgets/table/selections/table-widget-row-interaction.model.ts

@@ -2,10 +2,10 @@ import { BOOLEAN_PROPERTY, Model, ModelProperty, ModelPropertyType, NUMBER_PROPE
 import { InteractionHandler } from '../../../interaction/interaction-handler';
 
 @Model({
-  type: 'table-widget-row-selection',
+  type: 'table-widget-row-interaction',
   displayName: 'Row Selection'
 })
-export class TableWidgetRowSelectionModel {
+export class TableWidgetRowInteractionModel {
   @ModelProperty({
     key: 'handler',
     displayName: 'Selection Handler',

projects/observability/src/shared/dashboard/widgets/table/table-widget-base.model.ts

@@ -17,7 +17,7 @@ import {
 } from '@hypertrace/hyperdash';
 import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 import { Observable } from 'rxjs';
-import { TableWidgetRowSelectionModel } from './selections/table-widget-row-selection.model';
+import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
 import { SpecificationBackedTableColumnDef } from './table-widget-column.model';
 import { TableWidgetControlCheckboxOptionModel } from './table-widget-control-checkbox-option.model';
 import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
@@ -121,16 +121,11 @@ export abstract class TableWidgetBaseModel extends BaseModel {
     return this.api.getData<TableDataSource<TableRow>>();
   }
 
-  public getRowSelectionHandlers(_row: TableRow): TableWidgetRowSelectionModel[] {
+  public getRowSelectionHandlers(_row: TableRow): TableWidgetRowInteractionModel[] {
     // No-op here, but can be overridden
     return [];
   }
 
-  public getSelectionMode(): TableSelectionMode {
-    // No-op here, but can be overridden
-    return TableSelectionMode.Single;
-  }
-
   public setView(_view: string): void {
     // No-op here, but can be overridden
     return;
@@ -141,6 +136,11 @@ export abstract class TableWidgetBaseModel extends BaseModel {
     return [];
   }
 
+  public abstract getRowClickHandlers(): TableWidgetRowInteractionModel[];
+  public abstract getSelectionMode(): TableSelectionMode;
+  public abstract isCustomControlPresent(): boolean;
+  public abstract getCustomControlWidgetModel(selectedRows?: TableRow[]): object | undefined;
+
   public getSearchAttribute(): string | undefined {
     return this.searchAttribute;
   }

projects/observability/src/shared/dashboard/widgets/table/table-widget-renderer.component.ts

@@ -22,7 +22,6 @@ import {
   TableRow,
   TableSelectChange,
   TableSelectControl,
-  TableSelectionMode,
   TableStyle,
   ToggleItem,
   toInFilter
@@ -36,6 +35,7 @@ import { filter, map, pairwise, share, startWith, switchMap, take, tap, withLate
 import { AttributeMetadata, toFilterAttributeType } from '../../../graphql/model/metadata/attribute-metadata';
 import { MetadataService } from '../../../services/metadata/metadata.service';
 import { InteractionHandler } from '../../interaction/interaction-handler';
+import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
 import { TableWidgetBaseModel } from './table-widget-base.model';
 import { SpecificationBackedTableColumnDef } from './table-widget-column.model';
 import { TableWidgetViewToggleModel } from './table-widget-view-toggle.model';
@@ -61,6 +61,8 @@ import { TableWidgetModel } from './table-widget.model';
           [searchPlaceholder]="this.api.model.getSearchPlaceholder()"
           [selectControls]="this.selectControls$ | async"
           [checkboxControls]="this.checkboxControls$ | async"
+          [selectedRows]="this.selectedRows"
+          [customControlContent]="(this.isCustomControlPresent | htMemoize) ? customControlDetail : undefined"
           [viewItems]="this.viewItems"
           (searchChange)="this.onSearchChange($event)"
           (selectChange)="this.onSelectChange($event)"
@@ -83,6 +85,7 @@ import { TableWidgetModel } from './table-widget.model';
           [resizable]="this.api.model.isResizable()"
           [detailContent]="childDetail"
           [syncWithUrl]="this.syncWithUrl"
+          (rowClicked)="this.onRowClicked($event)"
           (selectionsChange)="this.onRowSelection($event)"
           (columnConfigsChange)="this.onColumnsChange($event)"
         >
@@ -93,6 +96,10 @@ import { TableWidgetModel } from './table-widget.model';
     <ng-template #childDetail let-row="row">
       <ng-container [hdaDashboardModel]="this.getChildModel | htMemoize: row"></ng-container>
     </ng-template>
+
+    <ng-template #customControlDetail let-selectedRows="selectedRows">
+      <ng-container [hdaDashboardModel]="this.getCustomControlWidgetModel | htMemoize: selectedRows"></ng-container>
+    </ng-template>
   `
 })
 export class TableWidgetRendererComponent
@@ -107,6 +114,8 @@ export class TableWidgetRendererComponent
   public columnConfigs$!: Observable<TableColumnConfig[]>;
   public combinedFilters$!: Observable<TableFilter[]>;
 
+  public selectedRows?: StatefulTableRow[] = [];
+
   private readonly toggleFilterSubject: Subject<TableFilter[]> = new BehaviorSubject<TableFilter[]>([]);
   private readonly searchFilterSubject: Subject<TableFilter[]> = new BehaviorSubject<TableFilter[]>([]);
   private readonly selectFilterSubject: BehaviorSubject<TableFilter[]> = new BehaviorSubject<TableFilter[]>([]);
@@ -116,8 +125,6 @@ export class TableWidgetRendererComponent
   >({});
   public queryProperties$: Observable<Dictionary<unknown>> = this.queryPropertiesSubject.asObservable();
 
-  private selectedRowInteractionHandler?: InteractionHandler;
-
   public constructor(
     @Inject(RENDERER_API) api: RendererApi<TableWidgetModel>,
     changeDetectorRef: ChangeDetectorRef,
@@ -152,6 +159,11 @@ export class TableWidgetRendererComponent
 
   public getChildModel = (row: TableRow): object | undefined => this.model.getChildModel(row);
 
+  public isCustomControlPresent = (): boolean => this.model.isCustomControlPresent();
+
+  public getCustomControlWidgetModel = (selectedRows?: TableRow[]): object | undefined =>
+    this.model.getCustomControlWidgetModel(selectedRows);
+
   protected fetchData(): Observable<TableDataSource<TableRow> | undefined> {
     return this.model.getData().pipe(
       startWith(undefined),
@@ -368,28 +380,30 @@ export class TableWidgetRendererComponent
     }
   }
 
+  public onRowClicked(row: StatefulTableRow): void {
+    this.getRowClickInteractionHandler(row)?.execute(row);
+  }
+
   public onRowSelection(selections: StatefulTableRow[]): void {
-    if (this.api.model.getSelectionMode() === TableSelectionMode.Single) {
-      /**
-       * Execute selection handler for single selection mode only
-       */
-      let selectedRow;
-      if (selections.length > 0) {
-        selectedRow = selections[0];
-        this.selectedRowInteractionHandler = this.getInteractionHandler(selectedRow);
-      }
-
-      this.selectedRowInteractionHandler?.execute(selectedRow);
-    }
+    this.selectedRows = selections;
+    /**
+     * Todo: Stich this with selection handlers
+     */
+  }
+
+  private getRowClickInteractionHandler(selectedRow: StatefulTableRow): InteractionHandler | undefined {
+    return this.getInteractionHandler(selectedRow, this.api.model.getRowClickHandlers());
   }
 
-  private getInteractionHandler(selectedRow: StatefulTableRow): InteractionHandler | undefined {
-    const matchedSelectionHandlers = this.api.model
-      .getRowSelectionHandlers(selectedRow)
-      ?.filter(selectionModel => selectionModel.appliesToCurrentRowDepth(selectedRow.$$state.depth))
+  private getInteractionHandler(
+    row: StatefulTableRow,
+    rowHandlers: TableWidgetRowInteractionModel[] = []
+  ): InteractionHandler | undefined {
+    const matchedHandlers = rowHandlers
+      .filter(interactionModel => interactionModel.appliesToCurrentRowDepth(row.$$state.depth))
       .sort((model1, model2) => model2.rowDepth - model1.rowDepth);
 
-    return !isEmpty(matchedSelectionHandlers) ? matchedSelectionHandlers[0].handler : undefined;
+    return !isEmpty(matchedHandlers) ? matchedHandlers[0].handler : undefined;
   }
 
   private pickPersistColumnProperties(column: TableColumnConfig): Pick<TableColumnConfig, 'id' | 'visible'> {

projects/observability/src/shared/dashboard/widgets/table/table-widget-view-toggle.model.ts

@@ -1,9 +1,9 @@
-import { TableDataSource, TableRow } from '@hypertrace/components';
+import { TableDataSource, TableRow, TableSelectionMode } from '@hypertrace/components';
 import { ArrayPropertyTypeInstance } from '@hypertrace/dashboards';
 import { ARRAY_PROPERTY, Model, ModelApi, ModelOnInit, ModelProperty, ModelPropertyType } from '@hypertrace/hyperdash';
 import { ModelInject, MODEL_API } from '@hypertrace/hyperdash-angular';
 import { NEVER, Observable } from 'rxjs';
-import { TableWidgetRowSelectionModel } from './selections/table-widget-row-selection.model';
+import { TableWidgetRowInteractionModel } from './selections/table-widget-row-interaction.model';
 import { SpecificationBackedTableColumnDef } from './table-widget-column.model';
 import { TableWidgetControlCheckboxOptionModel } from './table-widget-control-checkbox-option.model';
 import { TableWidgetControlSelectOptionModel } from './table-widget-control-select-option.model';
@@ -73,7 +73,23 @@ export class TableWidgetViewToggleModel extends TableWidgetModel implements Mode
     return this.delegateModel && this.delegateModel?.getChildModel(row);
   }
 
-  public getRowSelectionHandlers(row: TableRow): TableWidgetRowSelectionModel[] {
+  public getSelectionMode(): TableSelectionMode {
+    return this.delegateModel?.getSelectionMode() ?? TableSelectionMode.Single;
+  }
+
+  public isCustomControlPresent(): boolean {
+    return this.delegateModel?.isCustomControlPresent() ?? false;
+  }
+
+  public getCustomControlWidgetModel(selectedRows?: TableRow[]): object | undefined {
+    return this.delegateModel && this.delegateModel?.getCustomControlWidgetModel(selectedRows);
+  }
+
+  public getRowClickHandlers(): TableWidgetRowInteractionModel[] {
+    return this.delegateModel?.getRowClickHandlers() ?? [];
+  }
+
+  public getRowSelectionHandlers(row: TableRow): TableWidgetRowInteractionModel[] {
     return this.delegateModel && this.delegateModel?.getRowSelectionHandlers(row).length > 0
       ? this.delegateModel?.getRowSelectionHandlers(row)
       : [];