Merge branch 'main' of https://github.com/hubmapconsortium/portal-ui …

…into yuanzhou/stage-delete

context/app/markdown/CHANGELOG.md

@@ -1,3 +1,41 @@
+## v1.11.0 - 2024-10-02
+
+- Add messaging where donors with ages > 89 are displayed on search and detail pages.
+- Fix "Add to workspace" bug on dataset detail pages.
+- 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.
+- Remove "Contact" section and add Attribution table with contributors for EPICs and Lab Processed datasets.
+
+
+## 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.
+- Remove extraneous tooltip from the non-selectable template grid.
+- Fix "Copy to Clipboard" error when copying dataset IDs.
+- Rely on template job type, not example job type (which is not always present).
+
+
+## v1.7.0 - 2024-09-18
+
+- Increase maximum resource options for workspace jobs from 2 CPUs to 16, 32GB of memory to 128GB and session length from 6 hours to 12.
+- Add last modified date to template detail pages.
+
+
 ## v1.6.0 - 2024-09-17
 
 - Add tracking to landing pages and detail pages for workspaces and templates.

context/app/static/js/components/detailPage/Attribution/Attribution.tsx

@@ -16,7 +16,7 @@ const tooltips = {
   contact: 'This is the contact for this data.',
 };
 
-const DatasetAttribution = (
+export const DatasetAttributionDescription = (
   <SectionDescription>
     Below is the information for the individuals who provided this dataset. For questions about this dataset, reach out
     to the individuals listed as contacts, either via the email address listed in the table or via contact information
@@ -44,7 +44,7 @@ function Attribution({ children }: PropsWithChildren) {
   return (
     <CollapsibleDetailPageSection id="attribution" title="Attribution" icon={sectionIconMap.attribution}>
       <Stack spacing={1}>
-        {isDataset && DatasetAttribution}
+        {isDataset && DatasetAttributionDescription}
         <SummaryPaper>
           <Stack direction="row" spacing={10}>
             {sections.map((props) => (

context/app/static/js/components/detailPage/MetadataTable/MetadataTable.tsx

@@ -5,9 +5,11 @@ import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
+import Stack from '@mui/material/Stack';
 
 import { StyledTableContainer, HeaderCell } from 'js/shared-styles/tables';
 import IconTooltipCell from 'js/shared-styles/tables/IconTooltipCell';
+import DonorAgeTooltip from 'js/shared-styles/tooltips/DonorAgeTooltip';
 import { defaultColumns } from '../MetadataSection/columns';
 
 interface MetadataTableRow {
@@ -32,7 +34,12 @@ function MetadataTable({ tableRows = [] as MetadataTableRow[], columns = default
             {tableRows.map((row) => (
               <TableRow key={row.key}>
                 <IconTooltipCell tooltipTitle={row?.description}>{row.key}</IconTooltipCell>
-                <TableCell>{row.value}</TableCell>
+                <TableCell>
+                  <Stack direction="row">
+                    {row.value}
+                    {row.key.endsWith('age_value') && <DonorAgeTooltip donorAge={row.value} />}
+                  </Stack>
+                </TableCell>
               </TableRow>
             ))}
           </TableBody>

context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx

@@ -86,7 +86,7 @@ function HelperPanelBody() {
         </HelperPanelBodyItem>
       )}
       <HelperPanelBodyItem label="Pipeline">{currentDataset.pipeline}</HelperPanelBodyItem>
-      <HelperPanelBodyItem label="Consortium">{currentDataset.group_name}</HelperPanelBodyItem>
+      <HelperPanelBodyItem label="Group">{currentDataset.group_name}</HelperPanelBodyItem>
       <HelperPanelBodyItem label={dateLabel}>{date && formatDate(date, 'yyyy-MM-dd')}</HelperPanelBodyItem>
     </>
   );
@@ -110,6 +110,7 @@ function HelperPanelActions() {
           </SecondaryBackgroundTooltip>
         }
         datasetDetails={{ hubmap_id, uuid, status }}
+        dialogType="ADD_DATASETS_FROM_HELPER_PANEL"
       />
       <SecondaryBackgroundTooltip title="Scroll down to the Bulk Data Transfer Section.">
         <HelperPanelButton

context/app/static/js/components/detailPage/ProcessedData/ProcessedDataWorkspaceMenu.tsx

@@ -5,23 +5,25 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import AddRounded from '@mui/icons-material/AddRounded';
 
-import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
 import { WorkspacesIcon } from 'js/shared-styles/icons';
 import { useOpenDialog } from 'js/components/workspaces/WorkspacesDropdownMenu/WorkspacesDropdownMenu';
 import { useCreateWorkspaceForm } from 'js/components/workspaces/NewWorkspaceDialog/useCreateWorkspaceForm';
 import { useAppContext, useFlaskDataContext } from 'js/components/Contexts';
 import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
 import NewWorkspaceDialog from 'js/components/workspaces/NewWorkspaceDialog/NewWorkspaceDialog';
-import AddDatasetsFromSearchDialog from 'js/components/workspaces/AddDatasetsFromSearchDialog/AddDatasetsFromSearchDialog';
+import { DialogType } from 'js/stores/useWorkspaceModalStore';
+import AddDatasetsFromDetailDialog from 'js/components/workspaces/AddDatasetsFromDetailDialog';
 
 interface ProcessedDataWorkspaceMenuProps {
   button: React.ReactNode;
   datasetDetails: { hubmap_id: string; uuid: string; status: string };
+  dialogType: DialogType;
 }
 
 function ProcessedDataWorkspaceMenu({
   button,
   datasetDetails: { hubmap_id, uuid, status },
+  dialogType,
 }: ProcessedDataWorkspaceMenuProps) {
   const {
     entity: { mapped_data_access_level },
@@ -56,7 +58,7 @@ function ProcessedDataWorkspaceMenu({
     initialSelectedDatasets: [uuid].filter(Boolean),
   });
 
-  const openEditWorkspaceDialog = useOpenDialog('ADD_DATASETS_FROM_SEARCH');
+  const openEditWorkspaceDialog = useOpenDialog(dialogType);
 
   const createWorkspace = useEventCallback(() => {
     track({
@@ -105,29 +107,27 @@ function ProcessedDataWorkspaceMenu({
 
   // The selectable table provider is used here since a lot of the workspace logic relies on the selected rows
   return (
-    <SelectableTableProvider tableLabel="Current Dataset" selectedRows={new Set([uuid])}>
+    <>
       {buttonWithClickHandler}
-      <>
-        <Menu
-          open={open}
-          onClose={handleClose}
-          anchorEl={anchorEl}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'right',
-          }}
-        >
-          {options.map(({ children, onClick, icon }) => (
-            <MenuItem key={children} onClick={onClick}>
-              <ListItemIcon>{icon}</ListItemIcon>
-              {children}
-            </MenuItem>
-          ))}
-        </Menu>
-        <NewWorkspaceDialog dialogIsOpen={createWorkspaceIsOpen} control={control} errors={errors} {...rest} />
-        <AddDatasetsFromSearchDialog />
-      </>
-    </SelectableTableProvider>
+      <Menu
+        open={open}
+        onClose={handleClose}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+      >
+        {options.map(({ children, onClick, icon }) => (
+          <MenuItem key={children} onClick={onClick}>
+            <ListItemIcon>{icon}</ListItemIcon>
+            {children}
+          </MenuItem>
+        ))}
+      </Menu>
+      <AddDatasetsFromDetailDialog uuid={uuid} dialogType={dialogType} />
+      <NewWorkspaceDialog dialogIsOpen={createWorkspaceIsOpen} control={control} errors={errors} {...rest} />
+    </>
   );
 }
 

context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx

@@ -1,36 +1,43 @@
 import React, { useState } from 'react';
-import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
 import { formatDate } from 'date-fns/format';
-import { Tabs, Tab, TabPanel } from 'js/shared-styles/tabs';
+
 import FactCheckRounded from '@mui/icons-material/FactCheckRounded';
 import SummarizeRounded from '@mui/icons-material/SummarizeRounded';
+import AttributionRoundedIcon from '@mui/icons-material/AttributionRounded';
 import InsertDriveFileRounded from '@mui/icons-material/InsertDriveFileRounded';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
+import { Tabs, Tab, TabPanel } from 'js/shared-styles/tabs';
 import { VisualizationIcon } from 'js/shared-styles/icons';
 import { useVitessceConf } from 'js/pages/Dataset/hooks';
 import { isSupport } from 'js/components/types';
 import { useFlaskDataContext } from 'js/components/Contexts';
-import Skeleton from '@mui/material/Skeleton';
 import ContactUsLink from 'js/shared-styles/Links/ContactUsLink';
-import Files from '../../files/Files';
-import DataProducts from '../../files/DataProducts';
-import VisualizationWrapper from '../../visualization/VisualizationWrapper';
-import AnalysisDetails from '../../AnalysisDetails';
-import Protocol from '../../Protocol';
+import ContributorsTable from 'js/components/detailPage/ContributorsTable';
+import { DatasetAttributionDescription } from 'js/components/detailPage/Attribution/Attribution';
+import Files from 'js/components/detailPage/files/Files';
+import DataProducts from 'js/components/detailPage/files/DataProducts';
+import VisualizationWrapper from 'js/components/detailPage/visualization/VisualizationWrapper';
+import AnalysisDetails from 'js/components/detailPage/AnalysisDetails';
+import Protocol from 'js/components/detailPage/Protocol';
+import { getDateLabelAndValue } from 'js/components/detailPage/utils';
+import { useSelectedVersionStore } from 'js/components/detailPage/VersionSelect/SelectedVersionStore';
+import { useVersions } from 'js/components/detailPage/VersionSelect/hooks';
+import { useTrackEntityPageEvent } from 'js/components/detailPage/useTrackEntityPageEvent';
+
 import { DatasetTitle } from './DatasetTitle';
 import { ProcessedDatasetAccordion } from './ProcessedDatasetAccordion';
 import { Subsection } from './Subsection';
 import { SectionDescription } from './SectionDescription';
 import useProcessedDataStore from '../store';
-import { getDateLabelAndValue } from '../../utils';
 import {
   ProcessedDatasetContextProvider,
   useProcessedDatasetContext,
   ProcessedDataVisualizationProps,
 } from './ProcessedDatasetContext';
-import { useSelectedVersionStore } from '../../VersionSelect/SelectedVersionStore';
 import { useProcessedDatasetDetails } from './hooks';
-import { useVersions } from '../../VersionSelect/hooks';
-import { useTrackEntityPageEvent } from '../../useTrackEntityPageEvent';
 import { OldVersionAlert } from './OldVersionAlert';
 
 function ProcessedDatasetDescription() {
@@ -47,12 +54,13 @@ function ProcessedDatasetDescription() {
 
 function Contact() {
   const {
-    dataset: { mapped_consortium },
+    dataset: { creation_action },
   } = useProcessedDatasetContext();
 
-  if (mapped_consortium !== 'HuBMAP') {
+  if (creation_action !== 'Central Process') {
     return null;
   }
+
   return (
     <LabelledSectionText label="Contact" iconTooltipText="This is the contact for this data.">
       <ContactUsLink>HuBMAP Help Desk</ContactUsLink>
@@ -65,12 +73,15 @@ function SummaryAccordion() {
   const [dateLabel, dateValue] = getDateLabelAndValue(dataset);
   return (
     <Subsection title="Summary" icon={<SummarizeRounded />}>
-      <ProcessedDatasetDescription />
-      <LabelledSectionText label="Consortium">{dataset.group_name}</LabelledSectionText>
-      <Contact />
-      <LabelledSectionText label={dateLabel}>
-        {dateValue ? formatDate(new Date(dateValue), 'yyyy-MM-dd') : 'N/A'}
-      </LabelledSectionText>
+      <Stack spacing={1}>
+        <ProcessedDatasetDescription />
+        <LabelledSectionText label="Group">{dataset.group_name}</LabelledSectionText>
+        <LabelledSectionText label="Consortium">{dataset.mapped_consortium}</LabelledSectionText>
+        <Contact />
+        <LabelledSectionText label={dateLabel}>
+          {dateValue ? formatDate(new Date(dateValue), 'yyyy-MM-dd') : 'N/A'}
+        </LabelledSectionText>
+      </Stack>
     </Subsection>
   );
 }
@@ -182,6 +193,23 @@ function AnalysisDetailsAccordion() {
   );
 }
 
+function AttributionAccordion() {
+  const {
+    dataset: { creation_action, contributors, contacts },
+  } = useProcessedDatasetContext();
+
+  if (creation_action === 'Central Process' || !contributors?.length) {
+    return null;
+  }
+
+  return (
+    <Subsection title="Attribution" idTitleOverride="attribution" icon={<AttributionRoundedIcon />}>
+      {DatasetAttributionDescription}
+      <ContributorsTable contributors={contributors} contacts={contacts} />
+    </Subsection>
+  );
+}
+
 export default function ProcessedDataset({ sectionDataset }: ProcessedDataVisualizationProps) {
   const selectedDatasetVersionUUID =
     useSelectedVersionStore((state) => state.selectedVersions.get(sectionDataset.uuid))?.uuid ?? sectionDataset.uuid;
@@ -213,6 +241,7 @@ export default function ProcessedDataset({ sectionDataset }: ProcessedDataVisual
         <VisualizationAccordion />
         <FilesAccordion />
         <AnalysisDetailsAccordion />
+        <AttributionAccordion />
       </ProcessedDatasetAccordion>
     </ProcessedDatasetContextProvider>
   );

context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/hooks.ts

@@ -21,7 +21,6 @@ export type ProcessedDatasetDetails = ProcessedDatasetInfo &
     | 'metadata'
     | 'protocol_url' // TODO: This is present for non-dataset entities, but not for datasets.
     | 'dataset_type'
-    | 'creation_action'
     | 'mapped_consortium'
   >;
 
@@ -53,6 +52,8 @@ export function useProcessedDatasetDetails(uuid: string) {
       'dataset_type',
       'creation_action',
       'mapped_consortium',
+      'contributors',
+      'contacts',
     ],
     size: 10000,
   };
@@ -97,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') {

context/app/static/js/components/detailPage/ProcessedData/hooks.spec.ts

@@ -1,7 +1,24 @@
+import { CreationAction } from 'js/components/types';
 import { renderHook } from 'test-utils/functions';
 import { useSortedSearchHits, createdByCentralProcess, datasetIsPublished } from './hooks';
 
-const testDatasets = [
+const testDatasets: {
+  _id: string;
+  _index: string;
+  _score: number;
+  _source: {
+    assay_display_name: string[];
+    created_timestamp: number;
+    creation_action: CreationAction;
+    entity_type: string;
+    hubmap_id: string;
+    pipeline: string;
+    status: string;
+    uuid: string;
+    visualization: boolean;
+  };
+  _type: string;
+}[] = [
   {
     _id: 'c1fc38a4a6139a4830b8b2aec7227a8e',
     _index: 'hm_prod_consortium_portal',