From 231ac56ca81e24debfb3d54b15426bdde39edc45 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 07:54:55 -0800
Subject: [PATCH 01/20] Add support for explicitly choose a formatter in QB

Fixes #1959
---
 .../lib/components/QueryBuilder/Line.tsx      | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index 13110bbd62b..b0a7a1248e5 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -49,6 +49,7 @@ import type { DatePart } from './fieldSpec';
 import { QueryFieldSpec } from './fieldSpec';
 import type { QueryField } from './helpers';
 import { QueryLineTools } from './QueryLineTools';
+import { QueryFieldFormatter } from './Formatter';
 
 // REFACTOR: split this component into smaller components
 export function QueryLine({
@@ -372,6 +373,27 @@ export function QueryLine({
                 mappingElementDivider
               )
             )}
+            {(fieldMeta.fieldType === 'formatter' ||
+              fieldMeta.fieldType === 'aggregator') &&
+            typeof fieldMeta.tableName === 'string' ? (
+              <>
+                {mappingElementDivider}
+                <QueryFieldFormatter
+                  formatter={field.dataObjFormatter}
+                  tableName={fieldMeta.tableName}
+                  type={fieldMeta.fieldType}
+                  onChange={
+                    handleChange === undefined
+                      ? undefined
+                      : (dataObjectFormatter): void =>
+                          handleChange({
+                            ...field,
+                            dataObjFormatter: dataObjectFormatter,
+                          })
+                  }
+                />
+              </>
+            ) : undefined}
           </div>
           {filtersVisible ? (
             <div

From 89221c33c547e6ece246f29ea89bc5aded12c57e Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 15:59:02 +0000
Subject: [PATCH 02/20] Lint code with ESLint and Prettier

Triggered by 231ac56ca81e24debfb3d54b15426bdde39edc45 on branch refs/heads/issue-1959
---
 specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index b0a7a1248e5..a1a6742e0b4 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -47,9 +47,9 @@ import {
 } from './FieldFilter';
 import type { DatePart } from './fieldSpec';
 import { QueryFieldSpec } from './fieldSpec';
+import { QueryFieldFormatter } from './Formatter';
 import type { QueryField } from './helpers';
 import { QueryLineTools } from './QueryLineTools';
-import { QueryFieldFormatter } from './Formatter';
 
 // REFACTOR: split this component into smaller components
 export function QueryLine({

From a72dbf9aa4a4bdee6835a75c88570381bc5238c8 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:29:02 -0800
Subject: [PATCH 03/20] Add cog icon to display formatter selector, change cog
 color depending on default value

---
 .../lib/components/QueryBuilder/Formatter.tsx | 64 +++++++++++++------
 .../lib/components/QueryBuilder/Line.tsx      |  1 -
 .../frontend/js_src/lib/localization/query.ts |  3 +
 3 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 3e45ec9e844..e2ba054df6c 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -5,7 +5,8 @@ import { commonText } from '../../localization/common';
 import { Select } from '../Atoms/Form';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
-import { mappingElementDivider } from '../WbPlanView/LineComponents';
+import { Button } from '../Atoms/Button';
+import { queryText } from '../../localization/query';
 
 export function QueryFieldFormatter({
   type,
@@ -23,42 +24,67 @@ export function QueryFieldFormatter({
     () =>
       // Some code duplication, but required by TypeScript
       (type === 'formatter'
-        ? formatters?.formatters.map(({ table, name, title }) => ({
+        ? formatters?.formatters.map(({ table, name, title, isDefault }) => ({
             table,
             name,
             title,
+            isDefault,
           }))
-        : formatters?.aggregators.map(({ table, name, title }) => ({
+        : formatters?.aggregators.map(({ table, name, title, isDefault }) => ({
             table,
             name,
             title,
+            isDefault,
           }))
       )
         ?.filter(({ table }) => table?.name === tableName)
-        .map(({ name, title = name }) => ({ name, title })),
+        .map(({ name, title = name, isDefault }) => ({
+          name,
+          title,
+          isDefault,
+        })),
     [type, formatters, tableName]
   );
+
+  const [formatterSelectIsOpen, toggleFormatterSelect] = React.useState(false);
+
   return availableFormatters === undefined ? (
     typeof formatter === 'string' ? (
       <>{commonText.loading()}</>
     ) : null
   ) : availableFormatters.length > 1 ? (
     <>
-      {mappingElementDivider}
-      <div>
-        <Select
-          disabled={handleChange === undefined}
-          value={formatter}
-          onValueChange={handleChange}
-        >
-          <option />
-          {availableFormatters.map(({ name, title }, index) => (
-            <option key={index} value={name}>
-              {title}
-            </option>
-          ))}
-        </Select>
-      </div>
+      <Button.Icon
+        icon="cog"
+        title={queryText.chooseFormatter()}
+        onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}
+        className={
+          formatter &&
+          availableFormatters.find((selected) => selected.name === formatter)
+            ?.isDefault
+            ? ''
+            : 'bg-yellow-250 dark:bg-yellow-900'
+        }
+      />
+      {formatterSelectIsOpen && (
+        <div>
+          <Select
+            disabled={handleChange === undefined}
+            value={formatter}
+            onValueChange={(value) => {
+              handleChange?.(value);
+              toggleFormatterSelect(!formatterSelectIsOpen);
+            }}
+          >
+            <option />
+            {availableFormatters.map(({ name, title }, index) => (
+              <option key={index} value={name}>
+                {title}
+              </option>
+            ))}
+          </Select>
+        </div>
+      )}
     </>
   ) : null;
 }
diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index a1a6742e0b4..1c32a8fb01c 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -377,7 +377,6 @@ export function QueryLine({
               fieldMeta.fieldType === 'aggregator') &&
             typeof fieldMeta.tableName === 'string' ? (
               <>
-                {mappingElementDivider}
                 <QueryFieldFormatter
                   formatter={field.dataObjFormatter}
                   tableName={fieldMeta.tableName}
diff --git a/specifyweb/frontend/js_src/lib/localization/query.ts b/specifyweb/frontend/js_src/lib/localization/query.ts
index 278e8a3e9e0..ef2f0f94ef6 100644
--- a/specifyweb/frontend/js_src/lib/localization/query.ts
+++ b/specifyweb/frontend/js_src/lib/localization/query.ts
@@ -883,4 +883,7 @@ export const queryText = createDictionary({
     'ru-ru': 'Просмотр записей',
     'uk-ua': 'Переглянути записи',
   },
+  chooseFormatter: {
+    'en-us': 'Choose fromatter',
+  },
 } as const);

From dd2c4cd17f35b493dca9b1fdd950d2ff9349becc Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:30:13 -0800
Subject: [PATCH 04/20] Remove unecessary check

---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index e2ba054df6c..9933f014d60 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -59,7 +59,6 @@ export function QueryFieldFormatter({
         title={queryText.chooseFormatter()}
         onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}
         className={
-          formatter &&
           availableFormatters.find((selected) => selected.name === formatter)
             ?.isDefault
             ? ''

From f5355f534df5708e3e4eed4c0d036bf671d330db Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 19:33:41 +0000
Subject: [PATCH 05/20] Lint code with ESLint and Prettier

Triggered by dd2c4cd17f35b493dca9b1fdd950d2ff9349becc on branch refs/heads/issue-1959
---
 .../js_src/lib/components/QueryBuilder/Formatter.tsx   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 9933f014d60..0f829fda5a4 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import { usePromise } from '../../hooks/useAsyncState';
 import { commonText } from '../../localization/common';
+import { queryText } from '../../localization/query';
+import { Button } from '../Atoms/Button';
 import { Select } from '../Atoms/Form';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
-import { Button } from '../Atoms/Button';
-import { queryText } from '../../localization/query';
 
 export function QueryFieldFormatter({
   type,
@@ -55,15 +55,15 @@ export function QueryFieldFormatter({
   ) : availableFormatters.length > 1 ? (
     <>
       <Button.Icon
-        icon="cog"
-        title={queryText.chooseFormatter()}
-        onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}
         className={
           availableFormatters.find((selected) => selected.name === formatter)
             ?.isDefault
             ? ''
             : 'bg-yellow-250 dark:bg-yellow-900'
         }
+        icon="cog"
+        title={queryText.chooseFormatter()}
+        onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}
       />
       {formatterSelectIsOpen && (
         <div>

From fdd14d8e6d1aae92f3c510ed7198fadd5e4af8ac Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:48:37 -0800
Subject: [PATCH 06/20] Add style to gear icon

---
 .../js_src/lib/components/QueryBuilder/Formatter.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 0f829fda5a4..6544789c80a 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -55,12 +55,12 @@ export function QueryFieldFormatter({
   ) : availableFormatters.length > 1 ? (
     <>
       <Button.Icon
-        className={
+        className={`${
           availableFormatters.find((selected) => selected.name === formatter)
             ?.isDefault
             ? ''
-            : 'bg-yellow-250 dark:bg-yellow-900'
-        }
+            : 'bg-yellow-250 dark:bg-yellow-900 '
+        } border border-gray-500 p-0.5`}
         icon="cog"
         title={queryText.chooseFormatter()}
         onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}

From 864286f7d7c81b7948eabcd0dabcc0ab36da5983 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 13:43:13 -0800
Subject: [PATCH 07/20] Add background, change hover text, grey when blank,

---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx | 4 ++--
 specifyweb/frontend/js_src/lib/localization/query.ts          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 6544789c80a..25c878a6393 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -57,8 +57,8 @@ export function QueryFieldFormatter({
       <Button.Icon
         className={`${
           availableFormatters.find((selected) => selected.name === formatter)
-            ?.isDefault
-            ? ''
+            ?.isDefault || formatter === undefined
+            ? 'bg-white dark:bg-neutral-600'
             : 'bg-yellow-250 dark:bg-yellow-900 '
         } border border-gray-500 p-0.5`}
         icon="cog"
diff --git a/specifyweb/frontend/js_src/lib/localization/query.ts b/specifyweb/frontend/js_src/lib/localization/query.ts
index ef2f0f94ef6..520bdd4cfdf 100644
--- a/specifyweb/frontend/js_src/lib/localization/query.ts
+++ b/specifyweb/frontend/js_src/lib/localization/query.ts
@@ -884,6 +884,6 @@ export const queryText = createDictionary({
     'uk-ua': 'Переглянути записи',
   },
   chooseFormatter: {
-    'en-us': 'Choose fromatter',
+    'en-us': 'Choose formatter',
   },
 } as const);

From 4c9e7e56388a9e6e83929c062fa1d8144a7152c4 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 13:54:09 -0800
Subject: [PATCH 08/20] Use btn small instead of btn icon

---
 .../js_src/lib/components/QueryBuilder/Formatter.tsx  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 25c878a6393..e86e57ce405 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -7,6 +7,7 @@ import { Button } from '../Atoms/Button';
 import { Select } from '../Atoms/Form';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
+import { icons } from '../Atoms/Icons';
 
 export function QueryFieldFormatter({
   type,
@@ -54,17 +55,19 @@ export function QueryFieldFormatter({
     ) : null
   ) : availableFormatters.length > 1 ? (
     <>
-      <Button.Icon
+      <Button.Small
+        aria-label={queryText.chooseFormatter()}
         className={`${
           availableFormatters.find((selected) => selected.name === formatter)
             ?.isDefault || formatter === undefined
             ? 'bg-white dark:bg-neutral-600'
             : 'bg-yellow-250 dark:bg-yellow-900 '
-        } border border-gray-500 p-0.5`}
-        icon="cog"
+        }`}
         title={queryText.chooseFormatter()}
         onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}
-      />
+      >
+        {icons.cog}
+      </Button.Small>
       {formatterSelectIsOpen && (
         <div>
           <Select

From 9e6e8f090fe89a92ce478a34b75762a90f2a9b62 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 21:57:33 +0000
Subject: [PATCH 09/20] Lint code with ESLint and Prettier

Triggered by 4c9e7e56388a9e6e83929c062fa1d8144a7152c4 on branch refs/heads/issue-1959
---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index e86e57ce405..03885be0f12 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -5,9 +5,9 @@ import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
 import { Button } from '../Atoms/Button';
 import { Select } from '../Atoms/Form';
+import { icons } from '../Atoms/Icons';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
-import { icons } from '../Atoms/Icons';
 
 export function QueryFieldFormatter({
   type,

From 129bb7ae6498eab2f9e7b715ff3bb7e4a6624f9b Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 13:58:20 -0800
Subject: [PATCH 10/20] Keep formatter visible after been selected

---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 03885be0f12..06c8a8fd7b1 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -75,7 +75,6 @@ export function QueryFieldFormatter({
             value={formatter}
             onValueChange={(value) => {
               handleChange?.(value);
-              toggleFormatterSelect(!formatterSelectIsOpen);
             }}
           >
             <option />

From 28e88624683de9424ce1901fb70f1fde0e8270c5 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:00:38 -0800
Subject: [PATCH 11/20] Simplify onValueChange

---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 06c8a8fd7b1..b750442c35c 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -73,9 +73,7 @@ export function QueryFieldFormatter({
           <Select
             disabled={handleChange === undefined}
             value={formatter}
-            onValueChange={(value) => {
-              handleChange?.(value);
-            }}
+            onValueChange={handleChange}
           >
             <option />
             {availableFormatters.map(({ name, title }, index) => (

From 3d121202d734bc3aa4c698a9b0b6df93f10cf3d2 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Mon, 11 Mar 2024 07:14:01 -0700
Subject: [PATCH 12/20] Add accessibility

---
 .../js_src/lib/components/QueryBuilder/Formatter.tsx   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index b750442c35c..525bc359d53 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -8,6 +8,7 @@ import { Select } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
+import { useId } from '../../hooks/useId';
 
 export function QueryFieldFormatter({
   type,
@@ -47,7 +48,9 @@ export function QueryFieldFormatter({
     [type, formatters, tableName]
   );
 
-  const [formatterSelectIsOpen, toggleFormatterSelect] = React.useState(false);
+  const [formatterSelectIsOpen, setFormatterSelect] = React.useState(false);
+
+  const id = useId('formatters');
 
   return availableFormatters === undefined ? (
     typeof formatter === 'string' ? (
@@ -64,7 +67,8 @@ export function QueryFieldFormatter({
             : 'bg-yellow-250 dark:bg-yellow-900 '
         }`}
         title={queryText.chooseFormatter()}
-        onClick={() => toggleFormatterSelect(!formatterSelectIsOpen)}
+        onClick={() => setFormatterSelect(!formatterSelectIsOpen)}
+        aria-controls={id('list')}
       >
         {icons.cog}
       </Button.Small>
@@ -74,6 +78,8 @@ export function QueryFieldFormatter({
             disabled={handleChange === undefined}
             value={formatter}
             onValueChange={handleChange}
+            aria-label={queryText.chooseFormatter()}
+            id={'list'}
           >
             <option />
             {availableFormatters.map(({ name, title }, index) => (

From fa0984fb573e6bd308b50ca54fd7dcc27790ba61 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Mon, 11 Mar 2024 14:17:43 +0000
Subject: [PATCH 13/20] Lint code with ESLint and Prettier

Triggered by 3d121202d734bc3aa4c698a9b0b6df93f10cf3d2 on branch refs/heads/issue-1959
---
 .../js_src/lib/components/QueryBuilder/Formatter.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 525bc359d53..31d458cc2c0 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { usePromise } from '../../hooks/useAsyncState';
+import { useId } from '../../hooks/useId';
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
 import { Button } from '../Atoms/Button';
@@ -8,7 +9,6 @@ import { Select } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
-import { useId } from '../../hooks/useId';
 
 export function QueryFieldFormatter({
   type,
@@ -59,6 +59,7 @@ export function QueryFieldFormatter({
   ) : availableFormatters.length > 1 ? (
     <>
       <Button.Small
+        aria-controls={id('list')}
         aria-label={queryText.chooseFormatter()}
         className={`${
           availableFormatters.find((selected) => selected.name === formatter)
@@ -68,18 +69,17 @@ export function QueryFieldFormatter({
         }`}
         title={queryText.chooseFormatter()}
         onClick={() => setFormatterSelect(!formatterSelectIsOpen)}
-        aria-controls={id('list')}
       >
         {icons.cog}
       </Button.Small>
       {formatterSelectIsOpen && (
         <div>
           <Select
+            aria-label={queryText.chooseFormatter()}
             disabled={handleChange === undefined}
+            id="list"
             value={formatter}
             onValueChange={handleChange}
-            aria-label={queryText.chooseFormatter()}
-            id={'list'}
           >
             <option />
             {availableFormatters.map(({ name, title }, index) => (

From db3b3ce50bcf31d3e485596e3587fcde0e20336b Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Mon, 11 Mar 2024 09:13:47 -0700
Subject: [PATCH 14/20] Add select bg, bg white when blank

---
 .../js_src/lib/components/QueryBuilder/Formatter.tsx   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 31d458cc2c0..f9e7c87ec2b 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -9,6 +9,7 @@ import { Select } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
+import { customSelectElementBackground } from '../WbPlanView/CustomSelectElement';
 
 export function QueryFieldFormatter({
   type,
@@ -50,7 +51,7 @@ export function QueryFieldFormatter({
 
   const [formatterSelectIsOpen, setFormatterSelect] = React.useState(false);
 
-  const id = useId('formatters');
+  const id = useId('formatters-selection');
 
   return availableFormatters === undefined ? (
     typeof formatter === 'string' ? (
@@ -63,7 +64,9 @@ export function QueryFieldFormatter({
         aria-label={queryText.chooseFormatter()}
         className={`${
           availableFormatters.find((selected) => selected.name === formatter)
-            ?.isDefault || formatter === undefined
+            ?.isDefault ||
+          formatter === undefined ||
+          formatter === ''
             ? 'bg-white dark:bg-neutral-600'
             : 'bg-yellow-250 dark:bg-yellow-900 '
         }`}
@@ -77,9 +80,10 @@ export function QueryFieldFormatter({
           <Select
             aria-label={queryText.chooseFormatter()}
             disabled={handleChange === undefined}
-            id="list"
+            id={id('list')}
             value={formatter}
             onValueChange={handleChange}
+            className={`${customSelectElementBackground}`}
           >
             <option />
             {availableFormatters.map(({ name, title }, index) => (

From dbe21a3a36e46e57abb7ff292cdb0a168bf8936a Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Mon, 11 Mar 2024 16:17:24 +0000
Subject: [PATCH 15/20] Lint code with ESLint and Prettier

Triggered by db3b3ce50bcf31d3e485596e3587fcde0e20336b on branch refs/heads/issue-1959
---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index f9e7c87ec2b..a5809db1365 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -79,11 +79,11 @@ export function QueryFieldFormatter({
         <div>
           <Select
             aria-label={queryText.chooseFormatter()}
+            className={`${customSelectElementBackground}`}
             disabled={handleChange === undefined}
             id={id('list')}
             value={formatter}
             onValueChange={handleChange}
-            className={`${customSelectElementBackground}`}
           >
             <option />
             {availableFormatters.map(({ name, title }, index) => (

From 4c348ff5e760ed655ae193afe65c858213a54b78 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Tue, 12 Mar 2024 06:33:14 -0700
Subject: [PATCH 16/20] Remove unecessary fragment, add default string to value

---
 .../lib/components/QueryBuilder/Formatter.tsx |  5 ++--
 .../lib/components/QueryBuilder/Line.tsx      | 30 +++++++++----------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index a5809db1365..04fa5c583a4 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -10,6 +10,7 @@ import { icons } from '../Atoms/Icons';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
 import { customSelectElementBackground } from '../WbPlanView/CustomSelectElement';
+import { resourcesText } from '../../localization/resources';
 
 export function QueryFieldFormatter({
   type,
@@ -86,9 +87,9 @@ export function QueryFieldFormatter({
             onValueChange={handleChange}
           >
             <option />
-            {availableFormatters.map(({ name, title }, index) => (
+            {availableFormatters.map(({ name, title, isDefault }, index) => (
               <option key={index} value={name}>
-                {title}
+                {title} {isDefault ? resourcesText.defaultInline() : ''}
               </option>
             ))}
           </Select>
diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index 1c32a8fb01c..8964345844e 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -376,22 +376,20 @@ export function QueryLine({
             {(fieldMeta.fieldType === 'formatter' ||
               fieldMeta.fieldType === 'aggregator') &&
             typeof fieldMeta.tableName === 'string' ? (
-              <>
-                <QueryFieldFormatter
-                  formatter={field.dataObjFormatter}
-                  tableName={fieldMeta.tableName}
-                  type={fieldMeta.fieldType}
-                  onChange={
-                    handleChange === undefined
-                      ? undefined
-                      : (dataObjectFormatter): void =>
-                          handleChange({
-                            ...field,
-                            dataObjFormatter: dataObjectFormatter,
-                          })
-                  }
-                />
-              </>
+              <QueryFieldFormatter
+                formatter={field.dataObjFormatter}
+                tableName={fieldMeta.tableName}
+                type={fieldMeta.fieldType}
+                onChange={
+                  handleChange === undefined
+                    ? undefined
+                    : (dataObjectFormatter): void =>
+                        handleChange({
+                          ...field,
+                          dataObjFormatter: dataObjectFormatter,
+                        })
+                }
+              />
             ) : undefined}
           </div>
           {filtersVisible ? (

From c9d5f7966deaf625bf603be6fe3d7c483e291de9 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Tue, 12 Mar 2024 13:37:10 +0000
Subject: [PATCH 17/20] Lint code with ESLint and Prettier

Triggered by 4c348ff5e760ed655ae193afe65c858213a54b78 on branch refs/heads/issue-1959
---
 .../frontend/js_src/lib/components/QueryBuilder/Formatter.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
index 04fa5c583a4..606b6061823 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Formatter.tsx
@@ -4,13 +4,13 @@ import { usePromise } from '../../hooks/useAsyncState';
 import { useId } from '../../hooks/useId';
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
+import { resourcesText } from '../../localization/resources';
 import { Button } from '../Atoms/Button';
 import { Select } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
 import type { Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
 import { customSelectElementBackground } from '../WbPlanView/CustomSelectElement';
-import { resourcesText } from '../../localization/resources';
 
 export function QueryFieldFormatter({
   type,

From ddebb7a3daf98c30713e70be469019e5dd46d9f1 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Tue, 12 Mar 2024 07:45:00 -0700
Subject: [PATCH 18/20] Add aggregators to QB

---
 specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index 8964345844e..11ac98d0507 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -167,7 +167,7 @@ export function QueryLine({
         canOpenMap = fieldName === 'latitude1' || fieldName === 'longitude1';
       } else if (isMapped)
         fieldType =
-          dataModelField?.isRelationship && relationshipIsToMany(dataModelField)
+          isFormatted && mappingPath.at(-1) === '#1'
             ? 'aggregator'
             : 'formatter';
 

From 947358903614bc259458879febe478961dc80340 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Tue, 12 Mar 2024 07:54:05 -0700
Subject: [PATCH 19/20] Remove import

---
 specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index 11ac98d0507..18f1dd92d3b 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -29,7 +29,6 @@ import {
   formattedEntry,
   mappingPathToString,
   parsePartialField,
-  relationshipIsToMany,
   valueIsPartialField,
 } from '../WbPlanView/mappingHelpers';
 import { generateMappingPathPreview } from '../WbPlanView/mappingPreview';

From dcd98d1705816b0e6740d51beb3df66a3d23a1b6 Mon Sep 17 00:00:00 2001
From: Caroline D <108160931+CarolineDenis@users.noreply.github.com>
Date: Wed, 13 Mar 2024 06:16:22 -0700
Subject: [PATCH 20/20] Remove aggragator from QB

---
 .../frontend/js_src/lib/components/QueryBuilder/Line.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
index 18f1dd92d3b..8964345844e 100644
--- a/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
+++ b/specifyweb/frontend/js_src/lib/components/QueryBuilder/Line.tsx
@@ -29,6 +29,7 @@ import {
   formattedEntry,
   mappingPathToString,
   parsePartialField,
+  relationshipIsToMany,
   valueIsPartialField,
 } from '../WbPlanView/mappingHelpers';
 import { generateMappingPathPreview } from '../WbPlanView/mappingPreview';
@@ -166,7 +167,7 @@ export function QueryLine({
         canOpenMap = fieldName === 'latitude1' || fieldName === 'longitude1';
       } else if (isMapped)
         fieldType =
-          isFormatted && mappingPath.at(-1) === '#1'
+          dataModelField?.isRelationship && relationshipIsToMany(dataModelField)
             ? 'aggregator'
             : 'formatter';