NickAkhmetov/MUI 9 QA follow-ups and organ cell types dataset links

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.

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<CellTypeRowProps, 'matchedDatasets'>) {
-  const { datasetUUIDs, isLoading } = useUUIDsFromHubmapIds(matchedDatasets ?? []);
-
-  if (isLoading) {
-    return <Skeleton variant="text" width={150} />;
-  }
+  const datasetUUIDs = useSCFindIDAdapter(matchedDatasets);
 
   return <ViewEntitiesButton entityType="Dataset" filters={{ datasetUUIDs }} />;
 }

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}`;

context/app/static/js/pages/Organ/hooks.ts

@@ -186,7 +186,10 @@ export function useIndexedDatasetsForOrgan(searchItems: string[], organName: str
     _source: ['hubmap_id'],
   });
 
-  const datasetUUIDs = (searchData?.hits?.hits.map((h) => h._id) ?? []).filter((id) => id != null);
+  // These hits all tie on score, so ES returns them in a different order on each request. Sort them so
+  // that SWR revalidating this query (e.g. when the cell types section mounts its ATACseq tab) doesn't
+  // change the request keys that callers like the cell population plot build from this list.
+  const datasetUUIDs = (searchData?.hits?.hits.map((h) => h._id) ?? []).filter((id) => id != null).sort();
 
   const datasetTypes = searchData?.aggregations?.datasetTypes?.buckets ?? [];
 

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',
         }}
       >
-        <Box>
-          <InfoIcon color="primary" fontSize={iconSize} />
-        </Box>
-        {/* Align icon with the first line of text. Render as a <div> rather
-            than the default <p> so callers can pass arbitrary block-level
-            content (Stacks, additional Typography, action buttons, etc.)
-            without producing invalid <p>-inside-<p> HTML. */}
-        <Typography
-          component="div"
-          variant="body1"
-          sx={{
-            marginTop: 0.5,
-          }}
-        >
+        {/* Give the icon the same line box as the text, so `middle` centers it on the first line. */}
+        <Typography component="span" variant="body1">
+          <InfoIcon color="primary" fontSize={iconSize} sx={{ verticalAlign: 'middle' }} />
+        </Typography>
+        {/* Render as a <div> rather than the default <p> so callers can pass
+            arbitrary block-level content (Stacks, additional Typography, action
+            buttons, etc.) without producing invalid <p>-inside-<p> HTML. */}
+        <Typography component="div" variant="body1">
           {children}
         </Typography>
       </Stack>

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 };