Skip to content

Commit

Permalink
(HP-1232): HEAL Landing Page Updates: Reorg, Add Semantic Search Lang…
Browse files Browse the repository at this point in the history 
…uage & Button (#92)

* HP-1232: HEAL Landing Page Updates: Reorg, Add Semantic Search Language & Button

* Update packages/portal/src/components/Contents/LandingPageContent.tsx

* HP-1232: update styling

* HP-1232: lint fixes

* style update

---------

Co-authored-by: ocshawn <shawnoconnor@uchicago.edu>
Co-authored-by: Mingfei Shao <mshao1@uchicago.edu>
  • Loading branch information
@ocshawn @mfshao
3 people authored Sep 20, 2023
1 parent fe0dcad commit 671711a
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 49 deletions.
30 changes: 20 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 30 additions & 9 deletions packages/portal/config/landingPage.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,29 @@
"splitarea": {
"left": [
{
"text": "The <strong>HEAL Data Platform</strong> is a single web interface which allows visitors to <strong>discover, access and analyze data</strong> generated by HEAL funded, as well as HEAL relevant, studies within a distributed ecosystem. Making HEAL data easily findable enables secondary, cross-study analyses, promotes dissemination of the HEAL Initiative’s research and accelerates new discoveries."
"text": "The <strong>HEAL Data Platform</strong> is a single web interface which allows visitors to <strong>discover, access and analyze data</strong> generated by HEAL funded, as well as HEAL relevant, studies within a distributed ecosystem. Making HEAL data easily findable enables secondary, cross-study analyses, promotes dissemination of the HEAL Initiative's research and accelerates new discoveries."
},
{
"link": {
"href": "/discovery",
"linkType": "portal",
"text": "Explore Data"
"indent": {
"text": "<strong class='text-heal-magenta'>Search HEAL studies and related datasets</strong> <br/>for download or analysis in a workspace",
"link": {
"href": "/discovery",
"linkType": "portal",
"text": "Explore Data"
},
"style": "mb-4"
}
},
{
"text": "<strong>NIH HEAL Initiative&reg;</strong><br/>The Helping to End Addiction Long-term Initiative, or <strong>NIH HEAL Initiative&reg;</strong>, is an aggressive, trans-agency effort to speed scientific solutions to stem the national opioid and pain public health crises."
},
{
"link": {
"href": "/documentation/study-registration",
"linkType": "gen3ff",
"text": "Register Your Study"
}
},
{
"text": "The Helping to End Addiction Long-term Initiative, or <strong>NIH HEAL Initiative&reg;</strong>, is an aggressive, trans-agency effort to speed scientific solutions to stem the national opioid and pain public health crises."
},
{
"link": {
"href": "https://heal.nih.gov/",
Expand All @@ -40,12 +44,29 @@
{
"image": {
"src": "/images/HEAL_Initiative.jpeg",
"alt": "NIH HEAL initiative"
"alt": "NIH HEAL initiative",
"position": "top"
}
}
]
}
},
{
"full": [
{
"text": "<strong>HEAL Semantic Search</strong><br/> The NIH HEAL Initiative also provides HEAL Semantic Search, a complementary tool to use with the HEAL Data Platform. HEAL Semantic Search allows users to explore connections between biomedical concepts, identify variables related to a concept and discover datasets containing these variables. Uncovering novel relationships between concepts and variables may help researchers pose relevant research questions and identify potential collaborations."
},
{
"indent": {
"text": "<strong class='text-heal-magenta'>Search HEAL with semantic search</strong>",
"link": {
"href": "https://healdatafair.org/resources/semanticsearch",
"text": "HEAL Semantic Search"
}
}
}
]
},
{
"break": "standard"
},
Expand Down
81 changes: 52 additions & 29 deletions packages/portal/src/components/Contents/LandingPageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,24 @@ export interface LandingPageContentProp {
}



export interface landingPageLink {
readonly href: string;
readonly text: string;
readonly linkType?: string;
}
export interface leftRightProps {
readonly text?: string;
readonly link?: {
readonly href: string;
readonly text: string;
readonly linkType?: string;
};
readonly link?: landingPageLink;
readonly image?: {
readonly src: string;
readonly alt: string;
readonly position?: string;
};
readonly indent?: {
readonly text?: string;
readonly link?: landingPageLink;
readonly style?: string;
};
}
export interface LandingPageProps {
Expand All @@ -39,6 +47,7 @@ export interface LandingPageProps {
readonly left: leftRightProps[];
readonly right: leftRightProps[];
};
readonly full?: leftRightProps[];
readonly break?: string;
readonly cardsArea?: {
readonly title: string;
Expand All @@ -60,41 +69,55 @@ export interface LandingPageProps {
const LandingPageContent = ({ content }: LandingPageContentProp) => {
const { basePath } = useRouter();
return (
<div className='sm:mt-8 2xl:mt-10 text-heal-dark_gray'>
<div className='sm:mt-3 2xl:mt-5 text-heal-dark_gray'>
{content?.body?.map((component, index) => {
if (component.title) {
return <Title key={index} className='mb-5 mx-20' order={component.title.level}>{component.title.text}</Title>;
return <Title key={index} className='sm:mb-3 2xl:mb-4 mx-20' order={component.title.level}>{component.title.text}</Title>;
}
const splitareaJsx = (area: leftRightProps[]) => area.map((obj, index) => {
if (obj.text) {
return <p key={index} className='prose sm:prose-base 2xl:prose-lg mb-4 !mt-0 max-w-full' dangerouslySetInnerHTML={{ __html: obj.text }} />;
}
if (obj.link) {
return <div className='heal-btn mb-4 mr-5 align-top' key={index}><Gen3Link className='flex flex-row items-center' href={obj.link.href} linkType={obj.link.linkType} text={obj.link.text} showExternalIcon /></div>;
}
if (obj.image) {
return (
<div key={index} className='h-full relative'>
<Image
src={`${basePath}${obj.image.src}`}
alt={obj.image.alt}
layout='fill'
objectFit='contain'
objectPosition={obj.image.position || ''}
/>
</div>
);
}
if (obj.indent) {
return <div className={`border-l-8 border-heal-magenta ml-1 pl-8 ${obj.indent.style || ''}`} key={`indent-${index}`}>
{obj.indent.text && <p key={`indent-text-${index}`} className='prose sm:prose-base 2xl:prose-lg !mt-0' dangerouslySetInnerHTML={{ __html: obj.indent.text }} />
}
{obj.indent.link && <div className='heal-btn mr-5' key={`indent-link-${index}`}><Gen3Link className='flex flex-row items-center' href={obj.indent.link.href} linkType={obj.indent.link.linkType} text={obj.indent.link.text} showExternalIcon /></div>}
</div>;
}
});
if (component.splitarea) {
const splitareaJsx = (area: leftRightProps[]) => area.map((obj, index) => {
if (obj.text) {
return <p key={index} className='prose sm:prose-base 2xl:prose-lg mb-5 !mt-0' dangerouslySetInnerHTML={{ __html: obj.text }} />;
}
if (obj.link) {
return <div className='heal-btn mb-5 mr-5' key={index}><Gen3Link className='flex flex-row items-center' href={obj.link.href} linkType={obj.link.linkType} text={obj.link.text} showExternalIcon /></div>;
}
if (obj.image) {
return (
<div key={index} className='h-full relative'>
<Image
src={`${basePath}${obj.image.src}`}
alt={obj.image.alt}
layout='fill'
objectFit='contain'
/>
</div>
);
}
});
return <div key={index} className='flex mx-20'>
<div className='basis-1/2 pr-10'>
<div className='sm:basis-7/12 2xl:basis-1/2 pr-10'>
{splitareaJsx(component.splitarea.left)}
</div>
<div className='basis-1/2'>
<div className='sm:basis-5/12 2xl:basis-1/2'>
{splitareaJsx(component.splitarea.right)}
</div>
</div>;
}

if (component.full) {
return <div key={index} className='mx-20'>
{splitareaJsx(component.full)}
</div>;
}
if (component.break) {
return <hr key={index} className='border sm:my-10 2xl:my-12 ' />;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/portal/src/components/MultiPartText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const MultiPartText = ({parts}: MultiPartTextProps) => {
'text': <span className='text-xl' key={i}>{content}</span>,
'boldText': <span className='text-xl font-bold' key={i}>{content}</span>,
'link': <a className='text-gen3-base_blue no-underline font-bold' href={link} key={i}> {content}</a>,
'outboundLink': <a className='text-gen3-base_blue flex flex-row items-baseline no-underline font-bold px-10 mb-5' href={link} target='_blank' rel='noreferrer' key={i}>
'outboundLink': <a className='text-gen3-base_blue flex flex-row items-baseline no-underline font-bold px-10 mb-4' href={link} target='_blank' rel='noreferrer' key={i}>
<FaExternalLinkAlt className='pr-1 pt-2'/> {content}</a>,
'bold': <Text className='font-bold text-4xl text-gen3-coal font-montserrat pb-8' key={i}>{content}</Text>,
'break': <br key={i}/>
Expand Down
3 changes: 3 additions & 0 deletions packages/portal/tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ const plugin = require('tailwindcss/plugin');

module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx,md,mdx}'],
safelist: [
'mb-8',
],
theme: {
extend: {
colors: {
Expand Down

0 comments on commit 671711a

Please sign in to comment.