From 5aac0d8b0aec87f42eff89958d868eec9b1a7d80 Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Fri, 21 Oct 2022 17:36:33 -0700 Subject: [PATCH] [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: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2579#issuecomment-1281078065 Signed-off-by: Anan Zhuang Signed-off-by: Anan Zhuang --- .../public/components/table_vis_component.tsx | 40 +++++++++---------- src/plugins/vis_type_table/public/types.ts | 2 +- .../public/utils/use_pagination.ts | 11 ++--- 3 files changed, 25 insertions(+), 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 index fb47e6160014..385577ee1655 100644 --- 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,14 +70,17 @@ 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] @@ -92,22 +88,22 @@ export const TableVisComponent = ({ 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 index cc5a17b6cfd0..6355044556ab 100644 --- 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 index 13b423147471..41bb31d34086 100644 --- 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( () => ({