Skip to content

Commit d32355a

Browse files
Fran McDadeFran McDade
Fran McDade
authored and
Fran McDade
committed
feat: add section help and questions (#6)
1 parent b27c458 commit d32355a

File tree

7 files changed

+202
-4
lines changed

7 files changed

+202
-4
lines changed

‎website/app/components/Home/common/constants.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const URLS = {
2+
ACCESS_CONSORTIUM: "https://access-ci.org",
3+
GALAXY_SYSTEM: "https://brc.usegalaxy.org",
4+
NCBI_DATASETS: "https://www.ncbi.nlm.nih.gov/datasets",
5+
TACC: "https://tacc.utexas.edu",
6+
UCSC_GENOME_BROWSER:
7+
"https://genome.ucsc.edu/cgi-bin/hgTracks?db=hub_3099159_GCF_000002765.5&lastVirtModeType=default&lastVirtModeExtraState=&virtModeType=default&virtMode=0&nonVirtPosition=&position=chr14%3A1097312%2D1107312&hgsid=2334740048_JURjoJTpdZ1arRgPWCUOn1kbfI2r",
8+
};

‎website/app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/common/constants.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { CardProps as DXCardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card";
2+
import { URLS } from "../../../../../../../common/constants";
23

34
const CARD_ACTION_LABEL = {
45
LEARN_MORE: "Learn More",
@@ -13,7 +14,7 @@ export const ANALYTICS_TOOLS: DXCardProps[] = [
1314
cardActions: [
1415
{
1516
label: CARD_ACTION_LABEL.LEARN_MORE,
16-
url: "https://brc.usegalaxy.org",
17+
url: URLS.GALAXY_SYSTEM,
1718
},
1819
],
1920
media: {
@@ -28,7 +29,7 @@ export const ANALYTICS_TOOLS: DXCardProps[] = [
2829
cardActions: [
2930
{
3031
label: CARD_ACTION_LABEL.LEARN_MORE,
31-
url: "https://www.ncbi.nlm.nih.gov/datasets",
32+
url: URLS.NCBI_DATASETS,
3233
},
3334
],
3435
media: {
@@ -43,7 +44,7 @@ export const ANALYTICS_TOOLS: DXCardProps[] = [
4344
cardActions: [
4445
{
4546
label: CARD_ACTION_LABEL.LEARN_MORE,
46-
url: "https://genome.ucsc.edu/cgi-bin/hgTracks?db=hub_3099159_GCF_000002765.5&lastVirtModeType=default&lastVirtModeExtraState=&virtModeType=default&virtMode=0&nonVirtPosition=&position=chr14%3A1097312-1107312&hgsid=2334740048_JURjoJTpdZ1arRgPWCUOn1kbfI2r",
47+
url: URLS.UCSC_GENOME_BROWSER,
4748
},
4849
],
4950
media: {
@@ -58,7 +59,7 @@ export const ANALYTICS_TOOLS: DXCardProps[] = [
5859
cardActions: [
5960
{
6061
label: CARD_ACTION_LABEL.LEARN_MORE,
61-
url: "https://tacc.utexas.edu",
62+
url: URLS.TACC,
6263
},
6364
],
6465
media: {

‎website/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
2+
import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
3+
import {
4+
textBodyLarge4002Lines,
5+
textBodyLarge500,
6+
} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts";
7+
import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows";
8+
import styled from "@emotion/styled";
9+
import { Accordion as MAccordion } from "@mui/material";
10+
import { sectionGrid } from "../../../../section.styles";
11+
12+
export const Grid = styled.div`
13+
${sectionGrid};
14+
grid-column: 1 / -1;
15+
grid-template-columns: 1fr;
16+
17+
${mediaTabletUp} {
18+
grid-column: 6 / -1;
19+
grid-template-columns: repeat(7, 1fr);
20+
}
21+
`;
22+
23+
export const StyledAccordion = styled(MAccordion)`
24+
box-shadow: ${elevation01} !important;
25+
display: grid;
26+
grid-column: 1 / -1;
27+
padding: 12px 0;
28+
29+
.MuiAccordionSummary-root {
30+
flex-direction: row;
31+
min-height: 0;
32+
padding: 8px 20px;
33+
34+
.MuiAccordionSummary-content {
35+
${textBodyLarge500};
36+
margin: 0;
37+
}
38+
}
39+
40+
.MuiAccordionDetails-root {
41+
${textBodyLarge4002Lines};
42+
color: ${inkLight};
43+
margin: 0;
44+
padding: 0 20px 8px;
45+
46+
.MuiLink-root {
47+
color: #28285b;
48+
text-decoration: underline;
49+
50+
&:hover {
51+
text-decoration: none;
52+
}
53+
}
54+
}
55+
` as typeof MAccordion;

‎website/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { AddIcon as DXAddIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/AddIcon/addIcon";
2+
import { RoundedPaper as DXRoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles";
3+
import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
4+
import {
5+
AccordionDetails as MAccordionDetails,
6+
AccordionSummary as MAccordionSummary,
7+
} from "@mui/material";
8+
import { URLS } from "../../../../../../common/constants";
9+
import { Grid, StyledAccordion } from "./questions.styles";
10+
11+
export const Questions = (): JSX.Element => {
12+
const expandIcon = <DXAddIcon color="inkLight" fontSize="small" />;
13+
return (
14+
<Grid>
15+
<StyledAccordion component={DXRoundedPaper}>
16+
<MAccordionSummary expandIcon={expandIcon}>
17+
Where is the data?
18+
</MAccordionSummary>
19+
<MAccordionDetails>
20+
I used to be able to access many types of data including genomes and
21+
associated annotations. Where do I find it now? The data is accessible
22+
via <DXLink label="NCBI Datasets" url={URLS.NCBI_DATASETS} /> and{" "}
23+
<DXLink label="UCSC Genome Browser" url={URLS.UCSC_GENOME_BROWSER} />.
24+
</MAccordionDetails>
25+
</StyledAccordion>
26+
<StyledAccordion component={DXRoundedPaper}>
27+
<MAccordionSummary expandIcon={expandIcon}>
28+
How do I do analyses?
29+
</MAccordionSummary>
30+
<MAccordionDetails>
31+
I used rely on VeuPathDb to perform my analyses. Now that it is no
32+
longer available, what can I do? Many types of analyses are possible
33+
via integration with{" "}
34+
<DXLink label="Galaxy system" url={URLS.GALAXY_SYSTEM} /> while we
35+
continue to build this new BRC resource.
36+
</MAccordionDetails>
37+
</StyledAccordion>
38+
<StyledAccordion component={DXRoundedPaper}>
39+
<MAccordionSummary expandIcon={expandIcon}>
40+
How does brc-analytics work?
41+
</MAccordionSummary>
42+
<MAccordionDetails>
43+
The new BRC will be built on a proven data analytics platform called
44+
Galaxy. It will be supported by powerful computational infrastructure
45+
provided by the Texas Advanced Computing Center (
46+
<DXLink label="TACC" url={URLS.TACC} />) and
47+
<DXLink label="ACCESS-CI" url={URLS.ACCESS_CONSORTIUM} /> consortium.
48+
It will rely on data from NCBI Datasets and the UCSC Genome Browser.
49+
Similarly to the original system it will support custom annotations.
50+
</MAccordionDetails>
51+
</StyledAccordion>
52+
</Grid>
53+
);
54+
};

‎website/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
2+
import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
3+
import styled from "@emotion/styled";
4+
import {
5+
Section,
6+
sectionGrid,
7+
SectionHeadline,
8+
SectionLayout as DefaultLayout,
9+
SectionSubtitle,
10+
SectionTitle,
11+
} from "../../section.styles";
12+
13+
export const StyledSection = styled(Section)`
14+
background-color: ${white};
15+
`;
16+
17+
export const SectionLayout = styled(DefaultLayout)`
18+
${sectionGrid};
19+
padding: 85px 16px 150px;
20+
`;
21+
22+
export const Headline = styled(SectionHeadline)`
23+
align-content: flex-start;
24+
grid-column: 1 / -1;
25+
max-width: 504px;
26+
27+
${mediaTabletUp} {
28+
grid-column: 1 / 5;
29+
max-width: unset;
30+
}
31+
`;
32+
33+
export const StyledSectionTitle = styled(SectionTitle)`
34+
max-width: 276px;
35+
`;
36+
37+
export const StyledSectionSubTitle = styled(SectionSubtitle)`
38+
line-height: 28px;
39+
40+
.MuiLink-root {
41+
color: #28285b;
42+
text-decoration: underline;
43+
44+
&:hover {
45+
text-decoration: none;
46+
}
47+
}
48+
`;

‎website/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link";
2+
import { Questions } from "./components/Questions/questions";
3+
import {
4+
Headline,
5+
SectionLayout,
6+
StyledSection as Section,
7+
StyledSectionSubTitle,
8+
StyledSectionTitle,
9+
} from "./sectionHelp.styles";
10+
11+
export const SectionHelp = (): JSX.Element => {
12+
return (
13+
<Section>
14+
<SectionLayout>
15+
<Headline>
16+
<StyledSectionTitle>Your questions, answered</StyledSectionTitle>
17+
<StyledSectionSubTitle>
18+
If you need further assistance, feel free to reach out to us at{" "}
19+
<DXLink
20+
label="[email protected]"
21+
url="mailto:[email protected]"
22+
/>
23+
. We&#39;re here to help!
24+
</StyledSectionSubTitle>
25+
</Headline>
26+
<Questions />
27+
</SectionLayout>
28+
</Section>
29+
);
30+
};

‎website/app/views/HomeView/homeView.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Fragment } from "react";
22
import { SectionAnalytics } from "../../components/Home/components/Section/components/SectionAnalytics/sectionAnalytics";
3+
import { SectionHelp } from "../../components/Home/components/Section/components/SectionHelp/sectionHelp";
34
import { SectionHero } from "../../components/Home/components/Section/components/SectionHero/sectionHero";
45
import { SectionSubHero } from "../../components/Home/components/Section/components/SectionSubHero/sectionSubHero";
56

@@ -9,6 +10,7 @@ export const HomeView = (): JSX.Element => {
910
<SectionHero />
1011
<SectionSubHero />
1112
<SectionAnalytics />
13+
<SectionHelp />
1214
</Fragment>
1315
);
1416
};

0 commit comments

Comments
 (0)