diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx index 7107789d0..24b78f14a 100644 --- 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({
- +
+ + +
@@ -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 index ac8a43856..e1381dda3 100644 --- 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
@@ -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;