feat: Search functionality - Frontend

taxonomy-editor-frontend/src/App.js

@@ -4,6 +4,7 @@ import ResponsiveAppBar from "./components/ResponsiveAppBar";
 import Entry from "./pages/allentries";
 import EditEntry from "./pages/editentry";
 import Home from './pages/home';
+import SearchNode from "./pages/search";
 
 const theme = createTheme({
   typography: {
@@ -26,6 +27,7 @@ function App() {
             <Route path="/" element={<Home />} />
             <Route path="/entry" element={<Entry />} />
             <Route path="/entry/:id" element={<EditEntry />} />
+            <Route path="/search" element={<SearchNode />} />
           </Routes>
         </div>
     </Router>

taxonomy-editor-frontend/src/components/ResponsiveAppBar.jsx

@@ -17,7 +17,8 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 const displayedPages = [
-  { url: "entry", translationKey: "Nodes" }
+  { url: "entry", translationKey: "Nodes" },
+  { url: "search", translationKey: "Search" }
 ];
 
 const ResponsiveAppBar = () => {

taxonomy-editor-frontend/src/pages/allentries/index.jsx

@@ -82,8 +82,8 @@ const Entry = () => {
                 Number of nodes in taxonomy: {nodes.length}
             </Typography>
             {/* Table for listing all nodes in taxonomy */}
-            <TableContainer sx={{ml: 2}} component={Paper}>
-                <Table sx={{ width: 400 }}>
+            <TableContainer sx={{ml: 2, width: 400}} component={Paper}>
+                <Table>
                     <TableHead>
                     <TableRow>
                         <Stack direction="row" alignItems="center">

taxonomy-editor-frontend/src/pages/editentry/AccumulateAllComponents.jsx

@@ -78,7 +78,7 @@ const AccumulateAllComponents = ({ id }) => {
             <Button
                 variant="contained"
                 onClick={handleSubmit}
-                sx={{ml: 4, mt:2, width: 130}}>
+                sx={{ml: 4, mt:2, width: 130, mb: 2}}>
                     Submit
             </Button>
             {/* Snackbar for acknowledgment of update */}

taxonomy-editor-frontend/src/pages/search/index.jsx

@@ -0,0 +1,70 @@
+import { Typography, Box, TextField, Grid, IconButton, InputAdornment } from "@mui/material";
+import SearchIcon from '@mui/icons-material/Search';
+import Container from '@mui/material/Container';
+import { useState } from "react";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
+import SearchResults from "./results";
+
+const SearchNode = () => {
+    const [searchParams] = useSearchParams();
+    let queryString = searchParams.get('query');
+    if (queryString === "") queryString = "\"\""
+
+    const [query, setQuery] = useState("");
+    const navigate = useNavigate();
+    return (
+      <Box>
+        <Container component="main" maxWidth="xs">
+            <Grid
+            container
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            >
+                <Grid item xs={3} sx={{mt: 4}}>
+                     <Typography variant="h3">Search</Typography>
+                </Grid>
+                <Box
+                  component="img"
+                  sx={{mt: 2}}
+                  width={100} 
+                  height={100}
+                  src={require('../../assets/classification.png')} 
+                  alt="Classification Logo" 
+                />
+                <TextField
+                    sx={{mt: 3}}
+                    InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <IconButton
+                                disabled={query.trim().length === 0}
+                                component={Link}
+                                to={{
+                                  pathname: '/search',
+                                  search: `?query=${query}`
+                                }}
+                            >
+                              <SearchIcon />
+                            </IconButton>
+                          </InputAdornment>
+                        )
+                      }}
+                    fullWidth
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" && query.trim().length !== 0) {
+                        navigate(`/search?query=${query}`)
+                      }
+                    }}
+                    onChange = {event => {
+                        setQuery(event.target.value.trim())
+                    }}
+                    value={query} />
+            </Grid>
+        </Container>
+        {queryString !== null && <SearchResults query={queryString}/>}
+      </Box>
+    );
+}
+
+export default SearchNode;

taxonomy-editor-frontend/src/pages/search/results.jsx

@@ -0,0 +1,227 @@
+import { Typography, Box, TextField, Grid, Stack, Button, IconButton, Paper, FormControl, InputLabel } from "@mui/material";
+import useFetch from "../../components/useFetch";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import { API_URL } from "../../constants";
+import Container from '@mui/material/Container';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import EditIcon from '@mui/icons-material/Edit';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Select from '@mui/material/Select';
+import ISO6391 from 'iso-639-1';
+
+const SearchResults = ({query}) => {
+    const url = API_URL+`search?query=${query}`
+    const { data: nodes, isPending, isError, isSuccess, errorMessage } = useFetch(url);
+    const [nodeType, setNodeType] = useState('entry'); // Used for storing node type
+    const [newLanguageCode, setNewLanguageCode] = useState(null); // Used for storing new Language Code
+    const [newNode, setnewNode] = useState(null); // Used for storing canonical tag
+    const [isValidLC, setisValidLC] = useState(false); // Used for validating a new LC
+    const [openAddDialog, setOpenAddDialog] = useState(false);
+    const [openSuccessDialog, setOpenSuccessDialog] = useState(false);
+    const [btnDisabled, setBtnDisabled] = useState(true);
+    const navigate = useNavigate();
+
+    // Handler function for button clicks
+    const handleClick = (event, id) => {
+        event.preventDefault();
+        navigate('/entry/'+id);
+    }
+    // Helper functions for Dialog component
+    function handleCloseAddDialog() { setOpenAddDialog(false); }
+    function handleOpenAddDialog() { setOpenAddDialog(true); }
+    function handleCloseSuccessDialog() { setOpenSuccessDialog(false); }
+    function handleOpenSuccessDialog() { setOpenSuccessDialog(true); }
+
+    function handleAddNode() {
+        const newNodeID = newLanguageCode + ':' + newNode // Reconstructing node ID
+        const data = {"id": newNodeID, "main_language": newLanguageCode};
+        fetch(url, {
+            method : 'POST',
+            headers: {"Content-Type" : "application/json"},
+            body: JSON.stringify(data)
+        }).then(() => {
+            handleCloseAddDialog();
+            handleOpenSuccessDialog();
+        }).catch((errorMessage) => {
+            // Do nothing
+        })
+    }
+
+    // Displaying errorMessages if any
+    if (isError) {
+        return (<Typography variant='h5'>{errorMessage}</Typography>)
+    }
+
+    // Loading...
+    if (isPending) {
+        return (
+            <Container component="main" maxWidth="xs">
+            <Grid
+            container
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            >
+                <Typography variant='h5'>Loading..</Typography>
+                </Grid>   
+            </Container>
+        )
+    }
+
+    return (
+        <Box>
+            <Container component="main" maxWidth="xs">
+            <Grid
+            container
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            >
+                <Grid item xs={3} sx={{mt: 4}}>
+                     <Typography variant="h4">Search Results</Typography>
+                </Grid>
+                <Typography variant="h6" sx={{mt: 2, mb: 1}}>
+                Number of nodes found: {nodes.length}
+                </Typography>
+                {/* Table for listing all nodes in taxonomy */}
+                <TableContainer sx={{ml: 2, width: 400}} component={Paper}>
+                    <Table>
+                        <TableHead>
+                        <TableRow>
+                            <Stack direction="row" alignItems="center">
+                                <TableCell align="left">
+                                <Typography variant="h6">
+                                    Nodes
+                                </Typography>
+                                </TableCell>
+                                <IconButton sx={{ml: 1, color: "#808080"}} onClick={handleOpenAddDialog}>
+                                    <AddBoxIcon />
+                                </IconButton>
+                            </Stack>
+                            <TableCell align="left">
+                            <Typography variant="h6">
+                                Action
+                            </Typography>
+                            </TableCell>
+                        </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {nodes.map((node) => (
+                                <TableRow
+                                key={node}
+                                >
+                                    <TableCell align="left" component="td" scope="row">
+                                        <Typography variant="subtitle1">
+                                            {node}
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell align="left" component="td" scope="row">
+                                        <IconButton onClick={event => handleClick(event, node) } aria-label="edit">
+                                            <EditIcon color="primary"/>
+                                        </IconButton>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                {/* Dialog box for adding nodes */}
+                <Dialog open={openAddDialog} onClose={handleCloseAddDialog}>
+                    <DialogTitle>Add a node</DialogTitle>
+                    <DialogContent>
+                    <Stack direction="row" alignItems="center" sx={{mt: 1, ml: 2, mr: 2, mb: 2}}>
+                        <Typography>Type of node</Typography>
+                        <FormControl sx={{ml: 6.5}}>
+                            <InputLabel>Type</InputLabel>
+                            <Select
+                                native
+                                label="Type"
+                                value={nodeType}
+                                onChange={(e) => {
+                                    setNodeType(e.target.value);
+                                }}
+                            >
+                                {/* TODO: Add support for synonyms and stopwords */}
+                                <option value={'entry'}>Entry</option>
+                            </Select>
+                        </FormControl>
+                    </Stack>
+                    <Stack direction="row" alignItems="center" sx={{m: 2}}>
+                        <Typography>Main Language</Typography>
+                        <TextField
+                            onChange={(e) => { 
+                                setNewLanguageCode(e.target.value);
+                                const validateBool = ISO6391.validate(e.target.value);
+                                validateBool ? setisValidLC(true) : setisValidLC(false);
+                                validateBool ? setBtnDisabled(false) : setBtnDisabled(true);
+                            }}
+                            label="Language Code"
+                            error={!isValidLC}
+                            sx={{width : 150, ml: 4.5}}
+                            size="small"
+                            variant="outlined"
+                        />
+                    </Stack>
+                    {
+                        nodeType === 'entry' &&
+                        <Stack direction="row" alignItems="center" sx={{mt: 2, ml: 2, mr: 2}}>
+                        <Typography>Node ID</Typography>
+                        <TextField
+                            onChange={(e) => { 
+                                setnewNode(e.target.value);
+                            }}
+                            label="Node ID"
+                            sx={{width : 150, ml: 11}}
+                            size="small"
+                            variant="outlined"
+                        />
+                        </Stack>
+                    }
+                    </DialogContent>
+                    <DialogActions>
+                    <Button onClick={handleCloseAddDialog}>Cancel</Button>
+                    <Button 
+                        disabled={btnDisabled}
+                        onClick={(e) => {handleAddNode(e)}}>
+                            Add
+                    </Button>
+                    </DialogActions>
+                </Dialog>
+                {/* Dialog box for acknowledgement of addition of node */}
+                <Dialog
+                    open={openSuccessDialog}
+                    aria-labelledby="alert-dialog-title"
+                    aria-describedby="alert-dialog-description"
+                >
+                    <DialogTitle id="alert-dialog-title">
+                    {"Your edits have been saved!"}
+                    </DialogTitle>
+                    <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        The node {newNode} has been successfully added.
+                    </DialogContentText>
+                    </DialogContent>
+                    <DialogActions>
+                    <Button onClick={handleCloseSuccessDialog} autoFocus>
+                        Continue
+                    </Button>
+                    </DialogActions>
+                </Dialog>   
+            </Grid>
+        </Container>
+        </Box>
+    );
+}
+
+export default SearchResults;