From 2b229146c5c37c3b9b6a9c5df7756df61f031788 Mon Sep 17 00:00:00 2001 From: John Conroy <62477388+john-conroy@users.noreply.github.com> Date: Wed, 12 Jul 2023 13:04:30 -0400 Subject: [PATCH] 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 --- CHANGELOG-collection-dataset-query.md | 1 + .../CollectionDatasetsTable.jsx | 50 +++---------------- .../CollectionDatasetsTable/hooks.js | 35 +++++++++++++ .../CollectionDatasetsTable/style.js | 8 --- .../detailPage/derivedEntities/columns.js | 33 ++++++------ .../PublicationRelatedEntities/hooks.js | 31 ++++-------- .../tables/EntitiesTable/style.js | 1 + 7 files changed, 70 insertions(+), 89 deletions(-) create mode 100644 CHANGELOG-collection-dataset-query.md create mode 100644 context/app/static/js/components/detailPage/CollectionDatasetsTable/hooks.js delete mode 100644 context/app/static/js/components/detailPage/CollectionDatasetsTable/style.js diff --git a/CHANGELOG-collection-dataset-query.md b/CHANGELOG-collection-dataset-query.md new file mode 100644 index 0000000000..209ebc30fd --- /dev/null +++ b/CHANGELOG-collection-dataset-query.md @@ -0,0 +1 @@ +- Get collection datasets from separate search-api query instead of the collection es document. \ No newline at end of file diff --git a/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.jsx b/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.jsx index 92087c20b0..14379aacc0 100644 --- a/context/app/static/js/components/detailPage/CollectionDatasetsTable/CollectionDatasetsTable.jsx +++ b/context/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 ( @@ -31,33 +21,7 @@ function CollectionDatasetsTable({ datasets }) { {datasets.length} Datasets - - - - - {columns.map((column) => ( - {column.label} - ))} - - - - {datasets.map((dataset) => ( - - - - {dataset.hubmap_id} - - - - {dataset.data_types} - {format(dataset.last_modified_timestamp, 'yyyy-MM-dd')} - {dataset.created_by_user_displayname} - {dataset.status} - - ))} - -
- + ); diff --git a/context/app/static/js/components/detailPage/CollectionDatasetsTable/hooks.js b/context/app/static/js/components/detailPage/CollectionDatasetsTable/hooks.js new file mode 100644 index 0000000000..276a2d828d --- /dev/null +++ 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 deleted file mode 100644 index 8637a2d6be..0000000000 --- a/context/app/static/js/components/detailPage/CollectionDatasetsTable/style.js +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; -import Link from '@material-ui/core/Link'; - -const StyledLink = styled(Link)` - color: ${(props) => props.theme.palette.info.main}; -`; - -export { StyledLink }; diff --git a/context/app/static/js/components/detailPage/derivedEntities/columns.js b/context/app/static/js/components/detailPage/derivedEntities/columns.js index 6bf1ba0072..4b73b35904 100644 --- 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 index 83a93284f4..9b97af08b6 100644 --- 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 index 4521439fcd..130f796767 100644 --- 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 };