Added internationalization to dataset page, properties, and action bu…

…ttons.
openml · Jan 20, 2024 · 4c612a6 · 4c612a6
1 parent 2fcb1d3
commit 4c612a6
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 25 deletions.
diff --git a/app/public/locales/en/common.yml b/app/public/locales/en/common.yml
@@ -722,6 +722,29 @@ filters:
     Weka: "Weka {{version}}"
     mlr: "MLR {{version}}"
     Moa: "Moa {{version}}"
+button:
+    Croissant: "Croissant"
+    XML: "XML"
+    JSON: "JSON"
+    Download data: "Download"
+    Edit data: "Edit"
+tips:
+    Croissant: "Download Croissant description"
+    XML: "Download XML description"
+    JSON: "Download JSON description"
+    Download data: "Download dataset"
+    Edit data: "Edit dataset (requires login)"
+    Data ID: "The ID of the dataset. This is a unique permanent identifier."
+    Data version: "The version of the dataset. New versions are created when the dataset is changed."
+    Data status: "The status of the dataset. `Verified` means that they could be automatically loaded and analyzed. `Deactivated` means that they should no longer be used, and have ben replaced by a better version. `In preparation` means that a problem was detected that the author is fixing."
+    Data format: "The format of the dataset. ARFF means tabular data. The internal storage format is always Parquet."
+    Data licence: "The licence under which the dataset is released by the original author. It is most often Public Domain, meaning that no copyright restrictions are known, or a Creative Commons licence, such as CC0 or CC-BY."
+    Data date: "The date when the dataset was uploaded to OpenML."
+    Data uploader: "The person who uploaded the dataset to OpenML. For public domain data, this is not always the original author."
+    Data likes: "The number of likes the dataset has received."
+    Data issues: "The number of issues reported for this dataset."
+    Data downloads: "The number of times the dataset was downloaded."
+
 
 
 

diff --git a/app/src/components/Property.js b/app/src/components/Property.js
@@ -3,6 +3,9 @@ import styled from "@emotion/styled";
 import { Tooltip, Link as MuiLink, Chip } from "@mui/material";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+// Server-side translation
+import { useTranslation } from "next-i18next";
+
 const Icon = styled(FontAwesomeIcon)`
   padding-right: 0.5em;
 `;
