From 6e14ca79660d98eb426879699ed4c6c151874197 Mon Sep 17 00:00:00 2001 From: Samuel Ogunleye <61986442+Sproff@users.noreply.github.com> Date: Tue, 8 Oct 2024 15:38:54 +0100 Subject: [PATCH] Start filling out the About page (#24) Closes #21 - port over some text from 1.0 help page as appropriate, and make design tweaks and some wording tweaks --------- Co-authored-by: Vincent Rubinetti --- frontend/bun.lockb | Bin 326184 -> 326184 bytes frontend/src/components/Flex.tsx | 2 +- frontend/src/components/Heading.module.css | 5 +- frontend/src/components/Link.module.css | 9 +- frontend/src/components/Link.tsx | 4 +- .../src/components/TableOfContents.module.css | 1 + frontend/src/pages/About.tsx | 578 ++++++++++++++---- frontend/src/util/string.ts | 4 + 8 files changed, 484 insertions(+), 119 deletions(-) diff --git a/frontend/bun.lockb b/frontend/bun.lockb index 719075de7cc6a58a16eae0f38b774076741ccc88..59b4202882a022f62d1b47bd09a4e0f629e3d42d 100755 GIT binary patch delta 34 qcmZ4SMR>&*;f5B*7N#xCjY=GhaVC0(26_hVol4BxJC#`GUk3o)E(_fN delta 34 lcmZ4SMR>&*;f5B*7N#xCjY=F$3=q)Xsl>d!Q;B8%bpXe@3SR&K diff --git a/frontend/src/components/Flex.tsx b/frontend/src/components/Flex.tsx index 48ccbb5..b97ac2f 100755 --- a/frontend/src/components/Flex.tsx +++ b/frontend/src/components/Flex.tsx @@ -18,7 +18,7 @@ type Props = { /** amount of space between items */ gap?: "md" | "none" | "xs" | "sm" | "lg" | "xl"; /** vertical gap fraction of horizontal gap */ - gapRatio?: 1 | 0.5; + gapRatio?: 1 | 0.5 | 0.25 | 0; /** whether to wrap items */ wrap?: true | false; /** whether to make full width */ diff --git a/frontend/src/components/Heading.module.css b/frontend/src/components/Heading.module.css index 4735e11..98ef354 100755 --- a/frontend/src/components/Heading.module.css +++ b/frontend/src/components/Heading.module.css @@ -14,10 +14,13 @@ h2.heading { h3.heading, h4.heading { justify-content: flex-start; - margin-bottom: -1em; text-align: left; } +:is(h3.heading, h4.heading) + :not(h3.heading, h4.heading) { + margin-top: -1em; +} + .icon { color: var(--deep); } diff --git a/frontend/src/components/Link.module.css b/frontend/src/components/Link.module.css index 75a7cf9..3a4e21a 100755 --- a/frontend/src/components/Link.module.css +++ b/frontend/src/components/Link.module.css @@ -1,6 +1,5 @@ -.icon { - position: relative; - top: -0.1em; - padding-left: 0.5em; - vertical-align: middle; +.link { + display: inline-flex; + align-items: center; + gap: 5px; } diff --git a/frontend/src/components/Link.tsx b/frontend/src/components/Link.tsx index fde1f8b..ecbb8a9 100755 --- a/frontend/src/components/Link.tsx +++ b/frontend/src/components/Link.tsx @@ -51,7 +51,7 @@ const Link = forwardRef( {...props} > {children} - {_showArrow && } + {_showArrow && } ) : ( {children} - {_showArrow && } + {_showArrow && } ); diff --git a/frontend/src/components/TableOfContents.module.css b/frontend/src/components/TableOfContents.module.css index f0c53da..f6c08fd 100755 --- a/frontend/src/components/TableOfContents.module.css +++ b/frontend/src/components/TableOfContents.module.css @@ -41,6 +41,7 @@ } .link { + display: inline-block; flex-shrink: 0; padding: 5px 10px; overflow: hidden; diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx index 2e956bf..c2f7066 100755 --- a/frontend/src/pages/About.tsx +++ b/frontend/src/pages/About.tsx @@ -1,7 +1,79 @@ -import { FaPenNib } from "react-icons/fa6"; +import { + FaBook, + FaCommentDots, + FaDoorOpen, + FaEnvelope, + FaGithub, + FaMicroscope, + FaPenNib, + FaTwitter, + FaUsers, +} from "react-icons/fa6"; +import Button from "@/components/Button"; +import Flex from "@/components/Flex"; import Heading from "@/components/Heading"; +import Link from "@/components/Link"; import Meta from "@/components/Meta"; import Section from "@/components/Section"; +import { trim } from "@/util/string"; + +const team = [ + { + name: "Janani Ravi (corresponding author)", + email: "janani.ravi@cuanschutz.edu", + github: "jananiravi", + twitter: "janani137", + }, + { + name: "Jacob D Krol", + email: "jacob.krol@cuanschutz.edu", + github: "jakekrol", + }, + { + name: "Joseph T Burke", + email: "burkej24@msu.edu", + github: "jburke11", + }, + { + name: "Samuel Z Chen", + email: "chensam2@msu.edu", + github: "samuelzornchen", + twitter: "SamuelZChen", + }, + { + name: "Lo Sosinski", + email: "sosinsk7@msu.edu", + github: "lsosinski", + twitter: "lo_sosinski", + }, + { + name: "Faisal S Alquaddoomi", + email: "faisal.alquaddoomi@cuanschutz.edu", + github: "falquaddoomi", + }, + { + name: "Evan P Brenner", + email: "evan.brenner@cuanschutz.edu", + github: "epbrenner", + }, + { + name: "Vince P Rubinetti", + email: "vincent.rubinetti@cuanschutz.edu", + github: "vincerubinetti", + }, + { + name: "Shaddai Amolitos", + email: "shaddai.amolitos@cuanschutz.edu", + }, + { + name: "Kellen M Reason", + email: "reasonke@msu.edu", + }, + { + name: "John B Johnston", + email: "johnj@msu.edu", + }, +]; const About = () => { return ( @@ -15,149 +87,435 @@ const About = () => {
- FAQs + }> + FAQs + - - How long will my analysis take? + + How will I know when my analysis is done? Where are my past analyses? -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+ +

