John conroy/publication related data (#3046)

* Make derived entities tabs more flexible to entities

* Change derived entities section header for reuse with publications data

* Make derived entities tabs accept warning message fn as prop

* Pass aria label as props to tabs

* Rename derived entities tabs to related entities tabs

* Rename derived entities section wrapper

* Add related entities table component

* Add shared columns file

* Add entity type to derived entity hooks

* Update entities table to take header and body rows as props

* Use related entities table in derived table components

* Fix import

* Add hook to fetch ancestors

* Add publication entities tabs

* Pass columns to tabs

* Add donors and define columns for publication entities

* Consolidate hooks

* Consolidate derived entities hooks

* Move hooks from page inside derived datasets

* Update prop name

* Update entities table story

* Use tabs in derived datasets section and remove unused table components

* Move hooks for derived inside component

* Fix formatting issues

* Add changelog

---------

Co-authored-by: John Conroy <[email protected]>

CHANGELOG-publication-related-data.md

@@ -0,0 +1 @@
+- Add data section to publication page.

context/app/static/js/components/detailPage/derivedEntities/DerivedDatasetsSection/DerivedDatasetsSection.jsx

@@ -1,25 +1,35 @@
-import React from 'react';
+import React, { useState } from 'react';
 
-import DerivedEntitiesSectionWrapper from 'js/components/detailPage/derivedEntities/DerivedEntitiesSectionWrapper';
-import DerivedDatasetsTable from 'js/components/detailPage/derivedEntities/DerivedDatasetsTable';
-import DerivedEntitiesSectionHeader from 'js/components/detailPage/derivedEntities/DerivedEntitiesSectionHeader';
+import DerivedEntitiesSectionWrapper from 'js/components/detailPage/related-entities/RelatedEntitiesSectionWrapper';
+import RelatedEntitiesTabs from 'js/components/detailPage/related-entities/RelatedEntitiesTabs';
+import DerivedEntitiesSectionHeader from 'js/components/detailPage/related-entities/RelatedEntitiesSectionHeader';
+import { useDerivedDatasetsSection } from './hooks';
+
+function DerivedDatasetsSection({ uuid, entityType }) {
+  const [openIndex, setOpenIndex] = useState(0);
+  const { entities, isLoading } = useDerivedDatasetsSection(uuid);
 
-function DerivedDatasetsSection({ datasets, uuid, isLoading, sectionId }) {
-  const entityType = 'Dataset';
   return (
     <DerivedEntitiesSectionWrapper
       isLoading={isLoading}
-      sectionId={sectionId}
+      sectionId="derived-datasets"
       headerComponent={
         <DerivedEntitiesSectionHeader
           header="Derived Datasets"
-          entityCountsText={`${datasets.length} Datasets`}
           uuid={uuid}
-          entityType={entityType}
+          searchPageHref={`/search?ancestor_ids[0]=${uuid}&entity_type[0]=${entities[openIndex].entityType}`}
         />
       }
     >
-      <DerivedDatasetsTable entities={datasets} />
+      <RelatedEntitiesTabs
+        entities={entities}
+        openIndex={openIndex}
+        setOpenIndex={setOpenIndex}
+        ariaLabel="Derived Datasets Tab"
+        renderWarningMessage={(tableEntityType) =>
+          `No derived ${tableEntityType.toLowerCase()}s for this ${entityType.toLowerCase()}.`
+        }
+      />
     </DerivedEntitiesSectionWrapper>
   );
 }

context/app/static/js/components/detailPage/derivedEntities/DerivedDatasetsSection/hooks.js

@@ -0,0 +1,19 @@
+import { useDerivedDatasetSearchHits } from 'js/hooks/useDerivedEntitySearchHits';
+import { derivedDatasetsColumns } from 'js/components/detailPage/derivedEntities/columns';
+
+function useDerivedDatasetsSection(uuid) {
+  const { searchHits: datasets, isLoading } = useDerivedDatasetSearchHits(uuid);
+
+  const entities = [
+    {
+      entityType: 'Dataset',
+      tabLabel: 'Datasets',
+      data: datasets,
+      columns: derivedDatasetsColumns,
+    },
+  ];
+
+  return { entities, isLoading };
+}
+
+export { useDerivedDatasetsSection };

context/app/static/js/components/detailPage/derivedEntities/DerivedEntitiesSection/DerivedEntitiesSection.jsx

@@ -1,44 +1,37 @@
 import React, { useState } from 'react';
 
-import DerivedEntitiesSectionWrapper from 'js/components/detailPage/derivedEntities/DerivedEntitiesSectionWrapper';
-import DerivedEntitiesTabs from 'js/components/detailPage/derivedEntities/DerivedEntitiesTabs';
-import DerivedEntitiesSectionHeader from 'js/components/detailPage/derivedEntities/DerivedEntitiesSectionHeader';
+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 { useDerivedEntitiesSection } from './hooks';
 
-function DerivedEntitiesSection({ samples, datasets, uuid, isLoading, sectionId, entityType }) {
+function DerivedEntitiesSection({ uuid, entityType }) {
   const [openIndex, setOpenIndex] = useState(0);
 
-  const entities = [
-    {
-      entityType: 'Sample',
-      tabLabel: 'Samples',
-      data: samples,
-    },
-    {
-      entityType: 'Dataset',
-      tabLabel: 'Datasets',
-      data: datasets,
-    },
-  ];
+  const { entities, isLoading } = useDerivedEntitiesSection(uuid);
+
   return (
-    <DerivedEntitiesSectionWrapper
+    <RelatedEntitiesSectionWrapper
       isLoading={isLoading}
-      sectionId={sectionId}
+      sectionId="derived-entities"
       headerComponent={
-        <DerivedEntitiesSectionHeader
+        <RelatedEntitiesSectionHeader
           header="Derived Samples and Datasets"
-          entityCountsText={`${samples.length} Samples | ${datasets.length} Datasets`}
           uuid={uuid}
-          entityType={entities[openIndex].entityType}
+          searchPageHref={`/search?ancestor_ids[0]=${uuid}&entity_type[0]=${entities[openIndex].entityType}`}
         />
       }
     >
-      <DerivedEntitiesTabs
+      <RelatedEntitiesTabs
         entities={entities}
         openIndex={openIndex}
         setOpenIndex={setOpenIndex}
-        entityType={entityType}
+        ariaLabel="Derived Datasets and Samples Tabs"
+        renderWarningMessage={(tableEntityType) =>
+          `No derived ${tableEntityType.toLowerCase()}s for this ${entityType.toLowerCase()}.`
+        }
       />
-    </DerivedEntitiesSectionWrapper>
+    </RelatedEntitiesSectionWrapper>
   );
 }
 

context/app/static/js/components/detailPage/derivedEntities/DerivedEntitiesSection/hooks.js

@@ -0,0 +1,28 @@
+import { useDerivedDatasetSearchHits, useDerivedSampleSearchHits } from 'js/hooks/useDerivedEntitySearchHits';
+import { derivedDatasetsColumns, derivedSamplesColumns } from 'js/components/detailPage/derivedEntities/columns';
+
+function useDerivedEntitiesSection(uuid) {
+  const { searchHits: datasets, isLoading: derivedDatasetsAreLoading } = useDerivedDatasetSearchHits(uuid);
+  const { searchHits: samples, isLoading: derivedSamplesAreLoading } = useDerivedSampleSearchHits(uuid);
+
+  const isLoading = derivedDatasetsAreLoading || derivedSamplesAreLoading;
+
+  const entities = [
+    {
+      entityType: 'Sample',
+      tabLabel: 'Samples',
+      data: samples,
+      columns: derivedSamplesColumns,
+    },
+    {
+      entityType: 'Dataset',
+      tabLabel: 'Datasets',
+      data: datasets,
+      columns: derivedDatasetsColumns,
+    },
+  ];
+
+  return { entities, isLoading };
+}
+
+export { useDerivedEntitiesSection };

context/app/static/js/components/detailPage/derivedEntities/columns.js

@@ -0,0 +1,37 @@
+import format from 'date-fns/format';
+
+const descendantCountsCol = {
+  id: 'descendant_counts.entity_type.Dataset',
+  label: 'Derived Dataset Count',
+  renderColumnCell: ({ descendant_counts }) => descendant_counts?.entity_type?.Dataset || 0,
+};
+
+const lastModifiedTimestampCol = {
+  id: 'last_modified_timestamp',
+  label: 'Last Modified',
+  renderColumnCell: ({ last_modified_timestamp }) => format(last_modified_timestamp, 'yyyy-MM-dd'),
+};
+
+const derivedSamplesColumns = [
+  {
+    id: 'origin_samples_unique_mapped_organs',
+    label: 'Organ',
+    renderColumnCell: ({ origin_samples_unique_mapped_organs }) => origin_samples_unique_mapped_organs.join(', '),
+  },
+  { id: 'sample_category', label: 'Sample Category', renderColumnCell: ({ sample_category }) => sample_category },
+  descendantCountsCol,
+  lastModifiedTimestampCol,
+];
+
+const derivedDatasetsColumns = [
+  {
+    id: 'mapped_data_types',
+    label: 'Data Types',
+    renderColumnCell: ({ mapped_data_types }) => mapped_data_types.join(', '),
+  },
+  { id: 'status', label: 'Status', renderColumnCell: ({ status }) => status },
+  descendantCountsCol,
+  lastModifiedTimestampCol,
+];
+
+export { derivedSamplesColumns, derivedDatasetsColumns, lastModifiedTimestampCol };