feat(web): don't autoselect dataset on main page, only warn

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

@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil'
 import { Container as ContainerBase } from 'reactstrap'
 import { SelectDatasetHelp } from 'src/components/Help/SelectDatasetHelp'
 import { DatasetSelectorList } from 'src/components/Main/DatasetSelectorList'
+import { SuggestionAlertDatasetPage } from 'src/components/Main/SuggestionAlertDatasetPage'
 import { SuggestionPanel } from 'src/components/Main/SuggestionPanel'
 import { useDatasetSuggestionResults } from 'src/hooks/useRunSeqAutodetect'
 import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state'
@@ -22,7 +23,6 @@ export function DatasetAutosuggestionResultsList({ datasetHighlighted, onDataset
   useEffect(() => {
     if (autodetectRunState === AutodetectRunState.Done) {
       onDatasetHighlighted?.(topSuggestion)
-      setAutodetectRunState(AutodetectRunState.Idle)
     }
   }, [autodetectRunState, onDatasetHighlighted, setAutodetectRunState, topSuggestion])
 
@@ -66,7 +66,10 @@ export function DatasetSelectorImpl({
       </Header>
 
       <Header>
-        <SuggestionPanel />
+        <div className="w-100 d-flex flex-column">
+          <SuggestionPanel />
+          <SuggestionAlertDatasetPage className="mt-1" />
+        </div>
       </Header>
 
       <Main>
@@ -107,7 +110,7 @@ const Main = styled.div`
   overflow: hidden;
 `
 
-const Title = styled.h4`
+const Title = styled.div`
   display: flex;
   flex: 1;
 `

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

@@ -1,24 +1,24 @@
-import { useRouter } from 'next/router'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { isNil } from 'lodash'
+import { useRouter } from 'next/router'
 import { useRecoilState, useRecoilValue } from 'recoil'
+import { SuggestionAlertMainPage } from 'src/components/Main/SuggestionAlertMainPage'
 import styled from 'styled-components'
-import { SelectDatasetHelp } from 'src/components/Help/SelectDatasetHelp'
-import { ButtonRun } from 'src/components/Main/ButtonRun'
-import { SuggestionPanel } from 'src/components/Main/SuggestionPanel'
-import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
-import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state'
-import { shouldSuggestDatasetsOnDatasetPageAtom } from 'src/state/settings.state'
-import { hasRequiredInputsAtom } from 'src/state/inputs.state'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
+import { hasRequiredInputsAtom } from 'src/state/inputs.state'
+import { shouldSuggestDatasetsOnDatasetPageAtom } from 'src/state/settings.state'
+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'
 import { DatasetCurrentSummary } from 'src/components/Main/DatasetCurrentSummary'
 import { MainSectionTitle } from 'src/components/Main/MainSectionTitle'
 import { QuerySequenceFilePicker } from 'src/components/Main/QuerySequenceFilePicker'
-import { useUpdatedDatasetIndex } from 'src/io/fetchDatasets'
-import { ButtonChangeDataset, DatasetNoneSection } from 'src/components/Main/ButtonChangeDataset'
+import { QuerySequenceList } from 'src/components/Main/QuerySequenceList'
+import { SelectDatasetHelp } from 'src/components/Help/SelectDatasetHelp'
+import { SuggestionPanel } from 'src/components/Main/SuggestionPanel'
+import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
-import { useDatasetSuggestionResults, useRunSeqAutodetect } from 'src/hooks/useRunSeqAutodetect'
-import { QuerySequenceList } from './QuerySequenceList'
 
 const ContainerFixed = styled.div`
   display: flex;
@@ -114,22 +114,15 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
   const { t } = useTranslationSafe()
   const run = useRunAnalysis()
 
-  const [dataset, setDataset] = useRecoilState(datasetCurrentAtom)
-  const { topSuggestion } = useDatasetSuggestionResults()
-  const [autodetectRunState, setAutodetectRunState] = useRecoilState(autodetectRunStateAtom)
-  useEffect(() => {
-    if (autodetectRunState === AutodetectRunState.Done) {
-      setDataset(topSuggestion)
-      setAutodetectRunState(AutodetectRunState.Idle)
-    }
-  }, [autodetectRunState, setAutodetectRunState, setDataset, topSuggestion])
+  const [dataset, _0] = useRecoilState(datasetCurrentAtom)
 
   const text = useMemo(() => {
     if (isNil(dataset)) {
       return t('Select dataset')
     }
     return t('Selected dataset')
   }, [dataset, t])
+
   if (!dataset) {
     return (
       <Container>
@@ -145,7 +138,10 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
         </Main>
 
         <Footer>
-          <SuggestionPanel />
+          <div className="w-100 d-flex flex-column">
+            <SuggestionPanel />
+            <SuggestionAlertMainPage className="mt-1" />
+          </div>
         </Footer>
       </Container>
     )
@@ -165,7 +161,10 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
       </Main>
 
       <Footer>
-        <SuggestionPanel />
+        <div className="w-100 d-flex flex-column">
+          <SuggestionPanel />
+          <SuggestionAlertMainPage className="mt-1" />
+        </div>
       </Footer>
 
       <Footer>
@@ -176,7 +175,7 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
   )
 }
 
-const Title = styled.h4`
+const Title = styled.div`
   display: flex;
   flex: 1;
 `

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

@@ -0,0 +1,66 @@
+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 SuggestionAlertDatasetPage({ ...restProps }) {
+  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">
+            <p className="small">
+              {t(
+                'No datasets match your data. Select a dataset manually. If there is no suitable dataset, consider creating one and contributing it to Nextclade community dataset collection.',
+              )}
+            </p>
+          </Alert>
+        )
+      }
+      if (numSuggestions > 0) {
+        return (
+          <Alert closeClassName="d-none" fade={false} color="none">
+            <p className="small">
+              {t('{{ n }} datasets appear to match your data. Select the one to use.', {
+                n: numSuggestions,
+              })}
+            </p>
+          </Alert>
+        )
+      }
+    }
+    if (autodetectRunState === AutodetectRunState.Failed) {
+      return (
+        <Alert closeClassName="d-none" fade={false} color="danger">
+          <p className="small">{t('Suggestion algorithm failed. Please report this to developers.')}</p>
+        </Alert>
+      )
+    }
+
+    return null
+  }, [autodetectRunState, numSuggestions, t])
+
+  return <AlertWrapper {...restProps}>{alert}</AlertWrapper>
+}
+
+const AlertWrapper = styled.div`
+  display: flex;
+  width: 100%;
+`
+
+const Alert = styled(UncontrolledAlert)`
+  margin: 0;
+  padding: 0.75rem 1rem;
+  width: 100%;
+
+  p {
+    margin: 0;
+  }
+`

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

@@ -0,0 +1,68 @@
+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({ ...restProps }) {
+  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 matching datasets.')}</h6>
+            <p className="small">
+              {t(
+                'Suggestion algorithm was unable to find a matching dataset. 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 matching datasets.')}</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 {...restProps}>{alert}</AlertWrapper>
+}
+
+const AlertWrapper = styled.div`
+  display: flex;
+`
+
+const Alert = styled(UncontrolledAlert)`
+  margin: 0;
+  padding: 0.75rem 1rem;
+  width: 100%;
+
+  p {
+    margin: 0;
+  }
+`