From d84bdd661b41a954e279eac38a26b235b366c3ba Mon Sep 17 00:00:00 2001 From: John Conroy Date: Fri, 24 Feb 2023 17:10:03 -0500 Subject: [PATCH 01/13] Refactor panel component --- .../js/shared-styles/panels/Panel/Panel.jsx | 21 +++++++++++++++++++ .../panels/Panel/Panel.stories.js | 16 ++++++++++++++ .../js/shared-styles/panels/Panel/index.js | 3 +++ 3 files changed, 40 insertions(+) create mode 100644 context/app/static/js/shared-styles/panels/Panel/Panel.jsx create mode 100644 context/app/static/js/shared-styles/panels/Panel/Panel.stories.js create mode 100644 context/app/static/js/shared-styles/panels/Panel/index.js diff --git a/context/app/static/js/shared-styles/panels/Panel/Panel.jsx b/context/app/static/js/shared-styles/panels/Panel/Panel.jsx new file mode 100644 index 0000000000..a15e9bc306 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/Panel/Panel.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { PanelBox, LeftTextWrapper, TruncatedLink, TruncatedText, RightTextWrapper } from './style'; + +function Panel({ title, href, secondaryText, rightText }) { + return ( + + + + {title} + + + {secondaryText} + + + {rightText} + + ); +} + +export default Panel; diff --git a/context/app/static/js/shared-styles/panels/Panel/Panel.stories.js b/context/app/static/js/shared-styles/panels/Panel/Panel.stories.js new file mode 100644 index 0000000000..ada0f38a4c --- /dev/null +++ b/context/app/static/js/shared-styles/panels/Panel/Panel.stories.js @@ -0,0 +1,16 @@ +import React from 'react'; + +import PanelComponent from './Panel'; + +export default { + title: 'Panels/Panel', + component: PanelComponent, +}; + +export const Panel = (args) => ; +Panel.args = { + title: 'Title', + secondaryText: 'Secondary Text', + rightText: 'Right Text', +}; +Panel.storyName = 'Panel'; // needed for single story hoisting for multi word component names diff --git a/context/app/static/js/shared-styles/panels/Panel/index.js b/context/app/static/js/shared-styles/panels/Panel/index.js new file mode 100644 index 0000000000..8858185a4d --- /dev/null +++ b/context/app/static/js/shared-styles/panels/Panel/index.js @@ -0,0 +1,3 @@ +import Panel from './Panel'; + +export default Panel; From 7b5487e675bce89554e619eefcfad5b06bf861ff Mon Sep 17 00:00:00 2001 From: John Conroy Date: Fri, 24 Feb 2023 17:10:27 -0500 Subject: [PATCH 02/13] Use refactored panel in collections panel list --- .../CollectionsPanelList/CollectionsPanelList.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx b/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx index b96c116961..3da020b81a 100644 --- a/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx +++ b/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx @@ -1,6 +1,8 @@ import React from 'react'; +import Typography from '@material-ui/core/Typography'; -import { Panel, PanelScrollBox } from 'js/shared-styles/panels'; +import { PanelScrollBox } from 'js/shared-styles/panels'; +import Panel from 'js/shared-styles/panels/Panel'; function CollectionsPanelList({ collectionsData }) { return ( @@ -10,8 +12,8 @@ function CollectionsPanelList({ collectionsData }) { key={_source.uuid} href={`/browse/collection/${_source.uuid}`} title={_source.title} - entityCounts={{ datasets: _source.datasets.length }} secondaryText={_source.hubmap_id} + rightText={{`${_source.datasets.length} Datasets`}} /> ))} From fe6afe273950bfe519c09bf63d573e20f9418027 Mon Sep 17 00:00:00 2001 From: John Conroy Date: Fri, 24 Feb 2023 17:41:59 -0500 Subject: [PATCH 03/13] Add reusable panel list component --- .../panels/PanelList/PanelList.jsx | 16 +++++++++++++++ .../panels/PanelList/PanelList.stories.js | 20 +++++++++++++++++++ .../shared-styles/panels/PanelList/index.js | 3 +++ .../shared-styles/panels/PanelList/style.js | 12 +++++++++++ 4 files changed, 51 insertions(+) create mode 100644 context/app/static/js/shared-styles/panels/PanelList/PanelList.jsx create mode 100644 context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js create mode 100644 context/app/static/js/shared-styles/panels/PanelList/index.js create mode 100644 context/app/static/js/shared-styles/panels/PanelList/style.js diff --git a/context/app/static/js/shared-styles/panels/PanelList/PanelList.jsx b/context/app/static/js/shared-styles/panels/PanelList/PanelList.jsx new file mode 100644 index 0000000000..946580a093 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelList/PanelList.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import Panel from 'js/shared-styles/panels/Panel'; +import { PanelScrollBox } from './style'; + +function PanelList({ panelsProps }) { + return ( + + {panelsProps.map((props) => ( + + ))} + + ); +} + +export default PanelList; diff --git a/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js b/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js new file mode 100644 index 0000000000..10ea8da7d3 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js @@ -0,0 +1,20 @@ +import React from 'react'; + +import Panel from 'js/shared-styles/panels/Panel'; +import PanelListComponent from './PanelList'; + +export default { + title: 'Panels/Panel', + component: PanelListComponent, + subcomponents: { Panel }, +}; + +export const PanelList = (args) => ; +PanelList.args = { + panelsProps: [0, 1, 2, 3, 4].map((item, i) => ({ + title: `Title ${i}`, + secondaryText: `Secondary Text ${i}`, + rightText: `Right Text ${i}`, + })), +}; +PanelList.storyName = 'PanelList'; // needed for single story hoisting for multi word component names diff --git a/context/app/static/js/shared-styles/panels/PanelList/index.js b/context/app/static/js/shared-styles/panels/PanelList/index.js new file mode 100644 index 0000000000..f43f081dc7 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelList/index.js @@ -0,0 +1,3 @@ +import PanelList from './PanelList'; + +export default PanelList; diff --git a/context/app/static/js/shared-styles/panels/PanelList/style.js b/context/app/static/js/shared-styles/panels/PanelList/style.js new file mode 100644 index 0000000000..352d80b0e4 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelList/style.js @@ -0,0 +1,12 @@ +import styled from 'styled-components'; +import Paper from '@material-ui/core/Paper'; + +const PanelScrollBox = styled(Paper)` + @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) { + flex-grow: 1; + overflow-y: scroll; + margin-top: ${(props) => props.theme.spacing(1)}px; + } +`; + +export { PanelScrollBox }; From 2add0c1a1b2c26ac44a7d181bb549c47db72724d Mon Sep 17 00:00:00 2001 From: John Conroy Date: Fri, 24 Feb 2023 17:42:33 -0500 Subject: [PATCH 04/13] Add panel styles --- .../js/shared-styles/panels/Panel/style.js | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 context/app/static/js/shared-styles/panels/Panel/style.js diff --git a/context/app/static/js/shared-styles/panels/Panel/style.js b/context/app/static/js/shared-styles/panels/Panel/style.js new file mode 100644 index 0000000000..0b89c5e0d9 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/Panel/style.js @@ -0,0 +1,47 @@ +import styled, { css } from 'styled-components'; +import Typography from '@material-ui/core/Typography'; + +import { LightBlueLink } from 'js/shared-styles/Links'; + +const overflowCss = css` + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +`; + +const PanelBox = styled.div` + padding: 15px 20px; + border-bottom: 1px solid ${(props) => props.theme.palette.divider}; + display: flex; + flex-direction: column; + + &:hover { + background-color: ${(props) => props.theme.palette.hoverShadow.main}; + } + @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) { + flex-direction: row; + justify-content: space-between; + } +`; + +const LeftTextWrapper = styled.div` + white-space: nowrap; + min-width: 0px; // needed to handle overflow + margin-right: ${(props) => props.theme.spacing(1)}px; +`; + +const TruncatedText = styled(Typography)` + ${overflowCss}; +`; + +const TruncatedLink = styled(LightBlueLink)` + ${overflowCss}; + display: block; //text-overflow only applies to block elements +`; + +const RightTextWrapper = styled.div` + flex-shrink: 0; + padding-left: ${(props) => props.theme.spacing(0.5)}px; +`; + +export { PanelBox, LeftTextWrapper, TruncatedText, TruncatedLink, RightTextWrapper }; From eca342015b3c46a8c9888892bb03f7b75f7bb1c6 Mon Sep 17 00:00:00 2001 From: John Conroy Date: Fri, 24 Feb 2023 17:42:58 -0500 Subject: [PATCH 05/13] Use panel list for collections panel list --- .../CollectionsPanelList.jsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx b/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx index 3da020b81a..805650cfe0 100644 --- a/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx +++ b/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx @@ -1,23 +1,18 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import { PanelScrollBox } from 'js/shared-styles/panels'; -import Panel from 'js/shared-styles/panels/Panel'; +import PanelList from 'js/shared-styles/panels/PanelList'; function CollectionsPanelList({ collectionsData }) { - return ( - - {collectionsData.map(({ _source }) => ( - {`${_source.datasets.length} Datasets`}} - /> - ))} - - ); + const panelsProps = collectionsData.map(({ _source }) => ({ + key: _source.uuid, + href: `/browse/collection/${_source.uuid}`, + title: _source.title, + secondaryText: _source.hubmap_id, + rightText: {`${_source.datasets.length} Datasets`}, + })); + + return ; } export default CollectionsPanelList; From 345d822f483ae56170913a6b1c6ca4427fc5f85d Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 10:29:26 -0500 Subject: [PATCH 06/13] Update panel list stories --- .../js/shared-styles/panels/PanelList/PanelList.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js b/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js index 10ea8da7d3..bf012026db 100644 --- a/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js +++ b/context/app/static/js/shared-styles/panels/PanelList/PanelList.stories.js @@ -4,14 +4,14 @@ import Panel from 'js/shared-styles/panels/Panel'; import PanelListComponent from './PanelList'; export default { - title: 'Panels/Panel', + title: 'Panels/PanelList', component: PanelListComponent, subcomponents: { Panel }, }; export const PanelList = (args) => ; PanelList.args = { - panelsProps: [0, 1, 2, 3, 4].map((item, i) => ({ + panelsProps: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item, i) => ({ title: `Title ${i}`, secondaryText: `Secondary Text ${i}`, rightText: `Right Text ${i}`, From eaefced22e30446d5f4eb213dd55495bdc15550e Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 10:35:31 -0500 Subject: [PATCH 07/13] Add panel list landing page --- .../PanelListLandingPage.jsx | 22 +++++++++++++++++++ .../panels/PanelListLandingPage/index.js | 3 +++ .../panels/PanelListLandingPage/style.js | 20 +++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.jsx create mode 100644 context/app/static/js/shared-styles/panels/PanelListLandingPage/index.js create mode 100644 context/app/static/js/shared-styles/panels/PanelListLandingPage/style.js diff --git a/context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.jsx b/context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.jsx new file mode 100644 index 0000000000..7140765fe0 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; + +import PanelList from 'js/shared-styles/panels/PanelList'; +import { PageWrapper, StyledDescription } from './style'; + +function PanelListLandingPage({ title, subtitle, description, panelsProps }) { + return ( + + + {title} + + + {subtitle} + + {description} + {panelsProps.length > 0 && } + + ); +} + +export default PanelListLandingPage; diff --git a/context/app/static/js/shared-styles/panels/PanelListLandingPage/index.js b/context/app/static/js/shared-styles/panels/PanelListLandingPage/index.js new file mode 100644 index 0000000000..36e0b75e15 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelListLandingPage/index.js @@ -0,0 +1,3 @@ +import PanelListLandingPage from './PanelListLandingPage'; + +export default PanelListLandingPage; diff --git a/context/app/static/js/shared-styles/panels/PanelListLandingPage/style.js b/context/app/static/js/shared-styles/panels/PanelListLandingPage/style.js new file mode 100644 index 0000000000..ba1cc29588 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelListLandingPage/style.js @@ -0,0 +1,20 @@ +import styled from 'styled-components'; + +import Description from 'js/shared-styles/sections/Description'; +import { headerHeight } from 'js/components/Header/HeaderAppBar/style'; + +// 88px = header height + header margin +const PageWrapper = styled.div` + margin-bottom: ${(props) => props.theme.spacing(5)}px; + @media (min-width: ${(props) => props.theme.breakpoints.values.md}px) { + height: calc(100vh - ${headerHeight + 24}px); + display: flex; + flex-direction: column; + } +`; + +const StyledDescription = styled(Description)` + margin-bottom: ${(props) => props.theme.spacing(2)}px; +`; + +export { PageWrapper, StyledDescription }; From 342ace73c7649e8550354c8d88fb629b08d7ca30 Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 10:35:56 -0500 Subject: [PATCH 08/13] Add panel list landing page story --- .../PanelListLandingPage.stories.js | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.stories.js diff --git a/context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.stories.js b/context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.stories.js new file mode 100644 index 0000000000..65a62bf314 --- /dev/null +++ b/context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.stories.js @@ -0,0 +1,26 @@ +import React from 'react'; + +import Panel from 'js/shared-styles/panels/Panel'; +import PanelList from 'js/shared-styles/panels/PanelList'; +import { PanelList as PanelListStory } from 'js/shared-styles/panels/PanelList/PanelList.stories'; +import PanelListLandingPageComponent from './PanelListLandingPage'; + +export default { + title: 'Panels/PanelListLandingPage', + component: PanelListLandingPageComponent, + subcomponents: [PanelList, Panel], +}; + +const lorem = + 'Fugiat irure nisi ea dolore non adipisicing non. Enim enim incididunt ut reprehenderit esse sint adipisicing. Aliqua excepteur reprehenderit tempor commodo anim veniam laboris labore exercitation qui. Adipisicing pariatur est anim nisi cupidatat ea Lorem nostrud labore laborum enim eiusmod.'; + +export const PanelListLandingPage = (args) => ; + +PanelListLandingPage.args = { + title: 'Landing Page Title', + subtitle: 'Landing Page Subtitle', + description: lorem, + panelsProps: PanelListStory.args.panelsProps, +}; + +PanelListLandingPage.storyName = 'PanelListLandingPage'; // needed for single story hoisting for multi word component names From 801ccf654f32b4c9aecf4ae903b4d8c7a6dac2f4 Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 10:58:11 -0500 Subject: [PATCH 09/13] Use panel list landing page in collections --- .../js/pages/Collections/Collections.jsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/context/app/static/js/pages/Collections/Collections.jsx b/context/app/static/js/pages/Collections/Collections.jsx index 1e933ba177..a09a7e5d33 100644 --- a/context/app/static/js/pages/Collections/Collections.jsx +++ b/context/app/static/js/pages/Collections/Collections.jsx @@ -1,29 +1,31 @@ import React from 'react'; import Typography from '@material-ui/core/Typography'; -import CollectionsPanelList from 'js/components/CollectionsPanelList'; import { useSearchHits } from 'js/hooks/useSearchData'; import { getAllCollectionsQuery } from 'js/helpers/queries'; -import { PageWrapper, StyledDescription } from './style'; +import PanelListLandingPage from 'js/shared-styles/panels/PanelListLandingPage'; + +const description = + 'Collections of HuBMAP datasets represent data from related experiments—such as assays performed on the same organ—or data that has been grouped for other reasons. In the future, it will be possible to reference collections through Document Object Identifiers (DOIs).'; function Collections() { const { searchHits: collectionsData } = useSearchHits(getAllCollectionsQuery); + const panelsProps = collectionsData.map(({ _source }) => ({ + key: _source.uuid, + href: `/browse/collection/${_source.uuid}`, + title: _source.title, + secondaryText: _source.hubmap_id, + rightText: {`${_source.datasets.length} Datasets`}, + })); + return ( - - - Collections - - - {collectionsData.length > 0 && `${collectionsData.length} Collections`} - - - Collections of HuBMAP datasets represent data from related experiments—such as assays performed on the same - organ—or data that has been grouped for other reasons. In the future, it will be possible to reference - collections through Document Object Identifiers (DOIs). - - {collectionsData.length > 0 && } - + 0 && `${collectionsData.length} Collections`} + description={description} + panelsProps={panelsProps} + /> ); } From d92218f2ead0cc02cd3505866e689476ef9b388e Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 10:58:50 -0500 Subject: [PATCH 10/13] Pull collections panels funcs into util and hook --- .../static/js/pages/Collections/Collections.jsx | 17 +++-------------- .../app/static/js/pages/Collections/hooks.js | 10 ++++++++++ .../app/static/js/pages/Collections/utils.js | 14 ++++++++++++++ 3 files changed, 27 insertions(+), 14 deletions(-) create mode 100644 context/app/static/js/pages/Collections/hooks.js create mode 100644 context/app/static/js/pages/Collections/utils.js diff --git a/context/app/static/js/pages/Collections/Collections.jsx b/context/app/static/js/pages/Collections/Collections.jsx index a09a7e5d33..28a5aceb5b 100644 --- a/context/app/static/js/pages/Collections/Collections.jsx +++ b/context/app/static/js/pages/Collections/Collections.jsx @@ -1,28 +1,17 @@ import React from 'react'; -import Typography from '@material-ui/core/Typography'; -import { useSearchHits } from 'js/hooks/useSearchData'; -import { getAllCollectionsQuery } from 'js/helpers/queries'; import PanelListLandingPage from 'js/shared-styles/panels/PanelListLandingPage'; +import { useCollections } from './hooks'; const description = 'Collections of HuBMAP datasets represent data from related experiments—such as assays performed on the same organ—or data that has been grouped for other reasons. In the future, it will be possible to reference collections through Document Object Identifiers (DOIs).'; function Collections() { - const { searchHits: collectionsData } = useSearchHits(getAllCollectionsQuery); - - const panelsProps = collectionsData.map(({ _source }) => ({ - key: _source.uuid, - href: `/browse/collection/${_source.uuid}`, - title: _source.title, - secondaryText: _source.hubmap_id, - rightText: {`${_source.datasets.length} Datasets`}, - })); - + const panelsProps = useCollections(); return ( 0 && `${collectionsData.length} Collections`} + subtitle={panelsProps.length > 0 && `${panelsProps.length} Collections`} description={description} panelsProps={panelsProps} /> diff --git a/context/app/static/js/pages/Collections/hooks.js b/context/app/static/js/pages/Collections/hooks.js new file mode 100644 index 0000000000..5c0b9515ea --- /dev/null +++ b/context/app/static/js/pages/Collections/hooks.js @@ -0,0 +1,10 @@ +import { useSearchHits } from 'js/hooks/useSearchData'; +import { getAllCollectionsQuery } from 'js/helpers/queries'; +import { buildCollectionsPanelsProps } from './utils'; + +function useCollections() { + const { searchHits: collectionsData } = useSearchHits(getAllCollectionsQuery); + return buildCollectionsPanelsProps(collectionsData); +} + +export { useCollections }; diff --git a/context/app/static/js/pages/Collections/utils.js b/context/app/static/js/pages/Collections/utils.js new file mode 100644 index 0000000000..39b195cfd2 --- /dev/null +++ b/context/app/static/js/pages/Collections/utils.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Typography from '@material-ui/core/Typography'; + +function buildCollectionsPanelsProps(collections) { + return collections.map(({ _source }) => ({ + key: _source.uuid, + href: `/browse/collection/${_source.uuid}`, + title: _source.title, + secondaryText: _source.hubmap_id, + rightText: {`${_source.datasets.length} Datasets`}, + })); +} + +export { buildCollectionsPanelsProps }; From 75a1ddf58989d85da2a825ea3af01b5a22e6f945 Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 11:17:08 -0500 Subject: [PATCH 11/13] Consolidate collections hooks on dataset page --- context/app/static/js/pages/Dataset/Dataset.jsx | 9 ++++----- context/app/static/js/pages/Dataset/hooks.js | 11 +++++++++++ context/app/static/js/pages/Dataset/utils.js | 8 ++++++++ context/app/static/js/pages/utils/entity-utils.js | 10 +--------- 4 files changed, 24 insertions(+), 14 deletions(-) create mode 100644 context/app/static/js/pages/Dataset/hooks.js create mode 100644 context/app/static/js/pages/Dataset/utils.js diff --git a/context/app/static/js/pages/Dataset/Dataset.jsx b/context/app/static/js/pages/Dataset/Dataset.jsx index ae1f0cb4e3..f7ca6a6992 100644 --- a/context/app/static/js/pages/Dataset/Dataset.jsx +++ b/context/app/static/js/pages/Dataset/Dataset.jsx @@ -18,8 +18,7 @@ import useEntityStore from 'js/stores/useEntityStore'; import CollectionsSection from 'js/components/detailPage/CollectionsSection'; import SupportAlert from 'js/components/detailPage/SupportAlert'; import { DetailPageAlert } from 'js/components/detailPage/style'; -import { useSearchHits } from 'js/hooks/useSearchData'; -import { getAllCollectionsQuery } from 'js/helpers/queries'; + import { ReactComponent as WorkspacesIcon } from 'assets/svg/workspaces.svg'; import { WhiteBackgroundIconButton } from 'js/shared-styles/buttons'; import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; @@ -28,8 +27,9 @@ import DetailContext from 'js/components/detailPage/context'; import { getSectionOrder } from 'js/components/detailPage/utils'; import CreateWorkspaceDialog from 'js/components/workspaces/CreateWorkspaceDialog'; -import { combineMetadata, getCollectionsWhichContainDataset } from 'js/pages/utils/entity-utils'; +import { combineMetadata } from 'js/pages/utils/entity-utils'; import OutboundIconLink from 'js/shared-styles/Links/iconLinks/OutboundIconLink'; +import { useDatasetCollections } from './hooks'; function NotebookButton(props) { return ( @@ -142,8 +142,7 @@ function DatasetDetail({ assayMetadata, vitData, hasNotebook, visLiftedUUID }) { const combinedMetadata = combineMetadata(donor, origin_sample, source_sample, metadata); - const { searchHits: allCollections } = useSearchHits(getAllCollectionsQuery); - const collectionsData = getCollectionsWhichContainDataset(uuid, allCollections); + const collectionsData = useDatasetCollections(uuid); const shouldDisplaySection = { provenance: entity_type !== 'Support', diff --git a/context/app/static/js/pages/Dataset/hooks.js b/context/app/static/js/pages/Dataset/hooks.js new file mode 100644 index 0000000000..9e8fe3ad9e --- /dev/null +++ b/context/app/static/js/pages/Dataset/hooks.js @@ -0,0 +1,11 @@ +import { useSearchHits } from 'js/hooks/useSearchData'; +import { getAllCollectionsQuery } from 'js/helpers/queries'; + +import { getCollectionsWhichContainDataset } from './utils'; + +function useDatasetCollections(uuid) { + const { searchHits: collections } = useSearchHits(getAllCollectionsQuery); + return getCollectionsWhichContainDataset(uuid, collections); +} + +export { useDatasetCollections }; diff --git a/context/app/static/js/pages/Dataset/utils.js b/context/app/static/js/pages/Dataset/utils.js new file mode 100644 index 0000000000..11a1a8b450 --- /dev/null +++ b/context/app/static/js/pages/Dataset/utils.js @@ -0,0 +1,8 @@ +function getCollectionsWhichContainDataset(uuid, collections) { + return collections.filter((collection) => { + // eslint-disable-next-line no-underscore-dangle + return collection._source.datasets.some((dataset) => dataset.uuid === uuid); + }); +} + +export { getCollectionsWhichContainDataset }; diff --git a/context/app/static/js/pages/utils/entity-utils.js b/context/app/static/js/pages/utils/entity-utils.js index 1cff7c0dae..7ee0db7cda 100644 --- a/context/app/static/js/pages/utils/entity-utils.js +++ b/context/app/static/js/pages/utils/entity-utils.js @@ -23,12 +23,4 @@ function combineMetadata(donor, origin_sample, source_sample, metadata) { return combinedMetadata; } - -function getCollectionsWhichContainDataset(uuid, collections) { - return collections.filter((collection) => { - // eslint-disable-next-line no-underscore-dangle - return collection._source.datasets.some((dataset) => dataset.uuid === uuid); - }); -} - -export { combineMetadata, getCollectionsWhichContainDataset }; +export { combineMetadata }; From 1ae2fb4aa59d142e6aba2a3db83e35be1b9f4b7a Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 11:19:46 -0500 Subject: [PATCH 12/13] Use panel list in collections section on dataset pages --- .../CollectionsPanelList.jsx | 18 ------------------ .../components/CollectionsPanelList/index.js | 3 --- .../CollectionsSection/CollectionsSection.jsx | 7 +++++-- 3 files changed, 5 insertions(+), 23 deletions(-) delete mode 100644 context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx delete mode 100644 context/app/static/js/components/CollectionsPanelList/index.js diff --git a/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx b/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx deleted file mode 100644 index 805650cfe0..0000000000 --- a/context/app/static/js/components/CollectionsPanelList/CollectionsPanelList.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Typography from '@material-ui/core/Typography'; - -import PanelList from 'js/shared-styles/panels/PanelList'; - -function CollectionsPanelList({ collectionsData }) { - const panelsProps = collectionsData.map(({ _source }) => ({ - key: _source.uuid, - href: `/browse/collection/${_source.uuid}`, - title: _source.title, - secondaryText: _source.hubmap_id, - rightText: {`${_source.datasets.length} Datasets`}, - })); - - return ; -} - -export default CollectionsPanelList; diff --git a/context/app/static/js/components/CollectionsPanelList/index.js b/context/app/static/js/components/CollectionsPanelList/index.js deleted file mode 100644 index 899ad0a68f..0000000000 --- a/context/app/static/js/components/CollectionsPanelList/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import CollectionsPanelList from './CollectionsPanelList'; - -export default CollectionsPanelList; diff --git a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.jsx b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.jsx index 9879c150ec..e128587e67 100644 --- a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.jsx +++ b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.jsx @@ -2,13 +2,16 @@ import React from 'react'; import SectionHeader from 'js/shared-styles/sections/SectionHeader'; import { DetailPageSection } from 'js/components/detailPage/style'; -import CollectionsPanelList from 'js/components/CollectionsPanelList'; +import { buildCollectionsPanelsProps } from 'js/pages/Collections/utils'; + +import PanelList from 'js/shared-styles/panels/PanelList'; function CollectionsSection({ collectionsData }) { + const panelsProps = buildCollectionsPanelsProps(collectionsData); return ( Collections - + ; ); } From 840302189443e4eb0749a832aea5b7bc88b78f4e Mon Sep 17 00:00:00 2001 From: John Conroy Date: Mon, 27 Feb 2023 11:24:58 -0500 Subject: [PATCH 13/13] Add changelog --- CHANGELOG-panel-list-landing-pages.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 CHANGELOG-panel-list-landing-pages.md diff --git a/CHANGELOG-panel-list-landing-pages.md b/CHANGELOG-panel-list-landing-pages.md new file mode 100644 index 0000000000..846b4626f7 --- /dev/null +++ b/CHANGELOG-panel-list-landing-pages.md @@ -0,0 +1 @@ +- Refactor panel components for reuse in upcoming publication pages. \ No newline at end of file