From 45a239691327e8567a860489dd2fc4d2ceb71664 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 15:38:15 +0000
Subject: [PATCH 01/10] select field changes

---
 jsx/Form.d.ts                                 |   1 +
 jsx/Form.js                                   |  16 +-
 .../jsx/components/filterableselectgroup.tsx  |  59 ++++-
 modules/dataquery/jsx/definefields.tsx        | 234 +++++++++++-------
 4 files changed, 207 insertions(+), 103 deletions(-)

diff --git a/jsx/Form.d.ts b/jsx/Form.d.ts
index 8c9ecd596c1..babd4a78d06 100644
--- a/jsx/Form.d.ts
+++ b/jsx/Form.d.ts
@@ -162,6 +162,7 @@ type checkboxProps = {
     required?: boolean
     errorMessage?: string
     elementClass?: string
+    style?: object
     onUserInput?: (name: string, value: any) => void
 }
 /**
diff --git a/jsx/Form.js b/jsx/Form.js
index 8e9340aadc8..2137c1bfa86 100644
--- a/jsx/Form.js
+++ b/jsx/Form.js
@@ -2178,7 +2178,9 @@ export class CheckboxElement extends React.Component {
     let elementClass = this.props.class + ' ' + this.props.offset;
     const divStyle = this.props.class === 'checkbox-inline'
       ? {paddingRight: '5px'}
-      : {paddingRight: '5px', display: 'inline-block'};
+      : this.props.class === 'checkbox-flex' ?
+        {paddingRight: '5px', display: 'flex'}
+        : {paddingRight: '5px', display: 'inline-block'};
 
     // Add required asterix
     if (this.props.required) {
@@ -2192,9 +2194,12 @@ export class CheckboxElement extends React.Component {
     }
 
     return (
-      <div className={elementClass}>
+      <div className={elementClass} style={this.props.style}>
         <div className="col-sm-12">
-          <label htmlFor={this.props.id}>
+          <label htmlFor={this.props.id}
+            style={
+              this.props.class === 'checkbox-flex'
+                ? {display: 'flex'} : {}}>
             <div style={divStyle}>
               <input
                 type="checkbox"
@@ -2204,6 +2209,9 @@ export class CheckboxElement extends React.Component {
                 required={this.props.required}
                 disabled={this.props.disabled}
                 onChange={this.handleChange}
+                style={
+                  this.props.class === 'checkbox-flex' ? {marginTop: '0'} : {}
+                }
               />
             </div>
             {errorMessage}
@@ -2228,6 +2236,7 @@ CheckboxElement.propTypes = {
   errorMessage: PropTypes.string,
   elementClass: PropTypes.string,
   onUserInput: PropTypes.func,
+  style: PropTypes.object,
 };
 
 CheckboxElement.defaultProps = {
@@ -2238,6 +2247,7 @@ CheckboxElement.defaultProps = {
   offset: 'col-sm-offset-3',
   class: 'checkbox-inline',
   elementClass: 'checkbox-inline col-sm-offset-3',
+  style: {},
   onUserInput: function() {
     console.warn('onUserInput() callback is not set');
   },
diff --git a/modules/dataquery/jsx/components/filterableselectgroup.tsx b/modules/dataquery/jsx/components/filterableselectgroup.tsx
index 49d937e76c6..5eed27c579f 100644
--- a/modules/dataquery/jsx/components/filterableselectgroup.tsx
+++ b/modules/dataquery/jsx/components/filterableselectgroup.tsx
@@ -19,6 +19,7 @@ type SelectGroup = {
  * @param {string?} props.placeholder - An optional placeholder value when no elements are selected
  * @param {object} props.groups - Groups to select the dropdown into
  * @param {function} props.mapGroupName - A mapper from backend to frontend name for groups
+ * @param {string?} props.label - Select input label
  * @returns {React.ReactElement} - The element
  */
 function FilterableSelectGroup(props: {
@@ -26,6 +27,7 @@ function FilterableSelectGroup(props: {
     placeholder?: string,
     groups: object,
     mapGroupName?: (module: string) => string,
+    label?: string,
 }) {
   const groups: SelectGroup[] = [];
   const placeholder = props.placeholder || 'Select a category';
@@ -70,19 +72,50 @@ function FilterableSelectGroup(props: {
   };
   return (
     <div>
-      <Select options={groups} onChange={selected}
-        menuPortalTarget={document.body}
-        styles={{menuPortal:
-                    /**
-                     * Add a z-index to ensure the element stays visible
-                     *
-                     * @param {object} base - the base CSS
-                     * @returns {object} - the new CSS with z-index added
-                     */
-                    (base) => ({...base, zIndex: 9999})}
-        }
-        placeholder={placeholder}
-      />
+      {props.label ?
+        <label style={{width: '100%', fontSize: '24px'}}>
+          {props.label}
+          <Select options={groups} onChange={selected}
+            menuPortalTarget={document.body}
+            styles={{menuPortal:
+                        /**
+                         * Add a z-index to ensure the element stays visible
+                         *
+                         * @param {object} base - the base CSS
+                         * @returns {object} - the new CSS with z-index added
+                         */
+                        (base) => ({...base, zIndex: 9999}),
+            valueContainer:
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({
+                              ...base,
+                              fontSize: '14px',
+                              fontWeight: 400,
+                            }),
+            }}
+            placeholder={placeholder}
+          />
+        </label>
+        :
+        <Select options={groups} onChange={selected}
+          menuPortalTarget={document.body}
+          styles={{menuPortal:
+                      /**
+                       * Add a z-index to ensure the element stays visible
+                       *
+                       * @param {object} base - the base CSS
+                       * @returns {object} - the new CSS with z-index added
+                       */
+                      (base) => ({...base, zIndex: 9999})}
+          }
+          placeholder={placeholder}
+        />
+      }
     </div>
   );
 }
diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 0dbb11cb9d5..ed03569dcf2 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -93,7 +93,7 @@ function QueryField(props: {
 
     if (props.selected) {
       visits = <div onClick={(e) => e.stopPropagation()}>
-        <h4>Visits</h4>
+        <h4 style={{fontSize: '16px'}}>Visits</h4>
         <Select options={selectOptions.map((visit: string): VisitOption => {
           return {value: visit, label: visit};
         })
@@ -108,13 +108,25 @@ function QueryField(props: {
         menuPortalTarget={document.body}
         styles={
           {menuPortal:
-                        /**
-                         * Adds appropriate zIndex to the react select's base CSS
-                         *
-                         * @param {object} base - The current CSS
-                         * @returns {object} New CSS with z-index added
-                         */
-                        (base) => ({...base, zIndex: 9999}),
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({...base, zIndex: 9999}),
+          valueContainer:
+                            /**
+                             * Adds appropriate zIndex to the react select's base CSS
+                             *
+                             * @param {object} base - The current CSS
+                             * @returns {object} New CSS with z-index added
+                             */
+                            (base) => ({
+                              ...base,
+                              maxHeight: '150px',
+                              overflowY: 'auto',
+                            }),
           }
         }
         closeMenuOnSelect={false}
@@ -130,7 +142,8 @@ function QueryField(props: {
       style={{
         cursor: 'pointer',
         display: 'flex',
-        justifyContent: 'space-between',
+        flexDirection: 'column',
+        marginBottom: '4px',
       }}
       onClick={() => props.onFieldToggle(
         props.module,
@@ -139,7 +152,7 @@ function QueryField(props: {
         selectedVisits,
       )}>
       <dl>
-        <dt>{item}</dt>
+        <dt style={{fontSize: '18px'}}>{item}</dt>
         <dd>{value.description} {download}</dd>
       </dl>
       {visits}
@@ -337,73 +350,109 @@ function DefineFields(props: {
       const selectedVisits = props.defaultVisits.map((el) => {
         return {value: el, label: el};
       });
-      defaultVisits = <div style={{paddingBottom: '1em', display: 'flex'}}>
-        <h4 style={{paddingRight: '1ex'}}>Default Visits</h4>
-        <Select options={allVisits}
-          isMulti
-          onChange={props.onChangeDefaultVisits}
-          placeholder='Select Visits'
-          menuPortalTarget={document.body}
-          styles={
-            {menuPortal:
-                            /**
-                             * Adds appropriate zIndex to the react select's base CSS
-                             *
-                             * @param {object} base - The current CSS
-                             * @returns {object} New CSS with z-index added
-                             */
-                            (base) => ({...base, zIndex: 9999}),
-            }
-          }
-          value={selectedVisits}
-          closeMenuOnSelect={false}
-        />
-        <div>
-          <CheckboxElement label='Sync with selected fields'
+      defaultVisits = <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        marginBottom: '16px'}}>
+        <div style={{marginBottom: '8px'}}>
+          <CheckboxElement label='Sync visit selection across selected fields'
             name="syncVisits"
+            class="checkbox-flex"
+            offset=""
             value={syncVisits}
+            style={{}}
             onUserInput={
               (name: string, value: boolean) => setSyncVisits(value)
             } />
         </div>
+        {syncVisits && <div style={{marginBottom: '16px'}}>
+          <Select options={allVisits}
+            isMulti
+            onChange={props.onChangeDefaultVisits}
+            placeholder='Select Visits'
+            menuPortalTarget={document.body}
+            styles={
+              {menuPortal:
+                              /**
+                               * Adds appropriate zIndex to the react select's base CSS
+                               *
+                               * @param {object} base - The current CSS
+                               * @returns {object} New CSS with z-index added
+                               */
+                              (base) => ({...base, zIndex: 9999}),
+              valueContainer:
+                              /**
+                               * Adds appropriate zIndex to the react select's base CSS
+                               *
+                               * @param {object} base - The current CSS
+                               * @returns {object} New CSS with z-index added
+                               */
+                              (base) => ({
+                                ...base,
+                                maxHeight: '200px',
+                                overflowY: 'auto',
+                              }),
+              }
+            }
+            value={selectedVisits}
+            closeMenuOnSelect={false}
+          /></div>}
       </div>;
     }
 
     fieldList = (<div>
-      <div style={{display: 'flex', flexWrap: 'wrap',
-        justifyContent: 'space-between'}}>
-        <h2>{cname} fields</h2>
-        <div style={{marginTop: '1em',
+      <div style={{display: 'flex', flexDirection: 'column',
+        marginTop: '32px'}}>
+        <div style={{
           display: 'flex',
           flexWrap: 'nowrap',
           flexDirection: 'column',
         }}>
           {defaultVisits}
-          <div className="input-group">
-            <input onChange={setFilter}
-              className='form-control'
-              type="text"
-              placeholder="Filter within category"
-              aria-describedby="input-filter-addon"
-              value={activeFilter} />
-            <span className="input-group-addon">
-              <span className="glyphicon glyphicon-search"/>
-            </span>
-          </div>
-          <div style={{margin: '1ex',
+          <div style={{
+            width: '100%',
             display: 'flex',
-            flexWrap: 'wrap',
-            flexDirection: 'row',
-            justifyContent: 'space-around',
-          }}>
-            <button type="button" className="btn btn-primary"
-              onClick={addAll}>
-                            Add all
-            </button>
-            <button type="button" className="btn btn-primary"
-              onClick={removeAll}>
-                            Remove all
-            </button>
+            marginBottom: '8px',
+            alignItems: 'center',
+            justifyContent: 'space-between'}}>
+            <div className="input-group"
+              style={{width: '50%', display: 'flex'}}>
+              <input onChange={setFilter}
+                className='form-control'
+                type="text"
+                placeholder={`Search within ${cname}`}
+                aria-describedby="input-filter-addon"
+                value={activeFilter}
+                style={{borderRadius: '32px 0 0 32px'}}/>
+              <span className="input-group-addon"
+                style={{
+                  borderRadius: '0 32px 32px 0',
+                  height: '34px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  padding: '0 20px',
+                  cursor: 'pointer',
+                }}
+                id="input-filter-addon">
+                <span className="glyphicon glyphicon-search"/>
+              </span>
+            </div>
+            <div style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              flexDirection: 'row',
+              justifyContent: 'space-around',
+            }}>
+              <button type="button" className="btn btn-primary"
+                onClick={addAll}>
+                              Add all
+              </button>
+              <button type="button" className="btn btn-primary"
+                onClick={removeAll}>
+                              Remove all
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -413,37 +462,41 @@ function DefineFields(props: {
 
   return (
     <div>
-      <div style={{display: 'flex', flexWrap: 'nowrap'}}>
-        <div style={{width: '80vw', padding: '1em'}}>
-          <h1>Available Fields</h1>
+      <div style={{display: 'flex', gap: '1rem', width: '100%'}}>
+        <div style={{width: 'calc(70% - 1rem/2)', padding: '1em'}}>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
+            label="Select a Field"
+            placeholder='Available options'
           />
           {fieldList}
         </div>
         <div style={{
-          width: '20vw',
           padding: '1em',
           position: 'sticky',
           top: 0,
-          maxHeight: '90vh',
-          overflow: 'auto',
+          width: 'calc(30% - 1rem/2)',
         }}>
-          <div>
-            <div style={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'flex-end',
-              marginBottom: '1em',
-            }}>
-              <h2>Selected Fields</h2>
-              <div>
-                <button type="button" className="btn btn-primary"
-                  style={{marginBottom: 7}}
-                  onClick={props.onClearAll}>Clear</button>
-              </div>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'flex-end',
+            marginBottom: '1em',
+            flexWrap: 'wrap',
+          }}>
+            <h2>Field Selection</h2>
+            <div>
+              <button type="button" className="btn btn-primary"
+                style={{marginBottom: 7}}
+                onClick={props.onClearAll}>Clear</button>
             </div>
+          </div>
+          <div style={{
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            maxHeight: '80vh',
+          }}>
             <SelectedFieldList
               selected={props.selected}
               removeField={props.removeField}
@@ -527,6 +580,7 @@ function SelectedFieldList(props: {
     const style: React.CSSProperties = {display: 'flex',
       flexWrap: 'nowrap' as const,
       cursor: 'grab',
+      gap: '4px',
       justifyContent: 'space-between'};
     if (removingIdx === i) {
       style.textDecoration = 'line-through' as const;
@@ -543,6 +597,7 @@ function SelectedFieldList(props: {
         fontStyle: 'italic',
         color: '#aaa',
         fontSize: '0.7em',
+        wordBreak: 'break-word' as const,
         marginLeft: 20,
       };
       fieldvisits = <dd style={style}>{item.visits.join(', ')}</dd>;
@@ -572,13 +627,17 @@ function SelectedFieldList(props: {
       onDrop={() => moveSelected()}
     >
       <div>
-        <dt>{item.field}</dt>
-        <dd style={{marginLeft: 20}}>{getDictionaryDescription(
-          item.module,
-          item.category,
-          item.field,
-          props.fulldictionary,
-        )}</dd>
+        <dt style={{wordBreak: 'break-word'}}>{item.field}</dt>
+        <dd style={{
+          marginLeft: 20,
+          wordBreak: 'break-word',
+        }}>
+          {getDictionaryDescription(
+            item.module,
+            item.category,
+            item.field,
+            props.fulldictionary
+          )}</dd>
         {fieldvisits}
       </div>
       <div
@@ -617,3 +676,4 @@ function SelectedFieldList(props: {
 
 
 export default DefineFields;
+

From 66e2823d9629a7cbd5b3e1b6b40e8167fc8fd038 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 15:59:39 +0000
Subject: [PATCH 02/10] reverted changes from other PR

---
 modules/dataquery/jsx/definefields.tsx | 44 +++++++++++---------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index ed03569dcf2..30c502b6416 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -462,41 +462,37 @@ function DefineFields(props: {
 
   return (
     <div>
-      <div style={{display: 'flex', gap: '1rem', width: '100%'}}>
-        <div style={{width: 'calc(70% - 1rem/2)', padding: '1em'}}>
+      <div style={{display: 'flex', flexWrap: 'nowrap'}}>
+        <div style={{width: '80vw', padding: '1em'}}>
+          <h1>Available Fields</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
-            label="Select a Field"
-            placeholder='Available options'
           />
           {fieldList}
         </div>
         <div style={{
+          width: '20vw',
           padding: '1em',
           position: 'sticky',
           top: 0,
-          width: 'calc(30% - 1rem/2)',
+          maxHeight: '90vh',
+          overflow: 'auto',
         }}>
-          <div style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'flex-end',
-            marginBottom: '1em',
-            flexWrap: 'wrap',
-          }}>
-            <h2>Field Selection</h2>
-            <div>
-              <button type="button" className="btn btn-primary"
-                style={{marginBottom: 7}}
-                onClick={props.onClearAll}>Clear</button>
+          <div>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'flex-end',
+              marginBottom: '1em',
+            }}>
+              <h2>Selected Fields</h2>
+              <div>
+                <button type="button" className="btn btn-primary"
+                  style={{marginBottom: 7}}
+                  onClick={props.onClearAll}>Clear</button>
+              </div>
             </div>
-          </div>
-          <div style={{
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            maxHeight: '80vh',
-          }}>
             <SelectedFieldList
               selected={props.selected}
               removeField={props.removeField}
@@ -580,7 +576,6 @@ function SelectedFieldList(props: {
     const style: React.CSSProperties = {display: 'flex',
       flexWrap: 'nowrap' as const,
       cursor: 'grab',
-      gap: '4px',
       justifyContent: 'space-between'};
     if (removingIdx === i) {
       style.textDecoration = 'line-through' as const;
@@ -597,7 +592,6 @@ function SelectedFieldList(props: {
         fontStyle: 'italic',
         color: '#aaa',
         fontSize: '0.7em',
-        wordBreak: 'break-word' as const,
         marginLeft: 20,
       };
       fieldvisits = <dd style={style}>{item.visits.join(', ')}</dd>;

From 32e361668836f221c3b58c7a4955b545653e3a74 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 16:14:02 +0000
Subject: [PATCH 03/10] removed changes from other PR

---
 modules/dataquery/jsx/definefields.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 30c502b6416..5b0b15c5a9c 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -621,17 +621,13 @@ function SelectedFieldList(props: {
       onDrop={() => moveSelected()}
     >
       <div>
-        <dt style={{wordBreak: 'break-word'}}>{item.field}</dt>
-        <dd style={{
-          marginLeft: 20,
-          wordBreak: 'break-word',
-        }}>
-          {getDictionaryDescription(
-            item.module,
-            item.category,
-            item.field,
-            props.fulldictionary
-          )}</dd>
+        <dt>{item.field}</dt>
+        <dd style={{marginLeft: 20}}>{getDictionaryDescription(
+          item.module,
+          item.category,
+          item.field,
+          props.fulldictionary,
+        )}</dd>
         {fieldvisits}
       </div>
       <div
@@ -670,4 +666,3 @@ function SelectedFieldList(props: {
 
 
 export default DefineFields;
-

From e634454f4077990749e542c48d5a7cd17e334ff8 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 16:21:16 +0000
Subject: [PATCH 04/10] visit list adjustment

---
 modules/dataquery/jsx/definefields.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 5b0b15c5a9c..a7dc4067ceb 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -152,8 +152,10 @@ function QueryField(props: {
         selectedVisits,
       )}>
       <dl>
-        <dt style={{fontSize: '18px'}}>{item}</dt>
-        <dd>{value.description} {download}</dd>
+        <dt style={{fontSize: '18px', wordBreak: 'break-word'}}>{item}</dt>
+        <dd
+          style={{wordBreak: 'break-word'}}
+        >{value.description} {download}</dd>
       </dl>
       {visits}
     </div>);

From 2293b0b52219a8bd0706b567d1523946f95f55e0 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 16:22:21 +0000
Subject: [PATCH 05/10] label adjustments

---
 modules/dataquery/jsx/definefields.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index a7dc4067ceb..b01fdaa867a 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -422,7 +422,7 @@ function DefineFields(props: {
               <input onChange={setFilter}
                 className='form-control'
                 type="text"
-                placeholder={`Search within ${cname}`}
+                placeholder={`Filter within ${cname}`}
                 aria-describedby="input-filter-addon"
                 value={activeFilter}
                 style={{borderRadius: '32px 0 0 32px'}}/>

From 3a0f907552c601140c4d95c09f64ed0685fef392 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 19:07:24 +0000
Subject: [PATCH 06/10] applied change to select field label

---
 modules/dataquery/jsx/definefields.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index b01fdaa867a..1c6e740599d 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -466,10 +466,11 @@ function DefineFields(props: {
     <div>
       <div style={{display: 'flex', flexWrap: 'nowrap'}}>
         <div style={{width: '80vw', padding: '1em'}}>
-          <h1>Available Fields</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
+            label="Select a Field"
+            placeholder='Available options'
           />
           {fieldList}
         </div>

From c226746dcd73fa4610d1607558d1ce568d68c3d7 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 8 Dec 2025 14:34:12 +0000
Subject: [PATCH 07/10] updated strings in language files

---
 modules/dataquery/jsx/definefields.tsx               |  9 +++------
 modules/dataquery/locale/dataquery.pot               |  7 +++++--
 modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po | 10 ++++++++--
 modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po | 10 ++++++++--
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index dfdde749c7d..06f0bcd4223 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -361,9 +361,8 @@ function DefineFields(props: {
         marginBottom: '16px'}}>
         <div style={{marginBottom: '8px'}}>
           <CheckboxElement
-            label={t('Sync with selected fields',
+            label={t('Sync visit selection across selected fields',
               {ns: 'dataquery'})}
-            // label='Sync visit selection across selected fields'
             name="syncVisits"
             class="checkbox-flex"
             offset=""
@@ -430,7 +429,6 @@ function DefineFields(props: {
                 className='form-control'
                 type="text"
                 placeholder={t(`Filter within ${cname}`, {ns: 'dataquery'})}
-                // placeholder={t('Filter within category', {ns: 'dataquery'})}
                 aria-describedby="input-filter-addon"
                 value={activeFilter}
                 style={{borderRadius: '32px 0 0 32px'}}/>
@@ -474,12 +472,11 @@ function DefineFields(props: {
     <div>
       <div style={{display: 'flex', flexWrap: 'nowrap'}}>
         <div style={{width: '80vw', padding: '1em'}}>
-          {/* <h1>{t('Available Fields', {ns: 'dataquery'})}</h1> */}
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
-            label="Select a Field"
-            placeholder='Available options'
+            label={t('Select a field', {ns: 'dataquery'})}
+            placeholder={t('Available options', {ns: 'dataquery'})}
           />
           {fieldList}
         </div>
diff --git a/modules/dataquery/locale/dataquery.pot b/modules/dataquery/locale/dataquery.pot
index 165db07949d..abaa1ee2df8 100644
--- a/modules/dataquery/locale/dataquery.pot
+++ b/modules/dataquery/locale/dataquery.pot
@@ -509,19 +509,22 @@ msgstr ""
 msgid "Available Fields"
 msgstr ""
 
+msgid "Available options"
+msgstr ""
+
 msgid "Add all"
 msgstr ""
 
 msgid "Remove all"
 msgstr ""
 
-msgid "Filter within category"
+msgid "Filter within ${cname}"
 msgstr ""
 
 msgid "Default Visits"
 msgstr ""
 
-msgid "Sync with selected fields"
+msgid "Sync visit selection across selected fields"
 msgstr ""
 
 msgid "Select a category"
diff --git a/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po b/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
index 11b88ab4adf..a77274d6abb 100644
--- a/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+++ b/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
@@ -508,19 +508,25 @@ msgstr "चयनित फ़ील्ड"
 msgid "Available Fields"
 msgstr "उपलब्ध फ़ील्ड"
 
+msgid "Available options"
+# NEEDS TO BE DEFINED
+msgstr ""
+
 msgid "Add all"
 msgstr "सभी जोड़ें"
 
 msgid "Remove all"
 msgstr "सभी हटाएँ"
 
-msgid "Filter within category"
+msgid "Filter within ${cname}"
+# NEEDS UPDATE
 msgstr "श्रेणी के भीतर फ़िल्टर करें"
 
 msgid "Default Visits"
 msgstr "डिफ़ॉल्ट विज़िट"
 
-msgid "Sync with selected fields"
+msgid "Sync visit selection across selected fields"
+# NEEDS UPDATE
 msgstr "चयनित फ़ील्ड के साथ समन्वय करें"
 
 msgid "Select a category"
diff --git a/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po b/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
index d1374b635aa..8371b66c074 100644
--- a/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+++ b/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
@@ -504,19 +504,25 @@ msgstr "選択したフィールド"
 msgid "Available Fields"
 msgstr "利用可能なフィールド"
 
+msgid "Available options"
+# NEEDS TO BE DEFINED
+msgstr ""
+
 msgid "Add all"
 msgstr "すべて追加"
 
 msgid "Remove all"
 msgstr "すべて削除"
 
-msgid "Filter within category"
+msgid "Filter within ${cname}"
+# NEEDS UPDATE
 msgstr "カテゴリ内でフィルタリング"
 
 msgid "Default Visits"
 msgstr "デフォルトの訪問"
 
-msgid "Sync with selected fields"
+msgid "Sync visit selection across selected fields"
+# NEEDS UPDATE
 msgstr "選択したフィールドと同期"
 
 msgid "Select a field"

From 953eadf6862bb9f7327463f1fa7e1a0d68d4fdbb Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 8 Dec 2025 14:49:00 +0000
Subject: [PATCH 08/10] changed comment

---
 modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po | 6 +++---
 modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po b/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
index a77274d6abb..7f9988ff621 100644
--- a/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+++ b/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
@@ -508,8 +508,8 @@ msgstr "चयनित फ़ील्ड"
 msgid "Available Fields"
 msgstr "उपलब्ध फ़ील्ड"
 
-msgid "Available options"
 # NEEDS TO BE DEFINED
+msgid "Available options"
 msgstr ""
 
 msgid "Add all"
@@ -518,15 +518,15 @@ msgstr "सभी जोड़ें"
 msgid "Remove all"
 msgstr "सभी हटाएँ"
 
-msgid "Filter within ${cname}"
 # NEEDS UPDATE
+msgid "Filter within ${cname}"
 msgstr "श्रेणी के भीतर फ़िल्टर करें"
 
 msgid "Default Visits"
 msgstr "डिफ़ॉल्ट विज़िट"
 
-msgid "Sync visit selection across selected fields"
 # NEEDS UPDATE
+msgid "Sync visit selection across selected fields"
 msgstr "चयनित फ़ील्ड के साथ समन्वय करें"
 
 msgid "Select a category"
diff --git a/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po b/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
index 8371b66c074..1a0122984f1 100644
--- a/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+++ b/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
@@ -504,8 +504,8 @@ msgstr "選択したフィールド"
 msgid "Available Fields"
 msgstr "利用可能なフィールド"
 
-msgid "Available options"
 # NEEDS TO BE DEFINED
+msgid "Available options"
 msgstr ""
 
 msgid "Add all"
@@ -514,15 +514,15 @@ msgstr "すべて追加"
 msgid "Remove all"
 msgstr "すべて削除"
 
-msgid "Filter within ${cname}"
 # NEEDS UPDATE
+msgid "Filter within ${cname}"
 msgstr "カテゴリ内でフィルタリング"
 
 msgid "Default Visits"
 msgstr "デフォルトの訪問"
 
-msgid "Sync visit selection across selected fields"
 # NEEDS UPDATE
+msgid "Sync visit selection across selected fields"
 msgstr "選択したフィールドと同期"
 
 msgid "Select a field"

From 6eb4bad8a3cde70388a657849c9b64c96ff4f718 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 8 Dec 2025 15:00:24 +0000
Subject: [PATCH 09/10] re used existing string

---
 modules/dataquery/jsx/definefields.tsx               | 2 +-
 modules/dataquery/locale/dataquery.pot               | 3 ---
 modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po | 4 ----
 modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po | 4 ----
 4 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 06f0bcd4223..75d29f0ae2b 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -476,7 +476,7 @@ function DefineFields(props: {
             mapGroupName={(key) => props.allCategories.modules[key]}
             onChange={props.onCategoryChange}
             label={t('Select a field', {ns: 'dataquery'})}
-            placeholder={t('Available options', {ns: 'dataquery'})}
+            placeholder={t('Available Fields', {ns: 'dataquery'})}
           />
           {fieldList}
         </div>
diff --git a/modules/dataquery/locale/dataquery.pot b/modules/dataquery/locale/dataquery.pot
index abaa1ee2df8..88ee5410935 100644
--- a/modules/dataquery/locale/dataquery.pot
+++ b/modules/dataquery/locale/dataquery.pot
@@ -509,9 +509,6 @@ msgstr ""
 msgid "Available Fields"
 msgstr ""
 
-msgid "Available options"
-msgstr ""
-
 msgid "Add all"
 msgstr ""
 
diff --git a/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po b/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
index 7f9988ff621..bf9db758dd0 100644
--- a/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
+++ b/modules/dataquery/locale/hi/LC_MESSAGES/dataquery.po
@@ -508,10 +508,6 @@ msgstr "चयनित फ़ील्ड"
 msgid "Available Fields"
 msgstr "उपलब्ध फ़ील्ड"
 
-# NEEDS TO BE DEFINED
-msgid "Available options"
-msgstr ""
-
 msgid "Add all"
 msgstr "सभी जोड़ें"
 
diff --git a/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po b/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
index 1a0122984f1..08443aeedda 100644
--- a/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
+++ b/modules/dataquery/locale/ja/LC_MESSAGES/dataquery.po
@@ -504,10 +504,6 @@ msgstr "選択したフィールド"
 msgid "Available Fields"
 msgstr "利用可能なフィールド"
 
-# NEEDS TO BE DEFINED
-msgid "Available options"
-msgstr ""
-
 msgid "Add all"
 msgstr "すべて追加"
 

From 494ccfa23daf912a3458b3e03385e289658c719e Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 8 Dec 2025 16:21:58 +0000
Subject: [PATCH 10/10] updated filter select

---
 .../jsx/components/filterableselectgroup.tsx  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/modules/dataquery/jsx/components/filterableselectgroup.tsx b/modules/dataquery/jsx/components/filterableselectgroup.tsx
index c551a833be1..82266fdac53 100644
--- a/modules/dataquery/jsx/components/filterableselectgroup.tsx
+++ b/modules/dataquery/jsx/components/filterableselectgroup.tsx
@@ -75,7 +75,7 @@ function FilterableSelectGroup(props: {
   };
   return (
     <div>
-      {props.label ?
+      {props?.label ?
         <label style={{width: '100%', fontSize: '24px'}}>
           {props.label}
           <Select options={groups} onChange={selected}
@@ -105,22 +105,22 @@ function FilterableSelectGroup(props: {
             placeholder={placeholder}
           />
         </label>
-        :
-        <Select options={groups} onChange={selected}
-          noOptionsMessage={() => t('No options', {ns: 'loris'})}
-          menuPortalTarget={document.body}
-          styles={{menuPortal:
-                      /**
-                       * Add a z-index to ensure the element stays visible
-                       *
-                       * @param {object} base - the base CSS
-                       * @returns {object} - the new CSS with z-index added
-                       */
-                      (base) => ({...base, zIndex: 9999})}
-          }
-          placeholder={placeholder}
-        />
-      }
+        : (
+          <Select options={groups} onChange={selected}
+            noOptionsMessage={() => t('No options', {ns: 'loris'})}
+            menuPortalTarget={document.body}
+            styles={{menuPortal:
+                        /**
+                         * Add a z-index to ensure the element stays visible
+                         *
+                         * @param {object} base - the base CSS
+                         * @returns {object} - the new CSS with z-index added
+                         */
+                        (base) => ({...base, zIndex: 9999})}
+            }
+            placeholder={placeholder}
+          />
+        )}
     </div>
   );
 }