add i18n uk and us locales, translation

Author: Quernest

package.json

@@ -21,12 +21,16 @@
     "@types/recompose": "^0.30.6",
     "d3": "^5.9.2",
     "d3-selection-multi": "^1.0.1",
+    "i18next": "^15.1.3",
+    "i18next-browser-languagedetector": "^3.0.1",
+    "i18next-xhr-backend": "^2.0.1",
     "lodash": "^4.17.11",
     "ml-matrix": "^6.0.0",
     "ml-pca": "^3.0.0",
     "papaparse": "^5.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-i18next": "^10.11.0",
     "react-router-dom": "^5.0.0",
     "react-scripts-ts": "3.1.0",
     "recompose": "^0.30.0"

public/locales/en/translation.json

@@ -0,0 +1,47 @@
+{
+  "navigation": {
+    "/": "Home",
+    "/pca": "PCA",
+    "/som": "SOM",
+    "/docs": "Docs"
+  },
+  "pages": {
+    "home": {
+      "title": "What is reduction?",
+      "description": "In statistics, machine learning, and information theory, dimensionality reduction or dimension reduction is the process of reducing the number of random variables under consideration by obtaining a set of principal variables. It can be divided into feature selection and feature extraction.",
+      "pca": {
+        "title": "Principal Component Analysis",
+        "description": "A statistical procedure that uses an orthogonal transformation to convert a set of observations of possibly correlated variables (entities each of which takes on various numerical values) into a set of values of linearly uncorrelated variables called principal components.",
+        "button": "Try it"
+      },
+      "som": {
+        "title": "Self-Organizing Maps",
+        "description": "A type of artificial neural network (ANN) that is trained using unsupervised learning to produce a low-dimensional (typically two-dimensional), discretized representation of the input space of the training samples, called a map, and is therefore a method to do dimensionality reduction.",
+        "button": "Try it"
+      }
+    },
+    "pca": {
+      "title": "Principal Component Analysis",
+      "description": "Process two-dimensional data arrays using principal component analysis.",
+      "messages": {
+        "uploaded": "The dataset is uploaded. Press on the submit button."
+      }
+    },
+    "som": {
+      "title": "Self-Organizing Maps",
+      "description": "Process two-dimensional data arrays using self-organizing maps.",
+      "messages": {
+        "uploaded": "The dataset is uploaded. Press on the submit button."
+      }
+    }
+  },
+  "controls": {
+    "upload": {
+      "button": {
+        "choose": "choose a file",
+        "upload": "upload"
+      }
+    }
+  },
+  "changeLanguage": "Change language"
+}

public/locales/uk/translation.json

@@ -0,0 +1,44 @@
+{
+  "navigation": {
+    "/": "Домашня",
+    "/pca": "МГК",
+    "/som": "СКК",
+    "/docs": "Документація"
+  },
+  "pages": {
+    "home": {
+      "title": "Що таке редукція?",
+      "description": "У статистиці, машинному навчанні та теорії інформації зниження розмірності є процесом скорочення кількості випадкових змінних шляхом отримання множини головних змінних. Цей процес можна поділити на обирання ознак та виділяння ознак.",
+      "pca": {
+        "title": "Метод головних компонент",
+        "description": "Метод факторного аналізу в статистиці, який використовує ортогональне перетворення множини спостережень з можливо пов'язаними змінними (сутностями, кожна з яких набуває різних числових значень) у множину змінних без лінійної кореляції, які називаються головними компонентами.",
+        "button": "Спробувати"
+      },
+      "som": {
+        "title": "Самоорганізаційна Карта Кохонена",
+        "description": "Нейронна мережа з некерованим навчанням, яка використовується для проектування багатовимірного простору в простір з нижчою розмірністю (найчастіше, двовимірний). Створює дискретне представлення вхідних просторів навчальних вибірок, які називаються картою (англ. map), і тому використання цього типу нейронної мережі є методом для зниження розмірності.",
+        "button": "Спробувати"
+      }
+    },
+    "pca": {
+      "title": "Метод головних компонент",
+      "description": "Обробка двомірних масивів даних з використанням методу головних компонент.",
+      "messages": {
+        "uploaded": "Набір даних завантажено. Натисніть кнопку надіслати."
+      }
+    },
+    "som": {
+      "title": "Самоорганізаційна Карта Кохонена",
+      "description": "Обробка двомірних масивів даних з використанням самоорганізаційної карти Кохонена."
+    }
+  },
+  "controls": {
+    "upload": {
+      "button": {
+        "choose": "вибрати файл",
+        "upload": "завантажити"
+      }
+    }
+  },
+  "changeLanguage": "Змінити мову"
+}

