[13] fix: retain search table settings and order

src/components/explorer/BiosamplesTable.js

@@ -1,12 +1,15 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { useSortedColumns } from "./hooks/explorerHooks";
+import { Link, useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
 import { countNonNullElements } from "../../utils/misc";
 import ExplorerSearchResultsTable from "./ExplorerSearchResultsTable";
 
 const NO_EXPERIMENTS_VALUE = -Infinity;
 
 const BiosampleRender = ({ biosample, alternateIds, individualId }) => {
+    const location = useLocation();
     const alternateIdsList = alternateIds ?? [];
     const listRender = alternateIdsList.length ? ` (${alternateIdsList.join(", ")})` : "";
     return (
@@ -166,12 +169,26 @@ const SEARCH_RESULT_COLUMNS_BIOSAMPLE = [
     },
 ];
 
-const BiosamplesTable = ({ data }) => {
+const BiosamplesTable = ({ data, datasetID }) => {
+    const tableSortOrder = useSelector(
+        (state) => state.explorer.tableSortOrderByDatasetID[datasetID]?.["biosamples"],
+    );
+
+    const { sortedData, columnsWithSortOrder } = useSortedColumns(
+        data,
+        tableSortOrder,
+        SEARCH_RESULT_COLUMNS_BIOSAMPLE,
+    );
+
     return (
         <ExplorerSearchResultsTable
             dataStructure={SEARCH_RESULT_COLUMNS_BIOSAMPLE}
-            data={data}
+            data={sortedData}
+            sortColumnKey={tableSortOrder?.sortColumnKey}
+            sortOrder={tableSortOrder?.sortOrder}
             activeTab="biosamples"
+            columns={columnsWithSortOrder}
+            currentPage={tableSortOrder?.currentPage}
         />
     );
 };
@@ -193,6 +210,7 @@ BiosamplesTable.propTypes = {
             experimentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
         }),
     ).isRequired,
+    datasetID: PropTypes.string.isRequired,
 };
 
 

src/components/explorer/ExperimentsTable.js

@@ -1,9 +1,12 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
+import { useSortedColumns } from "./hooks/explorerHooks";
 import ExplorerSearchResultsTable from "./ExplorerSearchResultsTable";
 
 const ExperimentRender = ({ experimentId, individual }) => {
+    const location = useLocation();
     const alternateIds = individual.alternate_ids ?? [];
     const listRender = alternateIds.length ? `(${alternateIds.join(", ")})` : "";
 
@@ -69,9 +72,26 @@ const SEARCH_RESULT_COLUMNS_EXP = [
     },
 ];
 
-const ExperimentsTable = ({ data }) => {
+const ExperimentsTable = ({ data, datasetID }) => {
+    const tableSortOrder = useSelector(
+        (state) => state.explorer.tableSortOrderByDatasetID[datasetID]?.["experiments"],
+    );
+
+    const { sortedData, columnsWithSortOrder } = useSortedColumns(
+        data,
+        tableSortOrder,
+        SEARCH_RESULT_COLUMNS_EXP,
+    );
     return (
-        <ExplorerSearchResultsTable dataStructure={SEARCH_RESULT_COLUMNS_EXP} data={data} activeTab="experiments" />
+        <ExplorerSearchResultsTable
+            dataStructure={SEARCH_RESULT_COLUMNS_EXP}
+            data={sortedData}
+            sortColumnKey={tableSortOrder?.sortColumnKey}
+            sortOrder={tableSortOrder?.sortOrder}
+            activeTab="experiments"
+            columns={columnsWithSortOrder}
+            currentPage={tableSortOrder?.currentPage}
+        />
     );
 };
 
@@ -88,6 +108,7 @@ ExperimentsTable.propTypes = {
             experimentType: PropTypes.string.isRequired,
         }),
     ).isRequired,
+    datasetID: PropTypes.string.isRequired,
 };
 
 export default ExperimentsTable;

src/components/explorer/ExplorerDatasetSearch.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 
@@ -15,6 +15,8 @@ import {
     removeDataTypeQueryForm,
     updateDataTypeQueryForm,
     setSelectedRows,
+    resetTableSortOrder,
+    setActiveTab,
 } from "../../modules/explorer/actions";
 
 import IndividualsTable from "./IndividualsTable";
