Additional Translations

Author: Saket Hatwar

modules/dataquery/jsx/components/filterableselectgroup.tsx

@@ -1,4 +1,5 @@
 import Select, {SingleValue} from 'react-select';
+import {useTranslation} from 'react-i18next';
 
 type SelectOption = {
     label: string,
@@ -27,8 +28,9 @@ function FilterableSelectGroup(props: {
     groups: object,
     mapGroupName?: (module: string) => string,
 }) {
+  const {t} = useTranslation('dataquery');
   const groups: SelectGroup[] = [];
-  const placeholder = props.placeholder || 'Select a category';
+  const placeholder = props.placeholder || t('Select a category');
   for (const [module, subcategories]
     of Object.entries(props.groups)) {
     const options: SelectOption[] = [];

modules/dataquery/jsx/definefields.tsx

@@ -94,14 +94,14 @@ function QueryField(props: {
 
     if (props.selected) {
       visits = <div onClick={(e) => e.stopPropagation()}>
-        <h4>{t('Visits', {ns: 'loris'})}</h4>
+        <h4>{t('Visits')}</h4>
         <Select options={selectOptions.map((visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
         }
         isMulti
         onChange={selected}
-        placeholder={t('Select Visits', {ns: 'loris'})}
+        placeholder={t('Select Visits', {ns: 'dataquery'})}
         value={selectedVisits.map( (visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
@@ -199,6 +199,7 @@ function DefineFields(props: {
         visits: string[]
     ) => void,
 }) {
+  const {t} = useTranslation('dataquery');
   const [activeFilter, setActiveFilter] = useState('');
   const [syncVisits, setSyncVisits] = useState<boolean>(false);
   const [zoomTo, setZoomTo] = useState<string|null>(null);
@@ -339,11 +340,12 @@ function DefineFields(props: {
         return {value: el, label: el};
       });
       defaultVisits = <div style={{paddingBottom: '1em', display: 'flex'}}>
-        <h4 style={{paddingRight: '1ex'}}>Default Visits</h4>
+        <h4 style={{paddingRight: '1ex'}}>{t('Default Visits',
+          {ns: 'dataquery'})}</h4>
         <Select options={allVisits}
           isMulti
           onChange={props.onChangeDefaultVisits}
-          placeholder='Select Visits'
+          placeholder={t('Select Visits', {ns: 'dataquery'})}
           menuPortalTarget={document.body}
           styles={
             {menuPortal:
@@ -360,20 +362,21 @@ function DefineFields(props: {
           closeMenuOnSelect={false}
         />
         <div>
-          <CheckboxElement label='Sync with selected fields'
-            name="syncVisits"
-            value={syncVisits}
-            onUserInput={
-              (name: string, value: boolean) => setSyncVisits(value)
-            } />
+          <CheckboxElement label={t('Sync with selected fields',
+            {ns: 'dataquery'})}
+          name="syncVisits"
+          value={syncVisits}
+          onUserInput={
+            (name: string, value: boolean) => setSyncVisits(value)
+          } />
         </div>
       </div>;
     }
 
     fieldList = (<div>
       <div style={{display: 'flex', flexWrap: 'wrap',
         justifyContent: 'space-between'}}>
-        <h2>{cname} fields</h2>
+        <h2>{cname} {t('fields')}</h2>
         <div style={{marginTop: '1em',
           display: 'flex',
           flexWrap: 'nowrap',
@@ -384,7 +387,7 @@ function DefineFields(props: {
             <input onChange={setFilter}
               className='form-control'
               type="text"
-              placeholder="Filter within category"
+              placeholder={t('Filter within category', {ns: 'dataquery'})}
               aria-describedby="input-filter-addon"
               value={activeFilter} />
             <span className="input-group-addon">
@@ -399,11 +402,11 @@ function DefineFields(props: {
           }}>
             <button type="button" className="btn btn-primary"
               onClick={addAll}>
-                            Add all
+              {t('Add all', {ns: 'dataquery'})}
             </button>
             <button type="button" className="btn btn-primary"
               onClick={removeAll}>
-                            Remove all
+              {t('Remove all', {ns: 'dataquery'})}
             </button>
           </div>
         </div>
@@ -416,7 +419,7 @@ function DefineFields(props: {
     <div>
       <div style={{display: 'flex', flexWrap: 'nowrap'}}>
         <div style={{width: '80vw', padding: '1em'}}>
-          <h1>Available Fields</h1>
+          <h1>{t('Available Fields', {ns: 'dataquery'})}</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
@@ -438,11 +441,11 @@ function DefineFields(props: {
               alignItems: 'flex-end',
               marginBottom: '1em',
             }}>
-              <h2>Selected Fields</h2>
+              <h2>{t('Selected Fields', {ns: 'dataquery'})}</h2>
               <div>
                 <button type="button" className="btn btn-primary"
                   style={{marginBottom: 7}}
-                  onClick={props.onClearAll}>Clear</button>
+                  onClick={props.onClearAll}>{t('Clear')}</button>
               </div>
             </div>
             <SelectedFieldList

modules/dataquery/jsx/definefilters.addfiltermodal.tsx

@@ -126,7 +126,7 @@ function AddFilterModal(props: {
           setSelectedVisits(null);
         }
       }}
-      placeholder="Select a field" />;
+      placeholder={t('Select a field', {ns: 'dataquery'})} />;
   }
 
   if (fieldDictionary) {

modules/dataquery/jsx/hooks/usebreadcrumbs.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect} from 'react';
+import {useTranslation} from 'react-i18next';
 import Breadcrumbs from 'jsx/Breadcrumbs';
 
 // Declared in smarty main.tpl
@@ -15,11 +16,12 @@ function useBreadcrumbs(
   activeTab: string,
   setActiveTab: (newtab: string) => void
 ) {
+  const {t} = useTranslation('dataquery');
   // update breadcrumbs breadcrumbs
   useEffect(() => {
     const breadcrumbs = [
       {
-        text: 'Data Query Tool (Beta)',
+        text: t('Data Query Tool (Beta)', {ns: 'dataquery'}),
         /**
          * OnClick handler for the main breadcrumb
          *
@@ -36,7 +38,7 @@ function useBreadcrumbs(
                 || activeTab == 'DefineFilters'
                 || activeTab == 'ViewData') {
       breadcrumbs.push({
-        text: 'Define Fields',
+        text: t('Define Fields', {ns: 'dataquery'}),
         /**
          * OnClick handler for the define fields breadcrumb
          *
@@ -52,7 +54,7 @@ function useBreadcrumbs(
     if (activeTab == 'DefineFilters'
                 || activeTab == 'ViewData') {
       breadcrumbs.push({
-        text: 'Define Filters',
+        text: t('Define Filters', {ns: 'dataquery'}),
         /**
          * OnClick handler for the define filters breadcrumb
          *
@@ -68,7 +70,7 @@ function useBreadcrumbs(
 
     if (activeTab == 'ViewData') {
       breadcrumbs.push({
-        text: 'View Data',
+        text: t('View Data', {ns: 'dataquery'}),
         /**
          * OnClick handler for the View Data breadcrumb
          *
@@ -90,7 +92,7 @@ function useBreadcrumbs(
         />,
       );
     }
-  }, [activeTab]);
+  }, [activeTab, t]);
 }
 
 export default useBreadcrumbs;

modules/dataquery/jsx/hooks/usedatadictionary.tsx

@@ -1,4 +1,5 @@
 import {useState, useEffect} from 'react';
+import {useTranslation} from 'react-i18next';
 
 import {ModuleDictionary, FullDictionary} from '../types';
 
@@ -23,14 +24,15 @@ export type CategoriesAPIReturn = {
  */
 function useCategories(): CategoriesAPIReturn|null {
   const [categories, setCategories] = useState(null);
+  const {t} = useTranslation('dataquery');
   useEffect(() => {
     if (categories !== null) {
       return;
     }
     fetch('/dictionary/categories', {credentials: 'same-origin'})
       .then((resp) => {
         if (!resp.ok) {
-          throw new Error('Invalid response');
+          throw new Error(t('Invalid response', {ns: 'dataquery'}));
         }
         return resp.json();
       }).then((result) => {
@@ -59,7 +61,7 @@ function useDataDictionary(): DataDictionaryReturnType {
   // typescript says the key is always defined when we try and check if
   // it's set, need to figure out the correct way to do that, for now just use any
   const [pendingModules, setPendingModules] = useState<any>({});
-
+  const {t} = useTranslation('dataquery');
   /**
    * Fetch a module's dictionary and cache it into fulldictionary.
    *
@@ -80,7 +82,7 @@ function useDataDictionary(): DataDictionaryReturnType {
           {credentials: 'same-origin'}
         ).then((resp) => {
           if (!resp.ok) {
-            throw new Error('Invalid response');
+            throw new Error(t('Invalid response', {ns: 'dataquery'}));
           }
           return resp.json();
         }).then((result) => {

modules/dataquery/jsx/viewdata.tsx

@@ -319,6 +319,7 @@ function ViewData(props: {
     onRun: () => void
     fulldictionary: FullDictionary,
 }) {
+  const {t} = useTranslation('dataquery');
   const [visitOrganization, setVisitOrganization]
         = useState<VisitOrgType>('inline');
   const [headerDisplay, setHeaderDisplay]
@@ -344,7 +345,7 @@ function ViewData(props: {
   } else {
     switch (organizedData['status']) {
     case null:
-      return queryTable = <h2>Query not yet run</h2>;
+      return queryTable = <h2>{t('Query not yet run')}</h2>;
     case 'headers':
       queryTable = <ProgressBar
         type='headers'
@@ -360,7 +361,7 @@ function ViewData(props: {
     case 'done':
       try {
         queryTable = <DataTable
-          rowNumLabel="Row Number"
+          rowNumLabel={t('Row Number')}
           fields={organizedData.headers.map(
             (val: string) => {
               return {show: true, label: val};
@@ -407,7 +408,7 @@ function ViewData(props: {
     <CheckboxElement
       name="emptyvisits"
       value={emptyVisits}
-      label="Display empty visits?"
+      label={t('Display empty visits?', {ns: 'dataquery'})}
       onUserInput={
         (name: string, value: boolean) =>
           setEmptyVisits(value)
@@ -418,9 +419,9 @@ function ViewData(props: {
     <SelectElement
       name='headerdisplay'
       options={{
-        'fieldname': 'Field Name',
-        'fielddesc': 'Field Description',
-        'fieldnamedesc': 'Field Name: Field Description',
+        'fieldname': t('Field Name'),
+        'fielddesc': t('Field Description'),
+        'fieldnamedesc': t('Field Name: Field Description'),
       }}
       label='Header Display Format'
       value={headerDisplay}
@@ -435,12 +436,12 @@ function ViewData(props: {
     <SelectElement
       name='visitorganization'
       options={{
-        'crosssection': 'Rows (Cross-sectional)',
-        'longitudinal': 'Columns (Longitudinal)',
-        'inline': 'Inline values (no download)',
-        'raw': 'Raw JSON (debugging only)',
+        'crosssection': t('Rows (Cross-sectional)', {ns: 'dataquery'}),
+        'longitudinal': t('Columns (Longitudinal)', {ns: 'dataquery'}),
+        'inline': t('Inline values (no download)', {ns: 'dataquery'}),
+        'raw': t('Raw JSON (debugging only)', {ns: 'dataquery'}),
       }}
-      label='Display visits as'
+      label={t('Display visits as', {ns: 'dataquery'})}
       value={visitOrganization}
       multiple={false}
       emptyOption={false}
@@ -453,10 +454,10 @@ function ViewData(props: {
     <SelectElement
       name='enumdisplay'
       options={{
-        'labels': 'Labels',
-        'values': 'Values',
+        'labels': t('Labels', {ns: 'dataquery'}),
+        'values': t('Values', {ns: 'dataquery'}),
       }}
-      label='Display options as'
+      label={t('Display options as', {ns: 'dataquery'})}
       value={enumDisplay == EnumDisplayTypes.EnumLabel
         ? 'labels'
         : 'values'}

modules/dataquery/jsx/welcome.tsx

@@ -1114,7 +1114,7 @@ function IntroductionMessage(props: {
         +'fields used by the query. It will display in a Shared Queries panel '
         +'below the Recent Queries.', {ns: 'dataquery'})}</p>
       <p>{t('You may also give a query a name at any time by clicking the icon.'
-      +'This makes it easier to find queries you care about by giving them an'
+      +' This makes it easier to find queries you care about by giving them an'
         +' easier to remember name that can be used for filtering. When you '
         +'share a query, the name will be shared along with it.',
       {ns: 'dataquery'})}</p>

modules/dataquery/locale/dataquery.pot

@@ -404,3 +404,63 @@ msgstr ""
 
 msgid "Filters"
 msgstr ""
+
+msgid "Continue to Define Fields"
+msgstr ""
+
+msgid "Above, there is also a Study Queries panel. This are a special type of shared queries that have been pinned by a study administer to always display at the top of this page."
+msgstr ""
+
+msgid "The data query tool allows you to query data within LORIS. There are three steps to defining a query:"
+msgstr ""
+
+msgid "First, you must select the fields that you're interested in on the Define Fields page."
+msgstr ""
+
+msgid "Next, you can optionally define filters on the Define Filters page to restrict the population that is returned."
+msgstr ""
+
+msgid "Finally, you view your query results on the View Data page"
+msgstr ""
+
+msgid "The Next Steps on the bottom right of your screen always the context-sensitive next steps that you can do to build your query."
+msgstr ""
+
+msgid "Your recently run queries will be displayed in the Recent Queries panel below. Instead of building a new query, you can reload a query that you've recently run by clicking on the icon next to the query."
+msgstr ""
+
+msgid "Queries can be shared with others by clicking the icon. This will cause the query to be shared with all users who have access to the fields used by the query. It will display in a Shared Queries panel below the Recent Queries."
+msgstr ""
+
+msgid "You may also give a query a name at any time by clicking the icon. This makes it easier to find queries you care about by giving them an easier to remember name that can be used for filtering. When you share a query, the name will be shared along with it."
+msgstr ""
+
+msgid "Selected Fields"
+msgstr ""
+
+msgid "Available Fields"
+msgstr ""
+
+msgid "Add all"
+msgstr ""
+
+msgid "Remove all"
+msgstr ""
+
+msgid "Filter within category"
+msgstr ""
+
+msgid "Default Visits"
+msgstr ""
+
+msgid "Sync with selected fields"
+msgstr ""
+
+msgid "Select a field"
+msgstr ""
+
+msgid "Select a category"
+msgstr ""
+
+msgid "Invalid response"
+msgstr ""