feat: deposition breadcrumb behavior (#1036)

#916 Implements the return to deposition link on the breadcrumbs component when user navigates to dataset from depositions page ## Demo https://github.com/user-attachments/assets/8d43e987-4c20-46e9-93b1-3acc7f41b907
chanzuckerberg · Aug 19, 2024 · 3d8c0d5 · 3d8c0d5
1 parent c89d788
commit 3d8c0d5
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 44 deletions.
diff --git a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
@@ -6,6 +6,7 @@ import { Link } from 'app/components/Link'
 import { useI18n } from 'app/hooks/useI18n'
 import {
   useBrowseDatasetFilterHistory,
+  useDepositionHistory,
   useSingleDatasetFilterHistory,
 } from 'app/state/filterHistory'
 import { cns } from 'app/utils/cns'
@@ -47,6 +48,7 @@ export function Breadcrumbs({
 
   const { browseDatasetHistory } = useBrowseDatasetFilterHistory()
   const { singleDatasetHistory } = useSingleDatasetFilterHistory()
+  const { previousDepositionId } = useDepositionHistory()
 
   const browseAllLink = useMemo(() => {
     const url =
@@ -77,32 +79,47 @@ export function Breadcrumbs({
   )
 
   return (
-    <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-gray-black items-center whitespace-nowrap content-start">
-      <Breadcrumb
-        text={t(variant === 'deposition' ? 'allDepositions' : 'allDatasets')}
-        link={browseAllLink}
-        className="shrink-0"
-      />
-      {chevronIcon}
-      {variant === 'deposition' ? (
-        <Breadcrumb text={t('deposition')} />
-      ) : (
+    <div className="flex flex-col flex-auto gap-1">
+      {previousDepositionId != null && variant !== 'deposition' && (
+        <Link
+          className="uppercase font-semibold text-sds-caps-xxxs leading-sds-caps-xxxs text-sds-primary-400"
+          // TODO add filter carry back behavior
+          to={`/depositions/${previousDepositionId}`}
+        >
+          {t('returnToDeposition')}
+        </Link>
+      )}
+
+      <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-gray-black items-center whitespace-nowrap content-start">
         <Breadcrumb
-          text={
-            variant === 'dataset'
-              ? `${t('dataset')}`
-              : `${t('dataset')}: ${data.title}`
-          }
-          link={singleDatasetLink}
-          className="overflow-ellipsis overflow-hidden flex-initial"
+          text={t(variant === 'deposition' ? 'allDepositions' : 'allDatasets')}
+          link={browseAllLink}
+          className="shrink-0"
         />
-      )}
-      {variant === 'run' && (
-        <>
-          {chevronIcon}
-          <Breadcrumb text={t('run')} className="shrink-0" />
-        </>
-      )}
+
+        {chevronIcon}
+
+        {variant === 'deposition' ? (
+          <Breadcrumb text={t('deposition')} />
+        ) : (
+          <Breadcrumb
+            text={
+              variant === 'dataset'
+                ? `${t('dataset')}`
+                : `${t('dataset')}: ${data.title}`
+            }
+            link={singleDatasetLink}
+            className="overflow-ellipsis overflow-hidden flex-initial"
+          />
+        )}
+
+        {variant === 'run' && (
+          <>
+            {chevronIcon}
+            <Breadcrumb text={t('run')} className="shrink-0" />
+          </>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/PageHeader.tsx b/frontend/packages/data-portal/app/components/PageHeader.tsx
@@ -69,9 +69,8 @@ export function PageHeader({
                 <div
                   className={cns(
                     'row-start-1 col-start-2',
-                    'flex items-center justify-end gap-sds-xs',
+                    'flex items-start justify-end gap-sds-xs',
                     'text-xs text-sds-gray-600',
-                    'my-sds-l',
                   )}
                 >
                   {releaseDate && (

diff --git a/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts b/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts
@@ -135,8 +135,10 @@ const GET_DEPOSITION_BY_ID = gql(`
 function getFilter(filterState: FilterState) {
   const filters: Depositions_Bool_Exp[] = []
   // TODO: implement filters
-  // eslint-disable-next-line no-console
-  console.log(filterState)
+
+  // Adding this to avoid unused error
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  filterState
 
   return { _and: filters } as Depositions_Bool_Exp
 }

diff --git a/frontend/packages/data-portal/app/routes/browse-data.tsx b/frontend/packages/data-portal/app/routes/browse-data.tsx
@@ -1,9 +1,11 @@
 import { Outlet } from '@remix-run/react'
 import { json } from '@remix-run/server-runtime'
+import { useEffect } from 'react'
 
 import { gql } from 'app/__generated__'
 import { apolloClient } from 'app/apollo.server'
 import { BrowseDataHeader } from 'app/components/BrowseData'
+import { useDepositionHistory } from 'app/state/filterHistory'
 
 const GET_TOOLBAR_DATA_QUERY = gql(`
   query GetToolbarData {
@@ -35,6 +37,9 @@ export function shouldRevalidate() {
 }
 
 export default function BrowseDataPage() {
+  const { setPreviousDepositionId } = useDepositionHistory()
+  useEffect(() => setPreviousDepositionId(null), [setPreviousDepositionId])
+
   return (
     <div className="flex flex-col flex-auto">
       <BrowseDataHeader />

diff --git a/frontend/packages/data-portal/app/routes/depositions.$id.tsx b/frontend/packages/data-portal/app/routes/depositions.$id.tsx
@@ -2,6 +2,7 @@
 
 import { CellHeaderDirection } from '@czi-sds/components'
 import { json, LoaderFunctionArgs, redirect } from '@remix-run/server-runtime'
+import { useEffect } from 'react'
 
 import { Order_By } from 'app/__generated__/graphql'
 import { apolloClient } from 'app/apollo.server'
@@ -14,6 +15,7 @@ import { getDatasetsFilterData } from 'app/graphql/getDatasetsFilterData.server'
 import { getDepositionById } from 'app/graphql/getDepositionById.server'
 import { useDepositionById } from 'app/hooks/useDepositionById'
 import { useI18n } from 'app/hooks/useI18n'
+import { useDepositionHistory } from 'app/state/filterHistory'
 import { getFeatureFlag } from 'app/utils/featureFlags'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
@@ -77,10 +79,16 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
   })
 }
 
-export default function DatasetByIdPage() {
+export default function DepositionByIdPage() {
   const { deposition } = useDepositionById()
   const { t } = useI18n()
 
+  const { setPreviousDepositionId } = useDepositionHistory()
+  useEffect(
+    () => setPreviousDepositionId(deposition.id),
+    [deposition.id, setPreviousDepositionId],
+  )
+
   return (
     <TablePageLayout
       header={<DepositionHeader />}

diff --git a/frontend/packages/data-portal/app/state/filterHistory.ts b/frontend/packages/data-portal/app/state/filterHistory.ts
@@ -1,5 +1,4 @@
 import { atom, useAtom } from 'jotai'
-import { useMemo } from 'react'
 
 import { DATASET_FILTERS, RUN_FILTERS } from 'app/constants/filterQueryParams'
 
@@ -14,31 +13,37 @@ export type SingleDatasetHistory = Map<
 
 const browseDatasetHistoryAtom = atom<BrowseDatasetHistory | null>(null)
 const singleDatasetHistoryAtom = atom<SingleDatasetHistory | null>(null)
+const previousDepositionIdAtom = atom<number | null>(null)
 
 export function useBrowseDatasetFilterHistory() {
   const [browseDatasetHistory, setBrowseDatasetHistory] = useAtom(
     browseDatasetHistoryAtom,
   )
 
-  return useMemo(
-    () => ({
-      browseDatasetHistory,
-      setBrowseDatasetHistory,
-    }),
-    [browseDatasetHistory, setBrowseDatasetHistory],
-  )
+  return {
+    browseDatasetHistory,
+    setBrowseDatasetHistory,
+  }
 }
 
 export function useSingleDatasetFilterHistory() {
   const [singleDatasetHistory, setSingleDatasetHistory] = useAtom(
     singleDatasetHistoryAtom,
   )
 
-  return useMemo(
-    () => ({
-      singleDatasetHistory,
-      setSingleDatasetHistory,
-    }),
-    [singleDatasetHistory, setSingleDatasetHistory],
+  return {
+    singleDatasetHistory,
+    setSingleDatasetHistory,
+  }
+}
+
+export function useDepositionHistory() {
+  const [previousDepositionId, setPreviousDepositionId] = useAtom(
+    previousDepositionIdAtom,
   )
+
+  return {
+    previousDepositionId,
+    setPreviousDepositionId,
+  }
 }
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -91,6 +91,7 @@
   "cziiOrganization": "Chan Zuckerberg Imaging Institute (CZII)",
   "dataAcquisitionSoftware": "Data Acquisition Software",
   "dataSubmissionPolicy": "Data Submission Policy",
+  "dataSummary": "Data Summary",
   "dataset": "Dataset",
   "datasetDetails": "Dataset Details",
   "datasetId": "Dataset ID",
@@ -101,7 +102,6 @@
   "datasetTitle": "Dataset Title",
   "datasets": "Datasets",
   "datasetsTab": "Datasets {{count}}",
-  "dataSummary": "Data Summary",
   "deposition": "Deposition",
   "depositionAnnotationsOnly": "Deposition annotations only",
   "depositionData": "Deposition Data",
@@ -274,6 +274,7 @@
   "reportIssueOnGithub": "Report Issue on GitHub",
   "resolutionsAvailable": "Samplings Available",
   "resultsMustIncludeAllFileTypes": "Results must include all selected file types",
+  "returnToDeposition": "Return To Deposition",
   "run": "Run",
   "runDataIncludes": "Run data includes all available movie frames, tilt series image stack, tomograms, annotations, and associated metadata.",
   "runDetails": "Run Details",