+ When you submit an analysis, you'll be taken to a dedicated page for + it where you can its status, and eventually, the results. You can + bookmark this page or otherwise save its URL to view it later. +

- - Where is my analysis? What is the status? - +

+ You may also supply your email before submitting your analysis. + We'll send you link to the analysis' page when its done. +

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+

+ You can see the most recent analyses you submitted on your current + device in the{" "} + history section. +

+ + + When can I expect my results? + + +

+ The time it takes to complete an analysis can be as little as a few + minutes or as much as a few hours. It depends on many factors, such + as: +

+ +
    +
  • Number of sequences submitted
    • +
  • Number of homologs to search for each sequence
    • +
  • Length & complexity of sequences
    • +
+ +

+ We try to provide helpful status information for monitoring + analyses. +

+ + + How do I upload protein sequences? + + +

+ Protein sequence formats we support: +

+ +
    +
  • + + NCBI FASTA + + + 
    +                
+                  {trim(
+                    `>OHS91782.1 16S rRNA pseudouridine(516) synthase [Staphylococcus aureus]
+                  MRIDKFLANMGVGTRNEVKQLLKKGLVNVNEQVIKSPKTHIEPENDKITVRGELIEYIENVYIMLNKPKG
+                  YISATEDHHSKTVIDLIPEYQHLNIFPVGRLDKDTEGLLLITNDGDFNHELMSPNKHVSKKYEVISANPI
+                  TEDDIQAFKEGVTLTDGKVKPAILTYIDNQTSHVTIYEGKYHQVKRMFHSIQNEVLHLRRIKIADLELDS
+                  NLDSGEYRLLTENDFDKLNYK`,
+                  )}
+                
+
    +
    • + +
  • + + UniProt FASTA + + + 
    +                {trim(
+                  `>sp|P01189|COLI_HUMAN Pro-opiomelanocortin OS=Homo sapiens OX=9606 GN=POMC PE=1 SV=2
+                MPRSCCSRSGALLLALLLQASMEVRGWCLESSQCQDLTTESNLLECIRACKPDLSAETPM
+                FPGNGDEQPLTENPRKYVMGHFRWDRFGRRNSSSSGSSGAGQKREDVSAGEDCGPLPEGG
+                PEPRSDGAKPGPREGKRSYSMEHFRWGKPVGKKRRPVKVYPNGAEDESAEAFPLEFKREL
+                TGQRLREGDGPDGPADDGAGAQADLEHSLLVAAEKKDEGPYRMEHFRWGSPPKDKRYGGF
+                MTSEKSQTPLVTLFKNAIIKNAYKKGE`,
+                )}
+
    +
    • + +
  • + Custom FASTA header (not recommended) + + 
    +                
+                  {trim(
+                    `>SEQUENCE154 UNKNOWN 
+                  MPRSCCSRSGALLLALLLQASMEVRGWCLESSQCQDLTTESNLLECIRACKPDLSAETPM
+                  FPG`,
+                  )}
+                
+
    +
    • +
+ +

+ We use NCBI or UniProt accessions to get taxonomy info from query + proteins. Therefore, we recommend you include valid protein + accession numbers in the header when possible. +

+ +

+ Common mistakes: +

+ +
    +
  • +

    + No header lines (missing {">"} header delimiter) +

    + + 
    +                
+                  {trim(
+                    `MRIDKFLANMGVGTRNEVKQLLKKGLVNVNEQVIKSPKTHIEPENDKITVRGELIEYIENVYIMLNKPKG
+
+                  MPRSCCSRSGALLLALLLQASMEVRGWCLESSQCQDLTTESNLLECIRACKPDLSAETPM`,
+                  )}
+                
+
    +
    • + +
  • +

    Duplicate headers/accnums

    + + 
    +                
