diff --git a/packages/frontend/src/components/Providers/Gen3Provider.tsx b/packages/frontend/src/components/Providers/Gen3Provider.tsx index 5d2784a0..3d0fe9d3 100644 --- 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 index f2684f6e..06729acc 100644 --- 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 ( - <> + -
- -
+ Cohort Discovery + + + {(Object.keys(config.leftNav) as Array).map((key)=>{ + return ( + {config.leftNav[key].imageAlt} + {config.leftNav[key].title} + ); + })} + + + + + + + + Saved Cohorts tab content + + + + Request tab content + +
- +
); }; diff --git a/packages/frontend/src/features/CohortDiscovery/IndexPanel.tsx b/packages/frontend/src/features/CohortDiscovery/IndexPanel.tsx index e31411d0..00b0720c 100644 --- 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 ( - + x.field)} @@ -129,7 +129,7 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection }: CohortDiscov {activeFieldDefinitions.length > 0 ? - :
+ :
+ />{/*TODO make config file for tabs*/} {emptySelection.title || ''} {emptySelection.subHead || ''} diff --git a/packages/frontend/src/features/CohortDiscovery/types.ts b/packages/frontend/src/features/CohortDiscovery/types.ts index d927104b..66d3e7b3 100644 --- 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; 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 index cd4afdbd..9e47f087 100644 --- a/packages/frontend/src/features/Navigation/NavPageLayout.tsx +++ b/packages/frontend/src/features/Navigation/NavPageLayout.tsx @@ -21,8 +21,8 @@ const NavPageLayout = ({ children, }: PropsWithChildren) => { const mainContentStyle = mainProps?.fixed - ? 'flex-1 flex overflow-hidden' - : 'flex grow'; + ? 'flex-1 flex overflow-hidden relative' + : 'flex grow relative'; return (
diff --git a/packages/sampleCommons/config/datacommons/apps/CohortDiscovery.json b/packages/sampleCommons/config/datacommons/apps/CohortDiscovery.json index 802f841b..b13c2992 100644 --- 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 index 765e66de..44984692 100644 --- 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 new file mode 100644 index 00000000..fffeef67 Binary files /dev/null and b/packages/sampleCommons/public/images/apps/cohort_requests.png differ diff --git a/packages/sampleCommons/public/images/apps/cohort_saved.png b/packages/sampleCommons/public/images/apps/cohort_saved.png new file mode 100644 index 00000000..6bfa783a Binary files /dev/null and b/packages/sampleCommons/public/images/apps/cohort_saved.png differ