feat(web): add suggestion alert on main page

nextstrain · Nov 27, 2023 · 76782a4 · 76782a4
1 parent 2aafce8
commit 76782a4
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 194 deletions.
diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx
@@ -22,7 +22,6 @@ export function DatasetAutosuggestionResultsList({ datasetHighlighted, onDataset
   useEffect(() => {
     if (autodetectRunState === AutodetectRunState.Done) {
       onDatasetHighlighted?.(topSuggestion)
-      setAutodetectRunState(AutodetectRunState.Idle)
     }
   }, [autodetectRunState, onDatasetHighlighted, setAutodetectRunState, topSuggestion])
 

diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx
@@ -1,14 +1,13 @@
 import React, { useCallback, useMemo } from 'react'
 import { isNil } from 'lodash'
 import { useRouter } from 'next/router'
-import { UncontrolledAlert as UncontrolledAlertBase } from 'reactstrap'
 import { useRecoilState, useRecoilValue } from 'recoil'
+import { SuggestionAlertMainPage } from 'src/components/Main/SuggestionAlertMainPage'
 import styled from 'styled-components'
-import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
 import { hasRequiredInputsAtom } from 'src/state/inputs.state'
 import { shouldSuggestDatasetsOnDatasetPageAtom } from 'src/state/settings.state'
-import { useDatasetSuggestionResults, useRunSeqAutodetect } from 'src/hooks/useRunSeqAutodetect'
+import { useRunSeqAutodetect } from 'src/hooks/useRunSeqAutodetect'
 import { useUpdatedDatasetIndex } from 'src/io/fetchDatasets'
 import { ButtonChangeDataset, DatasetNoneSection } from 'src/components/Main/ButtonChangeDataset'
 import { ButtonRun } from 'src/components/Main/ButtonRun'
@@ -116,45 +115,14 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
   const run = useRunAnalysis()
 
   const [dataset, _0] = useRecoilState(datasetCurrentAtom)
-  const { numSuggestions } = useDatasetSuggestionResults()
-  const autodetectRunState = useRecoilValue(autodetectRunStateAtom)
-
-  const suggestionAlert = useMemo(() => {
-    if (autodetectRunState === AutodetectRunState.Done) {
-      if (numSuggestions === 0) {
-        return (
-          <UncontrolledAlert closeClassName="d-none" fade={false} color="danger" className="w-100">
-            <h6 className="font-weight-bold">{t('No datasets found matching your sequences.')}</h6>
-            <p className="small">
-              {t(
-                'Click "Change dataset" to select a dataset manually. If there is no suitable dataset, consider creating and contributing one to Nextclade community dataset collection.',
-              )}
-            </p>
-          </UncontrolledAlert>
-        )
-      }
-      if (numSuggestions > 0) {
-        return (
-          <UncontrolledAlert closeClassName="d-none" fade={false} color="warning" className="w-100">
-            <h6 className="font-weight-bold">{t('Multiple datasets found matching your sequences.')}</h6>
-            <p className="small">
-              {t('{{ n }} datasets appear to match your data. Click "Change dataset" to select the one to use.', {
-                n: numSuggestions,
-              })}
-            </p>
-          </UncontrolledAlert>
-        )
-      }
-    }
-    return null
-  }, [autodetectRunState, numSuggestions, t])
 
   const text = useMemo(() => {
     if (isNil(dataset)) {
       return t('Select dataset')
     }
     return t('Selected dataset')
   }, [dataset, t])
+
   if (!dataset) {
     return (
       <Container>
@@ -170,10 +138,11 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
         </Main>
 
         <Footer>
-          <SuggestionPanel />
+          <div>
+            <SuggestionPanel />
+            <SuggestionAlertMainPage />
+          </div>
         </Footer>
-
-        <Footer>{suggestionAlert}</Footer>
       </Container>
     )
   }
@@ -192,11 +161,12 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
       </Main>
 
       <Footer>
-        <SuggestionPanel />
+        <div className="w-100 d-flex flex-column">
+          <SuggestionPanel />
+          <SuggestionAlertMainPage />
+        </div>
       </Footer>
 
-      <Footer>{suggestionAlert}</Footer>
-
       <Footer>
         <ButtonChangeDataset className="mr-auto my-2" onClick={toDatasetSelection} />
         <ButtonRun className="ml-auto my-2" onClick={run} />
@@ -205,14 +175,6 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
   )
 }
 
-const UncontrolledAlert = styled(UncontrolledAlertBase)`
-  padding: 0.5rem;
-
-  p {
-    margin: 0;
-  }
-`
-
 const Title = styled.h4`
   display: flex;
   flex: 1;

diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx
@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react'
+import { UncontrolledAlert } from 'reactstrap'
+import { useRecoilValue } from 'recoil'
+import styled from 'styled-components'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import { useDatasetSuggestionResults } from 'src/hooks/useRunSeqAutodetect'
+import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state'
+
+export function SuggestionAlertMainPage() {
+  const { t } = useTranslationSafe()
+  const { numSuggestions } = useDatasetSuggestionResults()
+  const autodetectRunState = useRecoilValue(autodetectRunStateAtom)
+
+  const alert = useMemo(() => {
+    if (autodetectRunState === AutodetectRunState.Done) {
+      if (numSuggestions === 0) {
+        return (
+          <Alert closeClassName="d-none" fade={false} color="danger">
+            <h6 className="font-weight-bold">{t('No datasets found matching your sequences.')}</h6>
+            <p className="small">
+              {t(
+                'Click "Change dataset" to select a dataset manually. If there is no suitable dataset, consider creating and contributing one to Nextclade community dataset collection.',
+              )}
+            </p>
+          </Alert>
+        )
+      }
+      if (numSuggestions > 0) {
+        return (
+          <Alert closeClassName="d-none" fade={false} color="info">
+            <h6 className="font-weight-bold">{t('Multiple datasets found matching your sequences.')}</h6>
+            <p className="small">
+              {t('{{ n }} datasets appear to match your data. Click "Change dataset" to select the one to use.', {
+                n: numSuggestions,
+              })}
+            </p>
+          </Alert>
+        )
+      }
+    }
+    if (autodetectRunState === AutodetectRunState.Failed) {
+      return (
+        <Alert closeClassName="d-none" fade={false} color="danger">
+          <h6 className="font-weight-bold">{t('Suggestion algorithm failed.')}</h6>
+          <p className="small">{t('Please report this to developers.')}</p>
+        </Alert>
+      )
+    }
+
+    return null
+  }, [autodetectRunState, numSuggestions, t])
+
+  return <AlertWrapper>{alert}</AlertWrapper>
+}
+
+const AlertWrapper = styled.div`
+  display: flex;
+`
+
+const Alert = styled(UncontrolledAlert)`
+  margin: 0;
+  padding: 0.75rem 1rem;
+
+  p {
+    margin: 0;
+  }
+`