Skip to content

Commit

Permalink
Improve search UI landing page + search bar when displaying results (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
nicoella authored Sep 8, 2024
1 parent 4ddc640 commit e8b24f6
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 29 deletions.
72 changes: 43 additions & 29 deletions src/main/frontend/pages/components/SearchBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,15 @@

import React, { useState } from 'react';
import Dropdown from './Dropdown';
import { Input, Button, Box, Spinner, Text, VStack, HStack, Container, Heading, Divider, Flex, FormControl, Center, Select } from '@chakra-ui/react';
import { Input, Button, Box, Spinner, Text, VStack, HStack, Container, Heading, Divider, Flex, FormControl, Center, Select, Image } from '@chakra-ui/react';

const SearchBar: React.FC = () => {
const [loading, setLoading] = useState<boolean>(false);
const [results, setResults] = useState<Array<any>>([]);
const [query, setQuery] = useState<string>('');
const [queryType, setQueryType] = useState<string>('search query');
const [index, setIndex] = useState<string>('');
const [searchPerformed, setSearchPerformed] = useState(false);

const fetchResults = async (query: string, index: string) => {
setLoading(true);
Expand Down Expand Up @@ -54,40 +55,53 @@ const SearchBar: React.FC = () => {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
fetchResults(query, index);
setSearchPerformed(true);
};

return (
<VStack direction="column" justifyContent="space-between">
<form style={{ width: "100%", position: "sticky", top: 0, zIndex: 10, backgroundColor: "white", padding: "16px", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", height: "100%" }} onSubmit={handleSubmit}>
<Heading as="h1" size="xl" textAlign="center" marginBottom={4}>Anserini Search</Heading>
<Flex direction="column" gap={4} height="100%">
<Dropdown onSelect={(selectedValue) => setIndex(selectedValue)} />
<HStack spacing={4}>
<Select
defaultValue="search query"
placeholder="Search by..."
onChange={(e) => setQueryType(e.target.value)}
width="150px"
>
<option value="search query">By query</option>
<option value="docid query">By docid</option>
</Select>
<Input
type="text"
value={query}
placeholder="Type your query here..."
onChange={(e) => setQuery(e.target.value)}
bg="gray.100"
border="none"
width="100%"
_focus={{ bg: 'white', boxShadow: 'outline' }}
/>
<Button type="submit" colorScheme="blue" isLoading={loading}>Go!</Button>
</HStack>
<form style={{ width: searchPerformed ? "100%" : "calc(100% - 400px)", position: "sticky", top: 0,
zIndex: 10, backgroundColor: "white", padding: searchPerformed ? "16px" : "16px 80px",
boxShadow: searchPerformed ? "0 4px 6px rgba(0, 0, 0, 0.1)" : "", height: "100%",
margin: searchPerformed ? "0" : "0 auto", transition: "padding 0.3s ease, box-shadow 0.3s ease"
}} onSubmit={handleSubmit}>
<Flex direction={searchPerformed ? 'row' : 'column'} marginTop={searchPerformed ? '10px' : 'auto'} marginBottom={searchPerformed ? '0px' : 'auto'}>
<Flex direction="column" style={{width: searchPerformed ? "80px" : "100%", marginRight: '20px' }}>
<Image src="anserini-logo.png" alt="Anserini Logo"
style={{ width: searchPerformed ? "80px" : "180px", height: "auto",
display: searchPerformed ? 'inline-block' : 'block', margin: '0 auto', marginBottom: '15px', marginTop: searchPerformed ? '0px' : '200px'}} />
<Heading as="h1" size={searchPerformed ? 's' : 'xl'}
style={{ width: searchPerformed? '80px' : 'auto', textAlign: 'center'}} marginBottom={10}>Anserini Search</Heading>
</Flex>
<Flex direction="column" gap={4} height="100%" style={{ width: searchPerformed ? "calc(100% - 100px)" : "100%", marginTop: '30px' }}>
<Dropdown onSelect={(selectedValue) => setIndex(selectedValue)} />
<HStack spacing={4}>
<Select
defaultValue="search query"
placeholder="Search by..."
onChange={(e) => setQueryType(e.target.value)}
width="150px"
>
<option value="search query">By query</option>
<option value="docid query">By docid</option>
</Select>
<Input
type="text"
value={query}
placeholder="Type your query here..."
onChange={(e) => setQuery(e.target.value)}
bg="gray.100"
border="none"
width="100%"
_focus={{ bg: 'white', boxShadow: 'outline' }}
/>
<Button type="submit" colorScheme="blue" isLoading={loading}>Go!</Button>
</HStack>
</Flex>
</Flex>
</form>
{loading && <Spinner size="lg" />}
{results.map((result, index) => (
{searchPerformed && loading && <Spinner size="lg" />}
{searchPerformed && results.map((result, index) => (
<Box key={index} p={4} width="calc(100% - 32px)" shadow="md" borderWidth="1px" borderRadius="md">
<Flex justifyContent="space-between" alignItems="center" direction="row">
{result.docid && <Text as="h3" fontWeight="bold">
Expand Down
Binary file added src/main/frontend/public/anserini-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e8b24f6

Please sign in to comment.