John conroy/publication associated collection HMP-256 (#3167)

* Don't show collections text if no collections exist * Don't show provenance section if there is an associated collection * Separate useDatasetsCollections query * Only show collection for associated collection if defined * Update publications collections text * Make header optional in related entities section * Rename styled component for reuse * Move section around related entities and collections * Add conditional margin * Add id * Add changelog * Capitalize string * Return section wrapper * Remove redundant conditionals * Handle associated collection as obj * Remove extra curly bracket * Fix prov bool --------- Co-authored-by: John Conroy <[email protected]>
hubmapconsortium · Jul 13, 2023 · 7a68075 · 7a68075
1 parent a2820c1
commit 7a68075
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 45 deletions.
diff --git a/CHANGELOG-publication-associated-collection.md b/CHANGELOG-publication-associated-collection.md
@@ -0,0 +1 @@
+- Add support for publications with associated collections.
diff --git a/...tailPage/related-entities/RelatedEntitiesSectionWrapper/RelatedEntitiesSectionWrapper.jsx b/...tailPage/related-entities/RelatedEntitiesSectionWrapper/RelatedEntitiesSectionWrapper.jsx
@@ -2,18 +2,28 @@ import React from 'react';
 import CircularProgress from '@material-ui/core/CircularProgress';
 
 import { DetailPageSection } from 'js/components/detailPage/style';
-import { StyledCenteredLoaderWrapper, StyledPaper } from './style';
+import { StyledCenteredLoaderWrapper, RelatedEntitiesPaper } from './style';
+
+function Wrapper({ sectionId, children }) {
+  if (sectionId) {
+    <DetailPageSection id={sectionId}>{children}</DetailPageSection>;
+  }
+
+  return children;
+}
 
 function RelatedEntitiesSectionWrapper({ isLoading, sectionId, children, headerComponent }) {
-  return isLoading ? (
+  if (isLoading) {
     <StyledCenteredLoaderWrapper>
       <CircularProgress />
-    </StyledCenteredLoaderWrapper>
-  ) : (
-    <DetailPageSection id={sectionId}>
+    </StyledCenteredLoaderWrapper>;
+  }
+
+  return (
+    <Wrapper sectionId={sectionId}>
       {headerComponent}
-      <StyledPaper>{children}</StyledPaper>
-    </DetailPageSection>
+      <RelatedEntitiesPaper>{children}</RelatedEntitiesPaper>
+    </Wrapper>
   );
 }
 

diff --git a/...p/static/js/components/detailPage/related-entities/RelatedEntitiesSectionWrapper/style.js b/...p/static/js/components/detailPage/related-entities/RelatedEntitiesSectionWrapper/style.js
@@ -9,10 +9,10 @@ const StyledCenteredLoaderWrapper = styled(CenteredLoaderWrapper)`
   height: ${sectionHeight}px;
 `;
 
-const StyledPaper = styled(Paper)`
+const RelatedEntitiesPaper = styled(Paper)`
   height: ${sectionHeight}px;
   display: flex;
   flex-direction: column;
 `;
 
-export { StyledCenteredLoaderWrapper, StyledPaper };
+export { StyledCenteredLoaderWrapper, RelatedEntitiesPaper };
diff --git a/...t/app/static/js/components/publications/PublicationCollections/PublicationCollections.jsx b/...t/app/static/js/components/publications/PublicationCollections/PublicationCollections.jsx
@@ -2,23 +2,22 @@ import React from 'react';
 
 import { buildCollectionsPanelsProps } from 'js/pages/Collections/utils';
 import PanelList from 'js/shared-styles/panels/PanelList';
-import Section from 'js/shared-styles/sections/Section';
 
 import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
 
 import { StyledSectionPaper } from './styles';
 
-function PublicationCollections({ collectionsData }) {
+function PublicationCollections({ collectionsData, isCollectionPublication }) {
   const panelsProps = buildCollectionsPanelsProps(collectionsData);
   return (
-    <Section id="collections">
-      <StyledSectionPaper>
+    <>
+      <StyledSectionPaper $isCollectionPublication={isCollectionPublication}>
         <LabelledSectionText label="Collections">
-          Data for this publication is available on the associated HuBMAP Data Collection page(s).
+          Datasets associated with this publication are included in the Collections listed below.
         </LabelledSectionText>
       </StyledSectionPaper>
       <PanelList panelsProps={panelsProps} />
-    </Section>
+    </>
   );
 }
 

diff --git a/context/app/static/js/components/publications/PublicationCollections/styles.js b/context/app/static/js/components/publications/PublicationCollections/styles.js
@@ -1,9 +1,14 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import SectionPaper from 'js/shared-styles/sections/SectionPaper';
 
 import { panelBorderStyles } from 'js/shared-styles/panels/Panel/style';
 
 const StyledSectionPaper = styled(SectionPaper)`
+  ${(props) =>
+    !props.$isCollectionPublication &&
+    css`
+      margin-top: ${props.theme.spacing(3)}px;
+    `}
   ${panelBorderStyles}
 `;
 

diff --git a/...atic/js/components/publications/PublicationRelatedEntities/PublicationRelatedEntities.jsx b/...atic/js/components/publications/PublicationRelatedEntities/PublicationRelatedEntities.jsx
@@ -3,13 +3,12 @@ import React, { useState } from 'react';
 import RelatedEntitiesSectionWrapper from 'js/components/detailPage/related-entities/RelatedEntitiesSectionWrapper';
 import RelatedEntitiesTabs from 'js/components/detailPage/related-entities/RelatedEntitiesTabs';
 import RelatedEntitiesSectionHeader from 'js/components/detailPage/related-entities/RelatedEntitiesSectionHeader';
-
 import { usePublicationsRelatedEntities } from './hooks';
 
 function PublicationRelatedEntities({ uuid }) {
   const [openIndex, setOpenIndex] = useState(0);
 
-  const { isLoading, entities } = usePublicationsRelatedEntities(uuid);
+  const { entities, isLoading } = usePublicationsRelatedEntities(uuid);
   return (
     <RelatedEntitiesSectionWrapper
       isLoading={isLoading}
@@ -27,9 +26,7 @@ function PublicationRelatedEntities({ uuid }) {
         openIndex={openIndex}
         setOpenIndex={setOpenIndex}
         ariaLabel="Publication Entities Tabs"
-        renderWarningMessage={(tableEntityType) =>
-          `No derived ${tableEntityType.toLowerCase()}s for this publication}.`
-        }
+        renderWarningMessage={(tableEntityType) => `No derived ${tableEntityType.toLowerCase()}s for this publication.`}
       />
     </RelatedEntitiesSectionWrapper>
   );

diff --git a/...app/static/js/components/publications/PublicationsDataSection/PublicationsDataSection.jsx b/...app/static/js/components/publications/PublicationsDataSection/PublicationsDataSection.jsx
@@ -2,16 +2,27 @@ import React from 'react';
 
 import PublicationRelatedEntities from 'js/components/publications/PublicationRelatedEntities';
 import PublicationCollections from 'js/components/publications/PublicationCollections';
-import { useDatasetsCollections } from 'js/hooks/useDatasetsCollections';
+import { buildCollectionsWithDatasetQuery } from 'js/hooks/useDatasetsCollections';
+import { useSearchHits } from 'js/hooks/useSearchData';
+import { getIDsQuery } from 'js/helpers/queries';
+import SectionHeader from 'js/shared-styles/sections/SectionHeader';
+import { DetailPageSection } from 'js/components/detailPage/style';
 
-function PublicationsDataSection({ datasetUUIDs, uuid }) {
-  const collectionsData = useDatasetsCollections(datasetUUIDs);
+function PublicationsDataSection({ datasetUUIDs, uuid, associatedCollectionUUID }) {
+  const query = associatedCollectionUUID
+    ? { query: getIDsQuery(associatedCollectionUUID) }
+    : buildCollectionsWithDatasetQuery(datasetUUIDs);
+
+  const { searchHits: collectionsData } = useSearchHits(query);
 
   return (
-    <>
-      <PublicationRelatedEntities uuid={uuid} />
-      {Boolean(collectionsData) && <PublicationCollections collectionsData={collectionsData} />}
-    </>
+    <DetailPageSection id="data">
+      {associatedCollectionUUID && <SectionHeader>Data</SectionHeader>}
+      {!associatedCollectionUUID && <PublicationRelatedEntities uuid={uuid} />}
+      {collectionsData.length > 0 && (
+        <PublicationCollections collectionsData={collectionsData} isCollectionPublication={associatedCollectionUUID} />
+      )}
+    </DetailPageSection>
   );
 }
 

diff --git a/context/app/static/js/hooks/useDatasetsCollections.js b/context/app/static/js/hooks/useDatasetsCollections.js
@@ -1,23 +1,21 @@
-import { useMemo } from 'react';
 import { useSearchHits } from 'js/hooks/useSearchData';
 import { getAllCollectionsQuery } from 'js/helpers/queries';
 
-function useDatasetsCollections(datasetUUIDs) {
-  const datasetUUIDsString = JSON.stringify(datasetUUIDs.sort((a, b) => a - b));
-  const collectionsWithDatasetQuery = useMemo(
-    () => ({
-      ...getAllCollectionsQuery,
-      query: {
-        terms: {
-          'datasets.uuid': JSON.parse(datasetUUIDsString),
-        },
+function buildCollectionsWithDatasetQuery(datasetUUIDs) {
+  return {
+    ...getAllCollectionsQuery,
+    query: {
+      terms: {
+        'datasets.uuid': datasetUUIDs,
       },
-    }),
-    [datasetUUIDsString],
-  );
+    },
+  };
+}
 
-  const { searchHits: collections } = useSearchHits(collectionsWithDatasetQuery);
+function useDatasetsCollections(datasetUUIDs) {
+  const query = buildCollectionsWithDatasetQuery(datasetUUIDs);
+  const { searchHits: collections } = useSearchHits(query);
   return collections;
 }
 
-export { useDatasetsCollections };
+export { useDatasetsCollections, buildCollectionsWithDatasetQuery };
diff --git a/context/app/static/js/pages/Publication/Publication.jsx b/context/app/static/js/pages/Publication/Publication.jsx
@@ -25,15 +25,19 @@ function Publication({ publication, vignette_json }) {
     ancestor_ids,
     publication_venue,
     files,
+    associated_collection,
   } = publication;
 
   const setAssayMetadata = useEntityStore(entityStoreSelector);
   useEffect(() => {
     setAssayMetadata({ hubmap_id, entity_type, title, publication_venue });
   }, [hubmap_id, entity_type, title, publication_venue, setAssayMetadata]);
 
+  const associatedCollectionUUID = associated_collection?.uuid;
+
   const shouldDisplaySection = {
     visualizations: Boolean(Object.keys(vignette_json).length),
+    provenance: !associatedCollectionUUID,
     files: true,
   };
 
@@ -49,13 +53,17 @@ function Publication({ publication, vignette_json }) {
   return (
     <DetailLayout sectionOrder={sectionOrder}>
       <PublicationSummary {...publication} status={combinedStatus} hasDOI={hasDOI} />
-      <PublicationsDataSection uuid={uuid} datasetUUIDs={ancestor_ids} />
+      <PublicationsDataSection
+        uuid={uuid}
+        datasetUUIDs={ancestor_ids}
+        associatedCollectionUUID={associatedCollectionUUID}
+      />
       {shouldDisplaySection.visualizations && (
         <PublicationsVisualizationSection vignette_json={vignette_json} uuid={uuid} />
       )}
       <Files files={files} uuid={uuid} hubmap_id={hubmap_id} />
       <ContributorsTable contributors={contributors} title="Authors" />
-      <ProvSection uuid={uuid} assayMetadata={publication} />
+      {shouldDisplaySection.provenance && <ProvSection uuid={uuid} assayMetadata={publication} />}
     </DetailLayout>
   );
 }