Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: enhance string array cell renderer to support view modes #2587

Merged
merged 5 commits into from
Dec 21, 2023
Merged

feat: enhance string array cell renderer to support view modes #2587

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33eb153
feat: enhance string array cell renderer to support view modes
arjunlalb Dec 21, 2023
805631c
Merge branch 'main' into enhance-string-array-cell-renderer
arjunlalb Dec 21, 2023
d6670e8
fix: make variable readonly
arjunlalb Dec 21, 2023
79e58e1
Merge branch 'enhance-string-array-cell-renderer' of github.com:hyper…
arjunlalb Dec 21, 2023
be95e28
fix: update init
arjunlalb Dec 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 25 additions & 5 deletions ...able/cells/data-renderers/string-array/string-array-table-cell-renderer.component.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import { FormattingModule } from '@hypertrace/common';
import { TableCellNoOpParser, XMoreComponent } from '@hypertrace/components';
import { tableCellColumnProvider, TableCellNoOpParser, XMoreComponent } from '@hypertrace/components';
import { createComponentFactory } from '@ngneat/spectator/jest';
import { MockComponent } from 'ng-mocks';
import { tableCellDataProvider, tableCellProviders } from '../../test/cell-providers';
import { StringArrayTableCellRendererComponent } from './string-array-table-cell-renderer.component';
import {
StringArrayTableCellDisplayMode,
StringArrayTableCellRendererComponent,
} from './string-array-table-cell-renderer.component';

describe('String array table cell renderer component', () => {
const buildComponent = createComponentFactory({
Expand All @@ -22,7 +25,7 @@ describe('String array table cell renderer component', () => {
shallow: true,
});

test('should render an array with one item as expected', () => {
test('should render an array with one item as expected; viewMode = list', () => {
const spectator = buildComponent({
providers: [tableCellDataProvider(['first-item'])],
});
Expand All @@ -31,7 +34,7 @@ describe('String array table cell renderer component', () => {
expect(spectator.query(XMoreComponent)?.count).toBe(0);
});

test('should render an empty array as expected', () => {
test('should render an empty array as expected; viewMode = list', () => {
const spectator = buildComponent({
providers: [tableCellDataProvider([])],
});
Expand All @@ -41,12 +44,29 @@ describe('String array table cell renderer component', () => {
expect(spectator.query(XMoreComponent)).not.toExist();
});

test('should render array with multiple items as expected', () => {
test('should render array with multiple items as expected; viewMode = list', () => {
const spectator = buildComponent({
providers: [tableCellDataProvider(['first-item', 'second-item', 'third-item'])],
});

expect(spectator.query('.first-item')).toHaveText('first-item');
expect(spectator.query(XMoreComponent)?.count).toBe(2);
});

test('should render array with multiple items as expected; viewMode = countWithListTooltip', () => {
const spectator = buildComponent({
providers: [
tableCellDataProvider(['first-item', 'second-item', 'third-item']),
tableCellColumnProvider({
id: 'test-id',
options: {
viewMode: StringArrayTableCellDisplayMode.CountWithListTooltip,
},
}),
],
});

expect(spectator.query('.first-item')).toHaveText('3');
expect(spectator.query(XMoreComponent)).not.toExist();
});
});
30 changes: 25 additions & 5 deletions ...src/table/cells/data-renderers/string-array/string-array-table-cell-renderer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,13 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
template: `
<div class="string-array-cell" [htTooltip]="this.value?.length > 0 ? summaryTooltip : undefined">
<ng-container *ngIf="this.value?.length > 0; else emptyValueTemplate">
<span class="first-item">{{ this.value[0] | htDisplayString }}</span>
<ht-x-more [count]="(this.value | slice: 1).length" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
<ng-container *ngIf="this.viewMode === '${StringArrayTableCellDisplayMode.List}'">
<span class="first-item">{{ this.value[0] | htDisplayString }}</span>
<ht-x-more [count]="(this.value | slice: 1).length" displayStyle="${XMoreDisplay.Gray}"></ht-x-more>
</ng-container>
<ng-container *ngIf="this.viewMode === '${StringArrayTableCellDisplayMode.CountWithListTooltip}'">
<span class="first-item">{{ this.value.length }}</span>
</ng-container>
</ng-container>

<ng-template #summaryTooltip>
Expand All @@ -43,20 +48,35 @@ import { TableCellAlignmentType } from '../../types/table-cell-alignment-type';
alignment: TableCellAlignmentType.Left,
parser: CoreTableCellParserType.NoOp,
})
export class StringArrayTableCellRendererComponent extends TableCellRendererBase<string[]> implements OnInit {
export class StringArrayTableCellRendererComponent
extends TableCellRendererBase<string[], string[], StringArrayTableCellConfigOptions>
implements OnInit {
public maxItemsInTooltip: number = 50;

protected viewMode: StringArrayTableCellDisplayMode = StringArrayTableCellDisplayMode.List;
public constructor(
@Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig,
@Inject(TABLE_COLUMN_CONFIG) columnConfig: TableColumnConfig<StringArrayTableCellConfigOptions>,
@Inject(TABLE_COLUMN_INDEX) index: number,
@Inject(TABLE_DATA_PARSER) parser: TableCellParserBase<string[], string[], boolean>,
@Inject(TABLE_CELL_DATA) cellData: string[],
@Inject(TABLE_ROW_DATA) rowData: TableRow,
) {
super(columnConfig, index, parser, cellData, rowData);

if (this.columnConfigOptions?.viewMode) {
this.viewMode = this.columnConfigOptions.viewMode;
}
arjunlalb marked this conversation as resolved.
Show resolved Hide resolved
}

public getOffsetLabel(count: number): string {
return count === 1 ? '+1 other' : `+${count} others`;
}
}

export const enum StringArrayTableCellDisplayMode {
List = 'list',
CountWithListTooltip = 'countWithListTooltip',
}

interface StringArrayTableCellConfigOptions {
viewMode: StringArrayTableCellDisplayMode;
}