Scix 650 abstract searchbar

src/components/AbstractSearchForm/AbstractSearchForm.tsx

@@ -0,0 +1,79 @@
+import { useStore } from '@/store';
+import { SearchBar } from '../SearchBar';
+import { ChangeEventHandler, useCallback } from 'react';
+import { makeSearchParams } from '@/utils/common/search';
+import { useSettings } from '@/lib/useSettings';
+import { IADSApiSearchParams } from '@/api/search/types';
+import router from 'next/router';
+import { applyFiltersToQuery } from '../SearchFacet/helpers';
+import { DatabaseEnum, IADSApiUserDataResponse } from '@/api/user/types';
+import { SolrSort } from '@/api/models';
+
+export const AbstractSearchForm = () => {
+  const { settings } = useSettings();
+  const submitQuery = useStore((state) => state.submitQuery);
+  const sort = [`${settings.preferredSearchSort} desc` as SolrSort];
+  const query = useStore((state) => state.query.q);
+
+  /**
+   * Take in a query object and apply any FQ filters
+   * These will either be any default ON filters or whatever has been set by the user in the preferences
+   */
+  const applyDefaultFilters = useCallback(
+    (query: IADSApiSearchParams) => {
+      const defaultDatabases = getListOfAppliedDefaultDatabases(settings.defaultDatabase);
+      if (Array.isArray(defaultDatabases) && defaultDatabases.length > 0) {
+        return applyFiltersToQuery({
+          query,
+          values: defaultDatabases,
+          field: 'database',
+          logic: 'or',
+        });
+      }
+      return query;
+    },
+    [settings.defaultDatabase],
+  );
+
+  /**
+   * Get a list of default databases that have been applied
+   * @param databases
+   */
+  const getListOfAppliedDefaultDatabases = (databases: IADSApiUserDataResponse['defaultDatabase']): Array<string> => {
+    const defaultDatabases = [];
+    for (const db of databases) {
+      // if All is selected, exit early here and return an empty array (no filters to apply)
+      if (db.name === DatabaseEnum.All && db.value) {
+        return [];
+      }
+
+      if (db.value) {
+        defaultDatabases.push(db.name);
+      }
+    }
+    return defaultDatabases;
+  };
+
+  const handleOnSubmit: ChangeEventHandler<HTMLFormElement> = useCallback(
+    (e) => {
+      e.preventDefault();
+      const query = new FormData(e.currentTarget).get('q') as string;
+
+      if (query && query.trim().length > 0) {
+        submitQuery();
+        const defaultedQuery = applyDefaultFilters({ q: query, sort, p: 1 }) as IADSApiSearchParams;
+        void router.push({
+          pathname: '/search',
+          search: makeSearchParams(defaultedQuery),
+        });
+      }
+    },
+    [applyDefaultFilters, sort, submitQuery],
+  );
+
+  return (
+    <form method="get" action="/search" onSubmit={handleOnSubmit}>
+      <SearchBar query={query} showBackLinkAs="results" />
+    </form>
+  );
+};

src/components/AbstractSearchForm/index.ts

@@ -0,0 +1 @@
+export * from './AbstractSearchForm';

src/components/AbstractSideNav/AbstractSideNav.tsx

@@ -172,12 +172,7 @@ export const AbstractSideNav = (props: IAbstractSideNavProps): ReactElement => {
       />
 
       {/* Small viewports */}
-      <TopNavigationMenu
-        menuItems={menuItems}
-        activeItem={activeItem}
-        display={{ base: 'initial', lg: 'none' }}
-        mx={2}
-      />
+      <TopNavigationMenu menuItems={menuItems} activeItem={activeItem} display={{ base: 'initial', lg: 'none' }} />
     </div>
   );
 };

src/components/Layout/AbsLayout.tsx

@@ -1,17 +1,15 @@
-import { ArrowLeftIcon } from '@chakra-ui/icons';
-import { Box, Button, Flex, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, Heading, Stack, Text } from '@chakra-ui/react';
 
-import { useBackToSearchResults } from '@/lib/useBackToSearchResults';
 import { MathJax } from 'better-react-mathjax';
 import Head from 'next/head';
 import { FC } from 'react';
 import { BRAND_NAME_FULL } from '@/config';
 import { Metatags } from '@/components/Metatags';
-import { SimpleLink } from '@/components/SimpleLink';
 import { AbstractSources } from '@/components/AbstractSources';
 import { AbstractSideNav } from '@/components/AbstractSideNav';
 import { stripHtml, unwrapStringValue } from '@/utils/common/formatters';
 import { IDocsEntity } from '@/api/search/types';
