Skip to content

Commit bd3dfa4

Browse files
longshuicylmarini
longshuicy
and
lmarini
authored
175 search box syntax (#181)
* custom query * add a test query box for lucene string query * use querystring search * no need to use kbn library to parse string query * can't get trigger event working * move error boundary to wrap around the result; so still expose searchbox * hook it correctly with embedded search too * add a button to toggle between string and facet * remove unused import * Updated search query syntax error message. Co-authored-by: Luigi Marini <[email protected]>
1 parent a4de316 commit bd3dfa4

File tree

4 files changed

+283
-225
lines changed

4 files changed

+283
-225
lines changed

‎frontend/src/components/Layout.tsx‎

Lines changed: 96 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import {useSelector} from "react-redux";
2323
import {RootState} from "../types/data";
2424
import {AddBox, Create, Explore} from "@material-ui/icons";
2525
import {EmbeddedSearch} from "./search/EmbeddedSearch";
26-
import {SearchErrorBoundary} from "./search/SearchErrorBoundary";
2726
import {searchTheme} from "../theme";
2827
import {ReactiveBase} from "@appbaseio/reactivesearch";
2928
import Cookies from "universal-cookie";
@@ -53,7 +52,7 @@ const Main = styled('main', {shouldForwardProp: (prop) => prop !== 'open'})<{
5352
}));
5453

5554

