Rename variables to reflect types

- replace generic 'data|state' with 'card|resource|group' - replace generic 'error' with 'data fetch error' - replace 'modal' with 'modal resource'
nextstrain · Jun 4, 2024 · 68136b2 · 68136b2
1 parent 9aec897
commit 68136b2
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 84 deletions.
diff --git a/static-site/src/components/ListResources/IndividualResource.tsx b/static-site/src/components/ListResources/IndividualResource.tsx
@@ -2,7 +2,7 @@
 import React, {useState, useRef, useEffect, useContext} from 'react';
 import styled from 'styled-components';
 import { MdHistory } from "react-icons/md";
-import { SetModalContext } from './Modal';
+import { SetModalResourceContext } from './Modal';
 import { ResourceDisplayName, Resource } from './types';
 import { IconType } from 'react-icons';
 
@@ -107,12 +107,12 @@ export function IconContainer({Icon, text, handleClick, color, hoverColor}: Icon
 
 
 interface IndividualResourceProps {
-  data: Resource
+  resource: Resource
   isMobile: boolean
 }
 
-export const IndividualResource = ({data, isMobile}: IndividualResourceProps) => {
-  const setModal = useContext(SetModalContext);
+export const IndividualResource = ({resource, isMobile}: IndividualResourceProps) => {
+  const setModalResource = useContext(SetModalResourceContext);
   const ref = useRef<HTMLDivElement>(null);
   const [topOfColumn, setTopOfColumn] = useState(false);
   useEffect(() => {
@@ -128,20 +128,20 @@ export const IndividualResource = ({data, isMobile}: IndividualResourceProps) =>
 
       <FlexRow>
 
-        <TooltipWrapper description={`Last known update on ${data.lastUpdated}`}>
-          <ResourceLinkWrapper onShiftClick={() => setModal(data)}>
-            <Name displayName={data.displayName} href={data.url} topOfColumn={topOfColumn}/>
+        <TooltipWrapper description={`Last known update on ${resource.lastUpdated}`}>
+          <ResourceLinkWrapper onShiftClick={() => setModalResource(resource)}>
+            <Name displayName={resource.displayName} href={resource.url} topOfColumn={topOfColumn}/>
           </ResourceLinkWrapper>
         </TooltipWrapper>
 
-        {data.versioned && !isMobile && (
-          <TooltipWrapper description={data.updateCadence.description +
-            `<br/>Last known update on ${data.lastUpdated}` +
-            `<br/>${data.nVersions} snapshots of this dataset available (click to see them)`}>
+        {resource.versioned && !isMobile && (
+          <TooltipWrapper description={resource.updateCadence.description +
+            `<br/>Last known update on ${resource.lastUpdated}` +
+            `<br/>${resource.nVersions} snapshots of this dataset available (click to see them)`}>
             <IconContainer
               Icon={MdHistory}
-              text={`${data.updateCadence.summary} (n=${data.nVersions})`}
-              handleClick={() => setModal(data)}
+              text={`${resource.updateCadence.summary} (n=${resource.nVersions})`}
+              handleClick={() => setModalResource(resource)}
             />
           </TooltipWrapper>
         )}

diff --git a/static-site/src/components/ListResources/Modal.tsx b/static-site/src/components/ListResources/Modal.tsx
@@ -6,18 +6,18 @@ import { MdClose } from "react-icons/md";
 import { dodge } from "./dodge";
 import { Resource } from './types';
 
-export const SetModalContext = createContext<React.Dispatch<React.SetStateAction<Resource | undefined>> | null>(null);
+export const SetModalResourceContext = createContext<React.Dispatch<React.SetStateAction<Resource | undefined>> | null>(null);
 
 export const RAINBOW20 =   ["#511EA8", "#4432BD", "#3F4BCA", "#4065CF", "#447ECC", "#4C91BF", "#56A0AE", "#63AC9A", "#71B486", "#81BA72", "#94BD62", "#A7BE54", "#BABC4A", "#CBB742", "#D9AE3E", "#E29E39", "#E68935", "#E56E30", "#E14F2A", "#DC2F24"];
 const lightGrey = 'rgba(0,0,0,0.1)';
 
 
 interface ResourceModalProps {
-  data?: Resource
+  resource?: Resource
   dismissModal: () => void
 }
 
-export const ResourceModal = ({data, dismissModal}: ResourceModalProps) => {  
+export const ResourceModal = ({resource, dismissModal}: ResourceModalProps) => {  
   const [ref, setRef] = useState(null); 
   const handleRef = useCallback((node) => {setRef(node)}, [])
 
@@ -37,32 +37,32 @@ export const ResourceModal = ({data, dismissModal}: ResourceModalProps) => {
   }, []);
 
   useEffect(() => {
-    if (!ref || !data) return;
-    _draw(ref, data)
-  }, [ref, data])
+    if (!ref || !resource) return;
+    _draw(ref, resource)
+  }, [ref, resource])
 
-  if (!data) return null;
+  if (!resource) return null;
 
-  const summary = _snapshotSummary(data.dates);
+  const summary = _snapshotSummary(resource.dates);
   return (
     <div ref={scrollRef}>
 
       <Background onClick={dismissModal}/>
       <ModalContainer onClick={(e) => {e.stopPropagation()}}>
         <CloseIcon onClick={dismissModal}/>
-        <Title>{data.name.replace(/\//g, "│")}</Title>
+        <Title>{resource.name.replace(/\//g, "│")}</Title>
 
         <div style={{paddingBottom: '5px'}}>
           <Bold>
-            {`${data.dates.length} snapshots spanning ${summary.duration}: ${summary.first} - ${summary.last}`}
+            {`${resource.dates.length} snapshots spanning ${summary.duration}: ${summary.first} - ${summary.last}`}
           </Bold>
           <a style={{fontSize: '1.8rem', paddingLeft: '10px'}}
-            href={`/${data.name}`}  target="_blank" rel="noreferrer noopener">
+            href={`/${resource.name}`}  target="_blank" rel="noreferrer noopener">
             (click to view the latest available snapshot)
           </a>
         </div>
         <div>
-          {data.updateCadence.description}
+          {resource.updateCadence.description}
         </div>
 
         <div ref={handleRef} /> {/* d3 controlled div */}
@@ -142,11 +142,11 @@ function _snapshotSummary(dates: string[]) {
   return {duration, first: d[0], last:d.at(-1)};
 }
 
-function _draw(ref, data: Resource) {
+function _draw(ref, resource: Resource) {
   /* Note that _page_ resizes by themselves will not result in this function
   rerunning, which isn't great, but for a modal I think it's perfectly
   acceptable */  
-  const sortedDateStrings = [...data.dates].sort();
+  const sortedDateStrings = [...resource.dates].sort();
   const flatData = sortedDateStrings.map((version) => ({version, 'date': new Date(version)}));
 
   const width = ref.clientWidth;
@@ -270,7 +270,7 @@ function _draw(ref, data: Resource) {
           .style("opacity", 0)
       })
       .on("click", function(e, d) {
-        window.open(`/${data.name}@${d.data.version}`,'_blank'); // TEST!
+        window.open(`/${resource.name}@${d.data.version}`,'_blank'); // TEST!
       })
 
   /**
@@ -317,7 +317,7 @@ function _draw(ref, data: Resource) {
       })
       .on("click", function(e) {
         const { datum } = getVersion(e);
-        window.open(`/${data.name}@${datum.data.version}`,'_blank');
+        window.open(`/${resource.name}@${datum.data.version}`,'_blank');
       })
 
   function selectSnapshot(selection, selectedDatum) {

diff --git a/static-site/src/components/ListResources/ResourceGroup.tsx b/static-site/src/components/ListResources/ResourceGroup.tsx
@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import { MdHistory, MdFormatListBulleted, MdChevronRight } from "react-icons/md";
 import { IndividualResource, getMaxResourceWidth, TooltipWrapper, IconContainer,
   ResourceLinkWrapper, ResourceLink, LINK_COLOR, LINK_HOVER_COLOR } from "./IndividualResource"
-import { SetModalContext } from "./Modal";
+import { SetModalResourceContext } from "./Modal";
 import { Group, QuickLink, Resource } from './types';
 
 interface ResourceGroupHeaderProps {
-  data: Group
+  group: Group
   isMobile: boolean
   setCollapsed: React.Dispatch<React.SetStateAction<boolean>>
   collapsible: boolean
@@ -17,11 +17,11 @@ interface ResourceGroupHeaderProps {
   quickLinks: QuickLink[]
 }
 
-const ResourceGroupHeader = ({data, isMobile, setCollapsed, collapsible, isCollapsed, resourcesToShowWhenCollapsed, quickLinks}: ResourceGroupHeaderProps) => {
-  const setModal = useContext(SetModalContext);
+const ResourceGroupHeader = ({group, isMobile, setCollapsed, collapsible, isCollapsed, resourcesToShowWhenCollapsed, quickLinks}: ResourceGroupHeaderProps) => {
+  const setModalResource = useContext(SetModalResourceContext);
   /* Filter the known quick links to those which appear in resources of this group */
-  const resourcesByName = Object.fromEntries(data.resources.map((r) => [r.name, r]));
-  const quickLinksToDisplay = (quickLinks || []).filter((ql) => !!resourcesByName[ql.name] || ql.groupName===data.groupName)
+  const resourcesByName = Object.fromEntries(group.resources.map((r) => [r.name, r]));
+  const quickLinksToDisplay = (quickLinks || []).filter((ql) => !!resourcesByName[ql.name] || ql.groupName===group.groupName)
 
   return (
     <HeaderContainer>
@@ -31,38 +31,38 @@ const ResourceGroupHeader = ({data, isMobile, setCollapsed, collapsible, isColla
       <FlexColumnContainer>
 
         <HeaderRow>
-          {data.groupUrl ? (
-            <TooltipWrapper description={`Click to load the default (and most recent) analysis for ${data.groupDisplayName || data.groupName}`}>
-              <GroupLink style={{ fontSize: '2rem', fontWeight: '500'}} href={data.groupUrl} target="_blank" rel="noreferrer">
-                {data.groupDisplayName || data.groupName}
+          {group.groupUrl ? (
+            <TooltipWrapper description={`Click to load the default (and most recent) analysis for ${group.groupDisplayName || group.groupName}`}>
+              <GroupLink style={{ fontSize: '2rem', fontWeight: '500'}} href={group.groupUrl} target="_blank" rel="noreferrer">
+                {group.groupDisplayName || group.groupName}
               </GroupLink>
             </TooltipWrapper>
           ) : (
             <span style={{ fontSize: '2rem', fontWeight: '500'}}>
-              {data.groupDisplayName || data.groupName}
+              {group.groupDisplayName || group.groupName}
             </span>
           )}
           {/* Currently we hide the byline on mobile, but we could render it as a separate row */}
           {!isMobile && (
-            <TooltipWrapper description={`The most recently updated datasets in this group were last updated on ${data.lastUpdated}` +
+            <TooltipWrapper description={`The most recently updated datasets in this group were last updated on ${group.lastUpdated}` +
                 '<br/>(however there may have been a more recent update since we indexed the data)'}>
               <span>
-                {`Most recent snapshot: ${data.lastUpdated}`}
+                {`Most recent snapshot: ${group.lastUpdated}`}
               </span>
             </TooltipWrapper>
           )}
           <span style={{flexGrow: 100}}/>
-          <TooltipWrapper description={`There are ${data.nResources} datasets in this group`}>
+          <TooltipWrapper description={`There are ${group.nResources} datasets in this group`}>
             <IconContainer
               Icon={MdFormatListBulleted} color={"rgb(79, 75, 80)"}
-              text={`${data.nResources}`}
+              text={`${group.nResources}`}
             />
           </TooltipWrapper>
-          {data.nVersions && !isMobile && (
-            <TooltipWrapper description={`${data.nVersions} snapshots exist across the ${data.nResources} datasets in this group`}>
+          {group.nVersions && !isMobile && (
+            <TooltipWrapper description={`${group.nVersions} snapshots exist across the ${group.nResources} datasets in this group`}>
               <IconContainer
                 Icon={MdHistory}  color={"rgb(79, 75, 80)"}
-                text={`${data.nVersions}`}
+                text={`${group.nVersions}`}
               />
             </TooltipWrapper>
           )}
@@ -77,7 +77,7 @@ const ResourceGroupHeader = ({data, isMobile, setCollapsed, collapsible, isColla
             )}
             {quickLinksToDisplay.map((ql) => (
               <div style={{paddingLeft: '5px'}} key={ql.name}>
-                <ResourceLinkWrapper onShiftClick={() => {setModal(resourcesByName[ql.name])}}>
+                <ResourceLinkWrapper onShiftClick={() => {setModalResource(resourcesByName[ql.name])}}>
                   <ResourceLink href={`/${ql.name}`} target="_blank" rel="noreferrer">
                     {ql.display}
                   </ResourceLink>
@@ -94,8 +94,8 @@ const ResourceGroupHeader = ({data, isMobile, setCollapsed, collapsible, isColla
                 <MdChevronRight size="30px"/>
               </Rotate>
               {isCollapsed ? (
-                <TooltipWrapper description={`For brevity we're only showing a subset of ${data.groupName} resources - click to show them all`}>
-                  {` show ${data.resources.length - resourcesToShowWhenCollapsed} more datasets`}
+                <TooltipWrapper description={`For brevity we're only showing a subset of ${group.groupName} resources - click to show them all`}>
+                  {` show ${group.resources.length - resourcesToShowWhenCollapsed} more datasets`}
                 </TooltipWrapper>
               ) : (
                 ' collapse datasets'
@@ -111,7 +111,7 @@ const ResourceGroupHeader = ({data, isMobile, setCollapsed, collapsible, isColla
 }
 
 interface ResourceGroupProps {
-  data: Group
+  group: Group
   elWidth: number
   numGroups: number
   sortMethod: string
@@ -121,11 +121,11 @@ interface ResourceGroupProps {
 /**
  * Displays a single resource group (e.g. a single pathogen)
  */
-export const ResourceGroup = ({data, elWidth, numGroups, sortMethod, quickLinks}: ResourceGroupProps) => {
+export const ResourceGroup = ({group, elWidth, numGroups, sortMethod, quickLinks}: ResourceGroupProps) => {
   const {collapseThreshold, resourcesToShowWhenCollapsed} = collapseThresolds(numGroups);
-  const collapsible = data.resources.length > collapseThreshold;
+  const collapsible = group.resources.length > collapseThreshold;
   const [isCollapsed, setCollapsed] = useState(collapsible); // if it is collapsible, start collapsed
-  const displayResources = isCollapsed ? data.resources.slice(0, resourcesToShowWhenCollapsed) : data.resources;
+  const displayResources = isCollapsed ? group.resources.slice(0, resourcesToShowWhenCollapsed) : group.resources;
   _setDisplayName(displayResources)
 
   /* isMobile: boolean determines whether we expose snapshots, as we hide them on small screens */
@@ -135,7 +135,7 @@ export const ResourceGroup = ({data, elWidth, numGroups, sortMethod, quickLinks}
 
   return (
     <ResourceGroupContainer>
-      <ResourceGroupHeader data={data} quickLinks={quickLinks}
+      <ResourceGroupHeader group={group} quickLinks={quickLinks}
         setCollapsed={setCollapsed} collapsible={collapsible}
         isCollapsed={isCollapsed} resourcesToShowWhenCollapsed={resourcesToShowWhenCollapsed}
         isMobile={isMobile}
@@ -145,7 +145,7 @@ export const ResourceGroup = ({data, elWidth, numGroups, sortMethod, quickLinks}
         {/* what to do when there's only one tile in a group? */}
         {displayResources.map((d) => (
           // We use key changes to re-render the component & thus recompute the DOM position
-          <IndividualResource data={d} key={`${d.name}_${isCollapsed}_${elWidth}_${sortMethod}`} isMobile={isMobile}/>
+          <IndividualResource resource={d} key={`${d.name}_${isCollapsed}_${elWidth}_${sortMethod}`} isMobile={isMobile}/>
         ))}
       </IndividualResourceContainer>
     </ResourceGroupContainer>

diff --git a/static-site/src/components/ListResources/Showcase.tsx b/static-site/src/components/ListResources/Showcase.tsx
@@ -25,7 +25,7 @@ export const Showcase = ({cards, setSelectedFilterOptions}: ShowcaseProps) => {
       <SingleRow>
         <ShowcaseContainer>
           {cards.map((el) => (
-            <ShowcaseTile data={el} key={el.name} setSelectedFilterOptions={setSelectedFilterOptions}/>
+            <ShowcaseTile card={el} key={el.name} setSelectedFilterOptions={setSelectedFilterOptions}/>
             ))}
         </ShowcaseContainer>
       </SingleRow>
@@ -35,30 +35,30 @@ export const Showcase = ({cards, setSelectedFilterOptions}: ShowcaseProps) => {
 }
 
 interface ShowcaseTileProps {
-    data: Card
+    card: Card
     setSelectedFilterOptions: React.Dispatch<React.SetStateAction<readonly FilterOption[]>>
 }
 
 /**
  * NOTE: Many of the React components here are taken from the existing Cards UI
  */
-const ShowcaseTile = ({data, setSelectedFilterOptions}: ShowcaseTileProps) => {
+const ShowcaseTile = ({card, setSelectedFilterOptions}: ShowcaseTileProps) => {
   const filter = useCallback(
     () => {
-      setSelectedFilterOptions(data.filters.map(createFilterOption));
+      setSelectedFilterOptions(card.filters.map(createFilterOption));
       goToAnchor(LIST_ANCHOR);
     },
-    [setSelectedFilterOptions, data]
+    [setSelectedFilterOptions, card]
   )
 
   return (
     <CardOuter>
       <CardInner>
         <div onClick={filter}>
           <CardTitle $squashed>
-            {data.name}
+            {card.name}
           </CardTitle>
-          <CardImgWrapper filename={data.img}/>
+          <CardImgWrapper filename={card.img}/>
         </div>
       </CardInner>
     </CardOuter>
@@ -126,11 +126,11 @@ const Byline = styled.div`
  * which the filters are valid given the resources known to the resource listing
  * UI
  */
-export const useShowcaseCards = (cards?: Card[], resources?: Group[]) => {
+export const useShowcaseCards = (cards?: Card[], groups?: Group[]) => {
   const [restrictedCards, setRestrictedCards] = useState<Card[]>([]);
   useEffect(() => {
-    if (!cards || !resources) return;
-    const words = resources.reduce((words, group) => {
+    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);
@@ -139,6 +139,6 @@ export const useShowcaseCards = (cards?: Card[], resources?: Group[]) => {
       return words;
     }, new Set<string>());
     setRestrictedCards(cards.filter((card) => card.filters.every((word) => words.has(word))));
-  }, [cards, resources]);
+  }, [cards, groups]);
   return restrictedCards;
 }