feat(web): allow clearing current dataset selection

nextstrain · Dec 12, 2023 · 40a503d · 40a503d
1 parent 863d4d2
commit 40a503d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetCurrentSummary.tsx
@@ -1,7 +1,10 @@
 import React from 'react'
 import { Col, Row } from 'reactstrap'
-import { useRecoilState } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
+import { MdClear as IconClearBase } from 'react-icons/md'
+import { ButtonTransparent } from 'src/components/Common/ButtonTransparent'
 import { ButtonLoadExample } from 'src/components/Main/ButtonLoadExample'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled from 'styled-components'
 import { useUpdatedDataset } from 'src/io/fetchDatasets'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
@@ -12,7 +15,10 @@ export function DatasetCurrentSummary() {
   // Periodically checks if there's local update for the current dataset
   useUpdatedDataset()
 
-  const [dataset, _0] = useRecoilState(datasetCurrentAtom)
+  const { t } = useTranslationSafe()
+
+  const dataset = useRecoilValue(datasetCurrentAtom)
+  const resetDataset = useResetRecoilState(datasetCurrentAtom)
 
   if (!dataset) {
     return null
@@ -25,6 +31,9 @@ export function DatasetCurrentSummary() {
       <Row noGutters className="w-100">
         <Col className="d-flex">
           <DatasetInfo dataset={dataset} showSuggestions />
+          <ButtonClear onClick={resetDataset} title={t('Reset dataset')}>
+            <IconClear size={20} />
+          </ButtonClear>
         </Col>
       </Row>
       <Row noGutters>
@@ -43,3 +52,16 @@ const Container = styled.div`
   border: 1px #ccc9 solid;
   border-radius: 5px;
 `
+
+const ButtonClear = styled(ButtonTransparent)`
+  display: inline;
+  margin: 0 auto;
+  height: 20px;
+  width: 20px;
+`
+
+const IconClear = styled(IconClearBase)`
+  * {
+    color: ${(props) => props.theme.gray500};
+  }
+`
diff --git a/packages_rs/nextclade-web/src/state/autodetect.state.ts b/packages_rs/nextclade-web/src/state/autodetect.state.ts
@@ -90,6 +90,8 @@ export const autodetectResultsAtom = selector<MinimizerSearchRecord[] | undefine
     // If the operation is not 'reset', add the new items
     if (!isDefaultValue(results) && !isNil(results)) {
       results.forEach((result) => set(autodetectResultByIndexAtom(result.fastaRecord.index), result))
+    } else {
+      reset(autodetectRunStateAtom)
     }
   },
 })

diff --git a/packages_rs/nextclade-web/src/state/dataset.state.ts b/packages_rs/nextclade-web/src/state/dataset.state.ts
@@ -1,6 +1,6 @@
 import { isNil } from 'lodash'
 import { atom, DefaultValue, selector } from 'recoil'
-
+import { autodetectResultsAtom } from 'src/state/autodetect.state'
 import type { Dataset, MinimizerIndexVersion } from 'src/types'
 import { persistAtom } from 'src/state/persist/localStorage'
 import { isDefaultValue } from 'src/state/utils/isDefaultValue'
@@ -30,10 +30,10 @@ export const datasetCurrentAtom = selector<Dataset | undefined>({
     return get(datasetCurrentStorageAtom)
   },
   set({ get, set, reset }, dataset: Dataset | undefined | DefaultValue) {
-    const datasetCurrent = get(datasetCurrentStorageAtom)
     if (isDefaultValue(dataset) || isNil(dataset)) {
+      reset(autodetectResultsAtom)
       reset(datasetCurrentStorageAtom)
-    } else if (!areDatasetsEqual(datasetCurrent, dataset)) {
+    } else if (!areDatasetsEqual(get(datasetCurrentStorageAtom), dataset)) {
       set(datasetCurrentStorageAtom, dataset)
     }
   },