Webapp UI update (#2554)

- sticky search bar / header - flatten page
castorini · Jul 23, 2024 · 10d9388 · 10d9388
1 parent c8f5948
commit 10d9388
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 211 deletions.
diff --git a/docs/rest-api.md b/docs/rest-api.md
@@ -147,4 +147,4 @@ Output is an object containing the 'cached' property
 {
   "cached": true
 }
-```
+```
diff --git a/src/main/frontend/pages/components/Dropdown.tsx b/src/main/frontend/pages/components/Dropdown.tsx
@@ -16,17 +16,6 @@ interface IndexInfo {
   cached: boolean;
 }
 
-interface IndexInfo {
-  indexName: string;
-  description: string;
-  filename: string;
-  corpus: string;
-  model: string;
-  urls: string[];
-  md5: string;
-  cached: boolean;
-}
-
 const Dropdown: React.FC<Props> = ({ onSelect }) => {
   const [selectedCollection, setSelectedCollection] = useState<string | null>(null);
   const [selectedCorpus, setSelectedCorpus] = useState<string | null>(null);
@@ -92,7 +81,7 @@ const Dropdown: React.FC<Props> = ({ onSelect }) => {
                 <option key={corpus} value={corpus}>{corpus.replace('MS MARCO', '').replace('BEIR: ', '')}</option>
               ))}
             </Select>
-            {selectedCorpus && ( 
+            {selectedCorpus && (
             <Select placeholder="Select" onChange={(e) => {
               setSelectedIndex(e.target.value);
               onSelect(e.target.value);

diff --git a/src/main/frontend/pages/components/SearchBar.tsx b/src/main/frontend/pages/components/SearchBar.tsx
@@ -57,59 +57,54 @@ const SearchBar: React.FC = () => {
   };
 
   return (
-    <Flex maxW="container.xl" height="90vh" mt="3vh" mx="auto" p={4} boxShadow="lg" borderRadius="lg" bg="white" direction="column" justifyContent="space-between">
-      <Heading as="h1" size="xl" textAlign="center">Anserini Search</Heading>
-      <Divider />
-      <Box height="90%" p={4}>
-        <form style={{ height: "100%" }} onSubmit={handleSubmit}>
-          <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>
-            <Box p={4} borderWidth="1px" borderRadius="md" overflowY="auto" flexGrow={1}>
-            {loading && <Spinner size="lg" />}
-              <VStack height="100%" spacing={4} align="stretch">
-                {results.map((result, index) => (
-                  <Box key={index} p={4} shadow="md" borderWidth="1px" borderRadius="md">
-                    <Flex justifyContent="space-between" alignItems="center" direction="row">
-                      {result.docid && <Text as="h3" fontWeight="bold">
-                        Document ID: {result.docid}
-                      </Text>}
-                      {result.score && <Text as="span" fontWeight="normal">Score: {result.score}</Text>}
-                    </Flex>
-                    {result.doc && Object.entries(result.doc).map(([key, value]) => (
-                      <Text key={key}>
-                        <strong>{key}:</strong> {JSON.stringify(value)}
-                      </Text>
-                    ))}
-                  </Box>
-                ))}
-              </VStack>
-            </Box>
+    <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>
+        </Flex>
+      </form>
+      {loading && <Spinner size="lg" />}
+      {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">
+              Document ID: {result.docid}
+            </Text>}
+            {result.score && <Text as="span" fontWeight="normal">Score: {result.score}</Text>}
           </Flex>
-        </form>
-      </Box>
-    </Flex>
+          {result.doc && Object.entries(result.doc).map(([key, value]) => (
+            <Text key={key}>
+              <strong>{key}:</strong> {
+                typeof value === 'object' ? JSON.stringify(value) : (String)(value)
+              }
+            </Text>
+          ))}
+        </Box>
+      ))}
+    </VStack>
   );
 };
 

diff --git a/src/main/frontend/styles/globals.css b/src/main/frontend/styles/globals.css
@@ -1,150 +1,5 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  background: #f7f7f7;
-  color: #333;
-}
-
-/* All containers */
-.container {
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-/* Container for centering the search bar in the page */
-.search-container {
-  margin: 0 auto;
-  text-align: center;
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: row;
-}
-
-/* Style for the search bar container */
-.search-bar {
-  display: flex;
-  min-width: 480px;
-  flex-direction: column;
-  gap: 1rem;
-  background: #ffffff;
-  border-radius: 1rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 1rem;
-  margin: 3rem auto;
-}
-
-/* Style for the search input container */
-.search-input-container {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: space-between;
-}
-
-/* Style for the search input */
-.search-input {
-  flex-grow: 1;
-  padding: 0.5rem;
-  border: 1px solid #ccc;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-}
-
-/* Removing the input field's outline on focus */
-.search-input:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.5);
-}
-
-/* Style for the search button */
-.search-button {
-  padding: 0.5rem 1rem;
-  background-color: #0070f3;
-  color: #ffffff;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-/* Change background color slightly on hover for the button */
-.search-button:hover {
-  background-color: #0056b3;
-}
-
-/* Style for the search results list */
-ul {
-  list-style-type: none;
-  padding-left: 0;
-  margin-left: 0;
-}
-
-/* Style for the search results container */
-.query-card {
-  background: white;
-  padding: 1rem;
-  margin: 1rem 0;
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  text-align: left;
-}
-
-/* Style for the search results list item */
-.query-card > h3 {
-  margin: 0;
-}
-
-/* Style for the search results list item's span */
-.query-card > h3 > span {
-  float: right;
-  color: #555;
-  font-size: 0.95rem;
-}
-
-/* Style for the search results list item's p */
-.query-card > p {
-  margin-bottom: 0.5rem;
-}
-
-/* Style for the dropdowns */
-.dropdowns {
-  display: flex;
-  gap: 0.5rem;
-  justify-content: space-between;
-}
-
-/* Style for the dropdown button */
-.dropdown-button {
-  padding: 0.5rem 1rem;
-  background-color: #ffffff;
-  color: #333333;
-  border-color: #cccccc;
-  border-radius: 0.5rem;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-/* Style for the dropdown items */
-.dropdown-item {
-  width: 100%;
-  background-color: #ffffff;
-  border-radius: 0;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-/* Change background color slightly on hover for dropdown items */
-.dropdown-item:hover {
-  background-color: #f7f7f7;
-}
-
-/* Change background color slightly on hover for dropdown buttons */
-.cached {
-  background-color: #b7ffa4;
+  box-sizing: border-box;
 }