+                  {trim(
+                    `>GCF_000013425.1
+                  MVPEEKGSITLSKEAAIIFAIAKFKPFKNRIKNNPQKTNPFLKLHENKKS
+                  >GCF_000013425.1
+                  MKQKKSKNIFWVFSILAVVFLVLFSFAVGASNVPMMILTFILLVATFGIGFTTKKKYRENDWL
+                  >protein
+                  MKLTLMKFFVGGFAVLLSYIVSVTLPWKEFGGIFATFPAVFLVSMFITGMQYGDKVAVHVSRGAVFGMTGVLVCILVTWM
+                  MLHMTHMWLISIVVGFLSWFISAVCIFEAVEFIAQKRLEKHSWKAGKSNSK
+                  >protein
+                  MVKRTYQPNKRKHSKVHGFRKRMSTKNGRKVLARRRRKGRKVLSA`,
+                  )}
+                
+
    +
    • +
+
- Behind MolEvolvR + }> + Behind MolEvolvR + Data sources -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+
    +
  • NCBI Taxonomy
    • +
  • NCBI GenBank/RefSeq
    • +
  • BLAST RefSeq
    • +
  • NR DB
    • +
  • InterPro
    • +
Technologies -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+ +

+ MolEvolvR is a coordination of several different technologies, + consisting of: +

- Team +
    +
  • + + + MolEvolvR package + + {" "} + – the R package at the core of everything, which does most + of the analysis calculations +
    • +
  • + Frontend – a web app written in React +
    • -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

    +
  • + Backend – a backend written in{" "} + Plumber +
    • + +
  • + Cluster – a containerized SLURM cluster on + which jobs are run +
    • + +
  • + Postgres – configuration for a database + which stores job information +
    • +
+ + + Compatibility + + +

This web-app is regularly tested on the following:

+ +
    +
  • Google Chrome, Mozilla Firefox, Apple Safari
    • +
  • Windows, MacOS, iOS, Android
    • +
  • Desktop, tablet, phone/mobile
    • +
+ +

+ The following are NOT supported, and may result in unexpected look + or behavior: +

+ +
    +
  • Internet Explorer
    • +
  • + Smart watches, or any device with a screen width {"<"} ~250px +
    • +
  • Browsers without JavaScript enabled
    • +
+ +

+ If you encounter a bug, please{" "} + let us know! +

+
- Getting Sequences - - - From Iprscan5{" "} - (for InterProScan analyses) + }> + Case studies -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+ +

+ The computational methods underlying MolEvolvR have enabled + understanding fundamental biological systems and protein evolution. +

- - From NCBI BLAST{" "} - (for BLAST analyses) - +

+ In this section, companion MolEvolvR jobs for proteins studied in + these publications are provided for users to explore. +

+ -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+ + + Surface layer proteins in Gram-positive bacteria (Bacillota) + + +
    +
  • + + Publication + +
    • + +
  • + + MolEvolvR results + +
    • +
+ + Helicase operators in bacteria + +
    +
  • + Publication +
    • + +
  • + + MolEvolvR results + +
    • +
+ + Novel internalin P homologs in Listeria + +
    +
  • + + Publication + +
    • + +
  • + + MolEvolvR results + +
    • +
+ + Staphylococcus aureus sulfur acquisition + + Glutathione import system + +
    +
  • + + Publication + +
    • +
  • + + MolEvolvR results + +
    • +
+ + Cystine transporters + +
    +
  • + Publication +
    • +
  • + + MolEvolvR results + +
    • +
+ + V. cholerae phage defense system + +
    +
  • + + Publication + +
    • +
  • + {" "} + + MolEvolvR results + +
    • +
+
- In-depth Info + }> + Get to know us + - Format of protein sequences + Team -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+
    + {team.map(({ name, email, github, twitter }, index) => ( +
  • + + {name} + {email && ( + + + {email} + + )} + {github && ( + + @{github} + + )} + {twitter && ( + + @{twitter} + + )} + +
    • + ))} +
- Accession numbers and FASTA + Funding

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. + We would like to thank our funding sources: Endowed Research Funds + from the College of Veterinary Medicine, Michigan State University, + NSF-funded BEACON funding support, and the University of Colorado + Anschutz start-up funds awarded to JR; NSF-funded REU-ACRES summer + scholarship to SZC; NIH NIAID U01AI176414 to JR; NIH NLM T15LM009451 + to EPB.

- Query heatmap missing lineages + Contact -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. -

+ +
); diff --git a/frontend/src/util/string.ts b/frontend/src/util/string.ts index 0ad61be..92f11a4 100755 --- a/frontend/src/util/string.ts +++ b/frontend/src/util/string.ts @@ -46,3 +46,7 @@ export const makeLabel = (string: string) => ( new DOMParser().parseFromString(string, "text/html").body.textContent || "" ).replaceAll(/\s+/g, " "); + +/** trim white-space */ +export const trim = (string: string) => + string.replaceAll(/^\s+/gm, "").replaceAll(/\s+$/gm, "");