lint

Author: Saket Hatwar

modules/dataquery/jsx/querytree.tsx

@@ -40,6 +40,7 @@ function alternateColour(c: string): string {
  * @param {object} props.mapModuleName - Function to map the backend module name to a user friendly name
  * @param {object} props.mapCategoryName - Function to map the backend category name to a user friendly name
  * @param {object} props.fulldictionary - The dictionary of all modules that have been loaded
+ * @param props.setDeleteItemIndex
  * @returns {React.ReactElement} - the react element
  */
 function QueryTree(props: {
@@ -206,7 +207,8 @@ function QueryTree(props: {
           marginLeft: 10,
         }}></i>
       <div style={{alignSelf: 'center'}}>
-        {t('Group only has 1 item. A group with only 1 item is equivalent to not having the group.', {ns: 'dataquery'})}
+        {t('Group only has 1 item. A group with only 1 item is equivalent'
+          +' to not having the group.', {ns: 'dataquery'})}
       </div>
     </div>;
     break;
@@ -269,15 +271,17 @@ function QueryTree(props: {
           <div style={{...props.buttonGroupStyle, width: '100%'}}>
             <div style={{margin: 5}}>
               <ButtonElement
-                label={t('Add "{{operator}}" condition to group', {ns: 'dataquery', operator: props.items.operator})}
+                label={t('Add "{{operator}}" condition to group', {ns: 'dataquery',
+                  operator: props.items.operator})}
                 onUserInput={newItemClick}
                 style={props.buttonStyle}
                 columnSize='col-sm-12'
               />
             </div>
             <div style={{margin: 5}}>
               <ButtonElement
-                label={t('New "{{antiOperator}}" subgroup', {ns: 'dataquery', antiOperator})}
+                label={t('New "{{antiOperator}}" subgroup', {ns: 'dataquery',
+                  antiOperator})}
                 onUserInput={newGroupClick}
                 style={props.buttonStyle}
                 columnSize='col-sm-12'

modules/dataquery/jsx/viewdata.tsx

@@ -120,30 +120,37 @@ function ProgressBar(props: {type: string, value: number, max: number}) {
       return <h2>{t('Query not yet run', {ns: 'dataquery'})}</h2>;
     }
     return (<div>
-      <label htmlFor="loadingprogress">{t('Loading data:', {ns: 'dataquery'})}</label>
+      <label htmlFor="loadingprogress">{t('Loading data:',
+        {ns: 'dataquery'})}</label>
       <progress id="loadingprogress"
         value={props.value} max={props.max}>
-        {t('{{value}} of {{max}} candidates', {ns: 'dataquery', value: props.value, max: props.max})}
+        {t('{{value}} of {{max}} candidates',
+          {ns: 'dataquery', value: props.value, max: props.max})}
       </progress>
     </div>);
   case 'headers':
     return (<div>
-      <label htmlFor="loadingprogress">{t('Organizing headers:', {ns: 'dataquery'})}</label>
+      <label htmlFor="loadingprogress">{t('Organizing headers:',
+        {ns: 'dataquery'})}</label>
       <progress id="loadingprogress"
         value={props.value} max={props.max}>
-        {t('{{value}} of {{max}} columns', {ns: 'dataquery', value: props.value, max: props.max})}
+        {t('{{value}} of {{max}} columns', {ns: 'dataquery',
+          value: props.value, max: props.max})}
       </progress>
     </div>);
   case 'dataorganization':
     return (<div>
-      <label htmlFor="loadingprogress">{t('Organizing data:', {ns: 'dataquery'})}</label>
+      <label htmlFor="loadingprogress">{t('Organizing data:',
+        {ns: 'dataquery'})}</label>
       <progress id="loadingprogress"
         value={props.value} max={props.max}>
-        {t('{{value}} of {{max}} columns', {ns: 'dataquery', value: props.value, max: props.max})}
+        {t('{{value}} of {{max}} columns', {ns: 'dataquery',
+          value: props.value, max: props.max})}
       </progress>
     </div>);
   }
-  return <h2>{t('Invalid progress type: {{type}}', {ns: 'dataquery', type: props.type})}</h2>;
+  return <h2>{t('Invalid progress type: {{type}}', {ns: 'dataquery',
+    type: props.type})}</h2>;
 }
 
 type RunQueryType = {
@@ -855,7 +862,8 @@ function organizedFormatter(
           return <TableCell data={cell} />;
         default:
           return (<td>
-            <i>{t('(Internal Error. Unhandled cardinality: {{cardinality}})', {ns: 'dataquery', cardinality: fielddict.cardinality})}</i>
+            <i>{t('(Internal Error. Unhandled cardinality: {{cardinality}})',
+              {ns: 'dataquery', cardinality: fielddict.cardinality})}</i>
           </td>);
         }
       }

modules/dataquery/jsx/welcome.adminquerymodal.tsx

@@ -42,15 +42,17 @@ function AdminQueryModal(props: {
       if (queryName.trim() == '') {
         swal.fire({
           type: 'error',
-          text: t('Must provide a query name to pin query as.', {ns: 'dataquery'}),
+          text: t('Must provide a query name to pin query as.',
+            {ns: 'dataquery'}),
         });
         reject();
         return;
       }
       if (!topQuery && !dashboardQuery && !loginQuery) {
         swal.fire({
           type: 'error',
-          text: t('Must pin as study query, to dashboard, or to the login page.', {ns: 'dataquery'}),
+          text: t('Must pin as study query, to dashboard, or to the '
+            +'login page.', {ns: 'dataquery'}),
         });
         reject();
         return;

modules/dataquery/jsx/welcome.tsx

@@ -18,7 +18,7 @@ import i18n from 'I18nSetup';
 import {withTranslation} from 'react-i18next';
 import {createRoot} from 'react-dom/client';
 
-const hiStrings = require('../locale/hi/LC_MESSAGES/dataquery.json');
+import hiStrings from '../locale/hi/LC_MESSAGES/dataquery.json';
 
 /**
  * Return the welcome tab for the DQT
@@ -491,19 +491,21 @@ function QueryList(props: {
       });
   }
   const starFilter = props.starQuery ?
-    <CheckboxElement name='onlystar' label={t('Starred Only', {ns: 'dataquery'})}
-      value={onlyStarred}
-      offset=''
-      onUserInput={
-        (name: string, value: boolean) => setOnlyStarred(value)
-      }/> : <span />;
+    <CheckboxElement name='onlystar' label={t('Starred Only',
+      {ns: 'dataquery'})}
+    value={onlyStarred}
+    offset=''
+    onUserInput={
+      (name: string, value: boolean) => setOnlyStarred(value)
+    }/> : <span />;
   const shareFilter = props.shareQuery ?
-    <CheckboxElement name='onlyshare' label={t('Shared Only', {ns: 'dataquery'})}
-      value={onlyShared}
-      offset=''
-      onUserInput={
-        (name: string, value: boolean) => setOnlyShared(value)
-      }/>
+    <CheckboxElement name='onlyshare' label={t('Shared Only',
+      {ns: 'dataquery'})}
+    value={onlyShared}
+    offset=''
+    onUserInput={
+      (name: string, value: boolean) => setOnlyShared(value)
+    }/>
     : <span />;
     // Use whether shareQuery prop is defined as proxy
     // to determine if this is a shared query or a recent
@@ -538,20 +540,22 @@ function QueryList(props: {
       }}>
         {starFilter}
         {shareFilter}
-        <CheckboxElement name='onlynamed' label={t('Named Only', {ns: 'dataquery'})}
-          value={onlyNamed}
-          offset=''
-          onUserInput={
-            (name: string, value: boolean) => setOnlyNamed(value)
-          }/>
+        <CheckboxElement name='onlynamed' label={t('Named Only',
+          {ns: 'dataquery'})}
+        value={onlyNamed}
+        offset=''
+        onUserInput={
+          (name: string, value: boolean) => setOnlyNamed(value)
+        }/>
         {duplicateFilter}
-        <CheckboxElement name='fullquery' label={t('Collapse queries', {ns: 'dataquery'})}
-          value={!fullQuery}
-          offset=''
-          onUserInput={
-            (name: string, value: boolean) =>
-              setFullQuery(!value)
-          }/>
+        <CheckboxElement name='fullquery' label={t('Collapse queries',
+          {ns: 'dataquery'})}
+        value={!fullQuery}
+        offset=''
+        onUserInput={
+          (name: string, value: boolean) =>
+            setFullQuery(!value)
+        }/>
       </div>
     </div>
     <Pager>
@@ -660,15 +664,15 @@ function Pager(props: {
       onChangePage={setPageNum}
       RowsPerPage={rowsPerPage}
       Active={pageNum}
-      //label={t('Page', {ns: 'dataquery'})}
+      // label={t('Page', {ns: 'dataquery'})}
     />
     {displayedRange}
     <PaginationLinks
       Total={props.children.length}
       onChangePage={setPageNum}
       RowsPerPage={rowsPerPage}
       Active={pageNum}
-      //label={t('Page', {ns: 'dataquery'})}
+      // label={t('Page', {ns: 'dataquery'})}
     />
   </div>;
 }
@@ -830,9 +834,11 @@ function SingleQueryDisplay(props: {
     let desc = query.Name
       ? <span>
         <b>{query.Name}</b>
-             &nbsp;<i>{t('(Run at {{runTime}})', {ns: 'dataquery', runTime: query.RunTime})}</i>
+             &nbsp;<i>{t('(Run at {{runTime}})', {ns: 'dataquery',
+          runTime: query.RunTime})}</i>
       </span>
-      : <i>{t('You ran this query at {{runTime}}', {ns: 'dataquery', runTime: query.RunTime})}</i>;
+      : <i>{t('You ran this query at {{runTime}}', {ns: 'dataquery',
+        runTime: query.RunTime})}</i>;
     if (!props.includeRuns) {
       desc = query.Name
         ? <span>
@@ -853,9 +859,11 @@ function SingleQueryDisplay(props: {
     const desc = query.Name
       ? <span>
         <b>{query.Name}</b>
-                &nbsp;<i>{t('(Shared by {{sharedBy}})', {ns: 'dataquery', sharedBy: query.SharedBy.join(', ')})}</i>
+                &nbsp;<i>{t('(Shared by {{sharedBy}})', {ns: 'dataquery',
+          sharedBy: query.SharedBy.join(', ')})}</i>
       </span>
-      : <i>{t('Query shared by {{sharedBy}}', {ns: 'dataquery', sharedBy: query.SharedBy.join(', ')})}</i>;
+      : <i>{t('Query shared by {{sharedBy}}', {ns: 'dataquery',
+        sharedBy: query.SharedBy.join(', ')})}</i>;
     msg = <div>{desc}
              &nbsp;{loadIcon}{pinIcon}
     </div>;
@@ -1075,21 +1083,41 @@ function IntroductionMessage(props: {
   const {t} = useTranslation('dataquery');
   const studyQueriesParagraph = props.hasStudyQueries ? (
     <p>
-      {t('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.', {ns: 'dataquery'})}
+      {t('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.',
+      {ns: 'dataquery'})}
     </p>
   ) : '';
   return (
     <div>
-      <p>{t('The data query tool allows you to query data within LORIS. There are three steps to defining a query:', {ns: 'dataquery'})}</p>
+      <p>{t('The data query tool allows you to query data within LORIS. '
+        +'There are three steps to defining a query:', {ns: 'dataquery'})}</p>
       <ol>
-        <li>{t("First, you must select the fields that you're interested in on the Define Fields page.", {ns: 'dataquery'})}</li>
-        <li>{t("Next, you can optionally define filters on the Define Filters page to restrict the population that is returned.", {ns: 'dataquery'})}</li>
-        <li>{t("Finally, you view your query results on the View Data page", {ns: 'dataquery'})}</li>
+        <li>{t('First, you must select the fields that you\'re interested in'
+          +' on the Define Fields page.', {ns: 'dataquery'})}</li>
+        <li>{t('Next, you can optionally define filters on the Define '
+          +'Filters page to restrict the population that is returned.',
+        {ns: 'dataquery'})}</li>
+        <li>{t('Finally, you view your query results on the View Data page',
+          {ns: 'dataquery'})}</li>
       </ol>
-      <p>{t('The Next Steps on the bottom right of your screen always the context-sensitive next steps that you can do to build your query.', {ns: 'dataquery'})}</p>
-      <p>{t("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.", {ns: 'dataquery'})}</p>
-      <p>{t("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.", {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 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>
+      <p>{t('The Next Steps on the bottom right of your screen always the '
+        +'context-sensitive next steps that you can do to build your query.',
+      {ns: 'dataquery'})}</p>
+      <p>{t('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.', {ns: 'dataquery'})}</p>
+      <p>{t('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.', {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'
+        +' 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>
       {studyQueriesParagraph}
       <div style={{
         display: 'flex',
@@ -1107,14 +1135,14 @@ function IntroductionMessage(props: {
 
 window.addEventListener('load', () => {
   i18n.addResourceBundle('hi', 'dataquery', hiStrings);
-  const TranslatedWelcome = withTranslation(['dataquery','loris'])(Welcome);
+  const TranslatedWelcome = withTranslation(['dataquery', 'loris'])(Welcome);
 
   const container = document.getElementById('lorisworkspace');
   if (container) {
     const root = createRoot(container);
     root.render(<TranslatedWelcome />);
   } else {
-    console.error("Element with id 'lorisworkspace' not found in DOM");
+    console.error('Element with id \'lorisworkspace\' not found in DOM');
   }
 });
 

tsconfig.json

@@ -16,6 +16,7 @@
     "lib": [
       "es6", "dom", "es2017"
     ],
-    "strict" : true
+    "strict" : true,
+    "resolveJsonModule": true
   }
 }