From 3bc11d51dfb9b3f0fa5864ea90733d592a065af1 Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Mon, 29 Jan 2024 20:02:34 +0000 Subject: [PATCH] sorting Signed-off-by: abbyhu2000 --- .../components/data_grid/data_grid_table.tsx | 63 ++++++++++--------- .../default_discover_table.tsx | 9 ++- .../default_discover_table/table_header.tsx | 14 +++-- .../table_header_column.tsx | 57 ++++++++++++----- .../view_components/canvas/discover_table.tsx | 1 + 5 files changed, 88 insertions(+), 56 deletions(-) diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx index fca0ab853ae5..c8eb08b0b082 100644 --- a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx +++ b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx @@ -140,6 +140,8 @@ export const DataGridTable = ({ ]; }, []); + console.log("sortOrders", sortingColumns) + const table = useMemo( () => ( // ( - - ), - [ - displayedTableColumns, - dataGridTableColumnsVisibility, - leadingControlColumns, - pagination, - renderCellValue, - rowCount, - sorting, - isToolbarVisible, - rowHeightsOptions, - ] - ); + // const dataGridTable = useMemo( + // () => ( + // + // ), + // [ + // displayedTableColumns, + // dataGridTableColumnsVisibility, + // leadingControlColumns, + // pagination, + // renderCellValue, + // rowCount, + // sorting, + // isToolbarVisible, + // rowHeightsOptions, + // ] + // ); console.log('adjustColumns higher level', adjustedColumns); return ( @@ -232,7 +234,6 @@ export const DataGridTable = ({ > {table} - {dataGridTable} {inspectedHit && ( void; + sortOrder: { + id: string; + direction: "asc" | "desc"; +}[]; + onChangeSortOrder: (cols: EuiDataGridSorting['columns']) => void; onRemoveColumn: (column: string) => void; onReorderColumn: (col: string, source: number, destination: number) => void; onAddColumn: (column: string) => void; diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx index d0c7457960fe..82fe36dd9dc4 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx @@ -12,7 +12,7 @@ import './_table_header.scss'; import React from 'react'; -import { EuiDataGridColumn } from '@elastic/eui'; +import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui'; import { IndexPattern } from '../../../opensearch_dashboards_services'; import { SortOrder, getDefaultSort } from '../../view_components/utils/get_default_sort'; import { TableHeaderColumn } from './table_header_column'; @@ -24,10 +24,13 @@ interface Props { // hideTimeColumn: boolean; indexPattern: IndexPattern; // isShortDots: boolean; - onChangeSortOrder?: (sortOrder: SortOrder[]) => void; + onChangeSortOrder?: (cols: EuiDataGridSorting['columns']) => void; onMoveColumn?: (name: string, index: number) => void; onRemoveColumn?: (name: string) => void; - sortOrder: SortOrder[]; + sortOrder: { + id: string; + direction: "desc" | "asc"; +}[]; } export function TableHeader({ @@ -72,9 +75,10 @@ export function TableHeader({ displayName={col.display} isRemoveable={col.actions && col.actions.showHide ? true : false} isSortable={col.isSortable} - name={col.display} + name={col.display as string} sortOrder={ - sortOrder.length ? sortOrder : getDefaultSort(indexPattern, defaultSortOrder) + sortOrder.length ? sortOrder : [] + //getDefaultSort(indexPattern, defaultSortOrder).map(([id, direction]) => ({ id, direction })) } onReorderColumn={onReorderColumn} onRemoveColumn={onRemoveColumn} diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx index 82dc0c37e4b0..6826be1dc6db 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx @@ -13,7 +13,7 @@ import './_table_header.scss'; import React, { ReactNode } from 'react'; import { i18n } from '@osd/i18n'; -import { EuiButtonIcon, EuiFieldText, EuiIcon, EuiToolTip } from '@elastic/eui'; +import { EuiButtonIcon, EuiDataGridSorting, EuiFieldText, EuiIcon, EuiToolTip } from '@elastic/eui'; import { SortOrder } from '../../view_components/utils/get_default_sort'; interface Props { @@ -22,12 +22,15 @@ interface Props { colRightIdx: number; // idx of the column to the right, -1 if moving is not possible displayName: ReactNode; isRemoveable: boolean; - isSortable: boolean; - name?: string | ReactNode; - onChangeSortOrder?: (sortOrder: SortOrder[]) => void; + isSortable?: boolean; + name: string; + onChangeSortOrder?: (cols: EuiDataGridSorting['columns']) => void; onMoveColumn?: (name: string, idx: number) => void; onRemoveColumn?: (name: string) => void; - sortOrder: SortOrder[]; + sortOrder: { + id: string; + direction: "desc" | "asc"; +}[]; } const sortDirectionToIcon: Record = { @@ -49,27 +52,47 @@ export function TableHeaderColumn({ onRemoveColumn, sortOrder, }: Props) { - const [, sortDirection = ''] = sortOrder.find((sortPair) => name === sortPair[0]) || []; - const currentSortWithoutColumn = sortOrder.filter((pair) => pair[0] !== name); - const currentColumnSort = sortOrder.find((pair) => pair[0] === name); - const currentColumnSortDirection = (currentColumnSort && currentColumnSort[1]) || ''; + //const [, sortDirection = ''] = sortOrder.find((sortPair) => name === sortPair.id) || []; + const currentSortWithoutColumn = sortOrder.filter((pair) => pair.id !== name); + const currentColumnSort = sortOrder.find((pair) => pair.id === name); + const currentColumnSortDirection = (currentColumnSort && currentColumnSort.direction) || ''; - const btnSortIcon = sortDirectionToIcon[sortDirection]; + const btnSortIcon = sortDirectionToIcon[currentColumnSortDirection]; const btnSortClassName = - sortDirection !== '' ? btnSortIcon : `osdDocTableHeader__sortChange ${btnSortIcon}`; + currentColumnSortDirection !== '' ? btnSortIcon : `osdDocTableHeader__sortChange ${btnSortIcon}`; const handleChangeSortOrder = () => { if (!onChangeSortOrder) return; + let currentSortOrder; + let newSortOrder: { + id: string; + direction: "desc" | "asc"; + }; // Cycle goes Unsorted -> Asc -> Desc -> Unsorted if (currentColumnSort === undefined) { - onChangeSortOrder([...currentSortWithoutColumn, [name, 'asc']]); + newSortOrder = { + id: name, + direction: "asc" + } + currentSortOrder = [...currentSortWithoutColumn, newSortOrder] + onChangeSortOrder(currentSortOrder); } else if (currentColumnSortDirection === 'asc') { - onChangeSortOrder([...currentSortWithoutColumn, [name, 'desc']]); + newSortOrder = { + id: name, + direction: "desc" + } + currentSortOrder = [...currentSortWithoutColumn, newSortOrder] + onChangeSortOrder(currentSortOrder); } else if (currentColumnSortDirection === 'desc' && currentSortWithoutColumn.length === 0) { // If we're at the end of the cycle and this is the only existing sort, we switch // back to ascending sort instead of removing it. - onChangeSortOrder([[name, 'asc']]); + newSortOrder = { + id: name, + direction: "asc" + } + currentSortOrder = [...currentSortWithoutColumn, newSortOrder] + onChangeSortOrder(currentSortOrder); } else { onChangeSortOrder(currentSortWithoutColumn); } @@ -100,9 +123,9 @@ export function TableHeaderColumn({ if (currentColumnSort === undefined) { return sortAscendingMessage; - } else if (sortDirection === 'asc') { + } else if (currentColumnSortDirection === 'asc') { return sortDescendingMessage; - } else if (sortDirection === 'desc' && currentSortWithoutColumn.length === 0) { + } else if (currentColumnSortDirection === 'desc' && currentSortWithoutColumn.length === 0) { return sortAscendingMessage; } else { return stopSortingMessage; @@ -119,7 +142,7 @@ export function TableHeaderColumn({ onClick: handleChangeSortOrder, testSubject: `docTableHeaderFieldSort_${name}`, tooltip: getSortButtonAriaLabel(), - iconType: 'sortable', + iconType: "sortable" }, // Remove Button { diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx index f0d74dbcf2ac..223dc0855359 100644 --- a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx @@ -66,6 +66,7 @@ export const DiscoverTable = ({ rows }: Props) => { const onSetColumns = (cols: string[]) => dispatch(setColumns({ columns: cols })); const onSetSort = (s: SortOrder[]) => { + console.log("sorting now!") dispatch(setSort(s)); refetch$.next(); };