add filtering in the hits page

vishnayak · May 23, 2022 · 8e2db2b · 8e2db2b
1 parent 0ba2f2a
commit 8e2db2b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/src/components/hits/SearchHits.tsx b/src/components/hits/SearchHits.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Pagination from '@mui/material/Pagination';
 import './SearchHits.css';
 import { SearchHitCard } from '@components/search-hit-card/SearchHitCard';
-import { Button } from '@mui/material';
+import { Button, FormControl, MenuItem, Select, SelectChangeEvent } from '@mui/material';
 
 interface SearchHitsProps {
     hits: SearchHit[];
@@ -29,8 +29,6 @@ export interface Sentence {
 
 const TRANSLATE_ALL = 'Translate All';
 const SHOW_ORIGINAL = 'Show Original';
-const SHOW_ALL = 'Show all Hits';
-const SHOW_RELEVANT = 'Filter Relevant Hits';
 
 export const SearchHits: React.FC<SearchHitsProps> = ({ hits }) => {
     const allIndices: number[] = [];
@@ -50,8 +48,8 @@ export const SearchHits: React.FC<SearchHitsProps> = ({ hits }) => {
         setTranslateAll(prev => !prev);
     }
 
-    const handleFilterToggle = () => {
-        setShowRelevant(prev => !prev);
+    const handleFilterChange = (e: SelectChangeEvent<number>) => {
+        setShowRelevant(!!e.target.value);
         setPage(1);
     };
 
@@ -63,7 +61,18 @@ export const SearchHits: React.FC<SearchHitsProps> = ({ hits }) => {
         <Pagination classes={{ root: 'search-hits-pagination' }} count = {pgNo} page={page} onChange={handlePageChange}/>
         <div className={'pagination-text-section'}>
             <div className={'pagination-text'}>{`Showing ${Math.min((page-1)*pageSize + 1, indicesToShow.length)} - ${Math.min(page*pageSize, indicesToShow.length)} of ${indicesToShow.length} hits`}</div>
-            <Button variant={'outlined'} onClick={handleFilterToggle}>{showRelevant ? SHOW_ALL : SHOW_RELEVANT}</Button>
+            <FormControl variant='standard' sx={{ m: 1, minWidth: 120 }}>
+                <Select
+                    labelId={'filter-label'}
+                    value={showRelevant ? 1 : 0}
+                    onChange={handleFilterChange}
+                    label='Filter Hits'
+                >
+                    <MenuItem value={0}>All hits</MenuItem>
+                    <MenuItem value={1}>Relevant Hits</MenuItem>
+                </Select>
+            </FormControl>
+            {/* <Button variant={'outlined'} onClick={handleFilterToggle}>{showRelevant ? SHOW_ALL : SHOW_RELEVANT}</Button> */}
             <Button variant={'outlined'} onClick={handleTranslateAllClick}>{translateAll ? SHOW_ORIGINAL : TRANSLATE_ALL}</Button>
         </div>
         {indicesToShow.slice((page-1)*pageSize, (page-1)*pageSize + 10 ).map(index => <React.Fragment key = {hits[index].docid}>

diff --git a/src/components/request-creation-wizard/RequestWizard.tsx b/src/components/request-creation-wizard/RequestWizard.tsx
@@ -346,7 +346,7 @@ export const RequestWizard: React.FC<RequestWizardProps> = (props) => {
         }>
             <span onMouseOver={getHelper} hidden={false}>
                 {step < steps.length ? <LoadingButton loading={isNextLoading} endIcon={!isLastStep && <NavigateNextIcon/>} loadingPosition="end" variant={'contained'} color={'primary'} onClick={handleNext} disabled={!validateNextStep()}>
-                    {isLastStep ? 'Create Request' : 'Next'}
+                    {isLastStep ? (requestNumProp ? 'Save Changes' : 'Create Request') : 'Next'}
                 </LoadingButton> : ''}
             </span>
         </Tooltip>

diff --git a/src/components/search-hit-card/SearchHitCard.css b/src/components/search-hit-card/SearchHitCard.css
@@ -42,5 +42,8 @@
 }
 
 .search-hit-card-header {
-    position: absolute;
+    position: sticky;
+    margin: 0 8px;
+    font-size: 12px !important;
+    top: 4px;
 }
diff --git a/src/components/search-hit-card/SearchHitCard.tsx b/src/components/search-hit-card/SearchHitCard.tsx
@@ -60,7 +60,7 @@ export const SearchHitCard: React.FC<SearchHitCardProps> = ({ searchHit, showTra
 
     return <Card elevation={8} classes={{ root: 'search-hit-card' }}>
         <div className={'search-hit-card-header'}>
-            <span>#{hitIndex+1}</span>
+            <span>{hitIndex+1}.</span>
             {searchHit.isRelevant && <Chip classes={{label: 'search-hit-relevance-label-span', root: 'search-hit-relevance-label'}} label="Relevant" color="success" />}
         </div>
         <CardContent classes={{ root: expanded ? 'search-hit-card-content' : 'search-hit-card-content search-hit-card-content--compact' }}>