GFF-224: Implement Cohort Discovery Left Side Navigation Panel and st…

…yle updates
uc-cdis · Jan 16, 2025 · 2305ab8 · 2305ab8
1 parent 9e81f7e
commit 2305ab8
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 17 deletions.
diff --git a/packages/frontend/src/components/Providers/Gen3Provider.tsx b/packages/frontend/src/components/Providers/Gen3Provider.tsx
@@ -32,6 +32,14 @@ const createMantineTheme = (
   const theme = createTheme({
     // use V2 font in MantineProvider
     fontFamily: fonts.fontFamily,
+    headings: {
+      // properties for individual headings
+      sizes: {
+        h1: {
+          fontSize: '1.5rem',
+        },
+      },
+    },
     // Override default blue color until styles are determined
     colors: {
       white: [

diff --git a/packages/frontend/src/features/CohortDiscovery/CohortDiscovery.tsx b/packages/frontend/src/features/CohortDiscovery/CohortDiscovery.tsx
@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { PersistGate } from 'redux-persist/integration/react';
 import { persistStore } from 'redux-persist';
 import { useGetCSRFQuery } from '@gen3/core';
-import { Center, Loader } from '@mantine/core';
+import { Title, Center, Loader, Tabs } from '@mantine/core';
 import { CohortDiscoveryConfig } from './types';
 import IndexPanel from './IndexPanel';
 import { AppStore } from './appApi';
+import Image from 'next/image';
 
 const persistor = persistStore(AppStore);
 
@@ -21,18 +22,50 @@ const CohortDiscovery = (config: CohortDiscoveryConfig) => {
   }
 
   return (
-    <>
+    <React.Fragment>
       <PersistGate persistor={persistor}>
-        <div className="w-full h-full">
-          <IndexPanel
-            dataConfig={config.dataIndexes[0].dataConfig}
-            tabTitle={config.dataIndexes[0].tabTitle}
-            tabs={config.dataIndexes[0].tabs}
-            emptySelection={config.emptySelection}
-          />
-        </div>
+        <Title order={1} className="absolute top-6 left-[154px]">Cohort Discovery</Title>
+        <Tabs defaultValue="build" orientation="vertical" classNames={{
+          root: 'w-full h-full',
+          list: 'bg-base-light before:content-none pt-20',
+          tab: 'border-0 border-l-4 rounded-none data-[active=true]:border-accent-warm data-[active=true]:bg-base-max text-center',
+          tabLabel: 'w-full',
+          panel: 'pt-16'
+        }}>
+          <Tabs.List>
+            {(Object.keys(config.leftNav) as Array<keyof typeof config.leftNav>).map((key)=>{
+              return (<Tabs.Tab value={key} key={key} >
+                <Image
+                  src={config.leftNav[key].image}
+                  alt={config.leftNav[key].imageAlt}
+                  width={40}
+                  height={40}
+                  className="inline-block mb-1"
+                />
+                <strong className="block">{config.leftNav[key].title}</strong>
+              </Tabs.Tab>);
+            })}
+          </Tabs.List>
+
+          <Tabs.Panel value="build">
+            <IndexPanel
+              dataConfig={config.dataIndexes[0].dataConfig}
+              tabTitle={config.dataIndexes[0].tabTitle}
+              tabs={config.dataIndexes[0].tabs}
+              emptySelection={config.emptySelection}
+            />
+          </Tabs.Panel>
+
+          <Tabs.Panel value="saved">
+            Saved Cohorts tab content
+          </Tabs.Panel>
+
+          <Tabs.Panel value="request">
+            Request tab content
+          </Tabs.Panel>
+        </Tabs>
       </PersistGate>
-    </>
+    </React.Fragment>
   );
 };
 

diff --git a/packages/frontend/src/features/CohortDiscovery/IndexPanel.tsx b/packages/frontend/src/features/CohortDiscovery/IndexPanel.tsx
@@ -114,7 +114,7 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection }: CohortDiscov
   return (
     <Stack>
       <CohortManager index={index} />
-      <Flex className="w-full h-full bg-base-light pb-4">
+      <Flex className="flex h-full bg-base-light pb-4 ml-4">
         <FacetSelectionPanel
           categories={categories}
           selectedFields={activeFieldDefinitions.map((x) => x.field)}
@@ -129,15 +129,15 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection }: CohortDiscov
           <ActionButtonGroup />
           {activeFieldDefinitions.length > 0 ?
             <ChartsAndFacetsPanel index={index} facets={activeFieldDefinitions} />
-          : <Center className="w-full h-full mx-2 bg-base-max">
+          : <Center className="h-full mx-2 bg-base-max">
               <Box className="text-center m-4">
                 <Image
                   src={`/images/apps/${emptySelection.image}`}
                   alt={emptySelection.imageAlt}
                   width={240}
                   height={240}
                   className="inline-block mb-4"
-                />
+                />{/*TODO make config file for tabs*/}
                 <Title order={3}>{emptySelection.title || ''}</Title>
                 <Text>{emptySelection.subHead || ''}</Text>
               </Box>

diff --git a/packages/frontend/src/features/CohortDiscovery/types.ts b/packages/frontend/src/features/CohortDiscovery/types.ts
@@ -8,6 +8,18 @@ interface EmptySelection {
   subHead?: string;
 }
 
+interface LeftNavItem {
+  image: string;
+  imageAlt: string;
+  title: string;
+}
+
+interface LeftNav {
+  build: LeftNavItem;
+  saved: LeftNavItem;
+  rquest: LeftNavItem;
+}
+
 export interface CohortDiscoveryGroup {
   readonly dataConfig: DataTypeConfig; // database config
   readonly tabTitle: string; // title of the tab
@@ -18,6 +30,7 @@ export interface CohortDiscoveryGroup {
 export interface CohortDiscoveryConfig extends Gen3AppConfigData {
   dataIndexes: Array<CohortDiscoveryGroup>;
   emptySelection: EmptySelection;
+  leftNav: LeftNav;
 }
 
 export type SupportedFacetTypes = 'enum';
diff --git a/packages/frontend/src/features/Navigation/NavPageLayout.tsx b/packages/frontend/src/features/Navigation/NavPageLayout.tsx
@@ -21,8 +21,8 @@ const NavPageLayout = ({
   children,
 }: PropsWithChildren<NavPageLayoutProps>) => {
   const mainContentStyle = mainProps?.fixed
-    ? 'flex-1 flex overflow-hidden'
-    : 'flex grow';
+    ? 'flex-1 flex overflow-hidden relative'
+    : 'flex grow relative';
   return (
     <div className="flex flex-col justify-between h-screen">
       <Head>

diff --git a/packages/sampleCommons/config/datacommons/apps/CohortDiscovery.json b/packages/sampleCommons/config/datacommons/apps/CohortDiscovery.json
@@ -6,6 +6,23 @@
     "title": "Build Your Cohort",
     "subHead": "Select the critera on the left to include an item."
   },
+  "leftNav": {
+    "build": {
+      "image": "/images/apps/cohort_none.png",
+      "imageAlt": "",
+      "title": "Build Cohorts"
+    },
+    "saved": {
+      "image": "/images/apps/cohort_saved.png",
+      "imageAlt": "",
+      "title": "Saved Cohorts"
+    },
+    "request": {
+      "image": "/images/apps/cohort_requests.png",
+      "imageAlt": "",
+      "title": "Request"
+    }
+  },
   "dataIndexes": [
     {
       "dataConfig": {

diff --git a/packages/sampleCommons/config/gen3/apps/CohortDiscovery.json b/packages/sampleCommons/config/gen3/apps/CohortDiscovery.json
@@ -6,6 +6,23 @@
     "title": "Build Your Cohort",
     "subHead": "Select the critera on the left to include an item."
   },
+  "leftNav": {
+    "build": {
+      "image": "/images/apps/cohort_none.png",
+      "imageAlt": "",
+      "title": "Build Cohorts"
+    },
+    "saved": {
+      "image": "/images/apps/cohort_saved.png",
+      "imageAlt": "",
+      "title": "Saved Cohorts"
+    },
+    "request": {
+      "image": "/images/apps/cohort_requests.png",
+      "imageAlt": "",
+      "title": "Request"
+    }
+  },
   "dataIndexes": [
     {
       "dataConfig": {

diff --git a/packages/sampleCommons/public/images/apps/cohort_requests.png b/packages/sampleCommons/public/images/apps/cohort_requests.png
diff --git a/packages/sampleCommons/public/images/apps/cohort_saved.png b/packages/sampleCommons/public/images/apps/cohort_saved.png