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 tightly couples the display names shown in the card titles to the
names shown in the tiles.

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,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<readonly FilterOption[]>([]);
   const [sortMethod, changeSortMethod] = useState("alphabetical");
   const [resourceGroups, setResourceGroups] = useState<Group[]>([]);
@@ -73,6 +72,12 @@ function ListResources({
     )
   }
 
+  const tiles = pathogens.map((p) => ({
+    name: p.name,
+    img: p.img,
+    filters: [p.id]
+  } as FilterTile));
+
   return (
     <ListResourcesContainer>
 
@@ -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<string, string>
-  tileData: FilterTile[]
+  pathogenInfo: Pathogen[]
   resourceListingCallback: () => Promise<ResourceListingInfo>;
 }
 
@@ -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<FilterTile[]>([]);
+const usePathogens = (pathogens: Pathogen[], groups?: Group[]) => {
+  const [restrictedTiles, setRestrictedTiles] = useState<Pathogen[]>([]);
   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<string>());
-    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;
 }
 

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,7 +21,7 @@ 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[]>();
@@ -31,6 +31,10 @@ export function useDataFetch(
     async function fetchAndParse(): Promise<void> {
       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}
 }

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}
+          pathogenInfo={corePathogens}
           quickLinks={coreQuickLinks} defaultGroupLinks
-          groupDisplayNames={coreGroupDisplayNames}
           resourceListingCallback={resourceListingCallback}/>
 
         <HugeSpacer/>