diff --git a/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts b/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts index 8d55f80..f18fe59 100644 --- a/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts +++ b/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts @@ -1,7 +1,12 @@ import styled from "@emotion/styled"; -import { SectionLayout } from "../../section.styles"; +import { + sectionGrid, + sectionLayout, +} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; -export const StyledSectionLayout = styled(SectionLayout)` +export const SectionLayout = styled.div` + ${sectionLayout}; + ${sectionGrid}; grid-template-columns: 1fr; padding: 98px 16px; diff --git a/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx b/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx index 1cd0f3a..e6f292e 100644 --- a/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx +++ b/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx @@ -1,13 +1,13 @@ import { AboutContent } from "../../../../content"; import { Section } from "../../section.styles"; -import { StyledSectionLayout } from "./sectionAbout.styles"; +import { SectionLayout } from "./sectionAbout.styles"; export const SectionAbout = (): JSX.Element => { return (
- + - +
); }; diff --git a/app/components/About/components/Section/section.styles.ts b/app/components/About/components/Section/section.styles.ts index f2c5bb8..bad4b62 100644 --- a/app/components/About/components/Section/section.styles.ts +++ b/app/components/About/components/Section/section.styles.ts @@ -1,46 +1,6 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import styled from "@emotion/styled"; -import { - sectionGrid, - SectionLayout as DefaultLayout, -} from "../../../Layout/components/AppLayout/components/Section/section.styles"; +import { sectionSubHero } from "../../../Layout/components/AppLayout/components/Section/section.styles"; export const Section = styled.section` - background-color: ${white}; - position: relative; - width: 100%; - z-index: 1; -`; - -export const SectionLayout = styled(DefaultLayout)` - ${sectionGrid}; -`; - -export const SubHeadline = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - grid-column: 1 / -1; - - ${mediaTabletUp} { - grid-column: 1 / 6; - } -`; - -export const Subhead = styled.h2` - font-size: 40px; - font-weight: 500; - grid-column: 1 / -1; - letter-spacing: -0.4px; - line-height: 48px; - margin: 0; -`; - -export const SectionContent = styled.div` - grid-column: 1 / -1; - - ${mediaTabletUp} { - grid-column: 7 / -1; - } + ${sectionSubHero}; `; diff --git a/app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.styles.ts b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.styles.ts new file mode 100644 index 0000000..0f2a0e0 --- /dev/null +++ b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.styles.ts @@ -0,0 +1,45 @@ +import { ButtonPrimary } from "@databiosphere/findable-ui/lib/components/common/Button/components/ButtonPrimary/buttonPrimary"; +import { + CardContent as DXCardContent, + CardSection as DXCardSection, +} from "@databiosphere/findable-ui/lib/components/common/Card/card.styles"; +import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; + +const boxShadow = css` + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 -1px 0 0 rgba(0, 0, 0, 0.2) inset; +`; + +export const StyledCardSection = styled(DXCardSection)` + padding: 16px; + + ${mediaTabletUp} { + padding: 16px; + } +`; + +export const StyledCardContent = styled(DXCardContent)` + gap: 4px; +`; + +export const StyledButtonPrimary = styled(ButtonPrimary)` + background-color: #1f1f47; + ${boxShadow}; + justify-self: flex-start; + + &:hover { + background-color: #1f1f47; + ${boxShadow}; + } + + &:active { + background-color: #1f1f47; + box-shadow: none; + } + + &.Mui-disabled { + background-color: #1f1f47; + ${boxShadow}; + } +`; diff --git a/app/components/Entity/components/AnalysisMethod/analysisMethod.tsx b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.tsx similarity index 68% rename from app/components/Entity/components/AnalysisMethod/analysisMethod.tsx rename to app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.tsx index 4c7de8c..58a798a 100644 --- a/app/components/Entity/components/AnalysisMethod/analysisMethod.tsx +++ b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/components/AnalysisMethod/analysisMethod.tsx @@ -1,16 +1,16 @@ import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; -import { CardSection } from "@databiosphere/findable-ui/lib/components/common/Card/card.styles"; -import { CardText } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardText/cardText"; import { CardTitle } from "@databiosphere/findable-ui/lib/components/common/Card/components/CardTitle/cardTitle"; -import { FluidPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; +import { RoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; import { ANCHOR_TARGET, REL_ATTRIBUTE, } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; -import { Card } from "@mui/material"; +import { TEXT_BODY_SMALL_400_2_LINES } from "@databiosphere/findable-ui/lib/theme/common/typography"; +import { Card, Typography } from "@mui/material"; import { StyledButtonPrimary, StyledCardContent, + StyledCardSection, } from "./analysisMethod.styles"; export interface AnalysisMethodProps extends CardProps { @@ -18,17 +18,19 @@ export interface AnalysisMethodProps extends CardProps { } export const AnalysisMethod = ({ - Paper = FluidPaper, + Paper = RoundedPaper, text, title, url, }: AnalysisMethodProps): JSX.Element => { return ( - + {title} - {text} + + {text} + Analyze - + ); }; diff --git a/app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.styles.ts b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.styles.ts new file mode 100644 index 0000000..d43ad46 --- /dev/null +++ b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.styles.ts @@ -0,0 +1,53 @@ +import { mediaDesktopSmallUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import styled from "@emotion/styled"; +import { + sectionGrid, + sectionLayout, +} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; + +export const SectionLayout = styled.div` + ${sectionLayout}; + ${sectionGrid}; + gap: 64px 16px; + padding: 64px 16px; +`; + +export const VideoContainer = styled.div` + grid-column: 1 / -1; + + iframe { + aspect-ratio: 16 / 9; + } + + ${mediaDesktopSmallUp} { + grid-column: 1 / span 7; + } +`; + +export const SubHeadline = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + grid-column: 1 / -1; + grid-row: 1; + + ${mediaDesktopSmallUp} { + grid-column: 8 / -1; + margin-left: 48px; + } +`; + +export const Subhead = styled.h2` + font-family: "Inter Tight", sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 40px; + margin: 0; +`; + +export const SectionContent = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + grid-column: 1 / -1; +`; diff --git a/app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.tsx b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.tsx new file mode 100644 index 0000000..8630796 --- /dev/null +++ b/app/components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod.tsx @@ -0,0 +1,63 @@ +import { TEXT_BODY_LARGE_400_2_LINES } from "@databiosphere/findable-ui/lib/theme/common/typography"; +import { Typography } from "@mui/material"; +import { Video } from "../../../../../common/Video/video"; +import { + Assembly, + GenomeComparisons, + ProteinFolding, + Regulation, + SubHeadText, + Transcriptomics, + VariantCalling, +} from "../../../../content"; +import { Section } from "../../section.styles"; +import { AnalysisMethod } from "./components/AnalysisMethod/analysisMethod"; +import { + SectionContent, + SectionLayout, + Subhead, + SubHeadline, + VideoContainer, +} from "./sectionAnalysisMethod.styles"; + +export const SectionAnalysisMethod = (): JSX.Element => { + return ( +
+ + + + + How to run the workflows + + + + + + } + title="Variant calling" + url="" + /> + } + title="Transcriptomics" + url="" + /> + } title="Regulation" url="" /> + } title="Assembly" url="" /> + } + title="Genome comparisons" + url="" + /> + } + title="Protein folding" + url="" + /> + + +
+ ); +}; diff --git a/app/components/Analyze/components/Section/section.styles.ts b/app/components/Analyze/components/Section/section.styles.ts new file mode 100644 index 0000000..bad4b62 --- /dev/null +++ b/app/components/Analyze/components/Section/section.styles.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; +import { sectionSubHero } from "../../../Layout/components/AppLayout/components/Section/section.styles"; + +export const Section = styled.section` + ${sectionSubHero}; +`; diff --git a/app/components/Entity/components/AnalysisMethod/content/assembly.mdx b/app/components/Analyze/content/AnalysisMethod/assembly.mdx similarity index 100% rename from app/components/Entity/components/AnalysisMethod/content/assembly.mdx rename to app/components/Analyze/content/AnalysisMethod/assembly.mdx diff --git a/app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx b/app/components/Analyze/content/AnalysisMethod/genomeComparisons.mdx similarity index 100% rename from app/components/Entity/components/AnalysisMethod/content/genomeComparisons.mdx rename to app/components/Analyze/content/AnalysisMethod/genomeComparisons.mdx diff --git a/app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx b/app/components/Analyze/content/AnalysisMethod/proteinFolding.mdx similarity index 100% rename from app/components/Entity/components/AnalysisMethod/content/proteinFolding.mdx rename to app/components/Analyze/content/AnalysisMethod/proteinFolding.mdx diff --git a/app/components/Entity/components/AnalysisMethod/content/regulation.mdx b/app/components/Analyze/content/AnalysisMethod/regulation.mdx similarity index 100% rename from app/components/Entity/components/AnalysisMethod/content/regulation.mdx rename to app/components/Analyze/content/AnalysisMethod/regulation.mdx diff --git a/app/components/Analyze/content/AnalysisMethod/subheadText.mdx b/app/components/Analyze/content/AnalysisMethod/subheadText.mdx new file mode 100644 index 0000000..301e5e5 --- /dev/null +++ b/app/components/Analyze/content/AnalysisMethod/subheadText.mdx @@ -0,0 +1,7 @@ +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean +commodo ligula eget dolor. Aenean massa. Cum sociis natoque +penatibus et magnis dis parturient montes, nascetur ridiculus mus. + +Donec quam felis, ultricies nec, pellentesque eu, pretium quis, +sem. Nulla consequat massa quis enim. Donec pede justo, fringilla +vel, aliquet nec, vulputate eget, arcu. diff --git a/app/components/Entity/components/AnalysisMethod/content/transcriptomics.mdx b/app/components/Analyze/content/AnalysisMethod/transcriptomics.mdx similarity index 100% rename from app/components/Entity/components/AnalysisMethod/content/transcriptomics.mdx rename to app/components/Analyze/content/AnalysisMethod/transcriptomics.mdx diff --git a/app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx b/app/components/Analyze/content/AnalysisMethod/variantCalling.mdx similarity index 100% rename from app/components/Entity/components/AnalysisMethod/content/variantCalling.mdx rename to app/components/Analyze/content/AnalysisMethod/variantCalling.mdx diff --git a/app/components/Analyze/content/index.tsx b/app/components/Analyze/content/index.tsx new file mode 100644 index 0000000..bf90e2e --- /dev/null +++ b/app/components/Analyze/content/index.tsx @@ -0,0 +1,7 @@ +export { default as Assembly } from "./AnalysisMethod/assembly.mdx"; +export { default as GenomeComparisons } from "./AnalysisMethod/genomeComparisons.mdx"; +export { default as ProteinFolding } from "./AnalysisMethod/proteinFolding.mdx"; +export { default as Regulation } from "./AnalysisMethod/regulation.mdx"; +export { default as SubHeadText } from "./AnalysisMethod/subheadText.mdx"; +export { default as Transcriptomics } from "./AnalysisMethod/transcriptomics.mdx"; +export { default as VariantCalling } from "./AnalysisMethod/variantCalling.mdx"; diff --git a/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts b/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts deleted file mode 100644 index 7bf6fce..0000000 --- a/app/components/Entity/components/AnalysisMethod/analysisMethod.styles.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { ButtonPrimary } from "@databiosphere/findable-ui/lib/components/common/Button/components/ButtonPrimary/buttonPrimary"; -import { CardContent } from "@databiosphere/findable-ui/lib/components/common/Card/card.styles"; -import styled from "@emotion/styled"; - -export const StyledCardContent = styled(CardContent)` - gap: 4px; -`; - -export const StyledButtonPrimary = styled(ButtonPrimary)` - justify-self: flex-start; - padding-bottom: 8px; - padding-top: 8px; -`; diff --git a/app/components/Entity/components/AnalysisMethod/content/index.tsx b/app/components/Entity/components/AnalysisMethod/content/index.tsx deleted file mode 100644 index d60cd0b..0000000 --- a/app/components/Entity/components/AnalysisMethod/content/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -export { default as Assembly } from "./assembly.mdx"; -export { default as GenomeComparisons } from "./genomeComparisons.mdx"; -export { default as ProteinFolding } from "./proteinFolding.mdx"; -export { default as Regulation } from "./regulation.mdx"; -export { default as Transcriptomics } from "./transcriptomics.mdx"; -export { default as VariantCalling } from "./variantCalling.mdx"; diff --git a/app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/analyticsTools.styles.ts b/app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/analyticsTools.styles.ts index 392a5f0..5ff26ee 100644 --- a/app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/analyticsTools.styles.ts +++ b/app/components/Home/components/Section/components/SectionAnalytics/components/AnalyticsTools/analyticsTools.styles.ts @@ -55,6 +55,11 @@ export const StyledCardActions = styled.div` .MuiLink-root { ${textBody500}; color: #035c94; + text-decoration: none; + + &:hover { + text-decoration: underline; + } } `; diff --git a/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts b/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts index 3e267bf..7bfb6e8 100644 --- a/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts +++ b/app/components/Home/components/Section/components/SectionAnalytics/sectionAnalytics.styles.ts @@ -3,7 +3,7 @@ import { smokeMain, } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import styled from "@emotion/styled"; -import { SectionLayout as DefaultLayout } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; +import { sectionLayout } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; import { SectionHeadline } from "../../section.styles"; export const Section = styled.section` @@ -13,7 +13,8 @@ export const Section = styled.section` width: 100%; `; -export const SectionLayout = styled(DefaultLayout)` +export const SectionLayout = styled.div` + ${sectionLayout}; display: flex; flex-direction: column; gap: 48px 16px; diff --git a/app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts b/app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts deleted file mode 100644 index 878a234..0000000 --- a/app/components/Home/components/Section/components/SectionBranding/sectionBranding.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import styled from "@emotion/styled"; - -export const Section = styled.section` - background-color: ${smokeLightest}; - position: fixed; - z-index: -1; -`; diff --git a/app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx b/app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx deleted file mode 100644 index 4f79d02..0000000 --- a/app/components/Home/components/Section/components/SectionBranding/sectionBranding.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Hero } from "./components/Hero/hero"; -import { Section } from "./sectionBranding.styles"; - -export const SectionBranding = (): JSX.Element => { - return ( -
- -
- ); -}; diff --git a/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts b/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts index d6161e9..b3e0276 100644 --- a/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts +++ b/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.styles.ts @@ -42,14 +42,5 @@ export const StyledAccordion = styled(MAccordion)` color: ${inkLight}; margin: 0; padding: 0 20px 8px; - - .MuiLink-root { - color: #28285b; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } } ` as typeof MAccordion; diff --git a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts index b10b064..f4a3d9f 100644 --- a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts +++ b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts @@ -6,7 +6,7 @@ import { import styled from "@emotion/styled"; import { sectionGrid, - SectionLayout as DefaultLayout, + sectionLayout, } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; import { SectionHeadline, @@ -20,7 +20,8 @@ export const Section = styled.section` width: 100%; `; -export const SectionLayout = styled(DefaultLayout)` +export const SectionLayout = styled.div` + ${sectionLayout}; ${sectionGrid}; padding: 85px 16px 150px; `; @@ -42,13 +43,4 @@ export const StyledSectionTitle = styled(SectionTitle)` export const StyledSectionSubTitle = styled(SectionSubtitle)` line-height: 28px; - - .MuiLink-root { - color: #28285b; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } `; diff --git a/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.styles.ts b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.styles.ts new file mode 100644 index 0000000..a750eab --- /dev/null +++ b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.styles.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; + +export const SVG = styled.svg` + position: absolute; + z-index: -1; +`; diff --git a/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx similarity index 97% rename from app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx rename to app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx index d495976..17fd3fe 100644 --- a/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -18,6 +18,7 @@ import { CoralPinkCircle } from "../../../../../../../Layout/components/Hero/com import { SmokeCircle } from "../../../../../../../Layout/components/Hero/components/Defs/SmokeCircle/smokeCircle"; import { SmokeRect } from "../../../../../../../Layout/components/Hero/components/Defs/SmokeRect/smokeRect"; import { YellowRect } from "../../../../../../../Layout/components/Hero/components/Defs/YellowRect/yellowRect"; +import { SVG } from "./hero.styles"; export interface HeroProps { gridSize?: number; @@ -29,7 +30,7 @@ export const Hero = ({ height = GRID_SIZE * 3, }: HeroProps): JSX.Element => { return ( - */} - + ); }; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts index 071cc85..d2a3fc9 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts @@ -2,15 +2,28 @@ import { mediaDesktopSmallUp, mediaTabletUp, } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + inkLight, + smokeLightest, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; import { + section, sectionGrid, - SectionLayout as DefaultLayout, + sectionLayout, } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; -export const SectionLayout = styled(DefaultLayout)` +export const Section = styled.section` + ${section}; + background-color: ${smokeLightest}; + overflow: hidden; + position: relative; /* positions svg */ + z-index: 0; /* section content above svg */ +`; + +export const SectionLayout = styled.div` + ${sectionLayout}; ${sectionGrid}; align-content: flex-end; min-height: 400px; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx index 9e1100f..a098c2a 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx @@ -1,9 +1,10 @@ import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; import { Button } from "@mui/material"; -import { Section } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; +import { Hero } from "./components/Hero/hero"; import { Head, Headline, + Section, SectionLayout, Subhead, SubHeadline, @@ -13,6 +14,7 @@ import { export const SectionHero = (): JSX.Element => { return (
+ diff --git a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts b/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts index a8fca09..a02ec0f 100644 --- a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts @@ -5,7 +5,7 @@ import { import styled from "@emotion/styled"; import { sectionGrid, - SectionLayout as DefaultLayout, + sectionLayout, } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; export const Section = styled.section` @@ -14,7 +14,8 @@ export const Section = styled.section` width: 100%; `; -export const SectionLayout = styled(DefaultLayout)` +export const SectionLayout = styled.div` + ${sectionLayout}; ${sectionGrid}; grid-template-columns: 1fr; justify-items: center; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/Chip/chip.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/Chip/chip.styles.ts deleted file mode 100644 index 3356934..0000000 --- a/app/components/Layout/components/AppLayout/components/Section/components/Chip/chip.styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import styled from "@emotion/styled"; -import { Chip as MChip } from "@mui/material"; - -export const StyledChip = styled(MChip)` - .MuiChip-label { - font-weight: 500; - line-height: 24px; - padding: 0 10px; - } -`; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding.styles.ts deleted file mode 100644 index a1ec4f4..0000000 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding.styles.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { smokeLightest } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import styled from "@emotion/styled"; - -export const Section = styled.section` - background-color: ${smokeLightest}; - position: fixed; - width: 100%; - z-index: 0; -`; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding.tsx deleted file mode 100644 index 4f79d02..0000000 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { Hero } from "./components/Hero/hero"; -import { Section } from "./sectionBranding.styles"; - -export const SectionBranding = (): JSX.Element => { - return ( -
- -
- ); -}; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts new file mode 100644 index 0000000..a750eab --- /dev/null +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.styles.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; + +export const SVG = styled.svg` + position: absolute; + z-index: -1; +`; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/components/Hero/hero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx similarity index 96% rename from app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/components/Hero/hero.tsx rename to app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx index 169f590..b418239 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionBranding/components/Hero/hero.tsx +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/components/Hero/hero.tsx @@ -10,6 +10,7 @@ import { CoralPinkCircle } from "../../../../../../../Hero/components/Defs/Coral import { SmokeCircle } from "../../../../../../../Hero/components/Defs/SmokeCircle/smokeCircle"; import { SmokeRect } from "../../../../../../../Hero/components/Defs/SmokeRect/smokeRect"; import { YellowRect } from "../../../../../../../Hero/components/Defs/YellowRect/yellowRect"; +import { SVG } from "./hero.styles"; export interface HeroProps { gridSize?: number; @@ -21,7 +22,7 @@ export const Hero = ({ height = GRID_SIZE * 1.5, }: HeroProps): JSX.Element => { return ( - ))} - + ); }; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts index 0e3d228..5e97aad 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.styles.ts @@ -1,19 +1,22 @@ import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + inkLight, + smokeLightest, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; -import { - sectionGrid, - SectionLayout as DefaultLayout, -} from "../../section.styles"; +import { section, sectionGrid, sectionLayout } from "../../section.styles"; export const Section = styled.section` - position: relative; /* Position relative to allow for z-index stacking */ - width: 100%; - z-index: 1; /* Above the background */ + ${section}; + background-color: ${smokeLightest}; + overflow: hidden; + position: relative; /* positions svg */ + z-index: 0; /* section content above svg */ `; -export const SectionLayout = styled(DefaultLayout)` +export const SectionLayout = styled.div` + ${sectionLayout}; ${sectionGrid}; min-height: 184px; padding: 56px 16px; @@ -26,6 +29,21 @@ export const Headline = styled.div` grid-column: 1 / -1; `; +export const Head = styled.h1` + font-family: "Inter Tight", sans-serif; + font-size: 64px; + font-weight: 500; + letter-spacing: -0.4px; + line-height: 72px; + margin: 0; + + ${mediaTabletUp} { + span { + display: block; + } + } +`; + export const SubHeadline = styled.div` grid-column: 1 / -1; diff --git a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx index 4bc24c1..aff6432 100644 --- a/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero.tsx @@ -3,8 +3,9 @@ import { Breadcrumbs, } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs"; import { ReactNode } from "react"; -import { Head } from "../../section.styles"; +import { Hero } from "./components/Hero/hero"; import { + Head, Headline, Section, SectionLayout, @@ -25,6 +26,7 @@ export const SectionHero = ({ }: SectionHeroProps): JSX.Element => { return (
+ diff --git a/app/components/Layout/components/AppLayout/components/Section/section.styles.ts b/app/components/Layout/components/AppLayout/components/Section/section.styles.ts index 5da263b..a4b8b55 100644 --- a/app/components/Layout/components/AppLayout/components/Section/section.styles.ts +++ b/app/components/Layout/components/AppLayout/components/Section/section.styles.ts @@ -1,7 +1,13 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { + smokeMain, + white, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { ThemeProps } from "@databiosphere/findable-ui/lib/theme/theme"; import { css } from "@emotion/react"; -import styled from "@emotion/styled"; -import { Divider as MDivider } from "@mui/material"; + +export const section = css` + width: 100%; +`; export const sectionGrid = css` display: grid; @@ -9,33 +15,14 @@ export const sectionGrid = css` grid-template-columns: repeat(12, 1fr); `; -export const Section = styled.section` - width: 100%; -`; - -export const SectionLayout = styled.div` +export const sectionLayout = css` box-sizing: content-box; margin: 0 auto; max-width: 1136px; `; -export const Head = styled.h1` - font-family: "Inter Tight", sans-serif; - font-size: 64px; - font-weight: 500; - letter-spacing: -0.4px; - line-height: 72px; - margin: 0; - - ${mediaTabletUp} { - span { - display: block; - } - } -`; - -export const StyledDivider = styled(MDivider)` - margin: 0 auto; - max-width: 1136px; - width: 100%; +export const sectionSubHero = (props: ThemeProps) => css` + ${section}; + background-color: ${white(props)}; + border-top: 1px solid ${smokeMain(props)}; `; diff --git a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts index e08d076..a268baf 100644 --- a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts +++ b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts @@ -1,7 +1,5 @@ -import { - inkLight, - smokeMain, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBody500, textBodyLarge4002Lines, @@ -9,16 +7,42 @@ import { } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; import { - Section, - SectionLayout, -} from "../../../../../About/components/Section/section.styles"; + sectionGrid, + sectionLayout, +} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; -export const StyledSection = styled(Section)` - border-top: 1px solid ${smokeMain}; +export const SectionLayout = styled.div` + ${sectionLayout} + ${sectionGrid}; + padding: 96px 16px 98px; `; -export const StyledSectionLayout = styled(SectionLayout)` - padding: 96px 16px 98px; +export const SubHeadline = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + grid-column: 1 / -1; + + ${mediaTabletUp} { + grid-column: 1 / 6; + } +`; + +export const Subhead = styled.h2` + font-size: 40px; + font-weight: 500; + grid-column: 1 / -1; + letter-spacing: -0.4px; + line-height: 48px; + margin: 0; +`; + +export const SectionContent = styled.div` + grid-column: 1 / -1; + + ${mediaTabletUp} { + grid-column: 7 / -1; + } `; export const Category = styled.div` diff --git a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx index 1c3e972..011681c 100644 --- a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx +++ b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx @@ -1,22 +1,20 @@ import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; -import { - SectionContent, - Subhead, - SubHeadline, -} from "../../../../../About/components/Section/section.styles"; +import { Section } from "../../section.styles"; import { Category, CategorySubTitle, CategoryText, CategoryTitle, - StyledSection, - StyledSectionLayout, + SectionContent, + SectionLayout, + Subhead, + SubHeadline, } from "./sectionRoadmap.styles"; export const SectionRoadmap = (): JSX.Element => { return ( - - +
+ Development Plan @@ -90,7 +88,7 @@ export const SectionRoadmap = (): JSX.Element => { - - + +
); }; diff --git a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts index 047e82f..1dc190f 100644 --- a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts +++ b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts @@ -1,19 +1,14 @@ -import { - inkLight, - smokeMain, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodyLarge4002Lines } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; import { - Section, - SectionLayout, -} from "../../../../../About/components/Section/section.styles"; - -export const StyledSection = styled(Section)` - border-top: 1px solid ${smokeMain}; -`; + sectionGrid, + sectionLayout, +} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; -export const StyledSectionLayout = styled(SectionLayout)` +export const SectionLayout = styled.div` + ${sectionLayout}; + ${sectionGrid}; grid-template-columns: 1fr; padding: 98px 16px; diff --git a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx index 129c058..a5539c4 100644 --- a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx +++ b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx @@ -1,10 +1,11 @@ import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; -import { StyledSection, StyledSectionLayout } from "./sectionSubhero.styles"; +import { Section } from "../../section.styles"; +import { SectionLayout } from "./sectionSubhero.styles"; export const SectionSubhero = (): JSX.Element => { return ( - - +
+
The Data integration component will include utilization of existing @@ -24,7 +25,7 @@ export const SectionSubhero = (): JSX.Element => { interactive tutorials that can be used by users of all skill levels from computationally naive experimentalists to system engineers.
- - + +
); }; diff --git a/app/components/Roadmap/components/Section/section.styles.ts b/app/components/Roadmap/components/Section/section.styles.ts new file mode 100644 index 0000000..bad4b62 --- /dev/null +++ b/app/components/Roadmap/components/Section/section.styles.ts @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; +import { sectionSubHero } from "../../../Layout/components/AppLayout/components/Section/section.styles"; + +export const Section = styled.section` + ${sectionSubHero}; +`; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts deleted file mode 100644 index 6df771f..0000000 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { ButtonGroup } from "@databiosphere/findable-ui/lib/components/common/ButtonGroup/buttonGroup"; -import styled from "@emotion/styled"; - -export const StyledButtonGroup = styled(ButtonGroup)` - .MuiButton-sizeSmall { - padding: 8px; - } -`; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx deleted file mode 100644 index 9b8ca19..0000000 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { - ANCHOR_TARGET, - REL_ATTRIBUTE, -} from "@databiosphere/findable-ui/lib/components/Links/common/entities"; -import { Button, Tooltip } from "@mui/material"; -import Router from "next/router"; -import { ROUTES } from "../../../../../../../routes/constants"; -import { AnalyzeGenomeIcon } from "../../../../../common/CustomIcon/components/AnalyzeGenomeIcon/analyzeGenomeIcon"; -import { ViewGenomeIcon } from "../../../../../common/CustomIcon/components/ViewGenomeIcon/viewGenomeIcon"; -import { StyledButtonGroup } from "./analyzeGenome.styles"; -import { - BUTTON_GROUP_PROPS, - BUTTON_PROPS, - ICON_PROPS, -} from "./common/constants"; - -export interface AnalyzeGenomeProps { - genomeVersionAssemblyId: string; - rowId?: string; - ucscBrowserUrl: string; -} - -export const AnalyzeGenome = ({ - genomeVersionAssemblyId, - rowId, - ucscBrowserUrl, -}: AnalyzeGenomeProps): JSX.Element => { - const onAnalyze = (rowId?: string): void => { - if (!rowId) return; - Router.push(`${ROUTES.ORGANISMS}/${rowId}`); - }; - - const onView = (url: string | null): void => { - if (!url) return; - window.open(url, ANCHOR_TARGET.BLANK, REL_ATTRIBUTE.NO_OPENER_NO_REFERRER); - }; - - return ( - - - , - - - , - - - , - ]} - /> - ); -}; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts b/app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts deleted file mode 100644 index b8fa568..0000000 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/common/constants.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { CustomSVGIconProps } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/common/entities"; -import { - ButtonGroupProps as MButtonGroupProps, - ButtonProps, -} from "@mui/material"; - -export const BUTTON_PROPS: Partial = { - color: "secondary", - variant: "contained", -}; - -export const BUTTON_GROUP_PROPS: Partial = { - color: "secondary", - variant: "outlined", -}; - -export const ICON_PROPS: Partial = { - color: "inkLight", - fontSize: "small", -}; diff --git a/app/components/common/Video/video.tsx b/app/components/common/Video/video.tsx new file mode 100644 index 0000000..763022f --- /dev/null +++ b/app/components/common/Video/video.tsx @@ -0,0 +1,14 @@ +import { useEffect, useState } from "react"; +import ReactPlayer from "react-player"; + +// React Player works only in the browser environment; to prevent hydration errors, the "mounted" state is required. + +export const Video = ({ ...props }): JSX.Element | null => { + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + return mounted ? : null; +}; diff --git a/app/components/index.ts b/app/components/index.ts index d666cad..615cf54 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -21,8 +21,6 @@ export { export { Logo } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/components/Content/components/Logo/logo"; export { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; export { BasicCell } from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"; -export { AnalysisMethod } from "./Entity/components/AnalysisMethod/analysisMethod"; export { AnalysisPortals } from "./Entity/components/AnalysisPortals/analysisPortals"; export { DetailViewHero } from "./Layout/components/Detail/components/DetailViewHero/detailViewHero"; export { Branding } from "./Layout/components/Footer/components/Branding/branding"; -export { AnalyzeGenome } from "./Table/components/TableCell/components/AnalyzeGenome/analyzeGenome"; diff --git a/app/theme/common/components.ts b/app/theme/common/components.ts index cc20841..b09ed71 100644 --- a/app/theme/common/components.ts +++ b/app/theme/common/components.ts @@ -8,25 +8,22 @@ import { Components, Theme } from "@mui/material"; */ export const MuiButton = (theme: Theme): Components["MuiButton"] => { return { - variants: [ - { - props: { color: "hero", variant: "contained" }, - style: { + styleOverrides: { + containedHero: { + boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, + color: theme.palette.common.white, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "&:hover": { + backgroundColor: theme.palette.hero.main, boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, - color: theme.palette.common.white, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "&:hover": { - backgroundColor: theme.palette.hero.main, - boxShadow: `0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px -1px 0px 0px rgba(0, 0, 0, 0.20) inset`, - }, - // eslint-disable-next-line sort-keys -- disabling key order for readability - "&:active": { - backgroundColor: theme.palette.hero.main, - boxShadow: "none", - }, + }, + // eslint-disable-next-line sort-keys -- disabling key order for readability + "&:active": { + backgroundColor: theme.palette.hero.main, + boxShadow: "none", }, }, - ], + }, }; }; @@ -40,7 +37,6 @@ export const MuiCssBaseline = (theme: Theme): Components["MuiCssBaseline"] => { styleOverrides: { body: { ...theme.typography[TEXT_BODY_LARGE_400_2_LINES], - backgroundColor: theme.palette.smoke.lightest, }, }, }; diff --git a/app/theme/theme.ts b/app/theme/theme.ts index 5f19de2..4aa16f5 100644 --- a/app/theme/theme.ts +++ b/app/theme/theme.ts @@ -1,24 +1,37 @@ -import { createTheme, Theme } from "@mui/material"; +import { createAppTheme } from "@databiosphere/findable-ui/lib/theme/theme"; +import { createTheme, Theme, ThemeOptions } from "@mui/material"; import { deepmerge } from "@mui/utils"; import * as C from "./common/components"; -import * as P from "./common/palette"; /** * Returns BRC customized theme. - * @param theme -- Base theme + * @param baseThemeOptions - Base theme options. + * @param themeOptions - Custom theme option overrides. * @returns theme with custom theme overrides. */ -export function mergeAppTheme(theme: Theme): Theme { - const appTheme = { ...theme }; - - // Merge palette with hero color. - appTheme.palette = { ...appTheme.palette, hero: P.hero }; - - // Marge custom components. - const components = { - MuiButton: C.MuiButton(appTheme), - MuiCssBaseline: C.MuiCssBaseline(appTheme), - }; - - return createTheme(deepmerge(appTheme, components)); +export function mergeAppTheme( + baseThemeOptions?: ThemeOptions, + themeOptions?: ThemeOptions +): Theme { + // Merge custom options (palette, shadows, typography). + const customOptions = deepmerge(baseThemeOptions, { ...themeOptions }); + // Create base app theme with custom options. + const baseAppTheme = createAppTheme(customOptions); + // Merge app components with base app theme. + const appTheme = createTheme(baseAppTheme, { + components: { + MuiButton: C.MuiButton(baseAppTheme), + MuiCssBaseline: C.MuiCssBaseline(baseAppTheme), + }, + }); + if (themeOptions?.components) { + // Return app theme - with custom component overrides. + return createTheme( + deepmerge(appTheme, { + components: themeOptions.components, + }) + ); + } + // Return app theme. + return appTheme; } diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts index 4911950..a1e22a6 100644 --- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts +++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts @@ -1,34 +1,6 @@ -import { Breadcrumb } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs"; -import { CardProps } from "@databiosphere/findable-ui/lib/components/common/Card/card"; -import { - Key, - Value, -} from "@databiosphere/findable-ui/lib/components/common/KeyValuePairs/keyValuePairs"; -import { ViewContext } from "@databiosphere/findable-ui/lib/config/entities"; import { ComponentProps } from "react"; -import { ROUTES } from "../../../../../routes/constants"; import { BRCDataCatalogGenome } from "../../../../apis/catalog/brc-analytics-catalog/common/entities"; import * as C from "../../../../components"; -import { GENOME_BROWSER } from "./constants"; - -/** - * Build props for the genome analysis cell. - * @param genome - Genome entity. - * @param viewContext - View context. - * @returns Props to be used for the AnalyzeGenome component. - */ -export const buildAnalyzeGenome = ( - genome: BRCDataCatalogGenome, - viewContext: ViewContext -): ComponentProps => { - const { cellContext } = viewContext; - const { row } = cellContext || {}; - return { - genomeVersionAssemblyId: genome.genomeVersionAssemblyId, - rowId: row?.id, - ucscBrowserUrl: genome.ucscBrowserUrl, - }; -}; /** * Build props for the chromosomes cell. @@ -56,89 +28,6 @@ export const buildContigs = ( }; }; -/** - * Build props for the genome AnalysisMethod component. - * @param genome - Genome entity. - * @param cardProps - Card properties. - * @param cardProps.text - Card text. - * @param cardProps.title - Card title. - * @param cardProps.url - Card url. - * @returns Props to be used for the AnalysisMethod component. - */ -export const buildGenomeAnalysisMethod = ( - genome: BRCDataCatalogGenome, - { text, title, url }: Partial & { url: string } -): ComponentProps => { - return { - text, - title, - url, - }; -}; - -/** - * Build props for the genome AnalysisPortals component. - * @param genome - Genome entity. - * @returns Props to be used for the AnalysisPortals component. - */ -export const buildGenomeAnalysisPortals = ( - genome: BRCDataCatalogGenome -): ComponentProps => { - return { - portals: [ - { - imageProps: { - alt: GENOME_BROWSER, - src: "/analysis-portals/ucsc-genome.png", - width: 20, - }, - label: GENOME_BROWSER, - url: genome.ucscBrowserUrl, - }, - ], - }; -}; - -/** - * Build props for the genome DetailViewHero component. - * @param genome - Genome entity. - * @returns Props to be used for the DetailViewHero component. - */ -export const buildGenomeChooseAnalysisMethodDetailViewHero = ( - genome: BRCDataCatalogGenome -): ComponentProps => { - return { - breadcrumbs: C.Breadcrumbs({ - breadcrumbs: getGenomeEntityChooseAnalysisMethodBreadcrumbs(genome), - }), - title: "Choose Analysis Methods", - }; -}; - -/** - * Build props for the genome detail KeyValuePairs component. - * @param genome - Genome entity. - * @returns Props to be used for the KeyValuePairs component. - */ -export const buildGenomeDetails = ( - genome: BRCDataCatalogGenome -): ComponentProps => { - const keyValuePairs = new Map(); - keyValuePairs.set("Species", genome.species); - keyValuePairs.set("Strain", genome.strain); - keyValuePairs.set("Assembly Version ID", genome.genomeVersionAssemblyId); - keyValuePairs.set("VeUPathDB Project", genome.vEuPathDbProject); - keyValuePairs.set("Contigs", genome.contigs); - keyValuePairs.set("Super Contigs", genome.supercontigs); - keyValuePairs.set("Chromosomes", genome.chromosomes); - return { - KeyElType: C.KeyElType, - KeyValuesElType: (props) => C.Stack({ gap: 4, ...props }), - ValueElType: C.ValueElType, - keyValuePairs, - }; -}; - /** * Build props for the genome version/assembly ID cell. * @param genome - Genome entity. @@ -217,18 +106,3 @@ export const buildVEuPathDbProject = ( value: genome.vEuPathDbProject, }; }; - -/** - * Get the genome entity breadcrumbs. - * @param genome - Genome entity. - * @returns Breadcrumbs. - */ -function getGenomeEntityChooseAnalysisMethodBreadcrumbs( - genome: BRCDataCatalogGenome -): Breadcrumb[] { - return [ - { path: ROUTES.ORGANISMS, text: "Organisms" }, - { path: "", text: `${genome.species} - ${genome.strain}` }, - { path: "", text: "Choose Analysis Methods" }, - ]; -} diff --git a/app/views/AboutView/aboutView.tsx b/app/views/AboutView/aboutView.tsx index fbb914d..92d8800 100644 --- a/app/views/AboutView/aboutView.tsx +++ b/app/views/AboutView/aboutView.tsx @@ -1,7 +1,6 @@ import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; import { Fragment } from "react"; import { SectionAbout } from "../../components/About/components/Section/components/SectionAbout/sectionAbout"; -import { SectionBranding } from "../../components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding"; import { SectionHero } from "../../components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero"; import { BREADCRUMBS } from "./common/constants"; @@ -25,7 +24,6 @@ export const AboutView = (): JSX.Element => { } /> - ); }; diff --git a/app/views/AnalyzeView/analyzeView.tsx b/app/views/AnalyzeView/analyzeView.tsx new file mode 100644 index 0000000..81ee04c --- /dev/null +++ b/app/views/AnalyzeView/analyzeView.tsx @@ -0,0 +1,19 @@ +import { Fragment } from "react"; +import { SectionAnalysisMethod } from "../../components/Analyze/components/Section/components/SectionAnalysisMethod/sectionAnalysisMethod"; +import { SectionHero } from "../../components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero"; +import { BREADCRUMBS } from "./common/constants"; + +export const AnalyzeView = (): JSX.Element => { + return ( + + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + } + /> + + + ); +}; diff --git a/app/views/AnalyzeView/common/constants.ts b/app/views/AnalyzeView/common/constants.ts new file mode 100644 index 0000000..a83669d --- /dev/null +++ b/app/views/AnalyzeView/common/constants.ts @@ -0,0 +1,6 @@ +import { Breadcrumb } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs"; + +export const BREADCRUMBS: Breadcrumb[] = [ + { path: "/", text: "Home" }, + { path: "", text: "Analyze" }, +]; diff --git a/app/views/HomeView/homeView.tsx b/app/views/HomeView/homeView.tsx index b950ff0..16b4d58 100644 --- a/app/views/HomeView/homeView.tsx +++ b/app/views/HomeView/homeView.tsx @@ -1,6 +1,5 @@ import { Fragment } from "react"; import { SectionAnalytics } from "../../components/Home/components/Section/components/SectionAnalytics/sectionAnalytics"; -import { SectionBranding } from "../../components/Home/components/Section/components/SectionBranding/sectionBranding"; import { SectionHelp } from "../../components/Home/components/Section/components/SectionHelp/sectionHelp"; import { SectionHero } from "../../components/Home/components/Section/components/SectionHero/sectionHero"; import { SectionSubHero } from "../../components/Home/components/Section/components/SectionSubHero/sectionSubHero"; @@ -12,7 +11,6 @@ export const HomeView = (): JSX.Element => { - ); }; diff --git a/app/views/RoadmapView/roadmapView.tsx b/app/views/RoadmapView/roadmapView.tsx index 578d903..3bb7de3 100644 --- a/app/views/RoadmapView/roadmapView.tsx +++ b/app/views/RoadmapView/roadmapView.tsx @@ -1,5 +1,4 @@ import { Fragment } from "react"; -import { SectionBranding } from "../../components/Layout/components/AppLayout/components/Section/components/SectionBranding/sectionBranding"; import { SectionHero } from "../../components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero"; import { SectionRoadmap } from "../../components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap"; import { SectionSubhero } from "../../components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero"; @@ -15,7 +14,6 @@ export const RoadmapView = (): JSX.Element => { /> - ); }; diff --git a/package-lock.json b/package-lock.json index f917788..85e4443 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,14 +1,14 @@ { - "name": "brc-analytics-catalog", + "name": "brc-analytics", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "brc-analytics-catalog", + "name": "brc-analytics", "version": "0.1.0", "dependencies": { - "@databiosphere/findable-ui": "^10.2.0", + "@databiosphere/findable-ui": "10.2.0", "@emotion/react": "11.11.1", "@emotion/styled": "11.11.0", "@mdx-js/loader": "^3.0.1", @@ -21,6 +21,7 @@ "next-compose-plugins": "^2.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-player": "^2.16.0", "react-window": "1.8.9", "uuid": "8.3.2", "validate.js": "^0.13.1" @@ -6360,7 +6361,6 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -11435,6 +11435,11 @@ "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, + "node_modules/load-script": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz", + "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==" + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -14448,6 +14453,11 @@ "react": ">= 16.8 || 18.0.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-gtm-module": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz", @@ -14469,6 +14479,21 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/react-player": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", + "integrity": "sha512-mAIPHfioD7yxO0GNYVFD1303QFtI3lyyQZLY229UEAp/a10cSW+hPcakg0Keq8uWJxT2OiT/4Gt+Lc9bD6bJmQ==", + "dependencies": { + "deepmerge": "^4.0.0", + "load-script": "^1.0.0", + "memoize-one": "^5.1.1", + "prop-types": "^15.7.2", + "react-fast-compare": "^3.0.1" + }, + "peerDependencies": { + "react": ">=16.6.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/package.json b/package.json index 9781a7d..afacf3f 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "next-compose-plugins": "^2.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-player": "^2.16.0", "react-window": "1.8.9", "uuid": "8.3.2", "validate.js": "^0.13.1" diff --git a/pages/_app.tsx b/pages/_app.tsx index d2134b7..3e99414 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -11,7 +11,6 @@ import { ConfigProvider as DXConfigProvider } from "@databiosphere/findable-ui/l import { ExploreStateProvider } from "@databiosphere/findable-ui/lib/providers/exploreState"; import { LayoutStateProvider } from "@databiosphere/findable-ui/lib/providers/layoutState"; import { SystemStatusProvider } from "@databiosphere/findable-ui/lib/providers/systemStatus"; -import { createAppTheme } from "@databiosphere/findable-ui/lib/theme/theme"; import { DataExplorerError } from "@databiosphere/findable-ui/lib/types/error"; import { ThemeProvider as EmotionThemeProvider } from "@emotion/react"; import { CssBaseline, ThemeProvider } from "@mui/material"; @@ -40,11 +39,18 @@ export type AppPropsWithComponent = AppProps & { function MyApp({ Component, pageProps }: AppPropsWithComponent): JSX.Element { // Set up the site configuration, layout and theme. const appConfig = config(); - const { layout, redirectRootToPath, themeOptions } = appConfig; + const { + layout, + redirectRootToPath, + themeOptions: baseThemeOptions, + } = appConfig; const { floating, footer, header } = layout || {}; - const defaultTheme = createAppTheme(themeOptions); - const appTheme = mergeAppTheme(defaultTheme); - const { entityListType = DEFAULT_ENTITY_LIST_TYPE, pageTitle } = pageProps; + const { + entityListType = DEFAULT_ENTITY_LIST_TYPE, + pageTitle, + themeOptions, + } = pageProps; + const appTheme = mergeAppTheme(baseThemeOptions, themeOptions); const AppLayout = Component.AppLayout || DXAppLayout; const Main = Component.Main || DXMain; return ( diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 142e3c2..06cddc8 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -1,3 +1,4 @@ +import { smokeLightest } from "@databiosphere/findable-ui/lib/theme/common/palette"; import { GetStaticProps } from "next"; import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles"; import { AboutView } from "../../app/views/AboutView/aboutView"; @@ -10,6 +11,9 @@ export const getStaticProps: GetStaticProps = async () => { return { props: { pageTitle: "About", + themeOptions: { + palette: { background: { default: smokeLightest } }, + }, }, }; }; diff --git a/pages/analyze/index.tsx b/pages/analyze/index.tsx new file mode 100644 index 0000000..990b939 --- /dev/null +++ b/pages/analyze/index.tsx @@ -0,0 +1,23 @@ +import { smokeLightest } from "@databiosphere/findable-ui/lib/theme/common/palette"; +import { GetStaticProps } from "next"; +import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles"; +import { AnalyzeView } from "../../app/views/AnalyzeView/analyzeView"; + +export const Analyze = (): JSX.Element => { + return ; +}; + +export const getStaticProps: GetStaticProps = async () => { + return { + props: { + pageTitle: "Analyze", + themeOptions: { + palette: { background: { default: smokeLightest } }, + }, + }, + }; +}; + +export default Analyze; + +Analyze.Main = StyledPagesMain; diff --git a/pages/data/[entityListType]/[...params].tsx b/pages/data/[entityListType]/[...params].tsx deleted file mode 100644 index ee844d5..0000000 --- a/pages/data/[entityListType]/[...params].tsx +++ /dev/null @@ -1,221 +0,0 @@ -import { - PARAMS_INDEX_TAB, - PARAMS_INDEX_UUID, -} from "@databiosphere/findable-ui/lib/common/constants"; -import { - BackPageTabConfig, - EntityConfig, -} from "@databiosphere/findable-ui/lib/config/entities"; -import { getEntityConfig } from "@databiosphere/findable-ui/lib/config/utils"; -import { getEntityService } from "@databiosphere/findable-ui/lib/hooks/useEntityService"; -import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMode"; -import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from "next"; -import { ParsedUrlQuery } from "querystring"; -import { - BRCCatalog, - EntitiesResponse, -} from "../../../app/apis/catalog/brc-analytics-catalog/common/entities"; -import { config } from "../../../app/config/config"; -import { seedDatabase } from "../../../app/utils/seedDatabase"; -import { EntityDetailView } from "../../../app/views/EntityView/entityView"; - -const setOfProcessedIds = new Set(); - -interface StaticPath { - params: PageUrl; -} - -interface PageUrl extends ParsedUrlQuery { - entityListType: string; - params: string[]; -} - -export interface EntityPageProps { - data?: R; - entityListType: string; -} - -/** - * Entity detail view page. - * @param props - Entity detail view page props. - * @returns Entity detail view component. - */ -const EntityDetailPage = (props: EntityPageProps): JSX.Element => { - if (!props.entityListType) return <>; - return ; -}; - -/** - * getStaticPaths - return the list of paths to prerender for each entity type and its tabs. - * @returns Promise>. - */ -export const getStaticPaths: GetStaticPaths = async () => { - const appConfig = config(); - const { entities } = appConfig; - - const paths: StaticPath[] = []; - - for (const entityConfig of entities) { - const { exploreMode, route: entityListType } = entityConfig; - // Process static paths. - // Client-side fetch, client-side filtering. - if (exploreMode === EXPLORE_MODE.CS_FETCH_CS_FILTERING) { - await seedDatabase(entityListType, entityConfig); - const entitiesResponse: EntitiesResponse = await getEntities( - entityConfig - ); - processEntityPaths(entityConfig, entitiesResponse, paths); - } - } - - return { - fallback: false, - paths, - }; -}; - -export const getStaticProps: GetStaticProps< - EntityPageProps -> = async ({ params }: GetStaticPropsContext) => { - const appConfig = config(); - const { entities } = appConfig; - const { entityListType, params: slug } = params || {}; - - if (typeof entityListType !== "string") return { notFound: true }; - if (!Array.isArray(slug)) return { notFound: true }; - - const entityConfig = getEntityConfig(entities, entityListType); - const entityTab = getSlugPath(slug, PARAMS_INDEX_TAB); - const entityId = getSlugPath(slug, PARAMS_INDEX_UUID); - - if (!entityConfig || !entityId) return { notFound: true }; - - const props: EntityPageProps = { entityListType }; - - // Process entity props. - await processEntityProps(entityConfig, entityTab, entityId, props); - - return { - props, - }; -}; - -export default EntityDetailPage; - -/** - * Fetches entities response for the given entity config. - * @param entityConfig - Entity config. - * @returns entities response. - */ -async function getEntities( - entityConfig: EntityConfig -): Promise> { - const { fetchAllEntities, path } = getEntityService(entityConfig, undefined); - return await fetchAllEntities(path, undefined, undefined, undefined); -} - -/** - * Fetches the entity for the given entity ID. - * @param entityConfig - Entity config. - * @param entityId - Entity ID. - * @returns entity response. - */ -async function getEntity( - entityConfig: EntityConfig, - entityId: string -): Promise { - const { fetchEntityDetail, path } = getEntityService(entityConfig, undefined); - return await fetchEntityDetail( - entityId, - path, - undefined, - undefined, - undefined, - true - ); -} - -/** - * Returns the slug path for the given slug and slug index. - * @param slug - Slug. - * @param slugIndex - Slug index. - * @returns path. - */ -function getSlugPath(slug: string[], slugIndex: number): string | undefined { - return slug[slugIndex]; -} - -/** - * Returns the list of tab routes for the given tab config. - * @param tabs - Tab config. - * @returns tab routes. - */ -function getTabRoutes(tabs: BackPageTabConfig[]): string[] { - return tabs.map(({ route }) => route) ?? []; -} - -/** - * Processes the static paths for the given entity response. - * @param entityConfig - Entity config. - * @param entitiesResponse - Entities response. - * @param paths - Static paths. - */ -function processEntityPaths( - entityConfig: EntityConfig, - entitiesResponse: EntitiesResponse, - paths: StaticPath[] -): void { - const { detail, route: entityListType } = entityConfig; - const { tabs } = detail; - const { hits: entities } = entitiesResponse; - const tabRoutes = getTabRoutes(tabs); - for (const entity of entities) { - const entityId = entityConfig.getId?.(entity); - if (!entityId) continue; - // Skip the entity if it has already been processed. - if (setOfProcessedIds.has(entityId)) continue; - setOfProcessedIds.add(entityId); - // Generate a path for each entity and each tab. - for (const tabRoute of tabRoutes) { - const params = [entityId, tabRoute]; - paths.push({ - params: { - entityListType, - params, - }, - }); - } - } -} - -/** - * Processes the entity props for the given entity page. - * @param entityConfig - Entity config. - * @param entityTab - Entity tab. - * @param entityId - Entity ID. - * @param props - Entity detail page props. - */ -async function processEntityProps( - entityConfig: EntityConfig, - entityTab = "", - entityId: string, - props: EntityPageProps -): Promise { - const { - detail: { staticLoad }, - exploreMode, - } = entityConfig; - // Early exit; return if the entity is not to be statically loaded. - if (!staticLoad) return; - // When the entity detail is to be fetched from API, we only do so for the first tab. - if (exploreMode === EXPLORE_MODE.SS_FETCH_SS_FILTERING && entityTab) return; - if (exploreMode === EXPLORE_MODE.CS_FETCH_CS_FILTERING) { - // Seed database. - await seedDatabase(entityConfig.route, entityConfig); - } - // Fetch entity detail, either from database or API. - const entityResponse = (await getEntity(entityConfig, entityId)) as R; - if (entityResponse) { - props.data = entityResponse; - } -} diff --git a/pages/index.tsx b/pages/index.tsx index 4c4a882..6e325d2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,4 @@ +import { smokeLightest } from "@databiosphere/findable-ui/lib/theme/common/palette"; import { GetStaticProps } from "next"; import { StyledMain } from "../app/components/Layout/components/Main/main.styles"; import { HomeView } from "../app/views/HomeView/homeView"; @@ -10,6 +11,23 @@ export const getStaticProps: GetStaticProps = async () => { return { props: { pageTitle: "BRC Analytics", + themeOptions: { + components: { + MuiLink: { + styleOverrides: { + root: { + color: "#28285b", + textDecoration: "underline", + // eslint-disable-next-line sort-keys -- disabling key order for readability + "&:hover": { textDecoration: "none" }, + }, + }, + }, + }, + palette: { + background: { default: smokeLightest }, + }, + }, }, }; }; diff --git a/pages/roadmap/index.tsx b/pages/roadmap/index.tsx index 2973e0d..7c8895f 100644 --- a/pages/roadmap/index.tsx +++ b/pages/roadmap/index.tsx @@ -1,3 +1,4 @@ +import { smokeLightest } from "@databiosphere/findable-ui/lib/theme/common/palette"; import { GetStaticProps } from "next"; import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles"; import { RoadmapView } from "../../app/views/RoadmapView/roadmapView"; @@ -10,6 +11,9 @@ export const getStaticProps: GetStaticProps = async () => { return { props: { pageTitle: "Roadmap", + themeOptions: { + palette: { background: { default: smokeLightest } }, + }, }, }; }; diff --git a/routes/constants.ts b/routes/constants.ts index c44740a..15900a1 100644 --- a/routes/constants.ts +++ b/routes/constants.ts @@ -1,5 +1,6 @@ export const ROUTES = { ABOUT: "/about", + ANALYZE: "/analyze", ORGANISMS: "/data/organisms", ROADMAP: "/roadmap", }; diff --git a/site-config/brc-analytics/category.ts b/site-config/brc-analytics/category.ts index 825f5d8..6bba2a2 100644 --- a/site-config/brc-analytics/category.ts +++ b/site-config/brc-analytics/category.ts @@ -1,5 +1,4 @@ export const BRC_DATA_CATALOG_CATEGORY_KEY = { - ANALYZE_GENOME: "analyzeGenome", CHROMOSOMES: "chromosomes", CONTIGS: "contigs", GENOME_VERSION_ASSEMBLY_ID: "genomeVersionAssemblyId", @@ -11,7 +10,6 @@ export const BRC_DATA_CATALOG_CATEGORY_KEY = { }; export const BRC_DATA_CATALOG_CATEGORY_LABEL = { - ANALYZE_GENOME: "Action", CHROMOSOMES: "Chromosomes", CONTIGS: "Contigs", GENOME_VERSION_ASSEMBLY_ID: "Assembly Version ID", diff --git a/site-config/brc-analytics/local/config.ts b/site-config/brc-analytics/local/config.ts index 35eb3b9..d2f9731 100644 --- a/site-config/brc-analytics/local/config.ts +++ b/site-config/brc-analytics/local/config.ts @@ -50,6 +50,7 @@ export function makeConfig(browserUrl: string): SiteConfig { [ { label: "About", url: ROUTES.ABOUT }, { label: "Datasets", url: ROUTES.ORGANISMS }, + { label: "Analyze", url: ROUTES.ANALYZE }, { label: "Roadmap", url: ROUTES.ROADMAP }, ], undefined, diff --git a/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts b/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts deleted file mode 100644 index 4128b7e..0000000 --- a/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { ComponentsConfig } from "@databiosphere/findable-ui/lib/config/entities"; -import * as C from "../../../../../app/components"; -import * as MDX from "../../../../../app/components/Entity/components/AnalysisMethod/content"; -import * as V from "../../../../../app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders"; - -export const mainColumn: ComponentsConfig = [ - { - children: [ - { - component: C.FluidAlert, - props: { - severity: "warning", - title: - "We are in the process of adopting these workflows to the needs of the pathogen community.", - variant: "banner", - }, - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - text: MDX.VariantCalling({}), - title: "Variant calling", - url: "", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - text: MDX.Transcriptomics({}), - title: "Transcriptomics", - url: "", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - text: MDX.Regulation({}), - title: "Regulation", - url: "", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - text: MDX.Assembly({}), - title: "Assembly", - url: "", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - text: MDX.GenomeComparisons({}), - title: "Genome comparisons", - url: "", - }), - }, - { - component: C.AnalysisMethod, - viewBuilder: (r) => - V.buildGenomeAnalysisMethod(r, { - text: MDX.ProteinFolding({}), - title: "Protein folding", - url: "", - }), - }, - ], - component: C.BackPageContentMainColumn, - }, -]; diff --git a/site-config/brc-analytics/local/entity/genome/analysisMethodsSideColumn.ts b/site-config/brc-analytics/local/entity/genome/analysisMethodsSideColumn.ts deleted file mode 100644 index 0615791..0000000 --- a/site-config/brc-analytics/local/entity/genome/analysisMethodsSideColumn.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { - ComponentConfig, - ComponentsConfig, -} from "@databiosphere/findable-ui/lib/config/entities"; -import { BRCDataCatalogGenome } from "../../../../../app/apis/catalog/brc-analytics-catalog/common/entities"; -import * as C from "../../../../../app/components"; -import * as V from "../../../../../app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders"; - -export const sideColumn: ComponentsConfig = [ - { - children: [ - { - children: [ - { - children: [ - { - children: [ - { - component: C.KeyValuePairs, - viewBuilder: V.buildGenomeDetails, - } as ComponentConfig< - typeof C.KeyValuePairs, - BRCDataCatalogGenome - >, - ], - component: C.GridPaperSection, - }, - { - children: [ - { - children: [ - { - component: C.SectionTitle, - props: { - title: "Analysis Portals", - }, - } as ComponentConfig, - { - component: C.AnalysisPortals, - viewBuilder: V.buildGenomeAnalysisPortals, - } as ComponentConfig< - typeof C.AnalysisPortals, - BRCDataCatalogGenome - >, - ], - component: C.Grid, - props: { - gridSx: { gap: 4 }, - }, - } as ComponentConfig, - ], - component: C.GridPaperSection, - }, - ], - component: C.GridPaper, - }, - ], - component: C.FluidPaper, - } as ComponentConfig, - ], - component: C.BackPageContentSideColumn, - }, -]; diff --git a/site-config/brc-analytics/local/entity/genome/analysisMethodsTop.ts b/site-config/brc-analytics/local/entity/genome/analysisMethodsTop.ts deleted file mode 100644 index 44df50a..0000000 --- a/site-config/brc-analytics/local/entity/genome/analysisMethodsTop.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { - ComponentConfig, - ComponentsConfig, -} from "@databiosphere/findable-ui/lib/config/entities"; -import { BRCDataCatalogGenome } from "../../../../../app/apis/catalog/brc-analytics-catalog/common/entities"; -import * as C from "../../../../../app/components"; -import * as V from "../../../../../app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders"; - -export const top: ComponentsConfig = [ - { - component: C.DetailViewHero, - viewBuilder: V.buildGenomeChooseAnalysisMethodDetailViewHero, - } as ComponentConfig, -]; diff --git a/site-config/brc-analytics/local/index/genomeEntityConfig.ts b/site-config/brc-analytics/local/index/genomeEntityConfig.ts index 63f37fa..e79eb19 100644 --- a/site-config/brc-analytics/local/index/genomeEntityConfig.ts +++ b/site-config/brc-analytics/local/index/genomeEntityConfig.ts @@ -16,9 +16,6 @@ import { BRC_DATA_CATALOG_CATEGORY_KEY, BRC_DATA_CATALOG_CATEGORY_LABEL, } from "../../category"; -import { mainColumn as analysisMethodsMainColumn } from "../entity/genome/analysisMethodMainColumn"; -import { sideColumn as analysisMethodsSideColumn } from "../entity/genome/analysisMethodsSideColumn"; -import { top as analysisMethodsTop } from "../entity/genome/analysisMethodsTop"; import { listHero } from "../listView/listHero"; /** @@ -53,15 +50,7 @@ export const genomeEntityConfig: BRCEntityConfig = { detail: { detailOverviews: [], staticLoad: true, - tabs: [ - { - label: "Choose Analysis Method", - mainColumn: analysisMethodsMainColumn, - route: "", - sideColumn: analysisMethodsSideColumn, - top: analysisMethodsTop, - }, - ], + tabs: [], }, exploreMode: EXPLORE_MODE.CS_FETCH_CS_FILTERING, explorerTitle: "Organisms", @@ -70,16 +59,6 @@ export const genomeEntityConfig: BRCEntityConfig = { label: "Organisms", list: { columns: [ - { - componentConfig: { - component: C.AnalyzeGenome, - viewBuilder: V.buildAnalyzeGenome, - } as ComponentConfig, - disableSorting: true, - header: BRC_DATA_CATALOG_CATEGORY_LABEL.ANALYZE_GENOME, - id: BRC_DATA_CATALOG_CATEGORY_KEY.ANALYZE_GENOME, - width: "auto", - }, { componentConfig: { component: C.BasicCell, diff --git a/types/theme.d.ts b/types/theme.d.ts index 257522a..032f41d 100644 --- a/types/theme.d.ts +++ b/types/theme.d.ts @@ -18,6 +18,9 @@ declare module "@mui/material/styles/createPalette" { * Button prop options. */ declare module "@mui/material/Button" { + interface ButtonClasses { + containedHero: true; + } interface ButtonPropsColorOverrides { hero: true; }