From 63d605ea8074a9cc1f0c263aa0fbc4660489d75b Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 3 Oct 2024 01:12:50 +1000 Subject: [PATCH] feat: content for the roadmap page (#93) --- .../SectionRoadmap/sectionRoadmap.styles.ts | 82 ---------------- .../SectionRoadmap/sectionRoadmap.tsx | 94 ------------------- .../SectionSubhero/sectionSubhero.styles.ts | 25 ----- .../SectionSubhero/sectionSubhero.tsx | 31 ------ .../components/Section/section.styles.ts | 6 -- .../common/Accordion/accordion.styles.ts | 4 + app/components/content/content.styles.ts | 29 ++++++ app/components/content/index.tsx | 1 + app/components/content/sectionRoadmap.mdx | 73 ++++++++++++++ app/views/RoadmapView/roadmapView.tsx | 6 +- pages/roadmap/index.tsx | 16 ++++ public/roadmap/roadmap.svg | 1 - 12 files changed, 125 insertions(+), 243 deletions(-) delete mode 100644 app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts delete mode 100644 app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx delete mode 100644 app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts delete mode 100644 app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx delete mode 100644 app/components/Roadmap/components/Section/section.styles.ts create mode 100644 app/components/content/sectionRoadmap.mdx delete mode 100644 public/roadmap/roadmap.svg diff --git a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts b/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts deleted file mode 100644 index a268baf..0000000 --- a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.styles.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { mediaTabletUp } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints"; -import { inkLight } from "@databiosphere/findable-ui/lib/styles/common/mixins/colors"; -import { - textBody500, - textBodyLarge4002Lines, - textBodyLarge500, -} from "@databiosphere/findable-ui/lib/styles/common/mixins/fonts"; -import styled from "@emotion/styled"; -import { - sectionGrid, - sectionLayout, -} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; - -export const SectionLayout = styled.div` - ${sectionLayout} - ${sectionGrid}; - padding: 96px 16px 98px; -`; - -export const SubHeadline = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - grid-column: 1 / -1; - - ${mediaTabletUp} { - grid-column: 1 / 6; - } -`; - -export const Subhead = styled.h2` - font-size: 40px; - font-weight: 500; - grid-column: 1 / -1; - letter-spacing: -0.4px; - line-height: 48px; - margin: 0; -`; - -export const SectionContent = styled.div` - grid-column: 1 / -1; - - ${mediaTabletUp} { - grid-column: 7 / -1; - } -`; - -export const Category = styled.div` - margin: 40px 0; - - &:first-of-type { - margin-top: 0; - } - - &:last-of-type { - margin-bottom: 0; - } -`; - -export const CategoryTitle = styled.h4` - ${textBodyLarge500}; - 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 deleted file mode 100644 index 011681c..0000000 --- a/app/components/Roadmap/components/Section/components/SectionRoadmap/sectionRoadmap.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { Link } from "@databiosphere/findable-ui/lib/components/Links/components/Link/link"; -import { Section } from "../../section.styles"; -import { - Category, - CategorySubTitle, - CategoryText, - CategoryTitle, - SectionContent, - SectionLayout, - Subhead, - SubHeadline, -} from "./sectionRoadmap.styles"; - -export const SectionRoadmap = (): JSX.Element => { - return ( -
- - - Development Plan - - - - Develop data component - Data 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 deleted file mode 100644 index 1dc190f..0000000 --- a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.styles.ts +++ /dev/null @@ -1,25 +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 { - sectionGrid, - sectionLayout, -} from "../../../../../Layout/components/AppLayout/components/Section/section.styles"; - -export const SectionLayout = styled.div` - ${sectionLayout}; - ${sectionGrid}; - 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 deleted file mode 100644 index a5539c4..0000000 --- a/app/components/Roadmap/components/Section/components/SectionSubhero/sectionSubhero.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { StaticImage } from "@databiosphere/findable-ui/lib/components/common/StaticImage/staticImage"; -import { Section } from "../../section.styles"; -import { SectionLayout } from "./sectionSubhero.styles"; - -export const SectionSubhero = (): JSX.Element => { - return ( -
- - -
- The Data integration component will include utilization of existing - 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/Roadmap/components/Section/section.styles.ts b/app/components/Roadmap/components/Section/section.styles.ts deleted file mode 100644 index bad4b62..0000000 --- a/app/components/Roadmap/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/common/Accordion/accordion.styles.ts b/app/components/common/Accordion/accordion.styles.ts index 76e2ae8..41f9929 100644 --- a/app/components/common/Accordion/accordion.styles.ts +++ b/app/components/common/Accordion/accordion.styles.ts @@ -29,5 +29,9 @@ export const StyledAccordion = styled(MAccordion)` color: ${inkLight}; margin: 0; padding: 0 20px 8px; + + > *:last-child { + margin-bottom: 0; + } } ` as typeof MAccordion; diff --git a/app/components/content/content.styles.ts b/app/components/content/content.styles.ts index 0c079bc..a570964 100644 --- a/app/components/content/content.styles.ts +++ b/app/components/content/content.styles.ts @@ -22,6 +22,33 @@ export interface SectionProps { divider?: boolean; } +export const list = css` + ol, + ul { + margin: 0; + padding-left: 24px; + } + + ol + p, + ul + p { + margin-top: 16px; + } + + ol ol { + list-style-type: lower-roman; + } +`; + +export const listItem = css` + li { + margin: 4px 0; + + &:last-child { + margin-bottom: 0; + } + } +`; + export const Section = styled.section` ${(props) => props.border && @@ -81,6 +108,8 @@ export const SubHeadline = styled.div` `; export const SectionContent = styled.div` + ${list}; + ${listItem}; grid-column: 1 / -1; margin-top: 16px; diff --git a/app/components/content/index.tsx b/app/components/content/index.tsx index 1513589..1b634c4 100644 --- a/app/components/content/index.tsx +++ b/app/components/content/index.tsx @@ -1 +1,2 @@ export { default as SectionAbout } from "./sectionAbout.mdx"; +export { default as SectionRoadmap } from "./sectionRoadmap.mdx"; diff --git a/app/components/content/sectionRoadmap.mdx b/app/components/content/sectionRoadmap.mdx new file mode 100644 index 0000000..7902f36 --- /dev/null +++ b/app/components/content/sectionRoadmap.mdx @@ -0,0 +1,73 @@ +
+ + + ## Our plan + + This will be an iterative process involving multiple steps in several + areas: + + + + + + VEuPathDb database migration + + This set of tasks deals with transferring data from VEuPathDb + infrastructure and creating a list of genomes that will be initially + maintained within BRC-Analytics. The number of taxa included in our + system will + + 1. Transferring databases and associated data from VEuPathDb servers to TACC infrastructure. + 1. Understanding the structure of VEuPathDb database and deciding which data will be ingested as custom + tracks for the BRC-analytics instance of the UCSC Genome Browser. + 1. Uncovering how JBrowse instances were created within VEuPathDb gene pages and replicating this data at + the BRC-analytics instance of the UCSC Genome Browser. + + + + Harmonization of genomic data for all taxa + + This set of tasks ensures that BRC-analytics provides access to the latest versions of all 785 VEuPathDb + taxa and associated annotations. + + 1. Build UCSC Genome Browsers for all 785 taxa by matching genomes found in VEuPathDb against NCBI Datasets. + 1. Add annotations that can be extracted from the VEuPathDb databases and JBrowse instances (related to 2 + and 3 above) + 1. Create links from UCSC Gene Pages to NCBI Gene pages + 1. Work with NCBI on evolution of gene pages to contain information similar to what was contained within the + VEuPathDb gene pages. + + + + Galaxy integration + + 1. Create a dedicated Galaxy instance at [https://brc.usegalaxy.org](https://brc.usegalaxy.org) + 1. Prepare reference data for all 785 genomes that will initially be served by the system. This includes + creation of indices for bowtie, bowtie2, bwa-mem, bwa-mem2, hisat2, STAR, and SnpEff. + 1. Create a single sign-on so that user accounts are shared between brc-analytics and Galaxy. When creating + an account the user should be able to specify the default Galaxy instances (.org, .eu., .org.au, .fr ...) + 1. Develop functionality for "focusing" Galaxy on a particular genome build selected by the user (see + ["Focusing" Galaxy on a particular genome + galaxy#18882](https://github.com/galaxyproject/galaxy/issues/18882)). + 1. Develop "simplified workflow" interface (see [Simplified workflow run interface + galaxy#18883](https://github.com/galaxyproject/galaxy/issues/18883)) + 1. Develop and polish workflows for variant discovery, epigenetics, transcriptomics, assembly, and protein + folding that were previously available to the users on VEuPathDb Galaxy instance. + + + + Help and community outreach + + 1. Create dedicated linkedin, mastodon, and bluesky accounts + 1. Create a dedicated support channel using Discourse infrastructure. + 1. Try to connect with as many users of VEuPathDb as possible to solicit their feedback across multiple + areas including: which features are needed, what genomes should be integrated, which key datasets need to be + re-analyzed in put in the context of available genomic data. + 1. Beginning on Oct 1st begin posting regular updates via social media channels. + + + + + + +
diff --git a/app/views/RoadmapView/roadmapView.tsx b/app/views/RoadmapView/roadmapView.tsx index 3bb7de3..a75c90e 100644 --- a/app/views/RoadmapView/roadmapView.tsx +++ b/app/views/RoadmapView/roadmapView.tsx @@ -1,7 +1,6 @@ import { Fragment } from "react"; +import { SectionRoadmap } from "../../components/content"; 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 => { @@ -10,9 +9,8 @@ export const RoadmapView = (): JSX.Element => { - ); diff --git a/pages/roadmap/index.tsx b/pages/roadmap/index.tsx index 7c8895f..60975e3 100644 --- a/pages/roadmap/index.tsx +++ b/pages/roadmap/index.tsx @@ -12,6 +12,22 @@ export const getStaticProps: GetStaticProps = async () => { props: { pageTitle: "Roadmap", 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/roadmap/roadmap.svg b/public/roadmap/roadmap.svg deleted file mode 100644 index 33abd9c..0000000 --- a/public/roadmap/roadmap.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file