From 4d880663397ad66429c30f35bc3c590d533f0884 Mon Sep 17 00:00:00 2001
From: Nikolay Akhmetov <nick.akhmetov@gmail.com>
Date: Thu, 1 Aug 2024 14:17:27 -0400
Subject: [PATCH] add helper panel, add publication/creation date logic, add
 tooltips to analysis details, add section descriptions, ensure hash links
 work with `document.querySelector`, add preliminary logic for scrolling to
 lazy loaded pieces,

---
 .../AnalysisDetails/AnalysisDetails.tsx       |  16 +-
 .../AnalysisDetails/AnalysisDetailsList.tsx   |   8 +-
 .../BulkDataTransferSection.tsx               |  16 +-
 .../CollectionsSection/CollectionsSection.tsx |  14 +-
 .../DatasetRelationships/nodeTypes.tsx        |   5 +-
 .../detailPage/DetailLayout/DetailLayout.tsx  |  10 +-
 .../ProcessedData/HelperPanel/HelperPanel.tsx | 138 ++++++++++++++++++
 .../ProcessedData/HelperPanel/index.ts        |   3 +
 .../ProcessedData/HelperPanel/styles.tsx      |  12 ++
 .../ProcessedData/ProcessedData.tsx           |  29 ++--
 .../ProcessedDataset/ProcessedDataset.tsx     |  81 ++++++----
 .../ProcessedDatasetAccordion.tsx             |   3 +-
 .../ProcessedDataset/SectionDescription.tsx   |  27 ++++
 .../ProcessedDataset/Subsection.tsx           |   3 +-
 .../detailPage/ProcessedData/store.ts         |  39 +++++
 .../provenance/ProvSection/ProvSection.tsx    |   6 +
 .../static/js/components/detailPage/utils.ts  |  20 +++
 .../app/static/js/pages/Dataset/Dataset.tsx   |   3 +-
 context/app/static/js/pages/Dataset/hooks.ts  |  39 ++++-
 .../sections/TableOfContents/utils.ts         |  13 +-
 .../static/js/shared-styles/surfaces/index.js |   8 -
 .../static/js/shared-styles/surfaces/index.ts |   8 +
 22 files changed, 416 insertions(+), 85 deletions(-)
 create mode 100644 context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx
 create mode 100644 context/app/static/js/components/detailPage/ProcessedData/HelperPanel/index.ts
 create mode 100644 context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx
 create mode 100644 context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/SectionDescription.tsx
 create mode 100644 context/app/static/js/components/detailPage/ProcessedData/store.ts
 delete mode 100644 context/app/static/js/shared-styles/surfaces/index.js
 create mode 100644 context/app/static/js/shared-styles/surfaces/index.ts

diff --git a/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetails.tsx b/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetails.tsx
index 7019286757..deca01089f 100644
--- a/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetails.tsx
+++ b/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetails.tsx
@@ -13,8 +13,20 @@ function AnalysisDetails({ dagListData }: AnalysisDetails) {
 
   return (
     <div>
-      {ingestPipelines.length > 0 && <AnalysisDetailsList pipelines={ingestPipelines} pipelineType="Ingest" />}
-      {cwlPipelines.length > 0 && <AnalysisDetailsList pipelines={cwlPipelines} pipelineType="CWL" />}
+      {ingestPipelines.length > 0 && (
+        <AnalysisDetailsList
+          pipelines={ingestPipelines}
+          pipelineType="Ingest"
+          tooltip="Supplementary links for the data ingestion pipelines for this dataset"
+        />
+      )}
+      {cwlPipelines.length > 0 && (
+        <AnalysisDetailsList
+          pipelines={cwlPipelines}
+          pipelineType="CWL"
+          tooltip="Supplementary links for the CWL (Common Workflow Language) pipelines for this dataset"
+        />
+      )}
     </div>
   );
 }
diff --git a/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetailsList.tsx b/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetailsList.tsx
index ee479cadcb..cdd1918a45 100644
--- a/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetailsList.tsx
+++ b/context/app/static/js/components/detailPage/AnalysisDetails/AnalysisDetailsList.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import List from '@mui/material/List';
 import Typography from '@mui/material/Typography';
 
+import InfoTooltipIcon from 'js/shared-styles/icons/TooltipIcon';
 import ProvAnalysisDetailsLink from './AnalysisDetailsLink';
 
 interface ProvAnalysisDetailsListProps {
@@ -11,12 +12,15 @@ interface ProvAnalysisDetailsListProps {
     origin: string;
   }[];
   pipelineType: string;
+  tooltip?: string;
 }
 
