[imaging_browser] Translate imaging browser

Makefile

@@ -97,6 +97,8 @@ 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
+	msgfmt -o modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.mo modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po
+	npx i18next-conv -l hi -s modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po -t modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.json
 	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

@@ -2,6 +2,7 @@ import '../../../node_modules/c3/c3.css';
 import c3 from 'c3';
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
+import {useTranslation} from 'react-i18next';
 
 /**
  * A CandidateScanQCSummaryWidget is a type of React widget
@@ -12,6 +13,7 @@ import PropTypes from 'prop-types';
  * @return {*} - rendered React component
  */
 function CandidateScanQCSummaryWidget(props) {
+  const {t} = useTranslation(['imaging_browser', 'loris']);
   useEffect(() => {
     const modalities = getModalities(props.Files);
     const data = getDataObject(modalities, props.Files);
@@ -35,14 +37,14 @@ 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'}),
           },
         },
       },
@@ -55,17 +57,21 @@ function CandidateScanQCSummaryWidget(props) {
   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>;
 }