Merge branch 'main' into tkakar/cat-1083-fix-home-page

"Merged main"

CHANGELOG-fix-processed-analysis.md

@@ -0,0 +1 @@
+- Update processed dataset files and analysis sections to match updated ingest metadata.

context/app/markdown/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.18.0 - 2025-01-06
+
+- Added informative alert upon successful bulk download manifest download.
+- Update portal to account for refactored metadata from search api.
+
+
+
 ## v1.17.0 - 2024-12-19
 
 - Update to ESLint v9.

context/app/static/js/components/bulkDownload/BulkDownloadSuccessAlert.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useBulkDownloadStore } from 'js/stores/useBulkDownloadStore';
+import { Alert } from 'js/shared-styles/alerts/Alert';
+import OutboundLink from 'js/shared-styles/Links/OutboundLink';
+import { LINKS } from 'js/components/bulkDownload/constants';
+
+function BulkDownloadSuccessAlert() {
+  const { downloadSuccess, setDownloadSuccess } = useBulkDownloadStore();
+
+  if (!downloadSuccess) {
+    return null;
+  }
+
+  return (
+    <Alert onClose={() => setDownloadSuccess(false)} $marginBottom={10}>
+      Download successful. In order to download the files that are in the manifest file,{' '}
+      <OutboundLink href={LINKS.installation}>install</OutboundLink> the HuBMAP CLT and follow{' '}
+      <OutboundLink href={LINKS.documentation}>instructions</OutboundLink> for how to use it with the manifest file.
+      {/* TODO: uncomment once tutorial is up */}
+      {/* A tutorial is available to guide you through the entire process. */}
+    </Alert>
+  );
+}
+
+export default BulkDownloadSuccessAlert;

context/app/static/js/components/bulkDownload/hooks.ts

