Skip to content

Commit

Permalink
[Table Vis] move format table logic to table render and solidate types
Browse files Browse the repository at this point in the history
Currently, table data is formatted by a until function convertToFormattedData
in TableVisComponent. In this PR, we moved the formatting data process
to table_vis_response_handler.ts to combine with other data process
logics. In this way, component render and data handling logics are
completely isolated. This PR also solidate some types.

Issue Resolved:
#3395

Signed-off-by: Anan Zhuang <[email protected]>
  • Loading branch information
ananzh committed Feb 8, 2023
1 parent d9dc91d commit 8f7ceab
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const TableVisApp = ({

// TODO: remove duplicate sort and width state
// Issue: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2704#issuecomment-1299380818
const [sort, setSort] = useState<ColumnSort>({ colIndex: null, direction: null });
const [sort, setSort] = useState<ColumnSort>({ colIndex: undefined, direction: undefined });
const [width, setWidth] = useState<ColumnWidth[]>([]);

const tableUiState: TableUiState = { sort, setSort, width, setWidth };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,15 @@ import dompurify from 'dompurify';
import { EuiDataGridProps, EuiDataGrid, EuiDataGridSorting, EuiTitle } from '@elastic/eui';

import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
import { Table } from '../table_vis_response_handler';
import { FormattedTable } from '../table_vis_response_handler';
import { TableVisConfig, ColumnWidth, ColumnSort, TableUiState } from '../types';
import { getDataGridColumns } from './table_vis_grid_columns';
import { usePagination } from '../utils';
import { convertToFormattedData } from '../utils/convert_to_formatted_data';
import { TableVisControl } from './table_vis_control';

interface TableVisComponentProps {
title?: string;
table: Table;
table: FormattedTable;
visConfig: TableVisConfig;
event: IInterpreterRenderHandlers['event'];
uiState: TableUiState;
Expand All @@ -31,23 +30,18 @@ export const TableVisComponent = ({
event,
uiState,
}: TableVisComponentProps) => {
const { formattedRows: rows, formattedColumns: columns } = convertToFormattedData(
table,
visConfig
);
const { rows, columns } = table;

const pagination = usePagination(visConfig, rows.length);

const sortedRows = useMemo(() => {
return uiState.sort.colIndex !== null &&
columns[uiState.sort.colIndex].id &&
uiState.sort.direction
return uiState.sort.colIndex && columns[uiState.sort.colIndex].id && uiState.sort.direction
? orderBy(rows, columns[uiState.sort.colIndex].id, uiState.sort.direction)
: rows;
}, [columns, rows, uiState]);

const renderCellValue = useMemo(() => {
return (({ rowIndex, columnId }) => {
return (({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
const rawContent = sortedRows[rowIndex][columnId];
const colIndex = columns.findIndex((col) => col.id === columnId);
const htmlContent = columns[colIndex].formatter.convert(rawContent, 'html');
Expand All @@ -69,7 +63,7 @@ export const TableVisComponent = ({
const dataGridColumns = getDataGridColumns(sortedRows, columns, table, event, uiState.width);

const sortedColumns = useMemo(() => {
return uiState.sort.colIndex !== null &&
return uiState.sort.colIndex &&
dataGridColumns[uiState.sort.colIndex].id &&
uiState.sort.direction
? [{ id: dataGridColumns[uiState.sort.colIndex].id, direction: uiState.sort.direction }]
Expand All @@ -86,8 +80,8 @@ export const TableVisComponent = ({
direction: nextSortValue.direction,
}
: {
colIndex: null,
direction: null,
colIndex: undefined,
direction: undefined,
};
uiState.setSort(nextSort);
return nextSort;
Expand All @@ -96,7 +90,7 @@ export const TableVisComponent = ({
);

const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
({ columnId, width }) => {
({ columnId, width }: { columnId: string; width: number }) => {
const curWidth: ColumnWidth[] = uiState.width;
const nextWidth = [...curWidth];
const nextColIndex = columns.findIndex((col) => col.id === columnId);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,17 @@ export const TableVisComponentGroup = memo(
({ tableGroups, visConfig, event, uiState }: TableVisGroupComponentProps) => {
return (
<>
{tableGroups.map(({ tables, title }) => (
{tableGroups.map(({ table, title }) => (
<div key={title} className="visTable__group">
<TableVisComponent
title={title}
table={tables[0]}
visConfig={visConfig}
event={event}
uiState={uiState}
/>
{table ? (
<TableVisComponent
title={title}
table={table}
visConfig={visConfig}
event={event}
uiState={uiState}
/>
) : null}
</div>
))}
</>
Expand Down
38 changes: 28 additions & 10 deletions src/plugins/vis_type_table/public/table_vis_response_handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,20 @@

import { getFormatService } from './services';
import { OpenSearchDashboardsDatatable } from '../../expressions/public';
import { TableVisConfig } from './types';

import { FormattedColumn, TableVisConfig } from './types';
import { convertToFormattedData } from './utils/convert_to_formatted_data';
export interface Table {
columns: OpenSearchDashboardsDatatable['columns'];
rows: OpenSearchDashboardsDatatable['rows'];
}

export interface FormattedTable {
columns: FormattedColumn[];
rows: OpenSearchDashboardsDatatable['rows'];
}

export interface TableGroup {
table: OpenSearchDashboardsDatatable;
table?: FormattedTable;
tables: Table[];
title: string;
name: string;
Expand All @@ -48,7 +53,7 @@ export interface TableGroup {
}

export interface TableContext {
table?: Table;
table?: FormattedTable;
tableGroups: TableGroup[];
direction?: 'row' | 'column';
}
Expand All @@ -57,7 +62,7 @@ export function tableVisResponseHandler(
input: OpenSearchDashboardsDatatable,
config: TableVisConfig
): TableContext {
let table: Table | undefined;
let table: FormattedTable | undefined;
const tableGroups: TableGroup[] = [];
let direction: TableContext['direction'];

Expand All @@ -82,7 +87,7 @@ export function tableVisResponseHandler(
key: splitValue,
column: splitColumnIndex,
row: rowIndex,
table: input,
table: undefined,
tables: [],
};

Expand All @@ -97,11 +102,24 @@ export function tableVisResponseHandler(
const tableIndex = (splitMap as any)[splitValue];
(tableGroups[tableIndex] as any).tables[0].rows.push(row);
});

// format tables
tableGroups.forEach((tableGroup) => {
const { formattedRows: rows, formattedColumns: columns } = convertToFormattedData(
tableGroup.tables[0],
config
);
tableGroup.table = { rows, columns };
});
} else {
table = {
columns: input.columns,
rows: input.rows,
};
const { formattedRows: rows, formattedColumns: columns } = convertToFormattedData(
{
columns: input.columns,
rows: input.rows,
},
config
);
table = { rows, columns };
}

return {
Expand Down

0 comments on commit 8f7ceab

Please sign in to comment.