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.
nextstrain · Oct 3, 2024 · 33aa9f9 · 33aa9f9
1 parent 7bda4ea
commit 33aa9f9
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 110 deletions.
diff --git 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
@@ -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;
 }
 

diff --git 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
@@ -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}
 }

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