From a385a7dbea463397e9a0db0c1ec2a2dece2f357d Mon Sep 17 00:00:00 2001 From: Konstantinos Platis Date: Tue, 9 Jul 2024 11:46:18 +0000 Subject: [PATCH] Fix VL project literature pages --- .../[experiment-data-type]/error.tsx | 4 +- .../[experiment-data-type]/page.tsx | 8 +- .../[experiment-data-type]/error.tsx | 62 +++++++++++++++ .../[experiment-data-type]/layout.tsx | 21 +++++ .../[experiment-data-type]/page.tsx | 53 +++++++++++++ .../(main)/(literature)/literature/layout.tsx | 76 ------------------- .../(main)/(literature)/literature/page.tsx | 12 --- .../VirtualLabExploreMainPage/index.tsx | 2 +- .../LiteratureForExperimentType.tsx | 5 +- .../ArticleList/ArticlesListing.tsx | 8 +- .../ExperimentLiteratureHeader.tsx | 12 ++- 11 files changed, 162 insertions(+), 101 deletions(-) create mode 100644 src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/error.tsx create mode 100644 src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/layout.tsx create mode 100644 src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx delete mode 100644 src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/layout.tsx delete mode 100644 src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/page.tsx diff --git a/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/error.tsx b/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/error.tsx index 6b0effd20..5fcdb74a9 100644 --- a/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/error.tsx +++ b/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/error.tsx @@ -4,6 +4,7 @@ import ExperimentLiteratureHeader from '@/components/explore-section/Literature/ import { EXPERIMENT_DATA_TYPES } from '@/constants/explore-section/data-types/experiment-data-types'; type Props = { + basePath: string; noExperimentSelected?: boolean; noBrainRegionSelected?: boolean; }; @@ -17,6 +18,7 @@ function ErrorContainer({ children }: { children: React.ReactNode }) { } export default function LiteratureArticlesError({ + basePath, noExperimentSelected, noBrainRegionSelected, }: Props) { @@ -35,7 +37,7 @@ export default function LiteratureArticlesError({ return ( - +

No articles were found for this experiment type.

Please make sure that the experiment type is one of the following:

