[Table Visualization][BUG] remove local column width state (#2582)

* remove local col width state to allow split tables to fetch updated col width state * fix type errors in usePagination Partially resolved: #2579 (comment) Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]>
opensearch-project · Oct 22, 2022 · 5aac0d8 · 5aac0d8
1 parent c12b7c2
commit 5aac0d8
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 28 deletions.
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
@@ -35,13 +35,6 @@ export const TableVisComponent = ({
 
   const pagination = usePagination(visConfig, rows.length);
 
-  // store current state
-  const currentColState = useRef<{
-    columnsWidth: ColumnWidth[];
-  }>({
-    columnsWidth: handlers.uiState.get('vis.columnsWidth') || [],
-  });
-
   const sortedRows = useMemo(() => {
     const sort = handlers.uiState.get('vis.sortColumn');
     return sort && sort.colIndex !== null && sort.direction
@@ -66,7 +59,7 @@ export const TableVisComponent = ({
     columns,
     table,
     handlers,
-    currentColState.current.columnsWidth
+    handlers.uiState.get('vis.columnsWidth') || []
   );
 
   const sortedColumns = useMemo(() => {
@@ -77,37 +70,40 @@ export const TableVisComponent = ({
   }, [handlers.uiState, dataGridColumns]);
 
   const onSort = useCallback(
-    (sortingCols: EuiDataGridSorting['columns']) => {
+    (sortingCols: EuiDataGridSorting['columns'] | []) => {
       const nextSortValue = sortingCols[sortingCols.length - 1];
-      const nextSort = {
-        colIndex: dataGridColumns.findIndex((col) => col.id === nextSortValue?.id),
-        direction: nextSortValue.direction,
-      };
+      const nextSort =
+        sortingCols.length > 0
+          ? {
+              colIndex: dataGridColumns.findIndex((col) => col.id === nextSortValue?.id),
+              direction: nextSortValue.direction,
+            }
+          : [];
       handlers.uiState.set('vis.sortColumn', nextSort);
-      handlers.uiState?.emit('reload');
+      handlers.uiState.emit('reload');
       return nextSort;
     },
     [dataGridColumns, handlers.uiState]
   );
 
   const onColumnResize: EuiDataGridProps['onColumnResize'] = useCallback(
     ({ columnId, width }) => {
-      const prevState: ColumnWidth[] = currentColState.current.columnsWidth;
+      const curState: ColumnWidth[] = handlers.uiState.get('vis.columnsWidth') || [];
+      const nextState = [...curState];
       const nextColIndex = columns.findIndex((col) => col.id === columnId);
-      const prevColIndex = prevState.findIndex((col) => col.colIndex === nextColIndex);
-      const nextState = [...prevState];
-      const updatedColWidth = { colIndex: nextColIndex, width };
+      const curColIndex = curState.findIndex((col) => col.colIndex === nextColIndex);
+      const nextColWidth = { colIndex: nextColIndex, width };
 
       // if updated column index is not found, then add it to nextState
       // else reset it in nextState
-      if (prevColIndex < 0) nextState.push(updatedColWidth);
-      else nextState[prevColIndex] = updatedColWidth;
+      if (curColIndex < 0) nextState.push(nextColWidth);
+      else nextState[curColIndex] = nextColWidth;
 
       // update uiState
-      currentColState.current.columnsWidth = nextState;
       handlers.uiState.set('vis.columnsWidth', nextState);
+      handlers.uiState.emit('reload');
     },
-    [columns, currentColState, handlers.uiState]
+    [columns, handlers.uiState]
   );
 
   const ariaLabel = title || visConfig.title || 'tableVis';

diff --git a/src/plugins/vis_type_table/public/types.ts b/src/plugins/vis_type_table/public/types.ts
@@ -48,7 +48,7 @@ export interface TableVisConfig extends TableVisParams {
 }
 
 export interface TableVisParams {
-  perPage: number;
+  perPage: number | '';
   showPartialRows: boolean;
   showMetricsAtAllLevels: boolean;
   showTotal: boolean;

diff --git a/src/plugins/vis_type_table/public/utils/use_pagination.ts b/src/plugins/vis_type_table/public/utils/use_pagination.ts
@@ -6,10 +6,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { TableVisConfig } from '../types';
 
-export const usePagination = (visConfig: TableVisConfig, nrow: number) => {
+export const usePagination = (visConfig: TableVisConfig, nRow: number) => {
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: visConfig.perPage,
+    pageSize: visConfig.perPage || 0,
   });
   const onChangeItemsPerPage = useCallback(
     (pageSize) => setPagination((p) => ({ ...p, pageSize, pageIndex: 0 })),
@@ -20,12 +20,13 @@ export const usePagination = (visConfig: TableVisConfig, nrow: number) => {
   ]);
 
   useEffect(() => {
-    const maxiPageIndex = Math.ceil(nrow / visConfig.perPage) - 1;
+    const perPage = visConfig.perPage || 0;
+    const maxiPageIndex = Math.ceil(nRow / perPage) - 1;
     setPagination((p) => ({
       pageIndex: p.pageIndex > maxiPageIndex ? maxiPageIndex : p.pageIndex,
-      pageSize: visConfig.perPage,
+      pageSize: perPage,
     }));
-  }, [nrow, visConfig.perPage]);
+  }, [nRow, visConfig.perPage]);
 
   return useMemo(
     () => ({