+
-
+
@@ -163,7 +163,7 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe
@@ -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
new file mode 100644
index 000000000..632a3185c
--- /dev/null
+++ 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 (
+
+
+ {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.',
+ )}
+
+
+ )
+ }
+ if (numSuggestions > 0) {
+ return (
+
+
+ {t('{{ n }} datasets appear to match your data. Select the one to use.', {
+ n: numSuggestions,
+ })}
+
+
+ )
+ }
+ }
+ if (autodetectRunState === AutodetectRunState.Failed) {
+ return (
+
+ {t('Suggestion algorithm failed. Please report this to developers.')}
+
+ )
+ }
+
+ return null
+ }, [autodetectRunState, numSuggestions, t])
+
+ return
{alert}
+}
+
+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
index 933b35661..c1559f028 100644
--- 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 (
- {t('No datasets found matching your sequences.')}
+ {t('No matching datasets.')}
{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.',
)}
@@ -28,7 +28,7 @@ export function SuggestionAlertMainPage() {
if (numSuggestions > 0) {
return (
- {t('Multiple datasets found matching your sequences.')}
+ {t('Multiple matching datasets.')}
{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 {alert}
+ return {alert}
}
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
index 7041b0ac7..3057d6f21 100644
--- 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;