OpenConceptLab/ocl_issues#2190 | on enter search and pagination

Author: snyaggarwal

src/components/map-projects/MapProject.jsx

@@ -108,6 +108,7 @@ const MapProject = () => {
   const [matchedConcepts, setMatchedConcepts] = React.useState([]);
   const [otherMatchedConcepts, setOtherMatchedConcepts] = React.useState([]);
   const [searchedConcepts, setSearchedConcepts] = React.useState({});
+  const [searchResponse, setSearchResponse] = React.useState({});
   const [algo, setAlgo] = React.useState('llm')
   const [notes, setNotes] = React.useState({})
   const [mapTypes, setMapTypes] = React.useState({})
@@ -303,6 +304,7 @@ const MapProject = () => {
     setMatchedConcepts([])
     setOtherMatchedConcepts([])
     setSearchedConcepts({})
+    setSearchResponse({})
     setNotes({})
     setMapTypes({})
     setProposed({})
@@ -918,19 +920,22 @@ const MapProject = () => {
     }
   }
 
-  const searchCandidates = () => {
+  const searchCandidates = (event, page, pageSize) => {
+    console.log(params)
     setIsLoadingInDecisionView(true)
     APIService.new().overrideURL(repoVersion.version_url).appendToUrl('concepts/').get(null, null, {
       includeSearchMeta: true,
       includeMappings: true,
       mappingBrief: true,
       mapTypes: 'SAME-AS,SAME AS,SAME_AS',
       verbose: true,
-      limit: 5,
-      q: searchStr
+      limit: pageSize || 5,
+      q: searchStr,
+      page: page || 1,
     }).then(response => {
       let items = response.data
       setSearchedConcepts({...searchedConcepts, [row.__index]: items})
+      setSearchResponse(response)
       setIsLoadingInDecisionView(false)
       if(items.length > 0)
         setTimeout(() => highlightTexts(items, null, false), 100)
@@ -1418,12 +1423,14 @@ const MapProject = () => {
                       repo={repo}
                       repoVersion={repoVersion}
                       concepts={searchedConcepts[rowIndex]}
+                      response={searchResponse}
                       setShowItem={setShowItem}
                       showItem={showItem}
                       isSelectedForMap={isSelectedForMap}
                       onMap={onMap}
                       searchStr={searchStr}
                       setSearchStr={setSearchStr}
+                      onSearch={searchCandidates}
                     />
                 }
               </div>

src/components/map-projects/SearchCandidates.jsx

@@ -2,25 +2,37 @@ import React from 'react'
 import TextField from '@mui/material/TextField'
 import Button from '@mui/material/Button';
 
-import orderBy from 'lodash/orderBy'
+import max from 'lodash/max'
 
 import { highlightTexts } from '../../common/utils';
 import SearchResults from '../search/SearchResults';
 import Mappings from './Mappings'
 import Concept from './Concept'
 
-const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersion, rowIndex, concepts, setShowItem, showItem, isSelectedForMap, onMap}) => {
+const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersion, rowIndex, concepts, setShowItem, showItem, isSelectedForMap, onMap, response, onSearch}) => {
+      let total = parseInt(response?.headers?.num_found) || concepts?.length || 0
+  const results = {total: total, pageSize: max([parseInt(response?.headers?.num_returned), 5]), page: parseInt(response?.headers?.page_number), pages: parseInt(response?.headers?.pages), results: response?.data || []}
+
+  const onKeyPress = event => {
+    if(event.key === 'Enter') {
+      if(searchStr)
+        candidates(event)
+    }
+  }
+
   return (
     <div className='col-xs-12 padding-0'>
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', margin: '16px 0'}}>
         <TextField
+          autoFocus
           label='Search'
           sx={{width: 'calc(100% - 90px)'}}
           required
           id="search"
           value={searchStr}
           onChange={event => setSearchStr(event.target.value || '')}
           size='small'
+          onKeyDown={onKeyPress}
         />
         <Button
           color='primary'
@@ -52,22 +64,20 @@ const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersio
           renderer={props => <Concept {...props} onMap={onMap} isSelectedForMap={isSelectedForMap} noScore />}
           display='card'
           nested
-          results={{
-            results: orderBy(concepts || [], 'search_meta.search_score', 'desc'),
-            total: concepts?.length
-          }}
+          results={results}
           resource='concepts'
-          noPagination
           noSorting
           noToolbar
-          resultContainerStyle={{height: 'calc(100vh - 560px)'}}
+          rowsPerPageOptions={-1}
+          resultContainerStyle={{height: 'calc(100vh - 582px)'}}
           onShowItemSelect={item => {
             setShowItem(item)
             setTimeout(() => {
               highlightTexts([item], null, false)
             }, 100)
           }}
           selectedToShow={showItem}
+          onPageChange={(page, pageSize) => onSearch(null, page, pageSize)}
           extraColumns={[
             {
               sortable: false,

src/components/search/SearchResults.jsx

@@ -242,7 +242,7 @@ const SearchResults = props => {
           {
           !props.noPagination &&
               <TablePagination
-                rowsPerPageOptions={[10, 25, 50, 100]}
+                rowsPerPageOptions={props.rowsPerPageOptions || [10, 25, 50, 100]}
                 component="div"
                 count={props.results?.total || 0}
                 rowsPerPage={rowsPerPage || 25}