Merge pull request #1325 from nextstrain/feat/web-ui-5-tweaks

packages_rs/nextclade-web/src/components/FilePicker/FilePicker.tsx

@@ -57,7 +57,7 @@ const TabsContentStyled = styled(TabsContent)`
 export interface FilePickerProps extends StrictOmit<HTMLProps<HTMLDivElement>, '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<HTMLProps<HTMLDivElement>, '
 export function FilePicker({
   multiple = false,
   compact,
-  title,
+  title = '',
   icon,
   exampleUrl,
   pasteInstructions,

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,

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

@@ -58,7 +58,7 @@ export function DatasetSelectorImpl({
     <Container>
       <Header>
         <Title>
-          <H4Inline>{t('Select dataset')}</H4Inline>
+          <H4Inline>{t('Select reference dataset')}</H4Inline>
           <SelectDatasetHelp />
         </Title>
 

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() {
         <MainSectionTitle />
       </Header>
 
-      <Main className="mt-4">
-        <ContainerColumns>
-          <QuerySequenceFilePicker />
-          <DatasetCurrentOrSelectButton toDatasetSelection={toDatasetSelection} />
+      <Main className="mt-4 mb-2">
+        <ContainerColumns className="w-100">
+          <Row className="w-100">
+            <Col className="d-flex flex-column h-100">
+              <QuerySequenceFilePicker />
+              <QuerySequenceList />
+            </Col>
+
+            <Col>
+              <DatasetCurrentOrSelectButton toDatasetSelection={toDatasetSelection} />
+            </Col>
+          </Row>
         </ContainerColumns>
       </Main>
-
-      <FooterWithoutOverflow>
-        <Container>
-          <Main>
-            <QuerySequenceList />
-          </Main>
-        </Container>
-      </FooterWithoutOverflow>
     </ContainerFixed>
   )
 }
@@ -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])

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 (
     <Container>
+      <FilePickerTitle title={title}>{title}</FilePickerTitle>
       <FilePicker
-        title={headerText}
         icon={icon}
         exampleUrl="https://example.com/sequences.fasta"
         pasteInstructions={t('Enter sequence data in FASTA format')}
@@ -65,10 +65,6 @@ export function QuerySequenceFilePicker() {
 
 const Container = styled.div`
   display: flex;
-  flex: 1;
   flex-direction: column;
-  height: 100%;
   overflow: hidden;
-  margin-left: 10px;
-  margin-right: 12px;
 `

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

@@ -25,7 +25,7 @@ export function QuerySequenceList({ toMainPage }: { toMainPage?: () => void }) {
       return null
     }
     return (
-      <div className="d-flex">
+      <div className="d-flex mt-3">
         <h4>{t("Sequence data you've added")}</h4>
 
         <div className="d-flex ml-auto">