John conroy/collection dataset query HMP-257 (#3166)

* Make separate request for collections datasets * Use related entities table for collections datasets * Set max height for scroll in entities table * Add changelog * Add comment * Pull out shared cols to cols file * Refactor cols in hook * Reuse cols --------- Co-authored-by: John Conroy <[email protected]>
hubmapconsortium · Jul 12, 2023 · 2b22914 · 2b22914
1 parent 2dd9a9e
commit 2b22914
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 89 deletions.
diff --git a/CHANGELOG-collection-dataset-query.md b/CHANGELOG-collection-dataset-query.md
@@ -0,0 +1 @@
+- Get collection datasets from separate search-api query instead of the collection es document.
diff --git a/...t/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.jsx b/...t/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.jsx
@@ -1,28 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import format from 'date-fns/format';
 import Paper from '@material-ui/core/Paper';
-import Table from '@material-ui/core/Table';
 import Typography from '@material-ui/core/Typography';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
 
-import { StyledTableContainer, HeaderCell } from 'js/shared-styles/tables';
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import { DetailPageSection } from 'js/components/detailPage/style';
-import { StyledLink } from './style';
+import RelatedEntitiesTable from 'js/components/detailPage/related-entities/RelatedEntitiesTable';
+
+import { useCollectionsDatasets } from './hooks';
 
 function CollectionDatasetsTable({ datasets }) {
-  const columns = [
-    { id: 'hubmap_id', label: 'HuBMAP ID' },
-    { id: 'organ', label: 'Organ' },
-    { id: 'data_types', label: 'Assay Types' },
-    { id: 'last_modified_timestamp', label: 'Last Modified' },
-    { id: 'properties.created_by_user_displayname', label: 'Contact' },
-    { id: 'status', label: 'Status' },
-  ];
+  const { datasets: data, columns } = useCollectionsDatasets({
+    ids: datasets.map((d) => d.uuid),
+  });
 
   return (
     <DetailPageSection id="datasets-table">
@@ -31,33 +21,7 @@ function CollectionDatasetsTable({ datasets }) {
         {datasets.length} Datasets
       </Typography>
       <Paper>
-        <StyledTableContainer>
-          <Table stickyHeader>
-            <TableHead>
-              <TableRow>
-                {columns.map((column) => (
-                  <HeaderCell key={column.id}>{column.label}</HeaderCell>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {datasets.map((dataset) => (
-                <TableRow key={dataset.hubmap_id}>
-                  <TableCell>
-                    <StyledLink href={`/browse/dataset/${dataset.uuid}`} variant="body2">
-                      {dataset.hubmap_id}
-                    </StyledLink>
-                  </TableCell>
-                  <TableCell />
-                  <TableCell>{dataset.data_types}</TableCell>
-                  <TableCell>{format(dataset.last_modified_timestamp, 'yyyy-MM-dd')}</TableCell>
-                  <TableCell>{dataset.created_by_user_displayname}</TableCell>
-                  <TableCell>{dataset.status}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </StyledTableContainer>
+        <RelatedEntitiesTable columns={columns} entities={data} entityType="dataset" />
       </Paper>
     </DetailPageSection>
   );

diff --git a/context/app/static/js/components/detailPage/CollectionDatasetsTable/hooks.js b/context/app/static/js/components/detailPage/CollectionDatasetsTable/hooks.js
@@ -0,0 +1,35 @@
+import { useSearchHits } from 'js/hooks/useSearchData';
+import { getIDsQuery } from 'js/helpers/queries';
+import {
+  lastModifiedTimestampCol,
+  organCol,
+  dataTypesCol,
+  statusCol,
+} from 'js/components/detailPage/derivedEntities/columns';
+
+const columns = [
+  organCol,
+  dataTypesCol,
+  lastModifiedTimestampCol,
+  {
+    id: 'created_by_user_displayname',
+    label: 'Contact',
+    renderColumnCell: ({ created_by_user_displayname }) => created_by_user_displayname,
+  },
+  statusCol,
+];
+
+function useCollectionsDatasets({ ids }) {
+  const query = {
+    query: {
+      ...getIDsQuery(ids),
+    },
+    _source: ['hubmap_id', 'entity_type', ...columns.map((c) => c.id)],
+    size: 10000,
+  };
+
+  const { searchHits: datasets } = useSearchHits(query);
+  return { columns, datasets };
+}
+
+export { useCollectionsDatasets };
diff --git a/context/app/static/js/components/detailPage/CollectionDatasetsTable/style.js b/context/app/static/js/components/detailPage/CollectionDatasetsTable/style.js
diff --git a/context/app/static/js/components/detailPage/derivedEntities/columns.js b/context/app/static/js/components/detailPage/derivedEntities/columns.js
@@ -12,26 +12,27 @@ const lastModifiedTimestampCol = {
   renderColumnCell: ({ last_modified_timestamp }) => format(last_modified_timestamp, 'yyyy-MM-dd'),
 };
 
+const organCol = {
+  id: 'origin_samples_unique_mapped_organs',
+  label: 'Organ',
+  renderColumnCell: ({ origin_samples_unique_mapped_organs }) => origin_samples_unique_mapped_organs.join(', '),
+};
+
+const dataTypesCol = {
+  id: 'mapped_data_types',
+  label: 'Data Types',
+  renderColumnCell: ({ mapped_data_types }) => mapped_data_types.join(', '),
+};
+
+const statusCol = { id: 'mapped_status', label: 'Status', renderColumnCell: ({ mapped_status }) => mapped_status };
+
 const derivedSamplesColumns = [
-  {
-    id: 'origin_samples_unique_mapped_organs',
-    label: 'Organ',
-    renderColumnCell: ({ origin_samples_unique_mapped_organs }) => origin_samples_unique_mapped_organs.join(', '),
-  },
+  organCol,
   { 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,
-];
+const derivedDatasetsColumns = [dataTypesCol, statusCol, descendantCountsCol, lastModifiedTimestampCol];
 
-export { derivedSamplesColumns, derivedDatasetsColumns, lastModifiedTimestampCol };
+export { derivedSamplesColumns, derivedDatasetsColumns, lastModifiedTimestampCol, organCol, dataTypesCol, statusCol };
diff --git a/context/app/static/js/components/publications/PublicationRelatedEntities/hooks.js b/context/app/static/js/components/publications/PublicationRelatedEntities/hooks.js
@@ -1,7 +1,12 @@
 import { useMemo } from 'react';
 
 import { useSearchHits } from 'js/hooks/useSearchData';
-import { lastModifiedTimestampCol } from 'js/components/detailPage/derivedEntities/columns';
+import {
+  lastModifiedTimestampCol,
+  organCol,
+  dataTypesCol,
+  statusCol,
+} from 'js/components/detailPage/derivedEntities/columns';
 
 import { getAncestorsQuery } from 'js/helpers/queries';
 
@@ -14,7 +19,7 @@ function useAncestorSearchHits(descendantUUID) {
         'hubmap_id',
         'entity_type',
         'mapped_data_types',
-        'status',
+        'mapped_status',
         'descendant_counts',
         'last_modified_timestamp',
         'mapped_metadata',
@@ -82,11 +87,7 @@ function usePublicationsRelatedEntities(uuid) {
       tabLabel: 'Samples',
       data: ancestorsSplitByEntityType.Sample,
       columns: [
-        {
-          id: 'origin_samples_unique_mapped_organs.mapped_organ',
-          label: 'Organ',
-          renderColumnCell: ({ origin_samples_unique_mapped_organs }) => origin_samples_unique_mapped_organs.join(', '),
-        },
+        organCol,
         { id: 'sample_category', label: 'Sample Category', renderColumnCell: ({ sample_category }) => sample_category },
         lastModifiedTimestampCol,
       ],
@@ -96,21 +97,7 @@ function usePublicationsRelatedEntities(uuid) {
       entityType: 'Dataset',
       tabLabel: 'Datasets',
       data: ancestorsSplitByEntityType.Dataset,
-      columns: [
-        {
-          id: 'mapped_data_types',
-          label: 'Data Types',
-          renderColumnCell: ({ mapped_data_types }) => mapped_data_types.join(', '),
-        },
-
-        {
-          id: 'origin_samples_unique_mapped_organs.mapped_organ',
-          label: 'Organ',
-          renderColumnCell: ({ origin_samples_unique_mapped_organs }) => origin_samples_unique_mapped_organs.join(', '),
-        },
-        { id: 'status', label: 'Status', renderColumnCell: ({ status }) => status },
-        lastModifiedTimestampCol,
-      ],
+      columns: [dataTypesCol, organCol, statusCol, lastModifiedTimestampCol],
     },
   ];
 

diff --git a/context/app/static/js/shared-styles/tables/EntitiesTable/style.js b/context/app/static/js/shared-styles/tables/EntitiesTable/style.js
@@ -5,6 +5,7 @@ const StyledDiv = styled.div`
   width: 100%;
   overflow-y: auto;
   min-height: 0px; // flex overflow fix
+  max-height: 340px; // Cuts off the last row partially to cue users to scroll.
 `;
 
 export { StyledDiv };