feat: content for the roadmap page (#93)

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;

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<SectionProps>`
   ${(props) =>
     props.border &&
@@ -81,6 +108,8 @@ export const SubHeadline = styled.div`
 `;
 
 export const SectionContent = styled.div<LayoutProps>`
+  ${list};
+  ${listItem};
   grid-column: 1 / -1;
   margin-top: 16px;
 

app/components/content/index.tsx

@@ -1 +1,2 @@
 export { default as SectionAbout } from "./sectionAbout.mdx";
+export { default as SectionRoadmap } from "./sectionRoadmap.mdx";

app/components/content/sectionRoadmap.mdx

@@ -0,0 +1,73 @@
+<Section border>
+  <SectionLayout paired>
+    <SectionHeadline paired>
+      ## Our plan
+      <SubHeadline>
+        This will be an iterative process involving multiple steps in several
+        areas:
+      </SubHeadline>
+    </SectionHeadline>
+    <SectionContent paired>
+      <Grid gridSx={{ gap: 4 }}>
+        <Accordion>
+          <AccordionSummary>VEuPathDb database migration</AccordionSummary>
+          <AccordionDetails>
+            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.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Harmonization of genomic data for all taxa</AccordionSummary>
+          <AccordionDetails>
+            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.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Galaxy integration</AccordionSummary>
+          <AccordionDetails>
+            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.
+          </AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary>Help and community outreach</AccordionSummary>
+          <AccordionDetails>
+            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.
+          </AccordionDetails>
+        </Accordion>
+      </Grid>
+    </SectionContent>
+
+  </SectionLayout>
+</Section>

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 => {
       <SectionHero
         breadcrumbs={BREADCRUMBS}
         head="Roadmap"
-        subHead="As BRC Analytics develops, we will utilize existing APIs and design new approaches for external data access, integrate Galaxy with hundreds of tools, provide access to Jupyter and RStudio for ad hoc analytics, offer custom tools and ObservableHQ-based dashboards, and include interactive tutorials for users of all skill levels."
+        subHead="BRC-Analytics plans to deliver new powerful analysis functionality while provide access to some features of the VEuPathDb system. This will be an iterative process involving multiple steps in several areas."
       />
-      <SectionSubhero />
       <SectionRoadmap />
     </Fragment>
   );