@@ -34,19 +36,21 @@ const hasNonEmptyArrayProperty = (targetObject, propertyKey) => {
 };
 
 const ExplorerDatasetSearch = () => {
-    const [activeKey, setActiveKey] = useState(TAB_KEYS.INDIVIDUAL);
-    const dispatch = useDispatch();
     const { dataset } = useParams();
+    const dispatch = useDispatch();
 
     const datasetsByID = useSelector((state) =>
         Object.fromEntries(
             state.projects.items.flatMap((p) => p.datasets.map((d) => [d.identifier, { ...d, project: p.identifier }])),
         ),
     );
+
+    const activeKey = useSelector((state) => state.explorer.activeTabByDatasetID[dataset]) || TAB_KEYS.INDIVIDUAL;
     const dataTypeForms = useSelector((state) => state.explorer.dataTypeFormsByDatasetID[dataset] || []);
     const fetchingSearch = useSelector((state) => state.explorer.fetchingSearchByDatasetID[dataset] || false);
     const fetchingTextSearch = useSelector((state) => state.explorer.fetchingTextSearch || false);
     const searchResults = useSelector((state) => state.explorer.searchResultsByDatasetID[dataset] || null);
+
     console.debug("search results: ", searchResults);
 
     const handleSetSelectedRows = (...args) => dispatch(setSelectedRows(dataset, ...args));
@@ -57,11 +61,13 @@ const ExplorerDatasetSearch = () => {
     }, []);
 
     const onTabChange = (newActiveKey) => {
-        setActiveKey(newActiveKey);
+        dispatch(setActiveTab(dataset, newActiveKey));
         handleSetSelectedRows([]);
     };
 
     const performSearch = () => {
+        dispatch(setActiveTab(dataset, TAB_KEYS.INDIVIDUAL));
+        dispatch(resetTableSortOrder(dataset));
         dispatch(performSearchIfPossible(dataset));
     };
 
