Fix VL project literature pages

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 (
       <ErrorContainer>
-        <ExperimentLiteratureHeader />
+        <ExperimentLiteratureHeader basePath={basePath} />
         <div className="m-auto self-center border p-4">
           <h3 className="text-center text-xl">No articles were found for this experiment type.</h3>
           <p>Please make sure that the experiment type is one of the following:</p>

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 <Error noExperimentSelected />;
-  if (!brainRegion) return <Error noBrainRegionSelected />;
+  if (!currentExperiment)
+    return <Error noExperimentSelected basePath="/explore/interactive/literature" />;
+  if (!brainRegion)
+    return <Error noBrainRegionSelected basePath="/explore/interactive/literature" />;
 
   return (
     <div className="flex w-full">
-      <Listing />
+      <Listing basePath="/explore/interactive/literature" />
       <Filters
         values={filters}
         onSubmit={updateFilters}

src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(explore)/explore/(interactive)/interactive/literature/[experiment-data-type]/error.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import ExperimentLiteratureHeader from '@/components/explore-section/Literature/components/ArticleList/ExperimentLiteratureHeader';
+import { EXPERIMENT_DATA_TYPES } from '@/constants/explore-section/data-types/experiment-data-types';
+
+type Props = {
+  basePath: string;
+  noExperimentSelected?: boolean;
+  noBrainRegionSelected?: boolean;
+};
+
+function ErrorContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-10 mb-2 mt-12 flex h-screen w-full max-w-7xl items-start gap-x-4">
+      <div className="mx-10 mt-12 flex w-full flex-col">{children}</div>
+    </div>
+  );
+}
+
+export default function LiteratureArticlesError({
+  basePath,
+  noExperimentSelected,
+  noBrainRegionSelected,
+}: Props) {
+  if (noBrainRegionSelected) {
+    return (
+      <ErrorContainer>
+        <div className="m-auto self-center border p-4">Please select a brain region.</div>
+      </ErrorContainer>
+    );
+  }
+
+  if (noExperimentSelected) {
+    const validExperimentTypes = Object.values(EXPERIMENT_DATA_TYPES).map(
+      (experiment) => experiment.name
+    );
+
+    return (
+      <ErrorContainer>
+        <ExperimentLiteratureHeader basePath={basePath} />
+        <div className="m-auto self-center border p-4">
+          <h3 className="text-center text-xl">No articles were found for this experiment type.</h3>
+          <p>Please make sure that the experiment type is one of the following:</p>
+          <br />
+          <ul className="m-auto w-fit list-disc self-center">
+            {validExperimentTypes.map((experiment) => (
+              <li key={experiment}>{experiment}</li>
+            ))}
+          </ul>
+        </div>
+      </ErrorContainer>
+    );
+  }
+
+  return (
+    <ErrorContainer>
+      <div className="m-auto self-center border p-4">
+        There was an error fetching literature data for this experiment type.
+      </div>
+    </ErrorContainer>
+  );
+}

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 (
+    <div className="flex h-screen overflow-y-hidden bg-white">
+      <BackToInteractiveExplorationBtn
+        prefetch={false}
+        href={`${vlProjectUrl}/explore/interactive`}
+      />
+      {children}
+    </div>
+  );
+}

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 (
+      <Error noExperimentSelected basePath={`${vlProjectUrl}/explore/interactive/literature`} />
+    );
+  if (!brainRegion)
+    return (
+      <Error noBrainRegionSelected basePath={`${vlProjectUrl}/explore/interactive/literature`} />
+    );
+
+  return (
+    <div className="flex w-full">
+      <Listing basePath={`${vlProjectUrl}/explore/interactive/literature`} />
+      <Filters
+        values={filters}
+        onSubmit={updateFilters}
+        onClearFilters={() => {
+          updateFilters({ ...initialFilters });
+          openFilterPanel(false);
+        }}
+      />
+    </div>
+  );
+}

src/components/VirtualLab/VirtualLabExploreMainPage/index.tsx

@@ -31,7 +31,7 @@ export default function VirtualLabExploreMainPage() {
             Start exploring
           </Link>
           <Link
-            href="explore/literature"
+            href="explore/interactive/literature/morphology"
             className="relative w-full flex-1 border border-white px-7 py-2 text-center text-base text-white hover:bg-white hover:font-bold hover:text-primary-8 lg:text-lg xl:py-4 2xl:text-2xl"
           >
             Literature discovery

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 (
               <StatItem
-                href={`/explore/interactive/literature/${config.name}`}
+                href={`${pathName}/literature/${config.name}`}
                 key={config.title}
                 testId={`literature-articles-${id}`}
                 title={config.title}

src/components/explore-section/Literature/components/ArticleList/ArticlesListing.tsx

@@ -33,7 +33,11 @@ const ARTICLE_LISTING_ERRORS_MAP: { [key: string]: string } = {
 
 export const ARTICLES_PER_PAGE = 50;
 
-export function ArticleListing() {
+type ArticleListingProps = {
+  basePath: string;
+};
+
+export function ArticleListing({ basePath }: ArticleListingProps) {
   const params = useParams<{ 'experiment-data-type': string }>();
   const [articles, setArticles] = useState<ArticleItem[]>([]);
   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}
       >
-        <Header {...{ loading }} />
+        <Header {...{ loading }} basePath={basePath} />
         <If id="error" condition={Boolean(error && experiment && articles.length === 0)}>
           <div
             className="mx-auto self-center whitespace-pre-line border border-gray-400 p-7"

src/components/explore-section/Literature/components/ArticleList/ExperimentLiteratureHeader.tsx

@@ -23,7 +23,13 @@ import {
   ExperimentTypeNames,
 } from '@/constants/explore-section/data-types/experiment-data-types';
 
-function ExperimentLiteratureHeader({ loading }: { loading?: boolean }) {
+function ExperimentLiteratureHeader({
+  loading,
+  basePath,
+}: {
+  basePath: string;
+  loading?: boolean;
+}) {
   const router = useRouter();
   const [brainRegion] = useQueryState('brainRegion');
   const params = useParams<{ 'experiment-data-type': ExperimentTypeNames }>();
@@ -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)}`);
     }
   };