Merge pull request #1382 from nextstrain/feat/web-main-page--cutomiza…

…tion-indicator

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

@@ -6,11 +6,13 @@ export interface LinkProps extends PropsWithChildren<NextLinkProps & HTMLAttribu
   className?: string
 }
 
-export function Link({ className, children, href, ...restProps }: LinkProps) {
+export function Link({ className, children, href, title, ...restProps }: LinkProps) {
   return (
     <NextLink {...restProps} href={href} passHref={false}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a className={className}>{children}</a>
+      <a className={className} title={title}>
+        {children}
+      </a>
     </NextLink>
   )
 }

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

@@ -4,6 +4,7 @@ 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 { DatasetCustomizationsIndicatorLink } from 'src/components/Main/DatasetCustomizationIndicator'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled from 'styled-components'
 import { useUpdatedDataset } from 'src/io/fetchDatasets'
@@ -45,6 +46,12 @@ export function DatasetCurrentSummary() {
           </Row>
 
           <Row noGutters className="d-flex">
+            <Col className="d-flex mr-auto mt-2">
+              <DatasetCustomizationWrapper>
+                <DatasetCustomizationsIndicatorLink />
+              </DatasetCustomizationWrapper>
+            </Col>
+
             <Col className="d-flex ml-auto mt-2">
               <ButtonLoadExample className="ml-auto" />
             </Col>
@@ -76,3 +83,7 @@ const IconClear = styled(IconClearBase)`
     color: ${(props) => props.theme.gray500};
   }
 `
+
+const DatasetCustomizationWrapper = styled.div`
+  margin-left: 90px;
+`

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

@@ -1,9 +1,12 @@
 import React, { useMemo } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
 import { ButtonProps } from 'reactstrap'
 import styled from 'styled-components'
+import { MdClear as IconClearBase } from 'react-icons/md'
+import { Link } from 'src/components/Link/Link'
+import { ButtonTransparent } from 'src/components/Common/ButtonTransparent'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
-import { inputCustomizationCounterAtom } from 'src/state/inputs.state'
+import { datasetFilesResetAtom, inputCustomizationCounterAtom } from 'src/state/inputs.state'
 
 export interface ButtonCustomizeProps extends ButtonProps {
   isOpen: boolean
@@ -38,3 +41,48 @@ export const DatasetCustomizationIndicatorIcon = styled.span<{ size: number }>`
   margin-left: 0.5rem;
   padding: 0 0.25rem;
 `
+
+export function DatasetCustomizationsIndicatorLink() {
+  const { t } = useTranslationSafe()
+  const inputCustomizationCounter = useRecoilValue(inputCustomizationCounterAtom)
+
+  const text = useMemo(
+    () => t('Dataset files currently customized: {{n}}', { n: inputCustomizationCounter }),
+    [inputCustomizationCounter, t],
+  )
+
+  const resetCustomizations = useResetRecoilState(datasetFilesResetAtom)
+
+  if (inputCustomizationCounter === 0) {
+    return null
+  }
+
+  return (
+    <div className="d-flex">
+      <CustomizationLink href="/dataset#customize" title={text}>
+        <span className="text-danger">{t('Customizations')}</span>
+        <DatasetCustomizationIndicator />
+      </CustomizationLink>
+      <ButtonClear onClick={resetCustomizations} title={t('Reset customizations')}>
+        <IconClear size={15} />
+      </ButtonClear>
+    </div>
+  )
+}
+
+const CustomizationLink = styled(Link)`
+  &:hover {
+    text-decoration: ${(props) => props.theme.danger} underline solid;
+  }
+`
+
+const ButtonClear = styled(ButtonTransparent)`
+  display: flex;
+  margin-left: 0.5rem;
+`
+
+const IconClear = styled(IconClearBase)`
+  * {
+    color: ${(props) => props.theme.gray500};
+  }
+`

packages_rs/nextclade-web/src/state/inputs.state.ts

@@ -117,6 +117,15 @@ export const inputResetAtom = selector<undefined>({
   get: () => undefined,
   set({ reset }) {
     reset(qrySeqInputsStorageAtom)
+    reset(datasetFilesResetAtom)
+  },
+})
+
+/** Resets all dataset files */
+export const datasetFilesResetAtom = selector<undefined>({
+  key: 'datasetFilesResetAtom',
+  get: () => undefined,
+  set({ reset }) {
     reset(refSeqInputAtom)
     reset(geneMapInputAtom)
     reset(refTreeInputAtom)