feat(web): add help tips for gene and ref node dropdowns

Follow up for #1492
nextstrain · Jun 30, 2024 · 97366e9 · 97366e9
1 parent ef5ca4a
commit 97366e9
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 6 deletions.
diff --git a/packages/nextclade-web/src/components/Common/InfoButton.tsx b/packages/nextclade-web/src/components/Common/InfoButton.tsx
@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react'
-import { Button as ButtonBase, CardBody } from 'reactstrap'
+import { Button as ButtonBase, ButtonProps, CardBody } from 'reactstrap'
 import styled, { useTheme } from 'styled-components'
 import { FaInfo as InfoIcon } from 'react-icons/fa6'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
@@ -14,11 +14,11 @@ import {
   autoPlacement,
 } from '@floating-ui/react'
 
-export interface InfoButtonProps {
+export interface InfoButtonProps extends Omit<ButtonProps, 'size'> {
   size?: number
 }
 
-export function InfoButton({ size = 18, children }: PropsWithChildren<InfoButtonProps>) {
+export function InfoButton({ size = 18, children, ...restProps }: PropsWithChildren<InfoButtonProps>) {
   const { t } = useTranslationSafe()
   const theme = useTheme()
 
@@ -41,6 +41,7 @@ export function InfoButton({ size = 18, children }: PropsWithChildren<InfoButton
         title={t('Click to get help information')}
         $size={size}
         {...getReferenceProps({ onClick: toggle })}
+        {...restProps}
       >
         <Icon color={theme.primary} size={size * 0.66} />
       </Button>
@@ -73,7 +74,7 @@ const Card = styled.div`
 `
 
 const Button = styled.button<{ $size?: number }>`
-  display: flex;
+  display: inline-flex;
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
   border-radius: ${(props) => props.$size}px;

diff --git a/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx b/packages/nextclade-web/src/components/Help/SelectGeneHelp.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import { InfoButton } from 'src/components/Common/InfoButton'
+import { LinkExternal } from 'src/components/Link/LinkExternal'
+
+export function SelectGeneHelp() {
+  const { t } = useTranslationSafe()
+
+  return (
+    <InfoButton color="link">
+      <p>{t('Select genetic feature.')}</p>
+
+      <p>{t('This allows to...')}</p>
+
+      <p>
+        {t(
+          'You can select one of the datasets manually or to use automatic dataset suggestion function. Automatic suggestion will attempt to guess the most appropriate dataset from your sequence data.',
+        )}
+      </p>
+
+      <p>
+        {t('Learn more in Nextclade {{documentation}}')}
+        <LinkExternal href="https://docs.nextstrain.org/projects/nextclade/en/stable">
+          {t('documentation')}
+        </LinkExternal>
+        {t('.')}
+      </p>
+    </InfoButton>
+  )
+}
diff --git a/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx b/packages/nextclade-web/src/components/Help/SelectRefNodeHelp.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
+import { InfoButton } from 'src/components/Common/InfoButton'
+import { LinkExternal } from 'src/components/Link/LinkExternal'
+
+export function SelectRefNodeHelp() {
+  const { t } = useTranslationSafe()
+
+  return (
+    <InfoButton color="link">
+      <p>{t('Select reference node target for relative mutations.')}</p>
+
+      <p>{t('This allows ...')}</p>
+
+      <p>
+        {t('Learn more in Nextclade {{documentation}}')}
+        <LinkExternal href="https://docs.nextstrain.org/projects/nextclade/en/stable">
+          {t('documentation')}
+        </LinkExternal>
+        {t('.')}
+      </p>
+    </InfoButton>
+  )
+}
diff --git a/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx b/packages/nextclade-web/src/components/SequenceView/SequenceViewColumnHeader.tsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import { SelectGeneHelp } from 'src/components/Help/SelectGeneHelp'
+import { SelectRefNodeHelp } from 'src/components/Help/SelectRefNodeHelp'
 import HelpTipsColumnSeqView from 'src/components/Results/HelpTips/HelpTipsColumnSeqView.mdx'
 import { RefNodeSelector } from 'src/components/Results/RefNodeSelector'
 import { ButtonHelpStyled } from 'src/components/Results/ResultsTableStyle'
@@ -19,11 +21,21 @@ export function SequenceViewColumnHeader() {
       <FlexLarge>
         <FlexOuter>
           <DropdownWrapper className="ml-auto">
-            <span className="pb-1 px-1">{t('Genetic feature')}</span>
+            <span className="pb-1 px-1 d-flex">
+              <span className="my-auto">{t('Genetic feature')}</span>
+              <span className="my-auto">
+                <SelectGeneHelp />
+              </span>
+            </span>
             <SequenceSelector />
           </DropdownWrapper>
           <DropdownWrapper className="mr-auto">
-            <span className="pb-1 px-1">{t('Relative to')}</span>
+            <span className="pb-1 px-1 d-flex">
+              <span className="my-auto">{t('Relative to')}</span>
+              <span className="my-auto">
+                <SelectRefNodeHelp />
+              </span>
+            </span>
             <RefNodeSelector />
           </DropdownWrapper>
         </FlexOuter>