56-
const SearchDiv = styled("div")(({ theme }) => ({
55+
const SearchDiv = styled("div")(({theme}) => ({
5756
position: "relative",
5857
marginLeft: theme.spacing(3),
5958
marginBottom: "-5px", // to compoensate the tags div
@@ -115,11 +114,10 @@ export default function PersistentDrawerLeft(props) {
115114

116115
const location = useLocation();
117116

118-
useEffect(()=>{
119-
if (location.pathname.includes("search")){
117+
useEffect(() => {
118+
if (location.pathname.includes("search")) {
120119
setEmbeddedSearchHidden(true);
121-
}
122-
else{
120+
} else {
123121
setEmbeddedSearchHidden(false);
124122
}
125123
}, [location])
@@ -136,113 +134,99 @@ export default function PersistentDrawerLeft(props) {
136134
headers={headers}
137135
theme={searchTheme}
138136
>
139-
<SearchErrorBoundary>
140-
<Box sx={{display: 'flex'}}>
141-
<CssBaseline/>
142-
<AppBar position="fixed" open={open}>
143-
<Toolbar>
144-
<IconButton
145-
color="inherit"
146-
aria-label="open drawer"
147-
onClick={handleDrawerOpen}
148-
edge="start"
149-
sx={{mr: 2, ...(open && {display: 'none'})}}
150-
>
151-
<MenuIcon/>
152-
</IconButton>
153-
<Link href="/">
154-
<Box component="img" src="../../public/clowder-logo-sm.svg" alt="clowder-logo-sm"
155-
sx={{verticalAlign: "middle"}}/>
156-
</Link>
157-
158-
{/*for searching*/}
159-
<SearchDiv hidden={embeddedSearchHidden}>
160-
<EmbeddedSearch/>
161-
</SearchDiv>
162-
<Box sx={{flexGrow: 1}}/>
163-
<Box sx={{marginLeft: "auto"}}>
164-
{
165-
loggedOut ?
166-
<>
167-
<Link href="/auth/register" sx={link}>Register</Link>
168-
<Link href="/auth/login" sx={link}>Login</Link>
169-
</>
170-
:
171-
<Link href="/auth/logout" sx={link}>Logout</Link>
172-
}
173-
</Box>
174-
</Toolbar>
175-
</AppBar>
176-
<Drawer
177-
sx={{
137+
<Box sx={{display: 'flex'}}>
138+
<CssBaseline/>
139+
<AppBar position="fixed" open={open}>
140+
<Toolbar>
141+
<IconButton
142+
color="inherit"
143+
aria-label="open drawer"
144+
onClick={handleDrawerOpen}
145+
edge="start"
146+
sx={{mr: 2, ...(open && {display: 'none'})}}
147+
>
148+
<MenuIcon/>
149+
</IconButton>
150+
<Link href="/">
151+
<Box component="img" src="../../public/clowder-logo-sm.svg" alt="clowder-logo-sm"
152+
sx={{verticalAlign: "middle"}}/>
153+
</Link>
154+
155+
{/*for searching*/}
156+
<SearchDiv hidden={embeddedSearchHidden}>
157+
<EmbeddedSearch/>
158+
</SearchDiv>
159+
<Box sx={{flexGrow: 1}}/>
160+
<Box sx={{marginLeft: "auto"}}>
161+
{
162+
loggedOut ?
163+
<>
164+
<Link href="/auth/register" sx={link}>Register</Link>
165+
<Link href="/auth/login" sx={link}>Login</Link>
166+
</>
167+
:
168+
<Link href="/auth/logout" sx={link}>Logout</Link>
169+
}
170+
</Box>
171+
</Toolbar>
172+
</AppBar>
173+
<Drawer
174+
sx={{
175+
width: drawerWidth,
176+
flexShrink: 0,
177+
'& .MuiDrawer-paper': {
178178
width: drawerWidth,
179-
flexShrink: 0,
180-
'& .MuiDrawer-paper': {
181-
width: drawerWidth,
182-
boxSizing: 'border-box',
183-
},
184-
}}
185-
variant="persistent"
186-
anchor="left"
187-
open={open}
188-
>
189-
<DrawerHeader>
190-
<IconButton onClick={handleDrawerClose}>
191-
{theme.direction === 'ltr' ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
192-
</IconButton>
193-
</DrawerHeader>
194-
<Divider/>
195-
<List>
196-
<ListItem key={"explore"} disablePadding>
197-
<ListItemButton component={RouterLink} to="/">
198-
<ListItemIcon>
199-
<Explore/>
200-
</ListItemIcon>
201-
<ListItemText primary={"Explore"}/>
202-
</ListItemButton>
203-
</ListItem>
204-
</List>
205-
<Divider/>
206-
<List>
207-
<ListItem key={"search"} disablePadding>
208-
<ListItemButton component={RouterLink} to="/search">
209-
<ListItemIcon>
210-
<SearchDatasetIcon/>
211-
</ListItemIcon>
212-
<ListItemText primary={"Search"}/>
213-
</ListItemButton>
214-
</ListItem>
215-
</List>
216-
<Divider/>
217-
<List>
218-
<ListItem key={"newdataset"} disablePadding>
219-
<ListItemButton component={RouterLink} to="/create-dataset">
220-
<ListItemIcon>
221-
<AddBox/>
222-
</ListItemIcon>
223-
<ListItemText primary={"New Dataset"}/>
224-
</ListItemButton>
225-
</ListItem>
226-
</List>
227-
<Divider/>
228-
<List>
229-
<ListItem key={"newmetadata"} disablePadding>
230-
<ListItemButton component={RouterLink} to="/new-metadata-definition">
231-
<ListItemIcon>
232-
<Create/>
233-
</ListItemIcon>
234-
<ListItemText primary={"Create Metadata Definition"}/>
235-
</ListItemButton>
236-
</ListItem>
237-
</List>
238-
<Divider/>
239-
</Drawer>
240-
<Main open={open}>
241-
<DrawerHeader/>
242-
{children}
243-
</Main>
244-
</Box>
245-
</SearchErrorBoundary>
179+
boxSizing: 'border-box',
180+
},
181+
}}
182+
variant="persistent"
183+
anchor="left"
184+
open={open}
185+
>
186+
<DrawerHeader>
187+
<IconButton onClick={handleDrawerClose}>
188+
{theme.direction === 'ltr' ? <ChevronLeftIcon/> : <ChevronRightIcon/>}
189+
</IconButton>
190+
</DrawerHeader>
191+
<Divider/>
192+
<List>
193+
<ListItem key={"explore"} disablePadding>
194+
<ListItemButton component={RouterLink} to="/">
195+
<ListItemIcon>
196+
<Explore/>
197+
</ListItemIcon>
198+
<ListItemText primary={"Explore"}/>
199+
</ListItemButton>
200+
</ListItem>
201+
</List>
202+
<Divider/>
203+
<List>
204+
<ListItem key={"search"} disablePadding>
205+
<ListItemButton component={RouterLink} to="/search">
206+
<ListItemIcon>
207+
<SearchDatasetIcon/>
208+
</ListItemIcon>
209+
<ListItemText primary={"Search"}/>
210+
</ListItemButton>
211+
</ListItem>
212+
</List>
213+
<Divider/>
214+
<List>
215+
<ListItem key={"newdataset"} disablePadding>
216+
<ListItemButton component={RouterLink} to="/create-dataset">
217+
<ListItemIcon>
218+
<AddBox/>
219+
</ListItemIcon>
220+
<ListItemText primary={"New Dataset"}/>
221+
</ListItemButton>
222+
</ListItem>
223+
</List>
224+
</Drawer>
225+
<Main open={open}>
226+
<DrawerHeader/>
227+
{children}
228+
</Main>
229+
</Box>
246230
</ReactiveBase>
247231
);
248232
}

‎frontend/src/components/search/EmbeddedSearch.tsx‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import {DataSearch} from "@appbaseio/reactivesearch";
33

44
import {useNavigate} from "react-router-dom";
5+
import {SearchErrorBoundary} from "./SearchErrorBoundary";
56

67

78
export function EmbeddedSearch() {
@@ -11,33 +12,37 @@ export function EmbeddedSearch() {
1112

1213
// @ts-ignore
1314
return (
14-
<DataSearch componentId="searchbox" autosuggest={true}
15-
highlight={true} queryFormat="or" fuzziness={0}
16-
debounce={100}
17-
// apply react to the filter
18-
URLParams={true}
19-
showFilter={true}
20-
showClear
21-
renderNoSuggestion="No suggestions found."
22-
dataField={[
23-
{field: "name", weight: 3},
24-
{field: "description", weight: 2},
25-
{field: "author.keyword", weight: 2},
26-
]}
27-
// placeholder="Search for Dataset"
28-
innerClass={{
29-
title: "search-title",
30-
input: "embedded-search-input",
31-
}}
32-
onValueSelected={
33-
function(value, cause, source) {
34-
if (cause === "SUGGESTION_SELECT" ||
35-
cause === "ENTER_PRESS" ||
36-
cause === "SEARCH_ICON_CLICK"){
37-
history(`/search?searchbox="${value}"`);
38-
}
39-
}
40-
}
41-
/>
42-
);
15+
<>
16+
<SearchErrorBoundary>
17+
<DataSearch componentId="searchbox" autosuggest={true}
18+
highlight={true} queryFormat="or" fuzziness={0}
19+
debounce={100}
20+
// apply react to the filter
21+
URLParams={true}
22+
showFilter={true}
23+
showClear
24+
renderNoSuggestion="No suggestions found."
25+
dataField={[
26+
{field: "name", weight: 3},
27+
{field: "description", weight: 2},
28+
{field: "author.keyword", weight: 2},
29+
]}
30+
// placeholder="Search for Dataset"
31+
innerClass={{
32+
title: "search-title",
33+
input: "embedded-search-input",
34+
}}
35+
onValueSelected={
36+
function (value, cause, _) {
37+
if (cause === "SUGGESTION_SELECT" ||
38+
cause === "ENTER_PRESS" ||
39+
cause === "SEARCH_ICON_CLICK") {
40+
history(`/search?searchbox="${value}"`);
41+
}
42+
}
43+
}
44+
/>
45+
</SearchErrorBoundary>
46+
</>
47+
);
4348
}

0 commit comments

Comments
 (0)