CE-1120: updated to handle errors on join tables (specifically was happening with deposco customer orders)

Strip away null field names in criteria (e.g., from incomplete advanc…

.circleci/config.yml

@@ -2,12 +2,12 @@ version: 2.1
 
 orbs:
   node: circleci/node@5.1.0
-  browser-tools: circleci/browser-tools@1.4.6
+  browser-tools: circleci/browser-tools@1.4.7
 
 executors:
   java17:
     docker:
-      - image: 'cimg/openjdk:17.0'
+      - image: 'cimg/openjdk:17.0.9'
 
 commands:
   install_java17:

.eslintrc.json

@@ -28,8 +28,7 @@
    },
    "plugins": [
       "react",
-      "@typescript-eslint",
-      "import"
+      "@typescript-eslint"
    ],
    "rules": {
       "brace-style": [
@@ -43,41 +42,6 @@
             "SwitchCase": 1
          }
       ],
-      "import/extensions": [
-         "error",
-         "ignorePackages",
-         {
-            "ts": "never",
-            "tsx": "never",
-            "js": "never"
-         }
-      ],
-      "import/no-extraneous-dependencies": [
-         "error",
-         {
-            "devDependencies": true
-         }
-      ],
-      "import/order": [
-         "error",
-         {
-            "groups": [
-               "builtin", // Built-in imports (come from NodeJS native) go first
-               "external", // <- External imports
-               "internal", // <- Absolute imports
-               ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
-               "index", // <- index imports
-               "unknown"
-            ],
-            "newlines-between": "never",
-            "alphabetize": {
-               /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
-               "order": "asc",
-               /* ignore case. Options: [true, false] */
-               "caseInsensitive": true
-            }
-         }
-      ],
       "jsx-one-expression-per-line": "off",
       "max-len": "off",
       "no-console": "off",
@@ -114,15 +78,6 @@
       "quotes": [
          "error",
          "double"
-      ],
-      "sort-imports": [
-         "error",
-         {
-            "ignoreCase": false,
-            "ignoreDeclarationSort": true,
-            "ignoreMemberSort": true,
-            "allowSeparatedGroups": false
-         }
       ]
    },
    "settings": {

package.json

@@ -6,7 +6,7 @@
       "@auth0/auth0-react": "1.10.2",
       "@emotion/react": "11.7.1",
       "@emotion/styled": "11.6.0",
-      "@kingsrook/qqq-frontend-core": "1.0.85",
+      "@kingsrook/qqq-frontend-core": "1.0.88",
       "@mui/icons-material": "5.4.1",
       "@mui/material": "5.11.1",
       "@mui/styles": "5.11.1",

pom.xml

@@ -66,7 +66,7 @@
       <dependency>
          <groupId>com.kingsrook.qqq</groupId>
          <artifactId>qqq-backend-core</artifactId>
-         <version>feature-CE-798-quick-filters-20240123.205854-1</version>
+         <version>0.20.0-20240308.165846-65</version>
       </dependency>
       <dependency>
          <groupId>org.slf4j</groupId>

src/App.tsx

@@ -355,7 +355,7 @@ export default function App()
                routeList.push({
                   name: `${app.label}`,
                   key: app.name,
-                  route: `${path}/savedFilter/:id`,
+                  route: `${path}/savedView/:id`,
                   component: <RecordQuery table={table} key={table.name} />,
                });
 
@@ -656,6 +656,7 @@ export default function App()
 
    const [pageHeader, setPageHeader] = useState("" as string | JSX.Element);
    const [accentColor, setAccentColor] = useState("#0062FF");
+   const [accentColorLight, setAccentColorLight] = useState("#C0D6F7")
    const [tableMetaData, setTableMetaData] = useState(null);
    const [tableProcesses, setTableProcesses] = useState(null);
    const [dotMenuOpen, setDotMenuOpen] = useState(false);
@@ -668,6 +669,7 @@ export default function App()
          <QContext.Provider value={{
             pageHeader: pageHeader,
             accentColor: accentColor,
+            accentColorLight: accentColorLight,
             tableMetaData: tableMetaData,
             tableProcesses: tableProcesses,
             dotMenuOpen: dotMenuOpen,
@@ -675,6 +677,7 @@ export default function App()
             helpHelpActive: helpHelpActive,
             setPageHeader: (header: string | JSX.Element) => setPageHeader(header),
             setAccentColor: (accentColor: string) => setAccentColor(accentColor),
+            setAccentColorLight: (accentColorLight: string) => setAccentColorLight(accentColorLight),
             setTableMetaData: (tableMetaData: QTableMetaData) => setTableMetaData(tableMetaData),
             setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses),
             setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent),

src/CommandMenu.tsx

@@ -36,7 +36,7 @@ import Icon from "@mui/material/Icon";
 import Typography from "@mui/material/Typography";
 import {makeStyles} from "@mui/styles";
 import {Command} from "cmdk";
-import React, {useContext, useEffect, useRef, useState} from "react";
+import React, {useContext, useEffect, useRef} from "react";
 import {useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import HistoryUtils, {QHistoryEntry} from "qqq/utils/HistoryUtils";
@@ -174,7 +174,9 @@ const CommandMenu = ({metaData}: Props) =>
       })
       tableNames = tableNames.sort((a: string, b:string) =>
       {
-         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
+         const labelA = metaData.tables.get(a).label ?? "";
+         const labelB = metaData.tables.get(b).label ?? "";
+         return (labelA.localeCompare(labelB));
       })
 
       const path = location.pathname;
@@ -222,7 +224,9 @@ const CommandMenu = ({metaData}: Props) =>
       })
       tableNames = tableNames.sort((a: string, b:string) =>
       {
-         return (metaData.tables.get(a).label.localeCompare(metaData.tables.get(b).label));
+         const labelA = metaData.tables.get(a).label ?? "";
+         const labelB = metaData.tables.get(b).label ?? "";
+         return (labelA.localeCompare(labelB));
       })
       return(
          <Command.Group heading="Tables">
@@ -252,7 +256,9 @@ const CommandMenu = ({metaData}: Props) =>
 
       appNames = appNames.sort((a: string, b:string) =>
       {
-         return (getFullAppLabel(metaData.appTree, a, 1, "").localeCompare(getFullAppLabel(metaData.appTree, b, 1, "")));
+         const labelA = getFullAppLabel(metaData.appTree, a, 1, "") ?? "";
+         const labelB = getFullAppLabel(metaData.appTree, b, 1, "") ?? "";
+         return (labelA.localeCompare(labelB));
       })
 
       return(
@@ -286,7 +292,9 @@ const CommandMenu = ({metaData}: Props) =>
 
       appNames = appNames.sort((a: string, b:string) =>
       {
-         return (metaData.apps.get(a).label.localeCompare(metaData.apps.get(b).label));
+         const labelA = metaData.apps.get(a).label ?? "";
+         const labelB = metaData.apps.get(b).label ?? "";
+         return (labelA.localeCompare(labelB));
       })
 
       const entryMap = new Map<string, boolean>();
@@ -354,8 +362,7 @@ const CommandMenu = ({metaData}: Props) =>
                   <Grid container columnSpacing={5} rowSpacing={1}>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>n</span>Create a New Record</Grid>
                      <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>r</span>Refresh the Query</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>c</span>Open the Columns Panel</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Panel</Grid>
+                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Builder (Advanced mode only)</Grid>
                   </Grid>
 
                   <Typography variant="h6" pt={3}>Record View</Typography>

src/QContext.tsx

@@ -19,9 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QAppMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QAppMetaData";
 import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
 import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {createContext} from "react";
@@ -32,7 +30,10 @@ interface QContext
    setPageHeader?: (header: string | JSX.Element) => void;
 
    accentColor: string;
-   setAccentColor?: (header: string) => void;
+   setAccentColor?: (color: string) => void;
+
+   accentColorLight: string;
+   setAccentColorLight?: (color: string) => void;
 
    dotMenuOpen: boolean;
    setDotMenuOpen?: (dotMenuOpen: boolean) => void;
@@ -57,6 +58,7 @@ interface QContext
 const defaultState = {
    pageHeader: "",
    accentColor: "#0062FF",
+   accentColorLight: "#C0D6F7",
    dotMenuOpen: false,
    keyboardHelpOpen: false,
    pathToLabelMap: {},

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardAppMetaData.java

@@ -0,0 +1,153 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2023.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
+
+
+import com.kingsrook.qqq.backend.core.model.metadata.layout.QAppMetaData;
+import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMetaData;
+import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
+
+
+/*******************************************************************************
+ ** app-level meta-data for this module (handled as QSupplementalTableMetaData)
+ *******************************************************************************/
+public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
+{
+   public static final String TYPE_NAME = "materialDashboard";
+
+   private Boolean showAppLabelOnHomeScreen = true;
+   private Boolean includeTableCountsOnHomeScreen = true;
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static MaterialDashboardAppMetaData of(QAppMetaData app)
+   {
+      return ((MaterialDashboardAppMetaData) CollectionUtils.nonNullMap(app.getSupplementalMetaData()).get(TYPE_NAME));
+   }
+
+
+
+   /*******************************************************************************
+    ** either get the supplemental meta dat attached to an app - or create a new one
+    ** and attach it to the app, and return that.
+    *******************************************************************************/
+   public static MaterialDashboardAppMetaData ofOrWithNew(QAppMetaData app)
+   {
+      MaterialDashboardAppMetaData materialDashboardAppMetaData = of(app);
+
+      if(materialDashboardAppMetaData == null)
+      {
+         materialDashboardAppMetaData = new MaterialDashboardAppMetaData();
+         app.withSupplementalMetaData(materialDashboardAppMetaData);
+      }
+
+      return (materialDashboardAppMetaData);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public boolean includeInFullFrontendMetaData()
+   {
+      return (true);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   public String getType()
+   {
+      return TYPE_NAME;
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for showAppLabelOnHomeScreen
+    *******************************************************************************/
+   public Boolean getShowAppLabelOnHomeScreen()
+   {
+      return (this.showAppLabelOnHomeScreen);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for showAppLabelOnHomeScreen
+    *******************************************************************************/
+   public void setShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
+   {
+      this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for showAppLabelOnHomeScreen
+    *******************************************************************************/
+   public MaterialDashboardAppMetaData withShowAppLabelOnHomeScreen(Boolean showAppLabelOnHomeScreen)
+   {
+      this.showAppLabelOnHomeScreen = showAppLabelOnHomeScreen;
+      return (this);
+   }
+
+
+
+   /*******************************************************************************
+    ** Getter for includeTableCountsOnHomeScreen
+    *******************************************************************************/
+   public Boolean getIncludeTableCountsOnHomeScreen()
+   {
+      return (this.includeTableCountsOnHomeScreen);
+   }
+
+
+
+   /*******************************************************************************
+    ** Setter for includeTableCountsOnHomeScreen
+    *******************************************************************************/
+   public void setIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
+   {
+      this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
+   }
+
+
+
+   /*******************************************************************************
+    ** Fluent setter for includeTableCountsOnHomeScreen
+    *******************************************************************************/
+   public MaterialDashboardAppMetaData withIncludeTableCountsOnHomeScreen(Boolean includeTableCountsOnHomeScreen)
+   {
+      this.includeTableCountsOnHomeScreen = includeTableCountsOnHomeScreen;
+      return (this);
+   }
+
+}

src/main/java/com/kingsrook/qqq/frontend/materialdashboard/model/metadata/MaterialDashboardIconRoleNames.java

@@ -28,4 +28,5 @@ package com.kingsrook.qqq.frontend.materialdashboard.model.metadata;
 public interface MaterialDashboardIconRoleNames
 {
    String TOP_RIGHT_INSIDE_CARD = "topRightInsideCard";
+   String TOP_LEFT_INSIDE_CARD = "topLeftInsideCard";
 }

src/qqq/components/audits/AuditBody.tsx

@@ -34,7 +34,7 @@ import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import React, {JSXElementConstructor, useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import QContext from "QContext";
 import Client from "qqq/utils/qqq/Client";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
@@ -58,19 +58,19 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
    const [limit, setLimit] = useState(1000);
    const [statusString, setStatusString] = useState("Loading audits...");
    const [auditsByDate, setAuditsByDate] = useState([] as QRecord[][]);
-   const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>)
-   const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>)
+   const [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>);
+   const [fieldChangeMap, setFieldChangeMap] = useState(null as Map<number, JSX.Element>);
    const [sortDirection, setSortDirection] = useState(localStorage.getItem("audit.sortDirection") === "true");
    const {accentColor} = useContext(QContext);
 
    function wrapValue(value: any): JSX.Element
    {
-      return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>
+      return <span style={{fontWeight: "500", color: " rgb(123, 128, 154)"}}>{value}</span>;
    }
 
    function wasValue(value: any): JSX.Element
    {
-      return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>
+      return <span style={{fontWeight: "100", color: " rgb(123, 128, 154)"}}>{value}</span>;
    }
 
    function getAuditDetailFieldChangeRow(qRecord: QRecord): JSX.Element | null
@@ -79,10 +79,14 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const fieldName = qRecord.values.get("auditDetail.fieldName");
       const oldValue = qRecord.values.get("auditDetail.oldValue");
       const newValue = qRecord.values.get("auditDetail.newValue");
-      if(fieldName && (oldValue !== null || newValue !== null))
+      if (fieldName && (oldValue !== null || newValue !== null))
       {
-         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName
-         return (<tr><td>{fieldLabel}</td><td>{oldValue}</td><td>{newValue}</td></tr>)
+         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
+         return (<tr>
+            <td>{fieldLabel}</td>
+            <td>{oldValue}</td>
+            <td>{newValue}</td>
+         </tr>);
       }
       return (null);
    }
@@ -93,22 +97,22 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const fieldName = qRecord.values.get("auditDetail.fieldName");
       const oldValue = qRecord.values.get("auditDetail.oldValue");
       const newValue = qRecord.values.get("auditDetail.newValue");
-      if(fieldName && (oldValue !== null || newValue !== null))
+      if (fieldName && (oldValue !== null || newValue !== null))
       {
          const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
-         if(oldValue !== undefined && newValue !== undefined)
+         if (oldValue !== undefined && newValue !== undefined)
          {
             return (<>{fieldLabel}: Changed from {(oldValue)} to <b>{(newValue)}</b></>);
          }
-         else if(newValue !== undefined)
+         else if (newValue !== undefined)
          {
             return (<>{fieldLabel}: Set to <b>{(newValue)}</b></>);
          }
-         else if(oldValue !== undefined)
+         else if (oldValue !== undefined)
          {
             return (<>{fieldLabel}: Removed value {(oldValue)}</>);
          }
-         else if(message)
+         else if (message)
          {
             return (<>{message}</>);
          }
@@ -177,7 +181,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          }
          */
       }
-      else if(message)
+      else if (message)
       {
          return (<>{message}</>);
       }
@@ -198,18 +202,18 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
             new QFilterOrderBy("timestamp", sortDirection),
             new QFilterOrderBy("id", sortDirection),
             new QFilterOrderBy("auditDetail.id", true)
-         ], "AND", 0, limit);
+         ], null, "AND", 0, limit);
 
          ///////////////////////////////
          // fetch audits in try-catch //
          ///////////////////////////////
-         let audits = [] as QRecord[]
+         let audits = [] as QRecord[];
          try
          {
             audits = await qController.query("audit", filter, [new QueryJoin("auditDetail", true, "LEFT")]);
             setAudits(audits);
          }
-         catch(e)
+         catch (e)
          {
             if (e instanceof QException)
             {
@@ -233,33 +237,33 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          //////////////////////////////////////////////////////////////////////////////////////////////////////////
          // group the audits by auditId (e.g., this is a list that joined audit & auditDetail, so un-flatten it) //
          //////////////////////////////////////////////////////////////////////////////////////////////////////////
-         const unflattenedAudits: QRecord[] = []
+         const unflattenedAudits: QRecord[] = [];
          const detailMap: Map<number, JSX.Element[]> = new Map();
          const fieldChangeRowsMap: Map<number, JSX.Element[]> = new Map();
          for (let i = 0; i < audits.length; i++)
          {
             let id = audits[i].values.get("id");
-            if(i == 0 || unflattenedAudits[unflattenedAudits.length-1].values.get("id") != id)
+            if (i == 0 || unflattenedAudits[unflattenedAudits.length - 1].values.get("id") != id)
             {
                unflattenedAudits.push(audits[i]);
             }
 
             let auditDetail = getAuditDetailElement(audits[i]);
-            if(auditDetail)
+            if (auditDetail)
             {
-               if(!detailMap.has(id))
+               if (!detailMap.has(id))
                {
                   detailMap.set(id, []);
                }
 
-               detailMap.get(id).push(auditDetail)
+               detailMap.get(id).push(auditDetail);
             }
 
             // table version, probably not to commit
             let fieldChangeRow = getAuditDetailFieldChangeRow(audits[i]);
-            if(auditDetail)
+            if (auditDetail)
             {
-               if(!fieldChangeRowsMap.has(id))
+               if (!fieldChangeRowsMap.has(id))
                {
                   fieldChangeRowsMap.set(id, []);
                }
@@ -273,7 +277,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
          for (let i = 0; i < unflattenedAudits.length; i++)
          {
             let id = unflattenedAudits[i].values.get("id");
-            if(fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
+            if (fieldChangeRowsMap.has(id) && fieldChangeRowsMap.get(id).length > 0)
             {
                const fieldChangeTable = (
                   <table style={{fontSize: "0.875rem"}} className="auditDetailTable" cellSpacing="0">
@@ -288,11 +292,11 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
                         {fieldChangeRowsMap.get(id).map((row, key) => <React.Fragment key={key}>{row}</React.Fragment>)}
                      </tbody>
                   </table>
-               )
+               );
                fieldChangeMap.set(id, fieldChangeTable);
             }
          }
-         setFieldChangeMap(fieldChangeMap)
+         setFieldChangeMap(fieldChangeMap);
 
          //////////////////////////////
          // group the audits by date //
@@ -350,7 +354,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
    const changeSortDirection = () =>
    {
       setAudits([]);
-      const newSortDirection = !sortDirection
+      const newSortDirection = !sortDirection;
       setSortDirection(newSortDirection);
       localStorage.setItem("audit.sortDirection", String(newSortDirection));
    };

src/qqq/components/buttons/DefaultButtons.tsx

@@ -37,7 +37,7 @@ interface QCreateNewButtonProps
 export function QCreateNewButton({tablePath}: QCreateNewButtonProps): JSX.Element
 {
    return (
-      <Box ml={3} mr={0} width={standardWidth}>
+      <Box display="inline-block" ml={3} mr={0} width={standardWidth}>
          <Link to={`${tablePath}/create`}>
             <MDButton variant="gradient" color="info" fullWidth startIcon={<Icon>add</Icon>}>
                Create New
@@ -73,13 +73,17 @@ export function QSaveButton({label, iconName, onClickHandler, disabled}: QSaveBu
 interface QDeleteButtonProps
 {
    onClickHandler: any
+   disabled?: boolean
 }
 
-export function QDeleteButton({onClickHandler}: QDeleteButtonProps): JSX.Element
+QDeleteButton.defaultProps = {
+   disabled: false
+};
+export function QDeleteButton({onClickHandler, disabled}: QDeleteButtonProps): JSX.Element
 {
    return (
       <Box ml={3} width={standardWidth}>
-         <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>}>
+         <MDButton variant="gradient" color="primary" size="small" onClick={onClickHandler} fullWidth startIcon={<Icon>delete</Icon>} disabled={disabled}>
             Delete
          </MDButton>
       </Box>
@@ -123,24 +127,6 @@ export function QActionsMenuButton({isOpen, onClickHandler}: QActionsMenuButtonP
    );
 }
 
-export function QSavedFiltersMenuButton({isOpen, onClickHandler}: QActionsMenuButtonProps): JSX.Element
-{
-   return (
-      <Box width={standardWidth} ml={1}>
-         <MDButton
-            variant={isOpen ? "contained" : "outlined"}
-            color="dark"
-            onClick={onClickHandler}
-            fullWidth
-            startIcon={<Icon>filter_alt</Icon>}
-         >
-            saved&nbsp;filters&nbsp;
-            <Icon>keyboard_arrow_down</Icon>
-         </MDButton>
-      </Box>
-   );
-}
-
 interface QCancelButtonProps
 {
    onClickHandler: any;

src/qqq/components/forms/DynamicSelect.tsx

@@ -321,9 +321,14 @@ function DynamicSelect({tableName, processName, fieldName, overrideId, fieldLabe
             {
                setOpen(false);
             }}
-            isOptionEqualToValue={(option, value) => option.id === value.id}
+            isOptionEqualToValue={(option, value) => value !== null && value !== undefined && option.id === value.id}
             getOptionLabel={(option) =>
             {
+               if(option === null || option === undefined)
+               {
+                  return ("");
+               }
+
                // @ts-ignore
                if(option && option.length)
                {

src/qqq/components/horseshoe/Breadcrumbs.tsx

@@ -70,7 +70,7 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    }
 
    const routes: string[] | any = route.slice(0, -1);
-   const {pageHeader, pathToLabelMap, branding} = useContext(QContext);
+   const {pathToLabelMap, branding} = useContext(QContext);
 
    const fullPathToLabel = (fullPath: string, route: string): string =>
    {
@@ -92,7 +92,18 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
    let accumulatedPath = "";
    for (let i = 0; i < routes.length; i++)
    {
-      if(routes[i] === "savedFilter")
+      ////////////////////////////////////////////////////////
+      // avoid showing "saved view" as a breadcrumb element //
+      ////////////////////////////////////////////////////////
+      if(routes[i] === "savedView")
+      {
+         continue;
+      }
+
+      ///////////////////////////////////////////////////////////////////////
+      // avoid showing the table name if it's the element before savedView //
+      ///////////////////////////////////////////////////////////////////////
+      if(i < routes.length - 1 && routes[i+1] == "savedView")
       {
          continue;
       }
@@ -138,15 +149,6 @@ function QBreadcrumbs({icon, title, route, light}: Props): JSX.Element
                </Link>
             ))}
          </MuiBreadcrumbs>
-         <MDTypography
-            pt={1}
-            textTransform="capitalize"
-            variant="h3"
-            color={light ? "white" : "dark"}
-            noWrap
-         >
-            {pageHeader}
-         </MDTypography>
       </Box>
    );
 }

src/qqq/components/horseshoe/NavBar.tsx

@@ -22,12 +22,10 @@
 import {Popper, InputAdornment} from "@mui/material";
 import AppBar from "@mui/material/AppBar";
 import Autocomplete from "@mui/material/Autocomplete";
-import Badge from "@mui/material/Badge";
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import IconButton from "@mui/material/IconButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
-import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
 import Toolbar from "@mui/material/Toolbar";
 import React, {useContext, useEffect, useState} from "react";
@@ -35,6 +33,7 @@ import {useLocation, useNavigate} from "react-router-dom";
 import QContext from "QContext";
 import QBreadcrumbs, {routeToLabel} from "qqq/components/horseshoe/Breadcrumbs";
 import {navbar, navbarContainer, navbarRow, navbarMobileMenu, recentlyViewedMenu,} from "qqq/components/horseshoe/Styles";
+import MDTypography from "qqq/components/legacy/MDTypography";
 import {setTransparentNavbar, useMaterialUIController, setMiniSidenav} from "qqq/context";
 import HistoryUtils from "qqq/utils/HistoryUtils";
 
@@ -65,6 +64,8 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
    const route = useLocation().pathname.split("/").slice(1);
    const navigate = useNavigate();
 
+   const {pageHeader} = useContext(QContext);
+
    useEffect(() =>
    {
       // Setting the navbar type
@@ -234,25 +235,27 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element
       >
          <Toolbar sx={navbarContainer}>
             <Box color="inherit" mb={{xs: 1, md: 0}} sx={(theme) => navbarRow(theme, {isMini})}>
-               <IconButton
-                  size="small"
-                  disableRipple
-                  color="inherit"
-                  sx={navbarMobileMenu}
-                  onClick={handleMiniSidenav}
-               >
+               <IconButton size="small" disableRipple color="inherit" sx={navbarMobileMenu} onClick={handleMiniSidenav}>
                   <Icon sx={iconsStyle} fontSize="large">menu</Icon>
                </IconButton>
                <QBreadcrumbs icon="home" title={breadcrumbTitle} route={route} light={light} />
             </Box>
             {isMini ? null : (
                <Box sx={(theme) => navbarRow(theme, {isMini})}>
-                  <Box pr={0} mr={-2} mt={-4}>
+                  <Box pr={0} mr={-2}>
                      {renderHistory()}
                   </Box>
                </Box>
             )}
          </Toolbar>
+         {
+            pageHeader &&
+            <Box display="flex" justifyContent="space-between">
+               <MDTypography pb="0.5rem" textTransform="capitalize" variant="h3" color={light ? "white" : "dark"} noWrap>
+                  {pageHeader}
+               </MDTypography>
+            </Box>
+         }
       </AppBar>
    );
 }

src/qqq/components/horseshoe/Styles.ts

@@ -66,12 +66,12 @@ function navbar(theme: Theme | any, ownerState: any)
          return color;
       },
       top: absolute ? 0 : pxToRem(12),
-      minHeight: pxToRem(75),
+      minHeight: "auto",
       display: "grid",
       alignItems: "center",
       borderRadius: borderRadius.xl,
-      paddingTop: pxToRem(8),
-      paddingBottom: pxToRem(8),
+      paddingTop: pxToRem(0),
+      paddingBottom: pxToRem(0),
       paddingRight: absolute ? pxToRem(8) : 0,
       paddingLeft: absolute ? pxToRem(16) : 0,
 
@@ -85,7 +85,7 @@ function navbar(theme: Theme | any, ownerState: any)
       "& .MuiToolbar-root": {
          display: "flex",
          justifyContent: "space-between",
-         alignItems: "center",
+         alignItems: "flex-start",
 
          [breakpoints.up("sm")]: {
             minHeight: "auto",
@@ -99,10 +99,10 @@ const navbarContainer = ({breakpoints}: Theme): any => ({
    flexDirection: "column",
    alignItems: "flex-start",
    justifyContent: "space-between",
+   padding: "0 !important",
 
    [breakpoints.up("md")]: {
       flexDirection: "row",
-      alignItems: "center",
       paddingTop: "0",
       paddingBottom: "0",
    },
@@ -152,6 +152,7 @@ const navbarDesktopMenu = ({breakpoints}: Theme) => ({
 });
 
 const recentlyViewedMenu = ({breakpoints}: Theme) => ({
+   marginTop: "-0.5rem",
    "& .MuiInputLabel-root": {
       color: colors.gray.main,
       fontWeight: "500",

src/qqq/components/misc/GotoRecordDialog.tsx

@@ -61,7 +61,7 @@ const qController = Client.getInstance();
 function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 {
    const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-   if(mdbMetaData && mdbMetaData.gotoFieldNames)
+   if (mdbMetaData && mdbMetaData.gotoFieldNames)
    {
       return (true);
    }
@@ -71,25 +71,25 @@ function hasGotoFieldNames(tableMetaData: QTableMetaData): boolean
 
 function GotoRecordDialog(props: Props): JSX.Element
 {
-   const fields: QFieldMetaData[] = []
+   const fields: QFieldMetaData[] = [];
 
    let pkey = props?.tableMetaData?.fields.get(props?.tableMetaData?.primaryKeyField);
    let addedPkey = false;
    const mdbMetaData = props?.tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-   if(mdbMetaData)
+   if (mdbMetaData)
    {
-      if(mdbMetaData.gotoFieldNames)
+      if (mdbMetaData.gotoFieldNames)
       {
-         for(let i = 0; i<mdbMetaData.gotoFieldNames.length; i++)
+         for (let i = 0; i < mdbMetaData.gotoFieldNames.length; i++)
          {
             // todo - multi-field keys!!
             let fieldName = mdbMetaData.gotoFieldNames[i][0];
             let field = props.tableMetaData.fields.get(fieldName);
-            if(field)
+            if (field)
             {
                fields.push(field);
 
-               if(field.name == pkey.name)
+               if (field.name == pkey.name)
                {
                   addedPkey = true;
                }
@@ -98,17 +98,17 @@ function GotoRecordDialog(props: Props): JSX.Element
       }
    }
 
-   if(pkey && !addedPkey)
+   if (pkey && !addedPkey)
    {
       fields.unshift(pkey);
    }
 
    const makeInitialValues = () =>
    {
-      const rs = {} as {[field: string]: string};
+      const rs = {} as { [field: string]: string };
       fields.forEach((field) => rs[field.name] = "");
       return (rs);
-   }
+   };
 
    const [error, setError] = useState("");
    const [values, setValues] = useState(makeInitialValues());
@@ -118,49 +118,49 @@ function GotoRecordDialog(props: Props): JSX.Element
    {
       values[fieldName] = newValue;
       setValues(JSON.parse(JSON.stringify(values)));
-   }
+   };
 
    const close = () =>
    {
       setError("");
       setValues(makeInitialValues());
       props.closeHandler();
-   }
+   };
 
    const keyPressed = (e: React.KeyboardEvent<HTMLDivElement>) =>
    {
       // @ts-ignore
       const targetId: string = e.target?.id;
 
-      if(e.key == "Esc")
+      if (e.key == "Esc")
       {
-         if(props.mayClose)
+         if (props.mayClose)
          {
             close();
          }
       }
-      else if(e.key == "Enter" && targetId?.startsWith("gotoInput-"))
+      else if (e.key == "Enter" && targetId?.startsWith("gotoInput-"))
       {
          const index = targetId?.replaceAll("gotoInput-", "");
          document.getElementById("gotoButton-" + index).click();
       }
-   }
+   };
 
    const closeRequested = () =>
    {
-      if(props.mayClose)
+      if (props.mayClose)
       {
          close();
       }
-   }
+   };
 
    const goClicked = async (fieldName: string) =>
    {
       setError("");
-      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, "AND", null, 10);
+      const filter = new QQueryFilter([new QFilterCriteria(fieldName, QCriteriaOperator.EQUALS, [values[fieldName]])], null, null, "AND", null, 10);
       try
       {
-         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant)
+         const queryResult = await qController.query(props.tableMetaData.name, filter, null, props.tableVariant);
          if (queryResult.length == 0)
          {
             setError("Record not found.");
@@ -177,19 +177,19 @@ function GotoRecordDialog(props: Props): JSX.Element
             setTimeout(() => setError(""), 3000);
          }
       }
-      catch(e)
+      catch (e)
       {
          // @ts-ignore
          setError(`Error: ${(e && e.message) ? e.message : e}`);
          setTimeout(() => setError(""), 6000);
       }
-   }
+   };
 
-   if(props.tableMetaData)
+   if (props.tableMetaData)
    {
       if (fields.length == 0 && !error)
       {
-         setError("This table is not configured for this feature.")
+         setError("This table is not configured for this feature.");
       }
    }
 
@@ -244,7 +244,7 @@ function GotoRecordDialog(props: Props): JSX.Element
                : <Box>&nbsp;</Box>
          }
       </Dialog>
-   )
+   );
 }
 
 interface GotoRecordButtonProps
@@ -266,7 +266,7 @@ GotoRecordButton.defaultProps = {
 
 export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
 {
-   const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen)
+   const [gotoIsOpen, setGotoIsOpen] = useState(props.autoOpen);
 
    function openGoto()
    {
@@ -282,7 +282,7 @@ export function GotoRecordButton(props: GotoRecordButtonProps): JSX.Element
    return (
       <React.Fragment>
          {
-            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto} >Go To...</Button>
+            props.buttonVisible && hasGotoFieldNames(props.tableMetaData) && <Button onClick={openGoto}>Go To...</Button>
          }
          <GotoRecordDialog metaData={props.metaData} tableMetaData={props.tableMetaData} tableVariant={props.tableVariant} isOpen={gotoIsOpen} closeHandler={closeGoto} mayClose={props.mayClose} subHeader={props.subHeader} />
       </React.Fragment>

src/qqq/components/misc/HelpContent.tsx

@@ -28,7 +28,7 @@ import QContext from "QContext";
 
 interface Props
 {
-   helpContents: QHelpContent[];
+   helpContents: null | QHelpContent | QHelpContent[];
    roles: string[];
    heading?: string;
    helpContentKey?: string;
@@ -93,9 +93,27 @@ const getMatchingHelpContent = (helpContents: QHelpContent[], roles: string[]):
 /*******************************************************************************
  ** test if a list of help contents would find any matches from a list of roles.
  *******************************************************************************/
-export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
+export const hasHelpContent = (helpContents: null | QHelpContent | QHelpContent[], roles: string[]) =>
 {
-   return getMatchingHelpContent(helpContents, roles) != null;
+   return getMatchingHelpContent(nullOrSingletonOrArrayToArray(helpContents), roles) != null;
+}
+
+
+/*******************************************************************************
+ **
+ *******************************************************************************/
+const nullOrSingletonOrArrayToArray = (helpContents: null | QHelpContent | QHelpContent[]): QHelpContent[] =>
+{
+   let array: QHelpContent[] = [];
+   if(Array.isArray(helpContents))
+   {
+      array = helpContents;
+   }
+   else if(helpContents != null)
+   {
+      array.push(helpContents);
+   }
+   return (array);
 }
 
 
@@ -106,7 +124,8 @@ export const hasHelpContent = (helpContents: QHelpContent[], roles: string[]) =>
 function HelpContent({helpContents, roles, heading, helpContentKey}: Props): JSX.Element
 {
    const {helpHelpActive} = useContext(QContext);
-   let selectedHelpContent = getMatchingHelpContent(helpContents, roles);
+   const helpContentsArray = nullOrSingletonOrArrayToArray(helpContents);
+   let selectedHelpContent = getMatchingHelpContent(helpContentsArray, roles);
 
    let content = null;
    if (helpHelpActive)

src/qqq/components/misc/RecordSidebar.tsx

@@ -41,7 +41,7 @@ interface Props
 
 QRecordSidebar.defaultProps = {
    light: false,
-   stickyTop: "110px",
+   stickyTop: "1rem",
 };
 
 interface SidebarEntry
@@ -76,7 +76,7 @@ function QRecordSidebar({tableSections, widgetMetaDataList, light, stickyTop}: P
 
 
    return (
-      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 200px)"}}>
+      <Card sx={{borderRadius: "0.75rem", position: "sticky", top: stickyTop, overflow: "auto", maxHeight: "calc(100vh - 2rem)"}}>
          <Box component="ul" display="flex" flexDirection="column" p={2} m={0} sx={{listStyle: "none"}}>
             {
                sidebarEntries ? sidebarEntries.map((entry: SidebarEntry, key: number) => (

src/qqq/components/misc/SavedFilters.tsx

@@ -1,511 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2022.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
-import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
-import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {FiberManualRecord} from "@mui/icons-material";
-import {Alert} from "@mui/material";
-import Box from "@mui/material/Box";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import Divider from "@mui/material/Divider";
-import Icon from "@mui/material/Icon";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import {GridFilterModel, GridSortItem} from "@mui/x-data-grid-pro";
-import FormData from "form-data";
-import React, {useEffect, useRef, useState} from "react";
-import {useLocation, useNavigate} from "react-router-dom";
-import {QCancelButton, QDeleteButton, QSaveButton, QSavedFiltersMenuButton} from "qqq/components/buttons/DefaultButtons";
-import FilterUtils from "qqq/utils/qqq/FilterUtils";
-
-interface Props
-{
-   qController: QController;
-   metaData: QInstance;
-   tableMetaData: QTableMetaData;
-   currentSavedFilter: QRecord;
-   filterModel?: GridFilterModel;
-   columnSortModel?: GridSortItem[];
-   filterOnChangeCallback?: (selectedSavedFilterId: number) => void;
-}
-
-function SavedFilters({qController, metaData, tableMetaData, currentSavedFilter, filterModel, columnSortModel, filterOnChangeCallback}: Props): JSX.Element
-{
-   const navigate = useNavigate();
-
-   const [savedFilters, setSavedFilters] = useState([] as QRecord[]);
-   const [savedFiltersMenu, setSavedFiltersMenu] = useState(null);
-   const [savedFiltersHaveLoaded, setSavedFiltersHaveLoaded] = useState(false);
-   const [filterIsModified, setFilterIsModified] = useState(false);
-
-   const [saveFilterPopupOpen, setSaveFilterPopupOpen] = useState(false);
-   const [isSaveFilterAs, setIsSaveFilterAs] = useState(false);
-   const [isRenameFilter, setIsRenameFilter] = useState(false);
-   const [isDeleteFilter, setIsDeleteFilter] = useState(false);
-   const [savedFilterNameInputValue, setSavedFilterNameInputValue] = useState(null as string);
-   const [popupAlertContent, setPopupAlertContent] = useState("");
-
-   const anchorRef = useRef<HTMLDivElement>(null);
-   const location = useLocation();
-   const [saveOptionsOpen, setSaveOptionsOpen] = useState(false);
-
-   const SAVE_OPTION = "Save...";
-   const DUPLICATE_OPTION = "Duplicate...";
-   const RENAME_OPTION = "Rename...";
-   const DELETE_OPTION = "Delete...";
-   const CLEAR_OPTION = "Clear Current Filter";
-   const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
-
-   const openSavedFiltersMenu = (event: any) => setSavedFiltersMenu(event.currentTarget);
-   const closeSavedFiltersMenu = () => setSavedFiltersMenu(null);
-
-   //////////////////////////////////////////////////////////////////////////
-   // load filters on first run, then monitor location or metadata changes //
-   //////////////////////////////////////////////////////////////////////////
-   useEffect(() =>
-   {
-      loadSavedFilters()
-         .then(() =>
-         {
-            if (currentSavedFilter != null)
-            {
-               let qFilter = FilterUtils.buildQFilterFromGridFilter(tableMetaData, filterModel, columnSortModel);
-               setFilterIsModified(JSON.stringify(qFilter) !== currentSavedFilter.values.get("filterJson"));
-            }
-
-            setSavedFiltersHaveLoaded(true);
-         });
-   }, [location , tableMetaData, currentSavedFilter, filterModel, columnSortModel])
-
-
-
-   /*******************************************************************************
-    ** make request to load all saved filters from backend
-    *******************************************************************************/
-   async function loadSavedFilters()
-   {
-      if (! tableMetaData)
-      {
-         return;
-      }
-
-      const formData = new FormData();
-      formData.append("tableName", tableMetaData.name);
-
-      let savedFilters = await makeSavedFilterRequest("querySavedFilter", formData);
-      setSavedFilters(savedFilters);
-   }
-
-
-
-   /*******************************************************************************
-    ** fired when a saved record is clicked from the dropdown
-    *******************************************************************************/
-   const handleSavedFilterRecordOnClick = async (record: QRecord) =>
-   {
-      setSaveFilterPopupOpen(false);
-      closeSavedFiltersMenu();
-      filterOnChangeCallback(record.values.get("id"));
-      navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedFilter/${record.values.get("id")}`);
-   };
-
-
-
-   /*******************************************************************************
-    ** fired when a save option is selected from the save... button/dropdown combo
-    *******************************************************************************/
-   const handleDropdownOptionClick = (optionName: string) =>
-   {
-      setSaveOptionsOpen(false);
-      setPopupAlertContent(null);
-      closeSavedFiltersMenu();
-      setSaveFilterPopupOpen(true);
-      setIsSaveFilterAs(false);
-      setIsRenameFilter(false);
-      setIsDeleteFilter(false)
-
-      switch(optionName)
-      {
-         case SAVE_OPTION:
-            break;
-         case DUPLICATE_OPTION:
-            setIsSaveFilterAs(true);
-            break;
-         case CLEAR_OPTION:
-            setSaveFilterPopupOpen(false)
-            filterOnChangeCallback(null);
-            navigate(metaData.getTablePathByName(tableMetaData.name));
-            break;
-         case RENAME_OPTION:
-            if(currentSavedFilter != null)
-            {
-               setSavedFilterNameInputValue(currentSavedFilter.values.get("label"));
-            }
-            setIsRenameFilter(true);
-            break;
-         case DELETE_OPTION:
-            setIsDeleteFilter(true)
-            break;
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** fired when save or delete button saved on confirmation dialogs
-    *******************************************************************************/
-   async function handleFilterDialogButtonOnClick()
-   {
-      try
-      {
-         const formData = new FormData();
-         if (isDeleteFilter)
-         {
-            formData.append("id", currentSavedFilter.values.get("id"));
-            await makeSavedFilterRequest("deleteSavedFilter", formData);
-            await(async() =>
-            {
-               handleDropdownOptionClick(CLEAR_OPTION);
-            })();
-         }
-         else
-         {
-            formData.append("tableName", tableMetaData.name);
-            formData.append("filterJson", JSON.stringify(FilterUtils.convertFilterPossibleValuesToIds(FilterUtils.buildQFilterFromGridFilter(tableMetaData, filterModel, columnSortModel))));
-
-            if (isSaveFilterAs || isRenameFilter || currentSavedFilter == null)
-            {
-               formData.append("label", savedFilterNameInputValue);
-               if(currentSavedFilter != null && isRenameFilter)
-               {
-                  formData.append("id", currentSavedFilter.values.get("id"));
-               }
-            }
-            else
-            {
-               formData.append("id", currentSavedFilter.values.get("id"));
-               formData.append("label", currentSavedFilter?.values.get("label"));
-            }
-            const recordList = await makeSavedFilterRequest("storeSavedFilter", formData);
-            await(async() =>
-            {
-               if (recordList && recordList.length > 0)
-               {
-                  setSavedFiltersHaveLoaded(false);
-                  loadSavedFilters();
-                  handleSavedFilterRecordOnClick(recordList[0]);
-               }
-            })();
-         }
-      }
-      catch (e: any)
-      {
-         setPopupAlertContent(JSON.stringify(e.message));
-      }
-   }
-
-
-
-   /*******************************************************************************
-    ** hides/shows the save options
-    *******************************************************************************/
-   const handleToggleSaveOptions = () =>
-   {
-      setSaveOptionsOpen((prevOpen) => !prevOpen);
-   };
-
-
-
-   /*******************************************************************************
-    ** closes save options menu (on clickaway)
-    *******************************************************************************/
-   const handleSaveOptionsMenuClose = (event: Event) =>
-   {
-      if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement))
-      {
-         return;
-      }
-
-      setSaveOptionsOpen(false);
-   };
-
-
-
-   /*******************************************************************************
-    ** stores the current dialog input text to state
-    *******************************************************************************/
-   const handleSaveFilterInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
-   {
-      setSavedFilterNameInputValue(event.target.value);
-   };
-
-
-
-   /*******************************************************************************
-    ** closes current dialog
-    *******************************************************************************/
-   const handleSaveFilterPopupClose = () =>
-   {
-      setSaveFilterPopupOpen(false);
-   };
-
-
-
-   /*******************************************************************************
-    ** make a request to the backend for various savedFilter processes
-    *******************************************************************************/
-   async function makeSavedFilterRequest(processName: string, formData: FormData): Promise<QRecord[]>
-   {
-      /////////////////////////
-      // fetch saved filters //
-      /////////////////////////
-      let savedFilters = [] as QRecord[]
-      try
-      {
-         //////////////////////////////////////////////////////////////////
-         // we don't want this job to go async, so, pass a large timeout //
-         //////////////////////////////////////////////////////////////////
-         formData.append(QController.STEP_TIMEOUT_MILLIS_PARAM_NAME, 60 * 1000);
-         const processResult = await qController.processInit(processName, formData, qController.defaultMultipartFormDataHeaders());
-         if (processResult instanceof QJobError)
-         {
-            const jobError = processResult as QJobError;
-            throw(jobError.error);
-         }
-         else
-         {
-            const result = processResult as QJobComplete;
-            if(result.values.savedFilterList)
-            {
-               for (let i = 0; i < result.values.savedFilterList.length; i++)
-               {
-                  const qRecord = new QRecord(result.values.savedFilterList[i]);
-                  savedFilters.push(qRecord);
-               }
-            }
-         }
-      }
-      catch (e)
-      {
-         throw(e);
-      }
-
-      return (savedFilters);
-   }
-
-   const hasStorePermission = metaData?.processes.has("storeSavedFilter");
-   const hasDeletePermission = metaData?.processes.has("deleteSavedFilter");
-   const hasQueryPermission = metaData?.processes.has("querySavedFilter");
-
-   const renderSavedFiltersMenu = tableMetaData && (
-      <Menu
-         anchorEl={savedFiltersMenu}
-         anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "left",
-         }}
-         transformOrigin={{
-            vertical: "top",
-            horizontal: "left",
-         }}
-         open={Boolean(savedFiltersMenu)}
-         onClose={closeSavedFiltersMenu}
-         keepMounted
-      >
-         <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>Filter Actions</b></MenuItem>
-         {
-            hasStorePermission &&
-            <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
-               <ListItemIcon><Icon>save</Icon></ListItemIcon>
-               Save...
-            </MenuItem>
-         }
-         {
-            hasStorePermission &&
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
-               <ListItemIcon><Icon>edit</Icon></ListItemIcon>
-               Rename...
-            </MenuItem>
-         }
-         {
-            hasStorePermission &&
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
-               <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
-               Duplicate...
-            </MenuItem>
-         }
-         {
-            hasDeletePermission &&
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
-               <ListItemIcon><Icon>delete</Icon></ListItemIcon>
-               Delete...
-            </MenuItem>
-         }
-         {
-            <MenuItem disabled={currentSavedFilter === null} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
-               <ListItemIcon><Icon>clear</Icon></ListItemIcon>
-               Clear Current Filter
-            </MenuItem>
-         }
-         <Divider/>
-         <MenuItem disabled style={{"opacity": "initial"}}><b>Your Filters</b></MenuItem>
-         {
-            savedFilters && savedFilters.length > 0 ? (
-               savedFilters.map((record: QRecord, index: number) =>
-                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedFilterRecordOnClick(record)}>
-                     {record.values.get("label")}
-                  </MenuItem>
-               )
-            ): (
-               <MenuItem >
-                  <i>No filters have been saved for this table.</i>
-               </MenuItem>
-            )
-         }
-      </Menu>
-   );
-
-   return (
-      hasQueryPermission && tableMetaData ? (
-         <Box display="flex" flexGrow={1}>
-            <QSavedFiltersMenuButton isOpen={savedFiltersMenu} onClickHandler={openSavedFiltersMenu} />
-            {renderSavedFiltersMenu}
-            <Box display="flex" justifyContent="center" flexDirection="column">
-               <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
-                  {
-                     savedFiltersHaveLoaded && currentSavedFilter && (
-                        <Typography mr={2} variant="h6">Current Filter:&nbsp;
-                           <span style={{fontWeight: "initial"}}>
-                              {currentSavedFilter.values.get("label")}
-                              {
-                                 filterIsModified && (
-                                    <Tooltip sx={{cursor: "pointer"}} title={"The current filter has been modified. Click \"Save...\" to save the changes."}>
-                                       <FiberManualRecord sx={{color: "orange", paddingLeft: "2px", paddingTop: "4px"}} />
-                                    </Tooltip>
-                                 )
-                              }
-                           </span>
-                        </Typography>
-                     )
-                  }
-               </Box>
-            </Box>
-            {
-               <Dialog
-                  open={saveFilterPopupOpen}
-                  onClose={handleSaveFilterPopupClose}
-                  aria-labelledby="alert-dialog-title"
-                  aria-describedby="alert-dialog-description"
-                  onKeyPress={(e) =>
-                  {
-                     if (e.key == "Enter")
-                     {
-                        handleFilterDialogButtonOnClick();
-                     }
-                  }}
-               >
-                  {
-                     currentSavedFilter ? (
-                        isDeleteFilter ? (
-                           <DialogTitle id="alert-dialog-title">Delete Filter</DialogTitle>
-                        ) : (
-                           isSaveFilterAs ? (
-                              <DialogTitle id="alert-dialog-title">Save Filter As</DialogTitle>
-                           ):(
-                              isRenameFilter ? (
-                                 <DialogTitle id="alert-dialog-title">Rename Filter</DialogTitle>
-                              ):(
-                                 <DialogTitle id="alert-dialog-title">Update Existing Filter</DialogTitle>
-                              )
-                           )
-                        )
-                     ):(
-                        <DialogTitle id="alert-dialog-title">Save New Filter</DialogTitle>
-                     )
-                  }
-                  <DialogContent sx={{width: "500px"}}>
-                     {
-                        (! currentSavedFilter || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
-                           <Box>
-                              {
-                                 isSaveFilterAs ? (
-                                    <Box mb={3}>Enter a name for this new saved filter.</Box>
-                                 ):(
-                                    <Box mb={3}>Enter a new name for this saved filter.</Box>
-                                 )
-                              }
-                              <TextField
-                                 autoFocus
-                                 name="custom-delimiter-value"
-                                 placeholder="Filter Name"
-                                 label="Filter Name"
-                                 inputProps={{width: "100%", maxLength: 100}}
-                                 value={savedFilterNameInputValue}
-                                 sx={{width: "100%"}}
-                                 onChange={handleSaveFilterInputChange}
-                                 onFocus={event =>
-                                 {
-                                    event.target.select();
-                                 }}
-                              />
-                           </Box>
-                        ):(
-                           isDeleteFilter ? (
-                              <Box>Are you sure you want to delete the filter {`'${currentSavedFilter?.values.get("label")}'`}?</Box>
-                           ):(
-                              <Box>Are you sure you want to update the filter {`'${currentSavedFilter?.values.get("label")}'`} with the current filter criteria?</Box>
-                           )
-                        )
-                     }
-                     {popupAlertContent ? (
-                        <Box m={1}>
-                           <Alert severity="error">{popupAlertContent}</Alert>
-                        </Box>
-                     ) : ("")}
-                  </DialogContent>
-                  <DialogActions>
-                     <QCancelButton onClickHandler={handleSaveFilterPopupClose} disabled={false} />
-                     {
-                        isDeleteFilter ?
-                           <QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} />
-                           :
-                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={(isSaveFilterAs || currentSavedFilter == null) && savedFilterNameInputValue == null}/>
-                     }
-                  </DialogActions>
-               </Dialog>
-            }
-         </Box>
-      ) : null
-   );
-}
-
-export default SavedFilters;

src/qqq/components/misc/SavedViews.tsx

@@ -0,0 +1,688 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
+import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Alert, Button} from "@mui/material";
+import Box from "@mui/material/Box";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import Tooltip from "@mui/material/Tooltip";
+import {TooltipProps} from "@mui/material/Tooltip/Tooltip";
+import FormData from "form-data";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+import {QCancelButton, QDeleteButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
+import RecordQueryView from "qqq/models/query/RecordQueryView";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+
+interface Props
+{
+   qController: QController;
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   currentSavedView: QRecord;
+   tableDefaultView: RecordQueryView;
+   view?: RecordQueryView;
+   viewAsJson?: string;
+   viewOnChangeCallback?: (selectedSavedViewId: number) => void;
+   loadingSavedView: boolean
+}
+
+function SavedViews({qController, metaData, tableMetaData, currentSavedView, tableDefaultView, view, viewAsJson, viewOnChangeCallback, loadingSavedView}: Props): JSX.Element
+{
+   const navigate = useNavigate();
+
+   const [savedViews, setSavedViews] = useState([] as QRecord[]);
+   const [savedViewsMenu, setSavedViewsMenu] = useState(null);
+   const [savedViewsHaveLoaded, setSavedViewsHaveLoaded] = useState(false);
+   const [isSubmitting, setIsSubmitting] = useState(false);
+
+   const [saveFilterPopupOpen, setSaveFilterPopupOpen] = useState(false);
+   const [isSaveFilterAs, setIsSaveFilterAs] = useState(false);
+   const [isRenameFilter, setIsRenameFilter] = useState(false);
+   const [isDeleteFilter, setIsDeleteFilter] = useState(false);
+   const [savedViewNameInputValue, setSavedViewNameInputValue] = useState(null as string);
+   const [popupAlertContent, setPopupAlertContent] = useState("");
+
+   const anchorRef = useRef<HTMLDivElement>(null);
+   const location = useLocation();
+   const [saveOptionsOpen, setSaveOptionsOpen] = useState(false);
+
+   const SAVE_OPTION = "Save...";
+   const DUPLICATE_OPTION = "Duplicate...";
+   const RENAME_OPTION = "Rename...";
+   const DELETE_OPTION = "Delete...";
+   const CLEAR_OPTION = "New View";
+   const dropdownOptions = [DUPLICATE_OPTION, RENAME_OPTION, DELETE_OPTION, CLEAR_OPTION];
+
+   const {accentColor, accentColorLight} = useContext(QContext);
+
+   const openSavedViewsMenu = (event: any) => setSavedViewsMenu(event.currentTarget);
+   const closeSavedViewsMenu = () => setSavedViewsMenu(null);
+
+   //////////////////////////////////////////////////////////////////////////
+   // load filters on first run, then monitor location or metadata changes //
+   //////////////////////////////////////////////////////////////////////////
+   useEffect(() =>
+   {
+      loadSavedViews()
+         .then(() =>
+         {
+            setSavedViewsHaveLoaded(true);
+         });
+   }, [location, tableMetaData])
+
+
+   const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
+   const viewDiffs = SavedViewUtils.diffViews(tableMetaData, baseView, view);
+   let viewIsModified = false;
+   if(viewDiffs.length > 0)
+   {
+      viewIsModified = true;
+   }
+
+   /*******************************************************************************
+    ** make request to load all saved filters from backend
+    *******************************************************************************/
+   async function loadSavedViews()
+   {
+      if (! tableMetaData)
+      {
+         return;
+      }
+
+      const formData = new FormData();
+      formData.append("tableName", tableMetaData.name);
+
+      let savedViews = await makeSavedViewRequest("querySavedView", formData);
+      setSavedViews(savedViews);
+   }
+
+
+
+   /*******************************************************************************
+    ** fired when a saved record is clicked from the dropdown
+    *******************************************************************************/
+   const handleSavedViewRecordOnClick = async (record: QRecord) =>
+   {
+      setSaveFilterPopupOpen(false);
+      closeSavedViewsMenu();
+      viewOnChangeCallback(record.values.get("id"));
+      navigate(`${metaData.getTablePathByName(tableMetaData.name)}/savedView/${record.values.get("id")}`);
+   };
+
+
+
+   /*******************************************************************************
+    ** fired when a save option is selected from the save... button/dropdown combo
+    *******************************************************************************/
+   const handleDropdownOptionClick = (optionName: string) =>
+   {
+      setSaveOptionsOpen(false);
+      setPopupAlertContent("");
+      closeSavedViewsMenu();
+      setSaveFilterPopupOpen(true);
+      setIsSaveFilterAs(false);
+      setIsRenameFilter(false);
+      setIsDeleteFilter(false)
+
+      switch(optionName)
+      {
+         case SAVE_OPTION:
+            if(currentSavedView == null)
+            {
+               setSavedViewNameInputValue("");
+            }
+            break;
+         case DUPLICATE_OPTION:
+            setSavedViewNameInputValue("");
+            setIsSaveFilterAs(true);
+            break;
+         case CLEAR_OPTION:
+            setSaveFilterPopupOpen(false)
+            viewOnChangeCallback(null);
+            navigate(metaData.getTablePathByName(tableMetaData.name));
+            break;
+         case RENAME_OPTION:
+            if(currentSavedView != null)
+            {
+               setSavedViewNameInputValue(currentSavedView.values.get("label"));
+            }
+            setIsRenameFilter(true);
+            break;
+         case DELETE_OPTION:
+            setIsDeleteFilter(true)
+            break;
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** fired when save or delete button saved on confirmation dialogs
+    *******************************************************************************/
+   async function handleFilterDialogButtonOnClick()
+   {
+      try
+      {
+         setPopupAlertContent("");
+         setIsSubmitting(true);
+
+         const formData = new FormData();
+         if (isDeleteFilter)
+         {
+            formData.append("id", currentSavedView.values.get("id"));
+            await makeSavedViewRequest("deleteSavedView", formData);
+
+            setSaveFilterPopupOpen(false);
+            setSaveOptionsOpen(false);
+
+            await(async() =>
+            {
+               handleDropdownOptionClick(CLEAR_OPTION);
+            })();
+         }
+         else
+         {
+            formData.append("tableName", tableMetaData.name);
+
+            /////////////////////////////////////////////////////////////////////////////////////////////////
+            // clone view via json serialization/deserialization                                           //
+            // then replace the viewJson in it with a copy that has had its possible values changed to ids //
+            // then stringify that for the backend                                                         //
+            /////////////////////////////////////////////////////////////////////////////////////////////////
+            const viewObject = JSON.parse(JSON.stringify(view));
+            viewObject.queryFilter = JSON.parse(JSON.stringify(FilterUtils.convertFilterPossibleValuesToIds(viewObject.queryFilter)));
+
+            ////////////////////////////////////////////////////////////////////////////
+            // strip away incomplete filters too, just for cleaner saved view filters //
+            ////////////////////////////////////////////////////////////////////////////
+            FilterUtils.stripAwayIncompleteCriteria(viewObject.queryFilter)
+
+            formData.append("viewJson", JSON.stringify(viewObject));
+
+            if (isSaveFilterAs || isRenameFilter || currentSavedView == null)
+            {
+               formData.append("label", savedViewNameInputValue);
+               if(currentSavedView != null && isRenameFilter)
+               {
+                  formData.append("id", currentSavedView.values.get("id"));
+               }
+            }
+            else
+            {
+               formData.append("id", currentSavedView.values.get("id"));
+               formData.append("label", currentSavedView?.values.get("label"));
+            }
+            const recordList = await makeSavedViewRequest("storeSavedView", formData);
+            await(async() =>
+            {
+               if (recordList && recordList.length > 0)
+               {
+                  setSavedViewsHaveLoaded(false);
+                  loadSavedViews();
+                  handleSavedViewRecordOnClick(recordList[0]);
+               }
+            })();
+         }
+
+         setSaveFilterPopupOpen(false);
+         setSaveOptionsOpen(false);
+      }
+      catch (e: any)
+      {
+         let message = JSON.stringify(e);
+         if(typeof e == "string")
+         {
+            message = e;
+         }
+         else if(typeof e == "object" && e.message)
+         {
+            message = e.message;
+         }
+
+         setPopupAlertContent(message);
+         console.log(`Setting error: ${message}`);
+      }
+      finally
+      {
+         setIsSubmitting(false);
+      }
+   }
+
+
+
+   /*******************************************************************************
+    ** hides/shows the save options
+    *******************************************************************************/
+   const handleToggleSaveOptions = () =>
+   {
+      setSaveOptionsOpen((prevOpen) => !prevOpen);
+   };
+
+
+
+   /*******************************************************************************
+    ** closes save options menu (on clickaway)
+    *******************************************************************************/
+   const handleSaveOptionsMenuClose = (event: Event) =>
+   {
+      if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement))
+      {
+         return;
+      }
+
+      setSaveOptionsOpen(false);
+   };
+
+
+
+   /*******************************************************************************
+    ** stores the current dialog input text to state
+    *******************************************************************************/
+   const handleSaveFilterInputChange = (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) =>
+   {
+      setSavedViewNameInputValue(event.target.value);
+   };
+
+
+
+   /*******************************************************************************
+    ** closes current dialog
+    *******************************************************************************/
+   const handleSaveFilterPopupClose = () =>
+   {
+      setSaveFilterPopupOpen(false);
+   };
+
+
+
+   /*******************************************************************************
+    ** make a request to the backend for various savedView processes
+    *******************************************************************************/
+   async function makeSavedViewRequest(processName: string, formData: FormData): Promise<QRecord[]>
+   {
+      /////////////////////////
+      // fetch saved filters //
+      /////////////////////////
+      let savedViews = [] as QRecord[]
+      try
+      {
+         //////////////////////////////////////////////////////////////////
+         // we don't want this job to go async, so, pass a large timeout //
+         //////////////////////////////////////////////////////////////////
+         formData.append(QController.STEP_TIMEOUT_MILLIS_PARAM_NAME, 60 * 1000);
+         const processResult = await qController.processInit(processName, formData, qController.defaultMultipartFormDataHeaders());
+         if (processResult instanceof QJobError)
+         {
+            const jobError = processResult as QJobError;
+            throw(jobError.error);
+         }
+         else
+         {
+            const result = processResult as QJobComplete;
+            if(result.values.savedViewList)
+            {
+               for (let i = 0; i < result.values.savedViewList.length; i++)
+               {
+                  const qRecord = new QRecord(result.values.savedViewList[i]);
+                  savedViews.push(qRecord);
+               }
+            }
+         }
+      }
+      catch (e)
+      {
+         throw(e);
+      }
+
+      return (savedViews);
+   }
+
+   const hasStorePermission = metaData?.processes.has("storeSavedView");
+   const hasDeletePermission = metaData?.processes.has("deleteSavedView");
+   const hasQueryPermission = metaData?.processes.has("querySavedView");
+
+   const tooltipMaxWidth = (maxWidth: string) =>
+   {
+      return ({slotProps: {
+         tooltip: {
+            sx: {
+               maxWidth: maxWidth
+            }
+         }
+      }})
+   }
+
+   const menuTooltipAttribs = {...tooltipMaxWidth("250px"), placement: "left", enterDelay: 1000} as TooltipProps;
+
+   const renderSavedViewsMenu = tableMetaData && (
+      <Menu
+         anchorEl={savedViewsMenu}
+         anchorOrigin={{vertical: "bottom", horizontal: "left",}}
+         transformOrigin={{vertical: "top", horizontal: "left",}}
+         open={Boolean(savedViewsMenu)}
+         onClose={closeSavedViewsMenu}
+         keepMounted
+         PaperProps={{style: {maxHeight: "calc(100vh - 200px)", minHeight: "200px"}}}
+      >
+         <MenuItem sx={{width: "300px"}} disabled style={{"opacity": "initial"}}><b>View Actions</b></MenuItem>
+         {
+            hasStorePermission &&
+            <Tooltip {...menuTooltipAttribs} title={<>Save your current filters, columns and settings, for quick re-use at a later time.<br /><br />You will be prompted to enter a name if you choose this option.</>}>
+               <MenuItem onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>
+                  <ListItemIcon><Icon>save</Icon></ListItemIcon>
+                  {currentSavedView ? "Save..." : "Save As..."}
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Change the name for this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(RENAME_OPTION)}>
+                  <ListItemIcon><Icon>edit</Icon></ListItemIcon>
+                  Rename...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Save a new copy this view, with a different name, separate from the original.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DUPLICATE_OPTION)}>
+                  <ListItemIcon><Icon>content_copy</Icon></ListItemIcon>
+                  Save As...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            hasStorePermission && currentSavedView != null &&
+            <Tooltip {...menuTooltipAttribs} title="Delete this saved view.">
+               <MenuItem disabled={currentSavedView === null} onClick={() => handleDropdownOptionClick(DELETE_OPTION)}>
+                  <ListItemIcon><Icon>delete</Icon></ListItemIcon>
+                  Delete...
+               </MenuItem>
+            </Tooltip>
+         }
+         {
+            <Tooltip {...menuTooltipAttribs} title="Create a new view of this table, resetting the filters and columns to their defaults.">
+               <MenuItem onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>
+                  <ListItemIcon><Icon>monitor</Icon></ListItemIcon>
+                  New View
+               </MenuItem>
+            </Tooltip>
+         }
+         <Divider/>
+         <MenuItem disabled style={{"opacity": "initial"}}><b>Your Saved Views</b></MenuItem>
+         {
+            savedViews && savedViews.length > 0 ? (
+               savedViews.map((record: QRecord, index: number) =>
+                  <MenuItem sx={{paddingLeft: "50px"}} key={`savedFiler-${index}`} onClick={() => handleSavedViewRecordOnClick(record)}>
+                     {record.values.get("label")}
+                  </MenuItem>
+               )
+            ): (
+               <MenuItem>
+                  <i>You do not have any saved views for this table.</i>
+               </MenuItem>
+            )
+         }
+      </Menu>
+   );
+
+   let buttonText = "Views";
+   let buttonBackground = "none";
+   let buttonBorder = colors.grayLines.main;
+   let buttonColor = colors.gray.main;
+
+   if(currentSavedView)
+   {
+      if (viewIsModified)
+      {
+         buttonBackground = accentColorLight;
+         buttonBorder = buttonBackground;
+         buttonColor = accentColor;
+      }
+      else
+      {
+         buttonBackground = accentColor;
+         buttonBorder = buttonBackground;
+         buttonColor = "#FFFFFF";
+      }
+   }
+
+   const buttonStyles = {
+      border: `1px solid ${buttonBorder}`,
+      backgroundColor: buttonBackground,
+      color: buttonColor,
+      "&:focus:not(:hover)": {
+         color: buttonColor,
+         backgroundColor: buttonBackground,
+      },
+      "&:hover": {
+         color: buttonColor,
+         backgroundColor: buttonBackground,
+      }
+   }
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function isSaveButtonDisabled(): boolean
+   {
+      if(isSubmitting)
+      {
+         return (true);
+      }
+
+      const haveInputText = (savedViewNameInputValue != null && savedViewNameInputValue.trim() != "")
+
+      if(isSaveFilterAs || isRenameFilter || currentSavedView == null)
+      {
+         if(!haveInputText)
+         {
+            return (true);
+         }
+      }
+
+      return (false);
+   }
+
+   const linkButtonStyle = {
+      minWidth: "unset",
+      textTransform: "none",
+      fontSize: "0.875rem",
+      fontWeight: "500",
+      padding: "0.5rem"
+   };
+
+   return (
+      hasQueryPermission && tableMetaData ? (
+         <>
+            <Box order="1" mr={"0.5rem"}>
+               <Button
+                  onClick={openSavedViewsMenu}
+                  sx={{
+                     borderRadius: "0.75rem",
+                     textTransform: "none",
+                     fontWeight: 500,
+                     fontSize: "0.875rem",
+                     p: "0.5rem",
+                     ... buttonStyles
+                  }}
+               >
+                  <Icon sx={{mr: "0.5rem"}}>save</Icon>
+                  {buttonText}
+                  <Icon sx={{ml: "0.5rem"}}>keyboard_arrow_down</Icon>
+               </Button>
+               {renderSavedViewsMenu}
+            </Box>
+            <Box order="3" display="flex" justifyContent="center" flexDirection="column">
+               <Box pl={2} pr={2} sx={{display: "flex", alignItems: "center"}}>
+                  {
+                     !currentSavedView && viewIsModified && <>
+                        <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                           <b>Unsaved Changes</b>
+                           <ul style={{padding: "0.5rem 1rem"}}>
+                              {
+                                 viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                              }
+                           </ul>
+                        </>}>
+                           <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save View As&hellip;</Button>
+                        </Tooltip>
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleDropdownOptionClick(CLEAR_OPTION)}>Reset All Changes</Button>
+                     </>
+                  }
+                  {
+                     currentSavedView && viewIsModified && <>
+                        <Tooltip {...tooltipMaxWidth("24rem")} sx={{cursor: "pointer"}} title={<>
+                           <b>Unsaved Changes</b>
+                           <ul style={{padding: "0.5rem 1rem"}}>
+                              {
+                                 viewDiffs.map((s: string, i: number) => <li key={i}>{s}</li>)
+                              }
+                           </ul></>}>
+                           <Box display="inline" sx={{...linkButtonStyle, p: 0, cursor: "default", position: "relative", top: "-1px"}}>{viewDiffs.length} Unsaved Change{viewDiffs.length == 1 ? "" : "s"}</Box>
+                        </Tooltip>
+
+                        <Button disableRipple={true} sx={linkButtonStyle} onClick={() => handleDropdownOptionClick(SAVE_OPTION)}>Save&hellip;</Button>
+
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${colors.grayLines.main}`} height="1rem" width="1px" position="relative" />
+
+                        <Button disableRipple={true} sx={{color: colors.gray.main, ... linkButtonStyle}} onClick={() => handleSavedViewRecordOnClick(currentSavedView)}>Reset All Changes</Button>
+                     </>
+                  }
+               </Box>
+            </Box>
+            {
+               <Dialog
+                  open={saveFilterPopupOpen}
+                  onClose={handleSaveFilterPopupClose}
+                  aria-labelledby="alert-dialog-title"
+                  aria-describedby="alert-dialog-description"
+                  onKeyPress={(e) =>
+                  {
+                     ////////////////////////////////////////////////////
+                     // make user actually hit delete button           //
+                     // but for other modes, let Enter submit the form //
+                     ////////////////////////////////////////////////////
+                     if (e.key == "Enter" && !isDeleteFilter)
+                     {
+                        handleFilterDialogButtonOnClick();
+                     }
+                  }}
+               >
+                  {
+                     currentSavedView ? (
+                        isDeleteFilter ? (
+                           <DialogTitle id="alert-dialog-title">Delete View</DialogTitle>
+                        ) : (
+                           isSaveFilterAs ? (
+                              <DialogTitle id="alert-dialog-title">Save View As</DialogTitle>
+                           ):(
+                              isRenameFilter ? (
+                                 <DialogTitle id="alert-dialog-title">Rename View</DialogTitle>
+                              ):(
+                                 <DialogTitle id="alert-dialog-title">Update Existing View</DialogTitle>
+                              )
+                           )
+                        )
+                     ):(
+                        <DialogTitle id="alert-dialog-title">Save New View</DialogTitle>
+                     )
+                  }
+                  <DialogContent sx={{width: "500px"}}>
+                     {popupAlertContent ? (
+                        <Box mb={1}>
+                           <Alert severity="error" onClose={() => setPopupAlertContent("")}>{popupAlertContent}</Alert>
+                        </Box>
+                     ) : ("")}
+                     {
+                        (! currentSavedView || isSaveFilterAs || isRenameFilter) && ! isDeleteFilter ? (
+                           <Box>
+                              {
+                                 isSaveFilterAs ? (
+                                    <Box mb={3}>Enter a name for this new saved view.</Box>
+                                 ):(
+                                    <Box mb={3}>Enter a new name for this saved view.</Box>
+                                 )
+                              }
+                              <TextField
+                                 autoFocus
+                                 name="custom-delimiter-value"
+                                 placeholder="View Name"
+                                 inputProps={{width: "100%", maxLength: 100}}
+                                 value={savedViewNameInputValue}
+                                 sx={{width: "100%"}}
+                                 onChange={handleSaveFilterInputChange}
+                                 onFocus={event =>
+                                 {
+                                    event.target.select();
+                                 }}
+                              />
+                           </Box>
+                        ):(
+                           isDeleteFilter ? (
+                              <Box>Are you sure you want to delete the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
+                           ):(
+                              <Box>Are you sure you want to update the view {`'${currentSavedView?.values.get("label")}'`}?</Box>
+                           )
+                        )
+                     }
+                  </DialogContent>
+                  <DialogActions>
+                     <QCancelButton onClickHandler={handleSaveFilterPopupClose} disabled={false} />
+                     {
+                        isDeleteFilter ?
+                           <QDeleteButton onClickHandler={handleFilterDialogButtonOnClick} disabled={isSubmitting} />
+                           :
+                           <QSaveButton label="Save" onClickHandler={handleFilterDialogButtonOnClick} disabled={isSaveButtonDisabled()}/>
+                     }
+                  </DialogActions>
+               </Dialog>
+            }
+         </>
+      ) : null
+   );
+}
+
+export default SavedViews;

src/qqq/components/query/BasicAndAdvancedQueryControls.tsx

@@ -27,8 +27,8 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {Badge, ToggleButton, ToggleButtonGroup, Typography} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -37,27 +37,37 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import Icon from "@mui/material/Icon";
-import Menu from "@mui/material/Menu";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
-import {GridFilterModel} from "@mui/x-data-grid-pro";
 import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
-import React, {forwardRef, useImperativeHandle, useReducer, useState} from "react";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
-import FieldAutoComplete from "qqq/components/misc/FieldAutoComplete";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
-import QuickFilter from "qqq/components/query/QuickFilter";
+import FieldListMenu from "qqq/components/query/FieldListMenu";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFilter";
+import XIcon from "qqq/components/query/XIcon";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
+import React, {forwardRef, useContext, useImperativeHandle, useReducer, useState} from "react";
 
 interface BasicAndAdvancedQueryControlsProps
 {
    metaData: QInstance;
    tableMetaData: QTableMetaData;
-   queryFilter: QQueryFilter;
-   gridApiRef: React.MutableRefObject<GridApiPro>
 
+   savedViewsComponent: JSX.Element;
+   columnMenuComponent: JSX.Element;
+
+   quickFilterFieldNames: string[];
+   setQuickFilterFieldNames: (names: string[]) => void;
+
+   queryFilter: QQueryFilter;
    setQueryFilter: (queryFilter: QQueryFilter) => void;
-   handleFilterChange: (filterModel: GridFilterModel, doSetQueryFilter?: boolean, isChangeFromDataGrid?: boolean) => void;
+
+   gridApiRef: React.MutableRefObject<GridApiPro>;
 
    /////////////////////////////////////////////////////////////////////////////////////////////
    // this prop is used as a way to recognize changes in the query filter internal structure, //
@@ -73,35 +83,33 @@ let debounceTimeout: string | number | NodeJS.Timeout;
 
 /*******************************************************************************
  ** Component to provide the basic & advanced query-filter controls for the
- ** RecordQuery screen.
+ ** RecordQueryOrig screen.
  **
- ** Done as a forwardRef, so RecordQuery can call some functions, e.g., when user
+ ** Done as a forwardRef, so RecordQueryOrig can call some functions, e.g., when user
  ** does things on that screen, that we need to know about in here.
  *******************************************************************************/
 const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
 {
-   const {metaData, tableMetaData, queryFilter, gridApiRef, setQueryFilter, handleFilterChange, queryFilterJSON, mode, setMode} = props
-
-   /////////////////////////////////////////////////////////
-   // get the quick-filter-field-names from local storage //
-   /////////////////////////////////////////////////////////
-   const QUICK_FILTER_FIELD_NAMES_LOCAL_STORAGE_KEY_ROOT = "qqq.quickFilterFieldNames";
-   const quickFilterFieldNamesLocalStorageKey = `${QUICK_FILTER_FIELD_NAMES_LOCAL_STORAGE_KEY_ROOT}.${tableMetaData.name}`;
-   let defaultQuickFilterFieldNames: Set<string> = new Set<string>();
-   if (localStorage.getItem(quickFilterFieldNamesLocalStorageKey))
-   {
-      defaultQuickFilterFieldNames = new Set<string>(JSON.parse(localStorage.getItem(quickFilterFieldNamesLocalStorageKey)));
-   }
+   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
 
    /////////////////////
    // state variables //
    /////////////////////
-   const [quickFilterFieldNames, setQuickFilterFieldNames] = useState(defaultQuickFilterFieldNames);
-   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null)
+   const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData));
+   const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true])));
+   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null);
    const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
    const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
+   const [mouseOverElement, setMouseOverElement] = useState(null as string);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
+   const {accentColor} = useContext(QContext);
+
+   /////////////////////////////////////////////////
+   // temporary, until we implement sub-filtering //
+   /////////////////////////////////////////////////
+   const [isQueryTooComplex, setIsQueryTooComplex] = useState(false);
+
    //////////////////////////////////////////////////////////////////////////////////
    // make some functions available to our parent - so it can tell us to do things //
    //////////////////////////////////////////////////////////////////////////////////
@@ -115,11 +123,33 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          addField(fieldName: string)
          {
             addQuickFilterField({fieldName: fieldName}, "columnMenu");
+         },
+         getCurrentMode()
+         {
+            return (mode);
          }
-      }
+      };
    });
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOverElement(name: string)
+   {
+      setMouseOverElement(name);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOutElement()
+   {
+      setMouseOverElement(null);
+   }
+
+
    /*******************************************************************************
     ** for a given field, set its default operator for quick-filter dropdowns.
     *******************************************************************************/
@@ -152,7 +182,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       let foundIndex = null;
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         if(queryFilter.criteria[i].fieldName == newCriteria.fieldName)
+         if (queryFilter.criteria[i].fieldName == newCriteria.fieldName)
          {
             queryFilter.criteria[i] = newCriteria;
             found = true;
@@ -161,21 +191,19 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          }
       }
 
-      if(doClearCriteria)
+      if (doClearCriteria)
       {
-         if(found)
+         if (found)
          {
             queryFilter.criteria.splice(foundIndex, 1);
             setQueryFilter(queryFilter);
-            const gridFilterModel = FilterUtils.buildGridFilterFromQFilter(tableMetaData, queryFilter);
-            handleFilterChange(gridFilterModel, false);
          }
          return;
       }
 
-      if(!found)
+      if (!found)
       {
-         if(!queryFilter.criteria)
+         if (!queryFilter.criteria)
          {
             queryFilter.criteria = [];
          }
@@ -183,14 +211,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          found = true;
       }
 
-      if(found)
+      if (found)
       {
-         clearTimeout(debounceTimeout)
+         clearTimeout(debounceTimeout);
          debounceTimeout = setTimeout(() =>
          {
             setQueryFilter(queryFilter);
-            const gridFilterModel = FilterUtils.buildGridFilterFromQFilter(tableMetaData, queryFilter);
-            handleFilterChange(gridFilterModel, false);
          }, needDebounce ? 500 : 1);
 
          forceUpdate();
@@ -207,17 +233,17 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const matches: QFilterCriteriaWithId[] = [];
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         if(queryFilter.criteria[i].fieldName == fieldName)
+         if (queryFilter.criteria[i].fieldName == fieldName)
          {
             matches.push(queryFilter.criteria[i] as QFilterCriteriaWithId);
          }
       }
 
-      if(matches.length == 0)
+      if (matches.length == 0)
       {
          return (null);
       }
-      else if(matches.length == 1)
+      else if (matches.length == 1)
       {
          return (matches[0]);
       }
@@ -228,23 +254,14 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    };
 
 
-   /*******************************************************************************
-    ** set the quick-filter field names state variable and local-storage
-    *******************************************************************************/
-   const storeQuickFilterFieldNames = () =>
-   {
-      setQuickFilterFieldNames(new Set<string>([...quickFilterFieldNames.values()]));
-      localStorage.setItem(quickFilterFieldNamesLocalStorageKey, JSON.stringify([...quickFilterFieldNames.values()]));
-   }
-
-
    /*******************************************************************************
     ** Event handler for QuickFilter component, to remove a quick filter field from
     ** the screen.
     *******************************************************************************/
    const handleRemoveQuickFilterField = (fieldName: string): void =>
    {
-      if(quickFilterFieldNames.has(fieldName))
+      const index = quickFilterFieldNames.indexOf(fieldName);
+      if (index >= 0)
       {
          //////////////////////////////////////
          // remove this field from the query //
@@ -252,8 +269,8 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          const criteria = new QFilterCriteria(fieldName, null, []);
          updateQuickCriteria(criteria, false, true);
 
-         quickFilterFieldNames.delete(fieldName);
-         storeQuickFilterFieldNames();
+         quickFilterFieldNames.splice(index, 1);
+         setQuickFilterFieldNames(quickFilterFieldNames);
       }
    };
 
@@ -265,7 +282,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       setAddQuickFilterMenu(event.currentTarget);
       setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
-   }
+   };
 
 
    /*******************************************************************************
@@ -274,14 +291,14 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const closeAddQuickFilterMenu = () =>
    {
       setAddQuickFilterMenu(null);
-   }
+   };
 
 
    /*******************************************************************************
     ** Add a quick-filter field to the screen, from either the user selecting one,
     ** or from a new query being activated, etc.
     *******************************************************************************/
-   const addQuickFilterField = (newValue: any, reason: "blur" | "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | "columnMenu" | string) =>
+   const addQuickFilterField = (newValue: any, reason: "blur" | "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | "columnMenu" | "activatedView" | string) =>
    {
       console.log(`Adding quick filter field as: ${JSON.stringify(newValue)}`);
       if (reason == "blur")
@@ -295,23 +312,28 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const fieldName = newValue ? newValue.fieldName : null;
       if (fieldName)
       {
-         if (!quickFilterFieldNames.has(fieldName))
+         if (defaultQuickFilterFieldNameMap[fieldName])
+         {
+            return;
+         }
+
+         if (quickFilterFieldNames.indexOf(fieldName) == -1)
          {
             /////////////////////////////////
             // add the field if we need to //
             /////////////////////////////////
-            quickFilterFieldNames.add(fieldName);
-            storeQuickFilterFieldNames();
+            quickFilterFieldNames.push(fieldName);
+            setQuickFilterFieldNames(quickFilterFieldNames);
 
             ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // only do this when user has added the field (e.g., not when adding it because of a selected view or filter-in-url) //
             ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-            if(reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected")
+            if (reason != "modeToggleClicked" && reason != "defaultFilterLoaded" && reason != "savedFilterSelected" && reason != "activatedView")
             {
                setTimeout(() => document.getElementById(`quickFilter.${fieldName}`)?.click(), 5);
             }
          }
-         else if(reason == "columnMenu")
+         else if (reason == "columnMenu")
          {
             //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // if field was already on-screen, but user clicked an option from the columnMenu, then open the quick-filter field //
@@ -325,12 +347,30 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
 
    /*******************************************************************************
-    ** event handler for the Filter Buidler button - e.g., opens the parent's grid's
+    **
+    *******************************************************************************/
+   const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
+   {
+      let fullFieldName = field.name;
+      if (table && table.name != tableMetaData.name)
+      {
+         fullFieldName = `${table.name}.${field.name}`;
+      }
+
+      addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
+   };
+
+
+   /*******************************************************************************
+    ** event handler for the Filter Builder button - e.g., opens the parent's grid's
     ** filter panel
     *******************************************************************************/
    const openFilterBuilder = (e: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) =>
    {
-      gridApiRef.current.showFilterPanel();
+      if (!isQueryTooComplex)
+      {
+         gridApiRef.current.showFilterPanel();
+      }
    };
 
 
@@ -342,17 +382,27 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       if (isYesButton || event.key == "Enter")
       {
          setShowClearFiltersWarning(false);
-         handleFilterChange({items: []} as GridFilterModel);
+         setQueryFilter(new QQueryFilter([], queryFilter.orderBys));
       }
    };
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   const removeCriteriaByIndex = (index: number) =>
+   {
+      queryFilter.criteria.splice(index, 1);
+      setQueryFilter(queryFilter);
+   };
+
+
    /*******************************************************************************
     ** format the current query as a string for showing on-screen as a preview.
     *******************************************************************************/
-   const queryToAdvancedString = () =>
+   const queryToAdvancedString = (thisQueryFilter: QQueryFilter) =>
    {
-      if(queryFilter == null || !queryFilter.criteria)
+      if (queryFilter == null || !queryFilter.criteria)
       {
          return (<span></span>);
       }
@@ -360,19 +410,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       let counter = 0;
 
       return (
-         <span>
-            {queryFilter.criteria.map((criteria, i) =>
+         <React.Fragment>
+            {thisQueryFilter.criteria?.map((criteria, i) =>
             {
-               if(criteria && criteria.fieldName && criteria.operator)
+               const {criteriaIsValid} = validateCriteria(criteria, null);
+               if (criteriaIsValid)
                {
-                  const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
-                  const valuesString = FilterUtils.getValuesString(field, criteria);
                   counter++;
-
                   return (
-                     <span key={i}>
-                        {counter > 1 ? <span>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
-                        <b>{field.label}</b> {criteria.operator} <span style={{color: "blue"}}>{valuesString}</span>&nbsp;
+                     <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
+                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
+                        {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
+                        {!isQueryTooComplex && (
+                           mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
+                              <XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>
+                        )}
+                        {counter > 1 && i == thisQueryFilter.criteria?.length - 1 && thisQueryFilter.subFilters?.length > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
                      </span>
                   );
                }
@@ -381,7 +434,19 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                   return (<span />);
                }
             })}
-         </span>
+
+            {thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, j) =>
+            {
+               return (
+                  <React.Fragment key={j}>
+                     {j > 0 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span></span>}
+                     <span style={{display: "flex", marginRight: "0.20rem"}}>(</span>
+                     {queryToAdvancedString(filter)}
+                     <span style={{display: "flex", marginRight: "0.20rem"}}>)</span>
+                  </React.Fragment>
+               );
+            }))}
+         </React.Fragment>
       );
    };
 
@@ -393,7 +458,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       if (newValue)
       {
-         if(newValue == "basic")
+         if (newValue == "basic")
          {
             ////////////////////////////////////////////////////////////////////////////////
             // we're always allowed to go to advanced -                                   //
@@ -402,7 +467,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
             if (!canFilterWorkAsBasic)
             {
-               console.log("Query cannot work as basic - so - not allowing toggle to basic.")
+               console.log("Query cannot work as basic - so - not allowing toggle to basic.");
                return;
             }
 
@@ -411,7 +476,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             ////////////////////////////////////////////////////////////////////////////////////////////////
             if (queryFilter && queryFilter.criteria)
             {
-               ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "modeToggleClicked");
+               ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "modeToggleClicked", "basic");
             }
          }
 
@@ -427,13 +492,18 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     ** make sure that all fields in the current query are on-screen as quick-filters
     ** (that is, if the query can be basic)
     *******************************************************************************/
-   const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string) =>
+   const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
    {
-      if(!tableMetaData || !queryFilter)
+      if (!tableMetaData || !queryFilter)
       {
          return;
       }
 
+      //////////////////////////////////////////////
+      // set a flag if the query is 'too complex' //
+      //////////////////////////////////////////////
+      setIsQueryTooComplex(queryFilter.subFilters?.length > 0);
+
       const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
       if (!canFilterWorkAsBasic)
       {
@@ -443,78 +513,116 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          return;
       }
 
+      const modeToUse = newMode ?? mode;
+      if (modeToUse == "basic")
+      {
+         for (let i = 0; i < queryFilter?.criteria?.length; i++)
+         {
+            const criteria = queryFilter.criteria[i];
+            if (criteria && criteria.fieldName)
+            {
+               addQuickFilterField(criteria, reason);
+            }
+         }
+      }
+   };
+
+
+   /*******************************************************************************
+    ** count how many valid criteria are in the query - for showing badge
+    *******************************************************************************/
+   const countValidCriteria = (queryFilter: QQueryFilter): number =>
+   {
+      let count = 0;
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
-         const criteria = queryFilter.criteria[i];
-         if (criteria && criteria.fieldName)
+         const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
+         if (criteriaIsValid)
          {
-            addQuickFilterField(criteria, reason);
+            count++;
          }
       }
+
+      /////////////////////////////////////////////////////////////
+      // recursively add any children filters to the total count //
+      /////////////////////////////////////////////////////////////
+      for (let i = 0; i < queryFilter.subFilters?.length; i++)
+      {
+         count += countValidCriteria(queryFilter.subFilters[i]);
+      }
+
+      return count;
+   };
+
+
+   /*******************************************************************************
+    ** Event handler for setting the sort from that menu
+    *******************************************************************************/
+   const handleSetSort = (field: QFieldMetaData, table: QTableMetaData, isAscending: boolean = true): void =>
+   {
+      const fullFieldName = table && table.name != tableMetaData.name ? `${table.name}.${field.name}` : field.name;
+      queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)];
+
+      setQueryFilter(queryFilter);
+      forceUpdate();
+   };
+
+
+   /*******************************************************************************
+    ** event handler for a click on a field's up or down arrow in the sort menu
+    *******************************************************************************/
+   const handleSetSortArrowClick = (field: QFieldMetaData, table: QTableMetaData, event: any): void =>
+   {
+      event.stopPropagation();
+
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // make sure this is an event handler for one of our icons (not something else in the dom here in our end-adornments) //
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      const isAscending = event.target.innerHTML == "arrow_upward";
+      const isDescending = event.target.innerHTML == "arrow_downward";
+      if (isAscending || isDescending)
+      {
+         handleSetSort(field, table, isAscending);
+      }
+   };
+
+
+   /*******************************************************************************
+    ** event handler for clicking the current sort up/down arrow, to toggle direction.
+    *******************************************************************************/
+   function toggleSortDirection(event: React.MouseEvent<HTMLSpanElement, MouseEvent>): void
+   {
+      event.stopPropagation();
+      try
+      {
+         queryFilter.orderBys[0].isAscending = !queryFilter.orderBys[0].isAscending;
+         setQueryFilter(queryFilter);
+         forceUpdate();
+      }
+      catch (e)
+      {
+         console.log(`Error toggling sort: ${e}`);
+      }
    }
 
-
-   //////////////////////////////////////////////////////////////////////////////
-   // if there aren't any quick-filters turned on, get defaults from the table //
-   // only run this block upon a first-render                                  //
-   //////////////////////////////////////////////////////////////////////////////
-   const [firstRender, setFirstRender] = useState(true);
-   if(firstRender)
+   /////////////////////////////////
+   // set up the sort menu button //
+   /////////////////////////////////
+   let sortButtonContents = <>Sort...</>;
+   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
    {
-      setFirstRender(false);
-
-      if (defaultQuickFilterFieldNames == null || defaultQuickFilterFieldNames.size == 0)
-      {
-         defaultQuickFilterFieldNames = new Set<string>();
-
-         //////////////////////////////////////////////////////////////////////////////////////////////////
-         // check if there's materialDashboard tableMetaData, and if it has defaultQuickFilterFieldNames //
-         //////////////////////////////////////////////////////////////////////////////////////////////////
-         const mdbMetaData = tableMetaData?.supplementalTableMetaData?.get("materialDashboard");
-         if (mdbMetaData)
-         {
-            if (mdbMetaData?.defaultQuickFilterFieldNames?.length)
-            {
-               for (let i = 0; i < mdbMetaData.defaultQuickFilterFieldNames.length; i++)
-               {
-                  defaultQuickFilterFieldNames.add(mdbMetaData.defaultQuickFilterFieldNames[i]);
-               }
-            }
-         }
-
-         /////////////////////////////////////////////
-         // if still none, then look for T1 section //
-         /////////////////////////////////////////////
-         if (defaultQuickFilterFieldNames.size == 0)
-         {
-            if (tableMetaData.sections)
-            {
-               const t1Sections = tableMetaData.sections.filter((s: QTableSection) => s.tier == "T1");
-               if (t1Sections.length)
-               {
-                  for (let i = 0; i < t1Sections.length; i++)
-                  {
-                     if (t1Sections[i].fieldNames)
-                     {
-                        for (let j = 0; j < t1Sections[i].fieldNames.length; j++)
-                        {
-                           defaultQuickFilterFieldNames.add(t1Sections[i].fieldNames[j]);
-                        }
-                     }
-                  }
-               }
-            }
-         }
-
-         setQuickFilterFieldNames(defaultQuickFilterFieldNames);
-      }
+      const orderBy = queryFilter.orderBys[0];
+      const orderByFieldName = orderBy.fieldName;
+      const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, orderByFieldName);
+      const fieldLabel = fieldTable.name == tableMetaData.name ? field.label : `${fieldTable.label}: ${field.label}`;
+      sortButtonContents = <>Sort: {fieldLabel} <Icon onClick={toggleSortDirection} sx={{ml: "0.5rem"}}>{orderBy.isAscending ? "arrow_upward" : "arrow_downward"}</Icon></>;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // this is being used as a version of like forcing that we get re-rendered if the query filter changes... //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    const [lastIndex, setLastIndex] = useState(queryFilterJSON);
-   if(queryFilterJSON != lastIndex)
+   if (queryFilterJSON != lastIndex)
    {
       ensureAllFilterCriteriaAreActiveQuickFilters(tableMetaData, queryFilter, "defaultFilterLoaded");
       setLastIndex(queryFilterJSON);
@@ -523,137 +631,202 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    ///////////////////////////////////////////////////
    // set some status flags based on current filter //
    ///////////////////////////////////////////////////
-   const hasValidFilters = queryFilter && queryFilter.criteria && queryFilter.criteria.length > 0; // todo - should be better (e.g., see if operator & values are set)
-   const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+   const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
+   const {canFilterWorkAsBasic, canFilterWorkAsAdvanced, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
    let reasonWhyBasicIsDisabled = null;
-   if(reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
+   if (canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
    {
       reasonWhyBasicIsDisabled = <>
-         Your current Filter cannot be managed using BASIC mode because:
+         Your current Filter cannot be managed using Basic mode because:
          <ul style={{marginLeft: "1rem"}}>
             {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
          </ul>
-      </>
+      </>;
+   }
+   if (isQueryTooComplex)
+   {
+      reasonWhyBasicIsDisabled = <>
+         Your current Filter is too complex to modify because it contains Sub-filters.
+      </>;
    }
 
-   return (
-      <Box display="flex" alignItems="flex-start" justifyContent="space-between" flexWrap="wrap" position="relative" top={"-0.5rem"} left={"0.5rem"} minHeight="2.5rem">
-         <Box display="flex" alignItems="center" flexShrink={1} flexGrow={1}>
-            {
-               mode == "basic" &&
-               <Box width="100px" flexShrink={1} flexGrow={1}>
-                  {
-                     tableMetaData &&
-                     [...quickFilterFieldNames.values()].map((fieldName) =>
-                     {
-                        const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-                        let defaultOperator = getDefaultOperatorForField(field);
+   const borderGray = colors.grayLines.main;
 
-                        return (
-                           field && <QuickFilter
-                              key={fieldName}
-                              fullFieldName={fieldName}
-                              tableMetaData={tableMetaData}
-                              updateCriteria={updateQuickCriteria}
-                              criteriaParam={getQuickCriteriaParam(fieldName)}
-                              fieldMetaData={field}
-                              defaultOperator={defaultOperator}
-                              handleRemoveQuickFilterField={handleRemoveQuickFilterField} />
-                        );
-                     })
-                  }
-                  {
-                     tableMetaData &&
+   const sortMenuComponent = (
+      <FieldListMenu
+         idPrefix="sort"
+         tableMetaData={tableMetaData}
+         placeholder="Search Fields"
+         buttonProps={{disableRipple: true, sx: {textTransform: "none", color: colors.gray.main, paddingRight: 0}}}
+         buttonChildren={sortButtonContents}
+         isModeSelectOne={true}
+         handleSelectedField={handleSetSort}
+         fieldEndAdornment={<Box whiteSpace="nowrap"><Icon>arrow_upward</Icon><Icon>arrow_downward</Icon></Box>}
+         handleAdornmentClick={handleSetSortArrowClick}
+      />);
+
+   const filterBuilderMouseEvents =
+      {
+         onMouseOver: () => handleMouseOverElement("filterBuilderButton"),
+         onMouseOut: () => handleMouseOutElement()
+      };
+
+   return (
+      <Box pb={mode == "advanced" ? "0.25rem" : "0"}>
+
+         {/* First row:  Saved Views button (with Columns button in the middle of it), then space-between, then basic|advanced toggle */}
+         <Box display="flex" justifyContent="space-between" pt={"0.5rem"} pb={"0.5rem"}>
+            <Box display="flex">
+               {savedViewsComponent}
+               {columnMenuComponent}
+            </Box>
+            <Box>
+               <Tooltip title={reasonWhyBasicIsDisabled}>
+                  <ToggleButtonGroup
+                     value={mode}
+                     exclusive
+                     onChange={(event, newValue) => modeToggleClicked(newValue)}
+                     size="small"
+                     sx={{pl: 0.5, width: "10rem"}}
+                  >
+                     <ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
+                     <ToggleButton value="advanced">Advanced</ToggleButton>
+                  </ToggleButtonGroup>
+               </Tooltip>
+            </Box>
+         </Box>
+
+         {/* Second row:  Basic or advanced mode - with sort-by control on the right (of each) */}
+         <Box pb={"0.25rem"}>
+            {
+               ///////////////////////////////////////////////////////////////////////////////////
+               // basic mode - wrapping-list of fields & add-field button, then sort-by control //
+               ///////////////////////////////////////////////////////////////////////////////////
+               mode == "basic" &&
+               <Box display="flex" alignItems="flex-start" flexShrink={1} flexGrow={1}>
+                  <Box width="100px" flexShrink={1} flexGrow={1}>
                      <>
-                        <Tooltip enterDelay={500} title="Add a Quick Filter field" placement="top">
-                           <Button onClick={(e) => openAddQuickFilterMenu(e)} startIcon={<Icon>add_circle_outline</Icon>} sx={{border: "1px solid gray", whiteSpace: "nowrap", minWidth: "120px"}}>
-                              Add Field
-                           </Button>
-                        </Tooltip>
-                        <Menu
-                           anchorEl={addQuickFilterMenu}
-                           anchorOrigin={{vertical: "bottom", horizontal: "left"}}
-                           transformOrigin={{vertical: "top", horizontal: "left"}}
-                           transitionDuration={0}
-                           open={Boolean(addQuickFilterMenu)}
-                           onClose={closeAddQuickFilterMenu}
-                           keepMounted
-                        >
-                           <Box width="250px">
-                              <FieldAutoComplete
-                                 key={addQuickFilterOpenCounter} // use a unique key each time we open it, because we don't want the user's last selection to stick.
-                                 id={"add-quick-filter-field"}
-                                 metaData={metaData}
+                        {
+                           tableMetaData && defaultQuickFilterFieldNames?.map((fieldName) =>
+                           {
+                              const [field] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+                              let defaultOperator = getDefaultOperatorForField(field);
+
+                              return (<QuickFilter
+                                 key={fieldName}
+                                 fullFieldName={fieldName}
                                  tableMetaData={tableMetaData}
-                                 defaultValue={null}
-                                 handleFieldChange={(e, newValue, reason) => addQuickFilterField(newValue, reason)}
-                                 autoFocus={true}
-                                 forceOpen={Boolean(addQuickFilterMenu)}
-                                 hiddenFieldNames={[...quickFilterFieldNames.values()]}
-                              />
-                           </Box>
-                        </Menu>
+                                 updateCriteria={updateQuickCriteria}
+                                 criteriaParam={getQuickCriteriaParam(fieldName)}
+                                 fieldMetaData={field}
+                                 defaultOperator={defaultOperator}
+                                 handleRemoveQuickFilterField={null} />);
+                           })
+                        }
+                        {/* vertical rule */}
+                        <Box display="inline-block" borderLeft={`1px solid ${borderGray}`} height="1.75rem" width="1px" marginRight="0.5rem" position="relative" top="0.5rem" />
+                        {
+                           tableMetaData && quickFilterFieldNames?.map((fieldName) =>
+                           {
+                              const [field] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+                              let defaultOperator = getDefaultOperatorForField(field);
+
+                              return (defaultQuickFilterFieldNameMap[fieldName] ? null : <QuickFilter
+                                 key={fieldName}
+                                 fullFieldName={fieldName}
+                                 tableMetaData={tableMetaData}
+                                 updateCriteria={updateQuickCriteria}
+                                 criteriaParam={getQuickCriteriaParam(fieldName)}
+                                 fieldMetaData={field}
+                                 defaultOperator={defaultOperator}
+                                 handleRemoveQuickFilterField={handleRemoveQuickFilterField} />);
+                           })
+                        }
+                        {
+                           tableMetaData && <FieldListMenu
+                              key={JSON.stringify(quickFilterFieldNames)} // use a unique key each time we open it, because we don't want the user's last selection to stick.
+                              idPrefix="addQuickFilter"
+                              tableMetaData={tableMetaData}
+                              fieldNamesToHide={[...(defaultQuickFilterFieldNames ?? []), ...(quickFilterFieldNames ?? [])]}
+                              placeholder="Search Fields"
+                              buttonProps={{sx: quickFilterButtonStyles, startIcon: (<Icon>add</Icon>)}}
+                              buttonChildren={"Add Filter"}
+                              isModeSelectOne={true}
+                              handleSelectedField={handleFieldListMenuSelection}
+                           />
+                        }
                      </>
-                  }
+                  </Box>
+                  <Box>
+                     {sortMenuComponent}
+                  </Box>
                </Box>
             }
             {
+               //////////////////////////////////////////////////////////////////////////////////////////////////////////////
+               // advanced mode - 2 rows - one for Filter Builder button & sort control, 2nd row for the filter-detail box //
+               //////////////////////////////////////////////////////////////////////////////////////////////////////////////
                metaData && tableMetaData && mode == "advanced" &&
-               <>
-                  <Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
-                     <Button onClick={(e) => openFilterBuilder(e)} startIcon={<Badge badgeContent={queryFilter?.criteria?.length} color="warning" sx={{"& .MuiBadge-badge": {color: "#FFFFFF"}}} anchorOrigin={{vertical: "top", horizontal: "left"}}><Icon>filter_list</Icon></Badge>} sx={{width: "180px", minWidth: "180px", border: "1px solid gray"}}>
-                        Filter Builder
-                     </Button>
-                  </Tooltip>
-                  <div id="clearFiltersButton" style={{display: "inline-block", position: "relative", top: "2px", left: "-1.5rem", width: "1rem"}}>
-                     {
-                        hasValidFilters && (
+               <Box borderRadius="0.75rem" border={`1px solid ${borderGray}`}>
+                  <Box display="flex" justifyContent="space-between" alignItems="center">
+                     <Box p="0.5rem">
+                        <Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
                            <>
-                              <Tooltip title="Clear Filter">
-                                 <Icon sx={{cursor: "pointer"}} onClick={() => setShowClearFiltersWarning(true)}>clear</Icon>
-                              </Tooltip>
-                              <Dialog open={showClearFiltersWarning} onClose={() => setShowClearFiltersWarning(true)} onKeyPress={(e) => handleClearFiltersAction(e)}>
-                                 <DialogTitle id="alert-dialog-title">Confirm</DialogTitle>
-                                 <DialogContent>
-                                    <DialogContentText>Are you sure you want to remove all conditions from the current filter?</DialogContentText>
-                                 </DialogContent>
-                                 <DialogActions>
-                                    <QCancelButton label="No" disabled={false} onClickHandler={() => setShowClearFiltersWarning(true)} />
-                                    <QSaveButton label="Yes" iconName="check" disabled={false} onClickHandler={() => handleClearFiltersAction(null, true)} />
-                                 </DialogActions>
-                              </Dialog>
+                              <Button
+                                 className="filterBuilderButton"
+                                 onClick={(e) => openFilterBuilder(e)}
+                                 {...filterBuilderMouseEvents}
+                                 startIcon={<Icon>build</Icon>}
+                                 sx={{borderRadius: "0.75rem", padding: "0.5rem", pl: "1rem", fontSize: "0.875rem", fontWeight: 500, border: `1px solid ${accentColor}`, textTransform: "none"}}
+                              >
+                                 Filter Builder
+                                 {
+                                    countValidCriteria(queryFilter) > 0 &&
+                                    <Box {...filterBuilderMouseEvents} sx={{backgroundColor: accentColor, marginLeft: "0.25rem", minWidth: "1rem", fontSize: "0.75rem"}} borderRadius="50%" color="#FFFFFF" position="relative" top="-2px" className="filterBuilderCountBadge">
+                                       {countValidCriteria(queryFilter)}
+                                    </Box>
+                                 }
+                              </Button>
+                              {
+                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {...filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
+                              }
                            </>
-                        )
-                     }
-                  </div>
-                  <Box sx={{fontSize: "1rem"}} whiteSpace="nowrap" display="flex" ml={0.25} flexShrink={1} flexGrow={1} alignItems="center">
-                     Current Filter:
+                        </Tooltip>
+                        <Dialog open={showClearFiltersWarning} onClose={() => setShowClearFiltersWarning(false)} onKeyPress={(e) => handleClearFiltersAction(e)}>
+                           <DialogTitle id="alert-dialog-title">Confirm</DialogTitle>
+                           <DialogContent>
+                              <DialogContentText>Are you sure you want to remove all conditions from the current filter?</DialogContentText>
+                           </DialogContent>
+                           <DialogActions>
+                              <QCancelButton label="No" disabled={false} onClickHandler={() => setShowClearFiltersWarning(false)} />
+                              <QSaveButton label="Yes" iconName="check" disabled={false} onClickHandler={() => handleClearFiltersAction(null, true)} />
+                           </DialogActions>
+                        </Dialog>
+                     </Box>
+                     <Box pr={"0.5rem"}>
+                        {sortMenuComponent}
+                     </Box>
+                  </Box>
+                  <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
                      {
-                        <Box display="inline-block" border="1px solid gray" borderRadius="0.5rem" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis" width="100px" flexShrink={1} flexGrow={1} sx={{fontSize: "1rem"}} minHeight={"2rem"} p={0.25} ml={0.5}>
-                           {queryToAdvancedString()}
+                        <Box
+                           className="advancedQueryString"
+                           display="inline-block"
+                           borderTop={`1px solid ${borderGray}`}
+                           borderRadius="0 0 0.75rem 0.75rem"
+                           width="100%"
+                           sx={{fontSize: "1rem", background: "#FFFFFF"}}
+                           minHeight={"2.375rem"}
+                           p={"0.5rem"}
+                           pb={"0.125rem"}
+                           boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
+                        >
+                           <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
+                              {queryToAdvancedString(queryFilter)}
+                           </Box>
                         </Box>
                      }
                   </Box>
-               </>
-            }
-         </Box>
-         <Box display="flex" alignItems="center">
-            {
-               metaData && tableMetaData &&
-               <Box px={1} display="flex" alignItems="center">
-                  <Typography display="inline" sx={{fontSize: "1rem"}}>Mode:</Typography>
-                  <Tooltip title={reasonWhyBasicIsDisabled}>
-                     <ToggleButtonGroup
-                        value={mode}
-                        exclusive
-                        onChange={(event, newValue) => modeToggleClicked(newValue)}
-                        size="small"
-                        sx={{pl: 0.5}}
-                     >
-                        <ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
-                        <ToggleButton value="advanced">Advanced</ToggleButton>
-                     </ToggleButtonGroup>
-                  </Tooltip>
                </Box>
             }
          </Box>
@@ -661,4 +834,50 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    );
 });
 
-export default BasicAndAdvancedQueryControls;
+export function getDefaultQuickFilterFieldNames(table: QTableMetaData): string[]
+{
+   const defaultQuickFilterFieldNames: string[] = [];
+
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   // check if there's materialDashboard tableMetaData, and if it has defaultQuickFilterFieldNames //
+   //////////////////////////////////////////////////////////////////////////////////////////////////
+   const mdbMetaData = table?.supplementalTableMetaData?.get("materialDashboard");
+   if (mdbMetaData)
+   {
+      if (mdbMetaData?.defaultQuickFilterFieldNames?.length)
+      {
+         for (let i = 0; i < mdbMetaData.defaultQuickFilterFieldNames.length; i++)
+         {
+            defaultQuickFilterFieldNames.push(mdbMetaData.defaultQuickFilterFieldNames[i]);
+         }
+      }
+   }
+
+   /////////////////////////////////////////////
+   // if still none, then look for T1 section //
+   /////////////////////////////////////////////
+   if (defaultQuickFilterFieldNames.length == 0)
+   {
+      if (table.sections)
+      {
+         const t1Sections = table.sections.filter((s: QTableSection) => s.tier == "T1");
+         if (t1Sections.length)
+         {
+            for (let i = 0; i < t1Sections.length; i++)
+            {
+               if (t1Sections[i].fieldNames)
+               {
+                  for (let j = 0; j < t1Sections[i].fieldNames.length; j++)
+                  {
+                     defaultQuickFilterFieldNames.push(t1Sections[i].fieldNames[j]);
+                  }
+               }
+            }
+         }
+      }
+   }
+
+   return (defaultQuickFilterFieldNames);
+}
+
+export default BasicAndAdvancedQueryControls;

src/qqq/components/query/CustomPaginationComponent.tsx

@@ -0,0 +1,122 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {TablePagination} from "@mui/material";
+import Box from "@mui/material/Box";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import {GridRowsProp} from "@mui/x-data-grid-pro";
+import React from "react";
+import CustomWidthTooltip from "qqq/components/tooltips/CustomWidthTooltip";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+interface CustomPaginationProps
+{
+   tableMetaData: QTableMetaData;
+   rows: GridRowsProp[];
+   totalRecords: number;
+   distinctRecords: number;
+   pageNumber: number;
+   rowsPerPage: number;
+   loading: boolean;
+   isJoinMany: boolean;
+   handlePageChange: (value: number) => void;
+   handleRowsPerPageChange: (value: number) => void;
+}
+
+/*******************************************************************************
+ ** DataGrid custom component - for pagination!
+ *******************************************************************************/
+export default function CustomPaginationComponent({tableMetaData, rows, totalRecords, distinctRecords, pageNumber, rowsPerPage, loading, isJoinMany, handlePageChange, handleRowsPerPageChange}: CustomPaginationProps): JSX.Element
+{
+   // @ts-ignore
+   const defaultLabelDisplayedRows = ({from, to, count}) =>
+   {
+      const tooltipHTML = <>
+         The number of rows shown on this screen may be greater than the number of {tableMetaData?.label} records
+         that match your query, because you have included fields from other tables which may have
+         more than one record associated with each {tableMetaData?.label}.
+      </>
+      let distinctPart = isJoinMany ? (<Box display="inline" component="span" textAlign="right">
+         &nbsp;({ValueUtils.safeToLocaleString(distinctRecords)} distinct<CustomWidthTooltip title={tooltipHTML}>
+            <IconButton sx={{p: 0, pl: 0.25, mb: 0.25}}><Icon fontSize="small" sx={{fontSize: "1.125rem !important", color: "#9f9f9f"}}>info_outlined</Icon></IconButton>
+         </CustomWidthTooltip>
+         )
+      </Box>) : <></>;
+
+      if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_COUNT))
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // to avoid a non-countable table showing (this is what data-grid did) 91-100 even if there were only 95 records, //
+         // we'll do this... not quite good enough, but better than the original                                           //
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         if (rows.length > 0 && rows.length < to - from)
+         {
+            to = from + rows.length;
+         }
+         return (`Showing ${from.toLocaleString()} to ${to.toLocaleString()}`);
+      }
+
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // treat -1 as the sentinel that it's set as below -- remember, we did that so that 'to' would have a value in here when there's no count. //
+      /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if (count !== null && count !== undefined && count !== -1)
+      {
+         if (count === 0)
+         {
+            return (loading ? "Counting..." : "No rows");
+         }
+
+         return <span>
+            Showing {from.toLocaleString()} to {to.toLocaleString()} of
+            {
+               count == -1 ?
+                  <>more than {to.toLocaleString()}</>
+                  : <> {count.toLocaleString()}{distinctPart}</>
+            }
+         </span>;
+      }
+      else
+      {
+         return ("Counting...");
+      }
+   };
+
+
+   return (
+      <TablePagination
+         component="div"
+         sx={{minWidth: "450px"}}
+         // note - passing null here makes the 'to' param in the defaultLabelDisplayedRows also be null,
+         // so pass a sentinel value of -1...
+         count={totalRecords === null || totalRecords === undefined ? -1 : totalRecords}
+         page={pageNumber}
+         rowsPerPageOptions={[10, 25, 50, 100, 250]}
+         rowsPerPage={rowsPerPage}
+         onPageChange={(event, value) => handlePageChange(value)}
+         onRowsPerPageChange={(event) => handleRowsPerPageChange(Number(event.target.value))}
+         labelDisplayedRows={defaultLabelDisplayedRows}
+      />
+   );
+
+}

src/qqq/components/query/FieldListMenu.tsx

@@ -0,0 +1,736 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import List from "@mui/material/List/List";
+import ListItem, {ListItemProps} from "@mui/material/ListItem/ListItem";
+import Menu from "@mui/material/Menu";
+import Switch from "@mui/material/Switch";
+import TextField from "@mui/material/TextField";
+import React, {useState} from "react";
+
+interface FieldListMenuProps
+{
+   idPrefix: string;
+   heading?: string;
+   placeholder?: string;
+   tableMetaData: QTableMetaData;
+   showTableHeaderEvenIfNoExposedJoins: boolean;
+   fieldNamesToHide?: string[];
+   buttonProps: any;
+   buttonChildren: JSX.Element | string;
+
+   isModeSelectOne?: boolean;
+   handleSelectedField?: (field: QFieldMetaData, table: QTableMetaData) => void;
+
+   isModeToggle?: boolean;
+   toggleStates?: {[fieldName: string]: boolean};
+   handleToggleField?: (field: QFieldMetaData, table: QTableMetaData, newValue: boolean) => void;
+
+   fieldEndAdornment?: JSX.Element
+   handleAdornmentClick?: (field: QFieldMetaData, table: QTableMetaData, event: React.MouseEvent<any>) => void;
+}
+
+FieldListMenu.defaultProps = {
+   showTableHeaderEvenIfNoExposedJoins: false,
+   isModeSelectOne: false,
+   isModeToggle: false,
+};
+
+interface TableWithFields
+{
+   table?: QTableMetaData;
+   fields: QFieldMetaData[];
+}
+
+/*******************************************************************************
+ ** Component to render a list of fields from a table (and its join tables)
+ ** which can be interacted with...
+ *******************************************************************************/
+export default function FieldListMenu({idPrefix, heading, placeholder, tableMetaData, showTableHeaderEvenIfNoExposedJoins, buttonProps, buttonChildren, isModeSelectOne, fieldNamesToHide, handleSelectedField, isModeToggle, toggleStates, handleToggleField, fieldEndAdornment, handleAdornmentClick}: FieldListMenuProps): JSX.Element
+{
+   const [menuAnchorElement, setMenuAnchorElement] = useState(null);
+   const [searchText, setSearchText] = useState("");
+   const [focusedIndex, setFocusedIndex] = useState(null as number);
+
+   const [fieldsByTable, setFieldsByTable] = useState([] as TableWithFields[]);
+   const [collapsedTables, setCollapsedTables] = useState({} as {[tableName: string]: boolean});
+
+   const [lastMouseOverXY, setLastMouseOverXY] = useState({x: 0, y: 0});
+   const [timeOfLastArrow, setTimeOfLastArrow] = useState(0)
+
+   //////////////////
+   // check usages //
+   //////////////////
+   if(isModeSelectOne)
+   {
+      if(!handleSelectedField)
+      {
+         throw("In FieldListMenu, if isModeSelectOne=true, then a callback for handleSelectedField must be provided.");
+      }
+   }
+
+   if(isModeToggle)
+   {
+      if(!toggleStates)
+      {
+         throw("In FieldListMenu, if isModeToggle=true, then a model for toggleStates must be provided.");
+      }
+      if(!handleToggleField)
+      {
+         throw("In FieldListMenu, if isModeToggle=true, then a callback for handleToggleField must be provided.");
+      }
+   }
+
+   /////////////////////
+   // init some stuff //
+   /////////////////////
+   if (fieldsByTable.length == 0)
+   {
+      collapsedTables[tableMetaData.name] = false;
+
+      if (tableMetaData.exposedJoins?.length > 0)
+      {
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // if we have exposed joins, put the table meta data with its fields, and then all of the join tables & fields too //
+         /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         fieldsByTable.push({table: tableMetaData, fields: getTableFieldsAsAlphabeticalArray(tableMetaData)});
+
+         for (let i = 0; i < tableMetaData.exposedJoins?.length; i++)
+         {
+            const joinTable = tableMetaData.exposedJoins[i].joinTable;
+            fieldsByTable.push({table: joinTable, fields: getTableFieldsAsAlphabeticalArray(joinTable)});
+
+            collapsedTables[joinTable.name] = false;
+         }
+      }
+      else
+      {
+         ///////////////////////////////////////////////////////////
+         // no exposed joins - just the table (w/o its meta-data) //
+         ///////////////////////////////////////////////////////////
+         fieldsByTable.push({fields: getTableFieldsAsAlphabeticalArray(tableMetaData)});
+      }
+
+      setFieldsByTable(fieldsByTable);
+      setCollapsedTables(collapsedTables);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getTableFieldsAsAlphabeticalArray(table: QTableMetaData): QFieldMetaData[]
+   {
+      const fields: QFieldMetaData[] = [];
+      table.fields.forEach(field =>
+      {
+         let fullFieldName = field.name;
+         if(table.name != tableMetaData.name)
+         {
+            fullFieldName = `${table.name}.${field.name}`;
+         }
+
+         if(fieldNamesToHide && fieldNamesToHide.indexOf(fullFieldName) > -1)
+         {
+            return;
+         }
+         fields.push(field)
+      });
+      fields.sort((a, b) => a.label.localeCompare(b.label));
+      return (fields);
+   }
+
+   const fieldsByTableToShow: TableWithFields[] = [];
+   let maxFieldIndex = 0;
+   fieldsByTable.forEach((tableWithFields) =>
+   {
+      let fieldsToShowForThisTable = tableWithFields.fields.filter(doesFieldMatchSearchText);
+      if (fieldsToShowForThisTable.length > 0)
+      {
+         fieldsByTableToShow.push({table: tableWithFields.table, fields: fieldsToShowForThisTable});
+         maxFieldIndex += fieldsToShowForThisTable.length;
+      }
+   });
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getShownFieldAndTableByIndex(targetIndex: number): {field: QFieldMetaData, table: QTableMetaData}
+   {
+      let index = -1;
+      for (let i = 0; i < fieldsByTableToShow.length; i++)
+      {
+         const tableWithField = fieldsByTableToShow[i];
+         for (let j = 0; j < tableWithField.fields.length; j++)
+         {
+            index++;
+
+            if(index == targetIndex)
+            {
+               return {field: tableWithField.fields[j], table: tableWithField.table}
+            }
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    ** event handler for keys presses
+    *******************************************************************************/
+   function keyDown(event: any)
+   {
+      // console.log(`Event key: ${event.key}`);
+      setTimeout(() => document.getElementById(`field-list-dropdown-${idPrefix}-textField`).focus());
+
+      if(isModeSelectOne && event.key == "Enter" && focusedIndex != null)
+      {
+         setTimeout(() =>
+         {
+            event.stopPropagation();
+            closeMenu();
+
+            const {field, table} = getShownFieldAndTableByIndex(focusedIndex);
+            if (field)
+            {
+               handleSelectedField(field, table ?? tableMetaData);
+            }
+         });
+         return;
+      }
+
+      const keyOffsetMap: { [key: string]: number } = {
+         "End": 10000,
+         "Home": -10000,
+         "ArrowDown": 1,
+         "ArrowUp": -1,
+         "PageDown": 5,
+         "PageUp": -5,
+      };
+
+      const offset = keyOffsetMap[event.key];
+      if (offset)
+      {
+         event.stopPropagation();
+         setTimeOfLastArrow(new Date().getTime());
+
+         if (isModeSelectOne)
+         {
+            let startIndex = focusedIndex;
+            if (offset > 0)
+            {
+               /////////////////
+               // a down move //
+               /////////////////
+               if(startIndex == null)
+               {
+                  startIndex = -1;
+               }
+
+               let goalIndex = startIndex + offset;
+               if(goalIndex > maxFieldIndex - 1)
+               {
+                  goalIndex = maxFieldIndex - 1;
+               }
+
+               doSetFocusedIndex(goalIndex, true);
+            }
+            else
+            {
+               ////////////////
+               // an up move //
+               ////////////////
+               let goalIndex = startIndex + offset;
+               if(goalIndex < 0)
+               {
+                  goalIndex = 0;
+               }
+
+               doSetFocusedIndex(goalIndex, true);
+            }
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doSetFocusedIndex(i: number, tryToScrollIntoView: boolean): void
+   {
+      if (isModeSelectOne)
+      {
+         setFocusedIndex(i);
+         console.log(`Setting index to ${i}`);
+
+         if (tryToScrollIntoView)
+         {
+            const element = document.getElementById(`field-list-dropdown-${idPrefix}-${i}`);
+            element?.scrollIntoView({block: "center"});
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function setFocusedField(field: QFieldMetaData, table: QTableMetaData, tryToScrollIntoView: boolean)
+   {
+      let index = -1;
+      for (let i = 0; i < fieldsByTableToShow.length; i++)
+      {
+         const tableWithField = fieldsByTableToShow[i];
+         for (let j = 0; j < tableWithField.fields.length; j++)
+         {
+            const loopField = tableWithField.fields[j];
+            index++;
+
+            const tableMatches = (table == null || table.name == tableWithField.table.name);
+            if (tableMatches && field.name == loopField.name)
+            {
+               doSetFocusedIndex(index, tryToScrollIntoView);
+               return;
+            }
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    ** event handler for mouse-over the menu
+    *******************************************************************************/
+   function handleMouseOver(event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLLIElement>, field: QFieldMetaData, table: QTableMetaData)
+   {
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // so we're trying to fix the case where, if you put your mouse over an element, but then press up/down arrows,                                     //
+      // where the mouse will become over a different element after the scroll, and the focus will follow the mouse instead of keyboard.                  //
+      // the last x/y isn't really useful, because the mouse generally isn't left exactly where it was when the mouse-over happened (edge of the element) //
+      // but the keyboard last-arrow time that we capture, that's what's actually being useful in here                                                    //
+      //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      if(event.clientX == lastMouseOverXY.x && event.clientY == lastMouseOverXY.y)
+      {
+         // console.log("mouse didn't move, so, doesn't count");
+         return;
+      }
+
+      const now = new Date().getTime();
+      // console.log(`Compare now [${now}] to last arrow [${timeOfLastArrow}] (diff: [${now - timeOfLastArrow}])`);
+      if(now < timeOfLastArrow + 300)
+      {
+         // console.log("An arrow event happened less than 300 mills ago, so doesn't count.");
+         return;
+      }
+
+      // console.log("yay, mouse over...");
+      setFocusedField(field, table, false);
+      setLastMouseOverXY({x: event.clientX, y: event.clientY});
+   }
+
+
+   /*******************************************************************************
+    ** event handler for text input changes
+    *******************************************************************************/
+   function updateSearch(event: React.ChangeEvent<HTMLInputElement>)
+   {
+      setSearchText(event?.target?.value ?? "");
+      doSetFocusedIndex(0, true);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doesFieldMatchSearchText(field: QFieldMetaData): boolean
+   {
+      if (searchText == "")
+      {
+         return (true);
+      }
+
+      const columnLabelMinusTable = field.label.replace(/.*: /, "");
+      if (columnLabelMinusTable.toLowerCase().startsWith(searchText.toLowerCase()))
+      {
+         return (true);
+      }
+
+      try
+      {
+         ////////////////////////////////////////////////////////////
+         // try to match word-boundary followed by the filter text //
+         // e.g., "name" would match "First Name" or "Last Name"   //
+         ////////////////////////////////////////////////////////////
+         const re = new RegExp("\\b" + searchText.toLowerCase());
+         if (columnLabelMinusTable.toLowerCase().match(re))
+         {
+            return (true);
+         }
+      }
+      catch (e)
+      {
+         //////////////////////////////////////////////////////////////////////////////////
+         // in case text is an invalid regex... well, at least do a starts-with match... //
+         //////////////////////////////////////////////////////////////////////////////////
+         if (columnLabelMinusTable.toLowerCase().startsWith(searchText.toLowerCase()))
+         {
+            return (true);
+         }
+      }
+
+      const tableLabel = field.label.replace(/:.*/, "");
+      if (tableLabel)
+      {
+         try
+         {
+            ////////////////////////////////////////////////////////////
+            // try to match word-boundary followed by the filter text //
+            // e.g., "name" would match "First Name" or "Last Name"   //
+            ////////////////////////////////////////////////////////////
+            const re = new RegExp("\\b" + searchText.toLowerCase());
+            if (tableLabel.toLowerCase().match(re))
+            {
+               return (true);
+            }
+         }
+         catch (e)
+         {
+            //////////////////////////////////////////////////////////////////////////////////
+            // in case text is an invalid regex... well, at least do a starts-with match... //
+            //////////////////////////////////////////////////////////////////////////////////
+            if (tableLabel.toLowerCase().startsWith(searchText.toLowerCase()))
+            {
+               return (true);
+            }
+         }
+      }
+
+      return (false);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function openMenu(event: any)
+   {
+      setFocusedIndex(null);
+      setMenuAnchorElement(event.currentTarget);
+      setTimeout(() =>
+      {
+         document.getElementById(`field-list-dropdown-${idPrefix}-textField`).focus();
+         doSetFocusedIndex(0, true);
+      });
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function closeMenu()
+   {
+      setMenuAnchorElement(null);
+   }
+
+
+   /*******************************************************************************
+    ** Event handler for toggling a field in toggle mode
+    *******************************************************************************/
+   function handleFieldToggle(event: React.ChangeEvent<HTMLInputElement>, field: QFieldMetaData, table: QTableMetaData)
+   {
+      event.stopPropagation();
+      handleToggleField(field, table, event.target.checked);
+   }
+
+
+   /*******************************************************************************
+    ** Event handler for toggling a table in toggle mode
+    *******************************************************************************/
+   function handleTableToggle(event: React.ChangeEvent<HTMLInputElement>, table: QTableMetaData)
+   {
+      event.stopPropagation();
+
+      const fieldsList = [...table.fields.values()];
+      for (let i = 0; i < fieldsList.length; i++)
+      {
+         const field = fieldsList[i];
+         if(doesFieldMatchSearchText(field))
+         {
+            handleToggleField(field, table, event.target.checked);
+         }
+      }
+   }
+
+
+   /////////////////////////////////////////////////////////
+   // compute the table-level toggle state & count values //
+   /////////////////////////////////////////////////////////
+   const tableToggleStates: {[tableName: string]: boolean} = {};
+   const tableToggleCounts: {[tableName: string]: number} = {};
+
+   if(isModeToggle)
+   {
+      const {allOn, count} = getTableToggleState(tableMetaData, true);
+      tableToggleStates[tableMetaData.name] = allOn;
+      tableToggleCounts[tableMetaData.name] = count;
+
+      for (let i = 0; i < tableMetaData.exposedJoins?.length; i++)
+      {
+         const join = tableMetaData.exposedJoins[i];
+         const {allOn, count} = getTableToggleState(join.joinTable, false);
+         tableToggleStates[join.joinTable.name] = allOn;
+         tableToggleCounts[join.joinTable.name] = count;
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function getTableToggleState(table: QTableMetaData, isMainTable: boolean): {allOn: boolean, count: number}
+   {
+      const fieldsList = [...table.fields.values()];
+      let allOn = true;
+      let count = 0;
+      for (let i = 0; i < fieldsList.length; i++)
+      {
+         const field = fieldsList[i];
+         const name = isMainTable ? field.name : `${table.name}.${field.name}`;
+         if(!toggleStates[name])
+         {
+            allOn = false;
+         }
+         else
+         {
+            count++;
+         }
+      }
+
+      return ({allOn: allOn, count: count});
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function toggleCollapsedTable(tableName: string)
+   {
+      collapsedTables[tableName] = !collapsedTables[tableName]
+      setCollapsedTables(Object.assign({}, collapsedTables));
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function doHandleAdornmentClick(field: QFieldMetaData, table: QTableMetaData, event: React.MouseEvent<any>)
+   {
+      console.log("In doHandleAdornmentClick");
+      closeMenu();
+      handleAdornmentClick(field, table, event);
+   }
+
+
+   let index = -1;
+   const textFieldId = `field-list-dropdown-${idPrefix}-textField`;
+   let listItemPadding = isModeToggle ? "0.125rem": "0.5rem";
+
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // for z-indexes, we set each table header to i+1, then the fields in that table to i (so they go behind it) //
+   // then we increment i by 2 for the next table (so the next header goes above the previous header)           //
+   // this fixes a thing where, if one table's name wrapped to 2 lines, then when the next table below it would //
+   // come up, if it was only 1 line, then the second line from the previous one would bleed through.           //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
+   let zIndex = 1;
+
+   return (
+      <>
+         <Button onClick={openMenu} {...buttonProps}>
+            {buttonChildren}
+         </Button>
+         <Menu
+            anchorEl={menuAnchorElement}
+            anchorOrigin={{vertical: "bottom", horizontal: "left"}}
+            transformOrigin={{vertical: "top", horizontal: "left"}}
+            open={menuAnchorElement != null}
+            onClose={closeMenu}
+            onKeyDown={keyDown} // this is added here so arrow-key-up/down events don't make the whole menu become "focused" (blue outline).  it works.
+            keepMounted
+         >
+            <Box width={isModeToggle ? "305px" : "265px"} borderRadius={2} className={`fieldListMenuBody fieldListMenuBody-${idPrefix}`}>
+               {
+                  heading &&
+                  <Box px={1} py={0.5} fontWeight={"700"}>
+                     {heading}
+                  </Box>
+               }
+               <Box p={1} pt={0.5}>
+                  <TextField id={textFieldId} variant="outlined" placeholder={placeholder ?? "Search Fields"} fullWidth value={searchText} onChange={updateSearch} onKeyDown={keyDown} inputProps={{sx: {pr: "2rem"}}} />
+                  {
+                     searchText != "" && <IconButton sx={{position: "absolute", right: "0.5rem", top: "0.5rem"}} onClick={() =>
+                     {
+                        updateSearch(null);
+                        document.getElementById(textFieldId).focus();
+                     }}><Icon fontSize="small">close</Icon></IconButton>
+                  }
+               </Box>
+               <Box maxHeight={"445px"} overflow="auto" mr={"-0.5rem"} sx={{scrollbarGutter: "stable"}}>
+                  <List sx={{px: "0.5rem", cursor: "default"}}>
+                     {
+                        fieldsByTableToShow.map((tableWithFields) =>
+                        {
+                           let headerContents = null;
+                           const headerTable = tableWithFields.table || tableMetaData;
+                           if(tableWithFields.table || showTableHeaderEvenIfNoExposedJoins)
+                           {
+                              headerContents = (<b>{headerTable.label} Fields</b>);
+                           }
+
+                           if(isModeToggle)
+                           {
+                              headerContents = (<FormControlLabel
+                                 sx={{display: "flex", alignItems: "flex-start", "& .MuiFormControlLabel-label": {lineHeight: "1.4", fontWeight: "500 !important"}}}
+                                 control={<Switch
+                                    size="small"
+                                    sx={{top: "1px"}}
+                                    checked={tableToggleStates[headerTable.name]}
+                                    onChange={(event) => handleTableToggle(event, headerTable)}
+                                 />}
+                                 label={<span style={{marginTop: "0.25rem", display: "inline-block"}}><b>{headerTable.label} Fields</b>&nbsp;<span style={{fontWeight: 400}}>({tableToggleCounts[headerTable.name]})</span></span>} />)
+                           }
+
+                           if(isModeToggle)
+                           {
+                              headerContents = (
+                                 <>
+                                    <IconButton
+                                       onClick={() => toggleCollapsedTable(headerTable.name)}
+                                       sx={{justifyContent: "flex-start", fontSize: "0.875rem", pt: 0.5, pb: 0, mr: "0.25rem"}}
+                                       disableRipple={true}
+                                    >
+                                       <Icon sx={{fontSize: "1.5rem !important", position: "relative", top: "2px"}}>{collapsedTables[headerTable.name] ? "expand_less" : "expand_more"}</Icon>
+                                    </IconButton>
+                                    {headerContents}
+                                 </>
+                              )
+                           }
+
+                           let marginLeft = "unset";
+                           if(isModeToggle)
+                           {
+                              marginLeft = "-1rem";
+                           }
+
+                           zIndex += 2;
+
+                           return (
+                              <React.Fragment key={tableWithFields.table?.name ?? "theTable"}>
+                                 <>
+                                    {headerContents && <ListItem sx={{position: "sticky", top: -1, zIndex: zIndex+1, padding: listItemPadding, ml: marginLeft, display: "flex", alignItems: "flex-start", backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1) 90%, rgba(255,255,255,0))"}}>{headerContents}</ListItem>}
+                                    {
+                                       tableWithFields.fields.map((field) =>
+                                       {
+                                          index++;
+                                          const key = `${tableWithFields.table?.name}-${field.name}`
+
+                                          if(collapsedTables[headerTable.name])
+                                          {
+                                             return (<React.Fragment key={key} />);
+                                          }
+
+                                          let style = {};
+                                          if (index == focusedIndex)
+                                          {
+                                             style = {backgroundColor: "#EFEFEF"};
+                                          }
+
+                                          const onClick: ListItemProps = {};
+                                          if (isModeSelectOne)
+                                          {
+                                             onClick.onClick = () =>
+                                             {
+                                                closeMenu();
+                                                handleSelectedField(field, tableWithFields.table ?? tableMetaData);
+                                             }
+                                          }
+
+                                          let label: JSX.Element | string = field.label;
+                                          const fullFieldName = tableWithFields.table && tableWithFields.table.name != tableMetaData.name ? `${tableWithFields.table.name}.${field.name}` : field.name;
+
+                                          if(fieldEndAdornment)
+                                          {
+                                             label = <Box width="100%" display="inline-flex" justifyContent="space-between">
+                                                {label}
+                                                <Box onClick={(event) => doHandleAdornmentClick(field, tableWithFields.table, event)}>
+                                                   {fieldEndAdornment}
+                                                </Box>
+                                             </Box>;
+                                          }
+
+                                          let contents = <>{label}</>;
+                                          let paddingLeft = "0.5rem";
+
+                                          if (isModeToggle)
+                                          {
+                                             contents = (<FormControlLabel
+                                                sx={{display: "flex", alignItems: "flex-start", "& .MuiFormControlLabel-label": {lineHeight: "1.4", color: "#606060", fontWeight: "500 !important"}}}
+                                                control={<Switch
+                                                   size="small"
+                                                   sx={{top: "-3px"}}
+                                                   checked={toggleStates[fullFieldName]}
+                                                   onChange={(event) => handleFieldToggle(event, field, tableWithFields.table)}
+                                                />}
+                                                label={label} />);
+                                             paddingLeft = "2.5rem";
+                                          }
+
+                                          return <ListItem
+                                             key={key}
+                                             id={`field-list-dropdown-${idPrefix}-${index}`}
+                                             sx={{color: "#757575", p: 1, borderRadius: ".5rem", padding: listItemPadding, pl: paddingLeft, scrollMarginTop: "3rem", zIndex: zIndex, background: "#FFFFFF", ...style}}
+                                             onMouseOver={(event) => handleMouseOver(event, field, tableWithFields.table)}
+                                             {...onClick}
+                                          >{contents}</ListItem>;
+                                       })
+                                    }
+                                 </>
+                              </React.Fragment>
+                           );
+                        })
+                     }
+                     {
+                        index == -1 && <ListItem sx={{p: "0.5rem"}}><i>No fields found.</i></ListItem>
+                     }
+                  </List>
+               </Box>
+            </Box>
+         </Menu>
+      </>
+   );
+}

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -24,7 +24,7 @@ import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstan
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import Autocomplete, {AutocompleteRenderOptionState} from "@mui/material/Autocomplete";
+import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import FormControl from "@mui/material/FormControl/FormControl";
 import Icon from "@mui/material/Icon/Icon";
@@ -53,6 +53,27 @@ export enum ValueMode
    PVS_MULTI = "PVS_MULTI",
 }
 
+export const getValueModeRequiredCount = (valueMode: ValueMode): number =>
+{
+   switch (valueMode)
+   {
+      case ValueMode.NONE:
+         return (0);
+      case ValueMode.SINGLE:
+      case ValueMode.SINGLE_DATE:
+      case ValueMode.SINGLE_DATE_TIME:
+      case ValueMode.PVS_SINGLE:
+         return (1);
+      case ValueMode.DOUBLE:
+      case ValueMode.DOUBLE_DATE:
+      case ValueMode.DOUBLE_DATE_TIME:
+         return (2);
+      case ValueMode.MULTI:
+      case ValueMode.PVS_MULTI:
+         return (null);
+   }
+}
+
 export interface OperatorOption
 {
    label: string;
@@ -182,7 +203,7 @@ FilterCriteriaRow.defaultProps =
    {
    };
 
-export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue: OperatorOption)
+export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValue?: OperatorOption): {criteriaIsValid: boolean, criteriaStatusTooltip: string}
 {
    let criteriaIsValid = true;
    let criteriaStatusTooltip = "This condition is fully defined and is part of your filter.";
@@ -211,37 +232,34 @@ export function validateCriteria(criteria: QFilterCriteria, operatorSelectedValu
    }
    else
    {
-      if (operatorSelectedValue)
+      if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
       {
-         if (operatorSelectedValue.valueMode == ValueMode.NONE || operatorSelectedValue.implicitValues)
+         //////////////////////////////////
+         // don't need to look at values //
+         //////////////////////////////////
+      }
+      else if (criteria.operator == QCriteriaOperator.BETWEEN || criteria.operator == QCriteriaOperator.NOT_BETWEEN)
+      {
+         if (criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
          {
-            //////////////////////////////////
-            // don't need to look at values //
-            //////////////////////////////////
+            criteriaIsValid = false;
+            criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
          }
-         else if (operatorSelectedValue.valueMode == ValueMode.DOUBLE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE || operatorSelectedValue.valueMode == ValueMode.DOUBLE_DATE_TIME)
+      }
+      else if (criteria.operator == QCriteriaOperator.IN || criteria.operator == QCriteriaOperator.NOT_IN)
+      {
+         if (criteria.values.length < 1 || isNotSet(criteria.values[0]))
          {
-            if (criteria.values.length < 2 || isNotSet(criteria.values[0]) || isNotSet(criteria.values[1]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter two values to complete the definition of this condition.";
-            }
+            criteriaIsValid = false;
+            criteriaStatusTooltip = "You must enter one or more values complete the definition of this condition.";
          }
-         else if (operatorSelectedValue.valueMode == ValueMode.MULTI || operatorSelectedValue.valueMode == ValueMode.PVS_MULTI)
+      }
+      else
+      {
+         if (!criteria.values || isNotSet(criteria.values[0]))
          {
-            if (criteria.values.length < 1 || isNotSet(criteria.values[0]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter one or more values complete the definition of this condition.";
-            }
-         }
-         else
-         {
-            if (!criteria.values || isNotSet(criteria.values[0]))
-            {
-               criteriaIsValid = false;
-               criteriaStatusTooltip = "You must enter a value to complete the definition of this condition.";
-            }
+            criteriaIsValid = false;
+            criteriaStatusTooltip = "You must enter a value to complete the definition of this condition.";
          }
       }
    }
@@ -370,6 +388,24 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
          {
             criteria.values = newValue.implicitValues;
          }
+
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         // we've seen cases where switching operators can sometimes put a null in as the first value... //
+         // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         {
+            criteria.values = [];
+         }
+
+         if(newValue.valueMode && !newValue.implicitValues)
+         {
+            const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
+            {
+               criteria.values.splice(requiredValueCount);
+            }
+         }
       }
       else
       {

src/qqq/components/query/FilterCriteriaRowValues.tsx

@@ -94,6 +94,24 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       document.getElementById(`${idPrefix}${criteria.id}`).focus();
    };
 
+
+
+   /*******************************************************************************
+    ** Event handler for key-down events - specifically added here, to stop pressing
+    ** 'tab' in a date or date-time from closing the quick-filter...
+    *******************************************************************************/
+   const handleKeyDown = (e: any) =>
+   {
+      if (field.type == QFieldType.DATE || field.type == QFieldType.DATE_TIME)
+      {
+         if(e.code == "Tab")
+         {
+            console.log("Tab on date or date-time - don't close me, just move to the next sub-field!...");
+            e.stopPropagation();
+         }
+      }
+   };
+
    const inputProps: any = {};
    inputProps.endAdornment = (
       <InputAdornment position="end">
@@ -110,6 +128,7 @@ export const makeTextField = (field: QFieldMetaData, criteria: QFilterCriteriaWi
       autoComplete="off"
       type={type}
       onChange={(event) => valueChangeHandler(event, valueIndex)}
+      onKeyDown={handleKeyDown}
       value={value}
       InputLabelProps={inputLabelProps}
       InputProps={inputProps}

src/qqq/components/query/QueryScreenActionMenu.tsx

@@ -0,0 +1,134 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {Capability} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Capability";
+import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import Divider from "@mui/material/Divider";
+import Icon from "@mui/material/Icon";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import React, {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {QActionsMenuButton} from "qqq/components/buttons/DefaultButtons";
+
+interface QueryScreenActionMenuProps
+{
+   metaData: QInstance;
+   tableMetaData: QTableMetaData;
+   tableProcesses: QProcessMetaData[];
+   bulkLoadClicked: () => void;
+   bulkEditClicked: () => void;
+   bulkDeleteClicked: () => void;
+   processClicked: (process: QProcessMetaData) => void;
+}
+
+QueryScreenActionMenu.defaultProps = {
+};
+
+export default function QueryScreenActionMenu({metaData, tableMetaData, tableProcesses, bulkLoadClicked, bulkEditClicked, bulkDeleteClicked, processClicked}: QueryScreenActionMenuProps): JSX.Element
+{
+   const [anchorElement, setAnchorElement] = useState(null)
+
+   const navigate = useNavigate();
+
+   const openActionsMenu = (event: any) =>
+   {
+      setAnchorElement(event.currentTarget);
+   }
+
+   const closeActionsMenu = () =>
+   {
+      setAnchorElement(null);
+   }
+
+   const pushDividerIfNeeded = (menuItems: JSX.Element[]) =>
+   {
+      if (menuItems.length > 0)
+      {
+         menuItems.push(<Divider key="divider" />);
+      }
+   };
+
+   const runSomething = (handler: () => void) =>
+   {
+      closeActionsMenu();
+      handler();
+   }
+
+   const menuItems: JSX.Element[] = [];
+   if (tableMetaData.capabilities.has(Capability.TABLE_INSERT) && tableMetaData.insertPermission)
+   {
+      menuItems.push(<MenuItem key="bulkLoad" onClick={() => runSomething(bulkLoadClicked)}><ListItemIcon><Icon>library_add</Icon></ListItemIcon>Bulk Load</MenuItem>);
+   }
+   if (tableMetaData.capabilities.has(Capability.TABLE_UPDATE) && tableMetaData.editPermission)
+   {
+      menuItems.push(<MenuItem key="bulkEdit" onClick={() => runSomething(bulkEditClicked)}><ListItemIcon><Icon>edit</Icon></ListItemIcon>Bulk Edit</MenuItem>);
+   }
+   if (tableMetaData.capabilities.has(Capability.TABLE_DELETE) && tableMetaData.deletePermission)
+   {
+      menuItems.push(<MenuItem key="bulkDelete" onClick={() => runSomething(bulkDeleteClicked)}><ListItemIcon><Icon>delete</Icon></ListItemIcon>Bulk Delete</MenuItem>);
+   }
+
+   const runRecordScriptProcess = metaData?.processes.get("runRecordScript");
+   if (runRecordScriptProcess)
+   {
+      const process = runRecordScriptProcess;
+      menuItems.push(<MenuItem key={process.name} onClick={() => runSomething(() => processClicked(process))}><ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>{process.label}</MenuItem>);
+   }
+
+   menuItems.push(<MenuItem key="developerMode" onClick={() => navigate(`${metaData.getTablePathByName(tableMetaData.name)}/dev`)}><ListItemIcon><Icon>code</Icon></ListItemIcon>Developer Mode</MenuItem>);
+
+   if (tableProcesses && tableProcesses.length)
+   {
+      pushDividerIfNeeded(menuItems);
+   }
+
+   tableProcesses.sort((a, b) => a.label.localeCompare(b.label));
+   tableProcesses.map((process) =>
+   {
+      menuItems.push(<MenuItem key={process.name} onClick={() => runSomething(() => processClicked(process))}><ListItemIcon><Icon>{process.iconName ?? "arrow_forward"}</Icon></ListItemIcon>{process.label}</MenuItem>);
+   });
+
+   if (menuItems.length === 0)
+   {
+      menuItems.push(<MenuItem key="notAvaialableNow" disabled><ListItemIcon><Icon>block</Icon></ListItemIcon><i>No actions available</i></MenuItem>);
+   }
+
+   return (
+      <>
+         <QActionsMenuButton isOpen={anchorElement} onClickHandler={openActionsMenu} />
+         <Menu
+            anchorEl={anchorElement}
+            anchorOrigin={{vertical: "bottom", horizontal: "right",}}
+            transformOrigin={{vertical: "top", horizontal: "right",}}
+            open={anchorElement != null}
+            onClose={closeActionsMenu}
+            keepMounted
+         >
+            {menuItems}
+         </Menu>
+      </>
+   )
+}

src/qqq/components/query/QuickFilter.tsx

@@ -24,18 +24,18 @@ import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QField
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import {Badge, Tooltip} from "@mui/material";
+import {Tooltip} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useState} from "react";
+import React, {SyntheticEvent, useContext, useReducer, useState} from "react";
+import QContext from "QContext";
 import {QFilterCriteriaWithId} from "qqq/components/query/CustomFilterPanel";
-import {getDefaultCriteriaValue, getOperatorOptions, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import {getDefaultCriteriaValue, getOperatorOptions, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
 import FilterCriteriaRowValues from "qqq/components/query/FilterCriteriaRowValues";
+import XIcon from "qqq/components/query/XIcon";
 import FilterUtils from "qqq/utils/qqq/FilterUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 
@@ -60,6 +60,19 @@ QuickFilter.defaultProps =
 
 let seedId = new Date().getTime() % 173237;
 
+export const quickFilterButtonStyles = {
+   fontSize: "0.75rem",
+   fontWeight: 600,
+   color: "#757575",
+   textTransform: "none",
+   borderRadius: "2rem",
+   border: "1px solid #757575",
+   minWidth: "3.5rem",
+   minHeight: "auto",
+   padding: "0.375rem 0.625rem", whiteSpace: "nowrap",
+   marginBottom: "0.5rem"
+}
+
 /*******************************************************************************
  ** Test if a CriteriaParamType represents an actual query criteria - or, if it's
  ** null or the "tooComplex" placeholder.
@@ -133,32 +146,74 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
 
    const [isOpen, setIsOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);
+   const [isMouseOver, setIsMouseOver] = useState(false);
 
-   const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? criteriaParam as QFilterCriteriaWithId : null);
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // copy the criteriaParam to a new object in here - so changes won't apply until user closes the menu //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const [criteria, setCriteria] = useState(criteriaParamIsCriteria(criteriaParam) ? Object.assign({}, criteriaParam) as QFilterCriteriaWithId : null);
    const [id, setId] = useState(criteriaParamIsCriteria(criteriaParam) ? (criteriaParam as QFilterCriteriaWithId).id : ++seedId);
 
    const [operatorSelectedValue, setOperatorSelectedValue] = useState(getOperatorSelectedValue(operatorOptions, criteria, defaultOperator));
    const [operatorInputValue, setOperatorInputValue] = useState(operatorSelectedValue?.label);
 
-   const [startIconName, setStartIconName] = useState("filter_alt");
-
    const {criteriaIsValid, criteriaStatusTooltip} = validateCriteria(criteria, operatorSelectedValue);
 
+   const {accentColor} = useContext(QContext);
+
+   //////////////////////
+   // ole' faithful... //
+   //////////////////////
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOverElement()
+   {
+      setIsMouseOver(true);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   function handleMouseOutElement()
+   {
+      setIsMouseOver(false);
+   }
+
+
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // handle a change to the criteria from outside this component (e.g., the prop isn't the same as the state) //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
    {
-      const newCriteria = criteriaParam as QFilterCriteriaWithId;
-      setCriteria(newCriteria);
-      const operatorOption = operatorOptions.filter(o => o.value == newCriteria.operator)[0];
-      console.log(`B: setOperatorSelectedValue [${JSON.stringify(operatorOption)}]`);
-      setOperatorSelectedValue(operatorOption);
-      setOperatorInputValue(operatorOption.label);
+      if(isOpen)
+      {
+         ////////////////////////////////////////////////////////////////////////////////
+         // this was firing too-often for case where:  there was a criteria originally //
+         ////////////////////////////////////////////////////////////////////////////////
+         console.log("Not handling outside change (A), because dropdown is-open");
+      }
+      else
+      {
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////
+         // copy the criteriaParam to a new object in here - so changes won't apply until user closes the menu //
+         ////////////////////////////////////////////////////////////////////////////////////////////////////////
+         const newCriteria = Object.assign({}, criteriaParam) as QFilterCriteriaWithId;
+         setCriteria(newCriteria);
+         const operatorOption = operatorOptions.filter(o => o.value == newCriteria.operator)[0];
+         setOperatorSelectedValue(operatorOption);
+         setOperatorInputValue(operatorOption.label);
+      }
    }
 
    /*******************************************************************************
     ** Test if we need to construct a new criteria object
+    ** This is (at least for some cases) for when the criteria gets changed
+    ** from outside of this component - e.g., a reset on the query screen
     *******************************************************************************/
    const criteriaNeedsReset = (): boolean =>
    {
@@ -167,6 +222,16 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          const defaultOperatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
          if(criteria.operator !== defaultOperatorOption?.value || JSON.stringify(criteria.values) !== JSON.stringify(getDefaultCriteriaValue()))
          {
+            if(isOpen)
+            {
+               //////////////////////////////////////////////////////////////////////////////////
+               // this was firing too-often for case where:  there was no criteria originally, //
+               // so, by adding this is-open check, we eliminated those.                       //
+               //////////////////////////////////////////////////////////////////////////////////
+               console.log("Not handling outside change (B), because dropdown is-open");
+               return (false);
+            }
+
             return (true);
          }
       }
@@ -175,7 +240,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    }
 
    /*******************************************************************************
-    ** Construct a new criteria object - resetting the values tied to the oprator
+    ** Construct a new criteria object - resetting the values tied to the operator
     ** autocomplete at the same time.
     *******************************************************************************/
    const makeNewCriteria = (): QFilterCriteria =>
@@ -183,7 +248,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       const operatorOption = operatorOptions.filter(o => o.value == defaultOperator)[0];
       const criteria = new QFilterCriteriaWithId(fullFieldName, operatorOption?.value, getDefaultCriteriaValue());
       criteria.id = id;
-      console.log(`C: setOperatorSelectedValue [${JSON.stringify(operatorOption)}]`);
       setOperatorSelectedValue(operatorOption);
       setOperatorInputValue(operatorOption?.label);
       setCriteria(criteria);
@@ -197,6 +261,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    {
       setIsOpen(!isOpen);
       setAnchorEl(event.currentTarget);
+
+      setTimeout(() =>
+      {
+         const element = document.getElementById("value-" + criteria.id);
+         element?.focus();
+      })
    };
 
    /*******************************************************************************
@@ -204,6 +274,11 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
     *******************************************************************************/
    const closeMenu = () =>
    {
+      //////////////////////////////////////////////////////////////////////////////////
+      // when closing the menu, that's when we'll update the criteria from the caller //
+      //////////////////////////////////////////////////////////////////////////////////
+      updateCriteria(criteria, false, false);
+
       setIsOpen(false);
       setAnchorEl(null);
    };
@@ -217,7 +292,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
 
       if (newValue)
       {
-         console.log(`D: setOperatorSelectedValue [${JSON.stringify(newValue)}]`);
          setOperatorSelectedValue(newValue);
          setOperatorInputValue(newValue.label);
 
@@ -225,15 +299,33 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          {
             criteria.values = newValue.implicitValues;
          }
+
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         // we've seen cases where switching operators can sometimes put a null in as the first value... //
+         // that just causes a bad time (e.g., null pointers in Autocomplete), so, get rid of that.      //
+         //////////////////////////////////////////////////////////////////////////////////////////////////
+         if(criteria.values && criteria.values.length == 1 && criteria.values[0] == null)
+         {
+            criteria.values = [];
+         }
+
+         if(newValue.valueMode && !newValue.implicitValues)
+         {
+            const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
+            if(requiredValueCount != null && criteria.values.length > requiredValueCount)
+            {
+               criteria.values.splice(requiredValueCount);
+            }
+         }
       }
       else
       {
-         console.log("E: setOperatorSelectedValue [null]");
          setOperatorSelectedValue(null);
          setOperatorInputValue("");
       }
 
-      updateCriteria(criteria, false, false);
+      setCriteria(criteria);
+      forceUpdate();
    };
 
    /*******************************************************************************
@@ -267,7 +359,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          criteria.values[valueIndex] = value;
       }
 
-      updateCriteria(criteria, true, false);
+      setCriteria(criteria);
+      forceUpdate();
    };
 
    /*******************************************************************************
@@ -288,38 +381,20 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          e.stopPropagation();
          const newCriteria = makeNewCriteria();
          updateCriteria(newCriteria, false, true);
-         setStartIconName("filter_alt");
       }
    }
 
-   /*******************************************************************************
-    ** event handler for mouse-over on the filter icon - that changes to an 'x'
-    ** if there's a valid criteria in the quick-filter
-    *******************************************************************************/
-   const startIconMouseOver = () =>
-   {
-      if(criteriaIsValid)
-      {
-         setStartIconName("clear");
-      }
-   }
-
-   /*******************************************************************************
-    ** event handler for mouse-out on the filter icon - always resets it.
-    *******************************************************************************/
-   const startIconMouseOut = () =>
-   {
-      setStartIconName("filter_alt");
-   }
-
    /*******************************************************************************
     ** event handler for clicking the (x) icon that turns off this quick filter field.
-    ** hands off control to the function that was passed in (e.g., from RecordQuery).
+    ** hands off control to the function that was passed in (e.g., from RecordQueryOrig).
     *******************************************************************************/
    const handleTurningOffQuickFilterField = () =>
    {
       closeMenu()
-      handleRemoveQuickFilterField(criteria?.fieldName);
+      if(handleRemoveQuickFilterField)
+      {
+         handleRemoveQuickFilterField(criteria?.fieldName);
+      }
    }
 
    ////////////////////////////////////////////////////////////////////////////////////
@@ -337,7 +412,6 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    const maybeNewOperatorSelectedValue = getOperatorSelectedValue(operatorOptions, criteria, defaultOperator);
    if(JSON.stringify(maybeNewOperatorSelectedValue) !== JSON.stringify(operatorSelectedValue))
    {
-      console.log(`A: setOperatorSelectedValue [${JSON.stringify(maybeNewOperatorSelectedValue)}]`);
       setOperatorSelectedValue(maybeNewOperatorSelectedValue)
       setOperatorInputValue(maybeNewOperatorSelectedValue?.label)
    }
@@ -355,26 +429,42 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    /////////////////////////
    const tooComplex = criteriaParam == "tooComplex";
    const tooltipEnterDelay = 500;
-   let startIcon = <Badge badgeContent={criteriaIsValid && !tooComplex ? 1 : 0} color="warning" variant="dot" onMouseOver={startIconMouseOver} onMouseOut={startIconMouseOut} onClick={resetCriteria}><Icon>{startIconName}</Icon></Badge>
-   if(criteriaIsValid)
-   {
-      startIcon = <Tooltip title={"Remove this condition from your filter"} enterDelay={tooltipEnterDelay}>{startIcon}</Tooltip>
-   }
 
+   let buttonAdditionalStyles: any = {};
    let buttonContent = <span>{tableForField?.name != tableMetaData.name ? `${tableForField.label}: ` : ""}{fieldMetaData.label}</span>
+   let buttonClassName = "filterNotActive";
    if (criteriaIsValid)
    {
-      buttonContent = (
-         <Tooltip title={`${operatorSelectedValue.label} ${FilterUtils.getValuesString(fieldMetaData, criteria)}`} enterDelay={tooltipEnterDelay}>
-            {buttonContent}
-         </Tooltip>
-      );
+      buttonAdditionalStyles.backgroundColor = accentColor + " !important";
+      buttonAdditionalStyles.borderColor = accentColor + " !important";
+      buttonAdditionalStyles.color = "white !important";
+      buttonClassName = "filterActive";
+
+      let valuesString = FilterUtils.getValuesString(fieldMetaData, criteria, 1, "+N");
+
+      ///////////////////////////////////////////
+      // don't show the Equals or In operators //
+      ///////////////////////////////////////////
+      let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
+      if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
+      {
+         operatorString = (<></>)
+      }
+
+      buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
    }
 
+   const mouseEvents =
+      {
+         onMouseOver: () => handleMouseOverElement(),
+         onMouseOut: () => handleMouseOutElement()
+      };
+
    let button = fieldMetaData && <Button
       id={`quickFilter.${fullFieldName}`}
-      sx={{mr: "0.25rem", px: "1rem", border: isOpen ? "1px solid gray" : "1px solid transparent"}}
-      startIcon={startIcon}
+      className={buttonClassName}
+      {...mouseEvents}
+      sx={{...quickFilterButtonStyles, ...buttonAdditionalStyles, mr: "0.5rem"}}
       onClick={tooComplex ? noop : handleOpenMenu}
       disabled={tooComplex}
    >{buttonContent}</Button>;
@@ -395,25 +485,47 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       );
    }
 
+   /*******************************************************************************
+    ** event handler for 'x' button - either resets the criteria or turns off the field.
+    *******************************************************************************/
+   const xClicked = (e: React.MouseEvent<HTMLSpanElement>) =>
+   {
+      e.stopPropagation();
+      if(criteriaIsValid)
+      {
+         resetCriteria(e);
+      }
+      else
+      {
+         handleTurningOffQuickFilterField();
+      }
+   }
+
    //////////////////////////////
    // return the button & menu //
    //////////////////////////////
-   const widthAndMaxWidth = 250
+   const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
    return (
       <>
          {button}
+         {
+            /////////////////////////////////////////////////////////////////////////////////////
+            // only show the 'x' if it's to clear out a valid criteria on the field,           //
+            // or if we were given a callback to remove the quick-filter field from the screen //
+            /////////////////////////////////////////////////////////////////////////////////////
+            (criteriaIsValid || handleRemoveQuickFilterField) && isMouseOver && <span {...mouseEvents}><XIcon shade={criteriaIsValid ? "accent" : "default"} position="forQuickFilter" onClick={xClicked} /></span>
+         }
          {
             isOpen && <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={closeMenu} sx={{overflow: "visible"}}>
-               {
-                  handleRemoveQuickFilterField &&
-                  <Tooltip title={"Remove this field from Quick Filters"} placement="right">
-                     <IconButton size="small" sx={{position: "absolute", top: "-8px", right: "-8px", zIndex: 1}} onClick={handleTurningOffQuickFilterField}><Icon color="secondary">highlight_off</Icon></IconButton>
-                  </Tooltip>
-               }
                <Box display="inline-block" width={widthAndMaxWidth} maxWidth={widthAndMaxWidth} className="operatorColumn">
                   <Autocomplete
                      id={"criteriaOperator"}
-                     renderInput={(params) => (<TextField {...params} label={"Operator"} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////
+                     // ok, so, by default, if you type an 'o' as the first letter in the FilterCriteriaRowValues box, //
+                     // something is causing THIS element to become selected, if the first letter in its label is 'O'. //
+                     // ... work around is to put invisible &zwnj; entity as first character in label instead...       //
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////
+                     renderInput={(params) => (<TextField {...params} label={<>&zwnj;Operator</>} variant="standard" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
                      options={operatorOptions}
                      value={operatorSelectedValue as any}
                      inputValue={operatorInputValue}
@@ -432,7 +544,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
                      operatorOption={operatorSelectedValue}
                      criteria={criteria}
                      field={fieldMetaData}
-                     table={tableMetaData} // todo - joins?
+                     table={tableForField}
                      valueChangeHandler={(event, valueIndex, newValue) => handleValueChange(event, valueIndex, newValue)}
                      initiallyOpenMultiValuePvs={true} // todo - maybe not?
                   />

src/qqq/components/query/XIcon.tsx

@@ -0,0 +1,92 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import Icon from "@mui/material/Icon";
+import IconButton from "@mui/material/IconButton";
+import React, {useContext} from "react";
+import QContext from "QContext";
+import colors from "qqq/assets/theme/base/colors";
+
+interface XIconProps
+{
+   onClick: (e: React.MouseEvent<HTMLSpanElement>) => void;
+   position: "forQuickFilter" | "forAdvancedQueryPreview" | "default";
+   shade: "default" | "accent" | "accentLight"
+}
+
+XIcon.defaultProps = {
+   position: "default",
+   shade: "default"
+};
+
+export default function XIcon({onClick, position, shade}: XIconProps): JSX.Element
+{
+   const {accentColor, accentColorLight} = useContext(QContext)
+
+   //////////////////////////
+   // for default position //
+   //////////////////////////
+   let rest: any = {
+      top: "-0.75rem",
+      left: "-0.5rem",
+   }
+
+   if(position == "forQuickFilter")
+   {
+      rest = {
+         left: "-1.125rem",
+      }
+   }
+   else if(position == "forAdvancedQueryPreview")
+   {
+      rest = {
+         top: "-0.5rem",
+         left: "-0.75rem",
+      }
+   }
+
+   let color;
+   switch (shade)
+   {
+      case "default":
+         color = colors.gray.main;
+         break;
+      case "accent":
+         color = accentColor;
+         break;
+      case "accentLight":
+         color = accentColorLight;
+         break;
+   }
+
+   return (
+      <span style={{position: "relative"}}><IconButton sx={{
+         fontSize: "0.75rem",
+         border: `1px solid ${color}`,
+         color: color,
+         padding: "0",
+         background: "#FFFFFF !important",
+         position: "absolute",
+         ... rest
+      }} onClick={onClick}><Icon>close</Icon></IconButton></span>
+   )
+}

src/qqq/components/widgets/CompositeWidget.tsx

@@ -0,0 +1,109 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Box, Skeleton} from "@mui/material";
+import React from "react";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
+
+
+interface CompositeData
+{
+   blocks: BlockData[];
+   styleOverrides?: any;
+   layout?: string
+}
+
+
+interface CompositeWidgetProps
+{
+   widgetMetaData: QWidgetMetaData;
+   data: CompositeData;
+}
+
+
+/*******************************************************************************
+ ** Widget which is a list of Blocks.
+ *******************************************************************************/
+export default function CompositeWidget({widgetMetaData, data}: CompositeWidgetProps): JSX.Element
+{
+   if (!data || !data.blocks)
+   {
+      return (<Skeleton />);
+   }
+
+   ////////////////////////////////////////////////////////////////////////////////////
+   // note - these layouts are defined in qqq in the CompositeWidgetData.Layout enum //
+   ////////////////////////////////////////////////////////////////////////////////////
+   let layout = data?.layout;
+   let boxStyle: any = {};
+   if (layout == "FLEX_ROW_WRAPPED")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.flexWrap = "wrap";
+      boxStyle.gap = "0.5rem";
+   }
+   else if (layout == "FLEX_ROW_SPACE_BETWEEN")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "row";
+      boxStyle.justifyContent = "space-between"
+      boxStyle.gap = "0.25rem";
+   }
+   else if (layout == "TABLE_SUB_ROW_DETAILS")
+   {
+      boxStyle.display = "flex";
+      boxStyle.flexDirection = "column";
+      boxStyle.fontSize = "0.875rem";
+      boxStyle.fontWeight = 400;
+      boxStyle.borderRight = "1px solid #D0D0D0";
+   }
+   else if (layout == "BADGES_WRAPPER")
+   {
+      boxStyle.display = "flex";
+      boxStyle.gap = "0.25rem";
+      boxStyle.padding = "0 0.25rem";
+      boxStyle.fontSize = "0.875rem";
+      boxStyle.fontWeight = 400;
+      boxStyle.border = "1px solid gray";
+      boxStyle.borderRadius = "0.5rem";
+      boxStyle.background = "#FFFFFF";
+   }
+
+   if (data?.styleOverrides)
+   {
+      boxStyle = {...boxStyle, ...data.styleOverrides};
+   }
+
+   return (<Box sx={boxStyle} className="compositeWidget">
+      {
+         data.blocks.map((block: BlockData, index) => (
+            <React.Fragment key={index}>
+               <WidgetBlock widgetMetaData={widgetMetaData} block={block} />
+            </React.Fragment>
+         ))
+      }
+   </Box>);
+
+}

src/qqq/components/widgets/DashboardWidgets.tsx

@@ -35,6 +35,7 @@ import DefaultLineChart from "qqq/components/widgets/charts/linechart/DefaultLin
 import SmallLineChart from "qqq/components/widgets/charts/linechart/SmallLineChart";
 import PieChart from "qqq/components/widgets/charts/piechart/PieChart";
 import StackedBarChart from "qqq/components/widgets/charts/StackedBarChart";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataBagViewer from "qqq/components/widgets/misc/DataBagViewer";
 import DividerWidget from "qqq/components/widgets/misc/Divider";
 import FieldValueListWidget from "qqq/components/widgets/misc/FieldValueListWidget";
@@ -47,6 +48,7 @@ import ParentWidget from "qqq/components/widgets/ParentWidget";
 import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
 import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
 import Widget, {HeaderIcon, WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT, LabelComponent} from "qqq/components/widgets/Widget";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 import ProcessRun from "qqq/pages/processes/ProcessRun";
 import Client from "qqq/utils/qqq/Client";
 import TableWidget from "./tables/TableWidget";
@@ -254,7 +256,17 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
          const topRightInsideCardIcon = widgetMetaData.icons.get("topRightInsideCard");
          if (topRightInsideCardIcon)
          {
-            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color));
+            labelAdditionalComponentsRight.push(new HeaderIcon(topRightInsideCardIcon.name, topRightInsideCardIcon.path, topRightInsideCardIcon.color, "topRightInsideCard"));
+         }
+      }
+
+      const labelAdditionalComponentsLeft: LabelComponent[] = [];
+      if (widgetMetaData && widgetMetaData.icons)
+      {
+         const topLeftInsideCardIcon = widgetMetaData.icons.get("topLeftInsideCard");
+         if (topLeftInsideCardIcon)
+         {
+            labelAdditionalComponentsLeft.push(new HeaderIcon(topLeftInsideCardIcon.name, topLeftInsideCardIcon.path, topLeftInsideCardIcon.color, "topLeftInsideCard"));
          }
       }
 
@@ -302,6 +314,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <StackedBarChart data={widgetData[i]?.chartData} chartSubheaderData={widgetData[i]?.chartSubheaderData} />
                   </Widget>
@@ -314,6 +327,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      showReloadControl={false}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div className="widgetProcessMidDiv" style={{height: "100%"}}>
                         <ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} forceReInit={widgetCounter} />
@@ -327,6 +342,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetMetaData={widgetMetaData}
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
                         <Box padding="1rem" sx={{width: "100%"}}>
@@ -342,6 +359,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetMetaData={widgetMetaData}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      widgetData={widgetData[i]}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <Box>
                         <MDTypography component="div" variant="button" color="text" fontWeight="light">
@@ -373,8 +392,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      isChild={areChildren}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <StatisticsCard
+                        widgetMetaData={widgetMetaData}
                         data={widgetData[i]}
                         increaseIsGood={true}
                      />
@@ -414,6 +436,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
                      labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <div>
                         <PieChart
@@ -449,6 +472,8 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      widgetData={widgetData[i]}
                      reloadWidgetCallback={(data) => reloadWidget(i, data)}
                      isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
                   >
                      <DefaultLineChart sx={{alignItems: "center"}}
                         data={widgetData[i]?.chartData}
@@ -477,6 +502,34 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                   />
                )
             }
+            {
+               widgetMetaData.type === "composite" && (
+                  <Widget
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <CompositeWidget widgetMetaData={widgetMetaData} data={widgetData[i]} />
+                  </Widget>
+               )
+            }
+            {
+               widgetMetaData.type === "block" && (
+                  <Widget
+                     widgetMetaData={widgetMetaData}
+                     widgetData={widgetData[i]}
+                     reloadWidgetCallback={(data) => reloadWidget(i, data)}
+                     isChild={areChildren}
+                     labelAdditionalComponentsRight={labelAdditionalComponentsRight}
+                     labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
+                  >
+                     <WidgetBlock widgetMetaData={widgetMetaData} block={widgetData[i]} />
+                  </Widget>
+               )
+            }
             {
                widgetMetaData.type === "dataBagViewer" && (
                   widgetData && widgetData[i] && widgetData[i].queryParams &&
@@ -523,7 +576,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
                      renderedWidget = (<TabPanel index={i} value={selectedTab} style={{
                         padding: 0,
                         margin: "-1rem",
-                        marginBottom: "-3.5rem",
                         width: "calc(100% + 2rem)"
                      }}>
                         {renderedWidget}

src/qqq/components/widgets/ParentWidget.tsx

@@ -33,6 +33,7 @@ import Client from "qqq/utils/qqq/Client";
 //////////////////////////////////////////////
 export interface ParentWidgetData
 {
+   label?: string;
    dropdownLabelList: string[];
    dropdownNameList: string[];
    dropdownDataList: {
@@ -42,6 +43,7 @@ export interface ParentWidgetData
    childWidgetNameList: string[];
    dropdownNeedsSelectedText?: string;
    storeDropdownSelections?: boolean;
+   csvData?: any[][];
    icon?: string;
    layoutType: string;
 }
@@ -64,7 +66,8 @@ interface Props
 
 
 const qController = Client.getInstance();
-function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props, ): JSX.Element
+
+function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidgetCallback, entityPrimaryKey, tableName, storeDropdownSelections}: Props,): JSX.Element
 {
    const [childUrlParams, setChildUrlParams] = useState((urlParams) ? urlParams : "");
    const [qInstance, setQInstance] = useState(null as QInstance);
@@ -81,27 +84,27 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
 
    useEffect(() =>
    {
-      if(qInstance && data && data.childWidgetNameList)
+      if (qInstance && data && data.childWidgetNameList)
       {
          let widgetMetaDataList = [] as QWidgetMetaData[];
          data?.childWidgetNameList.forEach((widgetName: string) =>
          {
             widgetMetaDataList.push(qInstance.widgets.get(widgetName));
-         })
+         });
          setWidgets(widgetMetaDataList);
       }
    }, [qInstance, data, childUrlParams]);
 
    useEffect(() =>
    {
-      setChildUrlParams(urlParams)
+      setChildUrlParams(urlParams);
    }, [urlParams]);
 
    const parentReloadWidgetCallback = (data: string) =>
    {
       setChildUrlParams(data);
       reloadWidgetCallback(data);
-   }
+   };
 
    ///////////////////////////////////////////////////////////////////////////////////////////
    // if this parent widget is in card form, and its children are too, then we need some px //
@@ -125,7 +128,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
             omitPadding={omitPadding}
          >
             <Box sx={{height: "100%", width: "100%"}} px={px}>
-               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType == "TABS"}/>
+               <DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData} wrapWidgetsInTabPanels={data.layoutType?.toLowerCase() == "tabs"} />
             </Box>
          </Widget>
       ) : null

src/qqq/components/widgets/Widget.tsx

@@ -28,10 +28,14 @@ import Icon from "@mui/material/Icon";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
 import Typography from "@mui/material/Typography";
 import parse from "html-react-parser";
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {NavigateFunction, useNavigate} from "react-router-dom";
+import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import WidgetDropdownMenu, {DropdownOption} from "qqq/components/widgets/components/WidgetDropdownMenu";
+import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
+import HtmlUtils from "qqq/utils/HtmlUtils";
 
 export interface WidgetData
 {
@@ -109,16 +113,18 @@ export class HeaderIcon extends LabelComponent
    iconPath: string;
    color: string;
    coloredBG: boolean;
+   role: string;
 
    iconColor: string;
    bgColor: string;
 
-   constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
+   constructor(iconName: string, iconPath: string, color: string, role?: string, coloredBG: boolean = true)
    {
       super();
       this.iconName = iconName;
       this.iconPath = iconPath;
       this.color = color;
+      this.role = role;
       this.coloredBG = coloredBG;
 
       this.iconColor = this.coloredBG ? "#FFFFFF" : this.color;
@@ -128,7 +134,7 @@ export class HeaderIcon extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      const styles = {
+      const styles: any = {
          width: "1.75rem",
          height: "1.75rem",
          color: this.iconColor,
@@ -136,6 +142,12 @@ export class HeaderIcon extends LabelComponent
          borderRadius: "0.25rem"
       };
 
+      if (this.role == "topLeftInsideCard")
+      {
+         styles["order"] = -1;
+         styles["marginRight"] = "0.5rem";
+      }
+
       if (this.iconPath)
       {
          return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>);
@@ -223,22 +235,22 @@ export class Dropdown extends LabelComponent
          try
          {
             const localStorageOption = JSON.parse(localStorage.getItem(localStorageKey));
-            if(localStorageOption)
+            if (localStorageOption)
             {
                const id = localStorageOption.id;
                for (let i = 0; i < this.options.length; i++)
                {
                   if (this.options[i].id == id)
                   {
-                     defaultValue = this.options[i]
+                     defaultValue = this.options[i];
                      args.dropdownData[args.componentIndex] = defaultValue?.id;
                   }
                }
             }
          }
-         catch(e)
+         catch (e)
          {
-            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e)
+            console.log(`Error getting default value for dropdown [${this.dropdownName}] from local storage`, e);
          }
       }
 
@@ -249,7 +261,7 @@ export class Dropdown extends LabelComponent
       {
          for (let i = 0; i < this.options.length; i++)
          {
-            if(this.options[i].id == this.dropdownDefaultValue)
+            if (this.options[i].id == this.dropdownDefaultValue)
             {
                defaultValue = this.options[i];
                args.dropdownData[args.componentIndex] = defaultValue?.id;
@@ -317,11 +329,13 @@ export class ReloadControl extends LabelComponent
 
    render = (args: LabelComponentRenderArgs): JSX.Element =>
    {
-      return (
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
-            <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon></Button></Tooltip>
-         </Typography>
-      );
+      return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
+         <Tooltip title="Refresh">
+            <Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}>
+               <Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon>
+            </Button>
+         </Tooltip>
+      </Typography>);
    };
 }
 
@@ -336,15 +350,31 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
 {
    const navigate = useNavigate();
    const [dropdownData, setDropdownData] = useState([]);
-   const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState("");
    const [reloading, setReloading] = useState(false);
    const [dropdownDataJSON, setDropdownDataJSON] = useState("");
    const [labelComponentsLeft, setLabelComponentsLeft] = useState([] as LabelComponent[]);
    const [labelComponentsRight, setLabelComponentsRight] = useState([] as LabelComponent[]);
 
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   // support for using widget (data) label as page header, w/o it disappearing if dropdowns are changed //
+   ////////////////////////////////////////////////////////////////////////////////////////////////////////
+   const [lastSeenLabel, setLastSeenLabel] = useState("");
+   const [usingLabelAsTitle, setUsingLabelAsTitle] = useState(false);
+
+   const {helpHelpActive} = useContext(QContext);
+
    function renderComponent(component: LabelComponent, componentIndex: number)
    {
-      return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
+      if (component && component.render)
+      {
+         return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload});
+      }
+      else
+      {
+         console.log("Request to render a null component or component without a render function...");
+         console.log(JSON.stringify(component));
+         return (<></>);
+      }
    }
 
    useEffect(() =>
@@ -371,7 +401,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       // for initial render, put right-components from props into the state variable //
       /////////////////////////////////////////////////////////////////////////////////
       const stateLabelComponentsRight = [] as LabelComponent[];
-      // console.log(`${props.widgetMetaData.name} init'ing right-components`);
+      // console.log(`${props.widgetMetaData.name} initiating right-components`);
       if (props.labelAdditionalComponentsRight)
       {
          props.labelAdditionalComponentsRight.map((component) => stateLabelComponentsRight.push(component));
@@ -405,11 +435,14 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          {
             // console.log(`${props.widgetMetaData.name} building a Dropdown, data is: ${dropdownData}`);
             let defaultValue = null;
-            if(props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
+            if (props.widgetData.dropdownDefaultValueList && props.widgetData.dropdownDefaultValueList.length >= index)
             {
                defaultValue = props.widgetData.dropdownDefaultValueList[index];
             }
-            updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
+            if (props.widgetData?.dropdownLabelList && props.widgetData?.dropdownLabelList[index] && props.widgetMetaData?.dropdowns && props.widgetMetaData?.dropdowns[index] && props.widgetData?.dropdownNameList && props.widgetData?.dropdownNameList[index])
+            {
+               updatedStateLabelComponentsRight.push(new Dropdown(props.widgetData.dropdownLabelList[index], props.widgetMetaData.dropdowns[index], dropdownData, defaultValue, props.widgetData.dropdownNameList[index], handleDataChange));
+            }
          });
          setLabelComponentsRight(updatedStateLabelComponentsRight);
       }
@@ -500,18 +533,35 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
       }
    };
 
-   const toggleFullScreenWidget = () =>
+   const onExportClick = () =>
    {
-      if (fullScreenWidgetClassName)
+      if (props.widgetData?.csvData)
       {
-         setFullScreenWidgetClassName("");
+         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         HtmlUtils.download(fileName, csv);
       }
       else
       {
-         setFullScreenWidgetClassName("fullScreenWidget");
+         alert("There is no data available to export.");
       }
    };
 
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////
+   // add the export button to the label's left elements, if the meta-data says to show it              //
+   // don't do this for 2 types which themselves add the button (and have custom code to do the export) //
+   ///////////////////////////////////////////////////////////////////////////////////////////////////////
+   let localLabelAdditionalElementsLeft = [...props.labelAdditionalElementsLeft];
+   if (props.widgetMetaData?.showExportButton && props.widgetMetaData?.type !== "table" && props.widgetMetaData?.type !== "childRecordList")
+   {
+      if (!localLabelAdditionalElementsLeft)
+      {
+         localLabelAdditionalElementsLeft = [];
+      }
+
+      localLabelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
+   }
+
    const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
 
    const isSet = (v: any): boolean =>
@@ -526,85 +576,129 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
    if (hasPermission)
    {
       needLabelBox ||= (labelComponentsLeft && labelComponentsLeft.length > 0);
-      needLabelBox ||= (props.labelAdditionalElementsLeft && props.labelAdditionalElementsLeft.length > 0);
+      needLabelBox ||= (localLabelAdditionalElementsLeft && localLabelAdditionalElementsLeft.length > 0);
       needLabelBox ||= (labelComponentsRight && labelComponentsRight.length > 0);
-      needLabelBox ||= isSet(props.widgetMetaData?.icon);
+      needLabelBox ||= isSet(props.widgetData?.icon);
       needLabelBox ||= isSet(props.widgetData?.label);
       needLabelBox ||= isSet(props.widgetMetaData?.label);
    }
 
    //////////////////////////////////////////////////////////////////////////////////////////
    // first look for a label in the widget data, which would override that in the metadata //
-   // note - previously this had a ?: and one was pl={2}, the other was pl={3}...          //
    //////////////////////////////////////////////////////////////////////////////////////////
-   const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
+   const isParentWidget = props.widgetMetaData.type == "parentWidget"; // todo - do we need to know top-level parent, vs. a nested parent?
+   let labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label;
+
+   if (!labelToUse)
+   {
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      // prevent the label from disappearing, especially when it's being used as the page header //
+      /////////////////////////////////////////////////////////////////////////////////////////////
+      if (lastSeenLabel && isParentWidget && usingLabelAsTitle)
+      {
+         labelToUse = lastSeenLabel;
+      }
+   }
+
    let labelElement = (
-      <Typography sx={{cursor: "default", pl: "auto", pt: props.widgetMetaData.type == "parentWidget" ? "1rem" : "auto", fontWeight: 600}} variant="h6" display="inline">
+      <Typography sx={{cursor: "default", pl: "auto", fontWeight: 600}} variant={isParentWidget && (props.widgetData.isLabelPageTitle || usingLabelAsTitle) ? "h3" : "h6"} display="inline">
          {labelToUse}
       </Typography>
    );
 
-   if (props.widgetMetaData.tooltip)
+   let sublabelElement = (
+      <Box height="20px">
+         <Typography sx={{position: "relative", top: "-18px"}} variant="caption">
+            {props.widgetData?.sublabel}
+         </Typography>
+      </Box>
+   );
+
+   if (labelToUse && labelToUse != lastSeenLabel)
    {
-      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={false} followCursor={true} placement="bottom-start">{labelElement}</Tooltip>;
+      setLastSeenLabel(labelToUse);
+      setUsingLabelAsTitle(props.widgetData.isLabelPageTitle);
    }
 
+   const helpRoles = ["ALL_SCREENS"]
+   const slotName = "label";
+   const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
+
+   if(showHelp)
+   {
+      const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
+      labelElement = <Tooltip title={formattedHelpContent} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
+   }
+   else if (props.widgetMetaData?.tooltip)
+   {
+      labelElement = <Tooltip title={props.widgetMetaData.tooltip} arrow={true} placement="bottom-start">{labelElement}</Tooltip>;
+   }
+
+   const isTable = props.widgetMetaData.type == "table";
+
    const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
    const widgetContent =
       <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
          {
             needLabelBox &&
             <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%", ...props.labelBoxAdditionalSx}} minHeight={"2.5rem"}>
-               <Box>
-                  {
-                     hasPermission ?
-                        props.widgetMetaData?.icon && (
-                           <Box ml={1} mr={2} mt={-4} sx={{
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              width: "64px",
-                              height: "64px",
-                              borderRadius: "8px",
-                              background: colors.info.main,
-                              color: "#ffffff",
-                              float: "left"
-                           }}
-                           >
-                              <Icon fontSize="medium" color="inherit">
-                                 {props.widgetMetaData.icon}
-                              </Icon>
-                           </Box>
-                        ) :
-                        (
-                           <Box ml={3} mt={-4} sx={{
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              width: "64px",
-                              height: "64px",
-                              borderRadius: "8px",
-                              background: colors.info.main,
-                              color: "#ffffff",
-                              float: "left"
-                           }}
-                           >
-                              <Icon fontSize="medium" color="inherit">lock</Icon>
-                           </Box>
+               <Box display="flex" flexDirection="column">
+                  <Box display="flex" alignItems="baseline">
+                     {
+                        hasPermission ?
+                           props.widgetMetaData?.icon && (
+                              <Box ml={1} mr={2} mt={-4} sx={{
+                                 display: "flex",
+                                 justifyContent: "center",
+                                 alignItems: "center",
+                                 width: "64px",
+                                 height: "64px",
+                                 borderRadius: "8px",
+                                 background: colors.info.main,
+                                 color: "#ffffff",
+                                 float: "left"
+                              }}
+                              >
+                                 <Icon fontSize="medium" color="inherit">
+                                    {props.widgetMetaData.icon}
+                                 </Icon>
+                              </Box>
+                           ) :
+                           (
+                              <Box ml={3} mt={-4} sx={{
+                                 display: "flex",
+                                 justifyContent: "center",
+                                 alignItems: "center",
+                                 width: "64px",
+                                 height: "64px",
+                                 borderRadius: "8px",
+                                 background: colors.info.main,
+                                 color: "#ffffff",
+                                 float: "left"
+                              }}
+                              >
+                                 <Icon fontSize="medium" color="inherit">lock</Icon>
+                              </Box>
+                           )
+                     }
+                     {
+                        hasPermission && labelToUse && (labelElement)
+                     }
+                     {
+                        hasPermission && (
+                           labelComponentsLeft.map((component, i) =>
+                           {
+                              return (<React.Fragment key={i}>{renderComponent(component, i)}</React.Fragment>);
+                           })
                         )
-                  }
-                  {
-                     hasPermission && labelToUse && (labelElement)
-                  }
-                  {
-                     hasPermission && (
-                        labelComponentsLeft.map((component, i) =>
-                        {
-                           return (<span key={i}>{renderComponent(component, i)}</span>);
-                        })
-                     )
-                  }
-                  {props.labelAdditionalElementsLeft}
+                     }
+                     {localLabelAdditionalElementsLeft}
+                  </Box>
+                  <Box display="flex">
+                     {
+                        hasPermission && props.widgetData?.sublabel && (sublabelElement)
+                     }
+                  </Box>
                </Box>
                <Box>
                   {
@@ -650,17 +744,27 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
          }
          {
             !errorLoading && props?.footerHTML && (
-               <Box mt={1} ml={3} mr={3} mb={2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
+               <Box mt={isTable ? "36px" : 1} ml={isTable ? 0 : 3} mr={isTable ? 0 : 3} mb={isTable ? "-12px" : 2} sx={{fontWeight: 300, color: "#7b809a", display: "flex", alignContent: "flex-end", fontSize: "14px"}}>{parse(props.footerHTML)}</Box>
             )
          }
       </Box>;
 
    const padding = props.omitPadding ? "auto" : "24px 16px";
+
+   ///////////////////////////////////////////////////
+   // try to make tables fill their entire "parent" //
+   ///////////////////////////////////////////////////
+   let noCardMarginBottom = "unset";
+   if (isTable)
+   {
+      noCardMarginBottom = "-8px";
+   }
+
    return props.widgetMetaData?.isCard
-      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className={fullScreenWidgetClassName}>
+      ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", p: padding}} className="widget inCard">
          {widgetContent}
       </Card>
-      : <span style={{width: "100%", padding: padding}}>{widgetContent}</span>;
+      : <span style={{width: "100%", padding: padding, marginBottom: noCardMarginBottom}} className="widget noCard">{widgetContent}</span>;
 }
 
 export default Widget;

src/qqq/components/widgets/WidgetBlock.tsx

@@ -0,0 +1,90 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Alert, Skeleton} from "@mui/material";
+import React from "react";
+import BigNumberBlock from "qqq/components/widgets/blocks/BigNumberBlock";
+import {BlockData} from "qqq/components/widgets/blocks/BlockModels";
+import DividerBlock from "qqq/components/widgets/blocks/DividerBlock";
+import NumberIconBadgeBlock from "qqq/components/widgets/blocks/NumberIconBadgeBlock";
+import ProgressBarBlock from "qqq/components/widgets/blocks/ProgressBarBlock";
+import TableSubRowDetailRowBlock from "qqq/components/widgets/blocks/TableSubRowDetailRowBlock";
+import TextBlock from "qqq/components/widgets/blocks/TextBlock";
+import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
+
+
+interface WidgetBlockProps
+{
+   widgetMetaData: QWidgetMetaData;
+   block: BlockData;
+}
+
+
+/*******************************************************************************
+ ** Component to render a single Block in the widget framework!
+ *******************************************************************************/
+export default function WidgetBlock({widgetMetaData, block}: WidgetBlockProps): JSX.Element
+{
+   if(!block)
+   {
+      return (<Skeleton />);
+   }
+
+   if(!block.values)
+   {
+      block.values = {};
+   }
+
+   if(!block.styles)
+   {
+      block.styles = {};
+   }
+
+   if(block.blockTypeName == "COMPOSITE")
+   {
+      // @ts-ignore - special case for composite type block...
+      return (<CompositeWidget widgetMetaData={widgetMetaData} data={block} />);
+   }
+
+   switch(block.blockTypeName)
+   {
+      case "TEXT":
+         return (<TextBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "NUMBER_ICON_BADGE":
+         return (<NumberIconBadgeBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "UP_OR_DOWN_NUMBER":
+         return (<UpOrDownNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "TABLE_SUB_ROW_DETAIL_ROW":
+         return (<TableSubRowDetailRowBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "PROGRESS_BAR":
+         return (<ProgressBarBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "DIVIDER":
+         return (<DividerBlock widgetMetaData={widgetMetaData} data={block} />);
+      case "BIG_NUMBER":
+         return (<BigNumberBlock widgetMetaData={widgetMetaData} data={block} />);
+      default:
+         return (<Alert sx={{m: "0.5rem"}} color="warning">Unsupported block type: {block.blockTypeName}</Alert>)
+   }
+
+}

src/qqq/components/widgets/WidgetUtils.tsx

@@ -0,0 +1,100 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import Button from "@mui/material/Button";
+import Icon from "@mui/material/Icon";
+import Tooltip from "@mui/material/Tooltip/Tooltip";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import colors from "qqq/assets/theme/base/colors";
+import {WidgetData} from "qqq/components/widgets/Widget";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+/*******************************************************************************
+ ** Utility class used by Widgets
+ **
+ *******************************************************************************/
+export class WidgetUtils
+{
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static generateExportButton = (onExportClick: () => void): JSX.Element =>
+   {
+      return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
+         <Tooltip title="Export">
+            <Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}>
+               <Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon>
+            </Button>
+         </Tooltip>
+      </Typography>);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static widgetCsvDataToString = (data: WidgetData): string =>
+   {
+      function isNumeric(x: any)
+      {
+         return !isNaN(Number(x));
+      }
+
+      let csv = "";
+      for (let i = 0; i < data.csvData.length; i++)
+      {
+         for (let j = 0; j < data.csvData[i].length; j++)
+         {
+            if (j > 0)
+            {
+               csv += ",";
+            }
+
+            let cell = data.csvData[i][j];
+            if (cell && isNumeric(String(cell)))
+            {
+               csv += cell;
+            }
+            else
+            {
+               csv += `"${ValueUtils.cleanForCsv(cell)}"`;
+            }
+         }
+         csv += "\n";
+      }
+
+      return (csv);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static makeExportFileName = (data: WidgetData, widgetMetaData: QWidgetMetaData): string =>
+   {
+      const fileName = (data?.label ?? widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+      return (fileName);
+   };
+
+}

src/qqq/components/widgets/blocks/BigNumberBlock.tsx

@@ -0,0 +1,67 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders ... a big number, optionally with some other stuff.
+ **
+ ** ${heading}
+ ** ${number} ${context}
+ *******************************************************************************/
+export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   let flexJustifyContent = "normal";
+   let flexAlignItems = "baseline";
+
+   return (
+      <div style={{width: data.styles.width ?? "auto"}}>
+
+         <div style={{fontWeight: "700", fontSize: "0.875rem", color: "#3D3D3D", marginBottom: "-0.5rem"}}>
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
+               <span>{data.values.heading}</span>
+            </BlockElementWrapper>
+         </div>
+
+         <div style={{display: "flex", alignItems: flexAlignItems, justifyContent: flexJustifyContent}}>
+
+            <div style={{display: "flex", alignItems: "baseline"}}>
+               <div style={{fontWeight: "700", fontSize: "2rem", marginRight: "0.25rem"}}>
+                  <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+                     <span style={{color: data.styles.numberColor}}>{data.values.number}</span>
+                  </BlockElementWrapper>
+               </div>
+               {
+                  data.values.context &&
+                  <div style={{fontWeight: "500", fontSize: "0.875rem", color: "#7b809a"}}>
+                     <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
+                        <span>{data.values.context}</span>
+                     </BlockElementWrapper>
+                  </div>
+               }
+            </div>
+
+         </div>
+      </div>
+   );
+}

src/qqq/components/widgets/blocks/BlockElementWrapper.tsx

@@ -0,0 +1,106 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+import {Tooltip} from "@mui/material";
+import React, {ReactElement, useContext} from "react";
+import {Link} from "react-router-dom";
+import QContext from "QContext";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
+import {BlockData, BlockLink, BlockTooltip} from "qqq/components/widgets/blocks/BlockModels";
+
+interface BlockElementWrapperProps
+{
+   data: BlockData;
+   metaData: QWidgetMetaData;
+   slot: string
+   linkProps?: any;
+   children: ReactElement;
+}
+
+/*******************************************************************************
+ ** For Blocks - wrap their "slot" elements with an optional tooltip and/or link
+ *******************************************************************************/
+export default function BlockElementWrapper({data, metaData, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
+{
+   const {helpHelpActive} = useContext(QContext);
+
+   let link: BlockLink;
+   let tooltip: BlockTooltip;
+
+   if(slot)
+   {
+      link = data.linkMap && data.linkMap[slot.toUpperCase()];
+      if(!link)
+      {
+         link = data.link;
+      }
+
+      tooltip = data.tooltipMap && data.tooltipMap[slot.toUpperCase()];
+      if(!tooltip)
+      {
+         tooltip = data.tooltip;
+      }
+   }
+   else
+   {
+      link = data.link;
+      tooltip = data.tooltip;
+   }
+
+   if(!tooltip)
+   {
+      const helpRoles = ["ALL_SCREENS"]
+
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      // the full keys in the helpContent table will look like:                                    //
+      // widget:MyCoolWidget;slot=myBlockId,label (if the block has a blockId in data)             //
+      // widget:MyCoolWidget;slot=label (no blockId; note, label is slot name here)                //
+      // in the widget metaData, the map of helpContent will just have the "slot" portion as a key //
+      ///////////////////////////////////////////////////////////////////////////////////////////////
+      const key = data.blockId ? `${data.blockId},${slot}` : slot;
+      const showHelp = helpHelpActive || hasHelpContent(metaData?.helpContent?.get(key), helpRoles);
+
+      if(showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={metaData?.helpContent?.get(key)} roles={helpRoles} helpContentKey={`widget:${metaData?.name};slot:${key}`} />;
+         tooltip = {title: formattedHelpContent, placement: "bottom"}
+      }
+   }
+
+   let rs = children;
+
+   if(link)
+   {
+      rs = <Link to={link.href} target={link.target} style={{color: "#546E7A"}} {...linkProps}>{rs}</Link>
+   }
+
+   if(tooltip)
+   {
+      let placement = tooltip.placement ? tooltip.placement.toLowerCase() : "bottom"
+
+      // @ts-ignore - placement possible values
+      rs = <Tooltip title={tooltip.title} placement={placement}>{rs}</Tooltip>
+   }
+
+   return (rs);
+}

src/qqq/components/widgets/blocks/BlockModels.ts

@@ -0,0 +1,59 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
+
+
+export interface BlockData
+{
+   blockId?: string;
+   blockTypeName: string;
+
+   tooltip?: BlockTooltip;
+   link?: BlockLink;
+   tooltipMap?: {[slot: string]: BlockTooltip};
+   linkMap?: {[slot: string]: BlockLink};
+
+   values: any;
+   styles?: any;
+}
+
+
+export interface BlockTooltip
+{
+   title: string | JSX.Element;
+   placement: string;
+}
+
+
+export interface BlockLink
+{
+   href: string;
+   target: string;
+}
+
+
+export interface StandardBlockComponentProps
+{
+   widgetMetaData: QWidgetMetaData;
+   data: BlockData;
+}
+

src/qqq/components/widgets/blocks/DividerBlock.tsx

@@ -0,0 +1,33 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a simple dividing line
+ ** margins & width are set such that it covers the padding of a card.
+ ** if we need to use it differently, a style attribute should be added to its backend data.
+ *******************************************************************************/
+export default function DividerBlock({}: StandardBlockComponentProps): JSX.Element
+{
+   return (<div style={{margin: "1rem -1rem", width: "calc(100% + 2rem)", borderBottom: "1px solid #E0E0E0"}} />);
+}

src/qqq/components/widgets/blocks/NumberIconBadgeBlock.tsx

@@ -0,0 +1,48 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Icon from "@mui/material/Icon";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+/*******************************************************************************
+ ** Block that renders ... a number, and an icon, like a badge.
+ **
+ ** ${number} ${icon}
+ *******************************************************************************/
+export default function NumberIconBadgeBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <div style={{display: "inline-block", whiteSpace: "nowrap", color: data.styles.color}}>
+         {
+            data.values.number &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+               <span style={{color: data.styles.color, fontSize: "0.875rem"}}>{data.values.number}</span>
+            </BlockElementWrapper>
+         }
+         {
+            data.values.iconName &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
+               <Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
+            </BlockElementWrapper>
+         }
+      </div>);
+}

src/qqq/components/widgets/blocks/ProgressBarBlock.tsx

@@ -0,0 +1,70 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Typography from "@mui/material/Typography";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a progress bar!
+ **
+ ** Values:
+ **    ${heading}
+ **    [${percent}===___] ${value ?? percent}
+ **
+ ** Slots:
+ **    ${heading}
+ **    ${bar}             ${value}
+ *******************************************************************************/
+export default function ProgressBarBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <Typography component="div" variant="button" color="text" fontWeight="light" sx={{textTransform: "none"}}>
+         {
+            data.values.heading &&
+            <div style={{marginBottom: "0.25rem", fontWeight: 500, color: "#3D3D3D"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
+                  <span>{data.values.heading}</span>
+               </BlockElementWrapper>
+            </div>
+         }
+
+         <div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
+
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="bar" linkProps={{style: {width: "100%"}}}>
+               <div style={{background: "#E0E0E0", width: "100%", borderRadius: "0.5rem", height: "1rem"}}>
+                  {
+                     data.values.percent > 0 ? <div style={{background: data.styles.barColor ?? "#0062ff", minWidth: "1rem", width: `${data.values.percent}%`, borderRadius: "0.5rem", height: "1rem"}}></div> : <></>
+                  }
+               </div>
+            </BlockElementWrapper>
+
+            <div style={{width: "60px", textAlign: "right", fontWeight: 600, color: "#3D3D3D"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
+                  <span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
+               </BlockElementWrapper>
+            </div>
+
+         </div>
+      </Typography>);
+
+}

src/qqq/components/widgets/blocks/TableSubRowDetailRowBlock.tsx

@@ -0,0 +1,54 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders a label & value, meant to be used as a detail-row in a
+ ** sub-row within a table widget
+ **
+ ** ${label} ${value}
+ *******************************************************************************/
+export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <div style={{display: "flex", maxWidth: "calc(100% - 24px)", justifyContent: "space-between"}}>
+
+         {
+            data.values.label &&
+            <div style={{overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="label">
+                  <span style={{color: data.styles.labelColor}}>{data.values.label}</span>
+               </BlockElementWrapper>
+            </div>
+         }
+
+         {
+            data.values.value &&
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
+               <span style={{color: data.styles.valueColor}}>{data.values.value}</span>
+            </BlockElementWrapper>
+         }
+      </div>
+   );
+}

src/qqq/components/widgets/blocks/TextBlock.tsx

@@ -0,0 +1,37 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+/*******************************************************************************
+ ** Block that renders ... just some text.
+ **
+ ** ${text}
+ *******************************************************************************/
+export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   return (
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
+         <span>{data.values.text}</span>
+      </BlockElementWrapper>
+   );
+}

src/qqq/components/widgets/blocks/UpOrDownNumberBlock.tsx

@@ -0,0 +1,81 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import Icon from "@mui/material/Icon";
+import React from "react";
+import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
+import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
+
+
+/*******************************************************************************
+ ** Block that renders an up/down icon, a number, and some context
+ **
+ ** ${icon} ${number} ${context}
+ *
+ ** or, if style.isStacked:
+ *
+ ** ${icon} ${number}
+ ** ${context}
+ *******************************************************************************/
+export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
+{
+   if (!data.styles)
+   {
+      data.styles = {};
+   }
+
+   if (!data.values)
+   {
+      data.values = {};
+   }
+
+   const UP_ICON = "arrow_drop_up";
+   const DOWN_ICON = "arrow_drop_down";
+
+   const defaultGreenColor = "#2BA83F";
+   const defaultRedColor = "#FB4141";
+
+   const goodOrBadColor = data.styles.colorOverride ?? (data.values.isGood ? defaultGreenColor : defaultRedColor);
+   const iconName = data.values.isUp ? UP_ICON : DOWN_ICON;
+
+   return (
+      <>
+         <div style={{display: "flex", flexDirection: data.styles.isStacked ? "column" : "row", alignItems: data.styles.isStacked ? "flex-end" : "baseline"}}>
+
+            <div style={{display: "flex", alignItems: "baseline", fontWeight: 700, fontSize: ".875rem"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="number">
+                  <>
+                     <Icon sx={{color: goodOrBadColor, alignSelf: "flex-end", fontSize: "2.25rem !important", lineHeight: "0.875rem", height: "1rem", width: "2rem",}}>{iconName}</Icon>
+                     <span style={{color: goodOrBadColor}}>{data.values.number}</span>
+                  </>
+               </BlockElementWrapper>
+            </div>
+
+            <div style={{fontWeight: 500, fontSize: "0.875rem", color: "#7b809a", marginLeft: "0.25rem"}}>
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
+                  <span>{data.values.context}</span>
+               </BlockElementWrapper>
+            </div>
+
+         </div>
+      </>
+   );
+}

src/qqq/components/widgets/charts/StackedBarChart.tsx

@@ -39,65 +39,79 @@ ChartJS.register(
    Legend
 );
 
-export const options = {
-   maintainAspectRatio: false,
-   responsive: true,
-   animation: {
-      duration: 0
-   },
-   elements: {
-      bar: {
-         borderRadius: 4
-      }
-   },
-   plugins: {
-      tooltip: {
-         // todo - some configs around this
-         callbacks: {
-            title: function(context: any)
-            {
-               return ("");
-            },
-            label: function(context: any)
-            {
-               if(context.dataset.label.startsWith(context.label))
-               {
-                  return `${context.label}: ${context.formattedValue}`;
-               }
-               else
+export const makeOptions = (data: DefaultChartData) =>
+{
+   return({
+      maintainAspectRatio: false,
+      responsive: true,
+      animation: {
+         duration: 0
+      },
+      elements: {
+         bar: {
+            borderRadius: 4
+         }
+      },
+      onHover: function (event: any, elements: any[], chart: any)
+      {
+         if(event.type == "mousemove" && elements.length > 0 && data.urls && data.urls.length > elements[0].index && data.urls[elements[0].index])
+         {
+            chart.canvas.style.cursor = "pointer";
+         }
+         else
+         {
+            chart.canvas.style.cursor = "default";
+         }
+      },
+      plugins: {
+         tooltip: {
+            // todo - some configs around this
+            callbacks: {
+               title: function(context: any)
                {
                   return ("");
+               },
+               label: function(context: any)
+               {
+                  if(context.dataset.label.startsWith(context.label))
+                  {
+                     return `${context.label}: ${context.formattedValue}`;
+                  }
+                  else
+                  {
+                     return ("");
+                  }
+               }
+            }
+         },
+         legend: {
+            position: "bottom",
+            labels: {
+               usePointStyle: true,
+               pointStyle: "circle",
+               boxHeight: 6,
+               boxWidth: 6,
+               padding: 12,
+               font: {
+                  size: 14
                }
             }
          }
       },
-      legend: {
-         position: "bottom",
-         labels: {
-            usePointStyle: true,
-            pointStyle: "circle",
-            boxHeight: 6,
-            boxWidth: 6,
-            padding: 12,
-            font: {
-               size: 14
-            }
-         }
-      }
-   },
-   scales: {
-      x: {
-         stacked: true,
-         grid: {display: false},
-         ticks: {autoSkip: false, maxRotation: 90}
+      scales: {
+         x: {
+            stacked: true,
+            grid: {display: false},
+            ticks: {autoSkip: false, maxRotation: 90}
+         },
+         y: {
+            stacked: true,
+            position: "right",
+            ticks: {precision: 0}
+         },
       },
-      y: {
-         stacked: true,
-         position: "right",
-         ticks: {precision: 0}
-      },
-   },
-};
+   });
+}
 
 interface Props
 {
@@ -151,7 +165,7 @@ function StackedBarChart({data, chartSubheaderData}: Props): JSX.Element
       <Box>
          {chartSubheaderData && (<ChartSubheaderWithData chartSubheaderData={chartSubheaderData} />)}
          <Box width="100%" height="300px">
-            <Bar data={data} options={options} getElementsAtEvent={handleClick} />
+            <Bar data={data} options={makeOptions(data)} getElementsAtEvent={handleClick} />
          </Box>
       </Box>
    ) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} />;

src/qqq/components/widgets/charts/piechart/PieChart.tsx

@@ -70,7 +70,7 @@ function PieChart({description, chartData, chartSubheaderData}: Props): JSX.Elem
          chartData.dataset.backgroundColors = chartColors;
       }
    }
-   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
+   const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {}, chartData?.dataset?.urls);
 
    useEffect(() =>
    {

src/qqq/components/widgets/charts/piechart/PieChartConfigs.ts

@@ -23,7 +23,7 @@ import colors from "qqq/assets/theme/base/colors";
 
 const {gradients, dark} = colors;
 
-function configs(labels: any, datasets: any)
+function configs(labels: any, datasets: any, urls: string[] | undefined)
 {
    const backgroundColors = [];
 
@@ -66,6 +66,17 @@ function configs(labels: any, datasets: any)
       options: {
          maintainAspectRatio: false,
          responsive: true,
+         onHover: function (event: any, elements: any[], chart: any)
+         {
+            if(event.type == "mousemove" && elements.length > 0 && urls && urls.length > elements[0].index && urls[elements[0].index])
+            {
+               chart.canvas.style.cursor = "pointer";
+            }
+            else
+            {
+               chart.canvas.style.cursor = "default";
+            }
+         },
          plugins: {
             tooltip: {
                callbacks: {

src/qqq/components/widgets/misc/DataBagViewer.tsx

@@ -25,14 +25,13 @@ import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QC
 import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
 import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
 import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {Chip} from "@mui/material";
 import Alert from "@mui/material/Alert";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import Chip from "@mui/material/Chip";
 import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
-import Icon from "@mui/material/Icon";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
@@ -42,8 +41,6 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
 import DataBagDataEditor, {DataBagDataEditorProps} from "qqq/components/databags/DataBagDataEditor";
 import DataBagPreview from "qqq/components/databags/DataBagPreview";
 import TabPanel from "qqq/components/misc/TabPanel";
@@ -57,6 +54,8 @@ import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -64,12 +63,11 @@ const qController = Client.getInstance();
 // Declaring props types for ViewForm
 interface Props
 {
-   dataBagId: number
+   dataBagId: number;
 }
 
 DataBagViewer.defaultProps =
-   {
-   };
+   {};
 
 export default function DataBagViewer({dataBagId}: Props): JSX.Element
 {
@@ -77,12 +75,12 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
    const [asyncLoadInited, setAsyncLoadInited] = useState(false);
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
-   const [currentVersionId , setCurrentVersionId] = useState(null as number);
+   const [currentVersionId, setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as DataBagDataEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string)
+   const [failText, setFailText] = useState(null as string);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -100,13 +98,13 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
 
             const criteria = [new QFilterCriteria("dataBagId", QCriteriaOperator.EQUALS, [dataBagId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
             const versions = await qController.query("dataBagVersion", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if(versions && versions.length > 0)
+            if (versions && versions.length > 0)
             {
                setCurrentVersionId(versions[0].values.get("id"));
                const latestVersion = await qController.get("dataBagVersion", versions[0].values.get("id"));
@@ -362,7 +360,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                                              <Typography variant="h6" pl={3}>Data Preview (Version {selectedVersionRecord?.values?.get("sequenceNo")})</Typography>
                                           </Box>
                                           <Box height="400px" overflow="auto" ml={1} fontSize="14px">
-                                             {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} /> }
+                                             {loadingSelectedVersion.isNotLoading() && selectedTab == 1 && selectedVersionRecord?.values?.get("data") && <DataBagPreview json={selectedVersionRecord?.values?.get("data")} />}
                                              {loadingSelectedVersion.isLoadingSlow() && <Box pl={3}>Loading...</Box>}
                                           </Box>
                                        </Grid>
@@ -377,7 +375,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <DataBagDataEditor
                                  closeCallback={closeEditingScript}
-                                 {... editorProps}
+                                 {...editorProps}
                               />
                            </Modal>
                         }

src/qqq/components/widgets/misc/RecordGridWidget.tsx

@@ -178,7 +178,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
    if(widgetMetaData?.showExportButton)
    {
       labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative">
+         <Typography key={1} variant="body2" px={0} display="inline" position="relative">
             <Tooltip title={tooltipTitle}><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={isExportDisabled}><Icon sx={{color: "#757575", fontSize: 1.25}}>save_alt</Icon></Button></Tooltip>
          </Typography>
       );

src/qqq/components/widgets/misc/ScriptViewer.tsx

@@ -46,9 +46,6 @@ import Snackbar from "@mui/material/Snackbar";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
-import React, {useReducer, useState} from "react";
-import AceEditor from "react-ace";
-import {Link} from "react-router-dom";
 import TabPanel from "qqq/components/misc/TabPanel";
 import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
 import ScriptEditor, {ScriptEditorProps} from "qqq/components/scripts/ScriptEditor";
@@ -65,6 +62,9 @@ import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/mode-velocity";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-github";
+import React, {useReducer, useState} from "react";
+import AceEditor from "react-ace";
+import {Link} from "react-router-dom";
 import "ace-builds/src-noconflict/ext-language_tools";
 
 const qController = Client.getInstance();
@@ -97,16 +97,16 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const [versionRecordList, setVersionRecordList] = useState(null as QRecord[]);
    const [selectedVersionRecord, setSelectedVersionRecord] = useState(null as QRecord);
    const [scriptLogs, setScriptLogs] = useState({} as any);
-   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord)
-   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[])
+   const [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
+   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = useState(null as QRecord[]);
    const [availableFileNames, setAvailableFileNames] = useState([] as string[]);
    const [selectedFileName, setSelectedFileName] = useState("");
-   const [currentVersionId , setCurrentVersionId] = useState(null as number);
+   const [currentVersionId, setCurrentVersionId] = useState(null as number);
    const [notFoundMessage, setNotFoundMessage] = useState(null);
    const [selectedTab, setSelectedTab] = useState(0);
    const [editorProps, setEditorProps] = useState(null as ScriptEditorProps);
    const [successText, setSuccessText] = useState(null as string);
-   const [failText, setFailText] = useState(null as string)
+   const [failText, setFailText] = useState(null as string);
    const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
    const [loadingSelectedVersion, _] = useState(new LoadingState(forceUpdate, "loading"));
@@ -129,13 +129,13 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
             let fileMode = scriptTypeRecord.values.get("fileMode");
             let scriptTypeFileSchemaList: QRecord[] = null;
-            if(fileMode == 1) // SINGLE
+            if (fileMode == 1) // SINGLE
             {
                scriptTypeFileSchemaList = [new QRecord({values: {name: "Script.js", fileType: "javascript"}})];
             }
-            else if(fileMode == 2) // MULTI_PRE_DEFINED
+            else if (fileMode == 2) // MULTI_PRE_DEFINED
             {
-               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")])
+               const filter = new QQueryFilter([new QFilterCriteria("scriptTypeId", QCriteriaOperator.EQUALS, [scriptRecord.values.get("scriptTypeId")])], [new QFilterOrderBy("id")]);
                scriptTypeFileSchemaList = await qController.query("scriptTypeFileSchema", filter);
             }
             else // MULTI AD_HOC
@@ -145,22 +145,22 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             }
 
             setScriptTypeFileSchemaList(scriptTypeFileSchemaList);
-            if(scriptTypeFileSchemaList)
+            if (scriptTypeFileSchemaList)
             {
-               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"))
+               const availableFileNames = scriptTypeFileSchemaList.map((fileSchemaRecord) => fileSchemaRecord.values.get("name"));
                setAvailableFileNames(availableFileNames);
-               setSelectedFileName(availableFileNames[0])
+               setSelectedFileName(availableFileNames[0]);
             }
 
             const criteria = [new QFilterCriteria("scriptId", QCriteriaOperator.EQUALS, [scriptId])];
             const orderBys = [new QFilterOrderBy("sequenceNo", false)];
-            const filter = new QQueryFilter(criteria, orderBys, "AND", 0, 25);
+            const filter = new QQueryFilter(criteria, orderBys, null, "AND", 0, 25);
             const versions = await qController.query("scriptRevision", filter);
             console.log("Fetched versions:");
             console.log(versions);
             setVersionRecordList(versions);
 
-            if(versions && versions.length > 0)
+            if (versions && versions.length > 0)
             {
                selectVersion(versions[0]);
             }
@@ -253,31 +253,31 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const handleSelectFile = (event: SelectChangeEvent) =>
    {
       setSelectedFileName(event.target.value);
-   }
+   };
 
    const getSelectedFileCode = (): string =>
    {
       return (getSelectedVersionCode()[selectedFileName] ?? "");
-   }
+   };
 
    const getSelectedFileType = (): string =>
    {
       for (let i = 0; i < scriptTypeFileSchemaList.length; i++)
       {
          let name = scriptTypeFileSchemaList[i].values.get("name");
-         if(name == selectedFileName)
+         if (name == selectedFileName)
          {
             return (scriptTypeFileSchemaList[i].values.get("fileType"));
          }
       }
 
       return ("javascript"); // have some default...
-   }
+   };
 
-   const getSelectedVersionCode = (): {[name: string]: string} =>
+   const getSelectedVersionCode = (): { [name: string]: string } =>
    {
-      let rs: {[name: string]: string} = {}
-      let files = selectedVersionRecord?.associatedRecords?.get("files")
+      let rs: { [name: string]: string } = {};
+      let files = selectedVersionRecord?.associatedRecords?.get("files");
 
       for (let j = 0; j < files?.length; j++)
       {
@@ -286,7 +286,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (rs);
-   }
+   };
 
    function getVersionsList(versionRecordList: QRecord[], selectedVersionRecord: QRecord)
    {
@@ -344,11 +344,11 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
 
    const getScriptLogs = (scriptRevisionId: number) =>
    {
-      if(!scriptLogs[scriptRevisionId])
+      if (!scriptLogs[scriptRevisionId])
       {
          (async () =>
          {
-            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], "AND", 0, 100);
+            let filter = new QQueryFilter([new QFilterCriteria("scriptRevisionId", QCriteriaOperator.EQUALS, [scriptRevisionId])], [new QFilterOrderBy("id", false)], null, "AND", 0, 100);
             scriptLogs[scriptRevisionId] = await qController.query("scriptLog", filter);
             setScriptLogs(scriptLogs);
             forceUpdate();
@@ -368,7 +368,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return (<ScriptLogsView logs={logs} />);
-   }
+   };
 
    let editButtonTooltip = "";
    let editButtonText = "Create New Version";
@@ -556,7 +556,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
                            <Modal open={editorProps !== null} onClose={(event, reason) => closeEditingScript(event, reason)}>
                               <ScriptEditor
                                  closeCallback={closeEditingScript}
-                                 {... editorProps}
+                                 {...editorProps}
                               />
                            </Modal>
                         }

src/qqq/components/widgets/tables/DataTable.tsx

@@ -18,6 +18,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {tooltipClasses, TooltipProps} from "@mui/material";
 import Autocomplete from "@mui/material/Autocomplete";
 import Box from "@mui/material/Box";
@@ -29,17 +30,19 @@ import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import Tooltip from "@mui/material/Tooltip";
 import parse from "html-react-parser";
-import {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
+import React, {useEffect, useMemo, useState} from "react";
+import {useAsyncDebounce, useExpanded, useGlobalFilter, usePagination, useSortBy, useTable} from "react-table";
 import colors from "qqq/assets/theme/base/colors";
 import MDInput from "qqq/components/legacy/MDInput";
 import MDPagination from "qqq/components/legacy/MDPagination";
 import MDTypography from "qqq/components/legacy/MDTypography";
+import CompositeWidget from "qqq/components/widgets/CompositeWidget";
 import DataTableBodyCell from "qqq/components/widgets/tables/cells/DataTableBodyCell";
 import DataTableHeadCell from "qqq/components/widgets/tables/cells/DataTableHeadCell";
 import DefaultCell from "qqq/components/widgets/tables/cells/DefaultCell";
 import ImageCell from "qqq/components/widgets/tables/cells/ImageCell";
 import {TableDataInput} from "qqq/components/widgets/tables/TableCard";
+import WidgetBlock from "qqq/components/widgets/WidgetBlock";
 
 interface Props
 {
@@ -57,6 +60,7 @@ interface Props
    };
    isSorted?: boolean;
    noEndBorder?: boolean;
+   widgetMetaData: QWidgetMetaData;
 }
 
 DataTable.defaultProps = {
@@ -92,6 +96,7 @@ function DataTable({
    pagination,
    isSorted,
    noEndBorder,
+   widgetMetaData
 }: Props): JSX.Element
 {
    let defaultValue: any;
@@ -168,6 +173,17 @@ function DataTable({
       );
    }
 
+   if(table.columnHeaderTooltips)
+   {
+      for (let column of columnsToMemo)
+      {
+         if(table.columnHeaderTooltips[column.accessor])
+         {
+            column.tooltip = table.columnHeaderTooltips[column.accessor];
+         }
+      }
+   }
+
    const columns = useMemo<any>(() => columnsToMemo, [table]);
    const data = useMemo<any>(() => table.rows, [table]);
    const gridTemplateColumns = widths.join(" ");
@@ -280,21 +296,36 @@ function DataTable({
       entriesEnd = pageSize * (pageIndex + 1);
    }
 
+   let visibleFooterRows = 1;
+   if(expanded && expanded[`${table.rows.length-1}`])
+   {
+      //////////////////////////////////////////////////
+      // todo - should count how many are expanded... //
+      //////////////////////////////////////////////////
+      visibleFooterRows = 2;
+   }
+
    function getTable(includeHead: boolean, rows: any, isFooter: boolean)
    {
       let boxStyle = {};
       if(fixedStickyLastRow)
       {
          boxStyle = isFooter
-            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, overflow: "auto", scrollbarGutter: "stable"}
-            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
+            : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
       }
 
-      return <Box sx={boxStyle}>
+      let innerBoxStyle = {};
+      if(fixedStickyLastRow && isFooter)
+      {
+         innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"};
+      }
+
+      return <Box sx={boxStyle}><Box sx={innerBoxStyle}>
          <Table {...getTableProps()}>
             {
                includeHead && (
-                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white"}}>
+                  <Box component="thead" sx={{position: "sticky", top: 0, background: "white", zIndex: 10}}>
                      {headerGroups.map((headerGroup: any, i: number) => (
                         <TableRow key={i} {...headerGroup.getHeaderGroupProps()} sx={{display: "grid", gridTemplateColumns: gridTemplateColumns}}>
                            {headerGroup.headers.map((column: any) => (
@@ -304,6 +335,7 @@ function DataTable({
                                     {...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
                                     align={column.align ? column.align : "left"}
                                     sorted={setSortedValue(column)}
+                                    tooltip={column.tooltip}
                                  >
                                     {column.render("header")}
                                  </DataTableHeadCell>
@@ -341,13 +373,23 @@ function DataTable({
                      overrideNoEndBorder = true;
                   }
 
+                  let background = "initial";
+                  if(isFooter)
+                  {
+                     background = "#EEEEEE";
+                  }
+                  else if(row.depth > 0 || row.isExpanded)
+                  {
+                     background = "#FAFAFA";
+                  }
+
                   return (
-                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: (row.depth > 0 ? "#FAFAFA" : "initial")}} key={key} {...row.getRowProps()}>
+                     <TableRow sx={{verticalAlign: "top", display: "grid", gridTemplateColumns: gridTemplateColumns, background: background}} key={key} {...row.getRowProps()}>
                         {row.cells.map((cell: any) => (
                            cell.column.type !== "hidden" && (
                               <DataTableBodyCell
                                  key={key}
-                                 noBorder={noEndBorder || overrideNoEndBorder}
+                                 noBorder={noEndBorder || overrideNoEndBorder || row.isExpanded}
                                  depth={row.depth}
                                  align={cell.column.align ? cell.column.align : "left"}
                                  {...cell.getCellProps()}
@@ -372,7 +414,21 @@ function DataTable({
                                  }
                                  {
                                     cell.column.type === "html" && (
-                                       <DefaultCell isFooter={isFooter}>{parse(cell.value)}</DefaultCell>
+                                       <DefaultCell isFooter={isFooter}>{parse(cell.value ?? "")}</DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "composite" && (
+                                       <DefaultCell isFooter={isFooter}>
+                                          <CompositeWidget widgetMetaData={widgetMetaData} data={cell.value} />
+                                       </DefaultCell>
+                                    )
+                                 }
+                                 {
+                                    cell.column.type === "block" && (
+                                       <DefaultCell isFooter={isFooter}>
+                                          <WidgetBlock widgetMetaData={widgetMetaData} block={cell.value} />
+                                       </DefaultCell>
                                     )
                                  }
                                  {
@@ -397,11 +453,11 @@ function DataTable({
 
             </TableBody>
          </Table>
-      </Box>
+      </Box></Box>
    }
 
    return (
-      <TableContainer sx={{boxShadow: "none"}}>
+      <TableContainer sx={{boxShadow: "none", height: fixedHeight ? `${fixedHeight}px` : "auto"}}>
          {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? (
             <Box display="flex" justifyContent="space-between" alignItems="center" p={3}>
                {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (
@@ -448,14 +504,16 @@ function DataTable({
             </Box>
          ) : null}
 
-         {
-            fixedStickyLastRow ? (
-               <>
-                  {getTable(true, page.slice(0, page.length -1), false)}
-                  {getTable(false, page.slice(page.length-1), true)}
-               </>
-            ) : getTable(true, page, false)
-         }
+         <Box display="flex" justifyContent="space-between" flexDirection="column" height="100%">
+            {
+               fixedStickyLastRow ? (
+                  <>
+                     {getTable(true, page.slice(0, page.length - visibleFooterRows), false)}
+                     {getTable(false, page.slice(page.length - visibleFooterRows), true)}
+                  </>
+               ) : getTable(true, page, false)
+            }
+         </Box>
 
          <Box
             display="flex"

src/qqq/components/widgets/tables/TableCard.tsx

@@ -20,6 +20,7 @@
  */
 
 import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance";
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Skeleton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Table from "@mui/material/Table";
@@ -42,6 +43,7 @@ import Client from "qqq/utils/qqq/Client";
 export interface TableDataInput
 {
    columns: { [key: string]: any }[];
+   columnHeaderTooltips?: { [columnName: string]: string | JSX.Element }
    rows: { [key: string]: any }[];
 }
 
@@ -57,10 +59,11 @@ interface Props
    fixedStickyLastRow?: boolean;
    fixedHeight?: number;
    data: TableDataInput;
+   widgetMetaData: QWidgetMetaData;
 }
 
 const qController = Client.getInstance();
-function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight}: Props): JSX.Element
+function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, fixedStickyLastRow, fixedHeight, widgetMetaData}: Props): JSX.Element
 {
    const [qInstance, setQInstance] = useState(null as QInstance);
 
@@ -74,7 +77,7 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
    }, []);
 
    return (
-      <Box py={1} mx={-2}>
+      <Box className="tableCard" mx={-2} mb="-28px" pt="11px" pb="0.25rem">
          {
             data && data.columns && !noRowsFoundHTML ?
                <DataTable
@@ -85,9 +88,10 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown,
                   fixedHeight={fixedHeight}
                   showTotalEntries={false}
                   isSorted={false}
+                  widgetMetaData={widgetMetaData}
                />
                : noRowsFoundHTML ?
-                  <Box p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
+                  <Box p={3} pt={0} pb={3} sx={{textAlign: "center"}}>
                      <MDTypography
                         variant="subtitle2"
                         color="secondary"

src/qqq/components/widgets/tables/TableWidget.tsx

@@ -21,16 +21,14 @@
 
 
 import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
-import Button from "@mui/material/Button";
-import Icon from "@mui/material/Icon";
-import Tooltip from "@mui/material/Tooltip/Tooltip";
-import Typography from "@mui/material/Typography";
 // @ts-ignore
 import {htmlToText} from "html-to-text";
-import React, {useEffect, useState} from "react";
-import colors from "qqq/assets/theme/base/colors";
+import React, {useContext, useEffect, useState} from "react";
+import QContext from "QContext";
+import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
 import TableCard from "qqq/components/widgets/tables/TableCard";
 import Widget, {WidgetData} from "qqq/components/widgets/Widget";
+import {WidgetUtils} from "qqq/components/widgets/WidgetUtils";
 import HtmlUtils from "qqq/utils/HtmlUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
 
@@ -50,6 +48,7 @@ function TableWidget(props: Props): JSX.Element
    const [isExportDisabled, setIsExportDisabled] = useState(false); // hmm, would like true here, but it broke...
    const [csv, setCsv] = useState(null as string);
    const [fileName, setFileName] = useState(null as string);
+   const {helpHelpActive} = useContext(QContext);
 
    const rows = props.widgetData?.rows;
    const columns = props.widgetData?.columns;
@@ -105,7 +104,7 @@ function TableWidget(props: Props): JSX.Element
 
          setCsv(csv);
 
-         const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
          setFileName(fileName)
 
          console.log(`useEffect, setting fileName ${fileName}`);
@@ -115,7 +114,13 @@ function TableWidget(props: Props): JSX.Element
 
    const onExportClick = () =>
    {
-      if(csv)
+      if(props.widgetData?.csvData)
+      {
+         const csv = WidgetUtils.widgetCsvDataToString(props.widgetData);
+         const fileName = WidgetUtils.makeExportFileName(props.widgetData, props.widgetMetaData);
+         HtmlUtils.download(fileName, csv);
+      }
+      else if(csv)
       {
          HtmlUtils.download(fileName, csv);
       }
@@ -128,11 +133,24 @@ function TableWidget(props: Props): JSX.Element
    const labelAdditionalElementsLeft: JSX.Element[] = [];
    if(props.widgetMetaData?.showExportButton)
    {
-      labelAdditionalElementsLeft.push(
-         <Typography key={1} variant="body2" py={2} px={0} display="inline" position="relative" top="-0.25rem">
-            <Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={onExportClick} disabled={false}><Icon sx={{color: colors.gray.main, fontSize: 1.125}}>save_alt</Icon></Button></Tooltip>
-         </Typography>
-      );
+      labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
+   }
+
+   //////////////////////////////////////////////////////
+   // look for column-header tooltips from helpContent //
+   //////////////////////////////////////////////////////
+   const columnHeaderTooltips: {[columnName: string]: JSX.Element} = {}
+   for (let column of props.widgetData?.columns ?? [])
+   {
+      const helpRoles = ["ALL_SCREENS"]
+      const slotName = `columnHeader=${column.accessor}`;
+      const showHelp = helpHelpActive || hasHelpContent(props.widgetMetaData?.helpContent?.get(slotName), helpRoles);
+
+      if(showHelp)
+      {
+         const formattedHelpContent = <HelpContent helpContents={props.widgetMetaData?.helpContent?.get(slotName)} roles={helpRoles} helpContentKey={`widget:${props.widgetMetaData?.name};slot:${slotName}`} />;
+         columnHeaderTooltips[column.accessor] = formattedHelpContent;
+      }
    }
 
    return (
@@ -150,7 +168,8 @@ function TableWidget(props: Props): JSX.Element
             hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
             fixedStickyLastRow={props.widgetData?.fixedStickyLastRow}
             fixedHeight={props.widgetData?.fixedHeight}
-            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
+            data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows, columnHeaderTooltips: columnHeaderTooltips}}
+            widgetMetaData={props.widgetMetaData}
          />
       </Widget>
    );

src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx

@@ -39,7 +39,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element
          component="td"
          textAlign={align}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, typography: {size}, borders: {borderWidth}}: Theme) => ({
             borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${colors.grayLines.main}`,
             fontSize: "0.875rem",

src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx

@@ -22,6 +22,7 @@
 import Box from "@mui/material/Box";
 import Icon from "@mui/material/Icon";
 import {Theme} from "@mui/material/styles";
+import Tooltip from "@mui/material/Tooltip";
 import {ReactNode} from "react";
 import colors from "qqq/assets/theme/base/colors";
 import {useMaterialUIController} from "qqq/context";
@@ -33,9 +34,10 @@ interface Props
    children: ReactNode;
    sorted?: false | "none" | "asce" | "desc";
    align?: "left" | "right" | "center";
+   tooltip?: string | JSX.Element;
 }
 
-function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
+function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
 {
    const [controller] = useMaterialUIController();
    const {darkMode} = controller;
@@ -45,7 +47,7 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
          component="th"
          width={width}
          py={1.5}
-         px={3}
+         px={1.5}
          sx={({palette: {light}, borders: {borderWidth}}: Theme) => ({
             borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`,
             "&:nth-child(1)": {
@@ -73,39 +75,43 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
                userSelect: sorted && "none",
             })}
          >
-            {children}
-            {sorted && (
-               <Box
-                  position="absolute"
-                  top={0}
-                  right={align !== "right" ? "16px" : 0}
-                  left={align === "right" ? "-5px" : "unset"}
-                  sx={({typography: {size}}: any) => ({
-                     fontSize: size.lg,
-                  })}
-               >
+            <>
+               {
+                  tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
+               }
+               {sorted && (
                   <Box
-                     sx={{
-                        position: "absolute",
-                        top: -6,
-                        color: sorted === "asce" ? "text" : "secondary",
-                        opacity: sorted === "asce" ? 1 : 0.5
-                     }}
+                     position="absolute"
+                     top={0}
+                     right={align !== "right" ? "16px" : 0}
+                     left={align === "right" ? "-5px" : "unset"}
+                     sx={({typography: {size}}: any) => ({
+                        fontSize: size.lg,
+                     })}
                   >
-                     <Icon>arrow_drop_up</Icon>
+                     <Box
+                        sx={{
+                           position: "absolute",
+                           top: -6,
+                           color: sorted === "asce" ? "text" : "secondary",
+                           opacity: sorted === "asce" ? 1 : 0.5
+                        }}
+                     >
+                        <Icon>arrow_drop_up</Icon>
+                     </Box>
+                     <Box
+                        sx={{
+                           position: "absolute",
+                           top: 0,
+                           color: sorted === "desc" ? "text" : "secondary",
+                           opacity: sorted === "desc" ? 1 : 0.5
+                        }}
+                     >
+                        <Icon>arrow_drop_down</Icon>
+                     </Box>
                   </Box>
-                  <Box
-                     sx={{
-                        position: "absolute",
-                        top: 0,
-                        color: sorted === "desc" ? "text" : "secondary",
-                        opacity: sorted === "desc" ? 1 : 0.5
-                     }}
-                  >
-                     <Icon>arrow_drop_down</Icon>
-                  </Box>
-               </Box>
-            )}
+               )}
+            </>
          </Box>
       </Box>
    );

src/qqq/context/index.tsx

@@ -116,7 +116,7 @@ function MaterialUIControllerProvider({children}: { children: ReactNode }): JSX.
       whiteSidenav: false,
       sidenavColor: "info",
       transparentNavbar: true,
-      fixedNavbar: true,
+      fixedNavbar: false,
       openConfigurator: false,
       direction: "ltr",
       layout: "dashboard",

src/qqq/models/LoadingState.ts

@@ -41,25 +41,45 @@
  **      {myLoadingState.isNotLoading() && myData && <Box>...
  ** - In your template, before your "slow loading" view, check for `myLoadingState.isLoadingSlow()`, e.g.
  **      {myLoadingState.isLoadingSlow() && <Spinner />}
+ **
+ ** In addition, you can also supply a callback to run "upon slow" (e.g., when
+ ** moving into the slow state).
  *******************************************************************************/
 export class LoadingState
 {
    private state: "notLoading" | "loading" | "slow"
    private slowTimeout: any;
-   private forceUpdate: () => void
+   private forceUpdate: () => void;
+   private uponSlowCallback: () => void;
 
    constructor(forceUpdate: () => void, initialState: "notLoading" | "loading" | "slow" = "notLoading")
    {
       this.forceUpdate = forceUpdate;
       this.state = initialState;
+
+      if(initialState == "loading")
+      {
+         this.setLoading();
+      }
+      else if(initialState == "notLoading")
+      {
+         this.setNotLoading();
+      }
    }
 
    public setLoading()
    {
+      clearTimeout(this.slowTimeout);
       this.state = "loading";
       this.slowTimeout = setTimeout(() =>
       {
          this.state = "slow";
+
+         if(this.uponSlowCallback)
+         {
+            this.uponSlowCallback();
+         }
+
          this.forceUpdate();
       }, 1000);
    }
@@ -85,4 +105,14 @@ export class LoadingState
       return (this.state == "notLoading");
    }
 
+   public getState(): string
+   {
+      return (this.state);
+   }
+
+   public setUponSlowCallback(value: any)
+   {
+      this.uponSlowCallback = value;
+   }
+
 }

src/qqq/models/query/QQueryColumns.ts

@@ -0,0 +1,406 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {GridPinnedColumns} from "@mui/x-data-grid-pro";
+import quickSightChart from "qqq/components/widgets/misc/QuickSightChart";
+import DataGridUtils from "qqq/utils/DataGridUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+/*******************************************************************************
+ ** member object
+ *******************************************************************************/
+interface Column
+{
+   name: string;
+   isVisible: boolean;
+   width: number;
+   pinned?: "left" | "right";
+}
+
+/*******************************************************************************
+ ** Model for all info we'll store about columns on a query screen.
+ *******************************************************************************/
+export default class QQueryColumns
+{
+   columns: Column[] = [];
+
+   /*******************************************************************************
+    ** factory function - build a QQueryColumns object from JSON (string or parsed object).
+    **
+    ** input json is must look like if you JSON.stringify this class - that is:
+    ** {columns: [{name:"",isVisible:true,width:0,pinned:"left"},{}...]}
+    *******************************************************************************/
+   public static buildFromJSON = (json: string | any): QQueryColumns =>
+   {
+      const queryColumns = new QQueryColumns();
+
+      if (typeof json == "string")
+      {
+         json = JSON.parse(json);
+      }
+
+      queryColumns.columns = json.columns;
+
+      return (queryColumns);
+   };
+
+
+   /*******************************************************************************
+    ** factory function - build a default QQueryColumns object for a table
+    **
+    *******************************************************************************/
+   public static buildDefaultForTable = (table: QTableMetaData): QQueryColumns =>
+   {
+      const queryColumns = new QQueryColumns();
+
+      queryColumns.columns = [];
+      queryColumns.columns.push({name: "__check__", isVisible: true, width: 100, pinned: "left"});
+
+      const fields = this.getSortedFieldsFromTable(table);
+      fields.forEach((field) =>
+      {
+         const column: Column = {name: field.name, isVisible: true, width: DataGridUtils.getColumnWidthForField(field, table)};
+         queryColumns.columns.push(column);
+
+         if (field.name == table.primaryKeyField)
+         {
+            column.pinned = "left";
+         }
+      });
+
+      table.exposedJoins?.forEach((exposedJoin) =>
+      {
+         const joinFields = this.getSortedFieldsFromTable(exposedJoin.joinTable);
+         joinFields.forEach((field) =>
+         {
+            const column: Column = {name: `${exposedJoin.joinTable.name}.${field.name}`, isVisible: false, width: DataGridUtils.getColumnWidthForField(field, null)};
+            queryColumns.columns.push(column);
+         });
+      });
+
+      return (queryColumns);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public addColumnForNewField = (table: QTableMetaData, fieldName: string, defaultVisibilityIfInMainTable: boolean): void =>
+   {
+      const [field, tableForField] = TableUtils.getFieldAndTable(table, fieldName)
+
+      let column: Column;
+      if(tableForField.name == table.name)
+      {
+         column = {name: field.name, isVisible: defaultVisibilityIfInMainTable, width: DataGridUtils.getColumnWidthForField(field, table)};
+      }
+      else
+      {
+         column = {name: `${tableForField.name}.${field.name}`, isVisible: false, width: DataGridUtils.getColumnWidthForField(field, null)};
+      }
+
+      this.columns.push(column);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public deleteColumnForOldField = (table: QTableMetaData, fieldName: string): void =>
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if(this.columns[i].name == fieldName)
+         {
+            this.columns.splice(i, 1);
+            return;
+         }
+      }
+
+      console.log(`Couldn't find column to be deleted, for name [${fieldName}]`);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private static getSortedFieldsFromTable(table: QTableMetaData)
+   {
+      const fields = [...table.fields.values()];
+      fields.sort((a: QFieldMetaData, b: QFieldMetaData) =>
+      {
+         return a.name.localeCompare(b.name);
+      });
+      return fields;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getVisibleColumnCount(): number
+   {
+      let rs = 0;
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if(this.columns[i].name == "__check__")
+         {
+            continue;
+         }
+
+         if(this.columns[i].isVisible)
+         {
+            rs++;
+         }
+      }
+      return (rs);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getVisibilityToggleStates(): { [name: string]: boolean }
+   {
+      const rs: {[name: string]: boolean} = {};
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         rs[this.columns[i].name] = this.columns[i].isVisible;
+      }
+      return (rs);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public setIsVisible(name: string, isVisible: boolean)
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if(this.columns[i].name == name)
+         {
+            this.columns[i].isVisible = isVisible;
+            break;
+         }
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public updateVisibility = (visibilityModel: { [name: string]: boolean }): void =>
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const name = this.columns[i].name;
+         this.columns[i].isVisible = visibilityModel[name];
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public updateColumnOrder = (names: string[]): void =>
+   {
+      const newColumns: Column[] = [];
+      const rest: Column[] = [];
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         const index = names.indexOf(column.name);
+         if (index > -1)
+         {
+            newColumns[index] = column;
+         }
+         else
+         {
+            rest.push(column);
+         }
+      }
+
+      this.columns = [...newColumns, ...rest];
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public updateColumnWidth = (name: string, width: number): void =>
+   {
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         if (this.columns[i].name == name)
+         {
+            this.columns[i].width = width;
+         }
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public setPinnedLeftColumns = (names: string[]): void =>
+   {
+      const leftPins: Column[] = [];
+      const rest: Column[] = [];
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         const pinIndex = names ? names.indexOf(column.name) : -1;
+         if (pinIndex > -1)
+         {
+            column.pinned = "left";
+            leftPins[pinIndex] = column;
+         }
+         else
+         {
+            if (column.pinned == "left")
+            {
+               column.pinned = undefined;
+            }
+            rest.push(column);
+         }
+      }
+
+      this.columns = [...leftPins, ...rest];
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public setPinnedRightColumns = (names: string[]): void =>
+   {
+      const rightPins: Column[] = [];
+      const rest: Column[] = [];
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         const pinIndex = names ? names.indexOf(column.name) : -1;
+         if (pinIndex > -1)
+         {
+            column.pinned = "right";
+            rightPins[pinIndex] = column;
+         }
+         else
+         {
+            if (column.pinned == "right")
+            {
+               column.pinned = undefined;
+            }
+            rest.push(column);
+         }
+      }
+
+      this.columns = [...rest, ...rightPins];
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getColumnSortValues = (): { [name: string]: number } =>
+   {
+      const sortValues: { [name: string]: number } = {};
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         sortValues[this.columns[i].name] = i;
+      }
+      return sortValues;
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public getColumnWidths = (): { [name: string]: number } =>
+   {
+      const widths: { [name: string]: number } = {};
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         widths[column.name] = column.width;
+      }
+      return widths;
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public toGridPinnedColumns = (): GridPinnedColumns =>
+   {
+      const gridPinnedColumns: GridPinnedColumns = {left: [], right: []};
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         if (column.pinned == "left")
+         {
+            gridPinnedColumns.left.push(column.name);
+         }
+         else if (column.pinned == "right")
+         {
+            gridPinnedColumns.right.push(column.name);
+         }
+      }
+
+      return gridPinnedColumns;
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public toColumnVisibilityModel = (): { [index: string]: boolean } =>
+   {
+      const columnVisibilityModel: { [index: string]: boolean } = {};
+
+      for (let i = 0; i < this.columns.length; i++)
+      {
+         const column = this.columns[i];
+         columnVisibilityModel[column.name] = column.isVisible;
+      }
+
+      return columnVisibilityModel;
+   };
+
+}
+
+
+/*******************************************************************************
+ ** subclass of QQueryColumns - used as a marker, to indicate that the table
+ ** isn't yet loaded, so it just a placeholder.
+ *******************************************************************************/
+export class PreLoadQueryColumns extends QQueryColumns
+{
+}
+

src/qqq/models/query/RecordQueryView.ts

@@ -0,0 +1,102 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import QQueryColumns, {PreLoadQueryColumns} from "qqq/models/query/QQueryColumns";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+
+
+/*******************************************************************************
+ ** Model to represent the full "view" that is active on the RecordQuery screen
+ ** (and accordingly, can be saved as a saved view).
+ *******************************************************************************/
+export default class RecordQueryView
+{
+   queryFilter: QQueryFilter; // contains orderBys
+   queryColumns: QQueryColumns; // contains on/off, sequence, widths, and pins
+   viewIdentity: string; // url vs. saved vs. ad-hoc, plus "noncey" stuff?  not very used...
+   rowsPerPage: number;
+   quickFilterFieldNames: string[];
+   mode: string;
+   // variant?
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   constructor()
+   {
+   }
+
+
+   /*******************************************************************************
+    ** factory function - build a RecordQueryView object from JSON (string or parsed object).
+    **
+    ** input json is must look like if you JSON.stringify this class - that is:
+    ** {queryFilter: {}, queryColumns: {}, etc...}
+    *******************************************************************************/
+   public static buildFromJSON = (json: string | any): RecordQueryView =>
+   {
+      const view = new RecordQueryView();
+
+      if (typeof json == "string")
+      {
+         json = JSON.parse(json);
+      }
+
+      view.queryFilter = json.queryFilter as QQueryFilter;
+
+      FilterUtils.stripAwayIncompleteCriteria(view.queryFilter)
+
+      //////////////////////////////////////////////////////////////////////////////////////////
+      // it's important that some criteria values exist as expression objects - so - do that. //
+      //////////////////////////////////////////////////////////////////////////////////////////
+      for (let i = 0; i < view.queryFilter?.criteria?.length; i++)
+      {
+         const criteria = view.queryFilter.criteria[i]
+         for (let j = 0; j < criteria?.values?.length; j++)
+         {
+            const value = criteria.values[j];
+            const expression = FilterUtils.gridCriteriaValueToExpression(value);
+            if(expression)
+            {
+               criteria.values[j] = expression;
+            }
+         }
+      }
+
+      if(json.queryColumns)
+      {
+         view.queryColumns = QQueryColumns.buildFromJSON(json.queryColumns);
+      }
+      else
+      {
+         view.queryColumns = new PreLoadQueryColumns();
+      }
+
+      view.viewIdentity = json.viewIdentity;
+      view.rowsPerPage = json.rowsPerPage;
+      view.quickFilterFieldNames = json.quickFilterFieldNames;
+      view.mode = json.mode;
+
+      return (view);
+   };
+
+}

src/qqq/pages/apps/Home.tsx

@@ -75,9 +75,19 @@ function AppHome({app}: Props): JSX.Element
       })();
    }, []);
 
+   const mdbMetaData = app?.supplementalAppMetaData?.get("materialDashboard");
+   let showAppLabelOnHomeScreen = true;
+   let includeTableCountsOnHomeScreen = true;
+   if(mdbMetaData)
+   {
+      showAppLabelOnHomeScreen = mdbMetaData.showAppLabelOnHomeScreen;
+      includeTableCountsOnHomeScreen = mdbMetaData.includeTableCountsOnHomeScreen;
+   }
+
    useEffect(() =>
    {
-      setPageHeader(app.label);
+      // setPageHeader(app.label);
+      setPageHeader(null);
 
       if (!qInstance)
       {
@@ -121,48 +131,60 @@ function AppHome({app}: Props): JSX.Element
       const tableCountTexts = new Map<string, string>();
       newTables.forEach((table) =>
       {
-         tableCounts.set(table.name, {isLoading: true, value: null});
-
-         setTimeout(async () =>
+         if(includeTableCountsOnHomeScreen)
          {
-            const tableMetaData = await qController.loadTableMetaData(table.name);
-            let countResult = null;
-            if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
+            tableCounts.set(table.name, {isLoading: true, value: null});
+            setTimeout(async () =>
             {
-               try
+               const tableMetaData = await qController.loadTableMetaData(table.name);
+               let countResult = null;
+               if (tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
                {
-                  [countResult] = await qController.count(table.name);
+                  try
+                  {
+                     [countResult] = await qController.count(table.name);
 
-                  if (countResult !== null && countResult !== undefined)
-                  {
-                     tableCountNumbers.set(table.name, countResult.toLocaleString());
-                     tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
+                     if (countResult !== null && countResult !== undefined)
+                     {
+                        tableCountNumbers.set(table.name, countResult.toLocaleString());
+                        tableCountTexts.set(table.name, countResult === 1 ? "total record" : "total records");
+                     }
+                     else
+                     {
+                        tableCountNumbers.set(table.name, "–");
+                        tableCountTexts.set(table.name, " ");
+                     }
                   }
-                  else
+                  catch (e)
                   {
+                     console.log("Caught: " + e);
                      tableCountNumbers.set(table.name, "–");
                      tableCountTexts.set(table.name, " ");
                   }
                }
-               catch(e)
+               else
                {
-                  console.log("Caught: " + e);
                   tableCountNumbers.set(table.name, "–");
                   tableCountTexts.set(table.name, " ");
                }
-            }
-            else
-            {
-               tableCountNumbers.set(table.name, "–");
-               tableCountTexts.set(table.name, " ");
-            }
 
-            tableCounts.set(table.name, {isLoading: false, value: countResult});
+               tableCounts.set(table.name, {isLoading: false, value: countResult});
+               setTableCounts(tableCounts);
+               setTableCountNumbers(tableCountNumbers);
+               setTableCountTexts(tableCountTexts);
+               setUpdatedTableCounts(new Date());
+            }, 1);
+         }
+         else
+         {
+            tableCounts.set(table.name, {isLoading: false, value: null});
+            tableCountNumbers.set(table.name, " ");
+            tableCountTexts.set(table.name, " ");
+
             setTableCounts(tableCounts);
             setTableCountNumbers(tableCountNumbers);
             setTableCountTexts(tableCountTexts);
-            setUpdatedTableCounts(new Date());
-         }, 1);
+         }
       });
       setTableCounts(tableCounts);
 
@@ -208,6 +230,12 @@ function AppHome({app}: Props): JSX.Element
    {
       return (
          <BaseLayout>
+            {
+               showAppLabelOnHomeScreen &&
+               <Typography textTransform="capitalize" variant="h3">
+                  {app.label}
+               </Typography>
+            }
             <Grid container spacing={3}>
                <Grid item xs={12} lg={12}>
                   <Card sx={{overflow: "visible"}}>
@@ -253,13 +281,19 @@ function AppHome({app}: Props): JSX.Element
 
    return (
       <BaseLayout>
+         {
+            showAppLabelOnHomeScreen &&
+            <Typography textTransform="capitalize" variant="h3">
+               {app.label}
+            </Typography>
+         }
          <Box>
             {app.widgets && app.widgets.length > 0 && (
-               <Box pb={app.sections ? 2.375 : 0}>
+               <Box pb={app.sections ? 2.375 : 4} pt={"0.5rem"}>
                   <DashboardWidgets widgetMetaDataList={widgets} />
                </Box>
             )}
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mt={"-1rem"}>
                {
                   app.sections ? (
                      <Grid item xs={12} lg={12}>
@@ -279,7 +313,7 @@ function AppHome({app}: Props): JSX.Element
                                  </Box>
                                  {
                                     section.processes ? (
-                                       <Box p={3} pl={5} pt={0} pb={1}>
+                                       <Box p={3} pl={3} pt={0} pb={1}>
                                           <MDTypography variant="h6">Actions</MDTypography>
                                        </Box>
                                     ) : null
@@ -320,7 +354,7 @@ function AppHome({app}: Props): JSX.Element
                                  }
                                  {
                                     section.reports ? (
-                                       <Box p={3} pl={5} pt={0} pb={1}>
+                                       <Box p={3} pl={3} pt={0} pb={1}>
                                           <MDTypography variant="h6">Reports</MDTypography>
                                        </Box>
                                     ) : null
@@ -363,7 +397,7 @@ function AppHome({app}: Props): JSX.Element
                                  }
                                  {
                                     section.tables ? (
-                                       <Box p={3} pl={5} pb={1} pt={0}>
+                                       <Box p={3} pl={3} pb={1} pt={0}>
                                           <MDTypography variant="h6">Data</MDTypography>
                                        </Box>
                                     ) : null
@@ -375,6 +409,13 @@ function AppHome({app}: Props): JSX.Element
                                              section.tables.map((tableName) =>
                                              {
                                                 let table = app.childMap.get(tableName);
+                                                let count = "";
+                                                let percentage = "";
+                                                if(includeTableCountsOnHomeScreen)
+                                                {
+                                                   count = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name));
+                                                   percentage = !tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name));
+                                                }
                                                 return (
                                                    <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
                                                       {hasTablePermission(tableName) ?
@@ -382,8 +423,8 @@ function AppHome({app}: Props): JSX.Element
                                                             <Box className="big-icon" mb={3}>
                                                                <MiniStatisticsCard
                                                                   title={{fontWeight: "bold", text: table.label}}
-                                                                  count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
-                                                                  percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
+                                                                  count={count}
+                                                                  percentage={{color: "info", text: percentage}}
                                                                   icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                                />
                                                             </Box>
@@ -391,8 +432,8 @@ function AppHome({app}: Props): JSX.Element
                                                          <Box mb={3} title="You do not have permission to access this table">
                                                             <MiniStatisticsCard
                                                                title={{fontWeight: "bold", text: table.label}}
-                                                               count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : (tableCountNumbers.get(table.name))}
-                                                               percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
+                                                               count={count}
+                                                               percentage={{color: "info", text: percentage}}
                                                                icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
                                                                isDisabled={true}
                                                             />

src/qqq/pages/records/query/ColumnStats.tsx

@@ -21,6 +21,7 @@
 
 import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
 import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
 import {QTableSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableSection";
 import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
@@ -146,6 +147,11 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
             const rows = DataGridUtils.makeRows(valueCounts, fakeTableMetaData);
             const columns = DataGridUtils.setupGridColumns(fakeTableMetaData, null, null, "bySection");
 
+            if(fieldMetaData.type == QFieldType.DATE_TIME)
+            {
+               columns[0].headerName = fieldMetaData.label + " (grouped by hour)"
+            }
+
             columns.forEach((c) =>
             {
                c.filterable = false;

src/qqq/pages/records/view/RecordView.tsx

@@ -46,8 +46,6 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
 import Tooltip from "@mui/material/Tooltip/Tooltip";
-import React, {useContext, useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import AuditBody from "qqq/components/audits/AuditBody";
@@ -65,6 +63,8 @@ import Client from "qqq/utils/qqq/Client";
 import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useContext, useEffect, useState} from "react";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
 
 const qController = Client.getInstance();
 
@@ -148,9 +148,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
    ///////////////////////
    useEffect(() =>
    {
-      if(tableMetaData == null)
+      if (tableMetaData == null)
       {
-         (async() =>
+         (async () =>
          {
             const tableMetaData = await qController.loadTableMetaData(tableName);
             setTableMetaData(tableMetaData);
@@ -162,54 +162,54 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          const type = (e.target as any).type;
          const validType = (type !== "text" && type !== "textarea" && type !== "input" && type !== "search");
 
-         if(validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
+         if (validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm)
          {
-            if (! e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                gotoCreate();
             }
-            else if (! e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
+            else if (!e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("edit");
             }
-            else if (! e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
+            else if (!e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("copy");
             }
-            else if (! e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
+            else if (!e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission)
             {
-               e.preventDefault()
+               e.preventDefault();
                handleClickDeleteButton();
             }
-            else if (! e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit"))
+            else if (!e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit"))
             {
-               e.preventDefault()
+               e.preventDefault();
                navigate("#audit");
             }
          }
-      }
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
-      }
-   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location])
+         document.removeEventListener("keydown", down);
+      };
+   }, [dotMenuOpen, keyboardHelpOpen, showEditChildForm, showAudit, metaData, location]);
 
    const gotoCreate = () =>
    {
       const path = `${pathParts.slice(0, -1).join("/")}/create`;
       navigate(path);
-   }
+   };
 
    const gotoEdit = () =>
    {
       const path = `${pathParts.slice(0, -1).join("/")}/${record.values.get(table.primaryKeyField)}/edit`;
       navigate(path);
-   }
+   };
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////
    // monitor location changes - if we've clicked a link from viewing one record to viewing another, //
@@ -267,7 +267,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          // if our table is in the -4 index, and there's `createChild` in the -2 index, try to open a createChild form //
          // e.g., person/42/createChild/address (to create an address under person 42)                                 //
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         if(pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
+         if (pathParts[pathParts.length - 4] === tableName && pathParts[pathParts.length - 2] == "createChild")
          {
             (async () =>
             {
@@ -298,7 +298,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
             }
          }
 
-         if(hashParts[0] == "#audit")
+         if (hashParts[0] == "#audit")
          {
             setShowAudit(true);
             return;
@@ -307,11 +307,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          ///////////////////////////////////////////////////////////////////////////////////
          // look for anchor links - e.g., table section names.  return w/ no-op if found. //
          ///////////////////////////////////////////////////////////////////////////////////
-         if(tableSections)
+         if (tableSections)
          {
             for (let i = 0; i < tableSections.length; i++)
             {
-               if("#" + tableSections[i].name === location.hash)
+               if ("#" + tableSections[i].name === location.hash)
                {
                   return;
                }
@@ -345,11 +345,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          section.fieldNames.forEach((fieldName) =>
          {
             const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-            if(tableForField && tableForField.name != tableMetaData.name)
+            if (tableForField && tableForField.name != tableMetaData.name)
             {
                visibleJoinTables.add(tableForField.name);
             }
-         })
+         });
       }
 
       return (visibleJoinTables);
@@ -361,15 +361,15 @@ function RecordView({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const getSectionHelp = (section: QTableSection) =>
    {
-      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
+      const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
       const formattedHelpContent = <HelpContent helpContents={section.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
 
       return formattedHelpContent && (
          <Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
             {formattedHelpContent}
          </Box>
-      )
-   }
+      );
+   };
 
 
    if (!asyncLoadInited)
@@ -401,11 +401,11 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          //////////////////////////////////////////////////////
          // load processes that the routing needs to respect //
          //////////////////////////////////////////////////////
-         const allTableProcesses = ProcessUtils.getProcessesForTable(metaData, tableName, true) // these include hidden ones (e.g., to find the bulks)
+         const allTableProcesses = ProcessUtils.getProcessesForTable(metaData, tableName, true); // these include hidden ones (e.g., to find the bulks)
          const runRecordScriptProcess = metaData?.processes.get("runRecordScript");
          if (runRecordScriptProcess)
          {
-            allTableProcesses.unshift(runRecordScriptProcess)
+            allTableProcesses.unshift(runRecordScriptProcess);
          }
          setAllTableProcesses(allTableProcesses);
 
@@ -417,7 +417,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          let queryJoins: QueryJoin[] = null;
          const visibleJoinTables = getVisibleJoinTables(tableMetaData);
-         if(visibleJoinTables.size > 0)
+         if (visibleJoinTables.size > 0)
          {
             queryJoins = TableUtils.getQueryJoins(tableMetaData, visibleJoinTables);
          }
@@ -439,7 +439,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                {
                   HistoryUtils.ensurePathNotInHistory(location.pathname);
                }
-               catch(e)
+               catch (e)
                {
                   console.error("Error pushing history: " + e);
                }
@@ -464,13 +464,13 @@ function RecordView({table, launchProcess}: Props): JSX.Element
 
          setPageHeader(record.recordLabel);
 
-         if(!launchingProcess)
+         if (!launchingProcess)
          {
             try
             {
                HistoryUtils.push({label: `${tableMetaData?.label}: ${record.recordLabel}`, path: location.pathname, iconName: table.iconName});
             }
-            catch(e)
+            catch (e)
             {
                console.error("Error pushing history: " + e);
             }
@@ -522,27 +522,30 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                         section.fieldNames.map((fieldName: string) =>
                         {
                            let [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
-                           let label = field.label;
+                           if (field != null)
+                           {
+                              let label = field.label;
 
-                           const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"]
-                           const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
-                           const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
+                              const helpRoles = ["VIEW_SCREEN", "READ_SCREENS", "ALL_SCREENS"];
+                              const showHelp = helpHelpActive || hasHelpContent(field.helpContents, helpRoles);
+                              const formattedHelpContent = <HelpContent helpContents={field.helpContents} roles={helpRoles} heading={label} helpContentKey={`table:${tableName};field:${fieldName}`} />;
 
-                           const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>
+                              const labelElement = <Typography variant="button" textTransform="none" fontWeight="bold" pr={1} color="rgb(52, 71, 103)" sx={{cursor: "default"}}>{label}:</Typography>;
 
-                           return (
-                              <Box key={fieldName} flexDirection="row" pr={2}>
-                                 <>
-                                    {
-                                       showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
-                                    }
-                                    <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
-                                    <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
-                                       {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
-                                    </Typography>
-                                 </>
-                              </Box>
-                           )
+                              return (
+                                 <Box key={fieldName} flexDirection="row" pr={2}>
+                                    <>
+                                       {
+                                          showHelp && formattedHelpContent ? <Tooltip title={formattedHelpContent}>{labelElement}</Tooltip> : labelElement
+                                       }
+                                       <div style={{display: "inline-block", width: 0}}>&nbsp;</div>
+                                       <Typography variant="button" textTransform="none" fontWeight="regular" color="rgb(123, 128, 154)">
+                                          {ValueUtils.getDisplayValue(field, record, "view", fieldName)}
+                                       </Typography>
+                                    </>
+                                 </Box>
+                              );
+                           }
                         })
                      }
                   </Box>
@@ -590,7 +593,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
          setSectionFieldElements(sectionFieldElements);
          setNonT1TableSections(nonT1TableSections);
 
-         if(location.state)
+         if (location.state)
          {
             let state: any = location.state;
             if (state["createSuccess"] || state["updateSuccess"])
@@ -603,9 +606,9 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                setWarningMessage(state["warning"]);
             }
 
-            delete state["createSuccess"]
-            delete state["updateSuccess"]
-            delete state["warning"]
+            delete state["createSuccess"];
+            delete state["updateSuccess"];
+            delete state["warning"];
 
             window.history.replaceState(state, "");
          }
@@ -640,7 +643,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
                console.log("Caught:");
                console.log(error);
 
-               if(error.message.toLowerCase().startsWith("warning"))
+               if (error.message.toLowerCase().startsWith("warning"))
                {
                   const path = pathParts.slice(0, -1).join("/");
                   navigate(path, {state: {deleteSuccess: true, warning: error.message}});
@@ -767,7 +770,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       //////////////////////////////////////////////////////////////////////////
       // when closing a modal process, navigate up to the record being viewed //
       //////////////////////////////////////////////////////////////////////////
-      if(location.hash)
+      if (location.hash)
       {
          navigate(location.pathname);
       }
@@ -801,7 +804,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if(location.hash)
+      if (location.hash)
       {
          navigate(location.pathname);
       }
@@ -828,7 +831,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // navigate back up to the record being viewed //
       /////////////////////////////////////////////////
-      if(location.hash)
+      if (location.hash)
       {
          navigate(location.pathname);
       }

src/qqq/styles/qqq-override-styles.css

@@ -29,6 +29,13 @@
    min-height: calc(100vh - 450px) !important;
 }
 
+/* we want to leave columns w/ the sortable attribute (so they have it in the column menu),
+but we've turned off the click-to-sort function, so remove hand cursor */
+.recordQuery .MuiDataGrid-columnHeader--sortable
+{
+   cursor: default !important;
+}
+
 /* Disable red outlines on clicked cells */
 .MuiDataGrid-cell:focus,
 .MuiDataGrid-columnHeader:focus,
@@ -402,7 +409,8 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
    margin-right: 8px;
 }
 
-.custom-columns-panel .MuiSwitch-thumb
+.custom-columns-panel .MuiSwitch-thumb,
+.fieldListMenuBody .MuiSwitch-thumb
 {
    width: 15px !important;
    height: 15px !important;
@@ -427,7 +435,8 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 .MuiDataGrid-panel:has(.customFilterPanel)
 {
    /* overwrite what the grid tries to do here, where it changes based on density... we always want the same. */
-   transform: translate(274px, 305px) !important;
+   /* transform: translate(274px, 305px) !important; */
+   transform: translate(274px, 264px) !important;
 }
 
 /* within the data-grid, the filter-panel's container has a max-height.  mirror that, and set an overflow-y */
@@ -614,4 +623,38 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 .dataGridHeaderTooltip
 {
    top: -1.25rem;
-}
+}
+
+/* when grid contents weren't filling the height of the screen, the gray panel for pinned columns
+ was stretching to most of the grid height, but it wasn't the full height and so looked a little
+ broken.  just turing off this min height changes to not try to stretch at all, and is not broken. */
+.MuiDataGrid-pinnedColumns
+{
+   min-height: unset !important;
+}
+
+/* new style for toggle buttons */
+.MuiToggleButtonGroup-root
+{
+   padding: 0.25rem;
+   border: 1px solid #BDBDBD;
+   border-radius: 0.5rem !important;
+}
+.MuiToggleButtonGroup-root .MuiButtonBase-root
+{
+   text-transform: none;
+   font-size: 0.75rem;
+   color: black;
+   font-weight: 600;
+   border-radius: 0.375rem !important; /* overriding left/right edge overrides for first/last */
+   border: none;
+   flex: 1 1 0px;
+}
+.MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-selected
+{
+   background: rgba(117, 117, 117, 0.20);
+}
+.MuiToggleButtonGroup-root .MuiButtonBase-root.Mui-disabled
+{
+   border: none;
+}

src/qqq/utils/qqq/FilterUtils.ts

@@ -1,849 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2022.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
-import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
-import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
-import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
-import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
-import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
-import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
-import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
-import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
-import {GridFilterItem, GridFilterModel, GridLinkOperator, GridSortItem} from "@mui/x-data-grid-pro";
-import TableUtils from "qqq/utils/qqq/TableUtils";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
-
-const CURRENT_SAVED_FILTER_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedFilterId";
-
-/*******************************************************************************
- ** Utility class for working with QQQ Filters
- **
- *******************************************************************************/
-class FilterUtils
-{
-   /*******************************************************************************
-    ** Convert a grid operator to a QQQ Criteria Operator.
-    *******************************************************************************/
-   public static gridCriteriaOperatorToQQQ = (operator: string): QCriteriaOperator =>
-   {
-      switch (operator)
-      {
-         case "contains":
-            return QCriteriaOperator.CONTAINS;
-         case "notContains":
-            return QCriteriaOperator.NOT_CONTAINS;
-         case "startsWith":
-            return QCriteriaOperator.STARTS_WITH;
-         case "notStartsWith":
-            return QCriteriaOperator.NOT_STARTS_WITH;
-         case "endsWith":
-            return QCriteriaOperator.ENDS_WITH;
-         case "notEndsWith":
-            return QCriteriaOperator.NOT_ENDS_WITH;
-         case "is":
-         case "equals":
-         case "=":
-         case "isTrue":
-         case "isFalse":
-            return QCriteriaOperator.EQUALS;
-         case "isNot":
-         case "!=":
-            return QCriteriaOperator.NOT_EQUALS_OR_IS_NULL;
-         case "after":
-         case ">":
-            return QCriteriaOperator.GREATER_THAN;
-         case "onOrAfter":
-         case ">=":
-            return QCriteriaOperator.GREATER_THAN_OR_EQUALS;
-         case "before":
-         case "<":
-            return QCriteriaOperator.LESS_THAN;
-         case "onOrBefore":
-         case "<=":
-            return QCriteriaOperator.LESS_THAN_OR_EQUALS;
-         case "isEmpty":
-            return QCriteriaOperator.IS_BLANK;
-         case "isNotEmpty":
-            return QCriteriaOperator.IS_NOT_BLANK;
-         case "isAnyOf":
-            return QCriteriaOperator.IN;
-         case "isNone":
-            return QCriteriaOperator.NOT_IN;
-         case "between":
-            return QCriteriaOperator.BETWEEN;
-         case "notBetween":
-            return QCriteriaOperator.NOT_BETWEEN;
-         default:
-            return QCriteriaOperator.EQUALS;
-      }
-   };
-
-   /*******************************************************************************
-    ** Convert a qqq criteria operator to one expected by the grid.
-    *******************************************************************************/
-   public static qqqCriteriaOperatorToGrid = (operator: QCriteriaOperator, field: QFieldMetaData, criteriaValues: any[]): string =>
-   {
-      const fieldType = field.type;
-      switch (operator)
-      {
-         case QCriteriaOperator.EQUALS:
-
-            if (field.possibleValueSourceName)
-            {
-               return ("is");
-            }
-
-            switch (fieldType)
-            {
-               case QFieldType.INTEGER:
-               case QFieldType.DECIMAL:
-                  return ("=");
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-               case QFieldType.STRING:
-               case QFieldType.TEXT:
-               case QFieldType.HTML:
-               case QFieldType.PASSWORD:
-               case QFieldType.BLOB:
-                  return ("equals");
-               case QFieldType.BOOLEAN:
-                  if (criteriaValues && criteriaValues[0] === true)
-                  {
-                     return ("isTrue");
-                  }
-                  else if (criteriaValues && criteriaValues[0] === false)
-                  {
-                     return ("isFalse");
-                  }
-                  return ("is");
-               default:
-                  return ("is");
-            }
-         case QCriteriaOperator.NOT_EQUALS:
-         case QCriteriaOperator.NOT_EQUALS_OR_IS_NULL:
-
-            if (field.possibleValueSourceName)
-            {
-               return ("isNot");
-            }
-
-            switch (fieldType)
-            {
-               case QFieldType.INTEGER:
-               case QFieldType.DECIMAL:
-                  return ("!=");
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-               case QFieldType.BOOLEAN:
-               case QFieldType.STRING:
-               case QFieldType.TEXT:
-               case QFieldType.HTML:
-               case QFieldType.PASSWORD:
-               case QFieldType.BLOB:
-               default:
-                  return ("isNot");
-            }
-         case QCriteriaOperator.IN:
-            return ("isAnyOf");
-         case QCriteriaOperator.NOT_IN:
-            return ("isNone");
-         case QCriteriaOperator.STARTS_WITH:
-            return ("startsWith");
-         case QCriteriaOperator.ENDS_WITH:
-            return ("endsWith");
-         case QCriteriaOperator.CONTAINS:
-            return ("contains");
-         case QCriteriaOperator.NOT_STARTS_WITH:
-            return ("notStartsWith");
-         case QCriteriaOperator.NOT_ENDS_WITH:
-            return ("notEndsWith");
-         case QCriteriaOperator.NOT_CONTAINS:
-            return ("notContains");
-         case QCriteriaOperator.LESS_THAN:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("before");
-               default:
-                  return ("<");
-            }
-         case QCriteriaOperator.LESS_THAN_OR_EQUALS:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("onOrBefore");
-               default:
-                  return ("<=");
-            }
-         case QCriteriaOperator.GREATER_THAN:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("after");
-               default:
-                  return (">");
-            }
-         case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
-            switch (fieldType)
-            {
-               case QFieldType.DATE:
-               case QFieldType.TIME:
-               case QFieldType.DATE_TIME:
-                  return ("onOrAfter");
-               default:
-                  return (">=");
-            }
-         case QCriteriaOperator.IS_BLANK:
-            return ("isEmpty");
-         case QCriteriaOperator.IS_NOT_BLANK:
-            return ("isNotEmpty");
-         case QCriteriaOperator.BETWEEN:
-            return ("between");
-         case QCriteriaOperator.NOT_BETWEEN:
-            return ("notBetween");
-         default:
-            console.warn(`Unhandled criteria operator: ${operator}`);
-            return ("=");
-      }
-   };
-
-   /*******************************************************************************
-    ** the values object needs handled differently based on cardinality of the operator.
-    ** that is - qqq always wants a list, but the grid provides it differently per-operator.
-    ** for single-values (the default), we must wrap it in an array.
-    ** for non-values (e.g., blank), set it to null.
-    ** for list-values, it's already in an array, so don't wrap it.
-    *******************************************************************************/
-   public static gridCriteriaValueToQQQ = (operator: QCriteriaOperator, value: any, gridOperatorValue: string, fieldMetaData: QFieldMetaData): any[] =>
-   {
-      if (gridOperatorValue === "isTrue")
-      {
-         return [true];
-      }
-      else if (gridOperatorValue === "isFalse")
-      {
-         return [false];
-      }
-
-      if (operator === QCriteriaOperator.IS_BLANK || operator === QCriteriaOperator.IS_NOT_BLANK)
-      {
-         return (null);
-      }
-      else if (operator === QCriteriaOperator.IN || operator === QCriteriaOperator.NOT_IN || operator === QCriteriaOperator.BETWEEN || operator === QCriteriaOperator.NOT_BETWEEN)
-      {
-         if ((value == null || value.length < 2) && (operator === QCriteriaOperator.BETWEEN || operator === QCriteriaOperator.NOT_BETWEEN))
-         {
-            /////////////////////////////////////////////////////////////////////////////////////////////////
-            // if we send back null, we get a 500 - bad look every time you try to set up a BETWEEN filter //
-            // but array of 2 nulls?  comes up sunshine.                                                   //
-            /////////////////////////////////////////////////////////////////////////////////////////////////
-            return ([null, null]);
-         }
-         return (FilterUtils.cleanseCriteriaValueForQQQ(value, fieldMetaData));
-      }
-
-      return (FilterUtils.cleanseCriteriaValueForQQQ([value], fieldMetaData));
-   };
-
-
-   /*******************************************************************************
-    ** Helper method - take a list of values, which may be possible values, and
-    ** either return the original list, or a new list that is just the ids of the
-    ** possible values (if it was a list of possible values).
-    **
-    ** Or, if the values are date-times, convert them to UTC.
-    *******************************************************************************/
-   private static cleanseCriteriaValueForQQQ = (param: any[], fieldMetaData: QFieldMetaData): number[] | string[] =>
-   {
-      if (param === null || param === undefined)
-      {
-         return (param);
-      }
-
-      if (FilterUtils.gridCriteriaValueToExpression(param))
-      {
-         return (param);
-      }
-
-      let rs = [];
-      for (let i = 0; i < param.length; i++)
-      {
-         console.log(param[i]);
-         if (param[i] && param[i].id && param[i].label)
-         {
-            //////////////////////////////////////////////////////////////////////////////////////////
-            // if the param looks like a possible value, return its id                              //
-            // during build of new custom filter panel, this ended up causing us                    //
-            // problems (because we wanted the full PV object in the filter model for the frontend) //
-            // so, we can keep the PV as-is here, and see calls to convertFilterPossibleValuesToIds //
-            // to do what this used to do.                                                          //
-            //////////////////////////////////////////////////////////////////////////////////////////
-            // rs.push(param[i].id);
-            rs.push(param[i]);
-         }
-         else
-         {
-            if (fieldMetaData?.type == QFieldType.DATE_TIME)
-            {
-               try
-               {
-                  let toPush = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(param[i]);
-                  rs.push(toPush);
-               }
-               catch (e)
-               {
-                  console.log("Error converting date-time to UTC: ", e);
-                  rs.push(param[i]);
-               }
-            }
-            else
-            {
-               rs.push(param[i]);
-            }
-         }
-      }
-      return (rs);
-   };
-
-
-   /*******************************************************************************
-    ** Convert a filter field's value from the style that qqq uses, to the style that
-    ** the grid uses.
-    *******************************************************************************/
-   public static qqqCriteriaValuesToGrid = (operator: QCriteriaOperator, values: any[], field: QFieldMetaData): any | any[] =>
-   {
-      const fieldType = field.type;
-      if (operator === QCriteriaOperator.IS_BLANK || operator === QCriteriaOperator.IS_NOT_BLANK)
-      {
-         return null;
-      }
-      else if (operator === QCriteriaOperator.IN || operator === QCriteriaOperator.NOT_IN || operator === QCriteriaOperator.BETWEEN || operator === QCriteriaOperator.NOT_BETWEEN)
-      {
-         return (values);
-      }
-
-      if (values && values.length > 0)
-      {
-         ////////////////////////////////////////////////////////////////////////////////////////////////
-         // make sure dates are formatted for the grid the way it expects - not the way we pass it in. //
-         ////////////////////////////////////////////////////////////////////////////////////////////////
-         if (fieldType === QFieldType.DATE_TIME)
-         {
-            for (let i = 0; i < values.length; i++)
-            {
-               if (!values[i].type)
-               {
-                  values[i] = ValueUtils.formatDateTimeValueForForm(values[i]);
-               }
-            }
-         }
-      }
-
-      return (values ? values[0] : "");
-   };
-
-
-   /*******************************************************************************
-    ** Get the default filter to use on the page - either from given filter string, query string param, or
-    ** local storage, or a default (empty).
-    *******************************************************************************/
-   public static async determineFilterAndSortModels(qController: QController, tableMetaData: QTableMetaData, filterString: string, searchParams: URLSearchParams, filterLocalStorageKey: string, sortLocalStorageKey: string): Promise<{ filter: GridFilterModel, sort: GridSortItem[], warning: string }>
-   {
-      let defaultFilter = {items: []} as GridFilterModel;
-      let defaultSort = [] as GridSortItem[];
-      let warningParts = [] as string[];
-
-      if (tableMetaData && tableMetaData.fields !== undefined)
-      {
-         if (filterString != null || (searchParams && searchParams.has("filter")))
-         {
-            try
-            {
-               const filterJSON = (filterString !== null) ? JSON.parse(filterString) : JSON.parse(searchParams.get("filter"));
-               const qQueryFilter = filterJSON as QQueryFilter;
-
-               //////////////////////////////////////////////////////////////////
-               // translate from a qqq-style filter to one that the grid wants //
-               //////////////////////////////////////////////////////////////////
-               let id = 1;
-               for (let i = 0; i < qQueryFilter?.criteria?.length; i++)
-               {
-                  const criteria = qQueryFilter.criteria[i];
-                  let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
-                  if (field == null)
-                  {
-                     console.log("Couldn't find field for filter: " + criteria.fieldName);
-                     warningParts.push("Your filter contained an unrecognized field name: " + criteria.fieldName);
-                     continue;
-                  }
-
-                  let values = criteria.values;
-                  if (field.possibleValueSourceName)
-                  {
-                     //////////////////////////////////////////////////////////////////////////////////
-                     // possible-values in query-string are expected to only be their id values.     //
-                     // e.g., ...values=[1]...                                                       //
-                     // but we need them to be possibleValue objects (w/ id & label) so the label    //
-                     // can be shown in the filter dropdown.  So, make backend call to look them up. //
-                     //////////////////////////////////////////////////////////////////////////////////
-                     if (values && values.length > 0)
-                     {
-                        values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
-                     }
-
-                     ////////////////////////////////////////////
-                     // log message if no values were returned //
-                     ////////////////////////////////////////////
-                     if (!values || values.length === 0)
-                     {
-                        console.warn("WARNING: No possible values were returned for [" + field.possibleValueSourceName + "] for values [" + criteria.values + "].");
-                     }
-                  }
-
-                  //////////////////////////////////////////////////////////////////////////
-                  // replace objects that look like expressions with expression instances //
-                  //////////////////////////////////////////////////////////////////////////
-                  if (values && values.length)
-                  {
-                     for (let i = 0; i < values.length; i++)
-                     {
-                        const expression = this.gridCriteriaValueToExpression(values[i]);
-                        if (expression)
-                        {
-                           values[i] = expression;
-                        }
-                     }
-                  }
-
-                  defaultFilter.items.push({
-                     columnField: criteria.fieldName,
-                     operatorValue: FilterUtils.qqqCriteriaOperatorToGrid(criteria.operator, field, values),
-                     value: FilterUtils.qqqCriteriaValuesToGrid(criteria.operator, values, field),
-                     id: id++
-                  });
-               }
-
-               defaultFilter.linkOperator = GridLinkOperator.And;
-               if (qQueryFilter.booleanOperator === "OR")
-               {
-                  defaultFilter.linkOperator = GridLinkOperator.Or;
-               }
-
-               /////////////////////////////////////////////////////////////////
-               // translate from qqq-style orderBy to one that the grid wants //
-               /////////////////////////////////////////////////////////////////
-               if (qQueryFilter.orderBys && qQueryFilter.orderBys.length > 0)
-               {
-                  for (let i = 0; i < qQueryFilter.orderBys.length; i++)
-                  {
-                     const orderBy = qQueryFilter.orderBys[i];
-                     defaultSort.push({
-                        field: orderBy.fieldName,
-                        sort: orderBy.isAscending ? "asc" : "desc"
-                     });
-                  }
-               }
-
-               if (searchParams && searchParams.has("filter"))
-               {
-                  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  // if we're setting the filter based on a filter query-string param, then make sure we don't have a currentSavedFilter in local storage. //
-                  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-                  localStorage.removeItem(`${CURRENT_SAVED_FILTER_ID_LOCAL_STORAGE_KEY_ROOT}.${tableMetaData.name}`);
-                  localStorage.setItem(filterLocalStorageKey, JSON.stringify(defaultFilter));
-                  localStorage.setItem(sortLocalStorageKey, JSON.stringify(defaultSort));
-               }
-
-               return ({filter: defaultFilter, sort: defaultSort, warning: warningParts.length > 0 ? "Warning: " + warningParts.join("; ") : ""});
-            }
-            catch (e)
-            {
-               console.warn("Error parsing filter from query string", e);
-            }
-         }
-
-         if (localStorage.getItem(filterLocalStorageKey))
-         {
-            defaultFilter = JSON.parse(localStorage.getItem(filterLocalStorageKey));
-            console.log(`Got default from LS: ${JSON.stringify(defaultFilter)}`);
-         }
-
-         if (localStorage.getItem(sortLocalStorageKey))
-         {
-            defaultSort = JSON.parse(localStorage.getItem(sortLocalStorageKey));
-            console.log(`Got default from LS: ${JSON.stringify(defaultSort)}`);
-         }
-      }
-
-      /////////////////////////////////////////////////////////////////////////////////
-      // if any values in the items are objects, but should be expression instances, //
-      // then convert & replace them.                                               //
-      /////////////////////////////////////////////////////////////////////////////////
-      if (defaultFilter && defaultFilter.items && defaultFilter.items.length)
-      {
-         defaultFilter.items.forEach((item) =>
-         {
-            if (item.value && item.value.length)
-            {
-               for (let i = 0; i < item.value.length; i++)
-               {
-                  const expression = this.gridCriteriaValueToExpression(item.value[i]);
-                  if (expression)
-                  {
-                     item.value[i] = expression;
-                  }
-               }
-            }
-            else
-            {
-               const expression = this.gridCriteriaValueToExpression(item.value);
-               if (expression)
-               {
-                  item.value = expression;
-               }
-            }
-         });
-      }
-
-      return ({filter: defaultFilter, sort: defaultSort, warning: warningParts.length > 0 ? "Warning: " + warningParts.join("; ") : ""});
-   }
-
-
-   /*******************************************************************************
-    ** build a grid filter from a qqq filter
-    *******************************************************************************/
-   public static buildGridFilterFromQFilter(tableMetaData: QTableMetaData, queryFilter: QQueryFilter): GridFilterModel
-   {
-      const gridItems: GridFilterItem[] = [];
-
-      for (let i = 0; i < queryFilter.criteria.length; i++)
-      {
-         const criteria = queryFilter.criteria[i];
-         const [field, fieldTable] = FilterUtils.getField(tableMetaData, criteria.fieldName);
-         if (field)
-         {
-            gridItems.push({columnField: criteria.fieldName, id: i, operatorValue: FilterUtils.qqqCriteriaOperatorToGrid(criteria.operator, field, criteria.values), value: FilterUtils.qqqCriteriaValuesToGrid(criteria.operator, criteria.values, field)});
-         }
-      }
-
-      const gridFilter: GridFilterModel = {items: gridItems, linkOperator: queryFilter.booleanOperator == "AND" ? GridLinkOperator.And : GridLinkOperator.Or};
-      return (gridFilter);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static getField(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
-   {
-      if (fieldName == null)
-      {
-         return ([null, null]);
-      }
-
-      if (fieldName.indexOf(".") > -1)
-      {
-         let parts = fieldName.split(".", 2);
-         if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length)
-         {
-            for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
-            {
-               const joinTable = tableMetaData.exposedJoins[i].joinTable;
-               if (joinTable.name == parts[0])
-               {
-                  return ([joinTable.fields.get(parts[1]), joinTable]);
-               }
-            }
-         }
-
-         console.log(`Failed to find join field: ${fieldName}`);
-         return ([null, null]);
-      }
-      else
-      {
-         return ([tableMetaData.fields.get(fieldName), tableMetaData]);
-      }
-   }
-
-
-   /*******************************************************************************
-    ** build a qqq filter from a grid and column sort model
-    *******************************************************************************/
-   public static buildQFilterFromGridFilter(tableMetaData: QTableMetaData, filterModel: GridFilterModel, columnSortModel: GridSortItem[], limit?: number, allowIncompleteCriteria = false): QQueryFilter
-   {
-      console.log("Building q filter with model:");
-      console.log(filterModel);
-
-      const qFilter = new QQueryFilter();
-      if (columnSortModel)
-      {
-         columnSortModel.forEach((gridSortItem) =>
-         {
-            qFilter.addOrderBy(new QFilterOrderBy(gridSortItem.field, gridSortItem.sort === "asc"));
-         });
-      }
-
-      if (limit)
-      {
-         console.log("Setting limit to: " + limit);
-         qFilter.limit = limit;
-      }
-
-      if (filterModel)
-      {
-         let foundFilter = false;
-         filterModel.items.forEach((item) =>
-         {
-            /////////////////////////////////////////////////////////////////////////
-            // set the values for these operators that otherwise don't have values //
-            /////////////////////////////////////////////////////////////////////////
-            if (item.operatorValue === "isTrue")
-            {
-               item.value = [true];
-            }
-            else if (item.operatorValue === "isFalse")
-            {
-               item.value = [false];
-            }
-
-            ////////////////////////////////////////////////////////////////////////////////
-            // if no value set and not 'empty' or 'not empty' operators, skip this filter //
-            ////////////////////////////////////////////////////////////////////////////////
-            let incomplete = false;
-            if (item.operatorValue === "between" || item.operatorValue === "notBetween")
-            {
-               if (!item.value || !item.value.length || item.value.length < 2 || this.isUnset(item.value[0]) || this.isUnset(item.value[1]))
-               {
-                  incomplete = true;
-               }
-            }
-            else if ((!item.value || item.value.length == 0 || (item.value.length == 1 && this.isUnset(item.value[0]))) && item.operatorValue !== "isEmpty" && item.operatorValue !== "isNotEmpty")
-            {
-               incomplete = true;
-            }
-
-            if (incomplete && !allowIncompleteCriteria)
-            {
-               console.log(`Discarding incomplete filter criteria: ${JSON.stringify(item)}`);
-               return;
-            }
-
-            const fieldMetadata = tableMetaData?.fields.get(item.columnField);
-            const operator = FilterUtils.gridCriteriaOperatorToQQQ(item.operatorValue);
-            const values = FilterUtils.gridCriteriaValueToQQQ(operator, item.value, item.operatorValue, fieldMetadata);
-            let criteria = new QFilterCriteria(item.columnField, operator, values);
-            qFilter.addCriteria(criteria);
-            foundFilter = true;
-         });
-
-         qFilter.booleanOperator = "AND";
-         if (filterModel.linkOperator == "or")
-         {
-            ///////////////////////////////////////////////////////////////////////////////////////////
-            // by default qFilter uses AND - so only  if we see linkOperator=or do we need to set it //
-            ///////////////////////////////////////////////////////////////////////////////////////////
-            qFilter.booleanOperator = "OR";
-         }
-      }
-
-      return qFilter;
-   };
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private static isUnset(value: any)
-   {
-      return value === "" || value === undefined;
-   }
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   private static gridCriteriaValueToExpression(value: any)
-   {
-      if (value && value.length)
-      {
-         value = value[0];
-      }
-
-      if (value && value.type)
-      {
-         if (value.type == "NowWithOffset")
-         {
-            return (new NowWithOffsetExpression(value));
-         }
-         else if (value.type == "Now")
-         {
-            return (new NowExpression(value));
-         }
-         else if (value.type == "ThisOrLastPeriod")
-         {
-            return (new ThisOrLastPeriodExpression(value));
-         }
-      }
-
-      return (null);
-   }
-
-
-   /*******************************************************************************
-    ** edit the input filter object, replacing any values which have {id,label} attributes
-    ** to instead just have the id part.
-    *******************************************************************************/
-   public static convertFilterPossibleValuesToIds(inputFilter: QQueryFilter): QQueryFilter
-   {
-      const filter = Object.assign({}, inputFilter);
-
-      if (filter.criteria)
-      {
-         for (let i = 0; i < filter.criteria.length; i++)
-         {
-            const criteria = filter.criteria[i];
-            if (criteria.values)
-            {
-               for (let j = 0; j < criteria.values.length; j++)
-               {
-                  let value = criteria.values[j];
-                  if (value && value.id && value.label)
-                  {
-                     criteria.values[j] = value.id;
-                  }
-               }
-            }
-         }
-      }
-
-      return (filter);
-   }
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
-   {
-      const reasonsWhyItCannot: string[] = [];
-
-      if(filter == null)
-      {
-         return ({canFilterWorkAsBasic: true});
-      }
-
-      if(filter.booleanOperator == "OR")
-      {
-         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
-      }
-
-      if(filter.criteria)
-      {
-         const usedFields: {[name: string]: boolean} = {};
-         const warnedFields: {[name: string]: boolean} = {};
-         for (let i = 0; i < filter.criteria.length; i++)
-         {
-            const criteriaName = filter.criteria[i].fieldName;
-            if(!criteriaName)
-            {
-               continue;
-            }
-
-            if(usedFields[criteriaName])
-            {
-               if(!warnedFields[criteriaName])
-               {
-                  const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
-                  let fieldLabel = field.label;
-                  if(tableForField.name != tableMetaData.name)
-                  {
-                     let fieldLabel = `${tableForField.label}: ${field.label}`;
-                  }
-                  reasonsWhyItCannot.push(`Filter contains more than 1 condition for the field: ${fieldLabel}`);
-                  warnedFields[criteriaName] = true;
-               }
-            }
-            usedFields[criteriaName] = true;
-         }
-      }
-
-      if(reasonsWhyItCannot.length == 0)
-      {
-         return ({canFilterWorkAsBasic: true});
-      }
-      else
-      {
-         return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
-      }
-   }
-
-   /*******************************************************************************
-    ** get the values associated with a criteria as a string, e.g., for showing
-    ** in a tooltip.
-    *******************************************************************************/
-   public static getValuesString(fieldMetaData: QFieldMetaData, criteria: QFilterCriteria, maxValuesToShow: number = 3): string
-   {
-      let valuesString = "";
-      if (criteria.values && criteria.values.length && fieldMetaData.type !== QFieldType.BOOLEAN)
-      {
-         let labels = [] as string[];
-
-         let maxLoops = criteria.values.length;
-         if (maxLoops > (maxValuesToShow + 2))
-         {
-            maxLoops = maxValuesToShow;
-         }
-
-         for (let i = 0; i < maxLoops; i++)
-         {
-            if (criteria.values[i] && criteria.values[i].label)
-            {
-               labels.push(criteria.values[i].label);
-            }
-            else
-            {
-               labels.push(criteria.values[i]);
-            }
-         }
-
-         if (maxLoops < criteria.values.length)
-         {
-            labels.push(" and " + (criteria.values.length - maxLoops) + " other values.");
-         }
-
-         valuesString = (labels.join(", "));
-      }
-      return valuesString;
-   }
-
-}
-
-export default FilterUtils;

src/qqq/utils/qqq/FilterUtils.tsx

@@ -0,0 +1,617 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2022.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {QController} from "@kingsrook/qqq-frontend-core/lib/controllers/QController";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {NowExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowExpression";
+import {NowWithOffsetExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/NowWithOffsetExpression";
+import {QCriteriaOperator} from "@kingsrook/qqq-frontend-core/lib/model/query/QCriteriaOperator";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QFilterOrderBy} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterOrderBy";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {ThisOrLastPeriodExpression} from "@kingsrook/qqq-frontend-core/lib/model/query/ThisOrLastPeriodExpression";
+import Box from "@mui/material/Box";
+import {GridSortModel} from "@mui/x-data-grid-pro";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+
+/*******************************************************************************
+ ** Utility class for working with QQQ Filters
+ **
+ *******************************************************************************/
+class FilterUtils
+{
+
+   /*******************************************************************************
+    ** Helper method - take a list of values, which may be possible values, and
+    ** either return the original list, or a new list that is just the ids of the
+    ** possible values (if it was a list of possible values).
+    **
+    ** Or, if the values are date-times, convert them to UTC.
+    *******************************************************************************/
+   public static cleanseCriteriaValueForQQQ = (param: any[], fieldMetaData: QFieldMetaData): number[] | string[] =>
+   {
+      if (param === null || param === undefined)
+      {
+         return (param);
+      }
+
+      if (FilterUtils.gridCriteriaValueToExpression(param))
+      {
+         return (param);
+      }
+
+      let rs = [];
+      for (let i = 0; i < param.length; i++)
+      {
+         if (param[i] && param[i].id && param[i].label)
+         {
+            /////////////////////////////////////////////////////////////
+            // if the param looks like a possible value, return its id //
+            /////////////////////////////////////////////////////////////
+            rs.push(param[i].id);
+         }
+         else
+         {
+            if (fieldMetaData?.type == QFieldType.DATE_TIME)
+            {
+               try
+               {
+                  let toPush = ValueUtils.frontendLocalZoneDateTimeStringToUTCStringForBackend(param[i]);
+                  rs.push(toPush);
+               }
+               catch (e)
+               {
+                  console.log("Error converting date-time to UTC: ", e);
+                  rs.push(param[i]);
+               }
+            }
+            else
+            {
+               rs.push(param[i]);
+            }
+         }
+      }
+      return (rs);
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static async cleanupValuesInFilerFromQueryString(qController: QController, tableMetaData: QTableMetaData, queryFilter: QQueryFilter)
+   {
+      for (let i = 0; i < queryFilter?.criteria?.length; i++)
+      {
+         const criteria = queryFilter.criteria[i];
+         let [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, criteria.fieldName);
+
+         let values = criteria.values;
+         if (field.possibleValueSourceName)
+         {
+            //////////////////////////////////////////////////////////////////////////////////
+            // possible-values in query-string are expected to only be their id values.     //
+            // e.g., ...values=[1]...                                                       //
+            // but we need them to be possibleValue objects (w/ id & label) so the label    //
+            // can be shown in the filter dropdown.  So, make backend call to look them up. //
+            // also, there are cases where we can get a null or "" as the only value in the //
+            // values array - avoid sending that to the backend, as it comes back w/ all    //
+            // possible values, and a general "bad time"                                    //
+            //////////////////////////////////////////////////////////////////////////////////
+            if (values && values.length > 0 && values[0] !== null && values[0] !== undefined && values[0] !== "")
+            {
+               values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
+            }
+
+            ////////////////////////////////////////////
+            // log message if no values were returned //
+            ////////////////////////////////////////////
+            if (!values || values.length === 0)
+            {
+               console.warn("WARNING: No possible values were returned for [" + field.possibleValueSourceName + "] for values [" + criteria.values + "].");
+            }
+         }
+
+         if (values && values.length)
+         {
+            for (let i = 0; i < values.length; i++)
+            {
+               //////////////////////////////////////////////////////////////////////////
+               // replace objects that look like expressions with expression instances //
+               //////////////////////////////////////////////////////////////////////////
+               const expression = this.gridCriteriaValueToExpression(values[i]);
+               if (expression)
+               {
+                  values[i] = expression;
+               }
+               else
+               {
+                  ///////////////////////////////////////////
+                  // make date-times work for the frontend //
+                  ///////////////////////////////////////////
+                  if (field.type == QFieldType.DATE_TIME)
+                  {
+                     values[i] = ValueUtils.formatDateTimeValueForForm(values[i]);
+                  }
+               }
+            }
+         }
+
+         criteria.values = values;
+      }
+
+      ////////////////////////////////////////////////
+      // recursively clean values in any subfilters //
+      ////////////////////////////////////////////////
+      for (let j = 0; j < queryFilter?.subFilters?.length; j++)
+      {
+         await FilterUtils.cleanupValuesInFilerFromQueryString(qController, tableMetaData, queryFilter.subFilters[j]);
+      }
+   }
+
+
+   /*******************************************************************************
+    ** given a table, and a field name (which may be prefixed with an exposed-join
+    ** table name (from the table) - return the corresponding field-meta-data, and
+    ** the table that the field is from (e.g., may be a join table!)
+    *******************************************************************************/
+   public static getField(tableMetaData: QTableMetaData, fieldName: string): [QFieldMetaData, QTableMetaData]
+   {
+      if (fieldName == null)
+      {
+         return ([null, null]);
+      }
+
+      if (fieldName.indexOf(".") > -1)
+      {
+         let parts = fieldName.split(".", 2);
+         if (tableMetaData.exposedJoins && tableMetaData.exposedJoins.length)
+         {
+            for (let i = 0; i < tableMetaData.exposedJoins.length; i++)
+            {
+               const joinTable = tableMetaData.exposedJoins[i].joinTable;
+               if (joinTable.name == parts[0])
+               {
+                  return ([joinTable.fields.get(parts[1]), joinTable]);
+               }
+            }
+         }
+
+         console.log(`Failed to find join field: ${fieldName}`);
+         return ([null, null]);
+      }
+      else
+      {
+         return ([tableMetaData.fields.get(fieldName), tableMetaData]);
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static gridCriteriaValueToExpression(value: any)
+   {
+      if (value && value.length)
+      {
+         value = value[0];
+      }
+
+      if (value && value.type)
+      {
+         if (value.type == "NowWithOffset")
+         {
+            return (new NowWithOffsetExpression(value));
+         }
+         else if (value.type == "Now")
+         {
+            return (new NowExpression(value));
+         }
+         else if (value.type == "ThisOrLastPeriod")
+         {
+            return (new ThisOrLastPeriodExpression(value));
+         }
+      }
+
+      return (null);
+   }
+
+
+   /*******************************************************************************
+    ** edit the input filter object, replacing any values which have {id,label} attributes
+    ** to instead just have the id part.
+    *******************************************************************************/
+   public static convertFilterPossibleValuesToIds(inputFilter: QQueryFilter): QQueryFilter
+   {
+      const filter = Object.assign({}, inputFilter);
+
+      if (filter.criteria)
+      {
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            const criteria = filter.criteria[i];
+            if (criteria.values)
+            {
+               for (let j = 0; j < criteria.values.length; j++)
+               {
+                  let value = criteria.values[j];
+                  if (value && value.id && value.label)
+                  {
+                     criteria.values[j] = value.id;
+                  }
+               }
+            }
+         }
+      }
+
+      return (filter);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; canFilterWorkAsAdvanced: boolean, reasonsWhyItCannot?: string[] }
+   {
+      const reasonsWhyItCannot: string[] = [];
+
+      if (filter == null)
+      {
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
+      }
+
+      if (filter.booleanOperator == "OR")
+      {
+         reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
+      }
+
+      if (filter.subFilters?.length > 0)
+      {
+         reasonsWhyItCannot.push("Filter contains sub-filters.");
+         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: false, reasonsWhyItCannot: reasonsWhyItCannot});
+      }
+
+      if (filter.criteria)
+      {
+         const usedFields: { [name: string]: boolean } = {};
+         const warnedFields: { [name: string]: boolean } = {};
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            const criteriaName = filter.criteria[i].fieldName;
+            if (!criteriaName)
+            {
+               continue;
+            }
+
+            if (usedFields[criteriaName])
+            {
+               if (!warnedFields[criteriaName])
+               {
+                  const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
+                  let fieldLabel = field.label;
+                  if (tableForField.name != tableMetaData.name)
+                  {
+                     let fieldLabel = `${tableForField.label}: ${field.label}`;
+                  }
+                  reasonsWhyItCannot.push(`Filter contains more than 1 condition for the field: ${fieldLabel}`);
+                  warnedFields[criteriaName] = true;
+               }
+            }
+            usedFields[criteriaName] = true;
+         }
+      }
+
+      if (reasonsWhyItCannot.length == 0)
+      {
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
+      }
+      else
+      {
+         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: true, reasonsWhyItCannot: reasonsWhyItCannot});
+      }
+   }
+
+   /*******************************************************************************
+    ** get the values associated with a criteria as a string, e.g., for showing
+    ** in a tooltip.
+    *******************************************************************************/
+   public static getValuesString(fieldMetaData: QFieldMetaData, criteria: QFilterCriteria, maxValuesToShow: number = 3, andMoreFormat: "andNOther" | "+N" = "andNOther"): string
+   {
+      let valuesString = "";
+
+      if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
+      {
+         ///////////////////////////////////////////////
+         // we don't want values for these operators. //
+         ///////////////////////////////////////////////
+         return valuesString;
+      }
+
+      if (criteria.values && criteria.values.length)
+      {
+         let labels = [] as string[];
+
+         let maxLoops = criteria.values.length;
+         if (maxLoops > (maxValuesToShow + 2))
+         {
+            maxLoops = maxValuesToShow;
+         }
+         else if (maxValuesToShow == 1 && criteria.values.length > 1)
+         {
+            maxLoops = 1;
+         }
+
+         for (let i = 0; i < maxLoops; i++)
+         {
+            const value = criteria.values[i];
+            if (value.type == "NowWithOffset")
+            {
+               const expression = new NowWithOffsetExpression(value);
+               labels.push(expression.toString());
+            }
+            else if (value.type == "Now")
+            {
+               const expression = new NowExpression(value);
+               labels.push(expression.toString());
+            }
+            else if (value.type == "ThisOrLastPeriod")
+            {
+               const expression = new ThisOrLastPeriodExpression(value);
+               let startOfPrefix = "";
+               if (fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
+               {
+                  startOfPrefix = "start of ";
+               }
+               labels.push(`${startOfPrefix}${expression.toString()}`);
+            }
+            else if (fieldMetaData.type == QFieldType.BOOLEAN)
+            {
+               labels.push(value == true ? "yes" : "no");
+            }
+            else if (fieldMetaData.type == QFieldType.DATE_TIME)
+            {
+               labels.push(ValueUtils.formatDateTime(value));
+            }
+            else if (fieldMetaData.type == QFieldType.DATE)
+            {
+               labels.push(ValueUtils.formatDate(value));
+            }
+            else if (value && value.label)
+            {
+               labels.push(value.label);
+            }
+            else
+            {
+               labels.push(value);
+            }
+         }
+
+         if (maxLoops < criteria.values.length)
+         {
+            const n = criteria.values.length - maxLoops;
+            switch (andMoreFormat)
+            {
+               case "andNOther":
+                  labels.push(` and ${n} other value${n == 1 ? "" : "s"}.`);
+                  break;
+               case "+N":
+                  labels[labels.length - 1] += ` +${n}`;
+                  break;
+            }
+         }
+
+         valuesString = (labels.join(", "));
+      }
+      return valuesString;
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static buildQFilterFromJSONObject(object: any): QQueryFilter
+   {
+      const queryFilter = new QQueryFilter();
+
+      queryFilter.criteria = [];
+      for (let i = 0; i < object.criteria?.length; i++)
+      {
+         const criteriaObject = object.criteria[i];
+         queryFilter.criteria.push(new QFilterCriteria(criteriaObject.fieldName, criteriaObject.operator, criteriaObject.values));
+      }
+
+      queryFilter.orderBys = [];
+      for (let i = 0; i < object.orderBys?.length; i++)
+      {
+         const orderByObject = object.orderBys[i];
+         queryFilter.orderBys.push(new QFilterOrderBy(orderByObject.fieldName, orderByObject.isAscending));
+      }
+
+      queryFilter.booleanOperator = object.booleanOperator;
+      queryFilter.skip = object.skip;
+      queryFilter.limit = object.limit;
+
+      return (queryFilter);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static getGridSortFromQueryFilter(queryFilter: QQueryFilter): GridSortModel
+   {
+      const gridSortModel: GridSortModel = [];
+      for (let i = 0; i < queryFilter?.orderBys?.length; i++)
+      {
+         const orderBy = queryFilter.orderBys[i];
+         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"});
+      }
+      return (gridSortModel);
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string
+   {
+      if (criteria == null || criteria.operator == null)
+      {
+         return (null);
+      }
+
+      const isDate = field.type == QFieldType.DATE;
+      const isDateTime = field.type == QFieldType.DATE_TIME;
+
+      try
+      {
+         switch (criteria.operator)
+         {
+            case QCriteriaOperator.EQUALS:
+               return ("equals");
+            case QCriteriaOperator.NOT_EQUALS:
+            case QCriteriaOperator.NOT_EQUALS_OR_IS_NULL:
+               return ("does not equal");
+            case QCriteriaOperator.IN:
+               return ("is any of");
+            case QCriteriaOperator.NOT_IN:
+               return ("is none of");
+            case QCriteriaOperator.STARTS_WITH:
+               return ("starts with");
+            case QCriteriaOperator.ENDS_WITH:
+               return ("ends with");
+            case QCriteriaOperator.CONTAINS:
+               return ("contains");
+            case QCriteriaOperator.NOT_STARTS_WITH:
+               return ("does not start with");
+            case QCriteriaOperator.NOT_ENDS_WITH:
+               return ("does not end with");
+            case QCriteriaOperator.NOT_CONTAINS:
+               return ("does not contain");
+            case QCriteriaOperator.LESS_THAN:
+               if (isDate || isDateTime)
+               {
+                  return ("is before");
+               }
+               return ("less than");
+            case QCriteriaOperator.LESS_THAN_OR_EQUALS:
+               if (isDate)
+               {
+                  return ("is on or before");
+               }
+               if (isDateTime)
+               {
+                  return ("is at or before");
+               }
+               return ("less than or equals");
+            case QCriteriaOperator.GREATER_THAN:
+               if (isDate || isDateTime)
+               {
+                  return ("is after");
+               }
+               return ("greater than or equals");
+            case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
+               if (isDate)
+               {
+                  return ("is on or after");
+               }
+               if (isDateTime)
+               {
+                  return ("is at or after");
+               }
+               return ("greater than or equals");
+            case QCriteriaOperator.IS_BLANK:
+               return ("is empty");
+            case QCriteriaOperator.IS_NOT_BLANK:
+               return ("is not empty");
+            case QCriteriaOperator.BETWEEN:
+               return ("is between");
+            case QCriteriaOperator.NOT_BETWEEN:
+               return ("is not between");
+         }
+      }
+      catch (e)
+      {
+         console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
+         return criteria?.operator;
+      }
+   }
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element
+   {
+      if (criteria == null)
+      {
+         return (null);
+      }
+
+      const [field, fieldTable] = TableUtils.getFieldAndTable(table, criteria.fieldName);
+      const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName);
+      const valuesString = FilterUtils.getValuesString(field, criteria);
+
+      if (styled)
+      {
+         return (
+            <Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}>
+               <Box display="inline" p="0.125rem" pl="0.5rem" sx={{background: "#0062FF"}} borderRadius="0.5rem 0 0 0.5rem">{fieldLabel} </Box>
+               <Box display="inline" p="0.125rem" sx={{background: "#757575"}} borderRadius={valuesString ? "0" : "0 0.5rem 0.5rem 0"}> {FilterUtils.operatorToHumanString(criteria, field)} </Box>
+               {valuesString && <Box display="inline" p="0.125rem" pr="0.5rem" sx={{background: "#009971"}} borderRadius="0 0.5rem 0.5rem 0"> {valuesString}</Box>}
+               &nbsp;
+            </Box>
+         );
+      }
+      else
+      {
+         return (`${fieldLabel} ${FilterUtils.operatorToHumanString(criteria, field)} ${valuesString}`);
+      }
+   }
+
+
+   /*******************************************************************************
+    ** after go-live of redesigin in march 2024, we had bugs where we could get a
+    ** filter with a criteria w/ a null field name (e.g., by having an incomplete
+    ** criteria in the Advanced filter builder - and that would sometimes break
+    ** the screen!  So, strip those away when storing or loading filters, via
+    ** this function.
+    *******************************************************************************/
+   public static stripAwayIncompleteCriteria(filter: QQueryFilter)
+   {
+      if (filter?.criteria?.length > 0)
+      {
+         for (let i = 0; i < filter.criteria.length; i++)
+         {
+            if (!filter.criteria[i].fieldName)
+            {
+               filter.criteria.splice(i, 1);
+               i--;
+            }
+         }
+      }
+   }
+
+}
+
+export default FilterUtils;

src/qqq/utils/qqq/SavedViewUtils.ts

@@ -0,0 +1,418 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
+import {QFilterCriteria} from "@kingsrook/qqq-frontend-core/lib/model/query/QFilterCriteria";
+import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter";
+import {validateCriteria} from "qqq/components/query/FilterCriteriaRow";
+import QQueryColumns from "qqq/models/query/QQueryColumns";
+import RecordQueryView from "qqq/models/query/RecordQueryView";
+import FilterUtils from "qqq/utils/qqq/FilterUtils";
+import TableUtils from "qqq/utils/qqq/TableUtils";
+
+/*******************************************************************************
+ ** Utility class for working with QQQ Saved Views
+ **
+ *******************************************************************************/
+export class SavedViewUtils
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static fieldNameToLabel = (tableMetaData: QTableMetaData, fieldName: string): string =>
+   {
+      try
+      {
+         const [fieldMetaData, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+         if (fieldTable.name != tableMetaData.name)
+         {
+            return (fieldTable.label + ": " + fieldMetaData.label);
+         }
+
+         return (fieldMetaData.label);
+      }
+      catch (e)
+      {
+         return (fieldName);
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffFilters = (tableMetaData: QTableMetaData, savedView: RecordQueryView, activeView: RecordQueryView, viewDiffs: string[]): void =>
+   {
+      try
+      {
+         ////////////////////////////////////////////////////////////////////////////////
+         // inner helper function for reporting on the number of criteria for a field. //
+         // e.g., will tell us "added criteria X" or "removed 2 criteria on Y"         //
+         ////////////////////////////////////////////////////////////////////////////////
+         const diffCriteriaFunction = (base: QQueryFilter, compare: QQueryFilter, messagePrefix: string, isCheckForChanged = false) =>
+         {
+            const baseCriteriaMap: { [name: string]: QFilterCriteria[] } = {};
+            base?.criteria?.forEach((criteria) =>
+            {
+               if (validateCriteria(criteria).criteriaIsValid)
+               {
+                  if (!baseCriteriaMap[criteria.fieldName])
+                  {
+                     baseCriteriaMap[criteria.fieldName] = [];
+                  }
+                  baseCriteriaMap[criteria.fieldName].push(criteria);
+               }
+            });
+
+            const compareCriteriaMap: { [name: string]: QFilterCriteria[] } = {};
+            compare?.criteria?.forEach((criteria) =>
+            {
+               if (validateCriteria(criteria).criteriaIsValid)
+               {
+                  if (!compareCriteriaMap[criteria.fieldName])
+                  {
+                     compareCriteriaMap[criteria.fieldName] = [];
+                  }
+                  compareCriteriaMap[criteria.fieldName].push(criteria);
+               }
+            });
+
+            for (let fieldName of Object.keys(compareCriteriaMap))
+            {
+               const noBaseCriteria = baseCriteriaMap[fieldName]?.length ?? 0;
+               const noCompareCriteria = compareCriteriaMap[fieldName]?.length ?? 0;
+
+               if (isCheckForChanged)
+               {
+                  /////////////////////////////////////////////////////////////////////////////////////////////
+                  // first - if we're checking for changes to specific criteria (e.g., change id=5 to id<>5, //
+                  // or change id=5 to id=6, or change id=5 to id<>7)                                        //
+                  // our "sweet spot" is if there's a single criteria on each side of the check              //
+                  /////////////////////////////////////////////////////////////////////////////////////////////
+                  if (noBaseCriteria == 1 && noCompareCriteria == 1)
+                  {
+                     const baseCriteria = baseCriteriaMap[fieldName][0];
+                     const compareCriteria = compareCriteriaMap[fieldName][0];
+                     const baseValuesJSON = JSON.stringify(baseCriteria.values ?? []);
+                     const compareValuesJSON = JSON.stringify(compareCriteria.values ?? []);
+                     if (baseCriteria.operator != compareCriteria.operator || baseValuesJSON != compareValuesJSON)
+                     {
+                        viewDiffs.push(`Changed a filter from ${FilterUtils.criteriaToHumanString(tableMetaData, baseCriteria)} to ${FilterUtils.criteriaToHumanString(tableMetaData, compareCriteria)}`);
+                     }
+                  }
+                  else if (noBaseCriteria == noCompareCriteria)
+                  {
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                     // else - if the number of criteria on this field differs, that'll get caught in a non-isCheckForChanged call, so                                     //
+                     // todo, i guess - this is kinda weak - but if there's the same number of criteria on a field, then just ... do a shitty JSON compare between them... //
+                     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                     const baseJSON = JSON.stringify(baseCriteriaMap[fieldName]);
+                     const compareJSON = JSON.stringify(compareCriteriaMap[fieldName]);
+                     if (baseJSON != compareJSON)
+                     {
+                        viewDiffs.push(`${messagePrefix} 1 or more filters on ${SavedViewUtils.fieldNameToLabel(tableMetaData, fieldName)}`);
+                     }
+                  }
+               }
+               else
+               {
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  // else - we're not checking for changes to individual criteria - rather - we're just checking if criteria were added or removed. //
+                  // we'll do that by starting to see if the nubmer of criteria is different.                                                       //
+                  // and, only do it in only 1 direction, assuming we'll get called twice, with the base & compare sides flipped                    //
+                  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                  if (noBaseCriteria < noCompareCriteria)
+                  {
+                     if (noBaseCriteria == 0 && noCompareCriteria == 1)
+                     {
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        // if the difference is 0 to 1 (1 to 0 when called in reverse), then we can report the full criteria that was added/removed //
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        viewDiffs.push(`${messagePrefix} filter: ${FilterUtils.criteriaToHumanString(tableMetaData, compareCriteriaMap[fieldName][0])}`);
+                     }
+                     else
+                     {
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        // else, say 0 to 2, or 2 to 1 - just report on how many were changed...                                                //
+                        // todo this isn't great, as you might have had, say, (A,B), and now you have (C) - but all we'll say is "removed 1"... //
+                        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+                        const noDiffs = noCompareCriteria - noBaseCriteria;
+                        viewDiffs.push(`${messagePrefix} ${noDiffs} filters on ${SavedViewUtils.fieldNameToLabel(tableMetaData, fieldName)}`);
+                     }
+                  }
+               }
+            }
+         };
+
+         diffCriteriaFunction(savedView.queryFilter, activeView.queryFilter, "Added");
+         diffCriteriaFunction(activeView.queryFilter, savedView.queryFilter, "Removed");
+         diffCriteriaFunction(savedView.queryFilter, activeView.queryFilter, "Changed", true);
+
+         //////////////////////
+         // boolean operator //
+         //////////////////////
+         if (savedView.queryFilter.booleanOperator != activeView.queryFilter.booleanOperator)
+         {
+            viewDiffs.push("Changed filter from 'And' to 'Or'");
+         }
+
+         ///////////////
+         // order-bys //
+         ///////////////
+         const savedOrderBys = savedView.queryFilter.orderBys;
+         const activeOrderBys = activeView.queryFilter.orderBys;
+         if (savedOrderBys.length != activeOrderBys.length)
+         {
+            viewDiffs.push("Changed sort");
+         }
+         else if (savedOrderBys.length > 0)
+         {
+            const toWord = ((b: boolean) => b ? "ascending" : "descending");
+            if (savedOrderBys[0].fieldName != activeOrderBys[0].fieldName && savedOrderBys[0].isAscending != activeOrderBys[0].isAscending)
+            {
+               viewDiffs.push(`Changed sort from ${SavedViewUtils.fieldNameToLabel(tableMetaData, savedOrderBys[0].fieldName)} ${toWord(savedOrderBys[0].isAscending)} to ${SavedViewUtils.fieldNameToLabel(tableMetaData, activeOrderBys[0].fieldName)} ${toWord(activeOrderBys[0].isAscending)}`);
+            }
+            else if (savedOrderBys[0].fieldName != activeOrderBys[0].fieldName)
+            {
+               viewDiffs.push(`Changed sort field from ${SavedViewUtils.fieldNameToLabel(tableMetaData, savedOrderBys[0].fieldName)} to ${SavedViewUtils.fieldNameToLabel(tableMetaData, activeOrderBys[0].fieldName)}`);
+            }
+            else if (savedOrderBys[0].isAscending != activeOrderBys[0].isAscending)
+            {
+               viewDiffs.push(`Changed sort direction from ${toWord(savedOrderBys[0].isAscending)} to ${toWord(activeOrderBys[0].isAscending)}`);
+            }
+         }
+      }
+      catch (e)
+      {
+         console.log(`Error looking for differences in filters ${e}`);
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffColumns = (tableMetaData: QTableMetaData, savedView: RecordQueryView, activeView: RecordQueryView, viewDiffs: string[]): void =>
+   {
+      try
+      {
+         if (!savedView.queryColumns || !savedView.queryColumns.columns || savedView.queryColumns.columns.length == 0)
+         {
+            viewDiffs.push("This view did not previously have columns saved with it, so the next time you save it they will be initialized.");
+            return;
+         }
+
+         ////////////////////////////////////////////////////////////
+         // nested function to help diff visible status of columns //
+         ////////////////////////////////////////////////////////////
+         const diffVisibilityFunction = (base: QQueryColumns, compare: QQueryColumns, messagePrefix: string) =>
+         {
+            const baseColumnsMap: { [name: string]: boolean } = {};
+            base.columns.forEach((column) =>
+            {
+               if (column.isVisible)
+               {
+                  baseColumnsMap[column.name] = true;
+               }
+            });
+
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.columns.length; i++)
+            {
+               const column = compare.columns[i];
+               if (column.isVisible)
+               {
+                  if (!baseColumnsMap[column.name])
+                  {
+                     diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, column.name));
+                  }
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               if (diffFields.length > 5)
+               {
+                  viewDiffs.push(`${messagePrefix} ${diffFields.length} columns.`);
+               }
+               else
+               {
+                  viewDiffs.push(`${messagePrefix} column${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+               }
+            }
+         };
+
+         ///////////////////////////////////////////////////////////
+         // nested function to help diff pinned status of columns //
+         ///////////////////////////////////////////////////////////
+         const diffPinsFunction = (base: QQueryColumns, compare: QQueryColumns, messagePrefix: string) =>
+         {
+            const baseColumnsMap: { [name: string]: string } = {};
+            base.columns.forEach((column) => baseColumnsMap[column.name] = column.pinned);
+
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.columns.length; i++)
+            {
+               const column = compare.columns[i];
+               if (baseColumnsMap[column.name] != column.pinned)
+               {
+                  diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, column.name));
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               if (diffFields.length > 5)
+               {
+                  viewDiffs.push(`${messagePrefix} ${diffFields.length} columns.`);
+               }
+               else
+               {
+                  viewDiffs.push(`${messagePrefix} column${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+               }
+            }
+         };
+
+         ///////////////////////////////////////////////////
+         // nested function to help diff width of columns //
+         ///////////////////////////////////////////////////
+         const diffWidthsFunction = (base: QQueryColumns, compare: QQueryColumns, messagePrefix: string) =>
+         {
+            const baseColumnsMap: { [name: string]: number } = {};
+            base.columns.forEach((column) => baseColumnsMap[column.name] = column.width);
+
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.columns.length; i++)
+            {
+               const column = compare.columns[i];
+               if (baseColumnsMap[column.name] != column.width)
+               {
+                  diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, column.name));
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               if (diffFields.length > 5)
+               {
+                  viewDiffs.push(`${messagePrefix} ${diffFields.length} columns.`);
+               }
+               else
+               {
+                  viewDiffs.push(`${messagePrefix} column${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+               }
+            }
+         };
+
+         diffVisibilityFunction(savedView.queryColumns, activeView.queryColumns, "Turned on ");
+         diffVisibilityFunction(activeView.queryColumns, savedView.queryColumns, "Turned off ");
+         diffPinsFunction(savedView.queryColumns, activeView.queryColumns, "Changed pinned state for ");
+
+         if (savedView.queryColumns.columns.map(c => c.name).join(",") != activeView.queryColumns.columns.map(c => c.name).join(","))
+         {
+            viewDiffs.push("Changed the order of columns.");
+         }
+
+         diffWidthsFunction(savedView.queryColumns, activeView.queryColumns, "Changed width for ");
+      }
+      catch (e)
+      {
+         console.log(`Error looking for differences in columns: ${e}`);
+      }
+   };
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffQuickFilterFieldNames = (tableMetaData: QTableMetaData, savedView: RecordQueryView, activeView: RecordQueryView, viewDiffs: string[]): void =>
+   {
+      try
+      {
+         const diffFunction = (base: string[], compare: string[], messagePrefix: string) =>
+         {
+            const baseFieldNameMap: { [name: string]: boolean } = {};
+            base.forEach((name) => baseFieldNameMap[name] = true);
+            const diffFields: string[] = [];
+            for (let i = 0; i < compare.length; i++)
+            {
+               const name = compare[i];
+               if (!baseFieldNameMap[name])
+               {
+                  diffFields.push(SavedViewUtils.fieldNameToLabel(tableMetaData, name));
+               }
+            }
+
+            if (diffFields.length > 0)
+            {
+               viewDiffs.push(`${messagePrefix} basic filter${diffFields.length == 1 ? "" : "s"}: ${diffFields.join(", ")}`);
+            }
+         };
+
+         diffFunction(savedView.quickFilterFieldNames, activeView.quickFilterFieldNames, "Turned on");
+         diffFunction(activeView.quickFilterFieldNames, savedView.quickFilterFieldNames, "Turned off");
+      }
+      catch (e)
+      {
+         console.log(`Error looking for differences in quick filter field names: ${e}`);
+      }
+   };
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public static diffViews = (tableMetaData: QTableMetaData, baseView: RecordQueryView, activeView: RecordQueryView): string[] =>
+   {
+      const viewDiffs: string[] = [];
+
+      SavedViewUtils.diffFilters(tableMetaData, baseView, activeView, viewDiffs);
+      SavedViewUtils.diffColumns(tableMetaData, baseView, activeView, viewDiffs);
+      SavedViewUtils.diffQuickFilterFieldNames(tableMetaData, baseView, activeView, viewDiffs);
+
+      if (baseView.mode != activeView.mode)
+      {
+         if (baseView.mode)
+         {
+            viewDiffs.push(`Mode changed from ${baseView.mode} to ${activeView.mode}`);
+         }
+         else
+         {
+            viewDiffs.push(`Mode set to ${activeView.mode}`);
+         }
+      }
+
+      if (baseView.rowsPerPage != activeView.rowsPerPage)
+      {
+         if (baseView.rowsPerPage)
+         {
+            viewDiffs.push(`Rows per page changed from ${baseView.rowsPerPage} to ${activeView.rowsPerPage}`);
+         }
+         else
+         {
+            viewDiffs.push(`Rows per page set to ${activeView.rowsPerPage}`);
+         }
+      }
+      return viewDiffs;
+   };
+
+}

src/qqq/utils/qqq/TableUtils.ts

@@ -110,9 +110,34 @@ class TableUtils
          return ([tableMetaData.fields.get(fieldName), tableMetaData]);
       }
 
-      return (null);
+      return [null, null];
    }
 
+
+   /*******************************************************************************
+    ** for a field that might be from a join table, get its label - either the field's
+    ** label, if it's from "this" table - or the table's label: field's label, if it's
+    ** from a join table.
+    *******************************************************************************/
+   public static getFieldFullLabel(tableMetaData: QTableMetaData, fieldName: string): string
+   {
+      try
+      {
+         const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
+         if (fieldTable.name == tableMetaData.name)
+         {
+            return (field.label);
+         }
+         return `${fieldTable.label}: ${field.label}`;
+      }
+      catch (e)
+      {
+         console.log(`Error getting full field label for ${fieldName} in table ${tableMetaData?.name}: ${e}`);
+         return fieldName;
+      }
+   }
+
+
    /*******************************************************************************
     **
     *******************************************************************************/

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QBaseSeleniumTest.java

@@ -177,7 +177,7 @@ public class QBaseSeleniumTest
          .withRouteToFile("/metaData/table/city", "metaData/table/person.json")
          .withRouteToFile("/metaData/table/script", "metaData/table/script.json")
          .withRouteToFile("/metaData/table/scriptRevision", "metaData/table/scriptRevision.json")
-         .withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init.json");
+         .withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init.json");
    }
 
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QQQMaterialDashboardSelectors.java

@@ -28,7 +28,7 @@ package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
 public interface QQQMaterialDashboardSelectors
 {
    String SIDEBAR_ITEM      = ".MuiDrawer-paperAnchorDockedLeft li.MuiListItem-root";
-   String BREADCRUMB_HEADER = ".MuiToolbar-root h3";
+   String BREADCRUMB_HEADER = "h3";
 
    String QUERY_GRID_CELL    = ".MuiDataGrid-root .MuiDataGrid-cellContent";
    String QUERY_FILTER_INPUT = ".customFilterPanel input.MuiInput-input";

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QSeleniumLib.java

@@ -29,6 +29,7 @@ import java.util.Objects;
 import java.util.Set;
 import java.util.concurrent.CompletableFuture;
 import java.util.concurrent.TimeUnit;
+import java.util.function.Function;
 import com.kingsrook.qqq.backend.core.utils.SleepUtils;
 import org.apache.commons.io.FileUtils;
 import org.apache.logging.log4j.LogManager;
@@ -43,7 +44,7 @@ import org.openqa.selenium.WebElement;
 import org.openqa.selenium.interactions.Actions;
 import org.openqa.selenium.support.ui.ExpectedConditions;
 import org.openqa.selenium.support.ui.WebDriverWait;
-import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.assertj.core.api.Assertions.assertThat;
 import static org.junit.jupiter.api.Assertions.fail;
 
 
@@ -63,6 +64,11 @@ public class QSeleniumLib
 
    private boolean autoHighlight = false;
 
+   //////////////////////////////////////////////////////////////////////////////////////
+   // useful to use on a WebElement, in a call like: .findElement(QSeleniumLib.PARENT) //
+   //////////////////////////////////////////////////////////////////////////////////////
+   public static final By PARENT = By.xpath("./..");
+
 
 
    /*******************************************************************************
@@ -196,7 +202,7 @@ public class QSeleniumLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void gotoAndWaitForBreadcrumbHeader(String path, String headerText)
+   public void gotoAndWaitForBreadcrumbHeaderToContain(String path, String expectedHeaderText)
    {
       driver.get(BASE_URL + path);
 
@@ -204,7 +210,7 @@ public class QSeleniumLib
          .until(ExpectedConditions.presenceOfElementLocated(By.cssSelector(QQQMaterialDashboardSelectors.BREADCRUMB_HEADER)));
 
       LOG.debug("Navigated to [" + path + "].  Breadcrumb Header: " + header.getText());
-      assertEquals(headerText, header.getText());
+      assertThat(header.getText()).contains(expectedHeaderText);
    }
 
 
@@ -245,6 +251,18 @@ public class QSeleniumLib
 
 
 
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void moveMouseCursorToElement(WebElement element)
+   {
+      Actions actions = new Actions(driver);
+      actions.moveToElement(element);
+      actions.perform();
+   }
+
+
+
    /*******************************************************************************
     **
     *******************************************************************************/
@@ -487,7 +505,33 @@ public class QSeleniumLib
     *******************************************************************************/
    public WebElement waitForSelectorContaining(String cssSelector, String textContains)
    {
-      LOG.debug("Waiting for element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
+      return (waitForSelectorMatchingPredicate(cssSelector, "containing text [" + textContains + "]", (WebElement element) ->
+      {
+         return (element.getText() != null && element.getText().toLowerCase().contains(textContains.toLowerCase()));
+      }));
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public WebElement waitForSelectorContainingTextMatchingRegex(String cssSelector, String regExp)
+   {
+      return (waitForSelectorMatchingPredicate(cssSelector, "matching regexp [" + regExp + "]", (WebElement element) ->
+      {
+         return (element.getText() != null && element.getText().matches(regExp));
+      }));
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private WebElement waitForSelectorMatchingPredicate(String cssSelector, String description, Function<WebElement, Boolean> predicate)
+   {
+      LOG.debug("Waiting for element matching selector [" + cssSelector + "] " + description);
       long start = System.currentTimeMillis();
 
       do
@@ -497,9 +541,9 @@ public class QSeleniumLib
          {
             try
             {
-               if(element.getText() != null && element.getText().toLowerCase().contains(textContains.toLowerCase()))
+               if(predicate.apply(element))
                {
-                  LOG.debug("Found element matching selector [" + cssSelector + "] containing text [" + textContains + "].");
+                  LOG.debug("Found element matching selector [" + cssSelector + "] " + description);
                   Actions actions = new Actions(driver);
                   actions.moveToElement(element);
                   conditionallyAutoHighlight(element);
@@ -520,7 +564,7 @@ public class QSeleniumLib
       }
       while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
 
-      fail("Failed to find element matching selector [" + cssSelector + "] containing text [" + textContains + "] after [" + WAIT_SECONDS + "] seconds.");
+      fail("Failed to find element matching selector [" + cssSelector + "] " + description + " after [" + WAIT_SECONDS + "] seconds.");
       return (null);
    }
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/QueryScreenLib.java

@@ -22,6 +22,9 @@
 package com.kingsrook.qqq.frontend.materialdashboard.selenium.lib;
 
 
+import java.util.List;
+import com.kingsrook.qqq.backend.core.utils.CollectionUtils;
+import com.kingsrook.qqq.backend.core.utils.StringUtils;
 import org.openqa.selenium.By;
 import org.openqa.selenium.Keys;
 import org.openqa.selenium.WebElement;
@@ -52,7 +55,40 @@ public class QueryScreenLib
     *******************************************************************************/
    public WebElement assertFilterButtonBadge(int valueInBadge)
    {
-      return qSeleniumLib.waitForSelectorContaining(".MuiBadge-root", String.valueOf(valueInBadge));
+      return qSeleniumLib.waitForSelectorContaining(".filterBuilderCountBadge", String.valueOf(valueInBadge));
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void clickAdvancedFilterClearIcon()
+   {
+      qSeleniumLib.moveMouseCursorToElement(qSeleniumLib.waitForSelector(".filterBuilderButton"));
+      qSeleniumLib.waitForSelector(".filterBuilderXIcon BUTTON").click();
+      qSeleniumLib.waitForSelectorContaining("BUTTON", "Yes").click();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void clickQuickFilterClearIcon(String fieldName)
+   {
+      qSeleniumLib.moveMouseCursorToElement(qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName));
+      qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName + "+span button").click();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void assertNoFilterButtonBadge(int valueInBadge)
+   {
+      qSeleniumLib.waitForSelectorContainingToNotExist(".filterBuilderCountBadge", String.valueOf(valueInBadge));
    }
 
 
@@ -70,7 +106,7 @@ public class QueryScreenLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void clickFilterButton()
+   public void clickFilterBuilderButton()
    {
       qSeleniumLib.waitForSelectorContaining("BUTTON", "FILTER BUILDER").click();
    }
@@ -80,9 +116,19 @@ public class QueryScreenLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public WebElement assertQuickFilterButtonBadge(String fieldName)
+   public WebElement assertQuickFilterButtonIndicatesActiveFilter(String fieldName)
    {
-      return qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName + " .MuiBadge-root");
+      return qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName + ".filterActive");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void assertQuickFilterButtonDoesNotIndicateActiveFilter(String fieldName)
+   {
+      qSeleniumLib.waitForSelectorToNotExist("#quickFilter\\." + fieldName + ".filterActive");
    }
 
 
@@ -92,7 +138,6 @@ public class QueryScreenLib
     *******************************************************************************/
    public void clickQuickFilterButton(String fieldName)
    {
-      // qSeleniumLib.waitForSelectorContaining(".MuiDataGrid-toolbarContainer BUTTON", "Filter").click();
       qSeleniumLib.waitForSelector("#quickFilter\\." + fieldName).click();
    }
 
@@ -123,7 +168,27 @@ public class QueryScreenLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void addQueryFilterInput(QSeleniumLib qSeleniumLib, int index, String fieldLabel, String operator, String value, String booleanOperator)
+   public void assertSavedViewNameOnScreen(String savedViewName)
+   {
+      qSeleniumLib.waitForSelectorContaining("H3", savedViewName);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public WebElement waitForDataGridCellContaining(String containingText)
+   {
+      return qSeleniumLib.waitForSelectorContaining("DIV.MuiDataGrid-cell", containingText);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void addAdvancedQueryFilterInput(int index, String fieldLabel, String operator, String value, String booleanOperator)
    {
       if(index > 0)
       {
@@ -160,10 +225,91 @@ public class QueryScreenLib
       operatorInput.sendKeys("\n");
       qSeleniumLib.waitForMillis(100);
 
-      WebElement valueInput = subFormForField.findElement(By.cssSelector(".filterValuesColumn INPUT"));
-      valueInput.click();
-      valueInput.sendKeys(value);
-      qSeleniumLib.waitForMillis(100);
+      if(StringUtils.hasContent(value))
+      {
+         WebElement valueInput = subFormForField.findElement(By.cssSelector(".filterValuesColumn INPUT"));
+         valueInput.click();
+         valueInput.sendKeys(value);
+         qSeleniumLib.waitForMillis(100);
+      }
    }
 
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void addBasicFilter(String fieldLabel)
+   {
+      qSeleniumLib.waitForSelectorContaining("BUTTON", "Add Filter").click();
+      qSeleniumLib.waitForSelectorContaining(".fieldListMenuBody-addQuickFilter LI", fieldLabel).click();
+      qSeleniumLib.clickBackdrop();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void setBasicFilter(String fieldLabel, String operatorLabel, String value)
+   {
+      qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
+      qSeleniumLib.waitForMillis(250);
+      qSeleniumLib.waitForSelector("#criteriaOperator").click();
+      qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
+
+      if(StringUtils.hasContent(value))
+      {
+         qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
+         // todo - no, not in a listbox/LI here...
+         qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
+         System.out.println(value);
+      }
+
+      qSeleniumLib.clickBackdrop();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void setBasicFilterPossibleValues(String fieldLabel, String operatorLabel, List<String> values)
+   {
+      qSeleniumLib.waitForSelectorContaining("BUTTON", fieldLabel).click();
+      qSeleniumLib.waitForMillis(250);
+      qSeleniumLib.waitForSelector("#criteriaOperator").click();
+      qSeleniumLib.waitForSelectorContaining("LI", operatorLabel).click();
+
+      if(CollectionUtils.nullSafeHasContents(values))
+      {
+         qSeleniumLib.waitForSelector(".filterValuesColumn INPUT").click();
+         for(String value : values)
+         {
+            qSeleniumLib.waitForSelectorContaining(".MuiAutocomplete-listbox LI", value).click();
+         }
+      }
+
+      qSeleniumLib.clickBackdrop();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void waitForAdvancedQueryStringMatchingRegex(String regEx)
+   {
+      qSeleniumLib.waitForSelectorContainingTextMatchingRegex(".advancedQueryString", regEx);
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   public void waitForBasicFilterButtonMatchingRegex(String regEx)
+   {
+      qSeleniumLib.waitForSelectorContainingTextMatchingRegex("BUTTON", regEx);
+   }
 }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/lib/javalin/QSeleniumJavalin.java

@@ -27,6 +27,7 @@ import java.util.Collections;
 import java.util.LinkedHashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.stream.Collectors;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
 import io.javalin.Javalin;
 import org.apache.logging.log4j.LogManager;
@@ -284,7 +285,6 @@ public class QSeleniumJavalin
 
       do
       {
-         // LOG.debug("  captured paths: " + captured.stream().map(CapturedContext::getPath).collect(Collectors.joining(",")));
          for(CapturedContext context : captured)
          {
             if(context.getPath().equals(path))
@@ -301,6 +301,7 @@ public class QSeleniumJavalin
       }
       while(start + (1000 * WAIT_SECONDS) > System.currentTimeMillis());
 
+      LOG.debug("  captured paths: \n   " + captured.stream().map(cc -> cc.getPath() + "[" + cc.getBody() + "]").collect(Collectors.joining("\n   ")));
       fail("Failed to capture a request for path [" + path + "] with body containing [" + bodyContaining + "] after [" + WAIT_SECONDS + "] seconds.");
       return (null);
    }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/AppPageNavTest.java

@@ -57,7 +57,7 @@ public class AppPageNavTest extends QBaseSeleniumTest
    @Test
    void testHomeToAppPageViaLeftNav()
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/", "Greetings App");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/", "Greetings App");
       qSeleniumLib.waitForSelectorContaining(QQQMaterialDashboardSelectors.SIDEBAR_ITEM, "People App").click();
       qSeleniumLib.waitForSelectorContaining(QQQMaterialDashboardSelectors.SIDEBAR_ITEM, "Greetings App").click();
    }
@@ -70,7 +70,7 @@ public class AppPageNavTest extends QBaseSeleniumTest
    @Test
    void testAppPageToTablePage()
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp", "Greetings App");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp", "Greetings App");
       qSeleniumLib.tryMultiple(3, () -> qSeleniumLib.waitForSelectorContaining("a", "Person").click());
       qSeleniumLib.waitForSelectorContaining(QQQMaterialDashboardSelectors.BREADCRUMB_HEADER, "Person");
    }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/AssociatedRecordScriptTest.java

@@ -53,7 +53,7 @@ public class AssociatedRecordScriptTest extends QBaseSeleniumTest
    @Test
    void testNavigatingBackAndForth()
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person/1", "John Doe");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person/1", "John Doe");
       qSeleniumLib.waitForSelectorContaining("BUTTON", "actions").click();
       
       qSeleniumLib.waitForSelectorContaining("LI", "Developer Mode").click();

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/AuditTest.java

@@ -63,7 +63,7 @@ public class AuditTest extends QBaseSeleniumTest
       qSeleniumJavalin.withRouteToFile("/data/audit/query", "data/audit/query-empty.json");
       qSeleniumJavalin.restart();
 
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person/1701", "John Doe");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person/1701", "John Doe");
 
       qSeleniumLib.waitForSelectorContaining("BUTTON", "Actions").click();
       qSeleniumLib.waitForSelectorContaining("LI", "Audit").click();
@@ -90,7 +90,7 @@ public class AuditTest extends QBaseSeleniumTest
       qSeleniumJavalin.withRouteToFile(auditQueryPath, "data/audit/query.json");
       qSeleniumJavalin.restart();
 
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person/1701", "John Doe");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person/1701", "John Doe");
 
       qSeleniumLib.waitForSelectorContaining("BUTTON", "Actions").click();
       qSeleniumLib.waitForSelectorContaining("LI", "Audit").click();
@@ -121,7 +121,7 @@ public class AuditTest extends QBaseSeleniumTest
       qSeleniumJavalin.withRouteToFile(auditQueryPath, "data/audit/query.json");
       qSeleniumJavalin.restart();
 
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person/1701", "John Doe");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person/1701", "John Doe");
 
       qSeleniumLib.waitForSelectorContaining("BUTTON", "Actions").click();
       qSeleniumLib.waitForSelectorContaining("LI", "Audit").click();

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/BulkEditTest.java

@@ -71,7 +71,7 @@ public class BulkEditTest extends QBaseSeleniumTest
    // @RepeatedTest(100)
    void test()
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person", "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
       qSeleniumLib.waitForSelectorContaining("button", "selection").click();
       qSeleniumLib.waitForSelectorContaining("li", "This page").click();
       qSeleniumLib.waitForSelectorContaining("div", "records on this page are selected");

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/ClickLinkOnRecordThenEditShortcutTest.java

@@ -55,7 +55,7 @@ public class ClickLinkOnRecordThenEditShortcutTest extends QBaseSeleniumTest
    @Test
    void testClickLinkOnRecordThenEditShortcutTest()
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/developer/script/1", "Hello, Script");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/developer/script/1", "Hello, Script");
       qSeleniumLib.waitForSelectorContaining("A", "100").click();
 
       qSeleniumLib.waitForSelectorContaining("BUTTON", "actions").sendKeys("e");

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java

@@ -26,6 +26,7 @@ import java.io.File;
 import java.io.IOException;
 import java.nio.charset.StandardCharsets;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QSeleniumLib;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
 import org.apache.commons.io.FileUtils;
 import org.junit.jupiter.api.Test;
@@ -76,7 +77,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
    @Test
    void testDashboardTableWidgetExport() throws IOException
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/", "Greetings App");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/", "Greetings App");
 
       ////////////////////////////////////////////////////////////////////////
       // assert that the table widget rendered its header and some contents //
@@ -89,7 +90,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest
       // click the export button //
       /////////////////////////////
       qSeleniumLib.waitForSelector("#SampleTableWidget h6")
-         .findElement(By.xpath("./.."))
+         .findElement(QSeleniumLib.PARENT)
          .findElement(By.cssSelector("button"))
          .click();
 

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/QueryScreenTest.java

@@ -1,143 +0,0 @@
-/*
- * QQQ - Low-code Application Framework for Engineers.
- * Copyright (C) 2021-2024.  Kingsrook, LLC
- * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
- * contact@kingsrook.com
- * https://github.com/Kingsrook/
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
-
-
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QQQMaterialDashboardSelectors;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.CapturedContext;
-import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
-import org.junit.jupiter.api.Test;
-import static org.assertj.core.api.Assertions.assertThat;
-
-
-/*******************************************************************************
- ** Test for the record query screen
- *******************************************************************************/
-public class QueryScreenTest extends QBaseSeleniumTest
-{
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Override
-   protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
-   {
-      super.addJavalinRoutes(qSeleniumJavalin);
-      qSeleniumJavalin
-         .withRouteToFile("/data/person/count", "data/person/count.json")
-         .withRouteToFile("/data/person/query", "data/person/index.json")
-         .withRouteToFile("/data/person/variants", "data/person/variants.json")
-         .withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init.json");
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testBuildQueryQueryAndClearFilters()
-   {
-      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
-
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person", "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.gotoAdvancedMode();
-      queryScreenLib.clickFilterButton();
-
-      /////////////////////////////////////////////////////////////////////
-      // open the filter window, enter a value, wait for query to re-run //
-      /////////////////////////////////////////////////////////////////////
-      qSeleniumJavalin.beginCapture();
-      queryScreenLib.addQueryFilterInput(qSeleniumLib, 0, "Id", "equals", "1", null);
-
-      ///////////////////////////////////////////////////////////////////
-      // assert that query & count both have the expected filter value //
-      ///////////////////////////////////////////////////////////////////
-      String idEquals1FilterSubstring = """
-         {"fieldName":"id","operator":"EQUALS","values":["1"]}""";
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/count", idEquals1FilterSubstring);
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", idEquals1FilterSubstring);
-      qSeleniumJavalin.endCapture();
-
-      ///////////////////////////////////////
-      // click away from the filter window //
-      ///////////////////////////////////////
-      qSeleniumLib.waitForSeconds(1); // todo grr.
-      qSeleniumLib.waitForSelector(QQQMaterialDashboardSelectors.BREADCRUMB_HEADER).click();
-      qSeleniumLib.waitForSelectorContaining(".MuiBadge-root", "1");
-
-      ///////////////////////////////////////////////////////////////////
-      // click the 'x' clear icon, then yes, then expect another query //
-      ///////////////////////////////////////////////////////////////////
-      qSeleniumJavalin.beginCapture();
-      qSeleniumLib.tryMultiple(3, () -> qSeleniumLib.waitForSelector("#clearFiltersButton").click());
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "Yes").click();
-
-      ////////////////////////////////////////////////////////////////////
-      // assert that query & count both no longer have the filter value //
-      ////////////////////////////////////////////////////////////////////
-      CapturedContext capturedCount = qSeleniumJavalin.waitForCapturedPath("/data/person/count");
-      CapturedContext capturedQuery = qSeleniumJavalin.waitForCapturedPath("/data/person/query");
-      assertThat(capturedCount).extracting("body").asString().doesNotContain(idEquals1FilterSubstring);
-      assertThat(capturedQuery).extracting("body").asString().doesNotContain(idEquals1FilterSubstring);
-      qSeleniumJavalin.endCapture();
-   }
-
-
-
-   /*******************************************************************************
-    **
-    *******************************************************************************/
-   @Test
-   void testMultiCriteriaQueryWithOr()
-   {
-      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
-
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person", "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.gotoAdvancedMode();
-      queryScreenLib.clickFilterButton();
-
-      qSeleniumJavalin.beginCapture();
-      queryScreenLib.addQueryFilterInput(qSeleniumLib, 0, "First Name", "contains", "Dar", "Or");
-      queryScreenLib.addQueryFilterInput(qSeleniumLib, 1, "First Name", "contains", "Jam", "Or");
-
-      String expectedFilterContents0 = """
-         {"fieldName":"firstName","operator":"CONTAINS","values":["Dar"]}""";
-      String expectedFilterContents1 = """
-         {"fieldName":"firstName","operator":"CONTAINS","values":["Jam"]}""";
-      String expectedFilterContents2 = """
-         "booleanOperator":"OR\"""";
-
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents0);
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents1);
-      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents2);
-      qSeleniumJavalin.endCapture();
-   }
-
-
-   // todo - table requires variant - prompt for it, choose it, see query; change variant, change on-screen, re-query
-
-}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/ScriptTableTest.java

@@ -59,7 +59,7 @@ public class ScriptTableTest extends QBaseSeleniumTest
    @Test
    void test()
    {
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/developer/script/1", "Hello, Script");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/developer/script/1", "Hello, Script");
 
       qSeleniumLib.waitForSelectorContaining("DIV.ace_line", "var hello;");
       qSeleniumLib.waitForSelectorContaining("DIV", "2nd commit");

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenFilterInUrlAdvancedModeTest.java

@@ -19,7 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests.query;
 
 
 import java.net.URLEncoder;
@@ -55,7 +55,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
          .withRouteToFile("/data/person/query", "data/person/index.json")
          .withRouteToFile("/data/person/possibleValues/homeCityId", "data/person/possibleValues/homeCityId.json")
          .withRouteToFile("/data/person/variants", "data/person/variants.json")
-         .withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init.json");
+         .withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init.json");
    }
 
 
@@ -71,7 +71,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       ////////////////////////////////
       // put table in advanced mode //
       ////////////////////////////////
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person", "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
       queryScreenLib.gotoAdvancedMode();
 
       ////////////////////////////////////////
@@ -79,10 +79,10 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       ////////////////////////////////////////
       String filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("annualSalary", QCriteriaOperator.IS_NOT_BLANK)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
       qSeleniumLib.waitForSelector("input[value=\"is not empty\"]");
 
       ///////////////////////////////
@@ -90,35 +90,33 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       ///////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("annualSalary", QCriteriaOperator.BETWEEN, 1701, 74656)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
       qSeleniumLib.waitForSelector("input[value=\"is between\"]");
       qSeleniumLib.waitForSelector("input[value=\"1701\"]");
       qSeleniumLib.waitForSelector("input[value=\"74656\"]");
 
-      //////////////////////////////////////////
-      // not-equals on a possible-value field //
-      //////////////////////////////////////////
-      filterJSON = JsonUtils.toJson(new QQueryFilter()
-         .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.NOT_EQUALS, 1)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
-      queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterButton();
-      qSeleniumLib.waitForSelector("input[value=\"does not equal\"]");
-      qSeleniumLib.waitForSelector("input[value=\"St. Louis\"]");
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      // click the x to remove a condition from the filter (in the on-screen preview)                                           //
+      // reload the page first, so filter-panel won't be up (clicking backdrop doesn't seem to be closing it like it should...) //
+      ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.highlightElement(qSeleniumLib.waitForSelectorContaining(".advancedQueryString DIV DIV", "1701"));
+      qSeleniumLib.moveMouseCursorToElement(qSeleniumLib.waitForSelectorContaining(".advancedQueryString DIV DIV", "1701"));
+      qSeleniumLib.waitForSelector(".advancedQueryPreviewX-0 button").click();
+      queryScreenLib.assertNoFilterButtonBadge(1);
 
       //////////////////////////////////////
       // an IN for a possible-value field //
       //////////////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.IN, 1, 2)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
       qSeleniumLib.waitForSelector("input[value=\"is any of\"]");
       qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "St. Louis");
       qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "Chesterfield");
@@ -128,10 +126,10 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       /////////////////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("createDate", QCriteriaOperator.GREATER_THAN, NowWithOffset.minus(5, ChronoUnit.DAYS))));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(1);
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
       qSeleniumLib.waitForSelector("input[value=\"is after\"]");
       qSeleniumLib.waitForSelector("input[value=\"5 days ago\"]");
 
@@ -141,20 +139,41 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("firstName", QCriteriaOperator.STARTS_WITH, "Dar"))
          .withCriteria(new QFilterCriteria("createDate", QCriteriaOperator.LESS_THAN_OR_EQUALS, ThisOrLastPeriod.this_(ChronoUnit.YEARS))));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.assertFilterButtonBadge(2);
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
       qSeleniumLib.waitForSelector("input[value=\"is at or before\"]");
       qSeleniumLib.waitForSelector("input[value=\"start of this year\"]");
       qSeleniumLib.waitForSelector("input[value=\"starts with\"]");
       qSeleniumLib.waitForSelector("input[value=\"Dar\"]");
 
+      /////////////////////////////////////////////////
+      // replace the homeCityId possible-value route //
+      /////////////////////////////////////////////////
+      qSeleniumJavalin.stop();
+      qSeleniumJavalin.clearRoutes();
+      addJavalinRoutes(qSeleniumJavalin);
+      qSeleniumJavalin.withRouteToFile("/data/person/possibleValues/homeCityId", "data/person/possibleValues/homeCityId=1.json");
+      qSeleniumJavalin.restart();
+
+      //////////////////////////////////////////
+      // not-equals on a possible-value field //
+      //////////////////////////////////////////
+      filterJSON = JsonUtils.toJson(new QQueryFilter()
+         .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.NOT_EQUALS, 1)));
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      queryScreenLib.waitForQueryToHaveRan();
+      queryScreenLib.assertFilterButtonBadge(1);
+      queryScreenLib.clickFilterBuilderButton();
+      qSeleniumLib.waitForSelector("input[value=\"does not equal\"]");
+      qSeleniumLib.waitForSelector("input[value=\"St. Louis\"]");
+
       ////////////////
       // remove one //
       ////////////////
-      qSeleniumLib.waitForSelectorContaining(".MuiIcon-root", "close").click();
-      queryScreenLib.assertFilterButtonBadge(1);
+      queryScreenLib.clickAdvancedFilterClearIcon();
+      queryScreenLib.assertNoFilterButtonBadge(1);
 
       // qSeleniumLib.waitForever();
    }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenFilterInUrlBasicModeTest.java

@@ -19,7 +19,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests.query;
 
 
 import java.net.URLEncoder;
@@ -55,7 +55,7 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
          .withRouteToFile("/data/person/query", "data/person/index.json")
          .withRouteToFile("/data/person/possibleValues/homeCityId", "data/person/possibleValues/homeCityId.json")
          .withRouteToFile("/data/person/variants", "data/person/variants.json")
-         .withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init.json");
+         .withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init.json");
    }
 
 
@@ -73,9 +73,9 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       ////////////////////////////////////////
       String filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("annualSalary", QCriteriaOperator.IS_NOT_BLANK)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("annualSalary");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("annualSalary");
       queryScreenLib.clickQuickFilterButton("annualSalary");
       qSeleniumLib.waitForSelector("input[value=\"is not empty\"]");
 
@@ -84,9 +84,9 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       ///////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("annualSalary", QCriteriaOperator.BETWEEN, 1701, 74656)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("annualSalary");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("annualSalary");
       queryScreenLib.clickQuickFilterButton("annualSalary");
       qSeleniumLib.waitForSelector("input[value=\"is between\"]");
       qSeleniumLib.waitForSelector("input[value=\"1701\"]");
@@ -97,9 +97,9 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       //////////////////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.NOT_EQUALS, 1)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("homeCityId");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("homeCityId");
       queryScreenLib.clickQuickFilterButton("homeCityId");
       qSeleniumLib.waitForSelector("input[value=\"does not equal\"]");
       qSeleniumLib.waitForSelector("input[value=\"St. Louis\"]");
@@ -109,9 +109,9 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       //////////////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("homeCityId", QCriteriaOperator.IN, 1, 2)));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("homeCityId");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("homeCityId");
       queryScreenLib.clickQuickFilterButton("homeCityId");
       qSeleniumLib.waitForSelector("input[value=\"is any of\"]");
       qSeleniumLib.waitForSelectorContaining(".MuiChip-label", "St. Louis");
@@ -122,9 +122,9 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       /////////////////////////////////////////
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("createDate", QCriteriaOperator.GREATER_THAN, NowWithOffset.minus(5, ChronoUnit.DAYS))));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("createDate");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("createDate");
       queryScreenLib.clickQuickFilterButton("createDate");
       qSeleniumLib.waitForSelector("input[value=\"is after\"]");
       qSeleniumLib.waitForSelector("input[value=\"5 days ago\"]");
@@ -135,10 +135,10 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       filterJSON = JsonUtils.toJson(new QQueryFilter()
          .withCriteria(new QFilterCriteria("firstName", QCriteriaOperator.STARTS_WITH, "Dar"))
          .withCriteria(new QFilterCriteria("createDate", QCriteriaOperator.LESS_THAN_OR_EQUALS, ThisOrLastPeriod.this_(ChronoUnit.YEARS))));
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filterJSON, StandardCharsets.UTF_8), "Person");
       queryScreenLib.waitForQueryToHaveRan();
-      queryScreenLib.assertQuickFilterButtonBadge("firstName");
-      queryScreenLib.assertQuickFilterButtonBadge("createDate");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("firstName");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("createDate");
       queryScreenLib.clickQuickFilterButton("createDate");
       qSeleniumLib.waitForSelector("input[value=\"is at or before\"]");
       qSeleniumLib.waitForSelector("input[value=\"start of this year\"]");
@@ -147,11 +147,15 @@ public class QueryScreenFilterInUrlBasicModeTest extends QBaseSeleniumTest
       qSeleniumLib.waitForSelector("input[value=\"starts with\"]");
       qSeleniumLib.waitForSelector("input[value=\"Dar\"]");
 
-      ////////////////
-      // remove one //
-      ////////////////
-      // todo! qSeleniumLib.waitForSelectorContaining(".MuiIcon-root", "close").click();
-      // todo! assertQuickFilterButtonBadge(1);
+      ////////////////////////////////
+      // remove one, then the other //
+      ////////////////////////////////
+      qSeleniumLib.clickBackdrop();
+      queryScreenLib.clickQuickFilterClearIcon("createDate");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("firstName");
+      queryScreenLib.assertQuickFilterButtonDoesNotIndicateActiveFilter("createDate");
+      queryScreenLib.clickQuickFilterClearIcon("firstName");
+      queryScreenLib.assertQuickFilterButtonDoesNotIndicateActiveFilter("firstName");
 
       // qSeleniumLib.waitForever();
    }

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/QueryScreenTest.java

@@ -0,0 +1,276 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests.query;
+
+
+import java.util.List;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QQQMaterialDashboardSelectors;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.CapturedContext;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
+import org.junit.jupiter.api.Test;
+import static org.assertj.core.api.Assertions.assertThat;
+
+
+/*******************************************************************************
+ ** Test for the record query screen
+ *******************************************************************************/
+public class QueryScreenTest extends QBaseSeleniumTest
+{
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Override
+   protected void addJavalinRoutes(QSeleniumJavalin qSeleniumJavalin)
+   {
+      super.addJavalinRoutes(qSeleniumJavalin);
+      qSeleniumJavalin
+         .withRouteToFile("/data/person/count", "data/person/count.json")
+         .withRouteToFile("/data/person/query", "data/person/index.json")
+         .withRouteToFile("/data/person/variants", "data/person/variants.json")
+         .withRouteToFile("/data/person/possibleValues/homeCityId", "data/person/possibleValues/homeCityId.json")
+         .withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init.json");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testBuildQueryQueryAndClearFilters()
+   {
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
+      queryScreenLib.waitForQueryToHaveRan();
+      queryScreenLib.gotoAdvancedMode();
+      queryScreenLib.clickFilterBuilderButton();
+
+      /////////////////////////////////////////////////////////////////////
+      // open the filter window, enter a value, wait for query to re-run //
+      /////////////////////////////////////////////////////////////////////
+      qSeleniumJavalin.beginCapture();
+      queryScreenLib.addAdvancedQueryFilterInput(0, "Id", "equals", "1", null);
+
+      ///////////////////////////////////////////////////////////////////
+      // assert that query & count both have the expected filter value //
+      ///////////////////////////////////////////////////////////////////
+      String idEquals1FilterSubstring = """
+         {"fieldName":"id","operator":"EQUALS","values":["1"]}""";
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/count", idEquals1FilterSubstring);
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", idEquals1FilterSubstring);
+      qSeleniumJavalin.endCapture();
+
+      ///////////////////////////////////////
+      // click away from the filter window //
+      ///////////////////////////////////////
+      qSeleniumLib.waitForSeconds(1); // todo grr.
+      qSeleniumLib.waitForSelector(QQQMaterialDashboardSelectors.BREADCRUMB_HEADER).click();
+      queryScreenLib.assertFilterButtonBadge(1);
+
+      ///////////////////////////////////////////////////////////////////
+      // click the 'x' clear icon, then yes, then expect another query //
+      ///////////////////////////////////////////////////////////////////
+      qSeleniumJavalin.beginCapture();
+      queryScreenLib.clickAdvancedFilterClearIcon();
+
+      ////////////////////////////////////////////////////////////////////
+      // assert that query & count both no longer have the filter value //
+      ////////////////////////////////////////////////////////////////////
+      CapturedContext capturedCount = qSeleniumJavalin.waitForCapturedPath("/data/person/count");
+      CapturedContext capturedQuery = qSeleniumJavalin.waitForCapturedPath("/data/person/query");
+      assertThat(capturedCount).extracting("body").asString().doesNotContain(idEquals1FilterSubstring);
+      assertThat(capturedQuery).extracting("body").asString().doesNotContain(idEquals1FilterSubstring);
+      qSeleniumJavalin.endCapture();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testMultiCriteriaQueryWithOr()
+   {
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
+      queryScreenLib.waitForQueryToHaveRan();
+      queryScreenLib.gotoAdvancedMode();
+      queryScreenLib.clickFilterBuilderButton();
+
+      qSeleniumJavalin.beginCapture();
+      queryScreenLib.addAdvancedQueryFilterInput(0, "First Name", "contains", "Dar", "Or");
+      queryScreenLib.addAdvancedQueryFilterInput(1, "First Name", "contains", "Jam", "Or");
+
+      String expectedFilterContents0 = """
+         {"fieldName":"firstName","operator":"CONTAINS","values":["Dar"]}""";
+      String expectedFilterContents1 = """
+         {"fieldName":"firstName","operator":"CONTAINS","values":["Jam"]}""";
+      String expectedFilterContents2 = """
+         "booleanOperator":"OR\"""";
+
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents0);
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents1);
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectedFilterContents2);
+      qSeleniumJavalin.endCapture();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testBasicBooleanOperators()
+   {
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
+      queryScreenLib.waitForQueryToHaveRan();
+
+      queryScreenLib.addBasicFilter("Is Employed");
+
+      testBasicCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed:.*yes.*", """
+         {"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
+
+      testBasicCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed:.*no.*", """
+         {"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
+
+      testBasicCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed:.*is empty.*", """
+         {"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
+
+      testBasicCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed:.*is not empty.*", """
+         {"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testBasicPossibleValues()
+   {
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
+      queryScreenLib.waitForQueryToHaveRan();
+
+      String field = "Home City";
+      queryScreenLib.addBasicFilter(field);
+
+      testBasicCriteriaPossibleValues(queryScreenLib, field, "is any of", List.of("St. Louis", "Chesterfield"), "(?s).*" + field + ":.*St. Louis.*\\+1.*", """
+         {"fieldName":"homeCityId","operator":"IN","values":[1,2]}""");
+
+      testBasicCriteriaPossibleValues(queryScreenLib, field, "equals", List.of("Chesterfield"), "(?s).*" + field + ":.*Chesterfield.*", """
+         {"fieldName":"homeCityId","operator":"EQUALS","values":[2]}""");
+
+      testBasicCriteriaPossibleValues(queryScreenLib, field, "is empty", null, "(?s).*" + field + ":.*is empty.*", """
+         {"fieldName":"homeCityId","operator":"IS_BLANK","values":[]}""");
+
+      testBasicCriteriaPossibleValues(queryScreenLib, field, "does not equal", List.of("St. Louis"), "(?s).*" + field + ":.*does not equal.*St. Louis.*", """
+         {"fieldName":"homeCityId","operator":"NOT_EQUALS_OR_IS_NULL","values":[1]}""");
+
+      testBasicCriteriaPossibleValues(queryScreenLib, field, "is none of", List.of("Chesterfield"), "(?s).*" + field + ":.*is none of.*St. Louis.*\\+1", """
+         {"fieldName":"homeCityId","operator":"NOT_IN","values":[1,2]}""");
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void testBasicCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectButtonStringRegex, String expectFilterJsonContains)
+   {
+      qSeleniumJavalin.beginCapture();
+      queryScreenLib.setBasicFilter(fieldLabel, operatorLabel, value);
+      queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
+      qSeleniumJavalin.endCapture();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void testBasicCriteriaPossibleValues(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, List<String> values, String expectButtonStringRegex, String expectFilterJsonContains)
+   {
+      qSeleniumJavalin.beginCapture();
+      queryScreenLib.setBasicFilterPossibleValues(fieldLabel, operatorLabel, values);
+      queryScreenLib.waitForBasicFilterButtonMatchingRegex(expectButtonStringRegex);
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
+      qSeleniumJavalin.endCapture();
+   }
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @Test
+   void testAdvancedBooleanOperators()
+   {
+      QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
+
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
+      queryScreenLib.waitForQueryToHaveRan();
+
+      queryScreenLib.gotoAdvancedMode();
+
+      testAdvancedCriteria(queryScreenLib, "Is Employed", "equals yes", null, "(?s).*Is Employed.*equals yes.*", """
+         {"fieldName":"isEmployed","operator":"EQUALS","values":[true]}""");
+
+      testAdvancedCriteria(queryScreenLib, "Is Employed", "equals no", null, "(?s).*Is Employed.*equals no.*", """
+         {"fieldName":"isEmployed","operator":"EQUALS","values":[false]}""");
+
+      testAdvancedCriteria(queryScreenLib, "Is Employed", "is empty", null, "(?s).*Is Employed.*is empty.*", """
+         {"fieldName":"isEmployed","operator":"IS_BLANK","values":[]}""");
+
+      testAdvancedCriteria(queryScreenLib, "Is Employed", "is not empty", null, "(?s).*Is Employed.*is not empty.*", """
+         {"fieldName":"isEmployed","operator":"IS_NOT_BLANK","values":[]}""");
+   }
+
+   // todo - table requires variant - prompt for it, choose it, see query; change variant, change on-screen, re-query
+
+
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   private void testAdvancedCriteria(QueryScreenLib queryScreenLib, String fieldLabel, String operatorLabel, String value, String expectQueryStringRegex, String expectFilterJsonContains)
+   {
+      qSeleniumJavalin.beginCapture();
+      queryScreenLib.clickFilterBuilderButton();
+      queryScreenLib.addAdvancedQueryFilterInput(0, fieldLabel, operatorLabel, value, null);
+      qSeleniumLib.clickBackdrop();
+      queryScreenLib.waitForAdvancedQueryStringMatchingRegex(expectQueryStringRegex);
+      qSeleniumJavalin.waitForCapturedPathWithBodyContaining("/data/person/query", expectFilterJsonContains);
+      qSeleniumJavalin.endCapture();
+      queryScreenLib.clickAdvancedFilterClearIcon();
+   }
+
+}

src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/query/SavedViewsTest.java

@@ -19,19 +19,24 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests;
+package com.kingsrook.qqq.frontend.materialdashboard.selenium.tests.query;
 
 
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QBaseSeleniumTest;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.QueryScreenLib;
+import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.CapturedContext;
 import com.kingsrook.qqq.frontend.materialdashboard.selenium.lib.javalin.QSeleniumJavalin;
 import org.junit.jupiter.api.Test;
+import org.openqa.selenium.WebElement;
+import static org.junit.jupiter.api.Assertions.assertTrue;
 
 
 /*******************************************************************************
- ** Test for Saved Filters functionality on the Query screen.
+ ** Test for Saved View functionality on the Query screen.
  *******************************************************************************/
-public class SavedFiltersTest extends QBaseSeleniumTest
+public class SavedViewsTest extends QBaseSeleniumTest
 {
 
    /*******************************************************************************
@@ -66,10 +71,9 @@ public class SavedFiltersTest extends QBaseSeleniumTest
    {
       QueryScreenLib queryScreenLib = new QueryScreenLib(qSeleniumLib);
 
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person", "Person");
-      queryScreenLib.gotoAdvancedMode();
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
 
-      qSeleniumLib.waitForSelectorContaining("BUTTON", "Saved Filters").click();
+      qSeleniumLib.waitForSelectorContaining("BUTTON", "Views").click();
       qSeleniumLib.waitForSelectorContaining("LI", "Some People");
 
       ////////////////////////////////////////
@@ -78,47 +82,48 @@ public class SavedFiltersTest extends QBaseSeleniumTest
       qSeleniumJavalin.stop();
       qSeleniumJavalin.clearRoutes();
       addStandardRoutesForThisTest(qSeleniumJavalin);
-      qSeleniumJavalin.withRouteToFile("/processes/querySavedFilter/init", "processes/querySavedFilter/init-id=2.json");
+      qSeleniumJavalin.withRouteToFile("/processes/querySavedView/init", "processes/querySavedView/init-id=2.json");
       qSeleniumJavalin.restart();
 
-      ///////////////////////////////////////////////////////
-      // go to a specific filter - assert that it's loaded //
-      ///////////////////////////////////////////////////////
+      /////////////////////////////////////////////////////
+      // go to a specific view - assert that it's loaded //
+      /////////////////////////////////////////////////////
       qSeleniumLib.waitForSelectorContaining("LI", "Some People").click();
-      qSeleniumLib.waitForCondition("Current URL should have filter id", () -> driver.getCurrentUrl().endsWith("/person/savedFilter/2"));
-      qSeleniumLib.waitForSelectorContaining("DIV", "Current Filter: Some People");
+      qSeleniumLib.waitForCondition("Current URL should have view id", () -> driver.getCurrentUrl().endsWith("/person/savedView/2"));
+      queryScreenLib.assertSavedViewNameOnScreen("Some People");
 
       //////////////////////////////
       // click into a view screen //
       //////////////////////////////
       qSeleniumLib.waitForSeconds(1); // wait for the filters menu to fully disappear?  if this doesn't work, try a different word to look for...
-      qSeleniumLib.waitForSelectorContaining("DIV.MuiDataGrid-cell", "jdoe@kingsrook.com").click();
+      queryScreenLib.waitForDataGridCellContaining("jdoe@kingsrook.com").click();
       qSeleniumLib.waitForSelectorContaining("H5", "Viewing Person: John Doe");
 
-      /////////////////////////////////////////////////////
-      // take breadcrumb back to table query             //
-      // assert the previously selected filter is loaded //
-      /////////////////////////////////////////////////////
+      ///////////////////////////////////////////////////
+      // take breadcrumb back to table query           //
+      // assert the previously selected View is loaded //
+      ///////////////////////////////////////////////////
       qSeleniumLib.waitForSelectorContaining("A", "Person").click();
-      qSeleniumLib.waitForCondition("Current URL should have filter id", () -> driver.getCurrentUrl().endsWith("/person/savedFilter/2"));
-      qSeleniumLib.waitForSelectorContaining("DIV", "Current Filter: Some People");
-      qSeleniumLib.waitForSelectorContaining(".MuiBadge-badge", "1");
+      qSeleniumLib.waitForCondition("Current URL should have View id", () -> driver.getCurrentUrl().endsWith("/person/savedView/2"));
+      queryScreenLib.assertSavedViewNameOnScreen("Some People");
+      queryScreenLib.assertQuickFilterButtonIndicatesActiveFilter("firstName");
 
       //////////////////////
       // modify the query //
       //////////////////////
-      /* todo - right now - this is changed - but - working through it with Views story... revisit before merge!
-      queryScreenLib.clickFilterButton();
-      queryScreenLib.addQueryFilterInput(qSeleniumLib, 1, "First Name", "contains", "Jam", "Or");
-      qSeleniumLib.waitForSelectorContaining("H3", "Person").click();
-      qSeleniumLib.waitForSelectorContaining("DIV", "Current Filter: Some People")
-         .findElement(By.cssSelector("CIRCLE"));
-      qSeleniumLib.waitForSelectorContaining(".MuiBadge-badge", "2");
+      queryScreenLib.clickQuickFilterButton("lastName");
+      WebElement valueInput = qSeleniumLib.waitForSelector(".filterValuesColumn INPUT");
+      valueInput.click();
+      valueInput.sendKeys("Kelkhoff");
+      qSeleniumLib.waitForMillis(100);
+
+      qSeleniumLib.clickBackdrop();
+      qSeleniumLib.waitForSelectorContaining("DIV", "Unsaved Changes");
 
       //////////////////////////////
       // click into a view screen //
       //////////////////////////////
-      qSeleniumLib.waitForSelectorContaining("DIV.MuiDataGrid-cell", "jdoe@kingsrook.com").click();
+      queryScreenLib.waitForDataGridCellContaining("jdoe@kingsrook.com").click();
       qSeleniumLib.waitForSelectorContaining("H5", "Viewing Person: John Doe");
 
       ///////////////////////////////////////////////////////////////////////////////
@@ -127,37 +132,26 @@ public class SavedFiltersTest extends QBaseSeleniumTest
       ///////////////////////////////////////////////////////////////////////////////
       qSeleniumJavalin.beginCapture();
       qSeleniumLib.waitForSelectorContaining("A", "Person").click();
-      qSeleniumLib.waitForCondition("Current URL should have filter id", () -> driver.getCurrentUrl().endsWith("/person/savedFilter/2"));
-      qSeleniumLib.waitForSelectorContaining("DIV", "Current Filter: Some People")
-         .findElement(By.cssSelector("CIRCLE"));
-      qSeleniumLib.waitForSelectorContaining(".MuiBadge-badge", "2");
+      qSeleniumLib.waitForCondition("Current URL should have filter id", () -> driver.getCurrentUrl().endsWith("/person/savedView/2"));
+      queryScreenLib.assertSavedViewNameOnScreen("Some People");
+      qSeleniumLib.waitForSelectorContaining("DIV", "Unsaved Changes");
       CapturedContext capturedContext = qSeleniumJavalin.waitForCapturedPath("/data/person/query");
-      assertTrue(capturedContext.getBody().contains("Jam"));
+      assertTrue(capturedContext.getBody().contains("Kelkhoff"));
       qSeleniumJavalin.endCapture();
 
-      ////////////////////////////////////////////////////
-      // navigate to the table with a filter in the URL //
-      ////////////////////////////////////////////////////
+      //////////////////////////////////////////////////
+      // navigate to the table with a View in the URL //
+      //////////////////////////////////////////////////
       String filter = """
-         {
-            "criteria":
-            [
-               {
-                  "fieldName": "id",
-                  "operator": "LESS_THAN",
-                  "values": [10]
-               }
-            ]
-         }
+         {"criteria":[{"fieldName":"id", "operator":"LESS_THAN", "values":[10]}]}
          """.replace('\n', ' ').replaceAll(" ", "");
-      qSeleniumLib.gotoAndWaitForBreadcrumbHeader("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filter, StandardCharsets.UTF_8), "Person");
-      qSeleniumLib.waitForSelectorContaining(".MuiBadge-badge", "1");
-      qSeleniumLib.waitForSelectorContainingToNotExist("DIV", "Current Filter");
+      qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person?filter=" + URLEncoder.encode(filter, StandardCharsets.UTF_8), "Person");
+      qSeleniumLib.waitForSelectorContaining("BUTTON", "Save View As");
 
       //////////////////////////////
       // click into a view screen //
       //////////////////////////////
-      qSeleniumLib.waitForSelectorContaining("DIV.MuiDataGrid-cell", "jdoe@kingsrook.com").click();
+      queryScreenLib.waitForDataGridCellContaining("jdoe@kingsrook.com").click();
       qSeleniumLib.waitForSelectorContaining("H5", "Viewing Person: John Doe");
 
       /////////////////////////////////////////////////////////////////////////////////
@@ -166,12 +160,11 @@ public class SavedFiltersTest extends QBaseSeleniumTest
       /////////////////////////////////////////////////////////////////////////////////
       qSeleniumJavalin.beginCapture();
       qSeleniumLib.waitForSelectorContaining("A", "Person").click();
-      qSeleniumLib.waitForCondition("Current URL should not have filter id", () -> !driver.getCurrentUrl().endsWith("/person/savedFilter/2"));
-      qSeleniumLib.waitForSelectorContaining(".MuiBadge-badge", "1");
+      qSeleniumLib.waitForCondition("Current URL should not have filter id", () -> !driver.getCurrentUrl().endsWith("/person/savedView/2"));
+      qSeleniumLib.waitForSelectorContaining("BUTTON", "Save View As");
       capturedContext = qSeleniumJavalin.waitForCapturedPath("/data/person/query");
       assertTrue(capturedContext.getBody().matches("(?s).*id.*LESS_THAN.*10.*"));
       qSeleniumJavalin.endCapture();
-      */
    }
 
 }

src/test/resources/fixtures/data/person/possibleValues/homeCityId=1.json

@@ -0,0 +1,8 @@
+{
+   "options": [
+      {
+         "id": 1,
+         "label": "St. Louis"
+      }
+   ]
+}

src/test/resources/fixtures/metaData/index.json

@@ -223,21 +223,21 @@
          "label": "Sleep Interactive",
          "isHidden": false
       },
-      "querySavedFilter": {
-         "name": "querySavedFilter",
-         "label": "Query Saved Filter",
+      "querySavedView": {
+         "name": "querySavedView",
+         "label": "Query Saved View",
          "isHidden": false,
          "hasPermission": true
       },
-      "storeSavedFilter": {
-         "name": "storeSavedFilter",
-         "label": "Store Saved Filter",
+      "storeSavedView": {
+         "name": "storeSavedView",
+         "label": "Store Saved View",
          "isHidden": false,
          "hasPermission": true
       },
-      "deleteSavedFilter": {
-         "name": "deleteSavedFilter",
-         "label": "Delete Saved Filter",
+      "deleteSavedView": {
+         "name": "deleteSavedView",
+         "label": "Delete Saved View",
          "isHidden": false,
          "hasPermission": true
       },

src/test/resources/fixtures/processes/querySavedView/init-id=2.json

@@ -1,16 +1,16 @@
 {
    "values": {
       "_qStepTimeoutMillis": "60000",
-      "savedFilterList": [
+      "savedViewList": [
          {
-            "tableName": "savedFilter",
+            "tableName": "savedView",
             "values": {
                "label": "Some People",
                "id": 2,
                "createDate": "2023-02-20T18:40:58Z",
                "modifyDate": "2023-02-20T18:40:58Z",
                "tableName": "person",
-               "filterJson": "{\"criteria\":[{\"fieldName\":\"firstName\",\"operator\":\"STARTS_WITH\",\"values\":[\"D\"]}],\"orderBys\":[{\"fieldName\":\"id\",\"isAscending\":false}],\"booleanOperator\":\"AND\"}",
+               "viewJson": "{\"queryFilter\":{\"criteria\":[{\"fieldName\":\"firstName\",\"operator\":\"STARTS_WITH\",\"values\":[\"D\"]}],\"orderBys\":[{\"fieldName\":\"id\",\"isAscending\":false}],\"booleanOperator\":\"AND\"}}",
                "userId": "darin.kelkhoff@kingsrook.com"
             }
          }

src/test/resources/fixtures/processes/querySavedView/init.json

@@ -1,28 +1,28 @@
 {
    "values": {
       "_qStepTimeoutMillis": "60000",
-      "savedFilterList": [
+      "savedViewList": [
          {
-            "tableName": "savedFilter",
+            "tableName": "savedView",
             "values": {
                "label": "All People",
                "id": 1,
                "createDate": "2023-02-20T18:39:11Z",
                "modifyDate": "2023-02-20T18:39:11Z",
                "tableName": "person",
-               "filterJson": "{\"orderBys\":[{\"fieldName\":\"id\",\"isAscending\":false}],\"booleanOperator\":\"AND\"}",
+               "viewJson": "{\"queryFilter\":{\"orderBys\":[{\"fieldName\":\"id\",\"isAscending\":false}],\"booleanOperator\":\"AND\"}}",
                "userId": "darin.kelkhoff@kingsrook.com"
             }
          },
          {
-            "tableName": "savedFilter",
+            "tableName": "savedView",
             "values": {
                "label": "Some People",
                "id": 2,
                "createDate": "2023-02-20T18:40:58Z",
                "modifyDate": "2023-02-20T18:40:58Z",
                "tableName": "person",
-               "filterJson": "{\"criteria\":[{\"fieldName\":\"firstName\",\"operator\":\"STARTS_WITH\",\"values\":[\"D\"]}],\"orderBys\":[{\"fieldName\":\"id\",\"isAscending\":false}],\"booleanOperator\":\"AND\"}",
+               "viewJson": "{\"queryFilter\":{\"criteria\":[{\"fieldName\":\"firstName\",\"operator\":\"STARTS_WITH\",\"values\":[\"D\"]}],\"orderBys\":[{\"fieldName\":\"id\",\"isAscending\":false}],\"booleanOperator\":\"AND\"}}",
                "userId": "darin.kelkhoff@kingsrook.com"
             }
          }