Merge pull request #214 from KPMP/KPMP-4667_use_index_for_sorting

KPMP-4667: removed front-end sorting and added file_name_sort column
KPMP · Aug 31, 2023 · 7c3c935 · 7c3c935
2 parents c2fbad0 + 9c30196
commit 7c3c935
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git a/src/components/SpatialViewer/ImageDatasetList.js b/src/components/SpatialViewer/ImageDatasetList.js
@@ -6,10 +6,8 @@ import { resultConverter } from "../../helpers/dataHelper";
 import { getImageTypeTooltipCopy } from "./viewConfigHelper";
 import { faXmark, faAnglesRight, faAnglesLeft, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { compareTableStrings } from "./spatialHelper";
 import {
     SortingState,
-    IntegratedSorting,
     IntegratedPaging,
     PagingState,
 } from '@devexpress/dx-react-grid';
@@ -104,7 +102,7 @@ class ImageDatasetList extends Component {
         const { setSelectedImageDataset } = this.props;
         let columns = [
             {
-                name: 'spectrackSampleId',
+                name: 'spectracksampleid',
                 title: 'Sample ID',
                 sortable: true,
                 hideable: false,
@@ -148,6 +146,13 @@ class ImageDatasetList extends Component {
                 hideable: true,
                 defaultHidden: true,
             },
+            // Sort Column
+            {
+                name: 'file_name_sort',
+                sortable: false,
+                hideable: false,
+                defaultHidden: true
+            }
         ];
         return columns;
     };
@@ -177,12 +182,13 @@ class ImageDatasetList extends Component {
 
     getDefaultColumnWidths = () => {
         return [
-            { columnName: 'spectrackSampleId', width: 145 },
+            { columnName: 'spectracksampleid', width: 145 },
             { columnName: 'datatype', width: 250 },
             { columnName: 'imagetype', width: 350 },
             { columnName: 'redcapid', width: 145 },
             { columnName: 'filename', width: 250 },
             { columnName: 'level', width: 100 },
+            { columnName: 'file_name_sort', width: 0}
         ]
     };
 
@@ -318,23 +324,24 @@ class ImageDatasetList extends Component {
                                         columns={this.getColumns()}>
                                         <SortingState
                                             defaultSorting={[]}
-                                            onSortingChange={(sorting) =>  this.props.setTableSettings({sorting: sorting, currentPage: 0})}
+                                            onSortingChange={(sorting) => {
+                                                let sortOptions = sorting.map(val => {
+                                                    if (val.columnName === 'filename') {
+                                                        return { field: "file_name_sort", direction: val.direction }
+                                                    }
+                                                    return { field: val.columnName, direction: val.direction }
+                                                })
+                                                this.props.setSort(sortOptions);
+                                                this.props.setTableSettings({sorting: sorting, currentPage: 0})}
+                                            }  
                                             sorting={sorting}/>
-                                        <IntegratedSorting 
-                                            columnExtensions={[
-                                                { columnName: 'spectrackSampleId', compare: compareTableStrings },
-                                                { columnName: 'datatype',          compare: compareTableStrings },
-                                                { columnName: 'filename',          compare: compareTableStrings },
-                                                { columnName: 'imagetype',         compare: compareTableStrings },
-                                                { columnName: 'redcapid',          compare: compareTableStrings }]}
-                                        />
-                                        <PagingState
-                                            currentPage={currentPage}
-                                            defaultPageSize={pagingSize}
-                                            onCurrentPageChange={(page) => this.props.setTableSettings({currentPage: page})}
-                                        />
-                                        <IntegratedPaging />
-                                        <PagingPanel />
+                                            <PagingState
+                                                currentPage={currentPage}
+                                                defaultPageSize={pagingSize}
+                                                onCurrentPageChange={(page) => this.props.setTableSettings({currentPage: page})}
+                                            />
+                                            <IntegratedPaging />
+                                            <PagingPanel />
                                         <Toolbar
                                             cards={this.state.cards}
                                             setCards={this.state.setCards}

diff --git a/src/components/SpatialViewer/ImageDatasetListSubContainer.js b/src/components/SpatialViewer/ImageDatasetListSubContainer.js
@@ -44,10 +44,10 @@ class ImageDatasetListSubContainer extends Component {
     render() {
         return (
             <Container id='outer-wrapper' className="multi-container-container container-xxl">
-            <WithSearch mapContextToProps={({ filters, results, searchContext,setResultsPerPage,removeFilter, clearFilters}) =>
-             ({filters, results, searchContext,setResultsPerPage,removeFilter, clearFilters})}>
+            <WithSearch mapContextToProps={({ filters, results, searchContext,setResultsPerPage,removeFilter, clearFilters, setSort}) =>
+             ({filters, results, searchContext,setResultsPerPage,removeFilter, clearFilters, setSort})}>
                 {(context) => {
-                const { filters, results, searchContext, setResultsPerPage, removeFilter, clearFilters } = context;
+                const { filters, results, searchContext, setResultsPerPage, removeFilter, clearFilters, setSort } = context;
                 return (
                     <ImageDatasetList
                         reportCardOpen={this.state.reportCardOpen}
@@ -57,6 +57,7 @@ class ImageDatasetListSubContainer extends Component {
                         results={results}
                         searchContext={searchContext}
                         setResultsPerPage={setResultsPerPage}
+                        setSort={setSort}
                         removeFilter={removeFilter}
                         clearFilters={clearFilters}
                         setActiveFilterTab={this.setActiveFilterTab}

diff --git a/src/components/SpatialViewer/Plugins/toolbar-button.js b/src/components/SpatialViewer/Plugins/toolbar-button.js
@@ -11,7 +11,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const pluginDependencies = [
   { name: "Toolbar" },
-  { name: "IntegratedSorting" }, 
   { name: "ToolbarButtonState" }
 ];
 

diff --git a/src/components/SpatialViewer/SpatialViewer.js b/src/components/SpatialViewer/SpatialViewer.js
@@ -26,7 +26,7 @@ class SpatialViewer extends Component {
             handleGoogleAnalyticsEvent(
                 'Spatial Viewer',
                 'Navigation',
-                this.props.selectedImageDataset["spectrackSampleId"] 
+                this.props.selectedImageDataset["spectracksampleid"] 
                 + this.props.selectedImageDataset['imagetype']);
             let viewConfig = getViewConfig(this.props.selectedImageDataset["configtype"]);
             viewConfig = await populateViewConfig(viewConfig, this.props.selectedImageDataset);