Skip to content

Commit

Permalink
Add tooltipText prop to ResourceGroupHeader [#870]
Browse files Browse the repository at this point in the history
* If not provided, defaults to the former hard-coded tooltip value
* Includes changes to all `tooltipText` to be provided at to the
  `ListResources` component, as that's the level that knows what the
  tooltip for all the card should be

As noted in the `FIXME` comment: I'm not wild about the text I came up
with for the groups page and would welcome a better phrasing.
  • Loading branch information
genehack committed Jun 21, 2024
1 parent f137aea commit 875c352
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 5 deletions.
11 changes: 7 additions & 4 deletions static-site/src/components/ListResources/ResourceGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ interface ResourceGroupHeaderProps {
isCollapsed: boolean
resourcesToShowWhenCollapsed: number
quickLinks: QuickLink[]
tooltipText: string
}

const ResourceGroupHeader = ({group, isMobile, setCollapsed, collapsible, isCollapsed, resourcesToShowWhenCollapsed, quickLinks}: ResourceGroupHeaderProps) => {
const ResourceGroupHeader = ({group, isMobile, setCollapsed, collapsible, isCollapsed, resourcesToShowWhenCollapsed, quickLinks, tooltipText}: ResourceGroupHeaderProps) => {
if (!tooltipText) tooltipText="Click to load the default (and most recent) analysis";
const setModalResource = useContext(SetModalResourceContext);
if (!setModalResource) throw new Error("Context not provided!")

Expand All @@ -34,7 +36,7 @@ const ResourceGroupHeader = ({group, isMobile, setCollapsed, collapsible, isColl

<HeaderRow>
{group.groupUrl ? (
<TooltipWrapper description={`Click to load the default (and most recent) analysis for ${group.groupDisplayName || group.groupName}`}>
<TooltipWrapper description={`${tooltipText} for ${group.groupDisplayName || group.groupName}`}>
<GroupLink style={{ fontSize: '2rem', fontWeight: '500'}} href={group.groupUrl} target="_blank" rel="noreferrer">
{group.groupDisplayName || group.groupName}
</GroupLink>
Expand Down Expand Up @@ -118,12 +120,13 @@ interface ResourceGroupProps {
numGroups: number
sortMethod: string
quickLinks: QuickLink[]
tooltipText: string
}

/**
* Displays a single resource group (e.g. a single pathogen)
*/
export const ResourceGroup = ({group, elWidth, numGroups, sortMethod, quickLinks}: ResourceGroupProps) => {
export const ResourceGroup = ({group, elWidth, numGroups, sortMethod, quickLinks, tooltipText}: ResourceGroupProps) => {
const {collapseThreshold, resourcesToShowWhenCollapsed} = collapseThresolds(numGroups);
const collapsible = group.resources.length > collapseThreshold;
const [isCollapsed, setCollapsed] = useState(collapsible); // if it is collapsible, start collapsed
Expand All @@ -140,7 +143,7 @@ export const ResourceGroup = ({group, elWidth, numGroups, sortMethod, quickLinks
<ResourceGroupHeader group={group} quickLinks={quickLinks}
setCollapsed={setCollapsed} collapsible={collapsible}
isCollapsed={isCollapsed} resourcesToShowWhenCollapsed={resourcesToShowWhenCollapsed}
isMobile={isMobile}
isMobile={isMobile} tooltipText={tooltipText}
/>

<IndividualResourceContainer $maxResourceWidth={maxResourceWidth}>
Expand Down
3 changes: 3 additions & 0 deletions static-site/src/components/ListResources/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function ListResources({
groupDisplayNames,
showcase,
resourceListingCallback: resourceListingCallback,
tooltipText,
}: ListResourcesProps) {
const {groups, dataFetchError} = useDataFetch(
versioned,
Expand Down Expand Up @@ -105,6 +106,7 @@ function ListResources({
elWidth={elWidth}
numGroups={resourceGroups.length}
sortMethod={sortMethod}
tooltipText={tooltipText}
/>
))}
</div>
Expand Down Expand Up @@ -133,6 +135,7 @@ interface ListResourcesResponsiveProps {
groupDisplayNames: Record<string, string>
showcase: FilterCard[]
resourceListingCallback: () => Promise<ResourceListingInfo>;
tooltipText: string
}

/**
Expand Down
5 changes: 4 additions & 1 deletion static-site/src/pages/groups.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,10 @@ class GroupsPage extends React.Component {
resourceType="dataset"
defaultGroupLinks={true}
versioned={false}
resourceListingCallback={resourceListingCallback}/>
resourceListingCallback={resourceListingCallback}
// FIXME I do not love this text string; suggestions welcome
tooltipText="Click to load the group page"
/>

<HugeSpacer />

Expand Down

0 comments on commit 875c352

Please sign in to comment.