diff --git a/static-site/content/resource-listing.yaml b/static-site/content/resource-listing.yaml index 374fe0df7..3059f4ac8 100644 --- a/static-site/content/resource-listing.yaml +++ b/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 diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx index 0c148de3a..5d219b1c9 100644 --- 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 { 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([]); const [sortMethod, changeSortMethod] = useState("alphabetical"); const [resourceGroups, setResourceGroups] = useState([]); @@ -76,14 +76,19 @@ function ListResources({ return ( - { showcaseTiles.length > 0 && ( + { tiles.length > 0 && ( <> - Showcase resources: click to filter the resources to a pathogen + All pathogens: click a pathogen to filter - + a.name.localeCompare(b.name))} + tileWidth={tileWidthHeight} + tileHeight={tileWidthHeight} + TileComponent={Tile} + /> )} @@ -131,7 +136,7 @@ interface ListResourcesResponsiveProps { /** Mapping from group name -> display name */ groupDisplayNames: Record - showcase: ShowcaseTile[] + tileData: FilterTile[] resourceListingCallback: () => Promise; } @@ -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([]); +const useTiles = (tiles?: FilterTile[], groups?: Group[]) => { + const [restrictedTiles, setRestrictedTiles] = useState([]); useEffect(() => { if (!tiles || !groups) return; const words = groups.reduce((words, group) => { diff --git a/static-site/src/components/ListResources/types.ts b/static-site/src/components/ListResources/types.ts index 81269c0ce..aae85efd2 100644 --- a/static-site/src/components/ListResources/types.ts +++ b/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[] } diff --git a/static-site/src/sections/pathogens.jsx b/static-site/src/sections/pathogens.jsx index 3513c5b20..3d1f7fd97 100644 --- 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, 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 { diff --git a/static-site/static/pathogen_images/nextclade_sars_cov_2_tree.png b/static-site/static/pathogen_images/nextclade_sars_cov_2_tree.png new file mode 100644 index 000000000..4107677d4 Binary files /dev/null and b/static-site/static/pathogen_images/nextclade_sars_cov_2_tree.png differ diff --git a/static-site/static/pathogen_images/seasonal_cov_tree.png b/static-site/static/pathogen_images/seasonal_cov_tree.png new file mode 100644 index 000000000..6811d62d1 Binary files /dev/null and b/static-site/static/pathogen_images/seasonal_cov_tree.png differ diff --git a/static-site/static/pathogen_images/tb_tree.png b/static-site/static/pathogen_images/tb_tree.png new file mode 100644 index 000000000..f7be08e15 Binary files /dev/null and b/static-site/static/pathogen_images/tb_tree.png differ