[Table Vis] move format table logic to table render and solidate types

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]>
opensearch-project · Feb 8, 2023 · 8f7ceab · 8f7ceab
1 parent d9dc91d
commit 8f7ceab
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 34 deletions.
diff --git a/src/plugins/vis_type_table/public/components/table_vis_app.tsx b/src/plugins/vis_type_table/public/components/table_vis_app.tsx
@@ -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 };

diff --git a/src/plugins/vis_type_table/public/components/table_vis_component.tsx b/src/plugins/vis_type_table/public/components/table_vis_component.tsx
@@ -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;
@@ -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');
@@ -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 }]
@@ -86,8 +80,8 @@ export const TableVisComponent = ({
               direction: nextSortValue.direction,
             }
           : {
-              colIndex: null,
-              direction: null,
+              colIndex: undefined,
+              direction: undefined,
             };
       uiState.setSort(nextSort);
       return nextSort;
@@ -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);

diff --git a/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx b/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx
@@ -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>
         ))}
       </>

diff --git a/src/plugins/vis_type_table/public/table_vis_response_handler.ts b/src/plugins/vis_type_table/public/table_vis_response_handler.ts
@@ -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;
@@ -48,7 +53,7 @@ export interface TableGroup {
 }
 
 export interface TableContext {
-  table?: Table;
+  table?: FormattedTable;
   tableGroups: TableGroup[];
   direction?: 'row' | 'column';
 }
@@ -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'];
 
@@ -82,7 +87,7 @@ export function tableVisResponseHandler(
           key: splitValue,
           column: splitColumnIndex,
           row: rowIndex,
-          table: input,
+          table: undefined,
           tables: [],
         };
 
@@ -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 {