src/components/Header.tsx

@@ -3,22 +3,26 @@ import Button from "@material-ui/core/Button";
 import Divider from "@material-ui/core/Divider";
 import Drawer from "@material-ui/core/Drawer";
 import Grid from "@material-ui/core/Grid";
+import Typography from '@material-ui/core/Typography';
 import Hidden from "@material-ui/core/Hidden";
 import IconButton from "@material-ui/core/IconButton";
+import IconLanguage from '@material-ui/icons/Language';
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import { Theme } from "@material-ui/core/styles";
 import Toolbar from "@material-ui/core/Toolbar";
+import Tooltip from "@material-ui/core/Tooltip";
 import MenuIcon from "@material-ui/icons/Menu";
+import Popover from '@material-ui/core/Popover';
 import { makeStyles } from "@material-ui/styles";
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
+import { useTranslation } from 'react-i18next';
 import { withRouter, RouteComponentProps } from "react-router-dom";
 import { IRoute } from "../router";
 
-const useStyles = makeStyles(({ breakpoints }: Theme) => ({
+const useStyles = makeStyles({
   menuButton: {
     marginLeft: -12
   },
@@ -28,18 +32,36 @@ const useStyles = makeStyles(({ breakpoints }: Theme) => ({
   right: {
     marginLeft: "auto"
   }
-}));
+});
 
 interface IHeaderProps extends RouteComponentProps {
   routes: IRoute[];
 }
 
 export const HeaderBase: React.FC<IHeaderProps> = ({ routes, location }) => {
   const classes = useStyles();
+  const { t, i18n } = useTranslation();
   const [isOpenDrawer, toggleDrawer] = useState<boolean>(false);
+  const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
 
-  const links = routes.map(({ path, title }, i) => {
-    if (path && title) {
+  function handleClick(event: any) {
+    setAnchorEl(event.currentTarget);
+  }
+
+  function handleClose() {
+    setAnchorEl(null);
+  }
+
+  function handleChangeLanguage(lng: string) {
+    i18n.changeLanguage(lng);
+    handleClose();
+  }
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'lng-popover' : undefined;
+
+  const links = routes.map(({ path }, i) => {
+    if (path) {
       return (
         <Button
           key={i}
@@ -51,16 +73,16 @@ export const HeaderBase: React.FC<IHeaderProps> = ({ routes, location }) => {
           variant="text"
           color="inherit"
         >
-          {title || ""}
+          {t(`navigation.${path}`) || ""}
         </Button>
       );
     }
 
     return null;
   });
 
-  const drawerLinks = routes.map(({ path, title, icon }, i) => {
-    if (path && title && icon) {
+  const drawerLinks = routes.map(({ path, icon }, i) => {
+    if (path && icon) {
       const Icon = icon;
 
       return (
@@ -76,7 +98,7 @@ export const HeaderBase: React.FC<IHeaderProps> = ({ routes, location }) => {
           <ListItemIcon>
             <Icon color={path === location.pathname ? "primary" : "inherit"} />
           </ListItemIcon>
-          <ListItemText primary={title} />
+          <ListItemText primary={t(`navigation.${path}`)} />
         </ListItem>
       );
     }
@@ -102,6 +124,38 @@ export const HeaderBase: React.FC<IHeaderProps> = ({ routes, location }) => {
             <Hidden smDown={true}>
               <div className={classes.right}>{links}</div>
             </Hidden>
+            <Tooltip title={t('changeLanguage')}>
+              <IconButton color="inherit" aria-describedby={id} onClick={handleClick}>
+                <IconLanguage color="inherit" />
+              </IconButton>
+            </Tooltip>
+            <Popover
+              id={id}
+              open={open}
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <List component="nav" dense={true}>
+                <ListItem button={true} onClick={() => handleChangeLanguage('en')}>
+                  <ListItemText disableTypography={true}>
+                    <Typography component="span"><small>us</small> English</Typography>
+                  </ListItemText>
+                </ListItem>
+                <ListItem button={true} onClick={() => handleChangeLanguage('uk')}>
+                  <ListItemText disableTypography={true}>
+                    <Typography component="span"><small>uk</small> Українська</Typography>
+                  </ListItemText>
+                </ListItem>
+              </List>
+            </Popover>
           </Grid>
         </Toolbar>
       </AppBar>

src/components/controls/UploadControls.tsx

@@ -5,6 +5,8 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import CloudUploadIcon from "@material-ui/icons/CloudUpload";
 import { makeStyles } from "@material-ui/styles";
+import { useTranslation } from 'react-i18next';
+
 import React from "react";
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -48,6 +50,7 @@ export const UploadControls: React.FC<IUploadControlsProps> = ({
 }) => {
   const classes = useStyles();
   const fileInput: React.RefObject<HTMLInputElement> = React.createRef();
+  const { t } = useTranslation();
 
   function onChoose(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     const input = fileInput.current;
@@ -114,7 +117,7 @@ export const UploadControls: React.FC<IUploadControlsProps> = ({
             disabled={uploading}
             fullWidth={true}
           >
-            choose a file
+            {t('controls.upload.button.choose')}
           </Button>
         </Grid>
         <Grid item={true} xs={6} sm={4} md={3} lg={2}>
@@ -126,7 +129,7 @@ export const UploadControls: React.FC<IUploadControlsProps> = ({
               onClick={onUpload}
               fullWidth={true}
             >
-              Upload
+              {t('controls.upload.button.upload')}
               <CloudUploadIcon className={classes.rightIcon} />
             </Button>
             {uploading && (

src/components/pca/CalculateControls.tsx

@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import Grid from "@material-ui/core/Grid";
 import { Theme } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
 import { makeStyles } from "@material-ui/styles";
 import React from "react";
 import {
@@ -61,9 +60,6 @@ export const CalculateControls: React.FC<ICalculateControlsProps> = ({
 
   return (
     <div className={classes.root}>
-      <Typography variant="body1" paragraph={true}>
-        The dataset is processed. Press on the calculate button
-      </Typography>
       <Grid container={true} alignItems="center" spacing={2}>
         <Grid item={true} xs={6} sm={4} md={3} lg={2}>
           <div className={classes.buttonWrapper}>

src/i18n.ts

@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import Backend from 'i18next-xhr-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  // load translation using xhr -> see /public/locales
+  // learn more: https://github.com/i18next/i18next-xhr-backend
+  .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  });
+
+export default i18n;

src/index.tsx

@@ -1,12 +1,19 @@
 import { ThemeProvider } from "@material-ui/styles";
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 import { AppRouter } from "./router";
 import { theme } from "./theme";
 
+// import i18n translations
+import './i18n';
+
+// i18n translations might still be loaded by the xhr backend
+// use react's Suspense
 ReactDOM.render(
-  <ThemeProvider theme={theme}>
-    <AppRouter />
-  </ThemeProvider>,
+  <Suspense fallback="loading">
+    <ThemeProvider theme={theme}>
+      <AppRouter />
+    </ThemeProvider>
+  </Suspense>,
   document.getElementById("root")
 );