Libpitt/1576 organize facets

.gitmodules

@@ -1,4 +1,4 @@
 [submodule "src/search-ui"]
 	path = src/search-ui
-	url = https://github.com/dbmi-pitt/search-ui
+	url = git@github.com:dbmi-pitt/search-ui.git
 	branch = main

src/components/custom/TableResultsEntities.jsx

@@ -12,15 +12,15 @@ import ClipboardCopy from "../ClipboardCopy";
 import BulkExport, {handleCheckbox} from "./BulkExport";
 import {getOptions} from "./search/ResultsPerPage";
 import ResultsBlock from "./search/ResultsBlock";
-import {TableResultsProvider} from "../../context/TableResultsContext";
+import {TableResultsProvider} from "@/context/TableResultsContext";
 import SenNetPopover from "../SenNetPopover";
 import {Chip} from "@mui/material";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import AppModal from "../AppModal";
-import {parseJson} from "../../lib/services";
-import {COLS_ORDER_KEY} from "../../config/config";
+import {parseJson} from "@/lib/services";
+import {COLS_ORDER_KEY} from "@/config/config";
 
-function TableResultsEntities({children, filters, onRowClicked, currentColumns, forData = false, rowFn, inModal = false}) {
+function TableResultsEntities({children, filters, onRowClicked, currentColumns, forData = false, rowFn, inModal = false, rawResponse}) {
 
     let hasMultipleEntityTypes = checkMultipleFilterType(filters);
     const {isLoggedIn, cache, getGroupName} = useContext(AppContext)
@@ -67,6 +67,7 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
         cols.push(
             {
                 name: 'SenNet ID',
+                id: 'sennet_id',
                 selector: row => raw(row.sennet_id),
                 sortable: true,
                 reorder: true,
@@ -76,6 +77,7 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
         if (hasMultipleEntityTypes) {
             cols.push({
                 name: 'Entity Type',
+                id: 'entity_type',
                 selector: row => raw(row.entity_type),
                 sortable: true,
                 reorder: true,
@@ -85,6 +87,7 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
         if (includeLabIdCol && isLoggedIn() || _isLoggedIn) {
             cols.push({
                 name: 'Lab ID',
+                id: 'lab_id',
                 selector: row => {
                     return raw(row.lab_tissue_sample_id) || raw(row.lab_source_id) || raw(row.lab_dataset_id)
                 },
@@ -97,6 +100,7 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
         if (includeGroupCol) {
             cols.push({
                 name: 'Group',
+                id: 'group_name',
                 selector: row => raw(row.group_name),
                 sortable: true,
                 reorder: true,
@@ -110,31 +114,36 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
     const reusableColumns = {
         Status:  {
             name: 'Status',
+            id: 'status',
             selector: row => raw(row.status),
             format: (row) => <span className={`${getStatusColor(raw(row.status))} badge`}><SenNetPopover text={getStatusDefinition(raw(row.status))} className={`status-info-${getId(row)}`}>{raw(row.status)}</SenNetPopover></span>,
             sortable: true,
             reorder: true,
         },
         Organ: {
             name: 'Organ',
+            id: 'origin_sample.organ',
             selector: row => getUBKGFullName(raw(row.origin_sample)?.organ),
             sortable: true,
             reorder: true,
         },
         SourceType: {
             name: 'Type',
+            id: 'source_type',
             selector: row => raw(row.source_type),
             sortable: true,
             reorder: true,
         },
         SampleCategory: {
             name: 'Category',
+            id: 'sample_category',
             selector: row => raw(row.sample_category) ? displayBodyHeader(raw(row.sample_category)) : '',
             sortable: true,
             reorder: true,
         },
         DatasetType: {
             name: 'Dataset Type',
+            id: 'dataset_type',
             selector: row => {
                 let val = raw(row.dataset_type)
                 if (val) {
@@ -166,12 +175,14 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
     const uploadColumns = [
         {
             name: 'Title',
+            id: 'title',
             selector: row => raw(row.title),
             sortable: true,
             reorder: true,
         },
         {
             name: 'Description',
+            id: 'description',
             selector: row => raw(row.description),
             sortable: true,
             reorder: true,
@@ -195,12 +206,14 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
     const collectionColumns = [
         {
             name: 'Title',
+            id: 'title',
             selector: row => raw(row.title),
             sortable: true,
             reorder: true,
         },
         {
             name: 'Description',
+            id: 'description',
             selector: row => raw(row.description),
             sortable: true,
             reorder: true,
@@ -268,14 +281,15 @@ function TableResultsEntities({children, filters, onRowClicked, currentColumns,
     }
 
     // Prepare opsDict
-    getOptions(children.length)
+    getOptions(rawResponse?.record_count || children.length)
 
     const getSearchContext = () => `entities.${tableContext.current}`
 
     return (
         <>
             <TableResultsProvider columnsRef={currentColumns} getId={getId} getHotLink={getHotLink} rows={children} filters={filters} onRowClicked={onRowClicked} forData={forData} raw={raw} inModal={inModal}>
                 <ResultsBlock
+                    index={'entities'}
                     searchContext={getSearchContext}
                     defaultHiddenColumns={Object.values(defaultHiddenColumns)}
                     getTableColumns={getTableColumns}

src/components/custom/TableResultsFiles.jsx

@@ -9,8 +9,7 @@ import {
 import BulkExport, {getCheckAll, getCheckboxes, handleCheckbox} from "./BulkExport";
 import {getOptions} from "./search/ResultsPerPage";
 import ResultsBlock from "./search/ResultsBlock";
-import {TableResultsProvider} from "../../context/TableResultsContext";
-import $ from 'jquery'
+import {TableResultsProvider} from "@/context/TableResultsContext";
 import SenNetAlert from "../SenNetAlert";
 import ClipboardCopy from "../ClipboardCopy";
 import 'primeicons/primeicons.css';
@@ -19,8 +18,8 @@ import {Chip} from "@mui/material";
 import SenNetPopover from "../SenNetPopover";
 import AppModal from "../AppModal";
 import FileTreeView from "./entities/dataset/FileTreeView";
-import {COLS_ORDER_KEY, FILE_KEY_SEPARATOR} from "../../config/config";
-import {parseJson} from "../../lib/services";
+import {COLS_ORDER_KEY, FILE_KEY_SEPARATOR} from "@/config/config";
+import {parseJson} from "@/lib/services";
 
 const downloadSizeAttr = 'data-download-size'
 export const clearDownloadSizeLabel = () => {
@@ -189,6 +188,7 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
         cols.push(
             {
                 name: 'Dataset SenNet ID',
+                id: 'dataset_sennet_id',
                 width: '200px',
                 selector: row => raw(row.dataset_sennet_id),
                 sortable: true,
@@ -200,6 +200,7 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
         cols.push(
             {
                 name: 'Files',
+                id: 'description',
                 minWidth: '50%',
                 selector: row => raw(row.description),
                 sortable: true,
@@ -235,6 +236,7 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
         cols.push(
             {
                 name: 'Sample Type',
+                id: 'samples',
                 selector: row => {
                     let val = raw(row.samples)
                     if (val) {
@@ -250,6 +252,7 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
         cols.push(
             {
                 name: 'Dataset Type',
+                id: 'dataset_types',
                 selector: row => {
                     let val = raw(row.dataset_types)
                     if (val) {
@@ -264,6 +267,7 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
         cols.push(
             {
                 name: 'Size',
+                id: 'size',
                 selector: row => raw(row.size),
                 sortable: true,
                 reorder: true,
@@ -328,6 +332,7 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
                     running.</small>
                 </> />
                 <ResultsBlock
+                    index={'files'}
                     searchContext={`files.${tableContext.current}`}
                     tableClassName={'rdt_Results--Files'}
                     getTableColumns={getTableColumns}
@@ -337,7 +342,6 @@ function TableResultsFiles({children, filters, forData = false, rowFn, inModal =
                     modalSize={'xl'}
                     showModal={showModal}
                     modalTitle={'Files Details'}
-                    //<DataTable columns={getModalColumns()} data={modalData} className={'rdt_Results--Files'} />
                     modalBody={
                         <FileTreeView data={treeViewData}
                         showQAButton={false}

src/components/custom/layout/CustomClearSearchBox.js

@@ -3,9 +3,11 @@ import {withSearch} from "@elastic/react-search-ui";
 import SearchUIContext from "search-ui/components/core/SearchUIContext";
 
 function CustomClearSearchBox({shouldClearFilters = true}) {
-    const { clearSearchTerm } = useContext(SearchUIContext)
+    const { clearSearchTerm, setPageSize, setPageNumber } = useContext(SearchUIContext)
 
     function handleClearFiltersClick() {
+        setPageSize(20)
+        setPageNumber(1)
         clearSearchTerm(shouldClearFilters)
     }
 

src/components/custom/search/ResultsBlock.jsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react'
+import React, {useContext, useState} from 'react'
 import PropTypes from 'prop-types'
 import {opsDict, ResultsPerPage} from "./ResultsPerPage";
 import DataTable from "react-data-table-component";
@@ -8,32 +8,32 @@ import {
 import TableResultsContext from "../../../context/TableResultsContext";
 import ColumnsDropdown from "./ColumnsDropdown";
 import {eq} from '../js/functions'
-import {COLS_ORDER_KEY} from "../../../config/config";
+import {COLS_ORDER_KEY} from "@/config/config";
 import Spinner from '../Spinner';
 
-function ResultsBlock({getTableColumns, disableRowClick, tableClassName, defaultHiddenColumns, searchContext}) {
+function ResultsBlock({getTableColumns, disableRowClick, tableClassName, defaultHiddenColumns, searchContext, index}) {
 
     const {
         getTableData,
         noResultsMessage,
         inModal,
         rows,
-        resultsPerPage,
+        handleSort,
         setResultsPerPage,
         currentColumns,
         filters,
         handleRowsPerPageChange,
         handleOnRowClicked,
         handlePageChange,
         isLoading,
+        rawResponse,
+        updateTablePagination,
+        pageSize,
+        pageNumber,
     } = useContext(TableResultsContext)
 
-    const [hiddenColumns, setHiddenColumns] = useState(null)
-
-    useEffect(() => {
-
-    }, [])
 
+    const [hiddenColumns, setHiddenColumns] = useState(null)
 
     return (
         <>
@@ -42,10 +42,14 @@ function ResultsBlock({getTableColumns, disableRowClick, tableClassName, default
                     <PagingInfo />
                     {rows.length > 0 && <ColumnsDropdown searchContext={searchContext} filters={filters} defaultHiddenColumns={defaultHiddenColumns} getTableColumns={getTableColumns} setHiddenColumns={setHiddenColumns}
                                       currentColumns={currentColumns.current} />}
-                    <ResultsPerPage resultsPerPage={resultsPerPage} setResultsPerPage={setResultsPerPage} totalRows={rows.length}  />
+                    <ResultsPerPage updateTablePagination={updateTablePagination}
+                                    resultsPerPage={pageSize}
+                                    setResultsPerPage={setResultsPerPage}
+                                    totalRows={rawResponse.record_count}  />
                 </div>
             </div>
 
+
             {<DataTable key={`results-${new Date().getTime()}`}
                         onColumnOrderChange={cols => {
                             currentColumns.current.current = cols
@@ -57,15 +61,20 @@ function ResultsBlock({getTableColumns, disableRowClick, tableClassName, default
                         data={getTableData()}
                         theme={'plain'}
                         defaultSortAsc={false}
+                        onSort={handleSort}
+                        sortServer
                         pointerOnHover={true}
                         highlightOnHover={true}
                         noDataComponent={noResultsMessage}
                         onChangePage={handlePageChange}
                         onChangeRowsPerPage={handleRowsPerPageChange}
                         onRowClicked={!disableRowClick ? handleOnRowClicked : undefined}
-                        paginationPerPage={resultsPerPage}
+                        paginationPerPage={pageSize}
                         paginationRowsPerPageOptions={Object.keys(opsDict)}
                         pagination
+                        paginationServer
+                        paginationDefaultPage={pageNumber}
+                        paginationTotalRows={rawResponse.record_count}
                         progressPending={isLoading}
                         progressComponent={<Spinner />}
                 />}

src/components/custom/search/ResultsPerPage.jsx

@@ -1,19 +1,12 @@
-import {getCheckAll, handleCheckAll} from "../BulkExport";
-import $ from "jquery";
-import {RESULTS_PER_PAGE} from "../../../config/config";
+import {handleCheckAll} from "../BulkExport";
+import {RESULTS_PER_PAGE} from "@/config/config";
 import React, {useState} from "react";
 import Select from 'react-select'
 import {clearDownloadSizeLabel} from "../TableResultsFiles";
 
-export const handlePagingInfo = (page, resultsPerPage, totalRows) => {
+export const handleTableControls = () => {
     try {
         handleCheckAll()
-        const $pgInfo = $('.sui-paging-info')
-        let from = (page - 1) * resultsPerPage + 1
-        let to = page * resultsPerPage
-        to = to > totalRows ? totalRows : to
-        let txt = totalRows > 0 ? `${from} - ${to}` : '0 - 0'
-        $pgInfo.find('strong').eq(0).html(`${txt}`)
         clearDownloadSizeLabel()
     } catch (e) {
         console.error(e)
@@ -35,15 +28,16 @@ export const getOptions = (totalRows) => {
     return result
 }
 
-export function ResultsPerPage({resultsPerPage, setResultsPerPage, totalRows}) {
+export function ResultsPerPage({resultsPerPage, setResultsPerPage, totalRows, updateTablePagination}) {
     const getDefaultValue = () => getOptions(totalRows).length > 1 ? getOptions(totalRows)[1] : getOptions(totalRows)[0]
 
     const [value, setValue] = useState(getDefaultValue())
 
     const handleChange = (e) => {
         setResultsPerPage(e.value)
         setValue(e)
-        handlePagingInfo(1, e.value, totalRows)
+        updateTablePagination(1, e.value)
+        handleTableControls()
     }
 
     const getCurrentValue = () => {

src/config/search/entities.js

@@ -239,10 +239,11 @@ export const SEARCH_ENTITIES = {
             'organ',
             'title',
             'description',
-        ],
+        ]
     },
     initialState: {
-        resultsPerPage: 10000,
+        current: 1,
+        resultsPerPage: 20,
         sortList: [{
             field: "last_modified_timestamp",
             direction: "desc"

src/config/search/files.js

@@ -74,10 +74,11 @@ export const SEARCH_FILES = {
             dataset_sennet_id: {type: 'value'},
             dataset_type: {type: 'value'}
         },
-        source_fields: sourceItems,
+        source_fields: sourceItems
     },
     initialState: {
-        resultsPerPage: 10000,
+        current: 1,
+        resultsPerPage: 20,
         sortList: [{
             field: "source.file_info_refresh_timestamp",
             direction: "desc"