Kevin yoo/hmp 305 implement tooltips for swedlow feedback response (#…

…3196) * remove unused * attribution * protocol * provenance tooltips * bulk data transfer tooltips; * collections tooltip * changelog * change text for protocols tooltip * to lowercase * move independent variables outside of functional component * fix path for useflaskdatacontext * update changelog * add periods at the end of tooltip text * tolowercase for provenance * change to lowercase * optional chaining
hubmapconsortium · Jul 26, 2023 · d1b9ff7 · d1b9ff7
1 parent 3cc7b44
commit d1b9ff7
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 25 deletions.
diff --git a/CHANGELOG-HMP-305-Implement-tooltips-for-Swedlow-feedback-response.md b/CHANGELOG-HMP-305-Implement-tooltips-for-Swedlow-feedback-response.md
@@ -0,0 +1 @@
+- Add tooltips for donor, sample, and dataset pages.
diff --git a/context/app/static/js/components/detailPage/Attribution/Attribution.jsx b/context/app/static/js/components/detailPage/Attribution/Attribution.jsx
@@ -1,19 +1,23 @@
 import React from 'react';
-import SectionHeader from 'js/shared-styles/sections/SectionHeader';
+
 import { useFlaskDataContext } from 'js/components/Contexts';
 import { DetailPageSection } from 'js/components/detailPage/style';
 import EmailIconLink from 'js/shared-styles/Links/iconLinks/EmailIconLink';
