Merge branch 'main' into austenem/cat-793-unified-datasets-attribution

hubmapconsortium · Oct 1, 2024 · c29f038 · c29f038
2 parents b3de042 + 5f8c0bc
commit c29f038
Show file tree

Hide file tree

Showing 29 changed files with 258 additions and 161 deletions.
diff --git a/CHANGELOG-many-minor-bug-fixes.md b/CHANGELOG-many-minor-bug-fixes.md
@@ -0,0 +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.
+- Adjust size of "summary" view in entity headers dynamically based on the length of the content.
diff --git a/context/app/markdown/CHANGELOG.md b/context/app/markdown/CHANGELOG.md
@@ -1,3 +1,16 @@
+## v1.10.0 - 2024-09-25
+
+- Only allow Globus group members to access sample workspaces.
+- Fix bug where template examples with default resource options would not launch.
+
+
+## v1.9.0 - 2024-09-24
+
+- Fix bug where donor pages for donors without metadata do not display.
+- Remove extra files accordion from processed datasets summary sections. 
+- Allow Jupyter notebooks for dataset visualizations to be downloaded by all users.
+
+
 ## v1.8.0 - 2024-09-19
 
 - Fix Advanced Config marker issue.

diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts
@@ -98,7 +98,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') {

diff --git 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<HTMLDivElement | null>(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() {
       <Box>
         <EntityHeaderContent setView={handleViewChange} view={view} />
         {isLargeDesktop && (
-          <Box height={expandedHeights[view]} width="100%" p={2}>
+          <Box ref={summaryBodyRef} height={expandedHeights[view]} width="100%" p={2}>
             {view === 'diagram' && uuid && <DatasetRelationships uuid={uuid} processing="raw" showHeader={false} />}
             {view === 'summary' && <SummaryBody direction="row" spacing={2} component={Box} isEntityHeader />}
           </Box>

diff --git 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/.../static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx b/.../static/js/components/detailPage/entityHeader/EntityHeaderContent/EntityHeaderContent.tsx
@@ -7,7 +7,7 @@ import Divider from '@mui/material/Divider';
 
 import VizualizationThemeSwitch from 'js/components/detailPage/visualization/VisualizationThemeSwitch';
 import VisualizationCollapseButton from 'js/components/detailPage/visualization/VisualizationCollapseButton';
-import VisualizationNotebookButton from 'js/components/detailPage/visualization/VisualizationNotebookButton';
+import VisualizationWorkspaceButton from 'js/components/detailPage/visualization/VisualizationWorkspaceButton';
 import { AllEntityTypes, entityIconMap } from 'js/shared-styles/icons/entityIconMap';
 import OrganIcon from 'js/shared-styles/icons/OrganIcon';
 import { useHandleCopyClick } from 'js/hooks/useCopyText';
@@ -58,7 +58,13 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) {
     return null;
   }
 
-  const { sex, race, age_unit, age_value } = getDonorMetadata(entity);
+  const donorMetadata = getDonorMetadata(entity);
+
+  const { sex, race, age_unit, age_value } = donorMetadata;
+
+  if (Object.keys(donorMetadata).length === 0) {
+    return null;
+  }
 
   return (
     <>
@@ -69,6 +75,7 @@ function DonorItems({ data: { entity } }: EntityHeaderItemsProps) {
           {age_value} {age_unit}
         </Typography>
       )}
+      <Divider orientation="vertical" flexItem />
     </>
   );
 }
@@ -85,6 +92,7 @@ function SampleItems({ data: { entity } }: EntityHeaderItemsProps) {
     <>
       <EntityHeaderItem startIcon={<OrganIcon organName={mapped_organ} />}>{mapped_organ}</EntityHeaderItem>
       <EntityHeaderItem startIcon={<SampleCategoryIcon />}>{sample_category}</EntityHeaderItem>
+      <Divider orientation="vertical" flexItem />
     </>
   );
 }
@@ -103,6 +111,7 @@ function DatasetItems({ data: { entity } }: EntityHeaderItemsProps) {
       <EntityHeaderItem startIcon={<StatusIcon status={status} />}>
         {status} ({mapped_data_access_level})
       </EntityHeaderItem>
+      <Divider orientation="vertical" flexItem />
     </>
   );
 }
@@ -118,13 +127,19 @@ function PublicationItems({ data: { entity } }: EntityHeaderItemsProps) {
     <>
       <Typography>{title}</Typography>
       <Typography>{publication_venue}</Typography>
+      <Divider orientation="vertical" flexItem />
     </>
   );
 }
 
 function CellTypeItems({ data: { assayMetadata } }: EntityHeaderItemsProps) {
   const { reference_link } = assayMetadata;
-  return <Typography>{reference_link}</Typography>;
+  return (
+    <>
+      <Typography>{reference_link}</Typography>
+      <Divider orientation="vertical" flexItem />
+    </>
+  );
 }
 
 const entityToFieldsMap: EntityToFieldsType = {
@@ -142,12 +157,7 @@ function EntityHeaderItems({ type, ...rest }: { type: EntityTypesWithIcons } & E
     return null;
   }
 
-  return (
-    <>
-      <Items {...rest} />
-      <Divider orientation="vertical" flexItem />
-    </>
-  );
+  return <Items {...rest} />;
 }
 
 const AnimatedStack = animated(Stack);
