Merge display name and tile lists

`coreGroupDisplayNames` and `coreTiles` had some overlap. This commit
merges the two lists into a single a list of pathogens. Separate lists
for display names and tiles are still used. The difference is that they
are derived from the merged list.

This removes some implementation details from the YAML file and should
make content updates more straightforward.

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

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,14 +37,18 @@ function ListResources({
   elWidth,
   quickLinks,
   defaultGroupLinks=false,
-  groupDisplayNames,
-  tileData,
+  pathogens,
   resourceListingCallback: resourceListingCallback,
 }: ListResourcesProps) {
+  const tileData = pathogens.map((p) => ({
+    name: p.name,
+    img: p.img,
+    filters: [p.id]
+  } as FilterTile));
   const {groups, dataFetchError} = useDataFetch(
     versioned,
     defaultGroupLinks,
-    groupDisplayNames,
+    pathogens,
     resourceListingCallback,
   );
   const tiles = useTiles(tileData, groups);
@@ -134,9 +138,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<string, string>
-  tileData: FilterTile[]
+  pathogens: Pathogen[]
   resourceListingCallback: () => Promise<ResourceListingInfo>;
 }
 

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[]
 }

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,12 +21,16 @@ import { Group, Resource, ResourceListingInfo } from './types';
 export function useDataFetch(
   versioned: boolean,
   defaultGroupLinks: boolean,
-  groupDisplayNames: Record<string, string>,
+  pathogens: Pathogen[],
   resourceListingCallback: () => Promise<ResourceListingInfo>,
 ) : {groups: Group[] | undefined, dataFetchError: boolean} {
   const [groups, setGroups] = useState<Group[]>();
   const [dataFetchError, setDataFetchError] = useState<boolean>(false);
 
+  const groupDisplayNames = Object.fromEntries(
+    pathogens.map(({ id, name }) => [id, name])
+  );
+
   useEffect((): void => {
     async function fetchAndParse(): Promise<void> {
       try {

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 {
         <HugeSpacer/>
 
         <ListResources resourceType="dataset"
-          tileData={coreTiles}
+          pathogens={corePathogens}
           quickLinks={coreQuickLinks} defaultGroupLinks
-          groupDisplayNames={coreGroupDisplayNames}
           resourceListingCallback={resourceListingCallback}/>
 
         <HugeSpacer/>