fix: ensure suggestions run and being displayed

nextstrain · Sep 29, 2023 · de83b6b · de83b6b
1 parent 200432d
commit de83b6b
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 28 deletions.
diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
 import { Col, Row } from 'reactstrap'
 import { useRecoilValue } from 'recoil'
+import styled from 'styled-components'
 import { ButtonChangeDataset } from 'src/components/Main/ButtonChangeDataset'
 import { ButtonRun } from 'src/components/Main/ButtonRun'
 import { useRunAnalysis } from 'src/hooks/useRunAnalysis'
 import { useUpdatedDataset } from 'src/io/fetchDatasets'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
 import { DatasetCurrentUpdateNotification } from 'src/components/Main/DatasetCurrentUpdateNotification'
 import { DatasetInfo } from 'src/components/Main/DatasetInfo'
-import styled from 'styled-components'
 
 export interface DatasetCurrentSummaryProps {
   toDatasetSelection(): void

diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx
@@ -20,18 +20,6 @@ export interface DatasetSelectorProps {
   onDatasetHighlighted?(dataset?: Dataset): void
 }
 
-export function DatasetSelector({ datasetHighlighted, onDatasetHighlighted }: DatasetSelectorProps) {
-  const { datasets } = useRecoilValue(datasetsAtom)
-
-  return (
-    <DatasetSelectorImpl
-      datasetsActive={datasets}
-      datasetHighlighted={datasetHighlighted}
-      onDatasetHighlighted={onDatasetHighlighted}
-    />
-  )
-}
-
 export function DatasetAutosuggestionResultsList({ datasetHighlighted, onDatasetHighlighted }: DatasetSelectorProps) {
   const { datasets } = useRecoilValue(datasetsAtom)
 
@@ -57,36 +45,33 @@ export function DatasetAutosuggestionResultsList({ datasetHighlighted, onDataset
   }, [autodetectResults, datasets])
 
   const datasetsActive = useMemo(() => {
-    if (!result) {
-      return []
-    }
     const { itemsStartWith, itemsInclude } = result
     return [...itemsStartWith, ...itemsInclude]
   }, [result])
 
   const datasetsInactive = useMemo(() => {
-    if (!result) {
-      return []
-    }
     const { itemsNotInclude } = result
     return itemsNotInclude
   }, [result])
 
+  const showSuggestions = useMemo(() => !isNil(autodetectResults) && autodetectResults.length > 0, [autodetectResults])
+
   useEffect(() => {
-    const topSuggestion = result?.itemsInclude[0]
+    const topSuggestion = result.itemsInclude[0]
+
     if (autodetectRunState === AutodetectRunState.Done) {
       onDatasetHighlighted?.(topSuggestion)
       setAutodetectRunState(AutodetectRunState.Idle)
     }
-  }, [autodetectRunState, result?.itemsInclude, onDatasetHighlighted, setAutodetectRunState])
+  }, [autodetectRunState, result.itemsInclude, onDatasetHighlighted, setAutodetectRunState])
 
   return (
     <DatasetSelectorImpl
       datasetsActive={datasetsActive}
       datasetsInactive={datasetsInactive}
       datasetHighlighted={datasetHighlighted}
       onDatasetHighlighted={onDatasetHighlighted}
-      showSuggestions
+      showSuggestions={showSuggestions}
     />
   )
 }

diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx
@@ -1,14 +1,18 @@
 import React, { useCallback, useMemo, useState } from 'react'
+import { isNil } from 'lodash'
 import { useRecoilValue } from 'recoil'
 import styled from 'styled-components'
+import { hasRequiredInputsAtom } from 'src/state/inputs.state'
+import { datasetCurrentAtom } from 'src/state/dataset.state'
+import { ErrorInternal } from 'src/helpers/ErrorInternal'
 import { DatasetCurrentSummary } from 'src/components/Main/DatasetCurrentSummary'
 import { MainSectionTitle } from 'src/components/Main/MainSectionTitle'
 import { QuerySequenceFilePicker } from 'src/components/Main/QuerySequenceFilePicker'
 import { StepDatasetSelection } from 'src/components/Main/StepDatasetSelection'
-import { ErrorInternal } from 'src/helpers/ErrorInternal'
-import { datasetCurrentAtom } from 'src/state/dataset.state'
 import { useUpdatedDatasetIndex } from 'src/io/fetchDatasets'
 import { DatasetNoneSection } from 'src/components/Main/ButtonChangeDataset'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import { useRunSeqAutodetect } from 'src/hooks/useRunSeqAutodetect'
 
 const Container = styled.div`
   display: flex;
@@ -51,10 +55,15 @@ export enum WizardPage {
 
 function MainWizard() {
   const [page, setPage] = useState(WizardPage.Landing)
+  const runAutodetect = useRunSeqAutodetect()
+  const hasRequiredInputs = useRecoilValue(hasRequiredInputsAtom)
 
   const toDatasetSelection = useCallback(() => {
     setPage(WizardPage.DatasetSelection)
-  }, [])
+    if (hasRequiredInputs) {
+      runAutodetect()
+    }
+  }, [hasRequiredInputs, runAutodetect])
   const toLanding = useCallback(() => {
     setPage(WizardPage.Landing)
   }, [])
@@ -82,6 +91,15 @@ export interface StepLandingProps {
 }
 
 function StepLanding({ toDatasetSelection }: StepLandingProps) {
+  const { t } = useTranslationSafe()
+  const dataset = useRecoilValue(datasetCurrentAtom)
+  const text = useMemo(() => {
+    if (isNil(dataset)) {
+      return t('Select dataset')
+    }
+    return t('Selected dataset')
+  }, [dataset, t])
+
   return (
     <ContainerFixed>
       <Header>
@@ -91,7 +109,14 @@ function StepLanding({ toDatasetSelection }: StepLandingProps) {
         <QuerySequenceFilePicker />
       </Main>
       <Footer>
-        <DatasetCurrentOrSelectButton toDatasetSelection={toDatasetSelection} />
+        <Container>
+          <Header>
+            <h4>{text}</h4>
+          </Header>
+          <Main>
+            <DatasetCurrentOrSelectButton toDatasetSelection={toDatasetSelection} />
+          </Main>
+        </Container>
       </Footer>
     </ContainerFixed>
   )

diff --git a/packages_rs/nextclade-web/src/components/Main/StepDatasetSelection.tsx b/packages_rs/nextclade-web/src/components/Main/StepDatasetSelection.tsx
@@ -6,7 +6,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { Row as RowBase, Col as ColBase, Button } from 'reactstrap'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
-import { DatasetSelector } from 'src/components/Main/DatasetSelector'
+import { DatasetAutosuggestionResultsList } from 'src/components/Main/DatasetSelector'
 import { DatasetCurrent } from 'src/components/Main/DatasetCurrent'
 
 export interface StepDatasetSelectionProps {
@@ -63,7 +63,7 @@ function DatasetSelection() {
           <DatasetCurrent />
         </Col>
         <Col lg={6}>
-          <DatasetSelector datasetHighlighted={dataset} onDatasetHighlighted={setDataset} />
+          <DatasetAutosuggestionResultsList datasetHighlighted={dataset} onDatasetHighlighted={setDataset} />
         </Col>
       </Row>
     </Wrapper>