diff --git a/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx b/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx index bec77acbd..66b2f4491 100644 --- a/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx +++ b/packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx @@ -57,7 +57,7 @@ const TabsContentStyled = styled(TabsContent)` export interface FilePickerProps extends StrictOmit, 'onInput' | 'onError' | 'as' | 'ref'> { multiple?: boolean compact?: boolean - title: string + title?: string icon: ReactNode exampleUrl: string pasteInstructions: string @@ -74,7 +74,7 @@ export interface FilePickerProps extends StrictOmit, ' export function FilePicker({ multiple = false, compact, - title, + title = '', icon, exampleUrl, pasteInstructions, diff --git a/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx b/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx index c8b599db2..fb2c6c4a1 100644 --- a/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx +++ b/packages_rs/nextclade-web/src/components/Main/ButtonChangeDataset.tsx @@ -41,7 +41,7 @@ export function ButtonChangeDataset({ onClick, ...restProps }: ChangeDatasetButt const { color, text, tooltip } = useMemo(() => { const hasDataset = !isNil(dataset) - const text = hasDataset ? t('Change dataset') : t('Select dataset') + const text = hasDataset ? t('Change reference dataset') : t('Select reference dataset') return { color: hasDataset ? 'secondary' : 'primary', text, diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx index 24b78f14a..d443a91e4 100644 --- a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx +++ b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx @@ -58,7 +58,7 @@ export function DatasetSelectorImpl({
- <H4Inline>{t('Select dataset')}</H4Inline> + <H4Inline>{t('Select reference dataset')}</H4Inline> <SelectDatasetHelp /> diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx index e1381dda3..e7416daaf 100644 --- a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx +++ b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx @@ -1,9 +1,10 @@ import React, { useCallback, useMemo } from 'react' import { isNil } from 'lodash' import { useRouter } from 'next/router' +import { Col, Row } from 'reactstrap' import { useRecoilState, useRecoilValue } from 'recoil' -import { SuggestionAlertMainPage } from 'src/components/Main/SuggestionAlertMainPage' import styled from 'styled-components' +import { SuggestionAlertMainPage } from 'src/components/Main/SuggestionAlertMainPage' import { datasetCurrentAtom } from 'src/state/dataset.state' import { hasRequiredInputsAtom } from 'src/state/inputs.state' import { shouldSuggestDatasetsOnDatasetPageAtom } from 'src/state/settings.state' @@ -62,10 +63,6 @@ const Footer = styled.div` flex: 1; ` -const FooterWithoutOverflow = styled(Footer)` - overflow: hidden; -` - export function Landing() { // This periodically fetches dataset index and updates the list of datasets. useUpdatedDatasetIndex() @@ -88,20 +85,20 @@ export function Landing() {
-
- - - +
+ + + + + + + + + + +
- - - -
- -
-
-
) } @@ -118,7 +115,7 @@ function DatasetCurrentOrSelectButton({ toDatasetSelection }: DatasetCurrentOrSe const text = useMemo(() => { if (isNil(dataset)) { - return t('Select dataset') + return t('Select reference dataset') } return t('Selected dataset') }, [dataset, t]) diff --git a/packages_rs/nextclade-web/src/components/Main/QuerySequenceFilePicker.tsx b/packages_rs/nextclade-web/src/components/Main/QuerySequenceFilePicker.tsx index a3e8389df..553347090 100644 --- a/packages_rs/nextclade-web/src/components/Main/QuerySequenceFilePicker.tsx +++ b/packages_rs/nextclade-web/src/components/Main/QuerySequenceFilePicker.tsx @@ -8,7 +8,7 @@ import { useRecoilToggle } from 'src/hooks/useToggle' import { qrySeqErrorAtom } from 'src/state/error.state' import { shouldRunAutomaticallyAtom, shouldSuggestDatasetsOnDatasetPageAtom } from 'src/state/settings.state' import { useTranslationSafe } from 'src/helpers/useTranslationSafe' -import { FilePicker } from 'src/components/FilePicker/FilePicker' +import { FilePicker, FilePickerTitle } from 'src/components/FilePicker/FilePicker' import { FileIconFasta } from 'src/components/Common/FileIcons' import { useQuerySeqInputs } from 'src/state/inputs.state' @@ -39,7 +39,7 @@ export function QuerySequenceFilePicker() { [addQryInputs, runAnalysis, runAutodetect, shouldRunAutomatically, shouldSuggestDatasetsOnDatasetPage], ) - const headerText = useMemo(() => { + const title = useMemo(() => { if (qryInputs.length > 0) { return t('Add more sequence data') } @@ -48,8 +48,8 @@ export function QuerySequenceFilePicker() { return ( + {title} void }) { return null } return ( -
+

{t("Sequence data you've added")}