feat: customize instruction and placeholder text on url and paste comps.

nextstrain · Dec 1, 2020 · 2adbd92 · 2adbd92
1 parent d3024c5
commit 2adbd92
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 21 deletions.
diff --git a/packages/web/src/components/Main/FilePicker.tsx b/packages/web/src/components/Main/FilePicker.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, Ref, useState } from 'react'
+import React, { ReactNode, Ref, useMemo, useState } from 'react'
 
 import styled from 'styled-components'
 import {
@@ -185,6 +185,8 @@ export const NonCollapsibleIcon = styled(FaAsterisk)`
 export interface FilePickerProps {
   icon: ReactNode
   text: ReactNode
+  exampleUrl: string
+  pasteInstructions: string
   input?: AlgorithmInput
   errors: Error[]
   inputRef?: Ref<HTMLInputElement | null>
@@ -201,6 +203,8 @@ export interface FilePickerProps {
 export function FilePicker({
   icon,
   text,
+  exampleUrl,
+  pasteInstructions,
   input,
   errors,
   onInput,
@@ -242,6 +246,13 @@ export function FilePicker({
     onRemove([])
   }
 
+  const collapseToggleIconTooltip = useMemo(
+    () => (shouldCollapse ? t('Expand this section') : t('Collapse this section')),
+    [shouldCollapse, t],
+  )
+
+  const badge = useMemo(() => (canCollapse ? <BadgeDefault /> : <BadgeRequired />), [canCollapse])
+
   if (input) {
     return (
       <Row noGutters>
@@ -262,7 +273,7 @@ export function FilePicker({
                 <h1>
                   {canCollapse ? (
                     <CollapseToggleIcon
-                      title={shouldCollapse ? t('Expand this section') : t('Collapse this section')}
+                      title={collapseToggleIconTooltip}
                       $canCollapse={canCollapse}
                       $shouldRotate={!shouldCollapse}
                       color="#ccc"
@@ -275,7 +286,7 @@ export function FilePicker({
                   {text}
                 </h1>
               </FlexLeft>
-              <FlexRight>{canCollapse ? <BadgeDefault /> : <BadgeRequired />}</FlexRight>
+              <FlexRight>{badge}</FlexRight>
             </TextContainer>
 
             <Tab onClick={open} title={t('Provide file from your computer')}>
@@ -310,11 +321,11 @@ export function FilePicker({
             </TabPanel>
 
             <TabPanel>
-              <TabPanelUrl onConfirm={onUrl} />
+              <TabPanelUrl onConfirm={onUrl} exampleUrl={exampleUrl} />
             </TabPanel>
 
             <TabPanel>
-              <TabPanelPaste onConfirm={onPaste} inputRef={inputRef} />
+              <TabPanelPaste onConfirm={onPaste} pasteInstructions={pasteInstructions} inputRef={inputRef} />
             </TabPanel>
           </Collapse>
         </Tabs>

diff --git a/packages/web/src/components/Main/FilePickerAdvanced.tsx b/packages/web/src/components/Main/FilePickerAdvanced.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { Col, Row } from 'reactstrap'
 import { FilePicker } from 'src/components/Main/FilePicker'
-import { FileIconFasta, FileIconJson, FileIconTxt } from 'src/components/Main/UploaderFileIcons'
+import { FileIconFasta, FileIconJson, FileIconCsv } from 'src/components/Main/UploaderFileIcons'
 import {
   algorithmRunAsync,
   removeFasta,
@@ -118,6 +118,8 @@ export function FilePickerAdvancedDisconnected({
         <FilePicker
           icon={<FileIconFasta />}
           text={t('Sequences')}
+          exampleUrl="https://example.com/sequences.fasta"
+          pasteInstructions={t('Enter sequence data in FASTA or plain text format')}
           canCollapse={false}
           defaultCollapsed={false}
           input={params.raw.seqData}
@@ -129,15 +131,19 @@ export function FilePickerAdvancedDisconnected({
         <FilePicker
           icon={<FileIconJson />}
           text={t('Reference tree')}
+          exampleUrl="https://example.com/tree.json"
+          pasteInstructions={t('Enter tree data in Auspice JSON v2 format')}
           input={params.raw.auspiceData}
           errors={params.errors.auspiceData}
           onRemove={removeTree}
           onInput={setTree}
         />
 
         <FilePicker
-          icon={<FileIconTxt />}
+          icon={<FileIconFasta />}
           text={t('Root sequence')}
+          exampleUrl="https://example.com/root_seq.fasta"
+          pasteInstructions={t('Enter tree data in FASTA or plain text format')}
           input={params.raw.rootSeq}
           errors={params.errors.rootSeq}
           onRemove={removeRootSeq}
@@ -147,6 +153,8 @@ export function FilePickerAdvancedDisconnected({
         <FilePicker
           icon={<FileIconJson />}
           text={t('Quality control')}
+          exampleUrl="https://example.com/qc.json"
+          pasteInstructions={t('Enter QC config in JSON format')}
           input={params.raw.qcRulesConfig}
           errors={params.errors.qcRulesConfig}
           onRemove={removeQcSettings}
@@ -156,15 +164,19 @@ export function FilePickerAdvancedDisconnected({
         <FilePicker
           icon={<FileIconJson />}
           text={t('Gene map')}
+          exampleUrl="https://example.com/gene_map.json"
+          pasteInstructions={t('Enter gene map data in JSON format')}
           input={params.raw.geneMap}
           errors={params.errors.geneMap}
           onRemove={removeGeneMap}
           onInput={setGeneMap}
         />
 
         <FilePicker
-          icon={<FileIconJson />}
+          icon={<FileIconCsv />}
           text={t('PCR primers')}
+          exampleUrl="https://example.com/pcr_primers.csv"
+          pasteInstructions={t('Enter PCR primers data in CSV format')}
           input={params.raw.pcrPrimers}
           errors={params.errors.pcrPrimers}
           onRemove={removePcrPrimers}

diff --git a/packages/web/src/components/Main/MainSectionHeroControlsSimple.tsx b/packages/web/src/components/Main/MainSectionHeroControlsSimple.tsx
@@ -99,6 +99,8 @@ export function MainSectionHeroControlsDisconnected({
             defaultCollapsed={false}
             icon={<FileIconFasta />}
             text={t('Sequences')}
+            exampleUrl="https://example.com/sequences.fasta"
+            pasteInstructions={t('Enter sequence data in FASTA or plain text format')}
             input={params.raw.seqData}
             onInput={onUpload}
             errors={params.errors.seqData}

diff --git a/packages/web/src/components/Main/TabPanelPaste.tsx b/packages/web/src/components/Main/TabPanelPaste.tsx
@@ -17,12 +17,14 @@ import {
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 
 export interface TabPanelPasteProps {
+  pasteInstructions: string
+
   inputRef?: Ref<HTMLInputElement | null>
 
   onConfirm(seqData: string): void
 }
 
-export function TabPanelPaste({ onConfirm, inputRef }: TabPanelPasteProps) {
+export function TabPanelPaste({ onConfirm, pasteInstructions, inputRef }: TabPanelPasteProps) {
   const { t } = useTranslationSafe()
   const [seqData, setSeqData] = useState<string>('')
   const hasSeqData = seqData.length > 0
@@ -37,7 +39,7 @@ export function TabPanelPaste({ onConfirm, inputRef }: TabPanelPasteProps) {
           <Row noGutter>
             <Col className="d-flex">
               <Label className="mr-auto" htmlFor="sequence-input">
-                {t('Enter sequence data in FASTA format')}
+                {pasteInstructions}
               </Label>
             </Col>
           </Row>
@@ -79,9 +81,7 @@ export function TabPanelPaste({ onConfirm, inputRef }: TabPanelPasteProps) {
                   disabled={!hasSeqData}
                   type="button"
                   color="primary"
-                  title={
-                    hasSeqData ? 'Accept sequence data' : 'Please provide sequence data before the analysis is possible'
-                  }
+                  title={hasSeqData ? t('Accept the data') : t('Please provide the data first')}
                   onClick={confirm}
                 >
                   {t('OK')}

diff --git a/packages/web/src/components/Main/TabPanelUrl.tsx b/packages/web/src/components/Main/TabPanelUrl.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import { Col } from 'reactstrap'
 // eslint-disable-next-line import/no-cycle
@@ -18,16 +18,19 @@ import {
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 
 export interface TabPanelUrlProps {
+  exampleUrl: string
+
   onConfirm(url: string): void
 }
 
-export function TabPanelUrl({ onConfirm }: TabPanelUrlProps) {
+export function TabPanelUrl({ exampleUrl, onConfirm }: TabPanelUrlProps) {
   const { t } = useTranslationSafe()
   const [url, setUrl] = useState<string>('')
   const hasUrl = url.length > 0
   const change = (e: React.ChangeEvent<HTMLInputElement>) => setUrl(e.target.value)
   const clear = () => setUrl('')
   const confirm = () => onConfirm(url)
+  const placeholder = useMemo(() => t('For example: {{exampleUrl}}', { exampleUrl }), [t, exampleUrl])
 
   return (
     <Form>
@@ -48,7 +51,7 @@ export function TabPanelUrl({ onConfirm }: TabPanelUrlProps) {
                 id="tree-url-text-input"
                 className="flex-grow-1"
                 type="textarea"
-                placeholder={t('For example: {{exampleUrl}}', { exampleUrl: 'https://example.com/data.fasta' })}
+                placeholder={placeholder}
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"

diff --git a/packages/web/src/components/Main/UploaderFileIcons.tsx b/packages/web/src/components/Main/UploaderFileIcons.tsx
@@ -15,7 +15,7 @@ export const DEFAULT_ICON_SIZE = 50 as const
 
 export const DEFAULT_ICON_COLORS = {
   fasta: '#66b51d',
-  txt: '#777777',
+  csv: '#777777',
   json: '#bb7e38',
 } as const
 
@@ -98,11 +98,11 @@ export const FileIconJson = ({ size }: FileIconProps) => (
   />
 )
 
-export const FileIconTxt = ({ size }: FileIconProps) => (
+export const FileIconCsv = ({ size }: FileIconProps) => (
   <FileIconBase
     size={size}
-    extension={'txt'}
-    labelColor={DEFAULT_ICON_COLORS.txt}
-    glyphColor={DEFAULT_ICON_COLORS.txt}
+    extension={'csv'}
+    labelColor={DEFAULT_ICON_COLORS.csv}
+    glyphColor={DEFAULT_ICON_COLORS.csv}
   />
 )