diff --git a/app/components/About/components/Section/components/SectionAbout/components/MDX/about.mdx b/app/components/About/components/Section/components/SectionAbout/components/MDX/about.mdx new file mode 100644 index 0000000..5e8669a --- /dev/null +++ b/app/components/About/components/Section/components/SectionAbout/components/MDX/about.mdx @@ -0,0 +1,23 @@ +## 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—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 [1]. 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 will form an infrastructural layer by providing computational and storage resources. Galaxy will serve as an analysis environment allowing users to run tools and workflows (such as HyPhy) on a dataset 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/About/components/Section/components/SectionAbout/components/MDX/index.tsx b/app/components/About/components/Section/components/SectionAbout/components/MDX/index.tsx new file mode 100644 index 0000000..035ea94 --- /dev/null +++ b/app/components/About/components/Section/components/SectionAbout/components/MDX/index.tsx @@ -0,0 +1 @@ +export { default as About } from "./about.mdx"; diff --git a/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts b/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts new file mode 100644 index 0000000..8d55f80 --- /dev/null +++ b/app/components/About/components/Section/components/SectionAbout/sectionAbout.styles.ts @@ -0,0 +1,16 @@ +import styled from "@emotion/styled"; +import { SectionLayout } from "../../section.styles"; + +export const StyledSectionLayout = styled(SectionLayout)` + 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 new file mode 100644 index 0000000..ffe9542 --- /dev/null +++ b/app/components/About/components/Section/components/SectionAbout/sectionAbout.tsx @@ -0,0 +1,13 @@ +import { Section } from "../../section.styles"; +import { About } from "./components/MDX"; +import { StyledSectionLayout } from "./sectionAbout.styles"; + +export const SectionAbout = (): JSX.Element => { + return ( +
+ + + +
+ ); +}; diff --git a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/comprehensiveComparitiveGenomics.mdx b/app/components/About/components/Section/components/SectionRoadmap/components/MDX/comprehensiveComparitiveGenomics.mdx deleted file mode 100644 index b5c668a..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/comprehensiveComparitiveGenomics.mdx +++ /dev/null @@ -1,5 +0,0 @@ -In coordination with UCSC Genome Browser and NCBI we will begin -work on creating a comprehensive comparative genomics resource by -creating genome alignments and synteny maps within key clades. -This data will provide information on evolutionary dynamics of -pathogens and vectors. diff --git a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/genomicDataReviewAndValidation.mdx b/app/components/About/components/Section/components/SectionRoadmap/components/MDX/genomicDataReviewAndValidation.mdx deleted file mode 100644 index b8e9842..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/genomicDataReviewAndValidation.mdx +++ /dev/null @@ -1,5 +0,0 @@ -Review all genomic data and associated annotations currently -available from VeuPathDb. During this stage all genome builds will -be validated against data currently available from GenBank and -RefSeq at NCBI. This will ensure that all data is current and is -in sync with official public builds. diff --git a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/howToAnalyzeYourData.mdx b/app/components/About/components/Section/components/SectionRoadmap/components/MDX/howToAnalyzeYourData.mdx deleted file mode 100644 index fcfe2d7..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/howToAnalyzeYourData.mdx +++ /dev/null @@ -1,3 +0,0 @@ -In combination with the Galaxy Training Network (GTN) we will -begin developing tutorials highlighting various aspects of our new -system and explaining how to analyze your data using these tools. diff --git a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/index.tsx b/app/components/About/components/Section/components/SectionRoadmap/components/MDX/index.tsx deleted file mode 100644 index 07cda5e..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -export { default as ComprenhensiveComparitiveGenomics } from "./comprehensiveComparitiveGenomics.mdx"; -export { default as GenomicDataReviewAndValidation } from "./genomicDataReviewAndValidation.mdx"; -export { default as HowToAnalyzeYourData } from "./howToAnalyzeYourData.mdx"; -export { default as LaunchGalaxyInstance } from "./launchGalaxyInstance.mdx"; -export { default as LaunchGenomeBrowsers } from "./launchGenomeBrowsers.mdx"; diff --git a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/launchGalaxyInstance.mdx b/app/components/About/components/Section/components/SectionRoadmap/components/MDX/launchGalaxyInstance.mdx deleted file mode 100644 index 775f8db..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/launchGalaxyInstance.mdx +++ /dev/null @@ -1,7 +0,0 @@ -Launch a Galaxy instance specifically configured for the needs of -eukaryotic pathogen and vector community. Carry-over and update -existing workflows from VeuPathDb Galaxy instance. In combination -with existing Galaxy best practices this will allow us to provide -users with the most up-to-date version of most common analyses -including transcriptomics (bulk and single cell RNA-seq), variant -discovery, assembly, annotation, and many other applications. diff --git a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/launchGenomeBrowsers.mdx b/app/components/About/components/Section/components/SectionRoadmap/components/MDX/launchGenomeBrowsers.mdx deleted file mode 100644 index 495886c..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/components/MDX/launchGenomeBrowsers.mdx +++ /dev/null @@ -1,4 +0,0 @@ -This will involve ingesting data and annotation tracks into UCSC -Genome Browser infrastructure. In coordination with the VeuPathDb -team we will make the best effort to carry over existing JBrowse -tracks and custom annotations. diff --git a/app/components/About/components/Section/components/SectionRoadmap/sectionRoadmap.tsx b/app/components/About/components/Section/components/SectionRoadmap/sectionRoadmap.tsx deleted file mode 100644 index da81b5a..0000000 --- a/app/components/About/components/Section/components/SectionRoadmap/sectionRoadmap.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { StyledChip } from "../../../../../Layout/components/AppLayout/components/Section/components/Chip/chip.styles"; -import { - SectionContent, - Subhead, - SubHeadline, - SubheadText, -} from "../../section.styles"; -import { - ComprenhensiveComparitiveGenomics, - GenomicDataReviewAndValidation, - HowToAnalyzeYourData, - LaunchGalaxyInstance, - LaunchGenomeBrowsers, -} from "./components/MDX"; -import { - Category, - CategoryText, - CategoryTitle, - StyledSection, - StyledSectionLayout, -} from "./sectionRoadmap.styles"; - -export const SectionRoadmap = (): JSX.Element => { - return ( - - - - Roadmap - The high level roadmap for the Fall 24 is: - - - - - Genomic Data Review & Validation - - - - - - - - Launch genome browsers for all VeuPathDb species - - - - - - - - Launch a Galaxy instance - - - - - - - - How to analyze your data using these tools - - - - - - - - - Comprehensive comparative genomics resource - - - - - - - - - ); -}; diff --git a/app/components/About/components/Section/components/SectionWhatToExpect/components/MDX/expectations.mdx b/app/components/About/components/Section/components/SectionWhatToExpect/components/MDX/expectations.mdx deleted file mode 100644 index f3eb03b..0000000 --- a/app/components/About/components/Section/components/SectionWhatToExpect/components/MDX/expectations.mdx +++ /dev/null @@ -1,3 +0,0 @@ -- Dataset explorer providing access to genomic data and annotations for all 785 species currently accessible on VeuPathDb -- Launch of a dedicated Galaxy instance at [https://brc.usegalaxy.org](https://brc.usegalaxy.org) that will provide access to key workflows and will be tightly integrated with the Dataset Explorer -- Launch of a documentation and support site for brc-analytics users and developers diff --git a/app/components/About/components/Section/components/SectionWhatToExpect/components/MDX/index.tsx b/app/components/About/components/Section/components/SectionWhatToExpect/components/MDX/index.tsx deleted file mode 100644 index 8fa6c9d..0000000 --- a/app/components/About/components/Section/components/SectionWhatToExpect/components/MDX/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default as Expectations } from "./expectations.mdx"; diff --git a/app/components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect.styles.ts b/app/components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect.styles.ts deleted file mode 100644 index cf3ca88..0000000 --- a/app/components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect.styles.ts +++ /dev/null @@ -1,38 +0,0 @@ -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 { SectionContent, SectionLayout } from "../../section.styles"; - -export const StyledSectionLayout = styled(SectionLayout)` - padding: 106px 16px 204px; -`; - -export const StyledContent = styled(SectionContent)` - ul { - ${textBodyLarge4002Lines}; - color: ${inkLight}; - margin: 0; - padding-left: 24px; - - li { - margin: 8px 0; - - .MuiLink-root { - color: inherit; - text-decoration: underline; - - &:hover { - text-decoration: none; - } - } - - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } - } - } -`; diff --git a/app/components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect.tsx b/app/components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect.tsx deleted file mode 100644 index d3ba1b1..0000000 --- a/app/components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { - Section, - Subhead, - SubHeadline, - SubheadText, -} from "../../section.styles"; -import { Expectations } from "./components/MDX"; -import { - StyledContent, - StyledSectionLayout, -} from "./sectionWhatToExpect.styles"; - -export const SectionWhatToExpect = (): JSX.Element => { - return ( -
- - - What to expect - - In Fall 24 we will deploy the following resources: - - - - - - -
- ); -}; diff --git a/app/components/About/components/Section/section.styles.ts b/app/components/About/components/Section/section.styles.ts index ce6ca0a..f2c5bb8 100644 --- a/app/components/About/components/Section/section.styles.ts +++ b/app/components/About/components/Section/section.styles.ts @@ -1,9 +1,5 @@ import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { - inkLight, - white, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import { textBodyLarge400 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; +import { white } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import styled from "@emotion/styled"; import { sectionGrid, @@ -41,12 +37,6 @@ export const Subhead = styled.h2` margin: 0; `; -export const SubheadText = styled.div` - ${textBodyLarge400}; - color: ${inkLight}; - grid-column: 1 / -1; -`; - export const SectionContent = styled.div` grid-column: 1 / -1; diff --git a/app/components/Entity/components/AnalysisMethod/mdx/assembly.mdx b/app/components/Entity/components/AnalysisMethod/mdx/assembly.mdx index 498cf07..128d783 100644 --- a/app/components/Entity/components/AnalysisMethod/mdx/assembly.mdx +++ b/app/components/Entity/components/AnalysisMethod/mdx/assembly.mdx @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. +Best practices for assembly of prokaryotic and eukaryotic genomes sequenced with a variety of technologies. diff --git a/app/components/Entity/components/AnalysisMethod/mdx/genomeComparisons.mdx b/app/components/Entity/components/AnalysisMethod/mdx/genomeComparisons.mdx index 498cf07..116c1ad 100644 --- a/app/components/Entity/components/AnalysisMethod/mdx/genomeComparisons.mdx +++ b/app/components/Entity/components/AnalysisMethod/mdx/genomeComparisons.mdx @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. +Workflows for creation of pairwise and multiple genome alignments. diff --git a/app/components/Entity/components/AnalysisMethod/mdx/proteinFolding.mdx b/app/components/Entity/components/AnalysisMethod/mdx/proteinFolding.mdx index 498cf07..57e1d2e 100644 --- a/app/components/Entity/components/AnalysisMethod/mdx/proteinFolding.mdx +++ b/app/components/Entity/components/AnalysisMethod/mdx/proteinFolding.mdx @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. +Analysis of protein folding using the ColabFold framework. diff --git a/app/components/Entity/components/AnalysisMethod/mdx/regulation.mdx b/app/components/Entity/components/AnalysisMethod/mdx/regulation.mdx index 498cf07..6d887dd 100644 --- a/app/components/Entity/components/AnalysisMethod/mdx/regulation.mdx +++ b/app/components/Entity/components/AnalysisMethod/mdx/regulation.mdx @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. +Workflows for the analysis of ChIP-seq, ATAC-Seq and beyond. diff --git a/app/components/Entity/components/AnalysisMethod/mdx/transcriptomics.mdx b/app/components/Entity/components/AnalysisMethod/mdx/transcriptomics.mdx index 498cf07..91f0480 100644 --- a/app/components/Entity/components/AnalysisMethod/mdx/transcriptomics.mdx +++ b/app/components/Entity/components/AnalysisMethod/mdx/transcriptomics.mdx @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. +Analyze bulk or single-cell RNA seq data using a variety of approaches. diff --git a/app/components/Entity/components/AnalysisMethod/mdx/variantCalling.mdx b/app/components/Entity/components/AnalysisMethod/mdx/variantCalling.mdx index 498cf07..86599c4 100644 --- a/app/components/Entity/components/AnalysisMethod/mdx/variantCalling.mdx +++ b/app/components/Entity/components/AnalysisMethod/mdx/variantCalling.mdx @@ -1 +1 @@ -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. +Identify nucleotide polymorphisms and short indels from Illumina and Element data. diff --git a/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx b/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx index ffd30fc..d495976 100644 --- a/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx +++ b/app/components/Home/components/Section/components/SectionBranding/components/Hero/hero.tsx @@ -46,8 +46,8 @@ export const Hero = ({ {[ ELEMENT_ID.PATTERN_SMOKE_RECT, ELEMENT_ID.PATTERN_SMOKE_CIRCLE, - ELEMENT_ID.PATTERN_BLUE_RECT, - ELEMENT_ID.PATTERN_YELLOW_RECT, + // ELEMENT_ID.PATTERN_BLUE_RECT, + // ELEMENT_ID.PATTERN_YELLOW_RECT, ].map((elementId) => ( ))} - + {/**/} ); 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..a660f83 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,4 +1,3 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { textBodyLarge4002Lines, @@ -13,11 +12,6 @@ export const Grid = styled.div` ${sectionGrid}; grid-column: 1 / -1; grid-template-columns: 1fr; - - ${mediaTabletUp} { - grid-column: 6 / -1; - grid-template-columns: repeat(7, 1fr); - } `; export const StyledAccordion = styled(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 34cfae6..2d6022f 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 @@ -12,15 +12,28 @@ export const Questions = (): JSX.Element => { const expandIcon = ; return ( + + + 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 + workflows for common analyses such as transcriptomics, variation, + assembly, and tightly integrate them with the data; (3) ingest and + provide access to custom annotations that were previously available + from VeuPathDb. To learn more click “Roadmap” on top. + + 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? The data is accessible - via 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. @@ -28,9 +41,9 @@ export const Questions = (): JSX.Element => { How do I do analyses? - I used rely on VeuPathDb to perform my analyses. Now that it is no + 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 - via integration with{" "} + via integration with the{" "} while we continue to build this new BRC resource. @@ -40,13 +53,13 @@ export const Questions = (): JSX.Element => { How does brc-analytics work? - The new BRC will be built on a proven data analytics platform called - Galaxy. It will be supported by powerful computational infrastructure - provided by the Texas Advanced Computing Center ( - ) and + BRC-Analytics will provide access to genomic data and an analytical + environment. The data will be based on the official releases provided + by NCBI Datasets and deployed through the UCSC Genome Browser. The + analytics will be provided by the Galaxy system supported by powerful + computational infrastructure provided by the Texas Advanced Computing + Center () and{" "} consortium. - It will rely on data from NCBI Datasets and the UCSC Genome Browser. - Similarly to the original system it will support custom annotations. 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..2e1a7a6 100644 --- a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts +++ b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.styles.ts @@ -1,4 +1,3 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import { smokeMain, white, @@ -8,11 +7,6 @@ import { sectionGrid, SectionLayout as DefaultLayout, } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; -import { - SectionHeadline, - SectionSubtitle, - SectionTitle, -} from "../../section.styles"; export const Section = styled.section` background-color: ${white}; @@ -24,31 +18,3 @@ export const SectionLayout = styled(DefaultLayout)` ${sectionGrid}; padding: 85px 16px 150px; `; - -export const Headline = styled(SectionHeadline)` - align-content: flex-start; - grid-column: 1 / -1; - max-width: 504px; - - ${mediaTabletUp} { - grid-column: 1 / 5; - max-width: unset; - } -`; - -export const StyledSectionTitle = styled(SectionTitle)` - max-width: 276px; -`; - -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/SectionHelp/sectionHelp.tsx b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx index 5843a3d..2246445 100644 --- a/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx +++ b/app/components/Home/components/Section/components/SectionHelp/sectionHelp.tsx @@ -1,28 +1,10 @@ -import { Link as DXLink } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; import { Questions } from "./components/Questions/questions"; -import { - Headline, - Section, - SectionLayout, - StyledSectionSubTitle, - StyledSectionTitle, -} from "./sectionHelp.styles"; +import { Section, SectionLayout } from "./sectionHelp.styles"; export const SectionHelp = (): JSX.Element => { return (
- - Your questions, answered - - If you need further assistance, feel free to reach out to us at{" "} - - . We're here to help! - -
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 44066a8..071cc85 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.styles.ts @@ -13,7 +13,7 @@ import { export const SectionLayout = styled(DefaultLayout)` ${sectionGrid}; align-content: flex-end; - min-height: 482px; + min-height: 400px; padding: 56px 16px; `; @@ -63,4 +63,17 @@ export const Subhead = styled.h2` ${textBodyLarge400}; color: ${inkLight}; margin: 0; + + span { + display: block; + margin: 8px 0; + + &:first-of-type { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + } `; diff --git a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx index b3954e0..74daa45 100644 --- a/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx +++ b/app/components/Home/components/Section/components/SectionHero/sectionHero.tsx @@ -1,5 +1,5 @@ +import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; import { Button } from "@mui/material"; -import { ROUTES } from "../../../../../../../routes/constants"; import { Section } from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; import { Head, @@ -16,19 +16,33 @@ export const SectionHero = (): JSX.Element => { - Unlock the power of - pathogen data analysis + A universal platform for + access and analysis + of pathogen, host, + and vector data - Comprehensive tools for exploring and interpreting genomic - annotations and functional insights into disease-causing organisms - and their carriers + + BRC Analytics is under active development. This site will + provide data access and analytical tools for all 785 eukaryotic + pathogens, host taxa, and vectors previously served by + VeuPathDb. However, we cannot do this alone. + + + Use the button below to tell us about your usage patterns and + enroll into our design advisory panel. + - diff --git a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts b/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts deleted file mode 100644 index 42479f0..0000000 --- a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.styles.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { - smokeMain, - white, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import { textBodySmall500 } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; -import styled from "@emotion/styled"; -import { Chip as MChip } from "@mui/material"; -import { - sectionGrid, - SectionLayout as DefaultLayout, -} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; - -export const Section = styled.section` - background-color: ${white}; - border-top: 1px solid ${smokeMain}; - width: 100%; -`; - -export const SectionLayout = styled(DefaultLayout)` - ${sectionGrid}; - grid-template-columns: 1fr; - justify-items: center; - padding: 96px 16px 102px; -`; - -export const StyledChip = styled(MChip)` - min-width: 0; - - .MuiChip-label { - ${textBodySmall500}; - padding: 0 10px; - } -`; - -export const Subhead = styled.h2` - font-size: 32px; - font-weight: 400; - line-height: 48px; - margin: 0; - text-align: center; -`; diff --git a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.tsx b/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.tsx deleted file mode 100644 index 149ab56..0000000 --- a/app/components/Home/components/Section/components/SectionSubHero/sectionSubHero.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { - Section, - SectionLayout, - StyledChip, - Subhead, -} from "./sectionSubHero.styles"; - -export const SectionSubHero = (): JSX.Element => { - return ( -
- - - - BRC-Analytics is your new destination for comprehensive analysis of - biological data related to pathogens. Building on the legacy of - VeuPathDb, our platform currently supports analyses for 785 eukaryotic - pathogens and vectors, providing researchers with the tools they need - to advance their work. - - -
- ); -}; 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 17d6838..0e3d228 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 @@ -15,10 +15,12 @@ export const Section = styled.section` export const SectionLayout = styled(DefaultLayout)` ${sectionGrid}; + min-height: 184px; padding: 56px 16px; `; export const Headline = styled.div` + align-content: flex-start; display: grid; gap: 8px; grid-column: 1 / -1; @@ -36,4 +38,13 @@ export const Subhead = styled.div` ${textBodyLarge400}; color: ${inkLight}; margin: 0; + + .MuiLink-root { + color: inherit; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } `; 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 0c89d03..4bc24c1 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 @@ -30,9 +30,11 @@ export const SectionHero = ({ {head} - - {subHead} - + {subHead && ( + + {subHead} + + )} ); diff --git a/app/components/Layout/components/Footer/components/Branding/branding.styles.ts b/app/components/Layout/components/Footer/components/Branding/branding.styles.ts index 6f21894..b6b32e5 100644 --- a/app/components/Layout/components/Footer/components/Branding/branding.styles.ts +++ b/app/components/Layout/components/Footer/components/Branding/branding.styles.ts @@ -1,5 +1,6 @@ import { mediaTabletDown } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; import styled from "@emotion/styled"; +import { Typography } from "@mui/material"; export const Brands = styled.div` align-items: center; @@ -25,3 +26,7 @@ export const LargeBrand = styled.div` export const SmallBrand = styled.div` padding: 4px; `; + +export const FooterText = styled(Typography)` + max-width: 400px; +`; diff --git a/app/components/Layout/components/Footer/components/Branding/branding.tsx b/app/components/Layout/components/Footer/components/Branding/branding.tsx index c8b73e4..a819c57 100644 --- a/app/components/Layout/components/Footer/components/Branding/branding.tsx +++ b/app/components/Layout/components/Footer/components/Branding/branding.tsx @@ -1,6 +1,8 @@ import { Logo } from "@databiosphere/findable-ui/lib/components/Layout/components/Header/components/Content/components/Logo/logo"; import { ANCHOR_TARGET } from "@databiosphere/findable-ui/lib/components/Links/common/entities"; -import { Brands, LargeBrand, SmallBrand } from "./branding.styles"; +import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; +import { TEXT_BODY_SMALL_400 } from "@databiosphere/findable-ui/lib/theme/common/typography"; +import { Brands, FooterText, LargeBrand, SmallBrand } from "./branding.styles"; export const Branding = (): JSX.Element => { return ( @@ -41,6 +43,14 @@ export const Branding = (): JSX.Element => { target={ANCHOR_TARGET.BLANK} /> + + BRC-Analytics is a part of the Bioinformatics Resource Centers for + Infectious Diseases Program developed and funded by{" "} + + ); }; diff --git a/app/components/About/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts similarity index 71% rename from app/components/About/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts rename to app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts index f752e87..e08d076 100644 --- a/app/components/About/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts +++ b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts @@ -3,11 +3,15 @@ import { smokeMain, } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; import { + textBody500, textBodyLarge4002Lines, textBodyLarge500, } from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; import styled from "@emotion/styled"; -import { Section, SectionLayout } from "../../section.styles"; +import { + Section, + SectionLayout, +} from "../../../../../About/components/Section/section.styles"; export const StyledSection = styled(Section)` border-top: 1px solid ${smokeMain}; @@ -34,8 +38,21 @@ export const CategoryTitle = styled.h4` margin: 4px 0 16px; `; +export const CategorySubTitle = styled.h3` + ${textBody500}; +`; + export const CategoryText = styled.div` ${textBodyLarge4002Lines}; color: ${inkLight}; margin: 0; + + .MuiLink-root { + color: inherit; + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } `; diff --git a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx new file mode 100644 index 0000000..bfb2448 --- /dev/null +++ b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx @@ -0,0 +1,96 @@ +import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; +import { + SectionContent, + Subhead, + SubHeadline, +} from "../../../../../About/components/Section/section.styles"; +import { + Category, + CategorySubTitle, + CategoryText, + CategoryTitle, + StyledSection, + StyledSectionLayout, +} from "./sectionRoadmap.styles"; + +export const SectionRoadmap = (): JSX.Element => { + return ( + + + + Development Plan + + + + Develop data component + Daset harmonization and ingest + + The list of all 785 genomes originally found in VeuPathDb will be + harmonized. This means that for each genome, we will identify the + latest official release listed at NCBI. The data will then be + ingested by the UCSC Genome Browser team to create a browser + instance for each genome. The instance will initially contain + annotations provided by the NCBI. Next, the best effort will be + made to transfer any additional annotations (not found at NCBI) + from VuePathDb database to each of the browsers. In particular, we + will work on maximizing the amount of information available on + gene pages. + + Search component implementation + + A search component allowing users to perform custom queries on all + data will be developed. It will allow functionality that was + previously provided by VeuPathDb’s “search strategy” component.{" "} + + + + Develop analysis component + + Develop best practices for common analyses + + + Develop and deploy robust analysis workflows for (1) + transcriptomics (bulk and single cell), (2) variant analysis, (3) + genome assembly, (4) genome annotation, (5) regulation (ChIP-seq + and related) and others as appropriate. This will be done in close + collaboration with the research community, which will guide us + based on current needs and research trends. + + + Ensure tight integration between data and analysis components + + + To increase usability of brc-analytics a substantial amount of + engineering will be devoted to making the interplay between data + and analytics components as seamless as possible. For example, + selecting a genome during the search phase will automatically + pre-fill the analysis step with necessary reference data for this + species such as read-mapper indices, SNPeff databases, and other + artifacts. + + + + Develop training component + + Training and outreach activities are absolutely essential to our + efforts. To reflect this degree of importance, we will provide + tutorials, workshops & training materials, and the infrastructure + necessary for enabling worldwide training events. Our training + will include step-by-step interactive tutorials accessible + directly from the Galaxy interface to facilitate learning our + available features, a service for reserving and monitoring + computational resources necessary for running live and on-line + workshops anywhere in the world. A globally distributed yearly + event (known and Smörgasbord) is dedicated to community-suggested + topics and regularly attracts thousands of on-line participants. + To achieve these goals we will be leveraging the highly successful + Galaxy Training Network ( + + ). + + + + + + ); +}; diff --git a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts new file mode 100644 index 0000000..047e82f --- /dev/null +++ b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts @@ -0,0 +1,30 @@ +import { + inkLight, + smokeMain, +} 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}; +`; + +export const StyledSectionLayout = styled(SectionLayout)` + grid-template-columns: 1fr; + padding: 98px 16px; + + img { + margin: 0 auto; + max-width: 700px; + width: 100%; + } + + figcaption { + ${textBodyLarge4002Lines}; + color: ${inkLight}; + } +`; diff --git a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx new file mode 100644 index 0000000..ee091c2 --- /dev/null +++ b/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx @@ -0,0 +1,30 @@ +import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; +import { StyledSection, StyledSectionLayout } from "./sectionSubhero.styles"; + +export const SectionSubhero = (): JSX.Element => { + return ( + + + +
+ The Data integration component will include utilization of existing + API as well as design of new approaches for access of external data. + The Data analysis component will consist of a globally accessible + Galaxy instance deployed using ACCESS-CI/TACC resources. It will + integrate hundreds of tools corresponding to each of the colored + modules. In addition it will offer direct access to notebook + environments such as Jupyter and RStudio allowing ad hoc analytics. A + custom tools service will be offered to satisfy demands of users + requesting missing or new components. We will provide a number of + templates for deployment of serverless ObservableHQ-based dashboard + that can be used to create rich visual representations of analytical + results ranging from simple reports to Nationwide pathogen + surveillance efforts. Finally, the Training component will embrace all + aspects of the systems’ functionality and will include hundreds of + interactive tutorials that can be used by users of all skill levels + from computationally naive experimentalists to system engineers. +
+ + + ); +}; diff --git a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx index 5c69671..6ea1294 100644 --- a/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx +++ b/app/components/Table/components/TableCell/components/AnalyzeGenome/analyzeGenome.tsx @@ -23,7 +23,7 @@ export const AnalyzeGenome = ({ genome }: AnalyzeGenomeProps): JSX.Element => { const { genomeVersionAssemblyId, ucscBrowserUrl } = genome; const onAnalyze = (entityId: string): void => { - Router.push(`${ROUTES.GENOMES}/${entityId}`); + Router.push(`${ROUTES.ORGANISMS}/${entityId}`); }; const onView = (url: string | null): void => { @@ -44,7 +44,7 @@ export const AnalyzeGenome = ({ genome }: AnalyzeGenomeProps): JSX.Element => { , - + , + + + , ]} /> ); diff --git a/app/components/index.ts b/app/components/index.ts index 8afc109..d666cad 100644 --- a/app/components/index.ts +++ b/app/components/index.ts @@ -1,3 +1,4 @@ +export { FluidAlert } from "@databiosphere/findable-ui/lib/components/common/Alert/alert.styles"; export { Breadcrumbs } from "@databiosphere/findable-ui/lib/components/common/Breadcrumbs/breadcrumbs"; export { Grid } from "@databiosphere/findable-ui/lib/components/common/Grid/grid"; export { KeyElType } from "@databiosphere/findable-ui/lib/components/common/KeyValuePairs/components/KeyElType/keyElType"; diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts index bdfc20f..8874295 100644 --- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts +++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/constants.ts @@ -1 +1 @@ -export const GENOME_BROWSER = "Genome Browser"; +export const GENOME_BROWSER = "UCSC Genome Browser"; diff --git a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts index 142d303..1c19f06 100644 --- a/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts +++ b/app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders.ts @@ -55,16 +55,17 @@ export const buildContigs = ( * @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 }: Partial + { text, title, url }: Partial & { url: string } ): ComponentProps => { return { text, title, - url: "", + url, }; }; @@ -81,7 +82,7 @@ export const buildGenomeAnalysisPortals = ( { imageProps: { alt: GENOME_BROWSER, - src: "/analysis-portals/ucsc-genome.svg", + src: "/analysis-portals/ucsc-genome.png", width: 20, }, label: GENOME_BROWSER, @@ -118,7 +119,7 @@ export const buildGenomeDetails = ( const keyValuePairs = new Map(); keyValuePairs.set("Species", genome.species); keyValuePairs.set("Strain", genome.strain); - keyValuePairs.set("Genome Version", genome.genomeVersionAssemblyId); + keyValuePairs.set("Assembly Version ID", genome.genomeVersionAssemblyId); keyValuePairs.set("VeUPathDB Project", genome.vEuPathDbProject); keyValuePairs.set("Contigs", genome.contigs); keyValuePairs.set("Super Contigs", genome.supercontigs); @@ -144,6 +145,21 @@ export const buildGenomeVersionAssemblyId = ( }; }; +/** + * Build props for the organism list hero. + * @returns Props to be used for the FluidAlert component. + */ +export const buildOrganismListHero = (): ComponentProps< + typeof C.FluidAlert +> => { + return { + children: + "The list of currently available taxa was generated by comparing the list maintained by VeuPathDb against official NCBI genome builds. The three buttons adjacent to each taxon direct you to a page listing available analytical workflows as well as direct links to genomic data (NCBI Datasets) and a genome browser (UCSC). A comprehensive search functionality will be developed to allow complex queries.", + icon: false, + severity: "info", + }; +}; + /** * Build props for the species cell. * @param genome - Genome entity. @@ -205,7 +221,7 @@ function getGenomeEntityChooseAnalysisMethodBreadcrumbs( genome: BRCDataCatalogGenome ): Breadcrumb[] { return [ - { path: ROUTES.GENOMES, text: "Genomes" }, + { 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 b4cb0df..5cbe759 100644 --- a/app/views/AboutView/aboutView.tsx +++ b/app/views/AboutView/aboutView.tsx @@ -1,9 +1,8 @@ +import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; import { Fragment } from "react"; -import { SectionRoadmap } from "../../components/About/components/Section/components/SectionRoadmap/sectionRoadmap"; -import { SectionWhatToExpect } from "../../components/About/components/Section/components/SectionWhatToExpect/sectionWhatToExpect"; +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 { StyledDivider } from "../../components/Layout/components/AppLayout/components/Section/section.styles"; import { BREADCRUMBS } from "./common/constants"; export const AboutView = (): JSX.Element => { @@ -12,11 +11,21 @@ export const AboutView = (): JSX.Element => { + BRC-analytics is a collaborative effort of four mature projects that + have been sustained for decades and are thus “battle-tested”. These + include: {" "} + (est. 2005), (est. + 2000),{" "} + {" "} + (est. 2000), and{" "} + (est. 2001). + What are these resources? + + } /> - - - + ); diff --git a/app/views/HomeView/homeView.tsx b/app/views/HomeView/homeView.tsx index b950ff0..b585f81 100644 --- a/app/views/HomeView/homeView.tsx +++ b/app/views/HomeView/homeView.tsx @@ -3,15 +3,13 @@ import { SectionAnalytics } from "../../components/Home/components/Section/compo 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"; export const HomeView = (): JSX.Element => { return ( - - + ); diff --git a/app/views/RoadmapView/common/constants.ts b/app/views/RoadmapView/common/constants.ts new file mode 100644 index 0000000..31868b7 --- /dev/null +++ b/app/views/RoadmapView/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: "Roadmap" }, +]; diff --git a/app/views/RoadmapView/roadmapView.tsx b/app/views/RoadmapView/roadmapView.tsx new file mode 100644 index 0000000..578d903 --- /dev/null +++ b/app/views/RoadmapView/roadmapView.tsx @@ -0,0 +1,21 @@ +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"; +import { BREADCRUMBS } from "./common/constants"; + +export const RoadmapView = (): JSX.Element => { + return ( + + + + + + + ); +}; diff --git a/pages/_app.tsx b/pages/_app.tsx index dae64f9..d2134b7 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -21,7 +21,7 @@ import { StyledFooter } from "../app/components/Layout/components/Footer/footer. import { config } from "../app/config/config"; import { mergeAppTheme } from "../app/theme/theme"; -const DEFAULT_ENTITY_LIST_TYPE = "genomes"; +const DEFAULT_ENTITY_LIST_TYPE = "organisms"; export interface PageProps extends AzulEntitiesStaticResponse { pageTitle?: string; diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 03c16c0..142e3c2 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -1,3 +1,4 @@ +import { GetStaticProps } from "next"; import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles"; import { AboutView } from "../../app/views/AboutView/aboutView"; @@ -5,6 +6,14 @@ export const About = (): JSX.Element => { return ; }; +export const getStaticProps: GetStaticProps = async () => { + return { + props: { + pageTitle: "About", + }, + }; +}; + export default About; About.Main = StyledPagesMain; diff --git a/pages/index.tsx b/pages/index.tsx index f1504bb..4c4a882 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,3 +1,4 @@ +import { GetStaticProps } from "next"; import { StyledMain } from "../app/components/Layout/components/Main/main.styles"; import { HomeView } from "../app/views/HomeView/homeView"; @@ -5,6 +6,14 @@ export const Home = (): JSX.Element => { return ; }; +export const getStaticProps: GetStaticProps = async () => { + return { + props: { + pageTitle: "BRC Analytics", + }, + }; +}; + export default Home; Home.Main = StyledMain; diff --git a/pages/roadmap/index.tsx b/pages/roadmap/index.tsx new file mode 100644 index 0000000..2973e0d --- /dev/null +++ b/pages/roadmap/index.tsx @@ -0,0 +1,19 @@ +import { GetStaticProps } from "next"; +import { StyledPagesMain } from "../../app/components/Layout/components/Main/main.styles"; +import { RoadmapView } from "../../app/views/RoadmapView/roadmapView"; + +export const Roadmap = (): JSX.Element => { + return ; +}; + +export const getStaticProps: GetStaticProps = async () => { + return { + props: { + pageTitle: "Roadmap", + }, + }; +}; + +export default Roadmap; + +Roadmap.Main = StyledPagesMain; diff --git a/public/about/platforms-together.svg b/public/about/platforms-together.svg new file mode 100644 index 0000000..8e68173 --- /dev/null +++ b/public/about/platforms-together.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/analysis-portals/ucsc-genome.png b/public/analysis-portals/ucsc-genome.png new file mode 100644 index 0000000..ce97ef9 Binary files /dev/null and b/public/analysis-portals/ucsc-genome.png differ diff --git a/public/analysis-portals/ucsc-genome.svg b/public/analysis-portals/ucsc-genome.svg deleted file mode 100644 index 6257643..0000000 --- a/public/analysis-portals/ucsc-genome.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/portals/ucsc.png b/public/portals/ucsc.png index 4d80201..ce97ef9 100644 Binary files a/public/portals/ucsc.png and b/public/portals/ucsc.png differ diff --git a/public/roadmap/roadmap.png b/public/roadmap/roadmap.png new file mode 100644 index 0000000..ee2862b Binary files /dev/null and b/public/roadmap/roadmap.png differ diff --git a/routes/constants.ts b/routes/constants.ts index 571d608..c44740a 100644 --- a/routes/constants.ts +++ b/routes/constants.ts @@ -1,4 +1,5 @@ export const ROUTES = { ABOUT: "/about", - GENOMES: "/data/genomes", + ORGANISMS: "/data/organisms", + ROADMAP: "/roadmap", }; diff --git a/site-config/brc-analytics/category.ts b/site-config/brc-analytics/category.ts index 3221b0b..825f5d8 100644 --- a/site-config/brc-analytics/category.ts +++ b/site-config/brc-analytics/category.ts @@ -14,7 +14,7 @@ export const BRC_DATA_CATALOG_CATEGORY_LABEL = { ANALYZE_GENOME: "Action", CHROMOSOMES: "Chromosomes", CONTIGS: "Contigs", - GENOME_VERSION_ASSEMBLY_ID: "Genome Version/Assembly ID", + GENOME_VERSION_ASSEMBLY_ID: "Assembly Version ID", SPECIES: "Species", STRAIN: "Strain", SUPERCONTIGS: "Supercontigs", diff --git a/site-config/brc-analytics/local/config.ts b/site-config/brc-analytics/local/config.ts index 688ff9d..ff3716c 100644 --- a/site-config/brc-analytics/local/config.ts +++ b/site-config/brc-analytics/local/config.ts @@ -48,7 +48,8 @@ export function makeConfig(browserUrl: string): SiteConfig { navigation: [ undefined, [ - { label: "Datasets", url: ROUTES.GENOMES }, + { label: "Roadmap", url: ROUTES.ROADMAP }, + { label: "Datasets", url: ROUTES.ORGANISMS }, { label: "About", url: ROUTES.ABOUT }, ], undefined, diff --git a/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts b/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts index 03ac283..b4f65d7 100644 --- a/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts +++ b/site-config/brc-analytics/local/entity/genome/analysisMethodMainColumn.ts @@ -6,12 +6,22 @@ import * as V from "../../../../../app/viewModelBuilders/catalog/brc-analytics-c 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: "", }), }, { @@ -20,6 +30,7 @@ export const mainColumn: ComponentsConfig = [ V.buildGenomeAnalysisMethod(r, { text: MDX.Transcriptomics({}), title: "Transcriptomics", + url: "", }), }, { @@ -28,6 +39,7 @@ export const mainColumn: ComponentsConfig = [ V.buildGenomeAnalysisMethod(r, { text: MDX.Regulation({}), title: "Regulation", + url: "", }), }, { @@ -36,6 +48,7 @@ export const mainColumn: ComponentsConfig = [ V.buildGenomeAnalysisMethod(r, { text: MDX.Assembly({}), title: "Assembly", + url: "", }), }, { @@ -44,6 +57,7 @@ export const mainColumn: ComponentsConfig = [ V.buildGenomeAnalysisMethod(r, { text: MDX.GenomeComparisons({}), title: "Genome comparisons", + url: "", }), }, { @@ -52,6 +66,7 @@ export const mainColumn: ComponentsConfig = [ V.buildGenomeAnalysisMethod(r, { text: MDX.ProteinFolding({}), title: "Protein folding", + url: "", }), }, ], diff --git a/site-config/brc-analytics/local/index/genomeEntityConfig.ts b/site-config/brc-analytics/local/index/genomeEntityConfig.ts index 3103702..63f37fa 100644 --- a/site-config/brc-analytics/local/index/genomeEntityConfig.ts +++ b/site-config/brc-analytics/local/index/genomeEntityConfig.ts @@ -19,6 +19,7 @@ import { 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"; /** * Entity config object responsible to config anything related to the /genomes route. @@ -63,10 +64,10 @@ export const genomeEntityConfig: BRCEntityConfig = { ], }, exploreMode: EXPLORE_MODE.CS_FETCH_CS_FILTERING, - explorerTitle: "Genomes", + explorerTitle: "Organisms", getId: getGenomeId, getTitle: getGenomeTitle, - label: "Genomes", + label: "Organisms", list: { columns: [ { @@ -153,7 +154,8 @@ export const genomeEntityConfig: BRCEntityConfig = { disablePagination: true, enableDownload: true, enableTab: false, + listHero, }, - route: "genomes", + route: "organisms", staticLoadFile: "files/out/genomes.json", }; diff --git a/site-config/brc-analytics/local/listView/listHero.ts b/site-config/brc-analytics/local/listView/listHero.ts new file mode 100644 index 0000000..111e50b --- /dev/null +++ b/site-config/brc-analytics/local/listView/listHero.ts @@ -0,0 +1,13 @@ +import { + ComponentConfig, + ComponentsConfig, +} from "@databiosphere/findable-ui/lib/config/entities"; +import * as C from "../../../../app/components"; +import * as V from "../../../../app/viewModelBuilders/catalog/brc-analytics-catalog/common/viewModelBuilders"; + +export const listHero: ComponentsConfig = [ + { + component: C.FluidAlert, + viewBuilder: V.buildOrganismListHero, + } as ComponentConfig, +];