diff --git a/CHANGELOG-unified-views-fixes.md b/CHANGELOG-unified-views-fixes.md new file mode 100644 index 0000000000..7f9a7e8120 --- /dev/null +++ b/CHANGELOG-unified-views-fixes.md @@ -0,0 +1,10 @@ +- Prevent helper panel overflow from long titles/descriptions. +- Prevent lifting of publication ancillary data on dataset pages. +- Remove excessive margin on section descriptions. +- Indicate disabled state on entity header items. +- Add tooltip to bulk download shortcut link. +- Restore assay graphs for datasets with no defined search terms but with present datasets. +- Remove duplicate HuBMAP ID from bulk data transfer panel links. +- Fix single-tab table styles so the single tab appears selected. +- Add tooltips to unlabeled status icons. +- Remove link from helper panel dataset ID display. diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferPanels.tsx b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferPanels.tsx index e07c4622fc..0174741c6a 100644 --- a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferPanels.tsx +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferPanels.tsx @@ -8,6 +8,7 @@ import NoAccess from './NoAccess'; import { usePanelSet } from './usePanelSet'; import { useStudyURLsQuery } from './hooks'; import GlobusLink from './GlobusLink'; +import { sanitizeLabel } from './utils'; interface BulkDataTransferPanelProps { uuid: string; @@ -26,11 +27,7 @@ function BulkDataTransferPanels({ uuid, label }: BulkDataTransferPanelProps) { const { showDbGaP, showGlobus, showSRA, panels } = panelsToUse; - // This is a logical OR and should remain as such. - // If `showDbGaP` is false, we still want to check if `showGlobus` or `showSRA` are true. - // If we use `??` instead of `||`, the expression would only check if `showDbGaP` is false. - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const hasLinks = Boolean(showDbGaP || showGlobus || showSRA); + const hasLinks = Boolean(showDbGaP ?? showGlobus ?? showSRA); return ( @@ -39,7 +36,7 @@ function BulkDataTransferPanels({ uuid, label }: BulkDataTransferPanelProps) { ))} {hasLinks && ( - {showGlobus && } + {showGlobus && } {showDbGaP && } {showSRA && } diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/utils.spec.ts b/context/app/static/js/components/detailPage/BulkDataTransfer/utils.spec.ts new file mode 100644 index 0000000000..9fbc7207d7 --- /dev/null +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/utils.spec.ts @@ -0,0 +1,12 @@ +import { sanitizeLabel } from './utils'; + +describe('sanitizeLabel', () => { + it('should not change any labels that do not contain square brackets', () => { + const label = 'Some label'; + expect(sanitizeLabel(label)).toBe(label); + }); + it('should remove the HuBMAP ID from the label', () => { + const label = 'Some label [HuBMAP-123]'; + expect(sanitizeLabel(label)).toBe('Some label'); + }); +}); diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/utils.ts b/context/app/static/js/components/detailPage/BulkDataTransfer/utils.ts index d037a433ca..091c8e90ed 100644 --- a/context/app/static/js/components/detailPage/BulkDataTransfer/utils.ts +++ b/context/app/static/js/components/detailPage/BulkDataTransfer/utils.ts @@ -32,4 +32,9 @@ function getDUAText(mapped_data_access_level: string) { } } -export { getDUAText }; +// Removes the HuBMAP ID from the label (present if there is more than one dataset with the same pipeline and status) +function sanitizeLabel(label: string) { + return label.split(' [')[0]; +} + +export { getDUAText, sanitizeLabel }; diff --git a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx index 3df44012c3..5809f95fe6 100644 --- a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx +++ b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect } from 'react'; import PanelList from 'js/shared-styles/panels/PanelList'; import { useFlaskDataContext } from 'js/components/Contexts'; @@ -9,6 +9,7 @@ import { Tabs, Tab, TabPanel } from 'js/shared-styles/tables/TableTabs'; import { OutlinedAlert } from 'js/shared-styles/alerts/OutlinedAlert.stories'; import withShouldDisplay from 'js/helpers/withShouldDisplay'; import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap'; +import { useTabs } from 'js/shared-styles/tabs'; import { useProcessedDatasetTabs } from '../ProcessedData/ProcessedDataset/hooks'; import { SectionDescription } from '../ProcessedData/ProcessedDataset/SectionDescription'; import CollectionsSectionProvider, { useCollectionsSectionContext } from './CollectionsSectionContext'; @@ -45,7 +46,7 @@ function CollectionTab({ label, uuid, index, icon: Icon }: CollectionTabProps) { ); } -function CollectionPanel({ uuid, index }: { uuid: string; index: number }) { +function CollectionPanel({ uuid, index, value }: { uuid: string; index: number; value: number }) { const collectionsData = useDatasetsCollections([uuid]); const { setProcessedDatasetHasCollections } = useCollectionsSectionContext(); const { @@ -64,7 +65,7 @@ function CollectionPanel({ uuid, index }: { uuid: string; index: number }) { if (panelsProps.length === 0) { if (uuid === primaryDatasetId) { return ( - + The raw dataset is not referenced in any existing collections. ); @@ -72,7 +73,7 @@ function CollectionPanel({ uuid, index }: { uuid: string; index: number }) { return null; } return ( - + ); @@ -84,19 +85,19 @@ const collectionsSectionDescription = function CollectionsSection() { const processedDatasetTabs = useProcessedDatasetTabs(); - const [selectedTab, setSelectedTab] = useState(0); + const { openTabIndex, handleTabChange } = useTabs(); return ( {collectionsSectionDescription} - setSelectedTab(tabIndex as number)}> + {processedDatasetTabs.map(({ label, uuid, icon }, index) => ( ))} {processedDatasetTabs.map(({ uuid }, index) => ( - + ))} diff --git a/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx b/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx index d7f5c5b4d5..1e1a9e0045 100644 --- a/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx +++ b/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx @@ -82,7 +82,7 @@ function NodeTemplate({ {Icon && } {isLoading ? : name} - {status && } + {status && } {children && {children}} {target && } diff --git a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx index 1dea866d0d..b32f154d8b 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx +++ b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx @@ -8,7 +8,6 @@ import SchemaRounded from '@mui/icons-material/SchemaRounded'; import { WorkspacesIcon } from 'js/shared-styles/icons'; import CloudDownloadRounded from '@mui/icons-material/CloudDownloadRounded'; import { useAppContext } from 'js/components/Contexts'; -import { formatSectionHash } from 'js/shared-styles/sections/TableOfContents/utils'; import { useAnimatedSidebarPosition } from 'js/shared-styles/sections/TableOfContents/hooks'; import { animated } from '@react-spring/web'; import { useEventCallback } from '@mui/material/utils'; @@ -23,6 +22,7 @@ import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProv import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog'; import { LineClamp } from 'js/shared-styles/text'; import Fade from '@mui/material/Fade'; +import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips'; import { HelperPanelPortal } from '../../DetailLayout/DetailLayout'; import useProcessedDataStore from '../store'; import StatusIcon from '../../StatusIcon'; @@ -42,7 +42,7 @@ function HelperPanelHeader() { return ( - {currentDataset?.hubmap_id} + {currentDataset?.hubmap_id} ); } @@ -66,7 +66,7 @@ interface HelperPanelBodyItemProps extends PropsWithChildren { } function HelperPanelBodyItem({ label, children, noWrap }: HelperPanelBodyItemProps) { - const body = noWrap ? children : {children}; + const body = noWrap ? {children} : children; return ( {label} @@ -202,18 +202,20 @@ function HelperPanelActions() { return ( <> - } - href="#bulk-data-transfer" - onClick={() => { - track({ - action: 'Navigate to Bulk Download', - label: currentDataset?.hubmap_id, - }); - }} - > - Bulk Download - + + } + href="#bulk-data-transfer" + onClick={() => { + track({ + action: 'Navigate to Bulk Download', + label: currentDataset?.hubmap_id, + }); + }} + > + Bulk Download + + ); } diff --git a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx index 75b5b8568d..131aba3f7f 100644 --- a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx +++ b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx @@ -1,12 +1,14 @@ -import React from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { styled } from '@mui/material/styles'; import Button, { ButtonProps } from '@mui/material/Button'; -export const HelperPanelButton = styled((props: ButtonProps) =>