sorting

Signed-off-by: abbyhu2000 <abigailhu2000@gmail.com>
AMoo-Miki · Jan 31, 2024 · 3bc11d5 · 3bc11d5
1 parent eadc235
commit 3bc11d5
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 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
@@ -140,6 +140,8 @@ export const DataGridTable = ({
     ];
   }, []);
 
+  console.log("sortOrders", sortingColumns)
+
   const table = useMemo(
     () => (
       // <EuiDataGrid
@@ -160,8 +162,8 @@ export const DataGridTable = ({
         columns={adjustedColumns}
         rows={rows}
         indexPattern={indexPattern}
-        sortOrder={sort}
-        onChangeSortOrder={onSort}
+        sortOrder={sortingColumns}
+        onChangeSortOrder={onColumnSort}
         onRemoveColumn={onRemoveColumn}
         onReorderColumn={onReorderColumn}
         onAddColumn={onAddColumn}
@@ -183,34 +185,34 @@ export const DataGridTable = ({
     ]
   );
 
-  const dataGridTable = useMemo(
-    () => (
-      <EuiDataGrid
-        aria-labelledby="aria-labelledby"
-        columns={displayedTableColumns}
-        columnVisibility={dataGridTableColumnsVisibility}
-        leadingControlColumns={leadingControlColumns}
-        data-test-subj="docTable"
-        pagination={pagination}
-        renderCellValue={renderCellValue}
-        rowCount={rowCount}
-        sorting={sorting}
-        toolbarVisibility={isToolbarVisible ? toolbarVisibility : false}
-        rowHeightsOptions={rowHeightsOptions}
-      />
-    ),
-    [
-      displayedTableColumns,
-      dataGridTableColumnsVisibility,
-      leadingControlColumns,
-      pagination,
-      renderCellValue,
-      rowCount,
-      sorting,
-      isToolbarVisible,
-      rowHeightsOptions,
-    ]
-  );
+  // const dataGridTable = useMemo(
+  //   () => (
+  //     <EuiDataGrid
+  //       aria-labelledby="aria-labelledby"
+  //       columns={displayedTableColumns}
+  //       columnVisibility={dataGridTableColumnsVisibility}
+  //       leadingControlColumns={leadingControlColumns}
+  //       data-test-subj="docTable"
+  //       pagination={pagination}
+  //       renderCellValue={renderCellValue}
+  //       rowCount={rowCount}
+  //       sorting={sorting}
+  //       toolbarVisibility={isToolbarVisible ? toolbarVisibility : false}
+  //       rowHeightsOptions={rowHeightsOptions}
+  //     />
+  //   ),
+  //   [
+  //     displayedTableColumns,
+  //     dataGridTableColumnsVisibility,
+  //     leadingControlColumns,
+  //     pagination,
+  //     renderCellValue,
+  //     rowCount,
+  //     sorting,
+  //     isToolbarVisible,
+  //     rowHeightsOptions,
+  //   ]
+  // );
 
   console.log('adjustColumns higher level', adjustedColumns);
   return (
@@ -232,7 +234,6 @@ export const DataGridTable = ({
       >
         <EuiPanel hasBorder={false} hasShadow={true} paddingSize="s" style={{ margin: '8px' }}>
           {table}
-          {dataGridTable}
         </EuiPanel>
         {inspectedHit && (
           <DataGridFlyout

diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../discover/public/application/components/default_discover_table/default_discover_table.tsx
@@ -6,7 +6,7 @@
 import './_doc_table.scss';
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { EuiDataGridColumn } from '@elastic/eui';
+import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui';
 import { TableHeader } from './table_header';
 import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { TableRow } from './table_rows';
@@ -18,8 +18,11 @@ export interface DefaultDiscoverTableProps {
   columns: string[];
   rows: OpenSearchSearchHit[];
   indexPattern: IndexPattern;
-  sortOrder: SortOrder[];
-  onChangeSortOrder: (sort: SortOrder[]) => 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
@@ -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/...ins/discover/public/application/components/default_discover_table/table_header_column.tsx b/...ins/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<string, string> = {
@@ -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
@@ -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();
   };