Merge display name and tile lists

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

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<readonly FilterOption[]>([]);
   const [sortMethod, changeSortMethod] = useState<SortMethod>("alphabetical");
   const [resourceGroups, setResourceGroups] = useState<Group[]>([]);
@@ -73,6 +72,12 @@ function ListResources({
     )
   }
 
+  const tiles: FilterTile[] = pathogens.map((p) => ({
+    name: p.name,
+    img: p.img,
+    filters: [p.id],
+  }));
+
   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>;
 }
 
@@ -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<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) {
@@ -312,10 +315,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

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

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/>