add explore browse page - part-1

src/api/entitycore/types/extended-entity-type.ts

@@ -16,7 +16,3 @@ export const ExtendedEntitiesTypeDict = {
 
 export type TExtendedEntitiesTypeDict =
   (typeof ExtendedEntitiesTypeDict)[keyof typeof ExtendedEntitiesTypeDict];
-
-export const DEFAULT_CHECKLIST_RENDER_LENGTH = 8;
-export const PAGE_SIZE = 30;
-export const PAGE_NUMBER = 1;

src/api/entitycore/types/shared/response.ts

@@ -1,4 +1,4 @@
-interface Pagination {
+export interface Pagination {
   page: number;
   page_size: number;
   total_items: number;

src/app/app/log-in/page.tsx

@@ -3,13 +3,9 @@
 import { useSearchParams } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 
-import {
-  basePath,
-  isServer,
-  LATEST_VISITED_PROJECT_KEY,
-  V2_MIGRATION_TEMPORARY_BASE_PATH,
-} from '@/config';
+import { basePath, isServer, V2_MIGRATION_TEMPORARY_BASE_PATH } from '@/config';
 import { useLocalStorage } from '@/hooks/use-local-storage';
+import { LATEST_VISITED_PROJECT_KEY } from '@/constants';
 
 export default function Page() {
   const searchParams = useSearchParams();

src/app/app/v2/[virtualLabId]/[projectId]/explore/(browse)/browse/[type]/page.tsx

@@ -0,0 +1,40 @@
+import { notFound } from 'next/navigation';
+import { match, P } from 'ts-pattern';
+import snakeCase from 'lodash/snakeCase';
+
+import { getEntityByExtendedType } from '@/entity-configuration/domain/helpers';
+import { BrowseLibraryScope } from '@/features/views/listing/browse-library';
+import { BrowseStandardScope } from '@/features/views/listing/browse-scope';
+import { WorkspaceScope } from '@/constants';
+import { KebabCase } from '@/utils/type';
+
+import type { TExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
+import type { ServerSideComponentProp, WorkspaceContext } from '@/types/common';
+import type { TWorkspaceScope } from '@/constants';
+
+export default async function Page({
+  params,
+  searchParams,
+}: ServerSideComponentProp<
+  WorkspaceContext & { type: KebabCase<TExtendedEntitiesTypeDict> },
+  { scope: TWorkspaceScope | null }
+>) {
+  const { type } = await params;
+  const { scope } = await searchParams;
+
+  const entity = getEntityByExtendedType({ type: snakeCase(type) as TExtendedEntitiesTypeDict });
+
+  const content = match({ scope, entity })
+    .with({ entity: P.nullish }, () => notFound())
+    .with(
+      {
+        scope: P.union(P.nullish, WorkspaceScope.Public, WorkspaceScope.Project),
+        entity: P.not(P.nullish),
+      },
+      () => <BrowseStandardScope />
+    )
+    .with({ scope: WorkspaceScope.Bookmarks }, () => <BrowseLibraryScope />)
+    .otherwise(() => notFound());
+
+  return content;
+}

src/app/app/v2/[virtualLabId]/[projectId]/explore/(browse)/layout.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+import { DefaultContent as ExploreDefaultContent } from '@/ui/segments/explore/default-content';
+import { ExploreInnerLayout } from '@/ui/layouts/explore-inner-layout';
+import { ExploreHeader } from '@/ui/segments/explore/header';
+import { ExploreLayout } from '@/ui/layouts/explore-layout';
+import { resolveDataKey } from '@/utils/key-builder';
+
+import type { ServerSideComponentProp, WorkspaceContext } from '@/types/common';
+
+export default async function Page({
+  children,
+  params,
+}: ServerSideComponentProp<WorkspaceContext, null> & { children: ReactNode }) {
+  const { projectId } = await params;
+
+  const dataKey = resolveDataKey({ projectId, section: 'explore' });
+
+  return (
+    <ExploreLayout>
+      <ExploreHeader />
+      <ExploreInnerLayout>
+        <ExploreDefaultContent dataKey={dataKey}>{children}</ExploreDefaultContent>
+      </ExploreInnerLayout>
+    </ExploreLayout>
+  );
+}

src/app/app/v2/[virtualLabId]/[projectId]/explore/(browse)/page.tsx

@@ -0,0 +1,13 @@
+import { resolveDataKey } from '@/utils/key-builder';
+import { Atlas } from '@/ui/segments/explore/atlas';
+
+import type { ServerSideComponentProp, WorkspaceContext } from '@/types/common';
+
+export default async function Page({
+  params: promisedParams,
+}: ServerSideComponentProp<WorkspaceContext, null>) {
+  const { projectId } = await promisedParams;
+  const dataKey = resolveDataKey({ projectId, section: 'explore' });
+
+  return <Atlas dataKey={dataKey} />;
+}

src/app/app/v2/[virtualLabId]/[projectId]/explore/(view)/view/[type]/[id]/page.tsx

@@ -0,0 +1,18 @@
+import type { TExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
+import type { ServerSideComponentProp, WorkspaceContext } from '@/types/common';
+import type { KebabCase } from '@/utils/type';
+
+export default async function Page({
+  params,
+}: ServerSideComponentProp<
+  WorkspaceContext & { type: KebabCase<TExtendedEntitiesTypeDict>; id: string },
+  null
+>) {
+  const { virtualLabId, projectId, type, id } = await params;
+
+  return (
+    <div>
+      <pre>{JSON.stringify({ virtualLabId, projectId, type, id }, null, 2)}</pre>
+    </div>
+  );
+}

src/app/app/v2/[virtualLabId]/[projectId]/explore/(view)/view/layout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <div>{children}</div>;
+}

src/app/app/v2/[virtualLabId]/[projectId]/layout.tsx

@@ -15,12 +15,12 @@ export default function Layout({ children }: Props) {
     <AppOnboardingProvider>
       <div className="h-screen w-full">
         <ProjectRootLayout>
-          <div className="w-full p-3 [grid-area:header]">
+          <div className="w-full p-3 pb-0 [grid-area:header]">
             <WorkspaceTopMenu />
           </div>
           <div
             id="workspace-body"
-            className="secondary-scrollbar w-full overflow-y-auto py-3 [grid-area:main]"
+            className="secondary-scrollbar w-full overflow-y-auto pb-3 [grid-area:main]"
           >
             {children}
           </div>

src/components/CenteredMessage/index.tsx

@@ -5,7 +5,7 @@ type CenteredMessageProps = {
   icon?: ReactElement<any>;
 };
 
-export default function CenteredMessage({ message, icon }: CenteredMessageProps) {
+export function CenteredMessage({ message, icon }: CenteredMessageProps) {
   return (
     <div className="flex h-40 items-center justify-center">
       <div className="text-center">
@@ -15,3 +15,5 @@ export default function CenteredMessage({ message, icon }: CenteredMessageProps)
     </div>
   );
 }
+
+export default CenteredMessage;

src/components/Search/index.tsx

@@ -60,7 +60,7 @@ export default function Search<T extends DefaultOptionType>({
             colorBgContainer,
             colorBgElevated: '#003A8C', // Drop down list bg
             colorBorder: colorBgContainer, // Makes it "transparent"
-            colorPrimary: 'white', // Seleced dropdown items color
+            colorPrimary: 'white', // Selected dropdown items color
             colorText: 'white', // Input value text
             colorTextSecondary: 'white', // Control item check mark
             colorTextTertiary: 'white', // Clear icon hover

src/components/detail-view-tabs/index.tsx

@@ -84,7 +84,7 @@ export function useTabs<T extends string>({
   defaultKey = undefined,
 }: Omit<Props<T>, 'cls'>) {
   const [activeTab, setActiveTab] = useQueryState(
-    `${tabKey}`,
+    tabKey,
     parseAsString
       .withOptions({ shallow, clearOnDefault })
       .withDefault(defaultKey ?? tabsConfig?.at(0)!.key!) as Parser<T>

src/components/explore-section/ExploreSectionListingView/ExploreSectionNameSearch.tsx

@@ -1,17 +1,16 @@
 import { ChangeEvent, RefObject, useEffect, useRef, useState } from 'react';
-import { useAtom, useSetAtom } from 'jotai';
 import { SearchOutlined } from '@ant-design/icons';
+import { useAtom, useSetAtom } from 'jotai';
 
 import {
   pageNumberAtom,
   previousDataAtom,
   searchStringAtom,
 } from '@/state/explore-section/list-view-atoms';
-import {
-  PAGE_NUMBER,
-  TExtendedEntitiesTypeDict,
-} from '@/api/entitycore/types/extended-entity-type';
 import { useDebouncedCallback } from '@/hooks/hooks';
+import { DEFAULT_PAGE_NUMBER } from '@/constants';
+
+import type { TExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
 
 type SearchProps = {
   dataKey: string;
@@ -35,7 +34,7 @@ export default function ExploreSectionNameSearch({ dataType, dataKey }: SearchPr
   const debouncedUpdateAtom = useDebouncedCallback(
     (searchStr: string) => {
       setPrevData([]);
-      setPageNumber(PAGE_NUMBER);
+      setPageNumber(DEFAULT_PAGE_NUMBER);
       setSearchString(searchStr);
     },
     [setPageNumber, setPrevData, setSearchString],

src/components/explore-section/ExploreSectionListingView/LoadMoreButton.tsx

@@ -8,9 +8,9 @@ import {
 } from '@/state/explore-section/list-view-atoms';
 import { useBrainRegionHierarchy } from '@/features/brain-region-hierarchy/context';
 import { ExploreDataScope } from '@/types/explore-section/application';
-import { PAGE_SIZE } from '@/api/entitycore/types/extended-entity-type';
 import { VirtualLabInfo } from '@/types/virtual-lab/common';
 import { useLoadableValue } from '@/hooks/hooks';
+import { DEFAULT_PAGE_SIZE } from '@/constants';
 import { classNames } from '@/util/utils';
 
 import type { TExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
@@ -58,13 +58,13 @@ export function useLoadMore<T>(
   const loading = res.state === 'loading';
   const showLoadMore =
     res.state === 'hasData' &&
-    res.data.data.length + (res.data.pagination.page - 1) * PAGE_SIZE <
+    res.data.data.length + (res.data.pagination.page - 1) * DEFAULT_PAGE_SIZE <
       res.data.pagination.total_items;
 
   const loadMore = useCallback(
     (load: boolean = true) => {
       if (res.state === 'loading' || res.state === 'hasError' || !load) return;
-      if (res.data && res.data.data.length < PAGE_SIZE) return;
+      if (res.data && res.data.data.length < DEFAULT_PAGE_SIZE) return;
 
       // Store previous hits before fetching next page
       setPrevData(data);
@@ -109,7 +109,7 @@ export default function LoadMoreButton({
         hide();
       }}
     >
-      <span>Load {PAGE_SIZE} more results...</span>
+      <span>Load {DEFAULT_PAGE_SIZE} more results...</span>
     </Btn>
   );
 }

src/components/explore-section/ExploreSectionListingView/index.tsx

@@ -22,10 +22,8 @@ import {
 import { useBrainRegionHierarchy } from '@/features/brain-region-hierarchy/context';
 import { EntityCoreIdentifiable } from '@/api/entitycore/types/shared/global';
 import { ExploreDataScope } from '@/types/explore-section/application';
-import {
-  TExtendedEntitiesTypeDict,
-  PAGE_NUMBER,
-} from '@/api/entitycore/types/extended-entity-type';
+import { TExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
+import { DEFAULT_PAGE_NUMBER } from '@/constants';
 import { classNames } from '@/util/utils';
 
 import type { RenderButtonProps } from '@/components/explore-section/ExploreSectionListingView/useRowSelection';
@@ -90,7 +88,7 @@ export default function ExploreSectionListingView<T extends EntityCoreIdentifiab
   const setPageNumber = useSetAtom(pageNumberAtom(dataKeyExpand));
 
   const onSortChange = (newSortState: any) => {
-    setPageNumber(PAGE_NUMBER);
+    setPageNumber(DEFAULT_PAGE_NUMBER);
     setPrevData([]);
     setSortState(newSortState);
   };

src/components/listing-table/controls.tsx

@@ -57,7 +57,7 @@ export default function TableControls<T extends EntityCoreIdentifiable>({
   if (!visible) return null;
 
   return (
-    <div className="flex h-[100px] shrink-0 items-center justify-between gap-5 px-5">
+    <div className="flex h-[60px] shrink-0 items-center justify-between gap-5 px-5">
       {left}
       <div className="flex grow items-center">
         <div className="flex grow justify-center">{children}</div>

src/components/tree/elements/search.tsx

@@ -77,7 +77,8 @@ export default function TreeSearch({ options, onSelect }: Props) {
             '[&_.ant-select-selector]:rounded-full!',
             '[&_.ant-select-selector]:border-neutral-1!',
             '[&_.ant-select-selector]:shadow-lg!',
-            '[&_.ant-select-selection-search-input]:text-sm!'
+            '[&_.ant-select-selection-search-input]:text-sm!',
+            '[&_.ant-select-selection-placeholder]:text-neutral-3'
           )}
         />
       </ConfigProvider>

src/config.ts

@@ -11,9 +11,6 @@ export const thumbnailGenerationBaseUrl = env.NEXT_PUBLIC_THUMBNAIL_GENERATION_B
 export const entityCoreUrl = env.NEXT_PUBLIC_ENTITY_CORE_URL;
 export const entityCorePublicVirtualLabId = env.NEXT_PUBLIC_ENTITY_CORE_PUBLIC_VIRTUAL_LAB_ID;
 export const entityCorePublicProjectId = env.NEXT_PUBLIC_ENTITY_CORE_PUBLIC_PROJECT_ID;
-export const LATEST_VISITED_PROJECT_KEY = 'latest-visited-project';
-export const AUTO_INIT_WORKSPACE = 'automatic-init-workspace';
-export const AUTO_ONBOARDING_DONE = 'automatic-app-onboarding';
 
 // TODO: remove this when we move off from ui-v2 folder
 export const V2_MIGRATION_TEMPORARY_BASE_PATH = '/app/v2';

src/constants.tsx

@@ -0,0 +1,17 @@
+export const LATEST_VISITED_PROJECT_KEY = 'latest-visited-project';
+export const AUTO_INIT_WORKSPACE = 'automatic-init-workspace';
+export const AUTO_ONBOARDING_DONE = 'automatic-app-onboarding';
+
+export const DEFAULT_CHECKLIST_RENDER_LENGTH = 8;
+export const DEFAULT_PAGE_SIZE = 30;
+export const DEFAULT_PAGE_NUMBER = 1;
+
+export const WorkspaceScope = {
+  Public: 'public',
+  Project: 'project',
+  Bookmarks: 'bookmarks',
+  Custom: 'custom',
+  BuildMeModel: 'build-me-model',
+} as const;
+
+export type TWorkspaceScope = (typeof WorkspaceScope)[keyof typeof WorkspaceScope];

src/entity-configuration/definitions/index.ts

@@ -14,7 +14,7 @@ import type {
 import type { EntityCoreIdentifiable } from '@/api/entitycore/types/shared/global';
 import type { EntityCoreObjectTypes } from '@/api/entitycore/types';
 
-const fieldsDefinitionRegistry: Partial<FieldsDefinitionRegistry<EntityCoreObjectTypes>> = {
+export const fieldsDefinitionRegistry: Partial<FieldsDefinitionRegistry<EntityCoreObjectTypes>> = {
   ...CommonFieldsDefinition,
   ...ExperimentalFieldsDefinition,
   ...ExperimentFieldsDefinition,

src/features/bookmark/listing-table.tsx

@@ -15,7 +15,7 @@ import {
 } from '@/state/explore-section/list-view-atoms';
 import { ExploreDataScope } from '@/types/explore-section/application';
 import { resolveExploreDetailsPageUrl } from '@/utils/url-builder';
-import { PAGE_NUMBER } from '@/api/entitycore/types/extended-entity-type';
+import { DEFAULT_PAGE_NUMBER } from '@/constants';
 
 import type { EntityCoreIdentifiable } from '@/api/entitycore/types/shared/global';
 import type { TExtendedEntitiesTypeDict } from '@/api/entitycore/types/extended-entity-type';
@@ -46,7 +46,7 @@ export default function ListingTable<T extends EntityCoreIdentifiable>({
   const [sortState, setSortState] = useAtom(sortStateAtom({ key: dataKey }));
 
   const onSortChange = (newSortState: any) => {
-    setPageNumber(PAGE_NUMBER);
+    setPageNumber(DEFAULT_PAGE_NUMBER);
     setPrevData([]);
     setSortState(newSortState);
   };