From 8f373d351247addb9706c05ec0d8f77262aef773 Mon Sep 17 00:00:00 2001 From: Saket Hatwar Date: Fri, 29 Aug 2025 06:17:36 -0400 Subject: [PATCH 1/8] add Translation --- Makefile | 2 + .../jsx/CandidateScanQCSummaryWidget.js | 18 +- modules/imaging_browser/jsx/ImagePanel.js | 240 ++++++++++-------- .../jsx/imagingBrowserIndex.js | 51 ++-- .../hi/LC_MESSAGES/imaging_browser.json | 33 +++ .../locale/hi/LC_MESSAGES/imaging_browser.po | 115 +++++++++ .../locale/imaging_browser.pot | 86 ++++++- 7 files changed, 412 insertions(+), 133 deletions(-) create mode 100644 modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.json create mode 100644 modules/imaging_browser/locale/hi/LC_MESSAGES/imaging_browser.po diff --git a/Makefile b/Makefile index 0eb144d3d70..9adc508cb8d 100755 --- a/Makefile +++ b/Makefile @@ -112,6 +112,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 diff --git a/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js b/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js index 252b962e565..48e7c51b264 100644 --- a/modules/imaging_browser/jsx/CandidateScanQCSummaryWidget.js +++ b/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,15 @@ function CandidateScanQCSummaryWidget(props) { return
    -
  • Red bar denotes number of failed QC scans.
    • -
  • Green bar denotes number of passed QC scans.
    • -
  • Grey bar denotes other QC statuses.
    • +
  • {t('Red bar denotes number of failed QC scans.', {ns: 'imaging_browser'})}
    • +
  • {t('Green bar denotes number of passed QC scans.', {ns: 'imaging_browser'})}
    • +
  • {t('Grey bar denotes other QC statuses.', {ns: 'imaging_browser'})}

- 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'})}

- 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'})}

; } diff --git a/modules/imaging_browser/jsx/ImagePanel.js b/modules/imaging_browser/jsx/ImagePanel.js index f6059c642dc..b643d7dc368 100644 --- a/modules/imaging_browser/jsx/ImagePanel.js +++ b/modules/imaging_browser/jsx/ImagePanel.js @@ -6,6 +6,7 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; +import {withTranslation} from 'react-i18next'; /** * Image panel header component @@ -25,14 +26,15 @@ class ImagePanelHeader extends Component { * @return {JSX} - React markup for the component */ render() { + const {t} = this.props; let QCStatusLabel; - if (this.props.QCStatus === 'Pass') { + if (this.props.QCStatus === t('Pass', {ns: 'imaging_browser'})) { QCStatusLabel = - {this.props.QCStatus} + {t('Pass', {ns: 'imaging_browser'})} ; - } else if (this.props.QCStatus === 'Fail') { + } else if (this.props.QCStatus === t('Fail', {ns: 'imaging_browser'})) { QCStatusLabel = - {this.props.QCStatus} + {t('Fail', {ns: 'imaging_browser'})} ; } @@ -65,7 +67,7 @@ class ImagePanelHeader extends Component { className="btn btn-default btn-xs dropdown-toggle" onClick={this.props.onToggleHeaders} aria-expanded={this.props.HeadersExpanded}> - Header Info + {t('Header Info', {ns: 'imaging_browser'})}
@@ -97,8 +99,11 @@ ImagePanelHeader.propTypes = { FileID: PropTypes.string, Filename: PropTypes.string, Expanded: PropTypes.bool, + t: PropTypes.func, }; +const TranslatedImagePanelHeader = withTranslation(['imaging_browser'])(ImagePanelHeader); + /** * Image panel headers table component */ @@ -117,6 +122,7 @@ class ImagePanelHeadersTable extends Component { * @return {JSX} - React markup for the component */ render() { + const {t} = this.props; let inversionTime = null; if (this.props.HeaderInfo.InversionTime !== '0.00') { inversionTime = this.props.HeaderInfo.InversionTime + ' ms'; @@ -137,13 +143,13 @@ class ImagePanelHeadersTable extends Component { "> - Series Instance UID + {t('Series Instance UID', {ns: 'imaging_browser'})} {this.props.HeaderInfo.SeriesUID} - Voxel Size + {t('Voxel Size', {ns: 'imaging_browser'})} {this.props.HeaderInfo.XStep === '' ? ' ' : 'X: ' + this.props.HeaderInfo.XStep + ' mm, '} @@ -152,74 +158,74 @@ class ImagePanelHeadersTable extends Component { {this.props.HeaderInfo.ZStep === '' ? ' ' : 'Z: ' + this.props.HeaderInfo.ZStep + ' mm '} - Output Type + {t('Output Type', {ns: 'imaging_browser'})} {this.props.HeaderInfo.OutputType} - Protocol + {t('Protocol', {ns: 'imaging_browser'})} {this.props.HeaderInfo.AcquisitionProtocol} - Acquisition Date + {t('Acquisition Date', {ns: 'imaging_browser'})} {this.props.HeaderInfo.AcquisitionDate} - Inserted Date + {t('Inserted Date', {ns: 'imaging_browser'})} {this.props.HeaderInfo.InsertedDate} - Series Number + {t('Series Number', {ns: 'imaging_browser'})} {this.props.HeaderInfo.SeriesNumber} - Series Description + {t('Series Description', {ns: 'imaging_browser'})} {this.props.HeaderInfo.SeriesDescription} - Slice Thick + {t('Slice Thick', {ns: 'imaging_browser'})} {this.props.HeaderInfo.SliceThickness} mm - TR + {t('TR', {ns: 'imaging_browser'})} {this.props.HeaderInfo.RepetitionTime} ms - TE + {t('TE', {ns: 'imaging_browser'})} {this.props.HeaderInfo.EchoTime} ms - TI + {t('TI', {ns: 'imaging_browser'})} {inversionTime} - Phase Encoding Direction + {t('Phase Encoding Direction', {ns: 'imaging_browser'})} {this.props.HeaderInfo.PhaseEncodingDirection} - Image Type + {t('Image Type', {ns: 'imaging_browser'})} {this.props.HeaderInfo.ImageType} - Echo Number + {t('Echo Number', {ns: 'imaging_browser'})} {this.props.HeaderInfo.EchoNumber} - Number of volumes + {t('Number of volumes', {ns: 'imaging_browser'})} {numVolumes} {this.props.HeaderInfo.ProcessingPipeline ? - Processing Pipeline + {t('Processing Pipeline', {ns: 'imaging_browser'})} : null} {this.props.HeaderInfo.ProcessingPipeline ? @@ -227,7 +233,7 @@ class ImagePanelHeadersTable extends Component { : null} {this.props.HeaderInfo.ProcDate ? - Processing Pipeline Date + {t('Processing Pipeline Date', {ns: 'imaging_browser'})} : null } {this.props.HeaderInfo.ProcDate ? @@ -237,18 +243,18 @@ class ImagePanelHeadersTable extends Component { {this.props.HeaderInfo.ProcessingPipeline === 'DTIPrepPipeline' ? - Number of rejected directions + {t('Number of rejected directions', {ns: 'imaging_browser'})} {this.props.HeaderInfo.TotalRejected} - Number of Interlace correlations + {t('Number of Interlace correlations', {ns: 'imaging_browser'})} {this.props.HeaderInfo.InterlaceRejected} - Number of Gradient-wise correlations + {t('Number of Gradient-wise correlations', {ns: 'imaging_browser'})} {this.props.HeaderInfo.IntergradientRejected} @@ -258,7 +264,7 @@ class ImagePanelHeadersTable extends Component { {this.props.HeaderInfo.ProcessingPipeline === 'DTIPrepPipeline' ? - Number of Slicewise correlations + {t('Number of Slicewise correlations', {ns: 'imaging_browser'})} {this.props.HeaderInfo.SlicewiseRejected} @@ -272,8 +278,10 @@ class ImagePanelHeadersTable extends Component { } ImagePanelHeadersTable.propTypes = { HeaderInfo: PropTypes.object, + t: PropTypes.func, }; +const TranslatedImagePanelHeadersTable = withTranslation(['imaging_browser'])(ImagePanelHeadersTable); /** * Image quality control dropdown component @@ -293,6 +301,7 @@ class ImageQCDropdown extends Component { * @return {JSX} - React markup for the component */ render() { + const {t} = this.props; let label = ; if (this.props.url) { label =