Merge pull request #1034: /pathogens: Add tiles for all pathogens

static-site/content/resource-listing.yaml

@@ -1,9 +1,9 @@
 # The following data is used to provide hardcoded data for the resource-listing
-# UI such as the "showcase" tiles, quicklinks etc. This data isn't automatically
-# derived and is only (currently) used for the static-site UI. For sources
-# beyond "core" (e.g. groups, community), if we want to customise the display it
-# makes more sense to store this information in the bucket or repo,
-# respectively, and then send it in the API response from the server. 
+# UI such as the tiles, quicklinks etc. This data isn't automatically derived
+# and is only (currently) used for the static-site UI. For sources beyond "core"
+# (e.g. groups, community), if we want to customise the display it makes more
+# sense to store this information in the bucket or repo, respectively, and then
+# send it in the API response from the server. 
 
 
 # Quick links are displayed in the header part of a pathogen group (e.g. "flu"
@@ -52,12 +52,11 @@ coreGroupDisplayNames:
   mpox: mpox
 
 
-# Showcase 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. The number of
-# showcase tiles which will be shown is decided by the UI and changes with
-# screen size.
-coreShowcase:
+# 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:
@@ -110,3 +109,23 @@ coreShowcase:
     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 { ShowcaseTile, FilterOption, Group, QuickLink, Resource, ResourceListingInfo, SortMethod } from './types';
+import { FilterTile, FilterOption, Group, QuickLink, Resource, ResourceListingInfo, SortMethod } from './types';
 import { HugeSpacer } from "../../layouts/generalComponents";
 
 interface ListResourcesProps extends ListResourcesResponsiveProps {
@@ -38,7 +38,7 @@ function ListResources({
   quickLinks,
   defaultGroupLinks=false,
   groupDisplayNames,
-  showcase,
+  tileData,
   resourceListingCallback: resourceListingCallback,
 }: ListResourcesProps) {
   const {groups, dataFetchError} = useDataFetch(
@@ -47,7 +47,7 @@ function ListResources({
     groupDisplayNames,
     resourceListingCallback,
   );
-  const showcaseTiles = useShowcaseTiles(showcase, groups);
+  const tiles = useTiles(tileData, groups);
   const [selectedFilterOptions, setSelectedFilterOptions] = useState<readonly FilterOption[]>([]);
   const [sortMethod, changeSortMethod] = useState<SortMethod>("alphabetical");
   const [resourceGroups, setResourceGroups] = useState<Group[]>([]);
@@ -76,14 +76,19 @@ function ListResources({
   return (
     <ListResourcesContainer>
 
-      { showcaseTiles.length > 0 && (
+      { tiles.length > 0 && (
         <>
         <Byline>
-          Showcase resources: click to filter the resources to a pathogen
+          All pathogens: click a pathogen to filter
         </Byline>
 
         <SetSelectedFilterOptions.Provider value={setSelectedFilterOptions}>
-          <ExpandableTiles tiles={showcaseTiles} tileWidth={tileWidthHeight} tileHeight={tileWidthHeight} TileComponent={Tile} />
+          <ExpandableTiles
+            tiles={tiles.sort((a, b) => a.name.localeCompare(b.name))}
+            tileWidth={tileWidthHeight}
+            tileHeight={tileWidthHeight}
+            TileComponent={Tile}
+          />
         </SetSelectedFilterOptions.Provider>
         </>
       )}
@@ -131,7 +136,7 @@ interface ListResourcesResponsiveProps {
 
   /** Mapping from group name -> display name */
   groupDisplayNames: Record<string, string>
-  showcase: ShowcaseTile[]
+  tileData: FilterTile[]
   resourceListingCallback: () => Promise<ResourceListingInfo>;
 }
 
@@ -258,9 +263,9 @@ const Byline = styled.div`
 `
 
 
-/*** SHOWCASE ***/
+/*** TILES ***/
 
-const Tile = ({ tile }: { tile: ShowcaseTile }) => {
+const Tile = ({ tile }: { tile: FilterTile }) => {
   const setSelectedFilterOptions = useContext(SetSelectedFilterOptions);
 
   if (!setSelectedFilterOptions) {
@@ -295,8 +300,8 @@ const Tile = ({ tile }: { tile: ShowcaseTile }) => {
  * which the filters are valid given the resources known to the resource listing
  * UI
  */
-const useShowcaseTiles = (tiles?: ShowcaseTile[], groups?: Group[]) => {
-  const [restrictedTiles, setRestrictedTiles] = useState<ShowcaseTile[]>([]);
+const useTiles = (tiles?: FilterTile[], groups?: Group[]) => {
+  const [restrictedTiles, setRestrictedTiles] = useState<FilterTile[]>([]);
   useEffect(() => {
     if (!tiles || !groups) return;
     const words = groups.reduce((words, group) => {

static-site/src/components/ListResources/types.ts

@@ -46,8 +46,8 @@ export interface UpdateCadence {
   description: string
 }
 
-// See coreShowcase in static-site/content/resource-listing.yaml
-export interface ShowcaseTile extends Tile {
+// See coreTiles in static-site/content/resource-listing.yaml
+export interface FilterTile extends Tile {
   filters: string[]
 }
 

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, coreShowcase} from "../../content/resource-listing.yaml";
+import {coreQuickLinks, coreGroupDisplayNames, coreTiles} from "../../content/resource-listing.yaml";
 
 const title = "Nextstrain-maintained pathogen analyses";
 const abstract = (
@@ -49,7 +49,7 @@ class Index extends React.Component {
         <HugeSpacer/>
 
         <ListResources resourceType="dataset"
-          showcase={coreShowcase}
+          tileData={coreTiles}
           quickLinks={coreQuickLinks} defaultGroupLinks
           groupDisplayNames={coreGroupDisplayNames}
           resourceListingCallback={resourceListingCallback}/>