@@ -223,7 +233,7 @@ function EntityHeaderContent({ view, setView }: { view: SummaryViewsType; setVie
       <RightDiv>
         {vizIsFullscreen ? (
           <>
-            {vizNotebookId && <VisualizationNotebookButton uuid={vizNotebookId} />}
+            {vizNotebookId && <VisualizationWorkspaceButton uuid={vizNotebookId} />}
             <VisualizationShareButtonWrapper />
             <VizualizationThemeSwitch />
             <VisualizationCollapseButton />

diff --git a/context/app/static/js/components/detailPage/files/Files/Files.tsx b/context/app/static/js/components/detailPage/files/Files/Files.tsx
@@ -10,18 +10,25 @@ import { UnprocessedFile } from '../types';
 
 interface FilesProps {
   files: UnprocessedFile[];
+  includeAccordion?: boolean;
 }
 
-function Files({ files }: FilesProps) {
+function Files({ files, includeAccordion }: FilesProps) {
+  const fileContent = files.length > 0 && (
+    <Box mb={2}>
+      <FileBrowser files={files} />
+    </Box>
+  );
+
   return (
     <FilesContextProvider>
-      <CollapsibleDetailPageSection id="files" title="Files">
-        {files.length > 0 && (
-          <Box mb={2}>
-            <FileBrowser files={files} />
-          </Box>
-        )}
-      </CollapsibleDetailPageSection>
+      {includeAccordion ? (
+        <CollapsibleDetailPageSection id="files" title="Files">
+          {fileContent}
+        </CollapsibleDetailPageSection>
+      ) : (
+        fileContent
+      )}
     </FilesContextProvider>
   );
 }

diff --git a/context/app/static/js/components/detailPage/utils.ts b/context/app/static/js/components/detailPage/utils.ts
@@ -34,11 +34,11 @@ export function getDateLabelAndValue(
 
 export function getDonorMetadata(entity: Donor | Sample | Dataset) {
   if (isDonor(entity)) {
-    return entity.mapped_metadata;
+    return entity?.mapped_metadata ?? {};
   }
 
   if (isSample(entity) || isDataset(entity)) {
-    return entity.donor.mapped_metadata;
+    return entity?.donor.mapped_metadata ?? {};
   }
 
   return {};

diff --git a/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx b/context/app/static/js/components/detailPage/visualization/Visualization/Visualization.tsx
@@ -1,24 +1,23 @@
-import Paper from '@mui/material/Paper';
-import FullscreenRoundedIcon from '@mui/icons-material/FullscreenRounded';
-
 import React, { useEffect } from 'react';
 import { Vitessce } from 'vitessce';
 
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import FullscreenRoundedIcon from '@mui/icons-material/FullscreenRounded';
+
 import DropdownListbox from 'js/shared-styles/dropdowns/DropdownListbox';
 import DropdownListboxOption from 'js/shared-styles/dropdowns/DropdownListboxOption';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
 import { SecondaryBackgroundTooltip } from 'js/shared-styles/tooltips';
 import { useSnackbarActions } from 'js/shared-styles/snackbars';
 import useVisualizationStore, { VisualizationStore } from 'js/stores/useVisualizationStore';
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
-import { useAppContext } from 'js/components/Contexts';
-
-import Stack from '@mui/material/Stack';
-import VisualizationNotebookButton from '../VisualizationNotebookButton';
-import VisualizationShareButton from '../VisualizationShareButton';
-import VisualizationThemeSwitch from '../VisualizationThemeSwitch';
-import VisualizationFooter from '../VisualizationFooter';
-import VisualizationTracker from '../VisualizationTracker';
+import VisualizationDownloadButton from 'js/components/detailPage/visualization/VisualizationDownloadButton';
+import VisualizationWorkspaceButton from 'js/components/detailPage/visualization/VisualizationWorkspaceButton';
+import VisualizationShareButton from 'js/components/detailPage/visualization/VisualizationShareButton';
+import VisualizationThemeSwitch from 'js/components/detailPage/visualization/VisualizationThemeSwitch';
+import VisualizationFooter from 'js/components/detailPage/visualization/VisualizationFooter';
+import VisualizationTracker from 'js/components/detailPage/visualization/VisualizationTracker';
 
 import { useCanvasScrollFix, useCollapseViz, useFirefoxWarning, useVitessceConfig } from './hooks';
 import {
@@ -72,7 +71,6 @@ function Visualization({
   //
   useCanvasScrollFix();
   const { toastError, toastInfo } = useSnackbarActions();
-  const { isWorkspacesUser } = useAppContext();
 
   const trackEntityPageEvent = useTrackEntityPageEvent();
 
@@ -123,14 +121,14 @@ function Visualization({
         <SpacedSectionButtonRow
           leftText={shouldDisplayHeader ? <StyledSectionHeader>Visualization</StyledSectionHeader> : undefined}
           buttons={
-            <Stack direction="row">
-              {isWorkspacesUser && hasNotebook && (
-                <VisualizationNotebookButton
-                  uuid={uuid}
-                  hubmap_id={hubmap_id}
-                  mapped_data_access_level={mapped_data_access_level}
-                />
-              )}
+            <Stack direction="row" spacing={1}>
+              <VisualizationWorkspaceButton
+                uuid={uuid}
+                hubmap_id={hubmap_id}
+                mapped_data_access_level={mapped_data_access_level}
+                hasNotebook={hasNotebook}
+              />
+              <VisualizationDownloadButton uuid={uuid} hasNotebook={hasNotebook} />
               <VisualizationShareButton />
               <VisualizationThemeSwitch />
               <SecondaryBackgroundTooltip title="Switch to Fullscreen">