diff --git a/CHANGELOG-mui-9-qa-followups.md b/CHANGELOG-mui-9-qa-followups.md new file mode 100644 index 0000000000..ea3b7bebe0 --- /dev/null +++ b/CHANGELOG-mui-9-qa-followups.md @@ -0,0 +1,4 @@ +- Fix the organ page's cell population plot reloading when the cell types section switches between its RNAseq and ATACseq tabs. +- Fix bulk data transfer tab contents not spanning the full width of the section. +- Align the info icon in section descriptions with the first line of the description text. +- Fix the "View Datasets" buttons in the organ page's cell types table linking to an unfiltered dataset search. diff --git a/context/app/static/js/components/organ/OrganCellTypes/CellTypesTableCells.tsx b/context/app/static/js/components/organ/OrganCellTypes/CellTypesTableCells.tsx index 876b6b7a69..f3b6ed3a03 100644 --- a/context/app/static/js/components/organ/OrganCellTypes/CellTypesTableCells.tsx +++ b/context/app/static/js/components/organ/OrganCellTypes/CellTypesTableCells.tsx @@ -5,8 +5,8 @@ import Typography from '@mui/material/Typography'; import { InternalLink } from 'js/shared-styles/Links'; import Skeleton from '@mui/material/Skeleton'; import { ExpandableDescription } from 'js/shared-styles/text'; +import useSCFindIDAdapter from 'js/api/scfind/useSCFindIDAdapter'; import ViewEntitiesButton from '../ViewEntitiesButton'; -import { useUUIDsFromHubmapIds } from '../hooks'; import { CellTypeRowProps } from './types'; interface CellTypeLinkProps { @@ -61,11 +61,7 @@ export function MatchedDatasetsCell({ } export function ViewDatasetsCell({ matchedDatasets }: Pick) { - const { datasetUUIDs, isLoading } = useUUIDsFromHubmapIds(matchedDatasets ?? []); - - if (isLoading) { - return ; - } + const datasetUUIDs = useSCFindIDAdapter(matchedDatasets); return ; } diff --git a/context/app/static/js/components/organ/hooks.ts b/context/app/static/js/components/organ/hooks.ts index c4cc04ae81..0cb059ef45 100644 --- a/context/app/static/js/components/organ/hooks.ts +++ b/context/app/static/js/components/organ/hooks.ts @@ -1,30 +1,7 @@ -import { useSearchHits } from 'js/hooks/useSearchData'; import useLabelToCLID from 'js/api/scfind/useLabelToCLID'; import { capitalize } from '@mui/material/utils'; import { useOrganContext } from './contexts'; -export function useUUIDsFromHubmapIds(hubmapIds: string[]) { - const { searchHits: datasets, isLoading } = useSearchHits({ - size: 10000, - query: { - bool: { - must: [ - { - terms: { - 'hubmap_id.keyword': hubmapIds, - }, - }, - ], - }, - }, - }); - if (!datasets) { - return { datasetUUIDs: [], isLoading }; - } - const datasetUUIDs = datasets.map((hit) => hit._id); - return { datasetUUIDs, isLoading }; -} - export function useFormattedCellTypeName(cellType: string) { const { organ } = useOrganContext(); return `${capitalize(organ.name)}.${cellType}`; diff --git a/context/app/static/js/pages/Organ/hooks.ts b/context/app/static/js/pages/Organ/hooks.ts index 67aed89a46..9ea9f37c8f 100644 --- a/context/app/static/js/pages/Organ/hooks.ts +++ b/context/app/static/js/pages/Organ/hooks.ts @@ -183,6 +183,10 @@ export function useIndexedDatasetsForOrgan(searchItems: string[], organName: str }, }, size: 10000, + // These hits all tie on score, so without a sort ES returns them in a different order on each request. + // Callers like the cell population plot build request keys from this list, so a revalidation (e.g. when + // the cell types section mounts its ATACseq tab) would otherwise refetch them. + sort: [{ _id: 'asc' }], _source: ['hubmap_id'], }); diff --git a/context/app/static/js/shared-styles/sections/SectionDescription.tsx b/context/app/static/js/shared-styles/sections/SectionDescription.tsx index 500573b099..3e917042be 100644 --- a/context/app/static/js/shared-styles/sections/SectionDescription.tsx +++ b/context/app/static/js/shared-styles/sections/SectionDescription.tsx @@ -1,6 +1,5 @@ import React, { PropsWithChildren } from 'react'; import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { DetailSectionPaper } from 'js/shared-styles/surfaces'; import { InfoIcon } from 'js/shared-styles/icons'; @@ -27,20 +26,14 @@ export function SectionDescription({ addendum, children, subsection }: SectionDe alignItems: 'start', }} > - - - - {/* Align icon with the first line of text. Render as a
rather - than the default

so callers can pass arbitrary block-level - content (Stacks, additional Typography, action buttons, etc.) - without producing invalid

-inside-

HTML. */} - + {/* Give the icon the same line box as the text, so `middle` centers it on the first line. */} + + + + {/* Render as a

rather than the default

so callers can pass + arbitrary block-level content (Stacks, additional Typography, action + buttons, etc.) without producing invalid

-inside-

HTML. */} + {children} diff --git a/context/app/static/js/shared-styles/tables/TableTabs/style.ts b/context/app/static/js/shared-styles/tables/TableTabs/style.ts index 8c3bc9a286..a9423526c3 100644 --- a/context/app/static/js/shared-styles/tables/TableTabs/style.ts +++ b/context/app/static/js/shared-styles/tables/TableTabs/style.ts @@ -5,6 +5,10 @@ const StyledTabPanel = styled(TabPanel)((props) => ({ minHeight: '0px', // flex overflow fix display: 'flex', flexGrow: props.value === props.index ? 1 : 0, + // A row flex container sizes its children to their content; stretch them to the panel's width instead. + '& > *': { + flexGrow: 1, + }, })); export { StyledTabPanel };