From 068fac2c0fb75347e90fff7fc926d08b1c0755e4 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Thu, 26 Sep 2024 18:02:20 -0400 Subject: [PATCH 1/6] position button --- .../js/components/searchPage/MetadataMenu/style.tsx | 1 + .../js/components/searchPage/TilesSortDropdown/style.ts | 7 ++++--- .../dropdowns/DropdownListbox/DropdownListbox.tsx | 9 ++++++--- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/context/app/static/js/components/searchPage/MetadataMenu/style.tsx b/context/app/static/js/components/searchPage/MetadataMenu/style.tsx index d06da3be20..087af7a678 100644 --- a/context/app/static/js/components/searchPage/MetadataMenu/style.tsx +++ b/context/app/static/js/components/searchPage/MetadataMenu/style.tsx @@ -10,6 +10,7 @@ import Stack from '@mui/material/Stack'; const StyledDropdownMenuButton = styled(DropdownMenuButton)(({ theme }) => ({ margin: theme.spacing(0, 1), + height: theme.spacing(5), })); const StyledInfoIcon = styled(InfoIcon)(({ theme }) => ({ diff --git a/context/app/static/js/components/searchPage/TilesSortDropdown/style.ts b/context/app/static/js/components/searchPage/TilesSortDropdown/style.ts index fa5f9d95b3..2b38490a48 100644 --- a/context/app/static/js/components/searchPage/TilesSortDropdown/style.ts +++ b/context/app/static/js/components/searchPage/TilesSortDropdown/style.ts @@ -8,11 +8,12 @@ interface StyledButtonProps { // must use display: none instead of conditional rendering to preserve sort history between views const StyledButton = styled(Button)(({ theme, $searchView }) => ({ - marginLeft: theme.spacing(1), - color: 'white', + margin: theme.spacing(0, 1), height: theme.spacing(5), - marginRight: theme.spacing(1), borderRadius: theme.spacing(0.5), + alignItems: 'center', + justifyContent: 'center', + color: 'white', width: '185px', display: $searchView === 'table' ? 'none' : 'block', })); diff --git a/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx b/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx index e58269fe40..6f8e395b7b 100644 --- a/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx +++ b/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx @@ -3,7 +3,8 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDownRounded'; import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUpRounded'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import MenuList from '@mui/material/MenuList'; - +import Typography from '@mui/material/Typography'; +import Stack from '@mui/material/Stack'; import { StyledPopper, StyledPaper } from './style'; interface DropdownListboxProps { @@ -47,8 +48,10 @@ function DropdownListbox({ onClick={() => setIsOpen(true)} {...buttonProps} > - {getOptionLabel(options[selectedOptionIndex])} - {isOpen ? : } + + {getOptionLabel(options[selectedOptionIndex])} + {isOpen ? : } + From bb012c36ad9482f1f0eed0a8229ef3642e8d8d28 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Fri, 27 Sep 2024 10:54:27 -0400 Subject: [PATCH 2/6] add changelog --- CHANGELOG-unified-views-fixes.md | 1 + .../dropdowns/DropdownListbox/DropdownListbox.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 CHANGELOG-unified-views-fixes.md diff --git a/CHANGELOG-unified-views-fixes.md b/CHANGELOG-unified-views-fixes.md new file mode 100644 index 0000000000..5a5ed4a93d --- /dev/null +++ b/CHANGELOG-unified-views-fixes.md @@ -0,0 +1 @@ +- Fix positioning of dropdown order menu on the tile view of the search page. \ No newline at end of file diff --git a/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx b/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx index 6f8e395b7b..6306562726 100644 --- a/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx +++ b/context/app/static/js/shared-styles/dropdowns/DropdownListbox/DropdownListbox.tsx @@ -48,8 +48,10 @@ function DropdownListbox({ onClick={() => setIsOpen(true)} {...buttonProps} > - - {getOptionLabel(options[selectedOptionIndex])} + + + {getOptionLabel(options[selectedOptionIndex])} + {isOpen ? : } From ad02af93ee13834abae46b35f9782fe4b905c59f Mon Sep 17 00:00:00 2001 From: Austen Money Date: Fri, 27 Sep 2024 11:16:02 -0400 Subject: [PATCH 3/6] update changelog --- CHANGELOG-unified-views-fixes.md | 3 ++- .../detailPage/ProcessedData/ProcessedDataset/hooks.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG-unified-views-fixes.md b/CHANGELOG-unified-views-fixes.md index 5a5ed4a93d..14b74342c0 100644 --- a/CHANGELOG-unified-views-fixes.md +++ b/CHANGELOG-unified-views-fixes.md @@ -1 +1,2 @@ -- Fix positioning of dropdown order menu on the tile view of the search page. \ No newline at end of file +- Fix positioning of dropdown order menu on the tile view of the search page. +- Fix tabs moving around in bulk data transfer section on detail pages. \ No newline at end of file diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts index 85ca753803..161ec0fde8 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts +++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts @@ -97,7 +97,7 @@ export function useProcessedDatasetTabs(): { label: string; uuid: string; icon: // Include dataset status in the label if more than one processed dataset of this type exists. // This allows us to distinguish between published datasets and QA/New/other statuses. - const processedDatasetTabs = searchHits + const processedDatasetTabs = [...searchHits] // Prioritize published datasets .sort((a, b) => { if (a._source.status === 'Published') { From 682d217b749bc9cec784e18440d166421caaea89 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Fri, 27 Sep 2024 14:03:20 -0400 Subject: [PATCH 4/6] update homepage --- CHANGELOG-unified-views-fixes.md | 3 ++- context/app/static/js/components/home/Hero/const.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG-unified-views-fixes.md b/CHANGELOG-unified-views-fixes.md index 14b74342c0..5bab7246eb 100644 --- a/CHANGELOG-unified-views-fixes.md +++ b/CHANGELOG-unified-views-fixes.md @@ -1,2 +1,3 @@ - Fix positioning of dropdown order menu on the tile view of the search page. -- Fix tabs moving around in bulk data transfer section on detail pages. \ No newline at end of file +- Fix tabs moving around in bulk data transfer section on detail pages. +- Update unified datasets link in "What’s New" section on homepage to point to an example dataset detail page. \ No newline at end of file diff --git a/context/app/static/js/components/home/Hero/const.tsx b/context/app/static/js/components/home/Hero/const.tsx index 564fcabad6..139bfb15ab 100644 --- a/context/app/static/js/components/home/Hero/const.tsx +++ b/context/app/static/js/components/home/Hero/const.tsx @@ -15,7 +15,7 @@ const timelineIconProps = { export const HOME_TIMELINE_ITEMS: TimelineData[] = [ { title: 'Raw & Processed Unified Datasets Page', - titleHref: '/search?entity_type[0]=Dataset', + titleHref: '/browse/dataset/8690897fced9931da34d66d669c1d698', description: 'Dataset page design has been updated to display both raw and processed data on the same page, enhancing the understanding of relationships between datasets.', date: 'August 2024', From 3d12dd59154cbfa2b5921322708560ddd980a4b0 Mon Sep 17 00:00:00 2001 From: Austen Money Date: Mon, 30 Sep 2024 10:16:38 -0400 Subject: [PATCH 5/6] fix entity header summary view --- .../EntityHeader/EntityHeader.tsx | 30 ++++++++++++++----- .../entityHeader/EntityHeader/hooks.ts | 17 ++++++----- .../app/static/js/stores/useEntityStore.ts | 4 +++ 3 files changed, 36 insertions(+), 15 deletions(-) diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeader/EntityHeader.tsx b/context/app/static/js/components/detailPage/entityHeader/EntityHeader/EntityHeader.tsx index 91b141699e..28089230fd 100644 --- a/context/app/static/js/components/detailPage/entityHeader/EntityHeader/EntityHeader.tsx +++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeader/EntityHeader.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; import { animated } from '@react-spring/web'; import Box from '@mui/material/Box'; @@ -19,22 +19,36 @@ const visualizationSelector = (state: VisualizationStore) => ({ }); function Header() { - const { springs, view, setView } = useEntityStore(); + const { springs, view, setView, summaryHeight, setSummaryHeight } = useEntityStore(); const startViewChangeSpring = useStartViewChangeSpring(); const isLargeDesktop = useIsLargeDesktop(); const { vizIsFullscreen } = useVisualizationStore(visualizationSelector); + const { entity } = useFlaskDataContext(); + const uuid = entity?.uuid; + + const summaryBodyRef = useRef(null); + const handleViewChange = useCallback( (v: SummaryViewsType) => { setView(v); - startViewChangeSpring(v); + + // Delay height ref calculation to allow DOM to fully render + setTimeout(() => { + if (summaryBodyRef.current) { + const newHeight = summaryBodyRef.current.offsetHeight; + setSummaryHeight(newHeight); + } + }, 0); }, - [startViewChangeSpring, setView], + [setView, setSummaryHeight], ); - const { entity } = useFlaskDataContext(); - - const uuid = entity?.uuid; + useEffect(() => { + if (summaryHeight !== 0) { + startViewChangeSpring(view); + } + }, [summaryHeight, view, startViewChangeSpring]); useEffect(() => { if (vizIsFullscreen) { @@ -53,7 +67,7 @@ function Header() { {isLargeDesktop && ( - + {view === 'diagram' && uuid && } {view === 'summary' && } diff --git a/context/app/static/js/components/detailPage/entityHeader/EntityHeader/hooks.ts b/context/app/static/js/components/detailPage/entityHeader/EntityHeader/hooks.ts index d4caafa04d..39686b6de0 100644 --- a/context/app/static/js/components/detailPage/entityHeader/EntityHeader/hooks.ts +++ b/context/app/static/js/components/detailPage/entityHeader/EntityHeader/hooks.ts @@ -10,14 +10,15 @@ export const initialHeaderOffset = headerHeight + 16; const expandedHeights = { diagram: 300, - summary: 150, + summary: 'fit-content', narrow: 0, }; function useTotalHeaderOffset() { - const { view } = useEntityStore(); + const { view, summaryHeight } = useEntityStore(); + const contentHeight = view === 'summary' ? summaryHeight : expandedHeights[view]; - return expandedHeights[view] + initialEntityHeaderHeight + headerHeight; + return contentHeight + initialEntityHeaderHeight + headerHeight; } function useEntityHeaderSprings() { @@ -39,25 +40,27 @@ function useEntityHeaderSprings() { } function useStartViewChangeSpring() { - const { springs } = useEntityStore(); + const { springs, summaryHeight } = useEntityStore(); const [, springAPIs] = springs; return useCallback( (view: SummaryViewsType) => { const isExpanded = view !== 'narrow'; + const contentHeight = view === 'summary' ? summaryHeight : expandedHeights[view]; + async function startSprings() { await Promise.all( springAPIs.start((springIndex: number) => { if (springIndex === 0) { return { - height: isExpanded ? expandedHeights[view] + initialEntityHeaderHeight : initialEntityHeaderHeight, + height: isExpanded ? contentHeight + initialEntityHeaderHeight : initialEntityHeaderHeight, }; } if (springIndex === 1) { return { top: isExpanded - ? initialHeaderOffset + expandedHeights[view] + initialEntityHeaderHeight + ? contentHeight + initialEntityHeaderHeight + initialHeaderOffset : initialHeaderOffset + initialEntityHeaderHeight, }; } @@ -68,7 +71,7 @@ function useStartViewChangeSpring() { } startSprings().catch((e) => console.error(e)); }, - [springAPIs], + [springAPIs, summaryHeight], ); } diff --git a/context/app/static/js/stores/useEntityStore.ts b/context/app/static/js/stores/useEntityStore.ts index ae52388b02..654ec16691 100644 --- a/context/app/static/js/stores/useEntityStore.ts +++ b/context/app/static/js/stores/useEntityStore.ts @@ -15,6 +15,7 @@ interface EntityStoreState { }; assayMetadata: Partial; shouldDisplaySavedOrEditedAlert: boolean | string; + summaryHeight: number; view: SummaryViewsType; springs: ReturnType; } @@ -23,6 +24,7 @@ interface EntityStoreActions { setSummaryComponentObserver: (inView: boolean, entry: IntersectionObserverEntry) => void; setAssayMetadata: (val: Partial) => void; setShouldDisplaySavedOrEditedAlert: (val: boolean | string) => void; + setSummaryHeight: (val: number) => void; setView: (val: SummaryViewsType) => void; } @@ -41,6 +43,8 @@ export const createEntityStore = ({ springs }: { springs: ReturnType set({ summaryHeight: val }), view: 'narrow' as const, setView: (val) => set({ view: val }), springs, From a1b9f0d15fdb4d8a5660b3248e1f294301bde0bd Mon Sep 17 00:00:00 2001 From: Austen Money Date: Mon, 30 Sep 2024 10:17:58 -0400 Subject: [PATCH 6/6] update changelog --- ...unified-views-fixes.md => CHANGELOG-many-minor-bug-fixes.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) rename CHANGELOG-unified-views-fixes.md => CHANGELOG-many-minor-bug-fixes.md (59%) diff --git a/CHANGELOG-unified-views-fixes.md b/CHANGELOG-many-minor-bug-fixes.md similarity index 59% rename from CHANGELOG-unified-views-fixes.md rename to CHANGELOG-many-minor-bug-fixes.md index 5bab7246eb..3c410e70ea 100644 --- a/CHANGELOG-unified-views-fixes.md +++ b/CHANGELOG-many-minor-bug-fixes.md @@ -1,3 +1,4 @@ - Fix positioning of dropdown order menu on the tile view of the search page. - Fix tabs moving around in bulk data transfer section on detail pages. -- Update unified datasets link in "What’s New" section on homepage to point to an example dataset detail page. \ No newline at end of file +- Update unified datasets link in "What’s New" section on homepage to point to an example dataset detail page. +- Adjust size of "summary" view in entity headers dynamically based on the length of the content. \ No newline at end of file