[i18n/imaging_browser] Translate imaging QC summary on candidate_profile (#10078)

This translates the "Imaging QC Summary" widget on the candidate_profile
and adds Japanese translations as an example.

Author: driusan

Makefile

@@ -121,6 +121,7 @@ locales:
 	msgfmt -o modules/genomic_browser/locale/ja/LC_MESSAGES/genomic_browser.mo modules/genomic_browser/locale/ja/LC_MESSAGES/genomic_browser.po
 	msgfmt -o modules/help_editor/locale/ja/LC_MESSAGES/help_editor.mo modules/help_editor/locale/ja/LC_MESSAGES/help_editor.po
 	msgfmt -o modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.mo modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.po
+	npx i18next-conv -l ja -s modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.po -t modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.json --compatibilityJSON v4
 	msgfmt -o modules/imaging_qc/locale/ja/LC_MESSAGES/imaging_qc.mo modules/imaging_qc/locale/ja/LC_MESSAGES/imaging_qc.po
 	msgfmt -o modules/imaging_uploader/locale/ja/LC_MESSAGES/imaging_uploader.mo modules/imaging_uploader/locale/ja/LC_MESSAGES/imaging_uploader.po
 	msgfmt -o modules/instrument_builder/locale/ja/LC_MESSAGES/instrument_builder.mo modules/instrument_builder/locale/ja/LC_MESSAGES/instrument_builder.po

modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js

@@ -1,7 +1,10 @@
 import '../../../node_modules/c3/c3.css';
 import c3 from 'c3';
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
+import {useTranslation} from 'react-i18next';
+import 'I18nSetup';
+import jaStrings from '../locale/ja/LC_MESSAGES/imaging_browser.json';
 
 /**
  * A CandidateScanQCSummaryWidget is a type of React widget
@@ -12,10 +15,13 @@ import PropTypes from 'prop-types';
  * @return {*} - rendered React component
  */
 function CandidateScanQCSummaryWidget(props) {
+  const {t, i18n} = useTranslation();
+  const [reload, setReload] = useState(0);
   useEffect(() => {
     const modalities = getModalities(props.Files);
     const data = getDataObject(modalities, props.Files);
     const visits = getVisits(props.Files);
+    i18n.addResourceBundle('ja', 'imaging_browser', jaStrings);
     c3.generate({
       bindto: '#imagebreakdownchart',
       data: {
@@ -35,37 +41,42 @@ function CandidateScanQCSummaryWidget(props) {
           type: 'category',
           categories: visits,
           label: {
-            text: 'Visit',
+            text: t('Visit', {ns: 'loris'}),
             position: 'outer-center',
           },
         },
         y: {
           label: {
             position: 'outer-middle',
-            text: 'Number of Scans',
+            text: t('Number of Scans', {ns: 'imaging_browser'}),
           },
         },
       },
       legend: {
         show: false,
       },
     });
-  });
+    setReload(reload+1);
+  }, [t]);
 
   return <div>
     <div id='imagebreakdownchart' />
     <ul>
-      <li>Red bar denotes number of failed QC scans.</li>
-      <li>Green bar denotes number of passed QC scans.</li>
-      <li>Grey bar denotes other QC statuses.</li>
+      <li>{t('Red bar denotes number of failed QC scans.',
+        {ns: 'imaging_browser'})}</li>
+      <li>{t('Green bar denotes number of passed QC scans.',
+        {ns: 'imaging_browser'})}</li>
+      <li>{t('Grey bar denotes other QC statuses.',
+        {ns: 'imaging_browser'})}</li>
     </ul>
     <p>
-              Different shades represent different modalities.
-              Only native modalities are displayed in results.
+      {t('Different shades represent different modalities. '
+         + 'Only native modalities are displayed in results.',
+      {ns: 'imaging_browser'})}
     </p>
     <p>
-              Hover over any visit to see detailed modality breakdown for visit,
-              click to go to imaging browser.
+      {t('Hover over any visit to see detailed modality breakdown for visit, '
+         + 'click to go to imaging browser.', {ns: 'imaging_browser'})}
     </p>
   </div>;
 }

modules/imaging_browser/locale/imaging_browser.pot

@@ -33,3 +33,24 @@ msgstr ""
 msgid "Imaging Session"
 msgid_plural "Imaging Sessions"
 msgstr[0] ""
+
+msgid "Imaging QC Summary"
+msgstr ""
+
+msgid "Number of Scans"
+msgstr ""
+
+msgid "Red bar denotes number of failed QC scans."
+msgstr ""
+
+msgid "Green bar denotes number of passed QC scans."
+msgstr ""
+
+msgid "Grey bar denotes other QC statuses."
+msgstr ""
+
+msgid "Different shades represent different modalities. Only native modalities are displayed in results."
+msgstr ""
+
+msgid "Hover over any visit to see detailed modality breakdown for visit, click to go to imaging browser."
+msgstr ""

modules/imaging_browser/locale/ja/LC_MESSAGES/imaging_browser.po

@@ -34,3 +34,24 @@ msgstr "新規および保留中のMRI セッション"
 msgid "Imaging Session"
 msgid_plural "Imaging Sessions"
 msgstr[0] "イメージングセッション"
+
+msgid "Imaging QC Summary"
+msgstr "画像品質管理の概要"
+
+msgid "Number of Scans"
+msgstr "スキャン回数"
+
+msgid "Red bar denotes number of failed QC scans."
+msgstr "赤いバーは、品質管理に失敗したスキャンの数を示します。"
+
+msgid "Green bar denotes number of passed QC scans."
+msgstr "緑色のバーは、品質管理に合格したが失敗したスキャンの数を示します。"
+
+msgid "Grey bar denotes other QC statuses."
+msgstr "灰色のバーはその他の品質管理ステータスを示します。"
+
+msgid "Different shades represent different modalities. Only native modalities are displayed in results."
+msgstr "異なる色合いは異なるモダリティを表します。結果にはネイティブモダリティのみが表示されます。"
+
+msgid "Hover over any visit to see detailed modality breakdown for visit, click to go to imaging browser."
+msgstr "訪問の上にマウスを移動すると、訪問の詳細なモダリティの内訳が表示されます。クリックすると、イメージング ブラウザーに移動します。"

modules/imaging_browser/php/module.class.inc

@@ -115,7 +115,7 @@ class Module extends \Module
             }
             return [
                 new CandidateWidget(
-                    "Imaging QC Summary",
+                    dgettext("imaging_browser", "Imaging QC Summary"),
                     $baseURL. "/imaging_browser/js/CandidateScanQCSummaryWidget.js",
                     "lorisjs.imaging_browser.CandidateScanQCSummaryWidget.default",
                     [ 'Files' => iterator_to_array($scansummary)],