diff --git a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx index 88aa61791..3083d98a4 100644 --- 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 ( -
- - {chevronIcon} - {variant === 'deposition' ? ( - - ) : ( +
+ {previousDepositionId != null && variant !== 'deposition' && ( + + {t('returnToDeposition')} + + )} + +
- )} - {variant === 'run' && ( - <> - {chevronIcon} - - - )} + + {chevronIcon} + + {variant === 'deposition' ? ( + + ) : ( + + )} + + {variant === 'run' && ( + <> + {chevronIcon} + + + )} +
) } diff --git a/frontend/packages/data-portal/app/components/PageHeader.tsx b/frontend/packages/data-portal/app/components/PageHeader.tsx index 2272f7bcf..23409ca57 100644 --- 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({
{releaseDate && ( diff --git a/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts b/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts index 044002f98..1e1036c90 100644 --- 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 index 0650e9af4..f1b078ede 100644 --- 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 (
diff --git a/frontend/packages/data-portal/app/routes/depositions.$id.tsx b/frontend/packages/data-portal/app/routes/depositions.$id.tsx index 2e34d9b43..c94672b9f 100644 --- 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 ( } diff --git a/frontend/packages/data-portal/app/state/filterHistory.ts b/frontend/packages/data-portal/app/state/filterHistory.ts index d6dc964c2..d110ca2a1 100644 --- 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,19 +13,17 @@ export type SingleDatasetHistory = Map< const browseDatasetHistoryAtom = atom(null) const singleDatasetHistoryAtom = atom(null) +const previousDepositionIdAtom = atom(null) export function useBrowseDatasetFilterHistory() { const [browseDatasetHistory, setBrowseDatasetHistory] = useAtom( browseDatasetHistoryAtom, ) - return useMemo( - () => ({ - browseDatasetHistory, - setBrowseDatasetHistory, - }), - [browseDatasetHistory, setBrowseDatasetHistory], - ) + return { + browseDatasetHistory, + setBrowseDatasetHistory, + } } export function useSingleDatasetFilterHistory() { @@ -34,11 +31,19 @@ export function useSingleDatasetFilterHistory() { 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 index f726e2281..5cb686c95 100644 --- 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",