Merge pull request #1502 from nextstrain/feat/i18n

.gitignore

@@ -22,7 +22,6 @@
 \.env
 \.idea
 \.ignore
-\.json-autotranslate-cache
 \.out
 \.reports
 \.Spotlight-V100

docs/dev/developer-guide.md

@@ -256,6 +256,57 @@ Install Node.js version 14+ (latest LTS release is recommended), by either downl
 
    The `yarn prod:serve` command runs Express underneath and it is just an example of a simple (also slow and insecure) local file web server. But the produced HTML, CSS and JS files can be served using any static file web server or static file hosting service. The official deployment uses AWS S3 + Cloudfront.
 
+### Internationalization (translation)
+
+Nextclade Web is using `react-i18n` for internationalization. It is configured in [`packages/nextclade-web/src/i18n`](https://github.com/nextstrain/nextclade/tree/master/packages/nextclade-web/src/i18n). Note that parts of Auspice used in Nextclade are configured separately, but in the same directory.
+
+The actual translations are in [`packages/nextclade-web/src/i18n/resources/`](https://github.com/nextstrain/nextclade/tree/master/packages/nextclade-web/src/i18n/resources).
+
+For machine translation we use [`json-autotranslate`](https://www.npmjs.com/package/json-autotranslate), configured
+in [`packages/nextclade-web/json-autotranslate.json`](https://github.com/nextstrain/nextclade/blob/master/packages/nextclade-web/json-autotranslate.json). It stores cache of strings in [`packages/nextclade-web/.json-autotranslate-cache/`](https://github.com/nextstrain/nextclade/blob/master/packages/nextclade-web/.json-autotranslate-cache).
+
+#### Update machine translations
+
+Use this script to extract strings apply machine translations:
+
+```bash
+# Extract English strings from the code of Nextclade Web.
+# The result will be in `packages/nextclade-web/src/i18n/resources/en/`.
+yarn i18n
+
+# Deduplicate, correct, sort and otherwise 'massage' the extracted strings.
+yarn i18n:fix
+
+# Translate strings from English to all languages using json-autotranslate.
+# Cached strings will be copied as is from cache. If a string is not present in cache,
+# it will be machine translated using AWS Translate.
+# This step requires AWS credentials (see json-autotranslate docs and ask your AWS admin).
+i18n:translate
+
+# 'Massage' the newly translated strings again.
+yarn i18n:fix
+```
+
+#### Apply manual corrections
+
+If you want to override machine translation, then edit the cached strings in [`packages/nextclade-web/.json-autotranslate-cache/`](https://github.com/nextstrain/nextclade/blob/master/packages/nextclade-web/.json-autotranslate-cache) and submit your changes in a pull request. Developers will check your changes and integrate them into the web app, by running:
+
+```bash
+# Deduplicate, correct, sort and otherwise 'massage' the extracted strings.
+yarn i18n:fix
+
+# Translate strings from English to all languages using json-autotranslate.
+# Cached strings will be copied as is from cache. If a string is not present in cache,
+# it will be machine translated using AWS Translate.
+# This step requires AWS credentials (see json-autotranslate docs and ask your AWS admin).
+i18n:translate
+
+# 'Massage' the newly translated strings again.
+yarn i18n:fix
+```
+
+Note that dev team does not necessarily understand all supported languages, so it cannot verify quality of either machine or human translations for most languages, except a few.
+
 ### Linting (static analysis)
 
 #### Linting Rust code

packages/nextclade-web/src/components/Layout/LanguageSwitcher.tsx

@@ -5,9 +5,11 @@ import {
   DropdownMenu as DropdownMenuBase,
   DropdownItem as DropdownItemBase,
   DropdownProps,
+  UncontrolledAlert,
 } from 'reactstrap'
 import { useRecoilState } from 'recoil'
 import { SearchBox } from 'src/components/Common/SearchBox'
+import { LinkExternal } from 'src/components/Link/LinkExternal'
 import { search } from 'src/helpers/search'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled from 'styled-components'
@@ -45,6 +47,19 @@ export function LanguageSwitcher({ ...restProps }: LanguageSwitcherProps) {
         <SearchBoxWrapper>
           <SearchBox searchTitle={t('Search languages')} searchTerm={searchTerm} onSearchTermChange={setSearchTerm} />
         </SearchBoxWrapper>
+        <UncontrolledAlert
+          closeClassName="d-none"
+          fade={false}
+          color="warning"
+          className="m-0 mb-2 mr-3 py-1 px-2 small"
+        >
+          {t(
+            'All text except English is generated using machine translation. Accuracy is not guaranteed. Please submit your fixes {{ here }}',
+          )}
+          <LinkExternal href="https://github.com/nextstrain/nextclade/blob/master/docs/dev/developer-guide.md#internationalization-translation">
+            {t('here')}
+          </LinkExternal>
+        </UncontrolledAlert>
         <DropdownMenuListWrapper>
           {localesFiltered.map((locale) => {
             const isCurrent = locale.key === currentLocale
@@ -115,7 +130,7 @@ const DropdownMenu = styled(DropdownMenuBase)`
   transition: opacity ease-out 0.25s;
   padding: 1rem;
   padding-right: 0;
-  width: 275px;
+  width: 320px;
 `
 
 const DropdownItem = styled(DropdownItemBase)`

packages/nextclade-web/src/components/Main/DatasetContentSection.tsx

@@ -1,5 +1,6 @@
 import classnames from 'classnames'
 import React, { PropsWithChildren, useCallback, useState } from 'react'
+import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled from 'styled-components'
 import {
   Nav as NavBase,
@@ -16,24 +17,25 @@ import { DatasetContentTabAdvanced } from 'src/components/Main/DatasetContentTab
 import { DatasetCustomizationIndicator } from 'src/components/Main/DatasetCustomizationIndicator'
 
 export function DatasetContentSection() {
+  const { t } = useTranslationSafe()
   const [activeTabId, setActiveTabId] = useState(0)
   const currentDataset = useRecoilValue(datasetCurrentAtom)
   return (
     <ContentSection>
       <Nav tabs>
         {currentDataset?.files?.readme && (
           <TabLabel tabId={0} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
-            {'Summary'}
+            {t('Summary')}
           </TabLabel>
         )}
         {currentDataset?.files?.changelog && (
           <TabLabel tabId={1} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
-            {'History'}
+            {t('History')}
           </TabLabel>
         )}
         {currentDataset && (
           <TabLabel tabId={2} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
-            {'Customize'}
+            {t('Customize')}
             <DatasetCustomizationIndicator />
           </TabLabel>
         )}

packages/nextclade-web/src/components/Results/RefNodeSelector.tsx

@@ -19,24 +19,6 @@ interface Option {
   description?: string
 }
 
-const builtinRefs: Option[] = [
-  {
-    value: REF_NODE_ROOT,
-    label: 'Reference',
-    description: 'Reference sequence',
-  },
-  {
-    value: REF_NODE_PARENT,
-    label: 'Parent',
-    description: 'Nearest node on reference tree',
-  },
-  {
-    value: REF_NODE_CLADE_FOUNDER,
-    label: 'Clade founder',
-    description: 'Earliest ancestor node with the same clade on reference tree',
-  },
-]
-
 export function RefNodeSelector() {
   const { t } = useTranslationSafe()
 
@@ -64,6 +46,24 @@ export function RefNodeSelector() {
         }
       })
 
+    const builtinRefs: Option[] = [
+      {
+        value: REF_NODE_ROOT,
+        label: t('Reference'),
+        description: t('Reference sequence'),
+      },
+      {
+        value: REF_NODE_PARENT,
+        label: t('Parent'),
+        description: t('Nearest node on reference tree'),
+      },
+      {
+        value: REF_NODE_CLADE_FOUNDER,
+        label: t('Clade founder'),
+        description: t('Earliest ancestor node with the same clade on reference tree'),
+      },
+    ]
+
     const options = [...builtinRefs, ...cladeNodeAttrFounders, ...refs]
     const currentOption = options.find((o) => o.value === currentRefNodeName)
 

packages/nextclade-web/src/components/Results/ResultsStatus.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useMemo, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { FaCheckSquare as CheckIcon } from 'react-icons/fa'
 import { IoWarning as WarnIcon } from 'react-icons/io5'
-import i18n from 'src/i18n/i18n'
+import { TFunc, useTranslationSafe } from 'src/helpers/useTranslationSafe'
 import styled, { useTheme } from 'styled-components'
 import { LoadingSpinner } from 'src/components/Loading/Loading'
 import { Tooltip } from 'src/components/Results/Tooltip'
@@ -48,6 +48,7 @@ const ResultsStatusSpinnerWrapper = styled.span`
 `
 
 export function ResultsStatus({ ...restProps }) {
+  const { t } = useTranslationSafe()
   const theme = useTheme()
 
   const numThreads = useRecoilValue(numThreadsAtom)
@@ -59,7 +60,7 @@ export function ResultsStatus({ ...restProps }) {
   const onMouseLeave = useCallback(() => setShowTooltip(false), [])
 
   const { text, spinner } = useMemo(() => {
-    const { statusText, failureText, hasFailures } = selectStatus(statusGlobal, analysisResultStatuses, numThreads)
+    const { statusText, failureText, hasFailures } = selectStatus(statusGlobal, analysisResultStatuses, numThreads, t)
 
     let text = <span>{statusText}</span>
     if (failureText) {
@@ -81,7 +82,7 @@ export function ResultsStatus({ ...restProps }) {
       )
     }
     return { text, spinner }
-  }, [analysisResultStatuses, numThreads, statusGlobal, theme.success, theme.warning])
+  }, [analysisResultStatuses, numThreads, statusGlobal, t, theme.success, theme.warning])
 
   if (statusGlobal === AlgorithmGlobalStatus.idle) {
     return null
@@ -104,6 +105,7 @@ export function selectStatus(
   statusGlobal: AlgorithmGlobalStatus,
   analysisResultStatuses: AlgorithmSequenceStatus[],
   numThreads: number,
+  t: TFunc,
 ) {
   const hasFailures = analysisResultStatuses.includes(AlgorithmSequenceStatus.failed)
 
@@ -114,29 +116,29 @@ export function selectStatus(
   const treeBuildDonePercent = 90
   const allDonePercent = 100
 
-  let statusText = i18n.t('Idle')
+  let statusText = t('Idle')
   let failureText: string | undefined
   let percent = 0
 
   /* eslint-disable no-lone-blocks */
   switch (statusGlobal) {
     case AlgorithmGlobalStatus.idle:
       {
-        statusText = i18n.t('Idle')
+        statusText = t('Idle')
         percent = idlingPercent
       }
       break
 
     case AlgorithmGlobalStatus.loadingData:
       {
-        statusText = i18n.t('Loading data...')
+        statusText = t('Loading data...')
         percent = loadingDataPercent
       }
       break
 
     case AlgorithmGlobalStatus.initWorkers:
       {
-        statusText = i18n.t('Starting {{numWorkers}} threads...', { numWorkers: numThreads })
+        statusText = t('Starting {{numWorkers}} threads...', { numWorkers: numThreads })
         percent = loadingDataDonePercent
       }
       break
@@ -148,17 +150,17 @@ export function selectStatus(
         const failed = analysisResultStatuses.filter((status) => status === AlgorithmSequenceStatus.failed).length
         const done = succeeded + failed
         percent = loadingDataDonePercent + (done / total) * (treeBuildPercent - loadingDataDonePercent)
-        statusText = i18n.t('Analysing sequences: Found: {{total}}. Analyzed: {{done}}', { done, total })
+        statusText = t('Analysing sequences: Found: {{total}}. Analyzed: {{done}}', { done, total })
         if (failed > 0) {
-          failureText = i18n.t('Failed: {{failed}}', { failed, total })
+          failureText = t('Failed: {{failed}}', { failed, total })
         }
       }
       break
 
     case AlgorithmGlobalStatus.buildingTree:
       {
         percent = treeBuildDonePercent
-        statusText = i18n.t('Building tree')
+        statusText = t('Building tree')
       }
       break
 
@@ -168,16 +170,16 @@ export function selectStatus(
         const total = analysisResultStatuses.length
         const succeeded = analysisResultStatuses.filter((status) => status === AlgorithmSequenceStatus.done).length
         const failed = analysisResultStatuses.filter((status) => status === AlgorithmSequenceStatus.failed).length
-        statusText = i18n.t('Done. Total sequences: {{total}}. Succeeded: {{succeeded}}', { succeeded, total })
+        statusText = t('Done. Total sequences: {{total}}. Succeeded: {{succeeded}}', { succeeded, total })
         if (failed > 0) {
-          failureText = i18n.t('Failed: {{failed}}', { failed, total })
+          failureText = t('Failed: {{failed}}', { failed, total })
         }
       }
       break
 
     case AlgorithmGlobalStatus.failed:
       {
-        failureText = i18n.t('Failed due to error.')
+        failureText = t('Failed due to error.')
         percent = 100
       }
       break

packages/nextclade-web/src/helpers/useTranslationSafe.ts

@@ -1,10 +1,12 @@
-import type { StringMap, TOptions } from 'i18next'
+import type { TOptions } from 'i18next'
 import { useTranslation } from 'react-i18next'
 
-export function useTranslationSafe<TInterpolationMap extends object = StringMap>() {
+export type TFunc = (key: string, options?: string | TOptions | undefined) => string
+
+export function useTranslationSafe(): { t: TFunc } {
   const response = useTranslation()
 
-  function t(key: string, options?: TOptions<TInterpolationMap> | string) {
+  function t(key: string, options?: TOptions | string) {
     return response.t(key, options) ?? key
   }