diff --git a/static-site/content/resource-listing.yaml b/static-site/content/resource-listing.yaml index e31c85f95..961a0574f 100644 --- a/static-site/content/resource-listing.yaml +++ b/static-site/content/resource-listing.yaml @@ -5,6 +5,79 @@ # 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 + # 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,85 +116,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 diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx index d59bda466..646c54981 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 } from './types'; +import { FilterTile, FilterOption, Group, Pathogen, QuickLink, Resource, ResourceListingInfo } 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 = pathogens.map((p) => ({ + name: p.name, + img: p.img, + filters: [p.id] + } as FilterTile)); + 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; } @@ -293,14 +296,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) { @@ -309,10 +312,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 429edccc0..8ed062735 100644 --- a/static-site/src/components/ListResources/types.ts +++ b/static-site/src/components/ListResources/types.ts @@ -44,7 +44,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 {