feat: add suggestion alert on dataset page

nextstrain · Nov 28, 2023 · ddffe6a · ddffe6a
1 parent 76782a4
commit ddffe6a
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 12 deletions.
diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/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'
@@ -65,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>
@@ -106,7 +110,7 @@ const Main = styled.div`
   overflow: hidden;
 `
 
-const Title = styled.h4`
+const Title = styled.div`
   display: flex;
   flex: 1;
 `

diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx
@@ -138,9 +138,9 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
         </Main>
 
         <Footer>
-          <div>
+          <div className="w-100 d-flex flex-column">
             <SuggestionPanel />
-            <SuggestionAlertMainPage />
+            <SuggestionAlertMainPage className="mt-1" />
           </div>
         </Footer>
       </Container>
@@ -163,7 +163,7 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
       <Footer>
         <div className="w-100 d-flex flex-column">
           <SuggestionPanel />
-          <SuggestionAlertMainPage />
+          <SuggestionAlertMainPage className="mt-1" />
         </div>
       </Footer>
 
@@ -175,7 +175,7 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
   )
 }
 
-const Title = styled.h4`
+const Title = styled.div`
   display: flex;
   flex: 1;
 `

diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionAlertDatasetPage.tsx b/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;
+  }
+`
diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionAlertMainPage.tsx
@@ -6,7 +6,7 @@ import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import { useDatasetSuggestionResults } from 'src/hooks/useRunSeqAutodetect'
 import { AutodetectRunState, autodetectRunStateAtom } from 'src/state/autodetect.state'
 
-export function SuggestionAlertMainPage() {
+export function SuggestionAlertMainPage({ ...restProps }) {
   const { t } = useTranslationSafe()
   const { numSuggestions } = useDatasetSuggestionResults()
   const autodetectRunState = useRecoilValue(autodetectRunStateAtom)
@@ -16,10 +16,10 @@ export function SuggestionAlertMainPage() {
       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>
+            <h6 className="font-weight-bold">{t('No matching datasets.')}</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.',
+                '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>
@@ -28,7 +28,7 @@ export function SuggestionAlertMainPage() {
       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>
+            <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,
@@ -50,7 +50,7 @@ export function SuggestionAlertMainPage() {
     return null
   }, [autodetectRunState, numSuggestions, t])
 
-  return <AlertWrapper>{alert}</AlertWrapper>
+  return <AlertWrapper {...restProps}>{alert}</AlertWrapper>
 }
 
 const AlertWrapper = styled.div`
@@ -60,6 +60,7 @@ const AlertWrapper = styled.div`
 const Alert = styled(UncontrolledAlert)`
   margin: 0;
   padding: 0.75rem 1rem;
+  width: 100%;
 
   p {
     margin: 0;

diff --git a/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx b/packages_rs/nextclade-web/src/components/Main/SuggestionPanel.tsx
@@ -94,7 +94,6 @@ const Container = styled.div`
 const Form = styled(FormBase)`
   display: flex;
   width: 100%;
-  height: 100%;
   min-height: 45px;
   padding: 10px;
   border: 1px #ccc9 solid;