@@ -55,7 +55,7 @@ function useBulkDownloadForm() {
 }
 
 function useBulkDownloadDialog(deselectRows?: (uuids: string[]) => void) {
-  const { isOpen, uuids, open, close, setUuids } = useBulkDownloadStore();
+  const { isOpen, uuids, open, close, setUuids, setDownloadSuccess } = useBulkDownloadStore();
   const { control, handleSubmit, errors, reset, trigger } = useBulkDownloadForm();
   const { toastErrorDownloadFile, toastSuccessDownloadFile } = useBulkDownloadToasts();
 
@@ -135,14 +135,14 @@ function useBulkDownloadDialog(deselectRows?: (uuids: string[]) => void) {
 
       checkAndDownloadFile({ url, fileName: 'manifest.txt' })
         .then(() => {
-          toastSuccessDownloadFile('Manifest');
+          setDownloadSuccess(true);
         })
         .catch((e) => {
           toastErrorDownloadFile('Manifest', () => downloadManifest(datasetsToDownload));
           console.error(e);
         });
     },
-    [toastSuccessDownloadFile, toastErrorDownloadFile],
+    [toastErrorDownloadFile, setDownloadSuccess],
   );
 
   const handleClose = useCallback(() => {

context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx

@@ -12,6 +12,7 @@ import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap';
 import { SectionDescription } from 'js/shared-styles/sections/SectionDescription';
 import BulkDownloadTextButton from 'js/components/bulkDownload/buttons/BulkDownloadTextButton';
 import { LINKS } from 'js/components/bulkDownload/constants';
+import BulkDownloadSuccessAlert from 'js/components/bulkDownload/BulkDownloadSuccessAlert';
 import BulkDataTransferPanels from './BulkDataTransferPanels';
 import { useProcessedDatasetTabs } from '../ProcessedData/ProcessedDataset/hooks';
 
@@ -39,6 +40,7 @@ function BulkDataTransfer() {
       icon={sectionIconMap['bulk-data-transfer']}
     >
       <FilesContextProvider>
+        <BulkDownloadSuccessAlert />
         <SectionDescription>
           <Stack spacing={1}>
             {description}

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

@@ -92,17 +92,19 @@ function FilesAccordion() {
   const {
     dataset: { files, hubmap_id },
   } = useProcessedDatasetContext();
-  const hasDataProducts = Boolean(files.filter((file) => file.is_data_product).length);
   const [openTabIndex, setOpenTabIndex] = useState(0);
-  const fileBrowserIndex = hasDataProducts ? 1 : 0;
   const track = useTrackEntityPageEvent();
-  if (files.length === 0) {
+
+  if (!files || files.length === 0) {
     return (
       <Subsection title="Files" icon={<InsertDriveFileRounded />}>
         <SectionDescription subsection>No files are available for this dataset.</SectionDescription>
       </Subsection>
     );
   }
+
+  const hasDataProducts = Boolean(files.filter((file) => file.is_data_product).length);
+  const fileBrowserIndex = hasDataProducts ? 1 : 0;
   return (
     <Subsection title="Files" icon={<InsertDriveFileRounded />}>
       <SectionDescription subsection>
@@ -172,7 +174,7 @@ function AnalysisDetailsAccordion() {
     return <Skeleton variant="rectangular" height={200} />;
   }
 
-  if (!dataset.metadata) {
+  if (!dataset.ingest_metadata) {
     return (
       <Subsection title="Analysis Details & Protocols" idTitleOverride="analysis" icon={<FactCheckRounded />}>
         <SectionDescription subsection>
@@ -183,7 +185,7 @@ function AnalysisDetailsAccordion() {
   }
 
   const {
-    metadata: { dag_provenance_list },
+    ingest_metadata: { dag_provenance_list },
     protocol_url,
   } = dataset;
 

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

@@ -18,6 +18,7 @@ export type ProcessedDatasetDetails = ProcessedDatasetInfo &
     | 'created_timestamp'
     | 'published_timestamp'
     | 'last_modified_timestamp'
+    | 'ingest_metadata'
     | 'metadata'
     | 'protocol_url' // TODO: This is present for non-dataset entities, but not for datasets.
     | 'dataset_type'
@@ -48,8 +49,8 @@ export function useProcessedDatasetDetails(uuid: string) {
       'created_timestamp',
       'published_timestamp',
       'last_modified_timestamp',
-      'metadata.dag_provenance_list',
-      'metadata.metadata',
+      'ingest_metadata.dag_provenance_list',
+      'metadata',
       'protocol_url',
       'dataset_type',
       'creation_action',

context/app/static/js/components/detailPage/derivedEntities/DerivedEntitiesSection/DerivedEntitiesSection.tsx

@@ -6,6 +6,7 @@ import RelatedEntitiesTabs from 'js/components/detailPage/related-entities/Relat
 import RelatedEntitiesSectionActions from 'js/components/detailPage/related-entities/RelatedEntitiesSectionActions';
 import { AllEntityTypes } from 'js/shared-styles/icons/entityIconMap';
 import { buildSearchLink } from 'js/components/search/store';
+import BulkDownloadSuccessAlert from 'js/components/bulkDownload/BulkDownloadSuccessAlert';
 import { useDerivedEntitiesSection } from './hooks';
 
 const tooltipTexts = {
@@ -42,6 +43,7 @@ function DerivedEntitiesSection() {
         />
       }
     >
+      <BulkDownloadSuccessAlert />
       <RelatedEntitiesTabs
         entities={entities}
         openIndex={openIndex}

context/app/static/js/components/detailPage/files/DataProducts/hooks.ts

@@ -57,7 +57,7 @@ function usePipelineInfo(): PipelineInfo {
   if (!isDataset(entity)) {
     return defaultPipeline;
   }
-  const dagList = entity.metadata.dag_provenance_list ?? [];
+  const dagList = entity.ingest_metadata.dag_provenance_list ?? [];
   // Iterate over the list of DAGs and extract the latest origin and name
   const pipelineInfo = dagList.reduce<PipelineInfo>(processDagList, defaultPipeline);
   return pipelineInfo;

context/app/static/js/components/search/Results/utils.ts

@@ -15,7 +15,7 @@ const paths = {
   dataset: {
     donor: `donor.${donorMetadataPath}`,
     sample: `source_samples.${sampleMetadataPath}`,
-    dataset: 'metadata.metadata',
+    dataset: 'metadata',
   },
 };
 

context/app/static/js/components/search/Search.tsx

@@ -14,9 +14,10 @@ import merge from 'deepmerge';
 import history from 'history/browser';
 
 import { useAppContext } from 'js/components/Contexts';
-import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
+import BulkDownloadSuccessAlert from 'js/components/bulkDownload/BulkDownloadSuccessAlert';
 import WorkspacesDropdownMenu, { WorkspaceSearchDialogs } from 'js/components/workspaces/WorkspacesDropdownMenu';
 import BulkDownloadButtonFromSearch from 'js/components/bulkDownload/buttons/BulkDownloadButtonFromSearch';
+import SelectableTableProvider from 'js/shared-styles/tables/SelectableTableProvider';
 import { entityIconMap } from 'js/shared-styles/icons/entityIconMap';
 import {
   SearchStoreProvider,
@@ -200,6 +201,7 @@ function Body({ facetGroups }: { facetGroups: FacetGroups }) {
 const Search = React.memo(function Search({ type, facetGroups }: TypeProps & { facetGroups: FacetGroups }) {
   return (
     <Stack spacing={2} mb={4}>
+      <BulkDownloadSuccessAlert />
       <Header type={type} />
       <Stack direction="column" spacing={1} mb={2}>
         <Box>

context/app/static/js/components/searchPage/ResultsTable/utils.jsx

@@ -16,7 +16,7 @@ const paths = {
   dataset: {
     donor: `donor.${donorMetadataPath}`,
     sample: `source_samples.${sampleMetdataPath}`,
-    dataset: 'metadata.metadata',
+    dataset: 'metadata',
   },
 };
 

context/app/static/js/components/types.ts

@@ -45,10 +45,11 @@ export interface Entity {
   donor: Donor;
   descendant_counts: { entity_type: Record<string, number> };
   descendant_ids: string[];
-  metadata: {
+  ingest_metadata: {
     dag_provenance_list: DagProvenanceType[];
     [key: string]: unknown;
   };
+  metadata: Record<string, unknown>;
   /** @deprecated Use `descendant_ids` and `useEntitiesData` instead */
   descendants: Entity[];
   group_name: string;

context/app/static/js/helpers/metadata.ts

@@ -10,7 +10,7 @@ import {
 import { get } from './nodash';
 
 const donorMetadataPath = 'mapped_metadata';
-const sampleMetadataPath = 'metadata';
+const sampleOrDatasetMetadataPath = 'metadata';
 
 type ESEntityTypesWithIcons = Extract<ESEntityType, 'Donor' | 'Sample' | 'Dataset'>;
 
@@ -20,11 +20,11 @@ const paths: Record<ESEntityTypesWithIcons, Partial<Record<ESEntityType, string>
   },
   Sample: {
     Donor: `donor.${donorMetadataPath}`,
-    Sample: sampleMetadataPath,
+    Sample: sampleOrDatasetMetadataPath,
   },
   Dataset: {
     Donor: `donor.${donorMetadataPath}`,
-    Dataset: 'metadata.metadata',
+    Dataset: sampleOrDatasetMetadataPath,
   },
 };
 

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

@@ -47,6 +47,7 @@ export type ProcessedDatasetInfo = Pick<
   | 'files'
   | 'pipeline'
   | 'status'
+  | 'ingest_metadata'
   | 'metadata'
   | 'creation_action'
   | 'created_timestamp'
@@ -126,6 +127,7 @@ function useProcessedDatasets(includeComponents?: boolean) {
       'created_timestamp',
       'dbgap_study_url',
       'dbgap_sra_experiment_url',
+      'ingest_metadata',
       'is_component',
       'visualization',
       'contributors',
@@ -164,13 +166,13 @@ function getProcessedDatasetSection({
   dataset: ProcessedDatasetInfo & { label: string };
   hasConf?: boolean;
 }) {
-  const { files, metadata, visualization, creation_action, contributors } = dataset;
+  const { files, ingest_metadata, visualization, creation_action, contributors } = dataset;
 
   const shouldDisplaySection = {
     summary: true,
     visualization: visualization || conf,
     files: Boolean(files?.length),
-    analysis: Boolean(metadata?.dag_provenance_list),
+    analysis: Boolean(ingest_metadata?.dag_provenance_list),
     attribution: creation_action !== 'Central Process' && Boolean(contributors?.length),
   };
 

context/app/static/js/pages/search/DevSearch.jsx

@@ -50,20 +50,20 @@ function DevSearch() {
       'Assay Types': [
         listFilter('data_types', 'data_types'),
         listFilter('mapped_data_types', 'mapped_data_types'),
-        listFilter('metadata.metadata.assay_category', 'assay_category'),
-        listFilter('metadata.metadata.assay_type', 'assay_type'),
+        listFilter('metadata.assay_category', 'assay_category'),
+        listFilter('metadata.assay_type', 'assay_type'),
         checkboxFilter('is_derived', 'Is derived?', BoolMust(TermQuery('processing.keyword', 'processed'))),
         checkboxFilter('is_raw', 'Is raw?', BoolMust(TermQuery('processing.keyword', 'raw'))),
         hierarchicalFilter({
           fields: {
-            parent: { id: 'metadata.metadata.analyte_class.keyword' },
+            parent: { id: 'metadata.analyte_class.keyword' },
             child: { id: 'mapped_data_types.keyword' },
           },
           name: 'By analyte',
         }),
         hierarchicalFilter({
           fields: {
-            parent: { id: 'metadata.metadata.assay_category.keyword' },
+            parent: { id: 'metadata.assay_category.keyword' },
             child: { id: 'mapped_data_types.keyword' },
           },
           name: 'By category',
@@ -84,7 +84,7 @@ function DevSearch() {
         checkboxFilter('has_substatus', 'Has substatus?', ExistsQuery('sub_status')),
         checkboxFilter('is_living_donor', 'Is living donor?', ExistsQuery('metadata.living_donor_data')),
         checkboxFilter('is_organ_donor', 'Is organ donor?', ExistsQuery('metadata.organ_donor_data')),
-        checkboxFilter('has_metadata', 'Has metadata?', ExistsQuery('metadata.metadata')),
+        checkboxFilter('has_metadata', 'Has metadata?', ExistsQuery('metadata')),
         checkboxFilter('no_metadata', 'No metadata?', BoolMustNot(ExistsQuery('metadata.metadata'))),
         checkboxFilter('has_files', 'Has files?', ExistsQuery('files')),
         checkboxFilter('no_files', 'No files?', BoolMustNot(ExistsQuery('files'))),

context/app/static/js/stores/useBulkDownloadStore.ts

@@ -4,16 +4,20 @@ import { Dataset } from 'js/components/types';
 export type BulkDownloadDataset = Pick<Dataset, 'hubmap_id' | 'processing' | 'files' | 'uuid' | 'processing_type'>;
 
 interface BulkDownloadStore {
+  downloadSuccess: boolean;
   isOpen: boolean;
   uuids: Set<string>;
+  setDownloadSuccess: (success: boolean) => void;
   open: () => void;
   close: () => void;
   setUuids: (uuids: Set<string>) => void;
 }
 
 const storeDefinition = (set: StoreApi<BulkDownloadStore>['setState']) => ({
+  downloadSuccess: false,
   isOpen: false,
   uuids: new Set<string>(),
+  setDownloadSuccess: (downloadSuccess: boolean) => set({ downloadSuccess }),
   open: () => set({ isOpen: true }),
   close: () => set({ isOpen: false }),
   setUuids: (uuids: Set<string>) => set({ uuids }),

context/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portal-ui",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.3",
     "@datapunt/matomo-tracker-js": "^0.5.1",