-function ProvAnalysisDetailsList({ pipelines, pipelineType }: ProvAnalysisDetailsListProps) {
+function ProvAnalysisDetailsList({ pipelines, pipelineType, tooltip }: ProvAnalysisDetailsListProps) {
   return (
     <>
-      <Typography variant="subtitle2">{`${pipelineType} Pipelines`}</Typography>
+      <Typography variant="subtitle2">
+        {`${pipelineType} Pipelines`} <InfoTooltipIcon iconTooltipText={tooltip} />
+      </Typography>
       <List data-testid={pipelineType}>
         {pipelines.map((item) => (
           <ProvAnalysisDetailsLink
diff --git a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx
index 4c15ad86cf..aee22ed755 100644
--- a/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx
+++ b/context/app/static/js/components/detailPage/BulkDataTransfer/BulkDataTransferSection.tsx
@@ -2,24 +2,20 @@ import React from 'react';
 
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import { DetailPageSection } from 'js/components/detailPage/style';
-import { useFlaskDataContext } from 'js/components/Contexts';
 import { FilesContextProvider } from 'js/components/detailPage/files/FilesContext';
 import BulkDataTransferPanels from './BulkDataTransferPanels';
 import { StyledContainer } from './style';
+import { SectionDescription } from '../ProcessedData/ProcessedDataset/SectionDescription';
 
 function BulkDataTransfer() {
-  const {
-    entity: { entity_type },
-  } = useFlaskDataContext();
-
   return (
     <FilesContextProvider>
       <DetailPageSection id="bulk-data-transfer" data-testid="bulk-data-transfer">
-        <SectionHeader
-          iconTooltipText={`Information about how to bulk download all files related to this ${entity_type?.toLowerCase()}.`}
-        >
-          Bulk Data Transfer
-        </SectionHeader>
+        <SectionHeader>Bulk Data Transfer</SectionHeader>
+        <SectionDescription>
+          This section explains how to download data in bulk from raw and processed datasets. Processed datasets have
+          separate download directories in Globus or dbGaP, distinct from the raw dataset.
+        </SectionDescription>
         <StyledContainer>
           <BulkDataTransferPanels />
         </StyledContainer>
diff --git a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx
index 309b5a3cf3..b13a6e912a 100644
--- a/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx
+++ b/context/app/static/js/components/detailPage/CollectionsSection/CollectionsSection.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
 import PanelList from 'js/shared-styles/panels/PanelList';
-import { useFlaskDataContext } from 'js/components/Contexts';
 import { DetailPageSection } from 'js/components/detailPage/style';
 import { buildCollectionsPanelsProps } from 'js/pages/Collections/utils';
 import { CollectionHit } from 'js/pages/Collections/types';
+import { SectionDescription } from '../ProcessedData/ProcessedDataset/SectionDescription';
 
 interface CollectionsSectionProps {
   collectionsData: CollectionHit[];
@@ -14,15 +14,13 @@ interface CollectionsSectionProps {
 function CollectionsSection({ collectionsData }: CollectionsSectionProps) {
   const panelsProps = buildCollectionsPanelsProps(collectionsData);
 
-  const {
-    entity: { entity_type },
-  } = useFlaskDataContext();
-
   return (
     <DetailPageSection id="collections">
-      <SectionHeader iconTooltipText={`List of collections that contain this ${entity_type?.toLowerCase()}.`}>
-        Collections
-      </SectionHeader>
+      <SectionHeader>Collections</SectionHeader>
+      <SectionDescription>
+        Collections may contain references to either raw or processed datasets. If a processed dataset is not included
+        in any collection, there will be no corresponding tabs in the table below.
+      </SectionDescription>
       <PanelList panelsProps={panelsProps} />
     </DetailPageSection>
   );
diff --git a/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx b/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx
index 48762cbc60..3af481f18c 100644
--- a/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx
+++ b/context/app/static/js/components/detailPage/DatasetRelationships/nodeTypes.tsx
@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
 import { AccountTreeRounded, ExtensionRounded, SvgIconComponent } from '@mui/icons-material';
 import Skeleton from '@mui/material/Skeleton';
 import { Box } from '@mui/system';
+import { formatSectionHash } from 'js/shared-styles/sections/TableOfContents/utils';
 import StatusIcon from '../StatusIcon';
 import { usePipelineInfo } from './hooks';
 
@@ -126,7 +127,7 @@ function ProcessedDatasetNode({ data }: NodeProps<ProcessedDatasetNodeProps>) {
     <NodeTemplate
       rounded
       target
-      href={`#${data.name}-section`}
+      href={formatSectionHash(`#section-${data.name}`)}
       icon={nodeIcons.processedDataset}
       bgColor={nodeColors.processedDataset}
       {...data}
@@ -144,7 +145,7 @@ function ComponentDatasetNode({ data }: NodeProps<ComponentDatasetNodeProps>) {
       rounded
       target
       icon={nodeIcons.componentDataset}
-      href={`#${data.name}-section`}
+      href={formatSectionHash(`#section-${data.name}`)}
       bgColor={nodeColors.componentDataset}
       {...data}
     >
diff --git a/context/app/static/js/components/detailPage/DetailLayout/DetailLayout.tsx b/context/app/static/js/components/detailPage/DetailLayout/DetailLayout.tsx
index f13361b9ae..5797219e5c 100644
--- a/context/app/static/js/components/detailPage/DetailLayout/DetailLayout.tsx
+++ b/context/app/static/js/components/detailPage/DetailLayout/DetailLayout.tsx
@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack';
 import useEntityStore, { savedAlertStatus, editedAlertStatus, EntityStore } from 'js/stores/useEntityStore';
 import TableOfContents from 'js/shared-styles/sections/TableOfContents';
 import { TableOfContentsItems } from 'js/shared-styles/sections/TableOfContents/types';
-import { leftRouteBoundaryID } from 'js/components/Routes/Route/Route';
+import { leftRouteBoundaryID, rightRouteBoundaryID } from 'js/components/Routes/Route/Route';
 import { SectionOrder, getSections } from 'js/shared-styles/sections/TableOfContents/utils';
 import { StyledAlert } from './style';
 
@@ -33,6 +33,14 @@ function TableOfContentsPortal({ items, isLoading = false }: { items: TableOfCon
   );
 }
 
+export function HelperPanelPortal({ children }: PropsWithChildren) {
+  const element = document.getElementById(rightRouteBoundaryID);
+  if (!element) {
+    return null;
+  }
+  return createPortal(children, element);
+}
+
 function DetailAlert() {
   const { shouldDisplaySavedOrEditedAlert, setShouldDisplaySavedOrEditedAlert } = useEntityStore(entityStoreSelector);
 
diff --git a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx
new file mode 100644
index 0000000000..8b4f5bcb02
--- /dev/null
+++ b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/HelperPanel.tsx
@@ -0,0 +1,138 @@
+import React, { PropsWithChildren } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { formatDate } from 'date-fns/format';
+import Divider from '@mui/material/Divider';
+import Box from '@mui/system/Box';
+import { useIsDesktop } from 'js/hooks/media-queries';
+import SchemaRounded from '@mui/icons-material/SchemaRounded';
+import { WorkspacesIcon } from 'js/shared-styles/icons';
+import { CloudDownloadRounded } from '@mui/icons-material';
+import { useAppContext } from 'js/components/Contexts';
+import { formatSectionHash } from 'js/shared-styles/sections/TableOfContents/utils';
+import { HelperPanelPortal } from '../../DetailLayout/DetailLayout';
+import useProcessedDataStore from '../store';
+import StatusIcon from '../../StatusIcon';
+import { getDateLabelAndValue } from '../../utils';
+import { HelperPanelButton } from './styles';
+
+function useCurrentDataset() {
+  return useProcessedDataStore((state) => state.currentDataset);
+}
+
+function HelperPanelHeader() {
+  const currentDataset = useCurrentDataset();
+  return (
+    <Typography variant="subtitle2" display="flex" alignItems="center" gap={0.5} whiteSpace="nowrap">
+      <SchemaRounded fontSize="small" />
+      <a href={formatSectionHash(`#section-${currentDataset?.hubmap_id}`)}>{currentDataset?.hubmap_id}</a>
+    </Typography>
+  );
+}
+
+function HelperPanelStatus() {
+  const currentDataset = useCurrentDataset();
+  if (!currentDataset) {
+    return null;
+  }
+  return (
+    <Stack direction="row" alignItems="center">
+      <StatusIcon status={currentDataset.status} />
+      <Typography variant="body2">{currentDataset.status}</Typography>
+    </Stack>
+  );
+}
+
+interface HelperPanelBodyItemProps extends PropsWithChildren {
+  label: string;
+  noWrap?: boolean;
+}
+
+const noWrapStyles = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+};
+
+function HelperPanelBodyItem({ label, children, noWrap }: HelperPanelBodyItemProps) {
+  const valueStyles = noWrap ? noWrapStyles : {};
+  return (
+    <Stack direction="column">
+      <Typography variant="overline">{label}</Typography>
+      <Typography variant="body2" sx={valueStyles}>
+        {children}
+      </Typography>
+    </Stack>
+  );
+}
+
+function HelperPanelBody() {
+  const currentDataset = useCurrentDataset();
+  if (!currentDataset) {
+    return null;
+  }
+  const [dateLabel, date] = getDateLabelAndValue(currentDataset);
+  return (
+    <>
+      {currentDataset.title && <HelperPanelBodyItem label="Title">{currentDataset.title}</HelperPanelBodyItem>}
+      {currentDataset.description && (
+        <HelperPanelBodyItem label="Description" noWrap>
+          {currentDataset.description}
+        </HelperPanelBodyItem>
+      )}
+      <HelperPanelBodyItem label="Pipeline">{currentDataset.pipeline}</HelperPanelBodyItem>
+      <HelperPanelBodyItem label="Consortium">{currentDataset.group_name}</HelperPanelBodyItem>
+      <HelperPanelBodyItem label={dateLabel}>{date && formatDate(date, 'yyyy-MM-dd')}</HelperPanelBodyItem>
+    </>
+  );
+}
+
+function HelperPanelActions() {
+  const currentDataset = useCurrentDataset();
+  // TODO: Add workspace actions/dropdown menu
+  const { isWorkspacesUser } = useAppContext();
+  return (
+    <>
+      {isWorkspacesUser && <HelperPanelButton startIcon={<WorkspacesIcon />}>Workspace</HelperPanelButton>}
+      <HelperPanelButton
+        startIcon={<CloudDownloadRounded />}
+        href={`#bulk-data-transfer?bulk-data=${currentDataset?.hubmap_id}`}
+      >
+        Bulk Download
+      </HelperPanelButton>
+    </>
+  );
+}
+
+export default function HelperPanel() {
+  const currentDataset = useCurrentDataset();
+  // const panelOffset = useProcessedDataStore((state) => state.currentDatasetOffset);
+  const isDesktop = useIsDesktop();
+  if (!currentDataset || !isDesktop) {
+    return null;
+  }
+  return (
+    <HelperPanelPortal>
+      <Box position="relative" height="100%">
+        <Stack
+          position="fixed"
+          bottom="50%"
+          direction="column"
+          maxWidth="12rem"
+          padding={1}
+          gap={1}
+          bgcolor="secondaryContainer.main"
+          boxShadow={2}
+        >
+          <HelperPanelHeader />
+          <Divider />
+          <HelperPanelStatus />
+          <HelperPanelBody />
+          <HelperPanelActions />
+        </Stack>
+      </Box>
+    </HelperPanelPortal>
+  );
+}
diff --git a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/index.ts b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/index.ts
new file mode 100644
index 0000000000..e1fb356fbc
--- /dev/null
+++ b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/index.ts
@@ -0,0 +1,3 @@
+import HelperPanel from './HelperPanel';
+
+export default HelperPanel;
diff --git a/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx
new file mode 100644
index 0000000000..75b5b8568d
--- /dev/null
+++ b/context/app/static/js/components/detailPage/ProcessedData/HelperPanel/styles.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { styled } from '@mui/material/styles';
+import Button, { ButtonProps } from '@mui/material/Button';
+
+export const HelperPanelButton = styled((props: ButtonProps) => <Button {...props} variant="outlined" />)(
+  ({ theme }) => ({
+    backgroundColor: 'white',
+    borderRadius: theme.spacing(0.5),
+    whiteSpace: 'nowrap',
+  }),
+);
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx
index 4b65c92742..b9fec621db 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedData.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
 import { useProcessedDatasets } from 'js/pages/Dataset/hooks';
 import SectionHeader from 'js/shared-styles/sections/SectionHeader';
-import { DetailSectionPaper } from 'js/shared-styles/surfaces';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { InfoIcon } from 'js/shared-styles/icons';
 import LabelledSectionText from 'js/shared-styles/sections/LabelledSectionText';
 import { DetailPageSection } from '../style';
 import ProcessedDataset from './ProcessedDataset';
+import { SectionDescription } from './ProcessedDataset/SectionDescription';
+import HelperPanel from './HelperPanel';
 
 function ProcessedDataSection() {
   const processedDatasets = useProcessedDatasets();
@@ -18,20 +16,14 @@ function ProcessedDataSection() {
   return (
     <DetailPageSection id="processed-data" data-testid="processed-data">
       <SectionHeader>Processed Data</SectionHeader>
-      <DetailSectionPaper>
-        <Stack direction="column" gap={1}>
-          <Stack direction="row" gap={0.5}>
-            <InfoIcon color="primary" fontSize="1.5rem" />
-            <Typography variant="body1">
-              This section contains the results of any additional analyses performed on this dataset. Additional data
-              may include visualizations and essential data files (data products). Analysis results could be generated
-              from consortium standardized pipelines or by external groups, and may have been generated independently
-              from the primary data submitted by the original group.
-            </Typography>
-          </Stack>
-          <LabelledSectionText label={pipelinesText}>{pipelines.join(', ')}</LabelledSectionText>
-        </Stack>
-      </DetailSectionPaper>
+      <SectionDescription
+        addendum={<LabelledSectionText label={pipelinesText}>{pipelines.join(', ')}</LabelledSectionText>}
+      >
+        This section contains the results of any additional analyses performed on this dataset. Additional data may
+        include visualizations and essential data files (data products). Analysis results could be generated from
+        consortium standardized pipelines or by external groups, and may have been generated independently from the
+        primary data submitted by the original group.
+      </SectionDescription>
       {processedDatasets.searchHits.map((dataset) => (
         <ProcessedDataset
           dataset={dataset._source}
@@ -40,6 +32,7 @@ function ProcessedDataSection() {
           isLoading={processedDatasets.isLoading}
         />
       ))}
+      <HelperPanel />
     </DetailPageSection>
   );
 }
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx
index 8d07b8e8ce..78c72168ea 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDataset.tsx
@@ -8,6 +8,7 @@ import FactCheckRounded from '@mui/icons-material/FactCheckRounded';
 import SummarizeRounded from '@mui/icons-material/SummarizeRounded';
 import InsertDriveFileRounded from '@mui/icons-material/InsertDriveFileRounded';
 import { VisualizationIcon } from 'js/shared-styles/icons';
+import { useInView } from 'react-intersection-observer';
 import Files from '../../files/Files';
 import DataProducts from '../../files/DataProducts';
 import VisualizationWrapper from '../../visualization/VisualizationWrapper';
@@ -17,17 +18,16 @@ import { ProcessedDataVisualizationProps } from './types';
 import { DatasetTitle } from './DatasetTitle';
 import { ProcessedDatasetAccordion } from './ProcessedDatasetAccordion';
 import { Subsection } from './Subsection';
+import { SectionDescription } from './SectionDescription';
+import useProcessedDataStore from '../store';
+import { getDateLabelAndValue } from '../../utils';
 
-function ProcessedDatasetDescription({
-  description: _description,
-  title,
-}: Pick<ProcessedDatasetTypes, 'description' | 'title'>) {
-  const descriptionTitle = _description ? 'Description' : 'Title';
-  const description = _description ?? title;
+function ProcessedDatasetDescription({ description, title }: Pick<ProcessedDatasetTypes, 'description' | 'title'>) {
   if (!description) {
-    return null;
+    return <LabelledSectionText label="Title">{title}</LabelledSectionText>;
   }
-  return <LabelledSectionText label={descriptionTitle}>{description}</LabelledSectionText>;
+
+  return <LabelledSectionText label="Description">{description}</LabelledSectionText>;
 }
 
 function RegisteredBy({
@@ -43,6 +43,7 @@ function RegisteredBy({
 }
 
 function SummaryAccordion({ dataset }: Pick<ProcessedDataVisualizationProps, 'dataset'>) {
+  const [dateLabel, dateValue] = getDateLabelAndValue(dataset);
   return (
     <Subsection id={`summary-${dataset.hubmap_id}`} title="Summary" icon={<SummarizeRounded />}>
       <ProcessedDatasetDescription description={dataset.description} title={dataset.title} />
@@ -51,18 +52,24 @@ function SummaryAccordion({ dataset }: Pick<ProcessedDataVisualizationProps, 'da
         created_by_user_displayname={dataset.created_by_user_displayname}
         created_by_user_email={dataset.created_by_user_email}
       />
-      <LabelledSectionText label="Publication Date">
-        {dataset.published_timestamp ? formatDate(dataset.published_timestamp, 'yyyy-MM-dd') : 'N/A'}
+      <LabelledSectionText label={dateLabel}>
+        {dateValue ? formatDate(new Date(dateValue), 'yyyy-MM-dd') : 'N/A'}
       </LabelledSectionText>
     </Subsection>
   );
 }
 
-function FilesAccordion({ files, id }: Pick<ProcessedDatasetTypes, 'files'> & { id: string }) {
+function FilesAccordion({ dataset }: Pick<ProcessedDataVisualizationProps, 'dataset'>) {
   const [openTabIndex, setOpenTabIndex] = useState(0);
-
+  const { files, hubmap_id } = dataset;
+  const id = `files-${hubmap_id}`;
   return (
     <Subsection id={id} title="Files" icon={<InsertDriveFileRounded />}>
+      <SectionDescription subsection>
+        Files are available for this processed dataset. Essential data products are identified for your convenience, and
+        a comprehensive list of available files is displayed in the file browser. To download data in bulk from either
+        the processed or the primary dataset, navigate to the bulk data transfer section.
+      </SectionDescription>
       <Tabs value={openTabIndex} onChange={(_, newValue) => setOpenTabIndex(newValue as number)}>
         <Tab label="Data Products" index={0} />
         <Tab label="File Browser" index={1} />
@@ -77,20 +84,29 @@ function FilesAccordion({ files, id }: Pick<ProcessedDatasetTypes, 'files'> & {
   );
 }
 
-function VisualizationAccordion({
-  conf,
-  dataset: { hubmap_id, uuid },
-}: Pick<ProcessedDataVisualizationProps, 'dataset' | 'conf'>) {
+function VisualizationAccordion({ conf, dataset }: Pick<ProcessedDataVisualizationProps, 'dataset' | 'conf'>) {
+  const { hubmap_id, uuid } = dataset;
+
+  const hasBeenSeen = useProcessedDataStore((state) => state.hasBeenSeen(hubmap_id));
+
+  if (!conf) {
+    return null;
+  }
+
   return (
     <Subsection id={`visualization-${hubmap_id}`} title="Visualization" icon={<VisualizationIcon />}>
-      <VisualizationWrapper vitData={conf} uuid={uuid} shouldDisplayHeader={false} />
+      <SectionDescription subsection>
+        This visualization includes various interactive elements such as scatter plots, spatial imaging plots, heat
+        maps, genome browser tracks, and more.
+      </SectionDescription>
+      <VisualizationWrapper vitData={conf} uuid={uuid} shouldDisplayHeader={false} hasBeenMounted={hasBeenSeen} />
     </Subsection>
   );
 }
 
 function AnalysisDetailsAccordion({ dataset }: Pick<ProcessedDataVisualizationProps, 'dataset'>) {
   return (
-    <Subsection id={`protocols-${dataset.hubmap_id}`} title="Analysis Details & Protocols" icon={<FactCheckRounded />}>
+    <Subsection id={`analysis-${dataset.hubmap_id}`} title="Analysis Details & Protocols" icon={<FactCheckRounded />}>
       <AnalysisDetails dagListData={dataset.metadata.dag_provenance_list} />
       {Boolean(dataset.protocol_url) && <Protocol protocol_url={dataset.protocol_url} />}
     </Subsection>
@@ -98,13 +114,28 @@ function AnalysisDetailsAccordion({ dataset }: Pick<ProcessedDataVisualizationPr
 }
 
 export default function ProcessedDataset({ conf, dataset, isLoading }: ProcessedDataVisualizationProps) {
+  const { setCurrentDataset } = useProcessedDataStore((state) => ({
+    setCurrentDataset: state.setCurrentDataset,
+  }));
+  const { ref } = useInView({
+    threshold: 0.1,
+    initialInView: false,
+    onChange: (visible) => {
+      if (visible) {
+        setCurrentDataset(dataset);
+      }
+    },
+  });
+
   return (
-    <ProcessedDatasetAccordion dataset={dataset} conf={conf} isLoading={isLoading}>
-      <DatasetTitle hubmap_id={dataset.hubmap_id} status={dataset.status} />
-      <SummaryAccordion dataset={dataset} />
-      <VisualizationAccordion dataset={dataset} conf={conf} />
-      <FilesAccordion files={dataset.files} id={`files-${dataset.hubmap_id}`} />
-      <AnalysisDetailsAccordion dataset={dataset} />
-    </ProcessedDatasetAccordion>
+    <div ref={ref}>
+      <ProcessedDatasetAccordion dataset={dataset} conf={conf} isLoading={isLoading}>
+        <DatasetTitle hubmap_id={dataset.hubmap_id} status={dataset.status} />
+        <SummaryAccordion dataset={dataset} />
+        <VisualizationAccordion dataset={dataset} conf={conf} />
+        <FilesAccordion dataset={dataset} />
+        <AnalysisDetailsAccordion dataset={dataset} />
+      </ProcessedDatasetAccordion>
+    </div>
   );
 }
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
index 8ac65a45f1..336baef3e7 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/ProcessedDatasetAccordion.tsx
@@ -5,6 +5,7 @@ import Typography from '@mui/material/Typography';
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
 import { VisualizationIcon } from 'js/shared-styles/icons';
 import Skeleton from '@mui/material/Skeleton';
+import { formatSectionHash } from 'js/shared-styles/sections/TableOfContents/utils';
 import StatusIcon from '../../StatusIcon';
 import { ProcessedDataVisualizationProps } from './types';
 import { ProcessedDatasetSectionAccordion } from './styles';
@@ -19,7 +20,7 @@ export function ProcessedDatasetAccordion({
 }: PropsWithChildren<ProcessedDataVisualizationProps>) {
   const visualizationIcon = conf ? <VisualizationIcon /> : null;
   return (
-    <ProcessedDatasetSectionAccordion defaultExpanded id={`${dataset.hubmap_id}-section`}>
+    <ProcessedDatasetSectionAccordion defaultExpanded id={formatSectionHash(`section-${dataset.hubmap_id}`)}>
       <AccordionSummary expandIcon={<ArrowDropDownRounded />}>
         {isLoading ? iconPlaceholder : visualizationIcon}
         <Typography variant="subtitle1" color="inherit" component="h4">
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/SectionDescription.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/SectionDescription.tsx
new file mode 100644
index 0000000000..55eb085217
--- /dev/null
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/SectionDescription.tsx
@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+import { DetailSectionPaper } from 'js/shared-styles/surfaces';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { InfoIcon } from 'js/shared-styles/icons';
+
+interface SectionDescriptionProps extends PropsWithChildren {
+  addendum?: React.ReactNode;
+  subsection?: boolean;
+}
+
+export function SectionDescription({ addendum, children, subsection }: SectionDescriptionProps) {
+  const iconSize = subsection ? '1rem' : '1.5rem';
+  const contents = (
+    <Stack direction="column" gap={1} marginBottom={2}>
+      <Stack direction="row" gap={1} alignItems="start">
+        <InfoIcon color="primary" fontSize={iconSize} />
+        <Typography variant="body1">{children}</Typography>
+      </Stack>
+      {addendum}
+    </Stack>
+  );
+  if (subsection) {
+    return contents;
+  }
+  return <DetailSectionPaper>{contents}</DetailSectionPaper>;
+}
diff --git a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/Subsection.tsx b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/Subsection.tsx
index 4389ece5fe..0cef5e89a6 100644
--- a/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/Subsection.tsx
+++ b/context/app/static/js/components/detailPage/ProcessedData/ProcessedDataset/Subsection.tsx
@@ -3,6 +3,7 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import ExpandMore from '@mui/icons-material/ExpandMoreRounded';
 import Typography from '@mui/material/Typography';
+import { formatSectionHash } from 'js/shared-styles/sections/TableOfContents/utils';
 import { SubsectionAccordion } from './styles';
 
 interface SubsectionProps extends PropsWithChildren {
@@ -13,7 +14,7 @@ interface SubsectionProps extends PropsWithChildren {
 
 export function Subsection({ title, icon, id, children }: SubsectionProps) {
   return (
-    <SubsectionAccordion defaultExpanded id={id}>
+    <SubsectionAccordion defaultExpanded id={formatSectionHash(id)}>
       <AccordionSummary expandIcon={<ExpandMore />}>
         {icon}
         <Typography variant="subtitle1" component="h4">
diff --git a/context/app/static/js/components/detailPage/ProcessedData/store.ts b/context/app/static/js/components/detailPage/ProcessedData/store.ts
new file mode 100644
index 0000000000..1bc33158ad
--- /dev/null
+++ b/context/app/static/js/components/detailPage/ProcessedData/store.ts
@@ -0,0 +1,39 @@
+import { ProcessedDatasetTypes } from 'js/pages/Dataset/hooks';
+import { create } from 'zustand';
+
+interface ProcessedDataStoreState {
+  seenDatasets: Set<string>;
+  currentDataset: ProcessedDatasetTypes | null;
+  datasetOffsets: Map<string, number>;
+  currentDatasetOffset: number;
+}
+
+interface ProcessedDataStoreAction {
+  addDataset: (hubmapId: string) => void;
+  setCurrentDataset: (dataset: ProcessedDatasetTypes) => void;
+  hasBeenSeen: (hubmapId: string) => boolean;
+  setDatasetOffset: (hubmapId: string, offset: number) => void;
+}
+
+const defaultState = {
+  seenDatasets: new Set<string>(),
+  currentDataset: null,
+  datasetOffsets: new Map<string, number>(),
+  currentDatasetOffset: 0,
+};
+
+export type ProcessedDataStore = ProcessedDataStoreState & ProcessedDataStoreAction;
+
+export const useProcessedDataStore = create<ProcessedDataStore>((set, get) => ({
+  ...defaultState,
+  addDataset: (hubmapId) => set((state) => ({ seenDatasets: new Set([...state.seenDatasets, hubmapId]) })),
+  setCurrentDataset: (dataset) => {
+    const { datasetOffsets, addDataset } = get();
+    addDataset(dataset.hubmap_id);
+    set({ currentDataset: dataset, currentDatasetOffset: datasetOffsets.get(dataset.hubmap_id) ?? 0 });
+  },
+  hasBeenSeen: (hubmapId) => Boolean(get().seenDatasets.has(hubmapId)),
+  setDatasetOffset: (hubmapId, offset) =>
+    set((state) => ({ datasetOffsets: new Map(state.datasetOffsets.set(hubmapId, offset)) })),
+}));
+export default useProcessedDataStore;
diff --git a/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx b/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx
index 35c90315f1..77f1365355 100644
--- a/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx
+++ b/context/app/static/js/components/detailPage/provenance/ProvSection/ProvSection.tsx
@@ -7,6 +7,7 @@ import { DetailPageSection } from 'js/components/detailPage/style';
 import Skeleton from '@mui/material/Skeleton';
 import useProvData from '../hooks';
 import ProvTabs from '../ProvTabs';
+import { SectionDescription } from '../../ProcessedData/ProcessedDataset/SectionDescription';
 
 const provenanceTooltipText = `The provenance shows the sequence of events and actions that led to this page creation.`;
 
@@ -54,6 +55,11 @@ function ProvSection() {
 
   return (
     <ProvSectionWrapper>
+      <SectionDescription>
+        The provenance displays the sequence of events and actions that led to the creation of this dataset. The table
+        view provides a basic overview of the dataset&apos;s origin, from donor to sample level, and any processing that
+        has been done to the dataset. The graph view offers a comprehensive overview of the data&apos;s provenance.
+      </SectionDescription>
       <ProvTabs provData={provData} />
     </ProvSectionWrapper>
   );
diff --git a/context/app/static/js/components/detailPage/utils.ts b/context/app/static/js/components/detailPage/utils.ts
index f5a3f6edf7..7c36b7c080 100644
--- a/context/app/static/js/components/detailPage/utils.ts
+++ b/context/app/static/js/components/detailPage/utils.ts
@@ -1,3 +1,5 @@
+import { ProcessedDatasetTypes } from 'js/pages/Dataset/hooks';
+
 export function getSectionOrder(
   possibleSections: string[],
   optionalSectionsToInclude: Record<string, boolean>,
@@ -10,3 +12,21 @@ export function getSectionOrder(
 export function getCombinedDatasetStatus({ sub_status, status }: { sub_status?: string; status: string }) {
   return sub_status ?? status;
 }
+
+/**
+ * Helper function to handle different date labels for creation and publication dates
+ * depending on dataset status
+ * @param dataset
+ * @returns [label: string, value: number]
+ */
+export function getDateLabelAndValue(
+  dataset: Pick<ProcessedDatasetTypes, 'published_timestamp' | 'created_timestamp' | 'status'>,
+): [string, number] {
+  const { published_timestamp, created_timestamp, status } = dataset;
+
+  if (status.toLowerCase() === 'published') {
+    return ['Publication Date', published_timestamp];
+  }
+
+  return ['Creation Date', created_timestamp];
+}
diff --git a/context/app/static/js/pages/Dataset/Dataset.tsx b/context/app/static/js/pages/Dataset/Dataset.tsx
index 17ea833313..9f555a7648 100644
--- a/context/app/static/js/pages/Dataset/Dataset.tsx
+++ b/context/app/static/js/pages/Dataset/Dataset.tsx
@@ -38,7 +38,7 @@ import MetadataSection from 'js/components/detailPage/MetadataSection';
 import { Dataset, Entity, isDataset, isSupport, Sample, Support } from 'js/components/types';
 import DatasetRelationships from 'js/components/detailPage/DatasetRelationships';
 import ProcessedDataSection from 'js/components/detailPage/ProcessedData';
-import useDatasetLabel, { useProcessedDatasetsSections } from './hooks';
+import useDatasetLabel, { useLazyLoadedHashHandler, useProcessedDatasetsSections } from './hooks';
 
 function NotebookButton({ disabled, ...props }: { disabled: boolean } & ButtonProps) {
   return (
@@ -265,6 +265,7 @@ function DatasetDetail({ assayMetadata, vitData, hasNotebook }: EntityDetailProp
   } = assayMetadata;
 
   const isLatest = !('next_revision_uuid' in assayMetadata);
+  useLazyLoadedHashHandler();
 
   const origin_sample = origin_samples[0];
   const { mapped_organ } = origin_sample;
diff --git a/context/app/static/js/pages/Dataset/hooks.ts b/context/app/static/js/pages/Dataset/hooks.ts
index 8d563632ab..9c7acbb81f 100644
--- a/context/app/static/js/pages/Dataset/hooks.ts
+++ b/context/app/static/js/pages/Dataset/hooks.ts
@@ -5,9 +5,10 @@ import { useFlaskDataContext } from 'js/components/Contexts';
 import { useSearchHits } from 'js/hooks/useSearchData';
 import { excludeComponentDatasetsClause, excludeSupportEntitiesClause, getIDsQuery } from 'js/helpers/queries';
 import { Dataset, isDataset } from 'js/components/types';
-import { getSectionFromString } from 'js/shared-styles/sections/TableOfContents/utils';
+import { formatSectionHash, getSectionFromString } from 'js/shared-styles/sections/TableOfContents/utils';
 import { partialMultiFetcher } from 'js/helpers/swr';
 import { TableOfContentsItem } from 'js/shared-styles/sections/TableOfContents/types';
+import { useLayoutEffect } from 'react';
 
 function useDatasetLabelPrefix() {
   const {
@@ -49,8 +50,10 @@ export type ProcessedDatasetTypes = Pick<
   | 'created_by_user_email'
   | 'title'
   | 'published_timestamp'
+  | 'created_timestamp'
   | 'metadata'
   | 'protocol_url' // TODO: This is present for non-dataset entities, but not for datasets.
+  | 'dataset_type'
 >;
 
 type VitessceConf = object | null;
@@ -96,9 +99,11 @@ function useProcessedDatasets() {
       'created_by_user_email',
       'title',
       'published_timestamp',
+      'created_timestamp',
       'metadata.dag_provenance_list',
       'metadata.metadata',
       'protocol_url',
+      'dataset_type',
     ],
     size: 10000,
   };
@@ -129,14 +134,18 @@ function getProcessedDatasetSection({
     summary: true,
     visualization: Boolean(conf),
     files: Boolean(hit?._source?.files),
+    analysis: Boolean(hit?._source?.metadata?.dag_provenance_list),
   };
 
   const sectionsToDisplay = Object.entries(shouldDisplaySection).filter(([_k, v]) => v === true);
 
   return {
     // TODO: Improve the lookup for descendants to exclude anything with a missing pipeline name
-    ...getSectionFromString(pipeline ?? hubmap_id, `${hubmap_id}-section`),
-    items: sectionsToDisplay.map(([s]) => ({ ...getSectionFromString(s), hash: `${s}-${hubmap_id}` })),
+    ...getSectionFromString(pipeline ?? hubmap_id, `section-${hubmap_id}`),
+    items: sectionsToDisplay.map(([s]) => ({
+      ...getSectionFromString(s),
+      hash: formatSectionHash(`${s}-${hubmap_id}`),
+    })),
   };
 }
 
@@ -157,5 +166,27 @@ function useProcessedDatasetsSections(): { sections: TableOfContentsItem | false
   };
 }
 
-export { useProcessedDatasets, useProcessedDatasetsSections };
+function useLazyLoadedHashHandler() {
+  const { isLoading } = useProcessedDatasets();
+  useLayoutEffect(() => {
+    if (!isLoading && window.location.hash) {
+      const { hash } = window.location;
+      const decodedHash = decodeURIComponent(hash);
+
+      if (decodedHash) {
+        // Since `document.querySelector` can fail if the hash is invalid, wrap it in a try-catch block.
+        try {
+          const element = document.querySelector(decodedHash);
+          if (element) {
+            element.scrollIntoView();
+          }
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    }
+  }, [isLoading]);
+}
+
+export { useProcessedDatasets, useProcessedDatasetsSections, useLazyLoadedHashHandler };
 export default useDatasetLabel;
diff --git a/context/app/static/js/shared-styles/sections/TableOfContents/utils.ts b/context/app/static/js/shared-styles/sections/TableOfContents/utils.ts
index 29f670aca8..b760d72abb 100644
--- a/context/app/static/js/shared-styles/sections/TableOfContents/utils.ts
+++ b/context/app/static/js/shared-styles/sections/TableOfContents/utils.ts
@@ -2,8 +2,17 @@ import { capitalizeAndReplaceDashes } from 'js/helpers/functions';
 import { sectionIconMap } from 'js/shared-styles/icons/sectionIconMap';
 import { TableOfContentsItem, TableOfContentsItemWithNode, TableOfContentsItems } from './types';
 
+function formatSectionHash(hash: string) {
+  const hashWithoutDots = hash.replace(/\./g, '-').toLowerCase();
+  return encodeURIComponent(hashWithoutDots);
+}
+
 function getSectionFromString(s: string, hash: string = s): TableOfContentsItem {
-  return { text: capitalizeAndReplaceDashes(s), hash: encodeURIComponent(hash), icon: sectionIconMap?.[s] };
+  return {
+    text: capitalizeAndReplaceDashes(s),
+    hash: formatSectionHash(hash),
+    icon: sectionIconMap?.[s],
+  };
 }
 
 export type SectionOrder = Record<string, boolean | TableOfContentsItem>;
@@ -29,4 +38,4 @@ function getItemsClient(items: TableOfContentsItems): TableOfContentsItems<Table
   }));
 }
 
-export { getSections, getSectionFromString, getItemsClient };
+export { getSections, getSectionFromString, getItemsClient, formatSectionHash };
diff --git a/context/app/static/js/shared-styles/surfaces/index.js b/context/app/static/js/shared-styles/surfaces/index.js
deleted file mode 100644
index 0c665320ab..0000000000
--- a/context/app/static/js/shared-styles/surfaces/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import Paper from '@mui/material/Paper';
-
-const DetailSectionPaper = styled(Paper)`
-  padding: ${(props) => props.theme.spacing(2)};
-`;
-
-export { DetailSectionPaper };
diff --git a/context/app/static/js/shared-styles/surfaces/index.ts b/context/app/static/js/shared-styles/surfaces/index.ts
new file mode 100644
index 0000000000..21c2bc4069
--- /dev/null
+++ b/context/app/static/js/shared-styles/surfaces/index.ts
@@ -0,0 +1,8 @@
+import { styled } from '@mui/material/styles';
+import Paper from '@mui/material/Paper';
+
+const DetailSectionPaper = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+})) as typeof Paper;
+
+export { DetailSectionPaper };