Merge pull request #901: Use showcase on splash

Author: victorlin

static-site/README.md

@@ -81,7 +81,7 @@ We may wish to rename this directory to avoid any doubt.
     * "Edit" -> "Scale Image" to 250 x 250px
     * "File" -> "Save Image" & use PNG
 3. Save the file in `./static/splash_images`
-4. Edit `./src/components/Cards/coreCards.js`, `./content/community-datasets.yaml` or `./src/components/Cards/narrativeCards.js` to include the card & title.
+4. Edit `./src/components/splash/showcase.yaml` to include the card & title.
 5. Edit `./src/components/Footer/index.jsx` to provide credit for the photo.
 
 ### Adding new team members

static-site/content/community-datasets.yaml

@@ -23,11 +23,6 @@ data:
     maintainers: E. Kinganda Lusamaki, INRB & C. Pratt
     date: 13 Oct 2021
     title: Genomic epidemiology of the 2018-21 Ebola epidemic
-    card:
-      img: "ebola2.png"
-      url: "/community/inrb-drc/ebola-nord-kivu"
-      title: "DRC Ebola (2018-19)"
-      frontpage: true
   - url: https://nextstrain.org/community/narratives/ESR-NZ/GenomicsNarrativeSARSCoV2/aotearoa-border-incursions
     title: Real-time genomics to track COVID-19 post-elimination border incursions in Aotearoa New Zealand
     maintainers: Jordan Douglas, PhD, Jemma L. Geoghegan, PhD, James Hadfield, PhD, Remco Bouckaert, PhD, Matthew Storey, MSc, Xiaoyun Ren, PhD, Joep de Ligt, PhD, Nigel French, PhD, David Welch, PhD
@@ -43,11 +38,6 @@ data:
     maintainers: Katherine Eaton et al
     date: '2022-06-13'
     title: Yersinia Pestis (multiple datasets)
-    card:
-      img: "yersinia.png"
-      url: "/community/ktmeaton/yersinia-pestis/maximum-likelihood/all?m=div"
-      title: "Yersinia pestis"
-      frontpage: true
   - url: https://nextstrain.org/community/pestdisplace/CMDAFRICA
     maintainers: PestDisPlace
     date: 07 Sep 2019

static-site/src/components/Cards/coreCards.js

@@ -1,24 +1,26 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';
 import styled from 'styled-components';
 import Select, { MultiValue } from 'react-select';
-import ScrollableAnchor from '../../../vendored/react-scrollable-anchor/index';
+import ScrollableAnchor, { goToAnchor } from '../../../vendored/react-scrollable-anchor/index';
 import {Tooltip} from 'react-tooltip-v5';
-import { useFilterOptions } from './useFilterOptions';
+import { createFilterOption, useFilterOptions } from './useFilterOptions';
 import { useSortAndFilter } from "./useSortAndFilter";
 import { useDataFetch } from "./useDataFetch";
 import {Spinner} from '../Spinner/Spinner';
 import { ResourceGroup } from './ResourceGroup';
 import { ErrorContainer } from "../../pages/404";
 import { TooltipWrapper } from "./IndividualResource";
 import {ResourceModal, SetModalResourceContext} from "./Modal";
-import { Showcase, useShowcaseCards} from "./Showcase";
-import { Card, FilterOption, Group, GroupDisplayNames, QuickLink, Resource } from './types';
+import { CardImgWrapper, CardInner, CardOuter, CardTitle, Showcase } from "../Showcase";
+import { FilterCard, FilterOption, Group, GroupDisplayNames, QuickLink, Resource } from './types';
 
 interface ListResourcesProps extends ListResourcesResponsiveProps {
   elWidth: number
 }
 
-export const LIST_ANCHOR = "list";
+const LIST_ANCHOR = "list";
+
+const SetSelectedFilterOptions = createContext<React.Dispatch<React.SetStateAction<readonly FilterOption[]>> | null>(null);
 
 /**
  * A React component to fetch data and display the available resources,
@@ -67,7 +69,13 @@ function ListResources({
   return (
     <ListResourcesContainer>
 
-      <Showcase cards={showcaseCards} setSelectedFilterOptions={setSelectedFilterOptions}/>
+      <Byline>
+        Showcase resources: click to filter the resources to a pathogen
+      </Byline>
+
+      <SetSelectedFilterOptions.Provider value={setSelectedFilterOptions}>
+        <Showcase cards={showcaseCards} CardComponent={FilterShowcaseTile} />
+      </SetSelectedFilterOptions.Provider>
 
       <Filter options={availableFilterOptions} selectedFilterOptions={selectedFilterOptions} setSelectedFilterOptions={setSelectedFilterOptions}/>
 
@@ -107,7 +115,7 @@ interface ListResourcesResponsiveProps {
   /** Should the group name itself be a url? (which we let the server redirect) */
   defaultGroupLinks: boolean
   groupDisplayNames: GroupDisplayNames
-  showcase: Card[]
+  showcase: FilterCard[]
 }
 
 /**
@@ -222,4 +230,72 @@ const SortContainer = styled.div`
     margin-left: 20px;
     margin-right: 5px;
   }
-`
+`
+
+const Byline = styled.div`
+  font-size: 1.6rem;
+  border-top: 1px rgb(230, 230, 230) solid;
+`
+
+
+/*** SHOWCASE ***/
+
+
+interface FilterShowcaseTileProps {
+  card: FilterCard
+}
+
+
+const FilterShowcaseTile = ({ card }: FilterShowcaseTileProps) => {
+  const setSelectedFilterOptions = useContext(SetSelectedFilterOptions);
+
+  if (!setSelectedFilterOptions) {
+    throw new Error("Usage of this component requires the SetSelectedFilterOptions context to be set.")
+  }
+
+  const filter = useCallback(
+    () => {
+      setSelectedFilterOptions(card.filters.map(createFilterOption));
+      goToAnchor(LIST_ANCHOR);
+    },
+    [setSelectedFilterOptions, card]
+  )
+
+  return (
+    <CardOuter>
+      <CardInner>
+        <div onClick={filter}>
+          <CardTitle $squashed>
+            {card.name}
+          </CardTitle>
+          <CardImgWrapper filename={card.img}/>
+        </div>
+      </CardInner>
+    </CardOuter>
+  )
+}
+
+
+/**
+ * Given a set of user-defined cards, restrict them to the set of cards for
+ * which the filters are valid given the resources known to the resource listing
+ * UI
+ */
+const useShowcaseCards = (cards?: FilterCard[], groups?: Group[]) => {
+  const [restrictedCards, setRestrictedCards] = useState<FilterCard[]>([]);
+  useEffect(() => {
+    if (!cards || !groups) return;
+    const words = groups.reduce((words, group) => {
+      for (const resource of group.resources) {
+        for (const word of resource.nameParts) {
+          words.add(word);
+        }
+      }
+      return words;
+    }, new Set<string>());
+    setRestrictedCards(cards.filter((card) => {
+      return card.filters.every((word) => words.has(word))
+    }));
+  }, [cards, groups]);
+  return restrictedCards;
+}

static-site/src/components/Cards/nCoVCards.js

@@ -1,3 +1,5 @@
+import { Card } from "../Showcase/types"
+
 export interface FilterOption {
   value: string
   label: string
@@ -45,9 +47,7 @@ export interface UpdateCadence {
 }
 
 // See coreShowcase in static-site/content/resource-listing.yaml
-export interface Card {
-  name: string
-  img: string
+export interface FilterCard extends Card {
   filters: string[]
 }