diff --git a/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx b/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx index 0ece1123f..c3eaf47d7 100644 --- a/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx +++ b/src/app/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx @@ -23,12 +23,14 @@ export default function Page() { (experiment) => experiment.name === params?.['experiment-data-type'] ?? '' ); - if (!currentExperiment) return ; - if (!brainRegion) return ; + if (!currentExperiment) + return ; + if (!brainRegion) + return ; return (
- + +
{children}
+
+ ); +} + +export default function LiteratureArticlesError({ + basePath, + noExperimentSelected, + noBrainRegionSelected, +}: Props) { + if (noBrainRegionSelected) { + return ( + +
Please select a brain region.
+ + ); + } + + if (noExperimentSelected) { + const validExperimentTypes = Object.values(EXPERIMENT_DATA_TYPES).map( + (experiment) => experiment.name + ); + + return ( + + +
+

No articles were found for this experiment type.

+

Please make sure that the experiment type is one of the following:

+
+
    + {validExperimentTypes.map((experiment) => ( +
  • {experiment}
    • + ))} +
+
+ + ); + } + + return ( + +
+ There was an error fetching literature data for this experiment type. +
+ + ); +} diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/layout.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/layout.tsx new file mode 100644 index 000000000..f223f7636 --- /dev/null +++ b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/layout.tsx @@ -0,0 +1,21 @@ +'use client'; + +import BackToInteractiveExplorationBtn from '@/components/explore-section/BackToInteractiveExplorationBtn'; +import { LabProjectLayoutProps } from '@/types/virtual-lab/layout'; +import { generateVlProjectUrl } from '@/util/virtual-lab/urls'; + +export default function ArticleListForExperimentLayout({ + children, + params, +}: LabProjectLayoutProps) { + const vlProjectUrl = generateVlProjectUrl(params.virtualLabId, params.projectId); + return ( +
+ + {children} +
+ ); +} diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx new file mode 100644 index 000000000..0b490c93f --- /dev/null +++ b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/page.tsx @@ -0,0 +1,53 @@ +'use client'; + +import { useParams } from 'next/navigation'; +import { useAtom, useSetAtom } from 'jotai'; +import { useQueryState } from 'nuqs'; + +import Error from './error'; +import { ArticleListing as Listing } from '@/components/explore-section/Literature/components/ArticleList/ArticlesListing'; +import Filters from '@/components/explore-section/Literature/components/ArticleList/ArticleListFilters'; +import { + articleListFiltersAtom, + articleListingFilterPanelOpenAtom, + initialFilters, +} from '@/state/explore-section/literature-filters'; +import { EXPERIMENT_DATA_TYPES } from '@/constants/explore-section/data-types/experiment-data-types'; +import { generateVlProjectUrl } from '@/util/virtual-lab/urls'; + +export default function Page() { + const params = useParams<{ + virtualLabId: string; + projectId: string; + 'experiment-data-type': string; + }>(); + const openFilterPanel = useSetAtom(articleListingFilterPanelOpenAtom); + const [filters, updateFilters] = useAtom(articleListFiltersAtom); + const [brainRegion] = useQueryState('brainRegion'); + const currentExperiment = Object.values(EXPERIMENT_DATA_TYPES).find( + (experiment) => experiment.name === params?.['experiment-data-type'] ?? '' + ); + const vlProjectUrl = generateVlProjectUrl(params.virtualLabId, params.projectId); + if (!currentExperiment) + return ( + + ); + if (!brainRegion) + return ( + + ); + + return ( +
+ + { + updateFilters({ ...initialFilters }); + openFilterPanel(false); + }} + /> +
+ ); +} diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/layout.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/layout.tsx deleted file mode 100644 index bef2a3195..000000000 --- a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/layout.tsx +++ /dev/null @@ -1,76 +0,0 @@ -'use client'; - -import { ErrorBoundary } from 'react-error-boundary'; - -import SimpleErrorComponent from '@/components/GenericErrorFallback'; -import SideMenu from '@/components/SideMenu'; -import { BrainRegionsSidebar } from '@/components/build-section/BrainRegionSelector'; -import { useSetBrainRegionFromQuery } from '@/hooks/brain-region-panel'; -import { Role, Label, Content, LinkItemKey } from '@/constants/virtual-labs/sidemenu'; -import { LabProjectLayoutProps } from '@/types/virtual-lab/layout'; -import { generateLabUrl } from '@/util/virtual-lab/urls'; - -export default function GenericLayout({ children, params }: LabProjectLayoutProps) { - useSetBrainRegionFromQuery(); - - const labUrl = generateLabUrl(params.virtualLabId); - - const labProjectUrl = `${labUrl}/project/${params.projectId}`; - - return ( -
- -
- -
- - - - -
{children}
-
- ); -} diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/page.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/page.tsx deleted file mode 100644 index 62d32336d..000000000 --- a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(main)/(literature)/literature/page.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ErrorBoundary } from 'react-error-boundary'; - -import { QAContainer } from '@/components/explore-section/Literature/components'; -import SimpleErrorComponent from '@/components/GenericErrorFallback'; - -export default async function LiteraturePage() { - return ( - - - - ); -} diff --git a/src/components/VirtualLab/VirtualLabExploreMainPage/index.tsx b/src/components/VirtualLab/VirtualLabExploreMainPage/index.tsx index 0a27fada2..0395c1570 100644 --- a/src/components/VirtualLab/VirtualLabExploreMainPage/index.tsx +++ b/src/components/VirtualLab/VirtualLabExploreMainPage/index.tsx @@ -31,7 +31,7 @@ export default function VirtualLabExploreMainPage() { Start exploring Literature discovery diff --git a/src/components/explore-section/ExploreInteractive/LiteratureForExperimentType.tsx b/src/components/explore-section/ExploreInteractive/LiteratureForExperimentType.tsx index 82ef2a23d..8efe7b3ea 100644 --- a/src/components/explore-section/ExploreInteractive/LiteratureForExperimentType.tsx +++ b/src/components/explore-section/ExploreInteractive/LiteratureForExperimentType.tsx @@ -7,6 +7,7 @@ import { WarningFilled } from '@ant-design/icons'; import { Tooltip } from 'antd'; import find from 'lodash/find'; import isNil from 'lodash/isNil'; +import { usePathname } from 'next/navigation'; import { ML_MAX_ARTICLES_PER_PAGE } from '../Literature/api'; import StatItem, { StatError, StatItemSkeleton } from './StatItem'; @@ -19,7 +20,7 @@ export default function LiteratureForExperimentType() { const selectedBrainRegion = useAtomValue(selectedBrainRegionAtom); const brainRegions = useAtomValue(useMemo(() => unwrap(brainRegionsAtom), [])); const brainRegion = find(brainRegions, ['id', selectedBrainRegion?.id]); - + const pathName = usePathname(); const totalByExperimentAndBrainRegionAtom = useMemo(() => { // When the brain regions change, cancel the request for previous brain regions if (previousFetchController.current) { @@ -66,7 +67,7 @@ export default function LiteratureForExperimentType() { return ( (); const [articles, setArticles] = useState([]); const [skeletonItems, setSkeletonItems] = useState(0); @@ -195,7 +199,7 @@ export function ArticleListing() { className="article-list-scrollbar mx-auto h-[calc(100vh-3.5rem)] max-w-7xl flex-1 overflow-y-auto" ref={refListingContainer} > -
+
(); @@ -41,9 +47,7 @@ function ExperimentLiteratureHeader({ loading }: { loading?: boolean }) { const total = getActiveFiltersCount(filters, initialFilters); const onSelectType: MenuProps['onClick'] = ({ key }) => { if (brainRegion) { - router.push( - `/explore/interactive/literature/${key}?brainRegion=${encodeURIComponent(brainRegion)}` - ); + router.push(`${basePath}/${key}?brainRegion=${encodeURIComponent(brainRegion)}`); } };