Show list view for bookmarks

Signed-off-by: Dinika Saxena <[email protected]>

src/api/explore-section/resources.ts

@@ -1,8 +1,13 @@
 import esb, { Sort } from 'elastic-builder';
 import { createHeaders } from '@/util/utils';
 import { API_SEARCH } from '@/constants/explore-section/queries';
-import { ExploreESResponse, FlattenedExploreESResponse } from '@/types/explore-section/es';
+import {
+  ExploreESHit,
+  ExploreESResponse,
+  FlattenedExploreESResponse,
+} from '@/types/explore-section/es';
 import { Experiment } from '@/types/explore-section/es-experiment';
+import { ExploreSectionResource } from '@/types/explore-section/resources';
 
 export type DataQuery = {
   size: number;
@@ -16,15 +21,15 @@ export async function fetchESResourceByIds(
   accessToken: string,
   dataQuery: object,
   signal?: AbortSignal
-): Promise<number | undefined> {
+): Promise<ExploreESHit<ExploreSectionResource>[]> {
   return fetch(API_SEARCH, {
     method: 'POST',
     headers: createHeaders(accessToken),
     body: JSON.stringify(dataQuery),
     signal,
   })
     .then<ExploreESResponse<Experiment>>((response) => response.json())
-    .then((data) => data?.hits?.total?.value);
+    .then<ExploreESHit<ExploreSectionResource>[]>((data) => data?.hits?.hits ?? []);
 }
 
 export async function fetchTotalByExperimentAndRegions(

src/components/VirtualLab/Bookmarks/BookmarkList.tsx

@@ -1,16 +1,14 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import Link from 'next/link';
 
-import { useAtomValue } from 'jotai';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Collapse, CollapseProps, ConfigProvider } from 'antd';
-import { getBookmarkedItems, BookmarkItem } from '@/services/virtual-lab/bookmark';
-import { detailUrlWithinLab } from '@/util/common';
-import { fetchESResourceByIds } from '@/api/explore-section/resources';
-import { esQueryById } from '@/queries/explore-section/data';
+import { useAtomValue } from 'jotai';
+import ExperimentBookmarks from './ExperimentBookmarks';
 import sessionAtom from '@/state/session';
+import { BookmarkItem, getBookmarkedItems } from '@/services/virtual-lab/bookmark';
+import { DataType } from '@/constants/explore-section/list-views';
 
 type Props = {
   labId: string;
@@ -22,17 +20,10 @@ export default function BookmarkList({ labId, projectId }: Props) {
   const session = useAtomValue(sessionAtom);
 
   useEffect(() => {
-    getBookmarkedItems(labId, projectId)
-      .then((items) => {
-        setBookmarkedItems(items);
-        return items;
-      })
-      .then((bookmarks) => {
-        fetchESResourceByIds(
-          session?.accessToken!,
-          esQueryById(bookmarks.map((b) => b.resourceId))
-        );
-      });
+    getBookmarkedItems(labId, projectId).then((items) => {
+      setBookmarkedItems(items);
+      return items;
+    });
   }, [labId, projectId, session?.accessToken]);
 
   const items: CollapseProps['items'] = bookmarkedItems
@@ -50,24 +41,11 @@ export default function BookmarkList({ labId, projectId }: Props) {
             </div>
           ),
           children: (
-            <ul>
-              {bookmarkedItems.map((bookmark) => (
-                <li key={bookmark.resourceId}>
-                  <Link
-                    href={detailUrlWithinLab(
-                      labId,
-                      projectId,
-                      bookmark.projectLabel,
-                      bookmark.resourceId,
-                      'morphology'
-                    )}
-                  >
-                    {' '}
-                    {bookmark.resourceId}
-                  </Link>
-                </li>
-              ))}
-            </ul>
+            <ExperimentBookmarks
+              dataType={DataType.ExperimentalNeuronMorphology}
+              accessToken={session?.accessToken!}
+              resourceIds={bookmarkedItems.map((b) => b.resourceId)}
+            />
           ),
         },
       ]

src/components/VirtualLab/Bookmarks/ExperimentBookmarks.tsx

@@ -0,0 +1,74 @@
+import { useAtom } from 'jotai';
+
+import { useEffect, useState } from 'react';
+import ExploreSectionTable from '@/components/explore-section/ExploreSectionListingView/ExploreSectionTable';
+import WithControlPanel from '@/components/explore-section/ExploreSectionListingView/WithControlPanel';
+import { DataType } from '@/constants/explore-section/list-views';
+import useExploreColumns from '@/hooks/useExploreColumns';
+import { sortStateAtom } from '@/state/explore-section/list-view-atoms';
+import { ExploreESHit, ExploreResource } from '@/types/explore-section/es';
+import FilterControls from '@/components/explore-section/ExploreSectionListingView/FilterControls';
+import ListingScrollNavControl from '@/components/explore-section/ExploreSectionListingView/ListingScrollNavControl';
+import { fetchESResourceByIds } from '@/api/explore-section/resources';
+import { esQueryById } from '@/queries/explore-section/data';
+
+type Props = {
+  dataType: DataType;
+  resourceIds: string[];
+  accessToken: string;
+};
+
+export default function ExperimentBookmarks({ dataType, resourceIds, accessToken }: Props) {
+  const [sortState, setSortState] = useAtom(sortStateAtom);
+  const [bookmarkedExperimentResources, setBookmarkedExperimentResources] =
+    useState<ExploreESHit<ExploreResource>[]>();
+  const columns = useExploreColumns(setSortState, sortState, [], null, dataType);
+
+  useEffect(() => {
+    fetchESResourceByIds(accessToken, esQueryById(resourceIds)).then((experimentResources) => {
+      setBookmarkedExperimentResources(experimentResources);
+    });
+  }, [resourceIds, accessToken]);
+
+  return (
+    <div className="h-full bg-[#d1d1d1]" data-testid="explore-section-listing-view">
+      <div className="grid h-full max-h-[calc(100vh-3.3rem)] w-full grid-cols-[auto_max-content] grid-rows-1 overflow-x-auto overflow-y-hidden">
+        <WithControlPanel dataType={dataType} brainRegionSource="selected">
+          {({ activeColumns, displayControlPanel, setDisplayControlPanel, filters }) => (
+            <>
+              <FilterControls
+                filters={filters}
+                displayControlPanel={displayControlPanel}
+                dataType={dataType}
+                setDisplayControlPanel={setDisplayControlPanel}
+                className="sticky top-0 !max-h-24 px-4 py-5"
+              >
+                <div className="text-primary-8">
+                  Results <span className="font-bold">{bookmarkedExperimentResources?.length}</span>
+                </div>
+              </FilterControls>
+              <ExploreSectionTable
+                columns={columns.filter(({ key }) => (activeColumns || []).includes(key as string))}
+                dataSource={bookmarkedExperimentResources}
+                enableDownload
+                dataType={dataType}
+                brainRegionSource="selected"
+                loading={false}
+              />
+              <ListingScrollNavControl<HTMLDivElement>
+                extraRightSpace={displayControlPanel ? 480 : 0}
+                extraLeftSpace={12}
+                show
+                element={
+                  typeof document !== 'undefined'
+                    ? (document.querySelector('.ant-table-body') as HTMLDivElement)
+                    : undefined
+                }
+              />
+            </>
+          )}
+        </WithControlPanel>
+      </div>
+    </div>
+  );
+}