From 33aa9f9e0c34ab4a17ad2028528859ed6da35dfd Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Tue, 1 Oct 2024 16:52:26 -0700 Subject: [PATCH] Merge display name and tile lists This update simplifies the YAML file by removing redundant implementation details and should make content updates more straightforward. The `coreGroupDisplayNames` and `coreTiles` lists had overlapping information and are now combined into a single list of pathogens. Separate lists for display names and tiles are still used in the code, derived from the merged list. The key change is the tighter coupling between the display names shown in the card titles and the names shown in the tiles. --- static-site/content/resource-listing.yaml | 163 +++++++++--------- .../src/components/ListResources/index.tsx | 37 ++-- .../src/components/ListResources/types.ts | 8 +- .../components/ListResources/useDataFetch.ts | 10 +- static-site/src/sections/pathogens.jsx | 5 +- 5 files changed, 113 insertions(+), 110 deletions(-) diff --git a/static-site/content/resource-listing.yaml b/static-site/content/resource-listing.yaml index 3059f4ac8..ab6826922 100644 --- a/static-site/content/resource-listing.yaml +++ b/static-site/content/resource-listing.yaml @@ -5,6 +5,83 @@ # sense to store this information in the bucket or repo, respectively, and then # send it in the API response from the server. +# Order in this file is unused. Sorting methods are applied on the page. +# name: Display name +# id : string used in URL +# img : a file in static-site/static/pathogen_images +corePathogens: + - name: SARS-CoV-2 + id: ncov + img: ncov_freq.png + + - name: Seasonal influenza + id: seasonal-flu + img: seasonal_flu_freq.png + + - name: Avian influenza + id: avian-flu + img: h5n1_map.png + + - name: Mpox + id: mpox + img: mpox_tree.png + + - name: RSV + id: rsv + img: rsv_tree.png + + - name: Dengue + id: dengue + img: dengue_tree.png + + - name: Ebola in West Africa + id: ebola + img: ebola_map.png + + - name: Measles + id: measles + img: measles_tree.png + + - name: Zika + id: zika + img: zika_tree.png + + - name: Mumps + id: mumps + img: mumps_tree.png + + - name: Enterovirus + id: enterovirus + img: enterovirus_d68_tree.png + + - name: Rabies + id: rabies + img: rabies_tree.png + + - name: Oropouche + id: oropouche + img: oropouche_map.png + + - name: Lassa + id: lassa + img: lassa_map.png + + - name: Seasonal cov + id: seasonal-cov + img: seasonal_cov_tree.png + + - name: Tuberculosis + id: tb + img: tb_tree.png + + - name: West Nile Virus + id: WNV + img: wnv_map.png + + - name: SARS-CoV-2 (Nextclade) + id: nextclade + img: nextclade_sars_cov_2_tree.png + # Quick links are displayed in the header part of a pathogen group (e.g. "flu" # or "dengue"). They are displayed in order, as space allows. They act as a @@ -43,89 +120,3 @@ coreQuickLinks: display: 'global/6m (GISAID)' - name: 'ncov/open/global/6m' display: 'global/6m (open data)' - -coreGroupDisplayNames: - "avian-flu": avian-flu (influenza) - "seasonal-flu": seasonal-flu (influenza) - WNV: WNV (West Nile Virus) - ncov: ncov (SARS-CoV-2) - mpox: mpox - - -# Tiles must define a filter query which is a list of dataset name "words" -# (where words are joined by "/" to form the URL path) as well as a PNG image -# which is relative to static-site/static/pathogen_images. -# These will be displayed in alphabetical order by name. -coreTiles: - - name: SARS-CoV-2 - img: ncov_freq.png - filters: - - ncov - - name: Seasonal influenza - img: seasonal_flu_freq.png - filters: - - seasonal-flu - - name: Avian influenza - img: h5n1_map.png - filters: - - avian-flu - - name: Mpox - img: mpox_tree.png - filters: - - mpox - - name: RSV - img: rsv_tree.png - filters: - - rsv - - name: Dengue - img: dengue_tree.png - filters: - - dengue - - name: Ebola in West Africa - img: ebola_map.png - filters: - - ebola - - name: Measles - img: measles_tree.png - filters: - - measles - - name: Zika - img: zika_tree.png - filters: - - zika - - name: Mumps - img: mumps_tree.png - filters: - - mumps - - name: Enterovirus - img: enterovirus_d68_tree.png - filters: - - enterovirus - - name: Rabies - img: rabies_tree.png - filters: - - rabies - - name: Oropouche - img: oropouche_map.png - filters: - - oropouche - - name: Lassa - img: lassa_map.png - filters: - - lassa - - name: Seasonal cov - img: seasonal_cov_tree.png - filters: - - seasonal-cov - - name: Tuberculosis - img: tb_tree.png - filters: - - tb - - name: West Nile Virus - img: wnv_map.png - filters: - - WNV - - name: SARS-CoV-2 (Nextclade) - img: nextclade_sars_cov_2_tree.png - filters: - - nextclade diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx index 5d219b1c9..2eb949b35 100644 --- a/static-site/src/components/ListResources/index.tsx +++ b/static-site/src/components/ListResources/index.tsx @@ -12,7 +12,7 @@ import { ErrorContainer } from "../../pages/404"; import { TooltipWrapper } from "./IndividualResource"; import {ResourceModal, SetModalResourceContext} from "./Modal"; import { ExpandableTiles } from "../ExpandableTiles"; -import { FilterTile, FilterOption, Group, QuickLink, Resource, ResourceListingInfo, SortMethod } from './types'; +import { FilterTile, FilterOption, Group, Pathogen, QuickLink, Resource, ResourceListingInfo, SortMethod } from './types'; import { HugeSpacer } from "../../layouts/generalComponents"; interface ListResourcesProps extends ListResourcesResponsiveProps { @@ -37,17 +37,16 @@ function ListResources({ elWidth, quickLinks, defaultGroupLinks=false, - groupDisplayNames, - tileData, + pathogenInfo, resourceListingCallback: resourceListingCallback, }: ListResourcesProps) { const {groups, dataFetchError} = useDataFetch( versioned, defaultGroupLinks, - groupDisplayNames, + pathogenInfo, resourceListingCallback, ); - const tiles = useTiles(tileData, groups); + const pathogens = usePathogens(pathogenInfo, groups); const [selectedFilterOptions, setSelectedFilterOptions] = useState([]); const [sortMethod, changeSortMethod] = useState("alphabetical"); const [resourceGroups, setResourceGroups] = useState([]); @@ -73,6 +72,12 @@ function ListResources({ ) } + const tiles: FilterTile[] = pathogens.map((p) => ({ + name: p.name, + img: p.img, + filters: [p.id], + })); + return ( @@ -134,9 +139,7 @@ interface ListResourcesResponsiveProps { /** Should the group name itself be a url? (which we let the server redirect) */ defaultGroupLinks: boolean - /** Mapping from group name -> display name */ - groupDisplayNames: Record - tileData: FilterTile[] + pathogenInfo: Pathogen[] resourceListingCallback: () => Promise; } @@ -296,14 +299,14 @@ const Tile = ({ tile }: { tile: FilterTile }) => { /** - * Given a set of user-defined tiles, restrict them to the set of tiles for - * which the filters are valid given the resources known to the resource listing - * UI + * Given a set of user-defined pathogens, restrict them to the set of pathogens + * for which the filters are valid given the resources known to the resource + * listing UI */ -const useTiles = (tiles?: FilterTile[], groups?: Group[]) => { - const [restrictedTiles, setRestrictedTiles] = useState([]); +const usePathogens = (pathogens?: Pathogen[], groups?: Group[]) => { + const [restrictedTiles, setRestrictedTiles] = useState([]); useEffect(() => { - if (!tiles || !groups) return; + if (!pathogens || !groups) return; const words = groups.reduce((words, group) => { for (const resource of group.resources) { for (const word of resource.nameParts) { @@ -312,10 +315,10 @@ const useTiles = (tiles?: FilterTile[], groups?: Group[]) => { } return words; }, new Set()); - setRestrictedTiles(tiles.filter((tile) => { - return tile.filters.every((word) => words.has(word)) + setRestrictedTiles(pathogens.filter((pathogen) => { + return words.has(pathogen.id) })); - }, [tiles, groups]); + }, [pathogens, groups]); return restrictedTiles; } diff --git a/static-site/src/components/ListResources/types.ts b/static-site/src/components/ListResources/types.ts index aae85efd2..5ff360410 100644 --- a/static-site/src/components/ListResources/types.ts +++ b/static-site/src/components/ListResources/types.ts @@ -46,7 +46,13 @@ export interface UpdateCadence { description: string } -// See coreTiles in static-site/content/resource-listing.yaml +// See corePathogens in static-site/content/resource-listing.yaml +export interface Pathogen { + name: string + id: string + img: string +} + export interface FilterTile extends Tile { filters: string[] } diff --git a/static-site/src/components/ListResources/useDataFetch.ts b/static-site/src/components/ListResources/useDataFetch.ts index d8c0e7bb2..2f0a8eb38 100644 --- a/static-site/src/components/ListResources/useDataFetch.ts +++ b/static-site/src/components/ListResources/useDataFetch.ts @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { Group, Resource, ResourceListingInfo } from './types'; +import { Group, Pathogen, Resource, ResourceListingInfo } from './types'; /** @@ -21,7 +21,7 @@ import { Group, Resource, ResourceListingInfo } from './types'; export function useDataFetch( versioned: boolean, defaultGroupLinks: boolean, - groupDisplayNames: Record, + pathogens: Pathogen[], resourceListingCallback: () => Promise, ) : {groups: Group[] | undefined, dataFetchError: boolean} { const [groups, setGroups] = useState(); @@ -31,6 +31,10 @@ export function useDataFetch( async function fetchAndParse(): Promise { try { const { pathPrefix, pathVersions } = await resourceListingCallback(); + + const groupDisplayNames = Object.fromEntries( + pathogens.map(({ id, name }) => [id, name]) + ); /* group/partition the resources by pathogen (the first word of the resource path). This grouping is constant for all UI @@ -45,7 +49,7 @@ export function useDataFetch( } fetchAndParse(); - }, [versioned, defaultGroupLinks, groupDisplayNames, resourceListingCallback]); + }, [versioned, defaultGroupLinks, pathogens, resourceListingCallback]); return {groups, dataFetchError} } diff --git a/static-site/src/sections/pathogens.jsx b/static-site/src/sections/pathogens.jsx index 3d1f7fd97..a1f15d828 100644 --- a/static-site/src/sections/pathogens.jsx +++ b/static-site/src/sections/pathogens.jsx @@ -7,7 +7,7 @@ import { import ListResources from "../components/ListResources/index"; import * as splashStyles from "../components/splash/styles"; import GenericPage from "../layouts/generic-page"; -import {coreQuickLinks, coreGroupDisplayNames, coreTiles} from "../../content/resource-listing.yaml"; +import {coreQuickLinks, corePathogens} from "../../content/resource-listing.yaml"; const title = "Nextstrain-maintained pathogen analyses"; const abstract = ( @@ -49,9 +49,8 @@ class Index extends React.Component {