refactor: move some types around to make table api friendlier (#616)

Author: aaron-steinfeld

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

@@ -21,7 +21,7 @@ export interface CheckboxControl {
 
 export interface CheckboxChange {
   checkbox: CheckboxControl;
-  option: TableControlOption<unknown, boolean>;
+  option: TableControlOption<boolean>;
 }
 
 export const enum TableControlOptionType {
@@ -30,26 +30,29 @@ export const enum TableControlOptionType {
   UnsetFilter = 'unset-filter'
 }
 
-export interface TableControlOption<TMetaValue = unknown, TValue = unknown> {
-  type: TableControlOptionType;
-  label: string;
-  metaValue: TMetaValue; // Used in a query - type based on TableControlOptionType
-  value?: TValue; // If a control needs to carry a value, use this (example: checkbox boolean)
-}
+export type TableControlOption<T = unknown> =
+  | TableUnsetFilterControlOption<T>
+  | TableFilterControlOption<T>
+  | TablePropertyControlOption<T>;
 
-export interface TableUnsetFilterControlOption extends TableControlOption<string, undefined> {
+interface TableControlOptionBase<T> {
+  value?: T;
+}
+export interface TableUnsetFilterControlOption<T = unknown> extends TableControlOptionBase<T> {
   type: TableControlOptionType.UnsetFilter;
   metaValue: string;
 }
 
-export interface TableFilterControlOption extends TableControlOption<TableFilter> {
+export interface TableFilterControlOption<T = unknown> extends TableControlOptionBase<T> {
   type: TableControlOptionType.Filter;
   metaValue: TableFilter;
 }
 
-export interface TablePropertyControlOption extends TableControlOption<Dictionary<unknown>> {
+export interface TablePropertyControlOption<T = unknown> extends TableControlOptionBase<T> {
   type: TableControlOptionType.Property;
   metaValue: Dictionary<unknown>;
 }
 
-export type TableCheckboxOptions = [TableControlOption<unknown, true>, TableControlOption<unknown, false>];
+export type TableCheckboxControlOption<T extends boolean> = TableControlOption<T> & { label: string };
+
+export type TableCheckboxOptions = [TableCheckboxControlOption<true>, TableCheckboxControlOption<false>];

projects/distributed-tracing/src/public-api.ts

@@ -18,9 +18,7 @@ export * from './shared/graphql/request/builders/specification/trace/trace-statu
 // Dashboard Graphql
 export * from './shared/dashboard/data/graphql/filter/graphql-filter-data-source.model';
 export * from './shared/dashboard/data/graphql/filter/graphql-filter-data-source.model';
-export * from './shared/dashboard/data/graphql/graphql-table-control-options-data-source.model';
 export * from './shared/dashboard/data/graphql/graphql-data-source.model';
-export * from './shared/dashboard/data/graphql/graphql-table-control-options-data-source.model';
 export * from './shared/dashboard/data/graphql/graphql-query-event.service';
 export * from './shared/dashboard/data/graphql/graphql-data-source.module';
 export * from './shared/dashboard/data/graphql/specifiers/attribute-specification.model';

projects/distributed-tracing/src/shared/dashboard/data/graphql/graphql-table-control-options-data-source.model.ts

@@ -21,19 +21,19 @@ export abstract class TableWidgetControlModel {
   @ModelInject(MODEL_API)
   protected readonly api!: ModelApi;
 
-  public getOptions(): Observable<TableControlOption[]> {
-    return this.api.getData<TableControlOption[]>().pipe(
-      map((options: TableControlOption[]) => (this.uniqueValues ? this.filterUniqueValues(options) : options)),
-      map((options: TableControlOption[]) => (this.sort ? this.applySort(options) : options))
+  public getOptions(): Observable<LabeledTableControlOption[]> {
+    return this.api.getData<LabeledTableControlOption[]>().pipe(
+      map(options => (this.uniqueValues ? this.filterUniqueValues(options) : options)),
+      map(options => (this.sort ? this.applySort(options) : options))
     );
   }
 
-  private filterUniqueValues(options: TableControlOption[]): TableControlOption[] {
-    return uniqWith(options, (a: TableControlOption, b: TableControlOption) => a.value === b.value);
+  private filterUniqueValues(options: LabeledTableControlOption[]): LabeledTableControlOption[] {
+    return uniqWith(options, (a, b) => a.value === b.value);
   }
 
-  private applySort(options: TableControlOption[]): TableControlOption[] {
-    return options.sort((a: TableControlOption, b: TableControlOption) => {
+  private applySort(options: LabeledTableControlOption[]): LabeledTableControlOption[] {
+    return options.sort((a, b) => {
       // Unset option always at the top
       if (a.type === TableControlOptionType.UnsetFilter) {
         return -1;
@@ -46,3 +46,7 @@ export abstract class TableWidgetControlModel {
     });
   }
 }
+
+export type LabeledTableControlOption = TableControlOption & {
+  label: string;
+};

projects/distributed-tracing/src/shared/dashboard/widgets/table/table-widget-control.model.ts

@@ -14,11 +14,8 @@ import {
   FilterOperator,
   SelectChange,
   SelectControl,
-  SelectOption,
   StatefulTableRow,
-  TableCheckboxOptions,
   TableColumnConfig,
-  TableControlOption,
   TableControlOptionType,
   TableDataSource,
   TableFilter,
@@ -168,8 +165,8 @@ export class TableWidgetRendererComponent
         // Fetch the values for the selectFilter dropdown
         selectControlModel.getOptions().pipe(
           first(),
-          map((options: TableControlOption[]) => {
-            const selectOptions: SelectOption<TableControlOption>[] = options.map(option => ({
+          map(options => {
+            const selectOptions = options.map(option => ({
               label: option.label,
               value: option
             }));
@@ -189,7 +186,7 @@ export class TableWidgetRendererComponent
       this.model.getCheckboxControlOptions().map(checkboxControlModel =>
         checkboxControlModel.getOptions().pipe(
           first(),
-          map((options: TableCheckboxOptions) => ({
+          map(options => ({
             label: checkboxControlModel.checked ? options[0].label : options[1].label,
             value: checkboxControlModel.checked,
             options: options
@@ -278,28 +275,28 @@ export class TableWidgetRendererComponent
         );
         break;
       case TableControlOptionType.Filter:
-        this.selectFilterSubject.next(this.mergeFilters(changed.value.metaValue as TableFilter));
+        this.selectFilterSubject.next(this.mergeFilters(changed.value.metaValue));
         break;
       case TableControlOptionType.Property:
-        this.queryPropertiesSubject.next(this.mergeQueryProperties(changed.value.metaValue as Dictionary<unknown>));
+        this.queryPropertiesSubject.next(this.mergeQueryProperties(changed.value.metaValue));
         break;
       default:
-        assertUnreachable(changed.value.type);
+        assertUnreachable(changed.value);
     }
   }
 
   public onCheckboxChange(changed: CheckboxChange): void {
     switch (changed.option.type) {
       case TableControlOptionType.Property:
-        this.queryPropertiesSubject.next(this.mergeQueryProperties(changed.option.metaValue as Dictionary<unknown>));
+        this.queryPropertiesSubject.next(this.mergeQueryProperties(changed.option.metaValue));
         break;
       case TableControlOptionType.Filter:
-        this.selectFilterSubject.next(this.mergeFilters(changed.option.metaValue as TableFilter));
+        this.selectFilterSubject.next(this.mergeFilters(changed.option.metaValue));
         break;
       case TableControlOptionType.UnsetFilter:
         break; // Not supported - No use case yet
       default:
-        assertUnreachable(changed.option.type);
+        assertUnreachable(changed.option);
     }
 
     // Update checkbox option label
@@ -308,7 +305,7 @@ export class TableWidgetRendererComponent
       this.model.getCheckboxControlOptions().map(checkboxControlModel =>
         checkboxControlModel.getOptions().pipe(
           first(),
-          map((options: TableCheckboxOptions) => {
+          map(options => {
             options.forEach(option => {
               if (option === changed.option) {
                 checkboxControlModel.checked = changed.option.value === true;

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

@@ -1,8 +1,7 @@
 import {
   FilterOperator,
-  TableControlOption,
   TableControlOptionType,
-  TableFilter,
+  TableFilterControlOption,
   TableUnsetFilterControlOption
 } from '@hypertrace/components';
 import { Model, ModelProperty, STRING_PROPERTY } from '@hypertrace/hyperdash';
@@ -21,20 +20,20 @@ export class EntitiesAttributeOptionsDataSourceModel extends EntitiesAttributeDa
   })
   public unsetLabel: string = 'All';
 
-  private buildUnsetOption(attribute: string): TableUnsetFilterControlOption {
+  private buildUnsetOption(attribute: string): Labeled<TableUnsetFilterControlOption> {
     return {
       type: TableControlOptionType.UnsetFilter,
       label: this.unsetLabel,
       metaValue: attribute
     };
   }
 
-  public getData(): Observable<TableControlOption<TableFilter | string>[]> {
+  public getData(): Observable<(Labeled<TableUnsetFilterControlOption> | Labeled<TableFilterControlOption>)[]> {
     return super.getData().pipe(
       map((values: unknown[]) => [
         this.buildUnsetOption(this.specification.name),
         ...values.map(value => ({
-          type: TableControlOptionType.Filter,
+          type: TableControlOptionType.Filter as const,
           label: String(value),
           value: value,
           metaValue: {
@@ -47,3 +46,5 @@ export class EntitiesAttributeOptionsDataSourceModel extends EntitiesAttributeDa
     );
   }
 }
+
+type Labeled<T> = T & { label: string };