Scix 687 highlight update

src/components/NavBar/useTour.ts

@@ -355,7 +355,7 @@ export const getResultsSteps = () => {
       title: 'View highlights',
       text: 'Turn on highlights to see the context of your search terms. Note that the length of returned highlights is limited by publishers.',
       attachTo: {
-        element: '#menu-button-tour-view-highlights',
+        element: '#tour-view-highlights',
         on: 'bottom',
       },
       classes: 'example-step-extra-class',

src/components/ResultList/Item/Item.tsx

@@ -29,6 +29,7 @@ import { useColorModeColors } from '@/lib/useColorModeColors';
 
 import { getFormattedNumericPubdate, unwrapStringValue } from '@/utils/common/formatters';
 import { IDocsEntity } from '@/api/search/types';
+import { keys, toPairs } from 'ramda';
 
 const AbstractPreview = dynamic<IAbstractPreviewProps>(
   () =>
@@ -48,7 +49,7 @@ export interface IItemProps {
   useNormCite?: boolean;
   showHighlights?: boolean;
   isFetchingHighlights?: boolean;
-  highlights?: string[];
+  highlights?: Record<string, string[]>;
   extraInfo?: string;
   linkNewTab?: boolean;
   defaultCitation: string;
@@ -209,21 +210,30 @@ const Highlights = ({
         showIndicator && <CircularProgress mt={5} isIndeterminate size="20px" />
       ) : (
         <Fade in={!!highlights}>
-          {highlights.length > 0 ? (
-            highlights.map((hl) => (
-              <Text
-                sx={{
-                  // Apply a style to the <em> tag, which is included in the highlight string
-                  '& em': {
-                    backgroundColor: 'blue.100',
-                    color: 'gray.800',
-                    padding: 'var(--chakra-space-1)',
-                    fontWeight: 'bold',
-                  },
-                }}
-                key={hl}
-                dangerouslySetInnerHTML={{ __html: hl }}
-              ></Text>
+          {keys(highlights).length > 0 ? (
+            toPairs(highlights).map(([key, hls]) => (
+              <>
+                <Text fontSize="sm" fontWeight="semibold">
+                  {key.toLocaleUpperCase()}
+                </Text>
+                {hls.map((hl) => (
+                  <Text
+                    ml={2}
+                    my={1}
+                    sx={{
+                      // Apply a style to the <em> tag, which is included in the highlight string
+                      '& em': {
+                        backgroundColor: 'blue.100',
+                        color: 'gray.800',
+                        padding: 'var(--chakra-space-1)',
+                        fontWeight: 'bold',
+                      },
+                    }}
+                    key={hl}
+                    dangerouslySetInnerHTML={{ __html: hl }}
+                  ></Text>
+                ))}
+              </>
             ))
           ) : (
             <Text>No Highlights</Text>

src/components/ResultList/ListActions.tsx

@@ -1,10 +1,9 @@
-import { BellIcon, ChevronDownIcon, SettingsIcon } from '@chakra-ui/icons';
+import { BellIcon, ChevronDownIcon } from '@chakra-ui/icons';
 import {
   Box,
   Button,
   Checkbox,
   Flex,
-  Icon,
   IconButton,
   Menu,
   MenuButton,
@@ -17,7 +16,6 @@ import {
   MenuOptionGroup,
   Portal,
   Stack,
-  Switch,
   Text,
   Tooltip,
   useDisclosure,
@@ -48,8 +46,9 @@ import { SolrSort, SolrSortField } from '@/api/models';
 import { useVaultBigQuerySearch } from '@/api/vault/vault';
 import { Bibcode } from '@/api/search/types';
 import { ExportApiFormatKey } from '@/api/export/types';
-import { DocumentTextIcon } from '@heroicons/react/24/outline';
 import { useExportFormats } from '@/lib/useExportFormats';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faHighlighter } from '@fortawesome/free-solid-svg-icons';
 
 export interface IListActionsProps {
   onSortChange?: ISortProps<SolrSort, SolrSortField>['onChange'];
@@ -187,7 +186,7 @@ export const ListActions = (props: IListActionsProps): ReactElement => {
                   id="tour-email-notification"
                 />
               </Tooltip>
-              <SettingsMenu />
+              <HighlightsToggle />
             </Flex>
           )}
         </Flex>
@@ -319,31 +318,19 @@ const SortWrapper = ({ onChange }: { onChange: ISortProps<SolrSort, SolrSortFiel
   );
 };
 
-const SettingsMenu = () => {
-  return (
-    <Menu isLazy autoSelect={false} id="tour-view-highlights">
-      <Tooltip label="Turn on/off highlights">
-        <MenuButton as={IconButton} aria-label="Result list settings" variant="outline" icon={<SettingsIcon />} />
-      </Tooltip>
-      <MenuList>
-        <HighlightsToggle />
-      </MenuList>
-    </Menu>
-  );
-};
-
 const HighlightsToggle = () => {
   const showHighlights = useStore((state) => state.showHighlights);
   const toggleShowHighlights = useStore((state) => state.toggleShowHighlights);
 
   return (
-    <Tooltip label="Show or hide keyword highlights in the results.">
-      <MenuItem onClick={toggleShowHighlights} icon={<Icon as={DocumentTextIcon} fontSize={20} />} iconSpacing={4}>
-        <Flex justifyContent="space-between">
-          Highlights
-          <Switch isChecked={showHighlights} id="show-highlights" onClick={toggleShowHighlights} />
-        </Flex>
-      </MenuItem>
+    <Tooltip label={`${showHighlights ? 'Hide' : 'Show'} keyword highlights in the results.`}>
+      <IconButton
+        id="tour-view-highlights"
+        icon={<FontAwesomeIcon icon={faHighlighter} />}
+        aria-label={`${showHighlights ? 'Hide' : 'Show'} keyword highlights in the results.`}
+        variant={showHighlights ? 'solid' : 'outline'}
+        onClick={toggleShowHighlights}
+      />
     </Tooltip>
   );
 };

src/components/ResultList/SimpleResultList.tsx

@@ -90,7 +90,7 @@ export const SimpleResultList = (props: ISimpleResultListProps): ReactElement =>
           hideCheckbox={!isClient ? true : hideCheckboxes}
           hideActions={hideActions}
           showHighlights={allowHighlight && showHighlights}
-          highlights={highlights?.[index] ?? []}
+          highlights={highlights?.[index] ?? {}}
           isFetchingHighlights={allowHighlight && isFetchingHighlights}
           useNormCite={useNormCite}
           defaultCitation={defaultCitations?.get(doc.bibcode)}

src/components/ResultList/useHighlights.ts

@@ -1,24 +1,6 @@
 import { AppState, useStore } from '@/store';
-import { decode } from 'he';
-import { flatten, map, pipe, reduce, values } from 'ramda';
 import { useGetHighlights } from '@/api/search/search';
 
-/**
- * Transform incoming highlights data into 2d array
- *
- * This also performs decoding of HTML entities on the strings
- *
- * {
- *  1111: { abstract: [ "foo" ] },
- *  2222: { abstract: [ "bar" ], title: [ "baz ©" ] }
- * }
- * ---> [["foo"], ["bar", "baz ©"]]
- */
-const decoder = pipe<[Record<string, string[]>], string[][], string[], string[]>(values, flatten, map(decode));
-const transformHighlights = pipe<[Record<string, string[]>[]], string[][]>(
-  reduce((acc, value) => [...acc, [...decoder(value)]], [] as string[][]),
-);
-
 const selectors = {
   latestQuery: (state: AppState) => state.latestQuery,
   showHighlights: (state: AppState) => state.showHighlights,
@@ -43,5 +25,5 @@ export const useHighlights = () => {
   // Do this first to maintain results ordering
   const highlights = data?.docs.map(({ id }) => data.highlighting[id]) ?? [];
 
-  return { showHighlights, highlights: transformHighlights(highlights), isFetchingHighlights: isFetching };
+  return { showHighlights, highlights, isFetchingHighlights: isFetching };
 };