@@ -19,8 +22,29 @@ const SimpleLink = styled(MuiLink)`
 `;
 
 const Property = ({ label, value, color, icon, url, avatar }) => {
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   return (
-    <Tooltip title={label} placement="top-start">
+    <Tooltip
+      title={t(`tips.${label}`)}
+      arrow
+      slotProps={{
+        popper: {
+          modifiers: [
+            {
+              name: "offset",
+              options: {
+                offset: [0, -14],
+              },
+            },
+          ],
+        },
+      }}
+    >
       <span
         style={{
           paddingRight: 15,

diff --git a/app/src/pages/about.js b/app/src/pages/about.js
@@ -52,7 +52,7 @@ import {
   faXTwitter,
 } from "@fortawesome/free-brands-svg-icons";
 
-import { purple, blue, red, green, pink, grey } from "@mui/material/colors";
+import { purple, blue, red, green, grey } from "@mui/material/colors";
 import { ActionChip } from "../components/Card";
 
 // Server-side translation

diff --git a/app/src/pages/d/[dataId].js b/app/src/pages/d/[dataId].js
@@ -25,6 +25,7 @@ import { Icon } from "@iconify/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 // Server-side translation
+import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import {
   faCheckCircle,
@@ -106,18 +107,25 @@ export async function getStaticProps({ params, locale }) {
 }
 
 const ActionButtons = ({ buttons }) => {
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   return (
     <>
       {buttons.map((button, index) => (
         <Tooltip
           key={index}
-          title={button.tooltipTitle}
+          arrow
+          title={t(`tips.${button.label}`)}
           placement="bottom-start"
         >
           <ActionButton color="primary" href={button.url || button.getUrl()}>
             <Action>
               {button.icon}
-              <Typography>{button.label}</Typography>
+              <Typography>{t(`button.${button.label}`)}</Typography>
             </Action>
           </ActionButton>
         </Tooltip>
@@ -127,6 +135,12 @@ const ActionButtons = ({ buttons }) => {
 };
 
 function Dataset({ data, error }) {
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   const did = data.data_id;
   const did_padded = did.toString().padStart(4, "0");
   const bucket_url = "https://openml1.win.tue.nl/datasets/";
@@ -152,49 +166,48 @@ function Dataset({ data, error }) {
   // Action buttons
   const buttonData = [
     {
-      tooltipTitle: "Download Croissant description",
       url: croissant_url,
       icon: <Icon icon="fluent-emoji-high-contrast:croissant" />,
       label: "Croissant",
     },
     {
-      tooltipTitle: "Download XML description",
       url: `https://www.openml.org/api/v1/data/${data.data_id}`,
       icon: <FontAwesomeIcon icon={faCode} />,
-      label: "xml",
+      label: "XML",
     },
     {
-      tooltipTitle: "Download JSON description",
       url: `https://www.openml.org/api/v1/json/data/${data.data_id}`,
       icon: <FontAwesomeIcon icon={faFileAlt} />,
-      label: "json",
+      label: "JSON",
     },
     {
-      tooltipTitle: "Download dataset",
       url: data.url,
       icon: <FontAwesomeIcon icon={faCloudDownloadAlt} />,
-      label: "download",
+      label: "Download data",
     },
     {
-      tooltipTitle: "Edit dataset (requires login)",
       getUrl: () =>
         loggedIn ? `auth/data-edit?id=${data.data_id}` : "auth/sign-in",
       getColor: () => (loggedIn ? "primary" : "default"),
       icon: <FontAwesomeIcon icon={faEdit} />,
-      label: "edit",
+      label: "Edit data",
     },
   ];
 
   // First row of dataset properties
   const dataProps1 = [
-    { label: "id", value: "ID: " + data.data_id, icon: faIdBadge },
     {
-      label: "version",
+      label: "Data ID",
+      value: "ID: " + data.data_id,
+      icon: faIdBadge,
+    },
+    {
+      label: "Data version",
       value: "v." + data.version,
       icon: faCodeBranch,
     },
     {
-      label: "status",
+      label: "Data status",
       value: data.status === "active" ? "verified" : data.status,
       color:
         data.status === "active"
@@ -210,37 +223,41 @@ function Dataset({ data, error }) {
           : faWrench,
     },
     {
-      label: "format",
+      label: "Data format",
       value: data.format,
       icon: faTable,
     },
     {
-      label: "licence",
+      label: "Data licence",
       value: data.licence,
       icon: faClosedCaptioning,
     },
     {
-      label: "date",
+      label: "Data date",
       value: data.date.split(" ")[0],
       icon: faClock,
     },
   ];
 
   const dataProps2 = [
     {
-      label: "uploader",
+      label: "Data uploader",
       value: data.uploader,
       url: `/u/${data.uploader_id}`,
       avatar: <Avatar>{data.uploader ? data.uploader.charAt(0) : "X"}</Avatar>,
     },
-    { label: "likes", value: data.nr_of_likes + " likes", icon: faHeart },
     {
-      label: "issues",
+      label: "Data likes",
+      value: data.nr_of_likes + " likes",
+      icon: faHeart,
+    },
+    {
+      label: "Data issues",
       value: data.nr_of_issues + " issues",
       icon: faExclamationTriangle,
     },
     {
-      label: "downloads",
+      label: "Data downloads",
       value: data.nr_of_downloads + " downloads",
       icon: faCloud,
     },
@@ -301,8 +318,8 @@ function Dataset({ data, error }) {
               <Grid container spacing={2} pt={1}>
                 <Grid item md={12}>
                   <FontAwesomeIcon icon={faTags} />
-                  {data.tags.map((tag) => (
-                    <Tag key={tag.tag} tag={tag.tag} />
+                  {data.tags.map((tag, index) => (
+                    <Tag key={`${tag.tag}-${index}`} tag={tag.tag} />
                   ))}
                 </Grid>
               </Grid>