+import SectionHeader from 'js/shared-styles/sections/SectionHeader';
+
 import { FlexPaper } from './style';
 import SectionItem from '../SectionItem';
 
 function Attribution() {
   const {
-    entity: { group_name, created_by_user_displayname, created_by_user_email },
+    entity: { group_name, created_by_user_displayname, created_by_user_email, entity_type },
   } = useFlaskDataContext();
 
   return (
     <DetailPageSection id="attribution">
-      <SectionHeader>Attribution</SectionHeader>
+      <SectionHeader iconTooltipText={`Information about the group registering this ${entity_type?.toLowerCase()}.`}>
+        Attribution
+      </SectionHeader>
       <FlexPaper>
         <SectionItem label="Group">{group_name}</SectionItem>
         <SectionItem label="Registered by" ml={1}>

diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransfer.jsx b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransfer.jsx
@@ -2,6 +2,7 @@ import React, { useState, useMemo, useCallback } from 'react';
 
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import { DetailPageSection } from 'js/components/detailPage/style';
+import { useFlaskDataContext } from 'js/components/Contexts';
 import { useDetailContext } from 'js/components/detailPage/context';
 import { FilesContext } from 'js/components/detailPage/files/Files/context';
 import FileBrowserDUA from './FileBrowserDUA';
@@ -15,6 +16,10 @@ function BulkDataTransfer() {
   const [isDialogOpen, setDialogOpen] = useState(false);
   const [urlClickedBeforeDUA, setUrlClickedBeforeDUA] = useState('');
 
+  const {
+    entity: { entity_type },
+  } = useFlaskDataContext();
+
   const handleDUAAgree = useCallback(() => {
     agreeToDUA(true);
     localStorage.setItem(localStorageKey, true);
@@ -36,7 +41,11 @@ function BulkDataTransfer() {
   return (
     <FilesContext.Provider value={filesContext}>
       <DetailPageSection id="bulk-data-transfer" data-testid="bulk-data-transfer">
-        <SectionHeader>Bulk Data Transfer</SectionHeader>
+        <SectionHeader
+          iconTooltipText={`Information about how to bulk download all files related to this ${entity_type?.toLowerCase()}.`}
+        >
+          Bulk Data Transfer
+        </SectionHeader>
         <StyledContainer>
           <BulkDataTransferPanels />
         </StyledContainer>

diff --git a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.jsx b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.jsx
@@ -1,16 +1,23 @@
 import React from 'react';
 
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
+import PanelList from 'js/shared-styles/panels/PanelList';
+import { useFlaskDataContext } from 'js/components/Contexts';
 import { DetailPageSection } from 'js/components/detailPage/style';
 import { buildCollectionsPanelsProps } from 'js/pages/Collections/utils';
 
-import PanelList from 'js/shared-styles/panels/PanelList';
-
 function CollectionsSection({ collectionsData }) {
   const panelsProps = buildCollectionsPanelsProps(collectionsData);
+
+  const {
+    entity: { entity_type },
+  } = useFlaskDataContext();
+
   return (
     <DetailPageSection id="collections">
-      <SectionHeader>Collections</SectionHeader>
+      <SectionHeader iconTooltipText={`List of collections that contain this ${entity_type?.toLowerCase()}.`}>
+        Collections
+      </SectionHeader>
       <PanelList panelsProps={panelsProps} />
     </DetailPageSection>
   );

diff --git a/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.jsx b/context/app/static/js/components/detailPage/MetadataTable/MetadataTable.jsx
@@ -6,13 +6,15 @@ import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 
+import { useFlaskDataContext } from 'js/components/Contexts';
 import metadataFieldDescriptions from 'metadata-field-descriptions';
+import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
 import { tableToDelimitedString, createDownloadUrl } from 'js/helpers/functions';
 import { StyledTableContainer, HeaderCell } from 'js/shared-styles/tables';
 import IconTooltipCell from 'js/shared-styles/tables/IconTooltipCell';
 import { DetailPageSection } from 'js/components/detailPage/style';
-import { DownloadIcon, Flex, StyledWhiteBackgroundIconButton, StyledSectionHeader } from './style';
+import { DownloadIcon, Flex, StyledWhiteBackgroundIconButton } from './style';
 
 function getDescription(field) {
   const [prefix, stem] = field.split('.');
@@ -49,6 +51,10 @@ function tableDataToRows(tableData) {
 }
 
 function MetadataTable({ metadata: tableData = {}, hubmap_id }) {
+  const {
+    entity: { entity_type },
+  } = useFlaskDataContext();
+
   const columns = [
     { id: 'key', label: 'Key' },
     { id: 'value', label: 'Value' },
@@ -68,7 +74,9 @@ function MetadataTable({ metadata: tableData = {}, hubmap_id }) {
   return (
     <DetailPageSection id="metadata">
       <Flex>
-        <StyledSectionHeader>Metadata</StyledSectionHeader>
+        <SectionHeader iconTooltipText={`Data provided for the given ${entity_type?.toLowerCase()}.`}>
+          Metadata
+        </SectionHeader>
         <SecondaryBackgroundTooltip title="Download">
           <StyledWhiteBackgroundIconButton href={downloadUrl} download={`${hubmap_id}.tsv`}>
             <DownloadIcon color="primary" />
@@ -100,7 +108,5 @@ function MetadataTable({ metadata: tableData = {}, hubmap_id }) {
   );
 }
 
-// MetadataTable.prototype = {};
-
 export default MetadataTable;
 export { tableDataToRows, getDescription };
diff --git a/context/app/static/js/components/detailPage/Protocol/Protocol.jsx b/context/app/static/js/components/detailPage/Protocol/Protocol.jsx
@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Divider from '@material-ui/core/Divider';
 
+import { useFlaskDataContext } from 'js/components/Contexts';
 import OutboundIconLink from 'js/shared-styles/Links/iconLinks/OutboundIconLink';
+import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import EmailIconLink from 'js/shared-styles/Links/iconLinks/EmailIconLink';
 import useProtocolData, { useFormattedProtocolUrls } from 'js/hooks/useProtocolData';
-import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import { DetailPageSection } from 'js/components/detailPage/style';
 import { StyledPaper } from './style';
 import SectionItem from '../SectionItem';
@@ -36,11 +37,19 @@ function ProtocolLink({ url, index }) {
 }
 
 function Protocol({ protocol_url }) {
+  const {
+    entity: { entity_type },
+  } = useFlaskDataContext();
+
   const protocolUrls = useFormattedProtocolUrls(protocol_url, 1);
 
   return (
     <DetailPageSection id="protocols">
-      <SectionHeader>Protocols</SectionHeader>
+      <SectionHeader
+        iconTooltipText={`Protocols uploaded to protocols.io for the given ${entity_type?.toLowerCase()}.`}
+      >
+        Protocols
+      </SectionHeader>
       <Divider />
       <StyledPaper>
         {protocolUrls.map((url, index) => (

diff --git a/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.jsx b/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
+
 import { useAppContext, useFlaskDataContext } from 'js/components/Contexts';
 import useProvData from 'js/hooks/useProvData';
 import { Alert } from 'js/shared-styles/alerts';
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import { DetailPageSection } from 'js/components/detailPage/style';
 import ProvTabs from '../ProvTabs';
 
-function ProvSection({ iconTooltipText }) {
+const provenanceTooltipText = `The provenance shows the sequence of events and actions that led to this page creation.`;
+
+function ProvSection() {
   const {
     entity: { uuid, entity_type },
   } = useFlaskDataContext();
@@ -16,25 +19,23 @@ function ProvSection({ iconTooltipText }) {
   if (isLoading) {
     return (
       <DetailPageSection id="provenance">
-        <SectionHeader>Provenance</SectionHeader>
+        <SectionHeader iconTooltipText={provenanceTooltipText}>Provenance</SectionHeader>
       </DetailPageSection>
     );
   }
 
   return (
     <DetailPageSection id="provenance">
-      <SectionHeader iconTooltipText={iconTooltipText}>Provenance</SectionHeader>
+      <SectionHeader iconTooltipText={provenanceTooltipText}>Provenance</SectionHeader>
       {provData ? (
         <ProvTabs provData={provData} />
       ) : (
         <Alert severity="warning">
-          {`We were unable to retrieve provenance information for this ${entity_type.toLowerCase()}.`}
+          {`We were unable to retrieve provenance information for this ${entity_type?.toLowerCase()}.`}
         </Alert>
       )}
     </DetailPageSection>
   );
 }
 
-// ProvSection.propTypes = {};
-
 export default ProvSection;
diff --git a/...detailPage/related-entities/RelatedEntitiesSectionHeader/RelatedEntitiesSectionHeader.jsx b/...detailPage/related-entities/RelatedEntitiesSectionHeader/RelatedEntitiesSectionHeader.jsx
@@ -2,16 +2,23 @@ import React from 'react';
 import Button from '@material-ui/core/Button';
 
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
+import { useFlaskDataContext } from 'js/components/Contexts';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
 
-function RelatedEntitiesSectionHeader({ header, searchPageHref, iconTooltipText }) {
+const tooltipTexts = {
+  Donor: 'Samples and datasets derived from this donor.',
+  Sample: 'Datasets derived from this sample.',
+  Dataset: 'These datasets include those that have additional processing, such as visualizations.',
+};
+
+function RelatedEntitiesSectionHeader({ header, searchPageHref }) {
+  const {
+    entity: { entity_type },
+  } = useFlaskDataContext();
+
   return (
     <SpacedSectionButtonRow
-      leftText={
-        <div>
-          <SectionHeader iconTooltipText={iconTooltipText}>{header}</SectionHeader>
-        </div>
-      }
+      leftText={<SectionHeader iconTooltipText={tooltipTexts[entity_type]}>{header}</SectionHeader>}
       buttons={
         <Button
           variant="contained"