OpenConceptLab/ocl_issues#2183 | Added filters in search

Author: snyaggarwal

src/components/map-projects/MapProject.jsx

@@ -127,6 +127,8 @@ const MapProject = () => {
   const [matchedConcepts, setMatchedConcepts] = React.useState([]);
   const [otherMatchedConcepts, setOtherMatchedConcepts] = React.useState([]);
   const [searchedConcepts, setSearchedConcepts] = React.useState({});
+  const [facets, setFacets] = React.useState({});
+  const [appliedFacets, setAppliedFacets] = React.useState({});
   const [searchResponse, setSearchResponse] = React.useState({});
   const [algo, setAlgo] = React.useState('llm')
   const [notes, setNotes] = React.useState({})
@@ -397,6 +399,7 @@ const MapProject = () => {
     setMatchedConcepts([])
     setOtherMatchedConcepts([])
     setSearchedConcepts({})
+    setFacets({})
     setSearchResponse({})
     setNotes({})
     setMapTypes({})
@@ -873,7 +876,7 @@ const MapProject = () => {
       .overrideURL(url)
       .get(null, null, {includeMappings: true, mappingBrief: true, mapTypes: 'SAME-AS,SAME AS,SAME_AS', verbose: true})
       .then(response => {
-        const res = {...response.data, search_meta: {...matched.search_meta}, repo: {...matched.repo}}
+        const res = {...response?.data, search_meta: {...matched.search_meta}, repo: {...matched.repo}}
         setConceptCache({...conceptCache, [url]: res})
       })
     setRow(csvRow)
@@ -966,6 +969,8 @@ const MapProject = () => {
     if(newValue === 'candidates' && repo?.id && !find(otherMatchedConcepts, c => c.row.__index === rowIndex)?.results?.length) {
       fetchOtherCandidates()
     }
+    if(newValue === 'search' && isEmpty(facets[rowIndex]))
+      getFacets()
   }
 
   const onDecisionChange = (event, newValue) => {
@@ -1034,11 +1039,11 @@ const MapProject = () => {
           semantic: algo === 'llm'
         }).then(response => {
           if(offset === 0)
-            setOtherMatchedConcepts([...reject(otherMatchedConcepts, c => c.row.__index == __row.__index), ...response.data])
+            setOtherMatchedConcepts([...reject(otherMatchedConcepts, c => c.row.__index == __row.__index), ...(response?.data || [])])
           else {
             const newMatches = [...otherMatchedConcepts]
             const index = findIndex(newMatches, match => match.row.__index === __row.__index)
-            newMatches[index].results = [...newMatches[index].results, ...(response.data[0].results || [])]
+            newMatches[index].results = [...newMatches[index].results, ...(response?.data[0]?.results || [])]
             setOtherMatchedConcepts(newMatches)
           }
           setIsLoadingInDecisionView(false)
@@ -1057,7 +1062,7 @@ const MapProject = () => {
     fetchOtherCandidates(null, currentResults)
   }
 
-  const searchCandidates = (event, page, pageSize, includeRetired) => {
+  const searchCandidates = (event, page, pageSize, includeRetired, appliedFilters) => {
     setIsLoadingInDecisionView(true)
     APIService.new().overrideURL(repoVersion.version_url).appendToUrl('concepts/').get(null, null, {
       includeSearchMeta: true,
@@ -1068,17 +1073,44 @@ const MapProject = () => {
       limit: pageSize || 5,
       q: searchStr,
       page: page || 1,
-      includeRetired: includeRetired === undefined ? retired : includeRetired
+      includeRetired: includeRetired === undefined ? retired : includeRetired,
+      ...getFacetQueryParam(appliedFilters || appliedFacets[rowIndex])
     }).then(response => {
       let items = response.data
       setSearchedConcepts({...searchedConcepts, [row.__index]: items})
       setSearchResponse(response)
       setIsLoadingInDecisionView(false)
+      if(!page || page == 1)
+        getFacets()
       if(items.length > 0)
         setTimeout(() => highlightTexts(items, null, false), 100)
     });
   }
 
+  const getFacets = () => {
+    APIService.new().overrideURL(repoVersion.version_url).appendToUrl('concepts/').get(null, null, {
+      q: searchStr,
+      includeRetired: retired,
+      facetsOnly: true
+    }).then(response => {
+      setFacets({...facets, [row.__index]: response?.data?.facets?.fields || {}})
+    })
+  }
+
+  const getFacetQueryParam = filters => {
+    const queryParam = {}
+    forEach(
+      filters, (value, field) => {
+        queryParam[field] = keys(pickBy(value, Boolean)).join(',')
+      }
+    )
+
+    if(queryParam?.retired === 'true,false' || queryParam?.retired === 'false,true')
+      queryParam['includeRetired'] = true
+
+    return queryParam
+  }
+
 
   const isSplitView = Boolean(rowIndex !== undefined) || (configure && file?.name)
   const rows = getRows()
@@ -1107,6 +1139,11 @@ const MapProject = () => {
   const targetConceptFromCandidate = find(otherMatchedConcepts[rowIndex]?.results, {url: targetConcept?.url})
   if(targetConceptFromCandidate)
     targetConcept.search_meta = targetConceptFromCandidate.search_meta
+  else if(!targetConcept?.search_meta?.search_score) {
+    let meta = find(searchedConcepts[rowIndex], {url: targetConcept?.url})?.search_meta
+    if(meta?.search_score)
+      targetConcept.search_meta = meta
+  }
 
   const labelDisplayedRows = ({ from, to, count }) => {
     return `${from.toLocaleString()}–${to.toLocaleString()} of ${count?.toLocaleString()}`;
@@ -1123,14 +1160,14 @@ const MapProject = () => {
         snapOffset={0}
         direction="horizontal"
         cursor="col-resize"
-      style={{ display: 'flex', height: 'calc(100vh - 100px)' }}
-      gutter={() => {
+        style={{ display: 'flex', height: 'calc(100vh - 100px)' }}
+        gutter={() => {
         const gutter = document.createElement('div');
         gutter.className = 'gutter';
         return gutter;
       }}
       >
-        <Paper component="div" className={isSplitView ? 'col-xs-6 split padding-0' : 'col-xs-12 split padding-0'} sx={{boxShadow: 'none', p: 0, backgroundColor: 'white', borderRadius: '10px', border: 'solid 0.3px', borderColor: 'surface.nv80', minHeight: 'calc(100vh - 100px) !important'}}>
+        <Paper component="div" className={isSplitView ? 'col-xs-6 split padding-0' : 'col-xs-12 split padding-0'} sx={{boxShadow: 'none', p: 0, backgroundColor: 'white', borderRadius: '10px', border: 'solid 0.3px', borderColor: 'surface.nv80', minHeight: 'calc(100vh - 100px) !important', overflow: 'auto'}}>
           <Paper component="div" className='col-xs-12' sx={{backgroundColor: 'surface.main', boxShadow: 'none', padding: '4px 16px 8px 16px', borderRadius: '10px 10px 0 0', minWidth: '665px', ...((isConfigureInSplitView || !configure) ? {} : {height: 'calc(100vh - 125px) !important', overflow: 'auto'})}}>
             {
               configure && !file?.name &&
@@ -1611,6 +1648,12 @@ const MapProject = () => {
                       searchStr={searchStr}
                       setSearchStr={setSearchStr}
                       onSearch={searchCandidates}
+                      facets={facets[rowIndex]}
+                      appliedFacets={appliedFacets[rowIndex]}
+                      setAppliedFacets={(filters) => {
+                        setAppliedFacets({...appliedFacets, [rowIndex]: filters})
+                        searchCandidates(null, null, null, null, filters)
+                      }}
                     />
                 }
                 {

src/components/map-projects/SearchCandidates.jsx

@@ -1,15 +1,22 @@
 import React from 'react'
 import TextField from '@mui/material/TextField'
 import Button from '@mui/material/Button';
-
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import FilterListIcon from '@mui/icons-material/FilterList';
 import max from 'lodash/max'
+import isEmpty from 'lodash/isEmpty'
+import values from 'lodash/values'
+import flatten from 'lodash/flatten'
 
 import { highlightTexts } from '../../common/utils';
 import SearchResults from '../search/SearchResults';
+import SearchFilters from '../search/SearchFilters'
 import Mappings from './Mappings'
 import Concept from './Concept'
 
-const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersion, rowIndex, concepts, setShowItem, showItem, isSelectedForMap, onMap, response, onSearch}) => {
+const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersion, rowIndex, concepts, setShowItem, showItem, isSelectedForMap, onMap, response, onSearch, facets, appliedFacets, setAppliedFacets}) => {
+  const [openFilters, setOpenFilters] = React.useState(openFilters)
   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 || []}
 
@@ -23,6 +30,11 @@ const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersio
   return (
     <div className='col-xs-12 padding-0'>
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', margin: '16px 0'}}>
+        <IconButton color={(isEmpty(appliedFacets) && !openFilters) ? undefined : 'primary'} style={{marginRight: '4px'}} onClick={() => setOpenFilters(!openFilters)} disabled={isEmpty(facets)}>
+          <Badge badgeContent={flatten(values(appliedFacets).map(v => values(v))).length} color='primary'>
+    <FilterListIcon sx={{color: (isEmpty(appliedFacets) && !openFilters) ? '#000': 'primary'}} />
+    </Badge>
+        </IconButton>
         <TextField
           autoFocus
           label='Search'
@@ -44,7 +56,18 @@ const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersio
           Search
         </Button>
       </div>
-      <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center'}}>
+      <div className='col-xs-12 padding-0' style={{display: 'flex'}}>
+        {
+          !isEmpty(facets) &&
+            <div className='col-xs-5 padding-0' style={openFilters ? {borderRight: '1px solid lightgray', height: 'calc(100vh - 585px)', overflow: 'auto'} : {width: 0, display: 'none'}}>
+          <SearchFilters
+            resource='concepts'
+            filters={facets}
+            appliedFilters={appliedFacets || {}}
+            onChange={setAppliedFacets}
+            />
+          </div>
+        }
         <SearchResults
           id={rowIndex}
           resultSize='small'
@@ -68,8 +91,8 @@ const SearchCandidates = ({searchStr, setSearchStr, candidates, repo, repoVersio
           resource='concepts'
           noSorting
           noToolbar
-          rowsPerPageOptions={-1}
-          resultContainerStyle={{height: 'calc(100vh - 582px)'}}
+          rowsPerPageOptions={[]}
+          resultContainerStyle={{height: 'calc(100vh - 630px)'}}
           onShowItemSelect={item => {
             setShowItem(item)
             setTimeout(() => {

src/components/search/SearchFilters.jsx

@@ -123,7 +123,7 @@ const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFil
 
   return (
     <div className='col-xs-12 padding-0'>
-      <div className='col-xs-12' style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2, padding: '14px 0 0 0'}}>
+      <div className='col-xs-12' style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2, padding: 0}}>
         <span>
           <b>{t('search.filters')}</b>
         </span>
@@ -147,34 +147,34 @@ const SearchFilters = ({filters, resource, onChange, kwargs, bgColor, appliedFil
                   padding: '2px 0 4px 0',
                 }}
               >
-            <ListSubheader sx={{p: 0, fontWeight: 'bold', background: bgColor, lineHeight: '30px'}}>{startCase(field)}</ListSubheader>
+            <ListSubheader sx={{p: 0, fontWeight: 'bold', background: bgColor, lineHeight: '30px', fontSize: '11px'}}>{startCase(field)}</ListSubheader>
                 {
                   getFieldFilters(field, fieldFilters).map(value => {
                     const labelId = `checkbox-list-label-${value[0]}`;
                     const key = `${field}-${value[0]}`
 
                     return (
                       <ListItemButton key={key} onClick={handleToggle(field, value)} sx={{p: '0 12px 0 4px'}} disabled={value[3] === true}>
-                        <ListItemIcon sx={{minWidth: '25px'}}>
+                        <ListItemIcon sx={{minWidth: '14px', '.MuiSvgIcon-root': {fontSize: '16px'}}}>
                           <Checkbox
                             size="small"
                             edge="start"
                             checked={isApplied(field, value)}
                             tabIndex={-1}
                             disableRipple
                             inputProps={{ 'aria-labelledby': labelId }}
-                            style={{padding: '4px 8px'}}
+                            style={{padding: '2px 0 2px 6px'}}
                           />
                         </ListItemIcon>
-                        <ListItemText id={labelId} primary={formattedName(field, value[0]) || 'None'} primaryTypographyProps={{style: {fontSize: '0.875rem'}}} style={{margin: 0}} />
+                        <ListItemText id={labelId} primary={formattedName(field, value[0]) || 'None'} primaryTypographyProps={{style: {fontSize: '0.8rem'}}} style={{margin: 0}} />
                         <span style={{fontSize: '0.7rem'}}>{value[1].toLocaleString()}</span>
                       </ListItemButton>
                     );
                   })}
               </List>
               {
                 shouldShowExpand &&
-                  <Button size='small' onClick={() => toggleExpanded(field)} style={{textTransform: 'none'}} color='secondary' startIcon={isExpanded ? <UpIcon fontSize='inherit'/> : <DownIcon fontSize='inherit'/>}>
+                  <Button size='small' onClick={() => toggleExpanded(field)} style={{textTransform: 'none', fontSize: '10px'}} color='secondary' startIcon={isExpanded ? <UpIcon fontSize='inherit'/> : <DownIcon fontSize='inherit'/>}>
                     {isExpanded ? t('common.hide') : `${t('common.show')} ${fieldFilters.length - 4} ${t('common.more').toLowerCase()}`}
                   </Button>
               }