From 3050a4c197ea39986db4e2e32cc9dd1f0206371c Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Mon, 30 Sep 2024 17:10:46 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Replace=20usage=20of=20"showcase?= =?UTF-8?q?"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static-site/content/resource-listing.yaml | 20 ++++++++--------- .../src/components/ListResources/index.tsx | 22 +++++++++---------- .../src/components/ListResources/types.ts | 4 ++-- static-site/src/sections/pathogens.jsx | 4 ++-- 4 files changed, 24 insertions(+), 26 deletions(-) diff --git a/static-site/content/resource-listing.yaml b/static-site/content/resource-listing.yaml index 08969c8d6..7375b4c29 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,10 @@ 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. +coreTiles: - name: Avian influenza img: h5n1_map.png filters: diff --git a/static-site/src/components/ListResources/index.tsx b/static-site/src/components/ListResources/index.tsx index c100eaddd..33bb52ddb 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 } from './types'; +import { FilterTile, FilterOption, Group, QuickLink, Resource, ResourceListingInfo } 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,14 @@ 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 - + )} @@ -131,7 +131,7 @@ interface ListResourcesResponsiveProps { /** Mapping from group name -> display name */ groupDisplayNames: Record - showcase: ShowcaseTile[] + tileData: FilterTile[] resourceListingCallback: () => Promise; } @@ -255,9 +255,9 @@ const Byline = styled.div` ` -/*** SHOWCASE ***/ +/*** TILES ***/ -const Tile = ({ tile }: { tile: ShowcaseTile }) => { +const Tile = ({ tile }: { tile: FilterTile }) => { const setSelectedFilterOptions = useContext(SetSelectedFilterOptions); if (!setSelectedFilterOptions) { @@ -292,8 +292,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 2757b84db..429edccc0 100644 --- a/static-site/src/components/ListResources/types.ts +++ b/static-site/src/components/ListResources/types.ts @@ -44,8 +44,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 {