From e3a6d843b52581b6af91c89613f47dfb1395d6e9 Mon Sep 17 00:00:00 2001 From: Jennifer Chen Date: Thu, 18 Dec 2025 10:44:46 -0800 Subject: [PATCH 1/2] updated highlight toggle --- src/components/NavBar/useTour.ts | 2 +- src/components/ResultList/ListActions.tsx | 37 ++++++++--------------- 2 files changed, 13 insertions(+), 26 deletions(-) diff --git a/src/components/NavBar/useTour.ts b/src/components/NavBar/useTour.ts index 2ad5972d6..8c06fdd5e 100644 --- a/src/components/NavBar/useTour.ts +++ b/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', diff --git a/src/components/ResultList/ListActions.tsx b/src/components/ResultList/ListActions.tsx index 2496bfc6e..69961278a 100644 --- a/src/components/ResultList/ListActions.tsx +++ b/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['onChange']; @@ -187,7 +186,7 @@ export const ListActions = (props: IListActionsProps): ReactElement => { id="tour-email-notification" /> - + )} @@ -319,31 +318,19 @@ const SortWrapper = ({ onChange }: { onChange: ISortProps { - return ( - - - } /> - - - - - - ); -}; - const HighlightsToggle = () => { const showHighlights = useStore((state) => state.showHighlights); const toggleShowHighlights = useStore((state) => state.toggleShowHighlights); return ( - - } iconSpacing={4}> - - Highlights - - - + + } + aria-label={`${showHighlights ? 'Hide' : 'Show'} keyword highlights in the results.`} + variant={showHighlights ? 'solid' : 'outline'} + onClick={toggleShowHighlights} + /> ); }; From 01713ff1eb71fc59f72c963a1e1d53503121ebe1 Mon Sep 17 00:00:00 2001 From: Jennifer Chen Date: Wed, 17 Dec 2025 14:56:11 -0800 Subject: [PATCH 2/2] updated highlight display --- src/components/ResultList/Item/Item.tsx | 42 ++++++++++++------- .../ResultList/SimpleResultList.tsx | 2 +- src/components/ResultList/useHighlights.ts | 20 +-------- 3 files changed, 28 insertions(+), 36 deletions(-) diff --git a/src/components/ResultList/Item/Item.tsx b/src/components/ResultList/Item/Item.tsx index 213d62fcb..62cd00105 100644 --- a/src/components/ResultList/Item/Item.tsx +++ b/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( () => @@ -48,7 +49,7 @@ export interface IItemProps { useNormCite?: boolean; showHighlights?: boolean; isFetchingHighlights?: boolean; - highlights?: string[]; + highlights?: Record; extraInfo?: string; linkNewTab?: boolean; defaultCitation: string; @@ -209,21 +210,30 @@ const Highlights = ({ showIndicator && ) : ( - {highlights.length > 0 ? ( - highlights.map((hl) => ( - 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 }} - > + {keys(highlights).length > 0 ? ( + toPairs(highlights).map(([key, hls]) => ( + <> + + {key.toLocaleUpperCase()} + + {hls.map((hl) => ( + 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 }} + > + ))} + )) ) : ( No Highlights diff --git a/src/components/ResultList/SimpleResultList.tsx b/src/components/ResultList/SimpleResultList.tsx index 78a7d0557..78ea1e750 100644 --- a/src/components/ResultList/SimpleResultList.tsx +++ b/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)} diff --git a/src/components/ResultList/useHighlights.ts b/src/components/ResultList/useHighlights.ts index eff31d773..d9996d097 100644 --- a/src/components/ResultList/useHighlights.ts +++ b/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[]>(values, flatten, map(decode)); -const transformHighlights = pipe<[Record[]], 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 }; };