feat(web): scaffold multi-step wizard on main page

packages_rs/nextclade-web/package.json

@@ -143,6 +143,7 @@
     "react-resize-detector": "7.0.0",
     "react-select": "5.3.0",
     "react-toggle": "4.1.2",
+    "react-use-wizard": "2.2.3",
     "react-virtualized-auto-sizer": "1.0.6",
     "react-virtualized-select": "3.1.3",
     "react-window": "1.8.7",

packages_rs/nextclade-web/src/components/About/About.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import AboutContent from './AboutContent.mdx'
+
+export function About() {
+  return <AboutContent />
+}

packages_rs/nextclade-web/src/components/About/AboutContent.mdx

@@ -0,0 +1,43 @@
+import { CladeSchema } from 'src/components/Main/CladeSchema.tsx'
+
+## What is Nextclade?
+
+Nextclade is a tool that performs genetic sequence alignment, clade assignment, mutation calling, phylogenetic placement, and quality checks for SARS-CoV-2, Influenza (Flu), Mpox (Monkeypox), Respiratory Syncytial Virus (RSV) and other pathogens.
+
+Nextclade identifies differences between your sequences and a reference sequence, uses these differences to assign your sequences to clades, reports potential sequence quality issues in your data, and shows how the sequences are related to each other by placing them into an existing phylogenetic tree (we call it "phylogenetic placement"). You can use the tool to analyze sequences before you upload them to a database, or if you want to assign Nextstrain clades to a set of sequences.
+
+To analyze your data, drag a fasta file onto the upload box or paste sequences into the text box. These sequences will then be analyzed in your browser - data never leave your computer. Since your computer is doing the work rather than a server, it is advisable to analyze at most a few hundred sequences at a time.
+
+The Nextclade app and algorithms are opensource. The code is available on [GitHub](https://github.com/nextstrain/nextclade). The user manual is available at [docs.nextstrain.org/projects/nextclade](https://docs.nextstrain.org/projects/nextclade).
+
+
+### What are the SARS-CoV-2 clades?
+
+Nextclade was originally developed during COVID-19 pandemic, primarily focused on SARS-CoV-2. This section describes clades with application to SARS-CoV-2, but Nextclade can analyse other pathogens too.
+
+<CladeSchema />
+
+Since its emergence in late 2019, SARS-CoV-2 has diversified into several different co-circulating variants. To facilitate discussion of these variants, we have grouped them into __clades__ which are defined by specific signature mutations.
+
+We currently define more than 30 clades (see [this blog post](https://nextstrain.org/blog/2021-01-06-updated-SARS-CoV-2-clade-naming) for details):
+
+- 19A and 19B emerged in Wuhan and have dominated the early outbreak
+- 20A emerged from 19A out of dominated the European outbreak in March and has since spread globally
+- 20B and 20C are large genetically distinct subclades 20A emerged in early 2020
+- 20D to 20J have emerged over the summer of 2020 and include three "Variants of Concern" (VoC).
+- 21A to 21F include the VoC __delta__ and several Variants of Interest (VoI).
+- 21K onwards are different clades within the diverse VoC __omicron__.
+
+Within Nextstrain, we define each clade by its combination of signature mutations. You can find the exact clade definition in [github.com/nextstrain/ncov/defaults/clades.tsv](https://github.com/nextstrain/ncov/blob/master/defaults/clades.tsv). When available, we will include [WHO labels for VoCs and VoIs](https://www.who.int/en/activities/tracking-SARS-CoV-2-variants/).
+
+Learn more about how Nextclade assigns clades in the [documentation](https://docs.nextstrain.org/projects/nextclade/en/stable/user/algorithm/).
+
+### Other pathogens
+
+Besides SARS-CoV-2, we provide Nextclade datasets to analyze the following other pathogens:
+
+ * Seasonal Influenza viruses (HA and NA for A/H3N2, A/H1N1pdm, B/Vic, and B/Yam)
+ * Mpox virus (the overall clade structure, as well as fine-grained lineages within the recent sustained human-to-human transmission)
+ * Respiratory Syncytial Virus (RSV) (subtypes A and B)
+
+You can also put together your own dataset to analyse other pathogens.

packages_rs/nextclade-web/src/components/Layout/Layout.tsx

@@ -19,7 +19,9 @@ const HeaderWrapper = styled.header`
 `
 
 const MainWrapper = styled.main`
-  flex: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   overflow: hidden;
   height: 100%;
   width: 100%;

packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx

@@ -1,18 +1,23 @@
 import React, { HTMLProps, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
+import { Container as ContainerBase } from 'reactstrap'
 import styled from 'styled-components'
 import { ThreeDots } from 'react-loader-spinner'
-import { SuggestionPanel } from 'src/components/Main/SuggestionPanel'
+import type { Dataset } from 'src/types'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
-import { datasetCurrentAtom, datasetsAtom } from 'src/state/dataset.state'
+import { datasetsAtom } from 'src/state/dataset.state'
 import { SearchBox } from 'src/components/Common/SearchBox'
 import { DatasetSelectorList } from 'src/components/Main/DatasetSelectorList'
 
-export function DatasetSelector() {
+export interface DatasetSelectorProps {
+  datasetHighlighted?: Dataset
+  onDatasetHighlighted?(dataset?: Dataset): void
+}
+
+export function DatasetSelector({ datasetHighlighted, onDatasetHighlighted }: DatasetSelectorProps) {
   const { t } = useTranslationSafe()
   const [searchTerm, setSearchTerm] = useState('')
   const { datasets } = useRecoilValue(datasetsAtom)
-  const [datasetCurrent, setDatasetCurrent] = useRecoilState(datasetCurrentAtom)
 
   const isBusy = datasets.length === 0
 
@@ -28,9 +33,9 @@ export function DatasetSelector() {
         {!isBusy && (
           <DatasetSelectorList
             datasets={datasets}
-            datasetHighlighted={datasetCurrent}
+            datasetHighlighted={datasetHighlighted}
             searchTerm={searchTerm}
-            onDatasetHighlighted={setDatasetCurrent}
+            onDatasetHighlighted={onDatasetHighlighted}
           />
         )}
 
@@ -42,19 +47,14 @@ export function DatasetSelector() {
           </SpinnerWrapper>
         )}
       </Main>
-
-      <Footer>
-        <SuggestionPanel />
-      </Footer>
     </Container>
   )
 }
 
-const Container = styled.div`
+const Container = styled(ContainerBase)`
   display: flex;
   flex: 1;
   flex-direction: column;
-  height: 100%;
   overflow: hidden;
   margin-right: 10px;
 `
@@ -74,10 +74,10 @@ const Main = styled.div`
   overflow: hidden;
 `
 
-const Footer = styled.div`
-  display: flex;
-  flex: 0;
-`
+// const Footer = styled.div`
+//   display: flex;
+//   flex: 0;
+// `
 
 const Title = styled.h4`
   flex: 1;

packages_rs/nextclade-web/src/components/Main/DatasetSelectorList.tsx

@@ -12,16 +12,31 @@ import {
   autodetectRunStateAtom,
   groupByDatasets,
 } from 'src/state/autodetect.state'
+import { minimizerIndexVersionAtom } from 'src/state/dataset.state'
 import type { Dataset } from 'src/types'
 import { areDatasetsEqual } from 'src/types'
 import styled from 'styled-components'
 
+// HACK: dataset entry for 'autodetect' option. This is not a real dataset.
+const DATASET_AUTODETECT: Dataset = {
+  path: 'autodetect',
+  enabled: true,
+  official: true,
+  attributes: {
+    name: { value: 'autodetect', valueFriendly: 'Autodetect' },
+    reference: { value: 'autodetect', valueFriendly: 'Autodetect' },
+  },
+  files: {
+    reference: '',
+    pathogenJson: '',
+  },
+}
+
 export interface DatasetSelectorListProps {
   datasets: Dataset[]
   searchTerm: string
   datasetHighlighted?: Dataset
-
-  onDatasetHighlighted(dataset?: Dataset): void
+  onDatasetHighlighted?(dataset?: Dataset): void
 }
 
 export function DatasetSelectorList({
@@ -30,8 +45,8 @@ export function DatasetSelectorList({
   datasetHighlighted,
   onDatasetHighlighted,
 }: DatasetSelectorListProps) {
-  const onItemClick = useCallback((dataset: Dataset) => () => onDatasetHighlighted(dataset), [onDatasetHighlighted])
-
+  const onItemClick = useCallback((dataset: Dataset) => () => onDatasetHighlighted?.(dataset), [onDatasetHighlighted])
+  const minimizerIndexVersion = useRecoilValue(minimizerIndexVersionAtom)
   const autodetectResults = useRecoilValue(autodetectResultsAtom)
   const [autodetectRunState, setAutodetectRunState] = useRecoilState(autodetectRunStateAtom)
 
@@ -89,14 +104,30 @@ export function DatasetSelectorList({
   useEffect(() => {
     const topSuggestion = autodetectResult.itemsInclude[0]
     if (autodetectRunState === AutodetectRunState.Done) {
-      onDatasetHighlighted(topSuggestion)
+      onDatasetHighlighted?.(topSuggestion)
       setAutodetectRunState(AutodetectRunState.Idle)
     }
   }, [autodetectRunState, autodetectResult.itemsInclude, onDatasetHighlighted, setAutodetectRunState])
 
+  const autodetectItem = useMemo(() => {
+    if (isNil(minimizerIndexVersion)) {
+      return null
+    }
+
+    return (
+      <DatasetSelectorListItem
+        dataset={DATASET_AUTODETECT}
+        onClick={onItemClick(DATASET_AUTODETECT)}
+        isCurrent={areDatasetsEqual(DATASET_AUTODETECT, datasetHighlighted)}
+      />
+    )
+  }, [datasetHighlighted, minimizerIndexVersion, onItemClick])
+
   const listItems = useMemo(() => {
     return (
       <>
+        {autodetectItem}
+
         {[itemsStartWith, itemsInclude].map((datasets) =>
           datasets.map((dataset) => (
             <DatasetSelectorListItem
@@ -123,7 +154,7 @@ export function DatasetSelectorList({
         )}
       </>
     )
-  }, [datasetHighlighted, itemsInclude, itemsNotInclude, itemsStartWith, onItemClick])
+  }, [autodetectItem, datasetHighlighted, itemsInclude, itemsNotInclude, itemsStartWith, onItemClick])
 
   return <Ul>{listItems}</Ul>
 }