support initial multi column sort for DataTable

Signed-off-by: Onur Sumer <[email protected]>
cBioPortal · Nov 20, 2020 · 8d642df · 8d642df
1 parent c85962e
commit 8d642df
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 33 deletions.
diff --git a/packages/react-mutation-mapper/src/component/dataTable/DataTable.tsx b/packages/react-mutation-mapper/src/component/dataTable/DataTable.tsx
@@ -35,16 +35,20 @@ export enum ColumnSortDirection {
     DESC = 'desc',
 }
 
+export type ColumnSort = {
+    column: string;
+    sortDirection?: ColumnSortDirection;
+};
+
 export type DataTableProps<T> = {
     data?: T[];
     dataStore?: DataStore;
     columns?: DataTableColumn<T>[];
     className?: string;
     reactTableProps?: Partial<TableProps<T>>;
 
-    initialSortColumnData?: (RemoteData<any> | undefined)[];
-    initialSortColumn?: string;
-    initialSortDirection?: ColumnSortDirection;
+    initialSort?: ColumnSort[];
+    initialSortRemoteData?: (RemoteData<any> | undefined)[];
     initialItemsPerPage?: number;
 
     highlightColorLight?: string;
@@ -63,11 +67,11 @@ export type DataTableProps<T> = {
     columnSelectorProps?: ColumnSelectorProps;
 };
 
-export function getInitialColumnDataStatus(
-    initialSortColumnData?: (RemoteData<any> | undefined)[]
+export function getInitialSortDataStatus(
+    initialSortRemoteData?: (RemoteData<any> | undefined)[]
 ) {
-    return initialSortColumnData
-        ? getRemoteDataGroupStatus(..._.compact(initialSortColumnData))
+    return initialSortRemoteData
+        ? getRemoteDataGroupStatus(..._.compact(initialSortRemoteData))
         : 'complete';
 }
 
@@ -99,7 +103,6 @@ export default class DataTable<T> extends React.Component<
 > {
     public static defaultProps = {
         data: [],
-        initialSortDirection: ColumnSortDirection.DESC,
         initialItemsPerPage: 10,
         highlightColorLight: '#B0BED9',
         highlightColorDark: '#9FAFD1',
@@ -163,26 +166,24 @@ export default class DataTable<T> extends React.Component<
     }
 
     @computed
-    get initialColumnDataStatus() {
-        return getInitialColumnDataStatus(this.props.initialSortColumnData);
+    get initialSortDataStatus() {
+        return getInitialSortDataStatus(this.props.initialSortRemoteData);
     }
 
     @computed
     get defaultSorted() {
-        const { initialSortColumn, initialSortDirection } = this.props;
-
+        // we need to wait for the async data to complete,
+        // otherwise initial sort won't work
         if (
-            initialSortColumn === undefined ||
-            this.initialColumnDataStatus === 'pending'
+            this.props.initialSort === undefined ||
+            this.initialSortDataStatus === 'pending'
         ) {
             return undefined;
         } else {
-            return [
-                {
-                    id: initialSortColumn,
-                    desc: initialSortDirection === ColumnSortDirection.DESC,
-                },
-            ];
+            return this.props.initialSort.map(s => ({
+                id: s.column,
+                desc: s.sortDirection !== ColumnSortDirection.ASC, // default: DESC
+            }));
         }
     }
 

diff --git a/packages/react-mutation-mapper/src/component/mutationMapper/MutationMapper.tsx b/packages/react-mutation-mapper/src/component/mutationMapper/MutationMapper.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import { TableProps } from 'react-table';
 
-import { MobxCache, Mutation } from 'cbioportal-utils';
+import { MobxCache, Mutation, RemoteData } from 'cbioportal-utils';
 
 import { DefaultPubMedCache } from '../../cache/DefaultPubMedCache';
 import { MutationAlignerCache } from '../../cache/MutationAlignerCache';
@@ -18,7 +18,7 @@ import { DefaultLollipopPlotControlsConfig } from '../../store/DefaultLollipopPl
 import DefaultMutationMapperStore from '../../store/DefaultMutationMapperStore';
 import { initDefaultTrackVisibility } from '../../util/TrackUtils';
 import { getDefaultWindowInstance } from '../../util/DefaultWindowInstance';
-import { ColumnSortDirection, DataTableColumn } from '../dataTable/DataTable';
+import { ColumnSort, DataTableColumn } from '../dataTable/DataTable';
 import DefaultMutationRateSummary, {
     MutationRate,
 } from './DefaultMutationRateSummary';
@@ -65,8 +65,8 @@ export type MutationMapperProps = {
     plotVizHeight?: number;
     customControls?: JSX.Element;
     mutationTable?: JSX.Element;
-    mutationTableInitialSortColumn?: string;
-    mutationTableInitialSortDirection?: ColumnSortDirection;
+    mutationTableInitialSort?: ColumnSort[];
+    mutationTableInitialSortRemoteData?: (RemoteData<any> | undefined)[];
     mutationRates?: MutationRate[];
     pubMedCache?: MobxCache;
     mutationAlignerCache?: MobxCache;
@@ -281,11 +281,9 @@ export default class MutationMapper<
                 <DefaultMutationTable
                     dataStore={this.store.dataStore}
                     columns={columns}
-                    initialSortColumn={
-                        this.props.mutationTableInitialSortColumn
-                    }
-                    initialSortDirection={
-                        this.props.mutationTableInitialSortDirection
+                    initialSort={this.props.mutationTableInitialSort}
+                    initialSortRemoteData={
+                        this.props.mutationTableInitialSortRemoteData
                     }
                     reactTableProps={this.props.customMutationTableProps}
                     hotspotData={this.store.indexedHotspotData}

diff --git a/packages/react-mutation-mapper/src/component/mutationTable/DefaultMutationTable.tsx b/packages/react-mutation-mapper/src/component/mutationTable/DefaultMutationTable.tsx
@@ -65,7 +65,7 @@ export default class DefaultMutationTable extends React.Component<
     {}
 > {
     public static defaultProps = {
-        initialSortColumn: MutationColumn.ANNOTATION,
+        initialSort: [{ column: MutationColumn.ANNOTATION }],
         appendColumns: true,
     };
 
@@ -122,8 +122,8 @@ export default class DefaultMutationTable extends React.Component<
     }
 
     @computed
-    get initialSortColumnData() {
-        return this.props.initialSortColumnData || this.annotationColumnData;
+    get initialSortRemoteData() {
+        return this.props.initialSortRemoteData || this.annotationColumnData;
     }
 
     protected getDefaultColumnAccessor(columnKey: MutationColumn) {
@@ -229,7 +229,7 @@ export default class DefaultMutationTable extends React.Component<
             <DefaultMutationTableComponent
                 {...this.props}
                 columns={this.columns}
-                initialSortColumnData={this.initialSortColumnData}
+                initialSortRemoteData={this.initialSortRemoteData}
                 onSearch={this.onSearch}
                 className="default-mutation-table"
             />