+import { AbstractSearchForm } from '@/components/AbstractSearchForm';
 
 interface IAbsLayoutProps {
   doc?: IDocsEntity;
@@ -20,15 +18,13 @@ interface IAbsLayoutProps {
 }
 
 export const AbsLayout: FC<IAbsLayoutProps> = ({ children, doc, titleDescription, label }) => {
-  const { getSearchHref, show: showBackLink } = useBackToSearchResults();
-
   const rawTitle = doc ? unwrapStringValue(doc.title) : '';
   const title = stripHtml(rawTitle);
   const suffix = `${BRAND_NAME_FULL} ${label}`;
   const pageTitle = title ? `${title} - ${suffix}` : suffix;
 
   return (
-    <Stack direction="column" pt="10" mb={{ base: '6', lg: showBackLink ? '12' : '16' }}>
+    <Stack direction="column" pt="10" spacing={10}>
       <Head>
         <title>{pageTitle}</title>
         {doc && <Metatags doc={doc} />}
@@ -37,20 +33,7 @@ export const AbsLayout: FC<IAbsLayoutProps> = ({ children, doc, titleDescription
         children
       ) : (
         <>
-          {showBackLink && (
-            <Flex>
-              <Button
-                as={SimpleLink}
-                variant="link"
-                size="sm"
-                leftIcon={<ArrowLeftIcon />}
-                alignSelf="flex-start"
-                href={getSearchHref()}
-              >
-                Return to results
-              </Button>
-            </Flex>
-          )}
+          <AbstractSearchForm />
           <Stack direction={{ base: 'column', lg: 'row' }} spacing={6}>
             <Stack direction="column">
               <Box display={{ base: 'none', lg: 'block' }} w="72">

src/components/Libraries/DocumentList/ItemAnnotation.tsx

@@ -73,6 +73,7 @@ export const ItemAnnotation = ({
       <VStack>
         <IconButton
           aria-label={open ? 'hide abstract' : 'show abstract'}
+          size="xs"
           onClick={() => (open ? onClose() : onOpen())}
           disabled={false}
           variant="unstyled"

src/components/ResultList/Item/AbstractPreview.tsx

@@ -47,6 +47,7 @@ export const AbstractPreview = ({ bibcode }: IAbstractPreviewProps): ReactElemen
         <Tooltip label={show ? 'Hide abstract' : 'Show abstract'}>
           <IconButton
             aria-label={show ? 'hide abstract' : 'show abstract'}
+            size="xs"
             onClick={() => setShow(!show)}
             disabled={false}
             variant="unstyled"

src/components/SearchBar/SearchBar.tsx

@@ -7,20 +7,22 @@ import { initialState, reducer } from '@/components/SearchBar/searchInputReducer
 import { QuickFields } from '@/components/SearchBar/QuickFields';
 import { SimpleLink } from '@/components/SimpleLink';
 import { useLandingFormPreference } from '@/lib/useLandingFormPreference';
+import { useBackToSearchResults } from '@/lib/useBackToSearchResults';
 
 interface SearchBarProps extends Omit<ISearchInputProps, 'dispatch' | 'state'> {
   query?: string;
   isLoading?: boolean;
   queryAddition?: string;
-  showStartNewSearchLink?: boolean;
+  showBackLinkAs?: 'new_search' | 'results' | 'none';
 }
 
 export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>((props, ref) => {
-  const { query, queryAddition, isLoading, showStartNewSearchLink = false, ...rest } = props;
+  const { query, queryAddition, isLoading, showBackLinkAs = 'none', ...rest } = props;
   const [state, dispatch] = useReducer(reducer, initialState);
   const inputRef = useRef<HTMLInputElement>(null);
   const refs = useMergeRefs(inputRef, ref);
   const { landingFormUrl } = useLandingFormPreference();
+  const { getSearchHref, show: showBackLink } = useBackToSearchResults();
 
   useEffect(() => {
     if (query !== undefined) {
@@ -36,7 +38,7 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>((props, re
 
   return (
     <VStack as="section" direction="column" spacing={2} align="stretch">
-      {showStartNewSearchLink ? (
+      {showBackLinkAs === 'new_search' ? (
         <Button
           as={SimpleLink}
           href={landingFormUrl}
@@ -48,6 +50,17 @@ export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>((props, re
         >
           Start new search
         </Button>
+      ) : showBackLinkAs === 'results' && showBackLink ? (
+        <Button
+          as={SimpleLink}
+          variant="link"
+          size="sm"
+          leftIcon={<ArrowLeftIcon />}
+          alignSelf="flex-start"
+          href={getSearchHref()}
+        >
+          Return to results
+        </Button>
       ) : null}
       <QuickFields isLoading={isLoading} dispatch={dispatch} />
       <SearchInput ref={refs} dispatch={dispatch} state={state} isLoading={isLoading} {...rest} />

src/pages/search/index.tsx

@@ -301,11 +301,11 @@ const SearchPage: NextPage = () => {
       <Head>
         <title>{`${params.q} - ${BRAND_NAME_FULL} Search`}</title>
       </Head>
-      <Stack direction="column" aria-labelledby="search-form-title" spacing="10">
+      <Stack direction="column" aria-labelledby="search-form-title" spacing={10}>
         <HideOnPrint pt={10}>
           <form method="get" action="/search" onSubmit={handleOnSubmit}>
             <Flex direction="column" width="full">
-              <SearchBar isLoading={loading} showStartNewSearchLink />
+              <SearchBar isLoading={loading} showBackLinkAs="new_search" />
               <NumFound count={data?.response.numFound} isLoading={loading} />
             </Flex>
             <FacetFilters mt="2" />