From 385c085e59933e5e98a9426fb935fa117a8d17f7 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 14:14:28 +0000
Subject: [PATCH 1/3] improvements to the Field Selection section

---
 .../jsx/components/filterableselectgroup.tsx  | 60 +++++++++++++++----
 modules/dataquery/jsx/definefields.tsx        | 60 +++++++++++--------
 2 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/modules/dataquery/jsx/components/filterableselectgroup.tsx b/modules/dataquery/jsx/components/filterableselectgroup.tsx
index 49d937e76c6..ef063613c72 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,21 +72,53 @@ 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>
   );
 }
 
 export default FilterableSelectGroup;
+
diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 0dbb11cb9d5..f86814974df 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -413,8 +413,8 @@ function DefineFields(props: {
 
   return (
     <div>
-      <div style={{display: 'flex', flexWrap: 'nowrap'}}>
-        <div style={{width: '80vw', padding: '1em'}}>
+      <div style={{display: 'flex', gap: '1rem', width: '100%'}}>
+        <div style={{width: 'calc(70% - 1rem/2)', padding: '1em'}}>
           <h1>Available Fields</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
@@ -423,27 +423,29 @@ function DefineFields(props: {
           {fieldList}
         </div>
         <div style={{
-          width: '20vw',
-          padding: '1em',
+          width: 'calc(30% - 1rem/2)',
           position: 'sticky',
           top: 0,
-          maxHeight: '90vh',
-          overflow: 'auto',
         }}>
-          <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 +529,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 +546,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 +576,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

From f41a4132e1b4a4e2cbfcce909b01472df73fd9cb Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Wed, 26 Nov 2025 15:43:05 +0000
Subject: [PATCH 2/3] small improvements and removed changes meant for other
 branch

---
 .../jsx/components/filterableselectgroup.tsx  | 60 ++++---------------
 modules/dataquery/jsx/definefields.tsx        |  6 +-
 2 files changed, 16 insertions(+), 50 deletions(-)

diff --git a/modules/dataquery/jsx/components/filterableselectgroup.tsx b/modules/dataquery/jsx/components/filterableselectgroup.tsx
index ef063613c72..49d937e76c6 100644
--- a/modules/dataquery/jsx/components/filterableselectgroup.tsx
+++ b/modules/dataquery/jsx/components/filterableselectgroup.tsx
@@ -19,7 +19,6 @@ 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: {
@@ -27,7 +26,6 @@ function FilterableSelectGroup(props: {
     placeholder?: string,
     groups: object,
     mapGroupName?: (module: string) => string,
-    label?: string,
 }) {
   const groups: SelectGroup[] = [];
   const placeholder = props.placeholder || 'Select a category';
@@ -72,53 +70,21 @@ function FilterableSelectGroup(props: {
   };
   return (
     <div>
-      {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}
-        />
-      }
+      <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>
   );
 }
 
 export default FilterableSelectGroup;
-
diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index f86814974df..653ac0b86e2 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -413,8 +413,8 @@ 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', gap: '2rem', width: '100%'}}>
+        <div style={{width: 'calc(70% - 2rem/2)'}}>
           <h1>Available Fields</h1>
           <FilterableSelectGroup groups={props.allCategories.categories}
             mapGroupName={(key) => props.allCategories.modules[key]}
@@ -423,7 +423,7 @@ function DefineFields(props: {
           {fieldList}
         </div>
         <div style={{
-          width: 'calc(30% - 1rem/2)',
+          width: 'calc(30% - 2rem/2)',
           position: 'sticky',
           top: 0,
         }}>

From 9b2f270c4de0ca03bf0343a8b3cae344443f3a14 Mon Sep 17 00:00:00 2001
From: Mario Martins <mario.andre.m@gmail.com>
Date: Mon, 8 Dec 2025 15:38:47 +0000
Subject: [PATCH 3/3] removed commented field

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

diff --git a/modules/dataquery/jsx/definefields.tsx b/modules/dataquery/jsx/definefields.tsx
index 7c399b0d440..106f9ea0525 100644
--- a/modules/dataquery/jsx/definefields.tsx
+++ b/modules/dataquery/jsx/definefields.tsx
@@ -443,7 +443,6 @@ function DefineFields(props: {
             flexWrap: 'wrap',
           }}>
             <h2>{t('Selected Fields', {ns: 'dataquery'})}</h2>
-            {/* <h2>Field Selection</h2> */}
             <div>
               <button type="button" className="btn btn-primary"
                 style={{marginBottom: 7}}