From a1c52a9e378642963b79eec43c45ca219f836d45 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 3 Oct 2024 00:36:14 +1000 Subject: [PATCH] feat: 'about' page changes (#92) --- .../SectionAbout/sectionAbout.styles.ts | 21 --- .../components/SectionAbout/sectionAbout.tsx | 13 -- .../components/Section/section.styles.ts | 6 - app/components/About/content/index.tsx | 1 - app/components/About/content/sectionAbout.mdx | 23 --- .../components/Questions/questions.styles.ts | 32 ---- .../components/Questions/questions.tsx | 44 ++--- .../SectionHero/sectionHero.styles.ts | 3 +- .../components/Section/section.styles.ts | 33 ++++ .../common/Accordion/accordion.styles.ts | 33 ++++ app/components/common/Accordion/accordion.tsx | 15 ++ .../AccordionSummary/accordionSummary.tsx | 17 ++ app/components/common/Figure/figure.styles.ts | 30 +++ app/components/common/Figure/figure.tsx | 22 +++ app/components/content/content.styles.ts | 103 ++++++++++ app/components/content/index.tsx | 1 + app/components/content/sectionAbout.mdx | 176 ++++++++++++++++++ app/components/index.ts | 1 + app/views/AboutView/aboutView.tsx | 16 +- mdx-components.tsx | 28 ++- pages/about/index.tsx | 16 ++ public/about/collaborative-strategy.svg | 40 ++++ public/about/platforms-together.svg | 1 - 23 files changed, 531 insertions(+), 144 deletions(-) delete mode 100644 app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts delete mode 100644 app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx delete mode 100644 app/components/About/components/Section/section.styles.ts delete mode 100644 app/components/About/content/index.tsx delete mode 100644 app/components/About/content/sectionAbout.mdx create mode 100644 app/components/common/Accordion/accordion.styles.ts create mode 100644 app/components/common/Accordion/accordion.tsx create mode 100644 app/components/common/Accordion/components/AccordionSummary/accordionSummary.tsx create mode 100644 app/components/common/Figure/figure.styles.ts create mode 100644 app/components/common/Figure/figure.tsx create mode 100644 app/components/content/content.styles.ts create mode 100644 app/components/content/index.tsx create mode 100644 app/components/content/sectionAbout.mdx create mode 100644 public/about/collaborative-strategy.svg delete mode 100644 public/about/platforms-together.svg diff --git a/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts b/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts deleted file mode 100644 index f18fe59..0000000 --- a/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts +++ /dev/null @@ -1,21 +0,0 @@ -import styled from "@emotion/styled"; -import { - sectionGrid, - sectionLayout, -} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; - -export const SectionLayout = styled.div` - ${sectionLayout}; - ${sectionGrid}; - grid-template-columns: 1fr; - padding: 98px 16px; - - .MuiLink-root { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } -`; diff --git a/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx b/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx deleted file mode 100644 index e6f292e..0000000 --- a/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { AboutContent } from "../../../../content"; -import { Section } from "../../section.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 deleted file mode 100644 index bad4b62..0000000 --- a/app/components/About/components/Section/section.styles.ts +++ /dev/null @@ -1,6 +0,0 @@ -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/About/content/index.tsx b/app/components/About/content/index.tsx deleted file mode 100644 index f179535..0000000 --- a/app/components/About/content/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default as AboutContent } from "./sectionAbout.mdx"; diff --git a/app/components/About/content/sectionAbout.mdx b/app/components/About/content/sectionAbout.mdx deleted file mode 100644 index 6c3dc9b..0000000 --- a/app/components/About/content/sectionAbout.mdx +++ /dev/null @@ -1,23 +0,0 @@ -## Galaxy - -[The Galaxy team](https://github.com/orgs/galaxyproject/people) is a community that develops software infrastructure for deploying Galaxy instances. There are three major Galaxy instances in the US ([https://usegaxy.org](https://usegaxy.org)), Europe ([https://usegalaxy.eu](https://usegalaxy.eu)), and Australia ([https://usegalaxy.au.org](https://usegalaxy.au.org)) and many regional instances. Galaxy is an application that allows users to run a wide variety of command-line, web-based, or interactive tools on any type of compatible data. Galaxy can be accessed either through a web-browser, or programmatically via application programming interface (API). A Galaxy instance can be configured to manage local or remote computational resources, and schedule tool runs on any modern computational infrastructure including local hardware, conventional clusters, commercial or public clouds, and beyond. The Galaxy team also operates and maintains the Galaxy [ToolShed](https://testtoolshed.g2.bx.psu.edu/)—a growing repository of >8,500 analysis tools available for use in Galaxy. The ToolShed is closely aligned with the [BioConda](https://bioconda.github.io) and [BioContainers](https://biocontainers.pro) communities that package and have become the standard distribution channels for bioinformatics tools. The Galaxy software ecosystem also includes scheduling components, tool development utilities, training infrastructure, and many other features (e.g., [Planemo](https://planemo.readthedocs.io), [Pulsar](https://github.com/galaxyproject/pulsar), [TPV](https://github.com/galaxyproject/total-perspective-vortex)). The main public [https://usegalaxy.org](https://usegalaxy.org) site is an example of a Galaxy instance. Usegalaxy.org supports 10s of thousands of active users running 100s of thousands jobs per month and manages over 4 petabytes of user data. [The Galaxy Training Network](https://training.galaxyproject.org) (GTN) contains a comprehensive collection of tutorials covering all aspects of Galaxy from basic functionality to advanced analyses—it is a widely used community-curated resource. - -## UCSC Genome Browser - -[The UCSC Genome Browser](https://genome.ucsc.edu), maintained by the University of California, Santa Cruz (UCSC), is a widely used and highly regarded online tool for visualizing and exploring genomic information. It is one of the most widely used sources of genomic data in the world, with more than 150,000 monthly users, spread over 200 countries and the majority of usage coming from outside the United States. The Browser team has been generating and distributing multiple alignments for genomes distributed on the site. - -## HyPhy - -Key tools for the analysis of pathogen evolution and dynamics are contained within [HyPhy](http://veg.github.io/hyphy-site)—Hypothesis testing using Phylogenies—a mature (>20 years) open-source platform for comparative sequence analysis with a focus on studying the evolutionary process, especially selection, recombination, and evolutionary rates. Our system will leverage the power of HyPhy from within the Galaxy environment. HyPhy provides a domain-specific scripting language which enables complex model definition, fitting, and hypothesis testing. Its analytical tools for comparative evolutionary analyses of pathogen sequence data have been extensively used over the past decade to investigate viral and bacterial pathogens. In the most recent five years, our “one-click” web application Datamonkey processed ~300,000 submissions, translating to ~$2.5M value based on Amazon EC2 pricing (compute time only); these are typically compute-intensive jobs investigating the impact of natural selection and recombination of pathogens. This service has processed well over 30,000 coronavirus (including SARS-CoV2) related jobs since 2020, and handles ~2,200 analyses/week. The HyPhy software platform has also found extensive and consistent use in the field of pathogen evolutionary analysis with [over 7,000 citations](https://icite.od.nih.gov/analysis?search_id=zv3mpkp7bidaus33) to it and attendant statistical methods. - -## TACC - -[Texas Advanced Computing Center](https://tacc.utexas.edu) (TACC) located within the University of Texas at Austin, serves as an advanced computing research hub. It offers an extensive array of advanced computing resources and support services to researchers across the United States. TACC's overarching objective is to facilitate groundbreaking discoveries that drive advancements in both science and society, achieved through the utilization of cutting-edge computing technologies. The center supports diverse areas, including high-performance computing, scientific visualization, data analysis, and storage systems, as well as software development, research initiatives, and the creation of user-friendly portal interfaces. TACC is a center of excellence in computational sciences within the US. Its resources and services are made accessible to the wider academic community through its participation in the National Science Foundation's (NSF) [ACCESS-CI](https://access-ci.org) project. - -## Collaborative strategy - -The research team responsible for implementing this work is headed by five PI with complementary research expertise domains, and a long history of collaboration. It includes Anton Nekrutenko (Penn State), the original co-developer and PI of the Galaxy Project for the past 15 years. Sergei Kosakovsky Pond (Temple) a computational evolutionary biologist whose core expertise is methodology development (including the HyPhy package) and two decades of experience in viral and pathogen evolution (HIV, IAV, and more recently SARS-CoV2). Michael Schatz (Johns Hopkins) is a computational biologist who developed widely used algorithms for de-novo genome assembly and variant detection as well as pioneered the use of computational clouds in life sciences. Maximilian Haeussler (UCSC) a software engineer and the PI of the Browser Project. John Fonner, a biomedical engineer who serves as the Director of Special Projects at TACC. Importantly, the team consists of highly experienced and skilled software developers and engineers who worked on the project for many years. Just in the past three years this group has published over 40 papers on pathogen genomics including recent high profile publications on SARS-CoV2 genomics in [Cell](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8421097), [Nature Biotechnology](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8845060), [Nature Reviews Genetics](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8447121), [Nature Genetics](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8016453) and others. A high level overview of dependencies among these components is shown below: - -![Platforms together](/about/platforms-together.svg) - -Dependencies between the four projects involved in the design of BRC-Analytics. The TACC forms an infrastructural layer by providing computational and storage resources. Galaxy serves as an analysis environment allowing users to run tools and workflows (such as HyPhy) on a datasets that can be obtained from existing resources or our integrated source of BRC data (BRC.data). Results of analyses can then be displayed in external applications such as the UCSC Genome Browser. 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 b3e0276..c3b13db 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 @@ -1,12 +1,5 @@ import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import { - textBodyLarge4002Lines, - textBodyLarge500, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; -import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows"; import styled from "@emotion/styled"; -import { Accordion as MAccordion } from "@mui/material"; import { sectionGrid } from "../../../../../../../Layout/components/AppLayout/components/Section/section.styles"; export const Grid = styled.div` @@ -19,28 +12,3 @@ export const Grid = styled.div` grid-template-columns: repeat(7, 1fr); } `; - -export const StyledAccordion = styled(MAccordion)` - box-shadow: ${elevation01} !important; - display: grid; - grid-column: 1 / -1; - padding: 12px 0; - - .MuiAccordionSummary-root { - flex-direction: row; - min-height: 0; - padding: 8px 20px; - - .MuiAccordionSummary-content { - ${textBodyLarge500}; - margin: 0; - } - } - - .MuiAccordionDetails-root { - ${textBodyLarge4002Lines}; - color: ${inkLight}; - margin: 0; - padding: 0 20px 8px; - } -` as typeof MAccordion; diff --git a/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx b/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx index 2ed62e5..5d993b9 100644 --- a/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx +++ b/app/components/Home/components/Section/components/SectionHelp/components/Questions/questions.tsx @@ -1,21 +1,15 @@ -import { AddIcon as DXAddIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/AddIcon/addIcon"; -import { RoundedPaper as DXRoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; -import { - AccordionDetails as MAccordionDetails, - AccordionSummary as MAccordionSummary, -} from "@mui/material"; +import { AccordionDetails as MAccordionDetails } from "@mui/material"; +import { Accordion } from "../../../../../../../common/Accordion/accordion"; +import { AccordionSummary } from "../../../../../../../common/Accordion/components/AccordionSummary/accordionSummary"; import { URLS } from "../../../../../../common/constants"; -import { Grid, StyledAccordion } from "./questions.styles"; +import { Grid } from "./questions.styles"; export const Questions = (): JSX.Element => { - const expandIcon = ; return ( - - - What is the plan? - + + What is the plan? BRC-Analytics is very new. Out plan is (1) establish access to official versions of VEuPathDB’s 785 genomes; (2) develop analytical @@ -24,22 +18,18 @@ export const Questions = (): JSX.Element => { provide access to custom annotations that were previously available from VEuPathDB. To learn more click “Roadmap” on top. - - - - Where is the data? - + + + Where is the data? I used to be able to access many types of data including genomes and associated annotations. Where do I find it now? Data for the majority of VEuPathDB organisms is available by clicking the “Datasets” link at the top. - - - - How do I do analyses? - + + + How do I do analyses? I used to rely on VEuPathDB to perform my analyses. Now that it is no longer available, what can I do? Many types of analyses are possible @@ -47,11 +37,9 @@ export const Questions = (): JSX.Element => { while we continue to build this new BRC resource. - - - - How does brc-analytics work? - + + + How does brc-analytics work? BRC-Analytics will provide access to genomic data and an analytical environment. The data will be based on the official releases provided @@ -61,7 +49,7 @@ export const Questions = (): JSX.Element => { Center () and{" "} consortium. - + ); }; 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 0b33942..f633ea3 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 @@ -6,10 +6,9 @@ import { import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; import { Section } from "../../../../../../../common/Section/section"; -import { section, sectionGrid, sectionLayout } from "../../section.styles"; +import { sectionGrid, sectionLayout } from "../../section.styles"; export const StyledSection = styled(Section)` - ${section}; background-color: ${smokeLightest}; overflow: hidden; position: relative; /* positions svg */ 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 a4b8b55..ba043e0 100644 --- a/app/components/Layout/components/AppLayout/components/Section/section.styles.ts +++ b/app/components/Layout/components/AppLayout/components/Section/section.styles.ts @@ -15,6 +15,10 @@ export const sectionGrid = css` grid-template-columns: repeat(12, 1fr); `; +export const sectionGridAreas = css` + grid-template-areas: "feature feature feature feature . detail detail detail detail detail detail detail"; +`; + export const sectionLayout = css` box-sizing: content-box; margin: 0 auto; @@ -26,3 +30,32 @@ export const sectionSubHero = (props: ThemeProps) => css` background-color: ${white(props)}; border-top: 1px solid ${smokeMain(props)}; `; + +export const sectionWithDivider = (props: ThemeProps) => css` + position: relative; /* positions divider */ + width: 100%; + + > div:before { + background-color: ${smokeMain(props)}; + content: ""; + height: 1px; + max-width: min(1136px, calc(100vw - 32px)); + position: absolute; + top: 0; + width: 100%; + } +`; + +export const headline = css` + h2 { + font-family: "Inter Tight", sans-serif; + font-size: 32px; + font-weight: 500; + line-height: 40px; + margin: 0; + + + div { + margin-top: 16px; /* TODO(cc) duplication of SectionHeadline class in SubHeadline */ + } + } +`; diff --git a/app/components/common/Accordion/accordion.styles.ts b/app/components/common/Accordion/accordion.styles.ts new file mode 100644 index 0000000..76e2ae8 --- /dev/null +++ b/app/components/common/Accordion/accordion.styles.ts @@ -0,0 +1,33 @@ +import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { + textBodyLarge4002Lines, + textBodyLarge500, +} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { elevation01 } from "@databiosphere/findable-ui/lib/theme/common/shadows"; +import styled from "@emotion/styled"; +import { Accordion as MAccordion } from "@mui/material"; + +export const StyledAccordion = styled(MAccordion)` + box-shadow: ${elevation01} !important; + display: grid; + grid-column: 1 / -1; + padding: 12px 0; + + .MuiAccordionSummary-root { + flex-direction: row; + min-height: 0; + padding: 8px 20px; + + .MuiAccordionSummary-content { + ${textBodyLarge500}; + margin: 0; + } + } + + .MuiAccordionDetails-root { + ${textBodyLarge4002Lines}; + color: ${inkLight}; + margin: 0; + padding: 0 20px 8px; + } +` as typeof MAccordion; diff --git a/app/components/common/Accordion/accordion.tsx b/app/components/common/Accordion/accordion.tsx new file mode 100644 index 0000000..c744197 --- /dev/null +++ b/app/components/common/Accordion/accordion.tsx @@ -0,0 +1,15 @@ +import { RoundedPaper as DXRoundedPaper } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; +import { AccordionProps as MAccordionProps } from "@mui/material"; +import { StyledAccordion } from "./accordion.styles"; + +export const Accordion = ({ + children, + component = DXRoundedPaper, + ...props +}: MAccordionProps): JSX.Element => { + return ( + + {children} + + ); +}; diff --git a/app/components/common/Accordion/components/AccordionSummary/accordionSummary.tsx b/app/components/common/Accordion/components/AccordionSummary/accordionSummary.tsx new file mode 100644 index 0000000..ac24cc4 --- /dev/null +++ b/app/components/common/Accordion/components/AccordionSummary/accordionSummary.tsx @@ -0,0 +1,17 @@ +import { AddIcon as DXAddIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/AddIcon/addIcon"; +import { + AccordionSummary as MAccordionSummary, + AccordionSummaryProps as MAccordionSummaryProps, +} from "@mui/material"; + +export const AccordionSummary = ({ + children, + expandIcon = , + ...props +}: MAccordionSummaryProps): JSX.Element => { + return ( + + {children} + + ); +}; diff --git a/app/components/common/Figure/figure.styles.ts b/app/components/common/Figure/figure.styles.ts new file mode 100644 index 0000000..bbf82e5 --- /dev/null +++ b/app/components/common/Figure/figure.styles.ts @@ -0,0 +1,30 @@ +import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +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"; + +interface Props {} + +export const Figure = styled.figure` + margin: 16px 0; + + img { + margin: 0 auto; + width: 100%; + } + + figcaption { + ${textBodyLarge4002Lines}; + color: ${inkLight}; + display: block; + margin-top: 32px; + text-align: justify; + + ${mediaTabletUp} { + display: flex; + gap: 0 64px; + margin-top: 52px; + text-align: unset; + } + } +`; diff --git a/app/components/common/Figure/figure.tsx b/app/components/common/Figure/figure.tsx new file mode 100644 index 0000000..3037ea8 --- /dev/null +++ b/app/components/common/Figure/figure.tsx @@ -0,0 +1,22 @@ +import { + StaticImage, + StaticImageProps, +} from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; +import { ReactNode } from "react"; +import { Figure as FigureWithCaption } from "./figure.styles"; + +export interface ImageProps extends StaticImageProps { + caption?: ReactNode; +} + +export const Figure = ({ + caption, + ...props /* Spread props to allow for StaticImage specific props StaticImageProps e.g. "height". */ +}: ImageProps): JSX.Element => { + return ( + + + {caption} + + ); +}; diff --git a/app/components/content/content.styles.ts b/app/components/content/content.styles.ts new file mode 100644 index 0000000..0c079bc --- /dev/null +++ b/app/components/content/content.styles.ts @@ -0,0 +1,103 @@ +import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; +import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; +import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; +import { + headline, + sectionGrid, + sectionGridAreas, + sectionLayout, + sectionSubHero, + sectionWithDivider, +} from "../Layout/components/AppLayout/components/Section/section.styles"; + +export interface LayoutProps { + centered?: boolean; + paired?: boolean; +} + +export interface SectionProps { + border?: boolean; + divider?: boolean; +} + +export const Section = styled.section` + ${(props) => + props.border && + css` + ${sectionSubHero(props)}; + `} + + ${(props) => + props.divider && + css` + ${sectionWithDivider(props)}; + `} +`; + +export const SectionLayout = styled.div` + ${sectionLayout}; + ${sectionGrid}; + gap: 0 16px; + padding: 64px 16px; + + ${(props) => + props.paired && + css` + ${mediaTabletUp(props)} { + ${sectionGridAreas}; + } + `} +`; + +export const SectionHeadline = styled.div` + ${headline}; + ${(props) => + props.centered && + css` + grid-column: 4 / -4; + text-align: center; + `} + ${(props) => + props.paired && + css` + grid-column: 1 / -1; + max-width: 504px; + + ${mediaTabletUp(props)} { + grid-area: feature; + } + `} +`; + +export const SubHeadline = styled.div` + ${textBodyLarge400}; + color: ${inkLight}; + + ${SectionHeadline} & { + margin-top: 16px; + } +`; + +export const SectionContent = styled.div` + grid-column: 1 / -1; + margin-top: 16px; + + ${(props) => + props.paired && + css` + ${mediaTabletUp(props)} { + grid-area: detail; + margin-top: 0; + } + `} + ${(props) => + props.centered && + css` + margin-top: 40px; + `} + > *:last-child { + margin-bottom: 0; + } +`; diff --git a/app/components/content/index.tsx b/app/components/content/index.tsx new file mode 100644 index 0000000..1513589 --- /dev/null +++ b/app/components/content/index.tsx @@ -0,0 +1 @@ +export { default as SectionAbout } from "./sectionAbout.mdx"; diff --git a/app/components/content/sectionAbout.mdx b/app/components/content/sectionAbout.mdx new file mode 100644 index 0000000..a2621e0 --- /dev/null +++ b/app/components/content/sectionAbout.mdx @@ -0,0 +1,176 @@ +
+ + + ## What are these resources? + + The four resources include [Galaxy](https://galaxyproject.org/) (est. + 2005), [HyPhy](https://hyphy.org/) (est. 2000), [UCSC Genome + Browser](https://genome.ucsc.edu/) (est. 2000), and + [TACC](https://tacc.utexas.edu/) (est. 2001). + + + + + + Galaxy + + [The Galaxy team](https://github.com/orgs/galaxyproject/people) is a + community that develops software infrastructure for deploying Galaxy + instances. There are three major Galaxy instances in the US + ([https://usegaxy.org](https://usegaxy.org)), Europe + ([https://usegalaxy.eu](https://usegalaxy.eu)), and Australia + ([https://usegalaxy.au.org](https://usegalaxy.au.org)) and many + regional instances. Galaxy is an application that allows users to + run a wide variety of command-line, web-based, or interactive tools + on any type of compatible data. Galaxy can be accessed either + through a web-browser, or programmatically via application + programming interface (API). A Galaxy instance can be configured to + manage local or remote computational resources, and schedule tool + runs on any modern computational infrastructure including local + hardware, conventional clusters, commercial or public clouds, and + beyond. The Galaxy team also operates and maintains the Galaxy + [ToolShed](https://testtoolshed.g2.bx.psu.edu/)—a growing repository + of >8,500 analysis tools available for use in Galaxy. The ToolShed + is closely aligned with the [BioConda](https://bioconda.github.io) + and [BioContainers](https://biocontainers.pro) communities that + package and have become the standard distribution channels for + bioinformatics tools. The Galaxy software ecosystem also includes + scheduling components, tool development utilities, training + infrastructure, and many other features (e.g., + [Planemo](https://planemo.readthedocs.io), + [Pulsar](https://github.com/galaxyproject/pulsar), + [TPV](https://github.com/galaxyproject/total-perspective-vortex)). + The main public [https://usegalaxy.org](https://usegalaxy.org) site + is an example of a Galaxy instance. Usegalaxy.org supports 10s of + thousands of active users running 100s of thousands jobs per month + and manages over 4 petabytes of user data. [The Galaxy Training + Network](https://training.galaxyproject.org) (GTN) contains a + comprehensive collection of tutorials covering all aspects of Galaxy + from basic functionality to advanced analyses—it is a widely used + community-curated resource. + + + + UCSC Genome Browser + + [The UCSC Genome Browser](https://genome.ucsc.edu), maintained by + the University of California, Santa Cruz (UCSC), is a widely used + and highly regarded online tool for visualizing and exploring + genomic information. It is one of the most widely used sources of + genomic data in the world, with more than 150,000 monthly users, + spread over 200 countries and the majority of usage coming from + outside the United States. The Browser team has been generating and + distributing multiple alignments for genomes distributed on the + site. + + + + HyPhy + + Key tools for the analysis of pathogen evolution and dynamics are + contained within [HyPhy](http://veg.github.io/hyphy-site)—Hypothesis + testing using Phylogenies—a mature (>20 years) open-source platform + for comparative sequence analysis with a focus on studying the + evolutionary process, especially selection, recombination, and + evolutionary rates. Our system will leverage the power of HyPhy from + within the Galaxy environment. HyPhy provides a domain-specific + scripting language which enables complex model definition, fitting, + and hypothesis testing. Its analytical tools for comparative + evolutionary analyses of pathogen sequence data have been + extensively used over the past decade to investigate viral and + bacterial pathogens. In the most recent five years, our “one-click” + web application Datamonkey processed ~300,000 submissions, + translating to ~$2.5M value based on Amazon EC2 pricing (compute + time only); these are typically compute-intensive jobs investigating + the impact of natural selection and recombination of pathogens. This + service has processed well over 30,000 coronavirus (including + SARS-CoV2) related jobs since 2020, and handles ~2,200 + analyses/week. The HyPhy software platform has also found extensive + and consistent use in the field of pathogen evolutionary analysis + with [over 7,000 + citations](https://icite.od.nih.gov/analysis?search_id=zv3mpkp7bidaus33) + to it and attendant statistical methods. + + + + TACC + + [Texas Advanced Computing Center](https://tacc.utexas.edu) (TACC) + located within the University of Texas at Austin, serves as an + advanced computing research hub. It offers an extensive array of + advanced computing resources and support services to researchers + across the United States. TACC's overarching objective is to + facilitate groundbreaking discoveries that drive advancements in + both science and society, achieved through the utilization of + cutting-edge computing technologies. The center supports diverse + areas, including high-performance computing, scientific + visualization, data analysis, and storage systems, as well as + software development, research initiatives, and the creation of + user-friendly portal interfaces. TACC is a center of excellence in + computational sciences within the US. Its resources and services are + made accessible to the wider academic community through its + participation in the National Science Foundation's (NSF) + [ACCESS-CI](https://access-ci.org) project. + + + + + +
+
+ + +

Collaborative strategy

+ + + The research team responsible for implementing this work is headed by five + PI with complementary research expertise domains, and a long history of + collaboration. It includes Dr. Nekrutenko (Penn State), the original + co-developer and PI of the Galaxy Project for the past 15 years. Dr. Pond + (Temple) a computational evolutionary biologist whose core expertise is + methodology development (including the HyPhy package) and two decades of + experience in viral and pathogen evolution (HIV, IAV, and more recently + SARS-CoV2). Dr. Schatz (Johns Hopkins) is a computational biologist who + developed widely used algorithms for de-novo genome assembly and variant + detection as well as pioneered the use of computational clouds in life + sciences. Dr. Haeussler (UCSC) a software engineer and the PI of the + Browser Project. Dr. John Fonner, a biomedical engineer who serves as the + Director of Special Projects at TACC. Importantly, the team consists of + highly experienced and skilled software developers and engineers who + worked on the project for many years. Just in the past three years this + group has published over 40 papers on pathogen genomics including recent + high profile publications on SARS-CoV2 genomics in + [Cell](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8421097/), [Nature + Biotechnology](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8845060/), + [Nature Reviews + Genetics](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8447121/), [Nature + Genetics](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8016453/) and + others. A high level overview of dependencies among these components is + shown below. +
+ + BRC analytics will use reference data from the National Center for + Biotechnology Information (NCBI) supplemented with custom + annotations stored and distributed by the UCSC Table Browser. This + data will include annotations that were previously available from + the VEuPathDb resource. Users will be able to view, download and + visualize the data. + + + The Galaxy platform will be used for the analysis of genomic, + transcriptomic, epigenetic, proteomic, and other types of data + using powerful computational infrastructure provided by the Texas + Advanced Computing Center (TACC). Users will be able to visualize + results using the UCSC Genome Browser and other types of + interactive viewers. + + + } + src="/about/collaborative-strategy.svg" + /> + + +
diff --git a/app/components/index.ts b/app/components/index.ts index d666cad..7a0ee5e 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -8,6 +8,7 @@ export { KeyValuePairs } from "@databiosphere/findable-ui/lib/components/common/ export { FluidPaper, GridPaper, + RoundedPaper, } from "@databiosphere/findable-ui/lib/components/common/Paper/paper.styles"; export { SectionTitle } from "@databiosphere/findable-ui/lib/components/common/Section/components/SectionTitle/sectionTitle"; export { GridPaperSection } from "@databiosphere/findable-ui/lib/components/common/Section/section.styles"; diff --git a/app/views/AboutView/aboutView.tsx b/app/views/AboutView/aboutView.tsx index 92d8800..9506ae2 100644 --- a/app/views/AboutView/aboutView.tsx +++ b/app/views/AboutView/aboutView.tsx @@ -1,6 +1,5 @@ -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 { SectionAbout } from "../../components/content"; import { SectionHero } from "../../components/Layout/components/AppLayout/components/Section/components/SectionHero/sectionHero"; import { BREADCRUMBS } from "./common/constants"; @@ -10,18 +9,7 @@ export const AboutView = (): JSX.Element => { - BRC-analytics is a collaborative effort of four projects. These - include: {" "} - (est. 2005), (est. - 2000),{" "} - {" "} - (est. 2000), and{" "} - (est. 2001). - What are these resources? - - } + subHead="BRC-analytics is a collaborative effort of four mature software and infrastructure projects that have been sustained for decades." /> diff --git a/mdx-components.tsx b/mdx-components.tsx index 1803365..86bb403 100644 --- a/mdx-components.tsx +++ b/mdx-components.tsx @@ -1,12 +1,34 @@ -import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; +import { AccordionDetails as MAccordionDetails } from "@mui/material"; import { MDXComponents } from "mdx/types"; +import * as C from "./app/components"; import { CardActions } from "./app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Cards/cards.styles"; +import { Accordion } from "./app/components/common/Accordion/accordion"; +import { AccordionSummary } from "./app/components/common/Accordion/components/AccordionSummary/accordionSummary"; +import { Figure } from "./app/components/common/Figure/figure"; +import { + Section, + SectionContent, + SectionHeadline, + SectionLayout, + SubHeadline, +} from "./app/components/content/content.styles"; export function useMDXComponents(components: MDXComponents): MDXComponents { return { ...components, + Accordion, + AccordionDetails: MAccordionDetails, + AccordionSummary, CardActions, - Link, - a: ({ children, href }) => Link({ label: children, url: href ?? "" }), + Figure, + Grid: C.Grid, + Link: C.Link, + RoundedPaper: C.RoundedPaper, + Section, + SectionContent, + SectionHeadline, + SectionLayout, + SubHeadline, + a: ({ children, href }) => C.Link({ label: children, url: href ?? "" }), }; } diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 06cddc8..70bc212 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -12,6 +12,22 @@ export const getStaticProps: GetStaticProps = async () => { props: { pageTitle: "About", themeOptions: { + components: { + MuiLink: { + styleOverrides: { + root: { + color: "#28285b", + textDecoration: "underline", + textDecorationSkipInk: "none", + textUnderlinePosition: "from-font", + // eslint-disable-next-line sort-keys -- disabling key order for readability + "&:hover": { + textDecoration: "none", + }, + }, + }, + }, + }, palette: { background: { default: smokeLightest } }, }, }, diff --git a/public/about/collaborative-strategy.svg b/public/about/collaborative-strategy.svg new file mode 100644 index 0000000..df89612 --- /dev/null +++ b/public/about/collaborative-strategy.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/about/platforms-together.svg b/public/about/platforms-together.svg deleted file mode 100644 index 8e68173..0000000 --- a/public/about/platforms-together.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file