@@ -96,16 +102,22 @@ const ExplorerDatasetSearch = () => {
                 (showTabs ? (
                     <Tabs defaultActiveKey={TAB_KEYS.INDIVIDUAL} onChange={onTabChange} activeKey={activeKey}>
                         <TabPane tab="Individual" key={TAB_KEYS.INDIVIDUAL}>
-                            <IndividualsTable data={searchResults.searchFormattedResults} />
+                            <IndividualsTable
+                                data={searchResults.searchFormattedResults}
+                                datasetID={dataset}/>
                         </TabPane>
                         {hasBiosamples && (
                             <TabPane tab="Biosamples" key={TAB_KEYS.BIOSAMPLES}>
-                                <BiosamplesTable data={searchResults.searchFormattedResultsBiosamples} />
+                                <BiosamplesTable
+                                    data={searchResults.searchFormattedResultsBiosamples}
+                                    datasetID={dataset}/>
                             </TabPane>
                         )}
                         {hasExperiments && (
                             <TabPane tab="Experiments" key={TAB_KEYS.EXPERIMENTS}>
-                                <ExperimentsTable data={searchResults.searchFormattedResultsExperiment} />
+                                <ExperimentsTable
+                                    data={searchResults.searchFormattedResultsExperiment}
+                                    datasetID={dataset}/>
                             </TabPane>
                         )}
                     </Tabs>

src/components/explorer/ExplorerIndividualContent.js

@@ -42,7 +42,6 @@ class ExplorerIndividualContent extends Component {
 
         this.state = {
             backUrl: null,
-            selectedTab: "overview",
         };
     }
 
@@ -61,8 +60,9 @@ class ExplorerIndividualContent extends Component {
     }
 
     componentDidMount() {
-        const backUrl = (this.props.location.state || {}).backUrl;
-        if (backUrl) this.setState({backUrl});
+        const { location } = this.props;
+        const { backUrl } = location.state || {};
+        if (backUrl) this.setState({ backUrl });
         this.fetchIndividualData();
     }
 

src/components/explorer/ExplorerSearchResultsTable.js

@@ -12,13 +12,21 @@ import {
     performIndividualsDownloadCSVIfPossible,
     performBiosamplesDownloadCSVIfPossible,
     performExperimentsDownloadCSVIfPossible,
+    setTableSortOrder,
 } from "../../modules/explorer/actions";
 
 const PAGE_SIZE = 25;
 
-const ExplorerSearchResultsTable = ({ data, activeTab, ...props }) => {
+const ExplorerSearchResultsTable = ({
+    data,
+    activeTab,
+    columns,
+    currentPage: initialCurrentPage,
+    sortOrder,
+    sortColumnKey,
+}) => {
     const { dataset } = useParams();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [currentPage, setCurrentPage] = useState(initialCurrentPage || 1);
     const [numResults] = useState(data.length);
 
     const [summaryModalVisible, setSummaryModalVisible] = useState(false);
@@ -50,16 +58,16 @@ const ExplorerSearchResultsTable = ({ data, activeTab, ...props }) => {
         }
     };
 
-    const onPageChange = (pageObj) => {
+    const onPageChange = (pageObj, filters, sorter) => {
         setCurrentPage(pageObj.current);
+        dispatch(setTableSortOrder(dataset, sorter.field, sorter.order, activeTab, pageObj.current));
     };
 
     const tableStyle = {
         opacity: fetchingSearch ? 0.5 : 1,
         pointerEvents: fetchingSearch ? "none" : "auto",
     };
 
-
     const rowSelection = {
         type: "checkbox",
         selectedRowKeys: selectedRows,
@@ -83,6 +91,14 @@ const ExplorerSearchResultsTable = ({ data, activeTab, ...props }) => {
         ],
     };
 
+    const sortedInfo = useMemo(
+        () => ({
+            order: sortOrder,
+            columnKey: sortColumnKey,
+        }),
+        [sortOrder, sortColumnKey],
+    );
+
     return (
         <div>
             <Typography.Title level={4}>
@@ -132,8 +148,9 @@ const ExplorerSearchResultsTable = ({ data, activeTab, ...props }) => {
                     bordered
                     disabled={fetchingSearch}
                     size="middle"
-                    columns={props.dataStructure}
+                    columns={columns}
                     dataSource={data || []}
+                    sortedInfo={sortedInfo}
                     onChange={onPageChange}
                     pagination={{
                         pageSize: PAGE_SIZE,
@@ -173,6 +190,10 @@ ExplorerSearchResultsTable.propTypes = {
     type: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.object),
     activeTab: PropTypes.string.isRequired,
+    columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+    sortOrder: PropTypes.string,
+    sortColumnKey: PropTypes.string,
+    currentPage: PropTypes.number,
 };
 
 export default ExplorerSearchResultsTable;

src/components/explorer/IndividualsTable.js

@@ -1,18 +1,21 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router-dom";
+import { useSortedColumns } from "./hooks/explorerHooks";
+import { Link, useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
 import ExplorerSearchResultsTable from "./ExplorerSearchResultsTable";
 
 const IndividualRender = ({individual}) => {
+    const location = useLocation();
     const alternateIds = individual.alternate_ids ?? [];
     const listRender = alternateIds.length ? " (" + alternateIds.join(", ") + ")" : "";
     return (
         <>
             <Link
-                to={(location) => ({
+                to={{
                     pathname: `/data/explorer/individuals/${individual.id}/overview`,
                     state: { backUrl: location.pathname },
-                })}
+                }}
             >
                 {individual.id}
             </Link>{" "}
@@ -59,18 +62,33 @@ const SEARCH_RESULT_COLUMNS = [
     },
 ];
 
-const IndividualsTable = ({ data }) => {
+const IndividualsTable = ({ data, datasetID }) => {
+    const tableSortOrder = useSelector(
+        (state) => state.explorer.tableSortOrderByDatasetID[datasetID]?.["individuals"],
+    );
+
+    const { sortedData, columnsWithSortOrder } = useSortedColumns(
+        data,
+        tableSortOrder,
+        SEARCH_RESULT_COLUMNS,
+    );
+
     return (
         <ExplorerSearchResultsTable
             dataStructure={SEARCH_RESULT_COLUMNS}
-            data={data}
+            data={sortedData}
+            sortColumnKey={tableSortOrder?.sortColumnKey}
+            sortOrder={tableSortOrder?.sortOrder}
             activeTab="individuals"
+            columns={columnsWithSortOrder}
+            currentPage={tableSortOrder?.currentPage}
         />
     );
 };
 
 IndividualsTable.propTypes = {
     data: PropTypes.array.isRequired,
+    datasetID: PropTypes.string.isRequired,
 };
 
 export default IndividualsTable;

src/components/explorer/hooks/explorerHooks.js

@@ -0,0 +1,31 @@
+import { useMemo } from "react";
+
+export const useSortedColumns = (data, tableSortOrder, columnsDefinition) => {
+    const sortColumnKey = tableSortOrder?.sortColumnKey;
+    const sortOrder = tableSortOrder?.sortOrder;
+
+    const sortData = (dataToSort, sortKey, order) => {
+        const column = columnsDefinition.find((col) => col.dataIndex === sortKey);
+        if (column && column.sorter) {
+            return [...dataToSort].sort((a, b) => {
+                return order === "ascend" ? column.sorter(a, b) : column.sorter(b, a);
+            });
+        }
+        return dataToSort;
+    };
+
+    const sortedData = useMemo(() => {
+        return sortData(data, sortColumnKey, sortOrder);
+    }, [data, sortColumnKey, sortOrder, columnsDefinition]);
+
+    const columnsWithSortOrder = useMemo(() => {
+        return columnsDefinition.map((column) => {
+            if (column.dataIndex === sortColumnKey) {
+                return { ...column, sortOrder };
+            }
+            return column;
+        });
+    }, [sortColumnKey, sortOrder, columnsDefinition]);
+
+    return { sortedData, columnsWithSortOrder };
+};