CE-969: added basic support for 'too complex' subfilters

CE-989 add option to (not) includeTableCountsOn(app)HomeScreen

.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",
+      "@typescript-eslint"
-      "import"
    ],
    "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/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 Builder (Advanced mode only)</Grid>
-                     <Grid item xs={6} className={classes.item}><span className={classes.keyboardKey}>f</span>Open the Filter Panel</Grid>
                   </Grid>
 
                   <Typography variant="h6" pt={3}>Record View</Typography>

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 [auditDetailMap, setAuditDetailMap] = useState(null as Map<number, JSX.Element[]>);
-   const [fieldChangeMap, setFieldChangeMap] = 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
+         const fieldLabel = tableMetaData?.fields?.get(fieldName)?.label ?? fieldName;
-         return (<tr><td>{fieldLabel}</td><td>{oldValue}</td><td>{newValue}</td></tr>)
+         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/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/query/BasicAndAdvancedQueryControls.tsx

@@ -29,7 +29,7 @@ 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 {Badge, ToggleButton, ToggleButtonGroup} from "@mui/material";
+import {ToggleButton} from "@mui/material";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -38,9 +38,9 @@ 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 ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import {GridApiPro} from "@mui/x-data-grid-pro/models/gridApiPro";
-import React, {forwardRef, useContext, 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";
@@ -51,6 +51,7 @@ import QuickFilter, {quickFilterButtonStyles} from "qqq/components/query/QuickFi
 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
 {
@@ -89,14 +90,14 @@ let debounceTimeout: string | number | NodeJS.Timeout;
  *******************************************************************************/
 const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryControlsProps, ref) =>
 {
-   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props
+   const {metaData, tableMetaData, savedViewsComponent, columnMenuComponent, quickFilterFieldNames, setQuickFilterFieldNames, setQueryFilter, queryFilter, gridApiRef, queryFilterJSON, mode, setMode} = props;
 
    /////////////////////
    // state variables //
    /////////////////////
    const [defaultQuickFilterFieldNames, setDefaultQuickFilterFieldNames] = useState(getDefaultQuickFilterFieldNames(tableMetaData));
    const [defaultQuickFilterFieldNameMap, setDefaultQuickFilterFieldNameMap] = useState(Object.fromEntries(defaultQuickFilterFieldNames.map(k => [k, true])));
-   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null)
+   const [addQuickFilterMenu, setAddQuickFilterMenu] = useState(null);
    const [addQuickFilterOpenCounter, setAddQuickFilterOpenCounter] = useState(0);
    const [showClearFiltersWarning, setShowClearFiltersWarning] = useState(false);
    const [mouseOverElement, setMouseOverElement] = useState(null as string);
@@ -122,7 +123,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          {
             return (mode);
          }
-      }
+      };
    });
 
 
@@ -176,7 +177,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;
@@ -185,9 +186,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          }
       }
 
-      if(doClearCriteria)
+      if (doClearCriteria)
       {
-         if(found)
+         if (found)
          {
             queryFilter.criteria.splice(foundIndex, 1);
             setQueryFilter(queryFilter);
@@ -195,9 +196,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          return;
       }
 
-      if(!found)
+      if (!found)
       {
-         if(!queryFilter.criteria)
+         if (!queryFilter.criteria)
          {
             queryFilter.criteria = [];
          }
@@ -205,9 +206,9 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          found = true;
       }
 
-      if(found)
+      if (found)
       {
-         clearTimeout(debounceTimeout)
+         clearTimeout(debounceTimeout);
          debounceTimeout = setTimeout(() =>
          {
             setQueryFilter(queryFilter);
@@ -227,17 +228,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]);
       }
@@ -254,8 +255,8 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const handleRemoveQuickFilterField = (fieldName: string): void =>
    {
-      const index = quickFilterFieldNames.indexOf(fieldName)
+      const index = quickFilterFieldNames.indexOf(fieldName);
-      if(index >= 0)
+      if (index >= 0)
       {
          //////////////////////////////////////
          // remove this field from the query //
@@ -276,7 +277,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       setAddQuickFilterMenu(event.currentTarget);
       setAddQuickFilterOpenCounter(addQuickFilterOpenCounter + 1);
-   }
+   };
 
 
    /*******************************************************************************
@@ -285,7 +286,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const closeAddQuickFilterMenu = () =>
    {
       setAddQuickFilterMenu(null);
-   }
+   };
 
 
    /*******************************************************************************
@@ -306,7 +307,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       const fieldName = newValue ? newValue.fieldName : null;
       if (fieldName)
       {
-         if(defaultQuickFilterFieldNameMap[fieldName])
+         if (defaultQuickFilterFieldNameMap[fieldName])
          {
             return;
          }
@@ -322,12 +323,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
             // 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" && reason != "activatedView")
+            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 //
@@ -346,13 +347,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    const handleFieldListMenuSelection = (field: QFieldMetaData, table: QTableMetaData): void =>
    {
       let fullFieldName = field.name;
-      if(table && table.name != tableMetaData.name)
+      if (table && table.name != tableMetaData.name)
       {
          fullFieldName = `${table.name}.${field.name}`;
       }
 
       addQuickFilterField({fieldName: fullFieldName}, "selectedFromAddFilterMenu");
-   }
+   };
 
 
    /*******************************************************************************
@@ -385,15 +386,16 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       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, isSubFilter: boolean, subFilterOperator: string) =>
    {
-      if(queryFilter == null || !queryFilter.criteria)
+      const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+      if (thisQueryFilter == null || !thisQueryFilter.criteria)
       {
          return (<span></span>);
       }
@@ -402,18 +404,22 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
       return (
          <Box display="flex" flexWrap="wrap" fontSize="0.875rem">
-            {queryFilter.criteria.map((criteria, i) =>
+            {isSubFilter && (`${subFilterOperator} ( `)}
+            {thisQueryFilter.criteria.map((criteria, i) =>
             {
                const {criteriaIsValid} = validateCriteria(criteria, null);
-               if(criteriaIsValid)
+               if (criteriaIsValid)
                {
                   counter++;
 
                   return (
                      <span key={i} style={{marginBottom: "0.125rem"}} onMouseOver={() => handleMouseOverElement(`queryPreview-${i}`)} onMouseOut={() => handleMouseOutElement()}>
-                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{queryFilter.booleanOperator}&nbsp;</span> : <span/>}
+                        {counter > 1 ? <span style={{marginLeft: "0.25rem", marginRight: "0.25rem"}}>{thisQueryFilter.booleanOperator}&nbsp;</span> : <span />}
                         {FilterUtils.criteriaToHumanString(tableMetaData, criteria, true)}
-                        {mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}><XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>}
+                        {canFilterWorkAsAdvanced && (
+                           mouseOverElement == `queryPreview-${i}` && <span className={`advancedQueryPreviewX-${counter - 1}`}>
+                              <XIcon position="forAdvancedQueryPreview" onClick={() => removeCriteriaByIndex(i)} /></span>
+                        )}
                      </span>
                   );
                }
@@ -422,6 +428,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                   return (<span />);
                }
             })}
+
+            {thisQueryFilter.subFilters?.length > 0 && (thisQueryFilter.subFilters.map((filter: QQueryFilter, i) =>
+            {
+               return (queryToAdvancedString(filter, true, thisQueryFilter.booleanOperator));
+            }))}
+            {isSubFilter && (")")}
          </Box>
       );
    };
@@ -434,16 +446,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    {
       if (newValue)
       {
-         if(newValue == "basic")
+         if (newValue == "basic")
          {
             ////////////////////////////////////////////////////////////////////////////////
             // we're always allowed to go to advanced -                                   //
             // but if we're trying to go to basic, make sure the filter isn't too complex //
             ////////////////////////////////////////////////////////////////////////////////
-            const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+            const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = 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;
+            }
+            if (!canFilterWorkAsAdvanced)
+            {
+               console.log("Query cannot work as advanced - so - not allowing toggle to advanced.");
                return;
             }
 
@@ -470,22 +487,29 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const ensureAllFilterCriteriaAreActiveQuickFilters = (tableMetaData: QTableMetaData, queryFilter: QQueryFilter, reason: "modeToggleClicked" | "defaultFilterLoaded" | "savedFilterSelected" | string, newMode?: string) =>
    {
-      if(!tableMetaData || !queryFilter)
+      if (!tableMetaData || !queryFilter)
       {
          return;
       }
 
-      const {canFilterWorkAsBasic} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+      const {canFilterWorkAsBasic, canFilterWorkAsAdvanced} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
-      if (!canFilterWorkAsBasic)
+      if (!canFilterWorkAsBasic && canFilterWorkAsAdvanced)
       {
          console.log("query is too complex for basic - so - switching to advanced");
          modeToggleClicked("advanced");
          forceUpdate();
          return;
       }
+      if (!canFilterWorkAsAdvanced)
+      {
+         console.log("query is too complex for advanced - so disabling buttons");
+         modeToggleClicked("tooComplex");
+         forceUpdate();
+         return;
+      }
 
       const modeToUse = newMode ?? mode;
-      if(modeToUse == "basic")
+      if (modeToUse == "basic")
       {
          for (let i = 0; i < queryFilter?.criteria?.length; i++)
          {
@@ -496,7 +520,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             }
          }
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -508,13 +532,13 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       for (let i = 0; i < queryFilter?.criteria?.length; i++)
       {
          const {criteriaIsValid} = validateCriteria(queryFilter.criteria[i], null);
-         if(criteriaIsValid)
+         if (criteriaIsValid)
          {
             count++;
          }
       }
       return count;
-   }
+   };
 
 
    /*******************************************************************************
@@ -523,11 +547,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    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)]
+      queryFilter.orderBys = [new QFilterOrderBy(fullFieldName, isAscending)];
 
       setQueryFilter(queryFilter);
       forceUpdate();
-   }
+   };
 
 
    /*******************************************************************************
@@ -542,11 +566,11 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       const isAscending = event.target.innerHTML == "arrow_upward";
       const isDescending = event.target.innerHTML == "arrow_downward";
-      if(isAscending || isDescending)
+      if (isAscending || isDescending)
       {
          handleSetSort(field, table, isAscending);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -561,30 +585,30 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          setQueryFilter(queryFilter);
          forceUpdate();
       }
-      catch(e)
+      catch (e)
       {
-         console.log(`Error toggling sort: ${e}`)
+         console.log(`Error toggling sort: ${e}`);
       }
    }
 
    /////////////////////////////////
    // set up the sort menu button //
    /////////////////////////////////
-   let sortButtonContents = <>Sort...</>
+   let sortButtonContents = <>Sort...</>;
-   if(queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
+   if (queryFilter && queryFilter.orderBys && queryFilter.orderBys.length > 0)
    {
       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></>
+      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);
@@ -594,16 +618,25 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
    // set some status flags based on current filter //
    ///////////////////////////////////////////////////
    const hasValidFilters = queryFilter && countValidCriteria(queryFilter) > 0;
-   const {canFilterWorkAsBasic, reasonsWhyItCannot} = FilterUtils.canFilterWorkAsBasic(tableMetaData, queryFilter);
+   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:
          <ul style={{marginLeft: "1rem"}}>
             {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
          </ul>
-      </>
+      </>;
+   }
+   if (!canFilterWorkAsAdvanced && reasonsWhyItCannot && reasonsWhyItCannot.length > 0)
+   {
+      reasonWhyBasicIsDisabled = <>
+         Your current Filter is too complex to modify because:
+         <ul style={{marginLeft: "1rem"}}>
+            {reasonsWhyItCannot.map((reason, i) => <li key={i}>{reason}</li>)}
+         </ul>
+      </>;
    }
 
    const borderGray = colors.grayLines.main;
@@ -646,7 +679,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                      sx={{pl: 0.5, width: "10rem"}}
                   >
                      <ToggleButton value="basic" disabled={!canFilterWorkAsBasic}>Basic</ToggleButton>
-                     <ToggleButton value="advanced">Advanced</ToggleButton>
+                     <ToggleButton value="advanced" disabled={!canFilterWorkAsAdvanced}>Advanced</ToggleButton>
                   </ToggleButtonGroup>
                </Tooltip>
             </Box>
@@ -722,29 +755,29 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                //////////////////////////////////////////////////////////////////////////////////////////////////////////////
                // advanced mode - 2 rows - one for Filter Builder button & sort control, 2nd row for the filter-detail box //
                //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               metaData && tableMetaData && mode == "advanced" &&
+               metaData && tableMetaData && (mode == "advanced" || mode == "tooComplex") &&
                <Box borderRadius="0.75rem" border={`1px solid ${borderGray}`}>
-                  <Box display="flex" justifyContent="space-between" alignItems="center">
+                  {mode == "advanced" && (<Box display="flex" justifyContent="space-between" alignItems="center">
                      <Box p="0.5rem">
                         <Tooltip enterDelay={500} title="Build an advanced Filter" placement="top">
                            <>
                               <Button
                                  className="filterBuilderButton"
                                  onClick={(e) => openFilterBuilder(e)}
-                                 {... filterBuilderMouseEvents}
+                                 {...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">
+                                       <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) }
+                                          {countValidCriteria(queryFilter)}
                                        </Box>
                                  }
                               </Button>
                               {
-                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {... filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
+                                 hasValidFilters && mouseOverElement == "filterBuilderButton" && <span {...filterBuilderMouseEvents} className="filterBuilderXIcon"><XIcon shade="accent" position="default" onClick={() => setShowClearFiltersWarning(true)} /></span>
                               }
                            </>
                         </Tooltip>
@@ -763,6 +796,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                         {sortMenuComponent}
                      </Box>
                   </Box>
+                  )}
                   <Box whiteSpace="nowrap" display="flex" flexShrink={1} flexGrow={1} alignItems="center">
                      {
                         <Box
@@ -777,7 +811,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
                            pb={"0.125rem"}
                            boxShadow={"inset 0px 0px 4px 2px #EFEFED"}
                         >
-                           {queryToAdvancedString()}
+                           {queryToAdvancedString(queryFilter, false, null)}
                         </Box>
                      }
                   </Box>

src/qqq/components/query/FilterCriteriaRow.tsx

@@ -398,7 +398,7 @@ export function FilterCriteriaRow({id, index, tableMetaData, metaData, criteria,
             criteria.values = [];
          }
 
-         if(newValue.valueMode)
+         if(newValue.valueMode && !newValue.implicitValues)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
             if(requiredValueCount != null && criteria.values.length > requiredValueCount)

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/QuickFilter.tsx

@@ -30,7 +30,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import TextField from "@mui/material/TextField";
-import React, {SyntheticEvent, useContext, 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, getValueModeRequiredCount, OperatorOption, validateCriteria} from "qqq/components/query/FilterCriteriaRow";
@@ -148,7 +148,10 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    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));
@@ -158,6 +161,11 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
 
    const {accentColor} = useContext(QContext);
 
+   //////////////////////
+   // ole' faithful... //
+   //////////////////////
+   const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
 
    /*******************************************************************************
     **
@@ -182,15 +190,30 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    //////////////////////////////////////////////////////////////////////////////////////////////////////////////
    if (criteriaParamIsCriteria(criteriaParam) && JSON.stringify(criteriaParam) !== JSON.stringify(criteria))
    {
-      const newCriteria = criteriaParam as QFilterCriteriaWithId;
+      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 =>
    {
@@ -199,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);
          }
       }
@@ -207,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 =>
@@ -241,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);
    };
@@ -271,7 +309,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
             criteria.values = [];
          }
 
-         if(newValue.valueMode)
+         if(newValue.valueMode && !newValue.implicitValues)
          {
             const requiredValueCount = getValueModeRequiredCount(newValue.valueMode);
             if(requiredValueCount != null && criteria.values.length > requiredValueCount)
@@ -286,7 +324,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          setOperatorInputValue("");
       }
 
-      updateCriteria(criteria, false, false);
+      setCriteria(criteria);
+      forceUpdate();
    };
 
    /*******************************************************************************
@@ -320,7 +359,8 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
          criteria.values[valueIndex] = value;
       }
 
-      updateCriteria(criteria, true, false);
+      setCriteria(criteria);
+      forceUpdate();
    };
 
    /*******************************************************************************
@@ -400,16 +440,18 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
       buttonAdditionalStyles.color = "white !important";
       buttonClassName = "filterActive";
 
-      let valuesString = FilterUtils.getValuesString(fieldMetaData, criteria);
+      let valuesString = FilterUtils.getValuesString(fieldMetaData, criteria, 1, "+N");
-      if(fieldMetaData.type == QFieldType.BOOLEAN)
+
+      ///////////////////////////////////////////
+      // don't show the Equals or In operators //
+      ///////////////////////////////////////////
+      let operatorString = (<>{operatorSelectedValue.label}&nbsp;</>);
+      if(operatorSelectedValue.value == QCriteriaOperator.EQUALS || operatorSelectedValue.value == QCriteriaOperator.IN)
       {
-         //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+         operatorString = (<></>)
-         // for booleans, in here, the operator-label is "equals yes" or "equals no", so we don't want the values string //
-         //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-         valuesString = "";
       }
 
-      buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorSelectedValue.label}&nbsp;{valuesString}</span></>);
+      buttonContent = (<><span style={{fontWeight: 700}}>{buttonContent}:</span>&nbsp;<span style={{fontWeight: 400}}>{operatorString}{valuesString}</span></>);
    }
 
    const mouseEvents =
@@ -462,7 +504,7 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
    //////////////////////////////
    // return the button & menu //
    //////////////////////////////
-   const widthAndMaxWidth = 250
+   const widthAndMaxWidth = fieldMetaData?.type == QFieldType.DATE_TIME ? 275 : 250
    return (
       <>
          {button}
@@ -478,7 +520,12 @@ export default function QuickFilter({tableMetaData, fullFieldName, fieldMetaData
                <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}

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 (
+      return (<Typography key={1} variant="body2" py={0} px={0} display="inline" position="relative" top="-0.25rem">
-         <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
+         <Tooltip title="Refresh">
-            <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>
+            <Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}>
-         </Typography>
+               <Icon sx={{color: colors.gray.main, fontSize: 1.125}}>refresh</Icon>
-      );
+            </Button>
+         </Tooltip>
+      </Typography>);
    };
 }
 
@@ -336,16 +350,32 @@ 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)
+   {
+      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];
             }
+            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,36 +576,74 @@ 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>
+               <Box display="flex" flexDirection="column">
+                  <Box display="flex" alignItems="baseline">
                      {
                         hasPermission ?
                            props.widgetMetaData?.icon && (
@@ -600,11 +688,17 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
                         hasPermission && (
                            labelComponentsLeft.map((component, i) =>
                            {
-                           return (<span key={i}>{renderComponent(component, i)}</span>);
+                              return (<React.Fragment key={i}>{renderComponent(component, i)}</React.Fragment>);
                            })
                         )
                      }
-                  {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,7 +39,9 @@ ChartJS.register(
    Legend
 );
 
-export const options = {
+export const makeOptions = (data: DefaultChartData) =>
+{
+   return({
       maintainAspectRatio: false,
       responsive: true,
       animation: {
@@ -50,6 +52,17 @@ export const options = {
             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
@@ -97,7 +110,8 @@ export const options = {
             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 [scriptTypeRecord, setScriptTypeRecord] = useState(null as QRecord);
-   const [scriptTypeFileSchemaList, setScriptTypeFileSchemaList] = 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 rs: { [name: string]: string } = {};
-      let files = selectedVersionRecord?.associatedRecords?.get("files")
+      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 React, {useEffect, useMemo, useState} from "react";
-import {useAsyncDebounce, useGlobalFilter, usePagination, useSortBy, useTable, useExpanded} from "react-table";
+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"}
+            ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"}
-            : {height: fixedHeight ? `${fixedHeight}px` : "360px", overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"};
+            : {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}
 
+         <Box display="flex" justifyContent="space-between" flexDirection="column" height="100%">
             {
                fixedStickyLastRow ? (
                   <>
-                  {getTable(true, page.slice(0, page.length -1), false)}
+                     {getTable(true, page.slice(0, page.length - visibleFooterRows), false)}
-                  {getTable(false, page.slice(page.length-1), true)}
+                     {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 React, {useContext, useEffect, useState} from "react";
-import colors from "qqq/assets/theme/base/colors";
+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(
+      labelAdditionalElementsLeft.push(WidgetUtils.generateExportButton(onExportClick));
-         <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>
+   //////////////////////////////////////////////////////
-      );
+   // 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,7 +75,10 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
                userSelect: sorted && "none",
             })}
          >
-            {children}
+            <>
+               {
+                  tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
+               }
                {sorted && (
                   <Box
                      position="absolute"
@@ -106,6 +111,7 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
                      </Box>
                   </Box>
                )}
+            </>
          </Box>
       </Box>
    );

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)
       {
@@ -120,14 +130,15 @@ function AppHome({app}: Props): JSX.Element
       const tableCountNumbers = new Map<string, string>();
       const tableCountTexts = new Map<string, string>();
       newTables.forEach((table) =>
+      {
+         if(includeTableCountsOnHomeScreen)
          {
             tableCounts.set(table.name, {isLoading: true, value: null});
-
             setTimeout(async () =>
             {
                const tableMetaData = await qController.loadTableMetaData(table.name);
                let countResult = null;
-            if(tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
+               if (tableMetaData.capabilities.has(Capability.TABLE_COUNT) && tableMetaData.readPermission)
                {
                   try
                   {
@@ -144,7 +155,7 @@ function AppHome({app}: Props): JSX.Element
                         tableCountTexts.set(table.name, " ");
                      }
                   }
-               catch(e)
+                  catch (e)
                   {
                      console.log("Caught: " + e);
                      tableCountNumbers.set(table.name, "–");
@@ -163,6 +174,17 @@ function AppHome({app}: Props): JSX.Element
                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);
+         }
       });
       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))}
+                                                                  count={count}
-                                                                  percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
+                                                                  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))}
+                                                               count={count}
-                                                               percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : (tableCountTexts.get(table.name)))}}
+                                                               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/query/RecordQuery.tsx

@@ -44,11 +44,9 @@ import LinearProgress from "@mui/material/LinearProgress";
 import MenuItem from "@mui/material/MenuItem";
 import Modal from "@mui/material/Modal";
 import Tooltip from "@mui/material/Tooltip";
-import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnsMenuItem, GridColumnVisibilityModel, GridDensity, GridEventListener, GridFilterMenuItem, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarColumnsButton, GridToolbarContainer, GridToolbarDensitySelector, GridToolbarExportContainer, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
+import {ColumnHeaderFilterIconButtonProps, DataGridPro, GridCallbackDetails, GridColDef, GridColumnHeaderParams, GridColumnMenuContainer, GridColumnMenuProps, GridColumnOrderChangeParams, GridColumnPinningMenuItems, GridColumnResizeParams, GridColumnVisibilityModel, GridDensity, GridEventListener, GridPinnedColumns, gridPreferencePanelStateSelector, GridPreferencePanelsValue, GridRowId, GridRowParams, GridRowsProp, GridSelectionModel, GridSortItem, GridSortModel, GridState, GridToolbarContainer, GridToolbarDensitySelector, HideGridColMenuItem, MuiEvent, SortGridMenuItems, useGridApiContext, useGridApiEventHandler, useGridApiRef, useGridSelector} from "@mui/x-data-grid-pro";
 import {GridRowModel} from "@mui/x-data-grid/models/gridRows";
 import FormData from "form-data";
-import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
-import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 import QContext from "QContext";
 import colors from "qqq/assets/theme/base/colors";
 import {QCancelButton, QCreateNewButton} from "qqq/components/buttons/DefaultButtons";
@@ -78,6 +76,8 @@ import ProcessUtils from "qqq/utils/qqq/ProcessUtils";
 import {SavedViewUtils} from "qqq/utils/qqq/SavedViewUtils";
 import TableUtils from "qqq/utils/qqq/TableUtils";
 import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {forwardRef, useContext, useEffect, useReducer, useRef, useState} from "react";
+import {useLocation, useNavigate, useSearchParams} from "react-router-dom";
 
 const CURRENT_SAVED_VIEW_ID_LOCAL_STORAGE_KEY_ROOT = "qqq.currentSavedViewId";
 const DENSITY_LOCAL_STORAGE_KEY_ROOT = "qqq.density";
@@ -112,7 +112,7 @@ const getLoadingScreen = () =>
    return (<BaseLayout>
       &nbsp;
    </BaseLayout>);
-}
+};
 
 
 /*******************************************************************************
@@ -139,16 +139,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // manage "state" being passed from some screens (like delete) into query screen - by grabbing, and then deleting //
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   if(location.state)
+   if (location.state)
    {
       let state: any = location.state;
-      if(state["deleteSuccess"])
+      if (state["deleteSuccess"])
       {
          setShowSuccessfullyDeletedAlert(true);
          delete state["deleteSuccess"];
       }
 
-      if(state["warning"])
+      if (state["warning"])
       {
          setWarningAlert(state["warning"]);
          delete state["warning"];
@@ -168,7 +168,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    // define some default values (e.g., to be used if nothing in local storage or no active view) //
    /////////////////////////////////////////////////////////////////////////////////////////////////
    let defaultSort = [] as GridSortItem[];
-   let defaultRowsPerPage = 10;
+   let defaultRowsPerPage = 50;
    let defaultDensity = "standard" as GridDensity;
    let defaultTableVariant: QTableVariant = null;
    let defaultMode = "basic";
@@ -181,7 +181,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const densityLocalStorageKey = `${DENSITY_LOCAL_STORAGE_KEY_ROOT}`;
 
    // only load things out of local storage on the first render
-   if(firstRender)
+   if (firstRender)
    {
       console.log("This is firstRender, so reading defaults from local storage...");
       if (localStorage.getItem(densityLocalStorageKey))
@@ -200,7 +200,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setFirstRender(false);
    }
 
-   if(defaultView == null)
+   if (defaultView == null)
    {
       defaultView = new RecordQueryView();
       defaultView.queryFilter = new QQueryFilter();
@@ -214,15 +214,15 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////////////////////////////
    // in case the view is missing any of these attributes, give them a reasonable default //
    /////////////////////////////////////////////////////////////////////////////////////////
-   if(!defaultView.rowsPerPage)
+   if (!defaultView.rowsPerPage)
    {
       defaultView.rowsPerPage = defaultRowsPerPage;
    }
-   if(!defaultView.mode)
+   if (!defaultView.mode)
    {
       defaultView.mode = defaultMode;
    }
-   if(!defaultView.quickFilterFieldNames)
+   if (!defaultView.quickFilterFieldNames)
    {
       defaultView.quickFilterFieldNames = [];
    }
@@ -246,7 +246,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // state of the page - e.g., have we loaded meta data?  what about the initial view?  or are we ready to render records. //
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-   const [pageState, setPageState] = useState("initial" as PageState)
+   const [pageState, setPageState] = useState("initial" as PageState);
 
    /////////////////////////////////
    // meta-data and derived state //
@@ -260,8 +260,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////
    // state of the view of the query screen //
    ///////////////////////////////////////////
-   const [view, setView] = useState(defaultView)
+   const [view, setView] = useState(defaultView);
-   const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView))
+   const [viewAsJson, setViewAsJson] = useState(JSON.stringify(defaultView));
    const [queryFilter, setQueryFilter] = useState(defaultView.queryFilter);
    const [queryColumns, setQueryColumns] = useState(defaultView.queryColumns);
    const [lastFetchedQFilterJSON, setLastFetchedQFilterJSON] = useState("");
@@ -309,7 +309,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////
    const [columnStatsFieldName, setColumnStatsFieldName] = useState(null as string);
    const [columnStatsField, setColumnStatsField] = useState(null as QFieldMetaData);
-   const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string)
+   const [columnStatsFieldTableName, setColumnStatsFieldTableName] = useState(null as string);
    const [filterForColumnStats, setFilterForColumnStats] = useState(null as QQueryFilter);
 
    ///////////////////////////////////////////////////
@@ -353,14 +353,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////////////////////////////////////
    // add a LoadingState object, in case the initial loads (of meta data and view) are slow //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   const [pageLoadingState, _] = useState(new LoadingState(forceUpdate))
+   const [pageLoadingState, _] = useState(new LoadingState(forceUpdate));
 
-   if(isFirstRenderAfterChangingTables)
+   if (isFirstRenderAfterChangingTables)
    {
       setIsFirstRenderAfterChangingTables(false);
 
       console.log("This is the first render after changing tables - so - setting state based on 'defaults' from localStorage");
-      setView(defaultView)
+      setView(defaultView);
    }
 
    /*******************************************************************************
@@ -386,7 +386,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          const criteria = queryFilter.criteria[i];
          const {criteriaIsValid} = validateCriteria(criteria, null);
          const fieldName = criteria.fieldName;
-         if(criteriaIsValid && fieldName && fieldName.indexOf(".") > -1)
+         if (criteriaIsValid && fieldName && fieldName.indexOf(".") > -1)
          {
             visibleJoinTables.add(fieldName.split(".")[0]);
          }
@@ -407,7 +407,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             const join = tableMetaData.exposedJoins[i];
             if (visibleJoinTables.has(join.joinTable.name))
             {
-               if(join.isMany)
+               if (join.isMany)
                {
                   return (true);
                }
@@ -415,7 +415,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          }
       }
       return (false);
-   }
+   };
 
 
    /*******************************************************************************
@@ -423,7 +423,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const prepQueryFilterForBackend = (sourceFilter: QQueryFilter) =>
    {
-      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.booleanOperator);
+      const filterForBackend = new QQueryFilter([], sourceFilter.orderBys, sourceFilter.subFilters, sourceFilter.booleanOperator);
       for (let i = 0; i < sourceFilter?.criteria?.length; i++)
       {
          const criteria = sourceFilter.criteria[i];
@@ -442,7 +442,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
                // else push a clone of the criteria - since it may get manipulated below (convertFilterPossibleValuesToIds) //
                ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-               const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName)
+               const [field] = FilterUtils.getField(tableMetaData, criteria.fieldName);
                filterForBackend.criteria.push(new QFilterCriteria(criteria.fieldName, criteria.operator, FilterUtils.cleanseCriteriaValueForQQQ(criteria.values, field)));
             }
          }
@@ -451,7 +451,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       filterForBackend.limit = rowsPerPage;
 
       return filterForBackend;
-   }
+   };
 
 
    /*******************************************************************************
@@ -475,7 +475,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////
    // build the export menu, for the header //
    ///////////////////////////////////////////
-   let exportMenu = <></>
+   let exportMenu = <></>;
    try
    {
       const exportMenuItemRestProps =
@@ -485,7 +485,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             columnsModel: columnsModel,
             columnVisibilityModel: columnVisibilityModel,
             queryFilter: prepQueryFilterForBackend(queryFilter)
-         }
+         };
 
       exportMenu = (<>
          <IconButton sx={{p: 0, fontSize: "0.75rem", mb: 1, color: colors.secondary.main, fontVariationSettings: "'wght' 100"}} onClick={openExportMenu}><Icon fontSize="small">save_alt</Icon></IconButton>
@@ -503,7 +503,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          </Menu>
       </>);
    }
-   catch(e)
+   catch (e)
    {
       console.log("Error preparing export menu for page header: " + e);
    }
@@ -515,7 +515,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       let label: string = tableMetaData?.label ?? "";
 
-      if(currentSavedView?.values?.get("label"))
+      if (currentSavedView?.values?.get("label"))
       {
          label += " / " + currentSavedView?.values?.get("label");
       }
@@ -536,12 +536,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          }
 
          let joinLabelsString = joinLabels.join(", ");
-         if(joinLabels.length == 2)
+         if (joinLabels.length == 2)
          {
             let lastCommaIndex = joinLabelsString.lastIndexOf(",");
             joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + " and " + joinLabelsString.substring(lastCommaIndex + 1);
          }
-         if(joinLabels.length > 2)
+         if (joinLabels.length > 2)
          {
             let lastCommaIndex = joinLabelsString.lastIndexOf(",");
             joinLabelsString = joinLabelsString.substring(0, lastCommaIndex) + ", and " + joinLabelsString.substring(lastCommaIndex + 1);
@@ -552,9 +552,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             <ul style={{marginLeft: "1rem"}}>
                {joinLabels.map((name) => <li key={name}>{name}</li>)}
             </ul>
-         </div>
+         </div>;
 
-         return(
+         return (
             <div>
                {label} {exportMenu}
                <CustomWidthTooltip title={tooltipHTML}>
@@ -586,7 +586,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             </Tooltip>
          </Typography>
       );
-   }
+   };
 
    ///////////////////////
    // Keyboard handling //
@@ -598,42 +598,45 @@ function RecordQuery({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 && !activeModalProcess)
+         if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess)
          {
-            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();
                navigate(`${metaData?.getTablePathByName(tableName)}/create`);
             }
-            else if (! e.metaKey && e.key === "r")
+            else if (!e.metaKey && e.key === "r")
             {
-               e.preventDefault()
+               e.preventDefault();
                updateTable("'r' keyboard event");
             }
+            /*
+            // disable until we add a ... ref down to let us programmatically open Columns button
             else if (! e.metaKey && e.key === "c")
             {
                e.preventDefault()
                gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns)
             }
-            else if (! e.metaKey && e.key === "f")
+            */
+            else if (!e.metaKey && e.key === "f")
             {
-               e.preventDefault()
+               e.preventDefault();
 
                // @ts-ignore
-               if(basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced")
+               if (basicAndAdvancedQueryControlsRef?.current?.getCurrentMode() == "advanced")
                {
-                  gridApiRef.current.showFilterPanel()
+                  gridApiRef.current.showFilterPanel();
-               }
                }
             }
          }
+      };
 
-      document.addEventListener("keydown", down)
+      document.addEventListener("keydown", down);
       return () =>
       {
-         document.removeEventListener("keydown", down)
+         document.removeEventListener("keydown", down);
-      }
+      };
-   }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess])
+   }, [dotMenuOpen, keyboardHelpOpen, metaData, activeModalProcess]);
 
 
    /*******************************************************************************
@@ -642,7 +645,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const urlLooksLikeProcess = (): boolean =>
    {
       return (pathParts[pathParts.length - 2] === tableName);
-   }
+   };
 
    //////////////////////////////////////////////////////////////////////////////////////////////
    // monitor location changes - if our url looks like a savedView, then load that view, kinda //
@@ -700,7 +703,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setView(view);
       setViewAsJson(JSON.stringify(view));
       localStorage.setItem(viewLocalStorageKey, JSON.stringify(view));
-   }
+   };
 
 
    /*******************************************************************************
@@ -709,10 +712,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handleColumnVisibilityChange = (columnVisibilityModel: GridColumnVisibilityModel) =>
    {
       setColumnVisibilityModel(columnVisibilityModel);
-      queryColumns.updateVisibility(columnVisibilityModel)
+      queryColumns.updateVisibility(columnVisibilityModel);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
 
       forceUpdate();
    };
@@ -727,12 +730,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // set the field's value in the view //
       ///////////////////////////////////////
       let fieldName = field.name;
-      if(table && table.name != tableMetaData.name)
+      if (table && table.name != tableMetaData.name)
       {
          fieldName = `${table.name}.${field.name}`;
       }
 
-      view.queryColumns.setIsVisible(fieldName, newValue)
+      view.queryColumns.setIsVisible(fieldName, newValue);
 
       /////////////////////
       // update the grid //
@@ -742,13 +745,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       /////////////////////////////////////////////////
       // update the view (e.g., write local storage) //
       /////////////////////////////////////////////////
-      doSetView(view)
+      doSetView(view);
 
       ///////////////////
       // ole' faithful //
       ///////////////////
       forceUpdate();
-   }
+   };
 
 
    /*******************************************************************************
@@ -787,7 +790,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setPinnedColumns(queryColumns.toGridPinnedColumns());
       setColumnVisibilityModel(queryColumns.toColumnVisibilityModel());
       setColumnsModel(columns);
-   }
+   };
 
 
    /*******************************************************************************
@@ -796,7 +799,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const promptForTableVariantSelection = () =>
    {
       setTableVariantPromptOpen(true);
-   }
+   };
 
 
    /*******************************************************************************
@@ -810,10 +813,10 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const fieldName = queryFilter.orderBys[i].fieldName;
-         if(fieldName.indexOf(".") > -1)
+         if (fieldName.indexOf(".") > -1)
          {
             const joinTableName = fieldName.replaceAll(/\..*/g, "");
-            if(!vjtToUse.has(joinTableName))
+            if (!vjtToUse.has(joinTableName))
             {
                const [field, fieldTable] = TableUtils.getFieldAndTable(tableMetaData, fieldName);
                handleChangeOneColumnVisibility(field, fieldTable, true);
@@ -823,7 +826,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return (rs);
-   }
+   };
 
 
    /*******************************************************************************
@@ -831,13 +834,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const updateTable = (reason?: string) =>
    {
-      if(pageState != "ready")
+      if (pageState != "ready")
       {
          console.log(`In updateTable, but pageSate[${pageState}] is not ready, so returning with noop`);
          return;
       }
 
-      if(tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
+      if (tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
       {
          console.log("In updateTable, but a variant is needed, so returning with noop");
          return;
@@ -891,7 +894,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             });
          }
 
-         if(!tableMetaData.capabilities.has(Capability.TABLE_QUERY))
+         if (!tableMetaData.capabilities.has(Capability.TABLE_QUERY))
          {
             console.log("Cannot update table - it does not have QUERY capability.");
             return;
@@ -966,7 +969,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          setDistinctRecords(countResults[latestQueryId][1]);
          delete countResults[latestQueryId];
       }
-      catch(e)
+      catch (e)
       {
          console.log(e);
       }
@@ -996,7 +999,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // count how many distinct primary keys are on this page //
       ///////////////////////////////////////////////////////////
       let distinctPrimaryKeySet = new Set<string>();
-      for(let i = 0; i < results.length; i++)
+      for (let i = 0; i < results.length; i++)
       {
          distinctPrimaryKeySet.add(results[i].values.get(tableMetaData.primaryKeyField) as string);
       }
@@ -1052,7 +1055,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setRowsPerPage(size);
 
       view.rowsPerPage = size;
-      doSetView(view)
+      doSetView(view);
    };
 
    /*******************************************************************************
@@ -1061,11 +1064,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handlePinnedColumnsChange = (pinnedColumns: GridPinnedColumns) =>
    {
       setPinnedColumns(pinnedColumns);
-      queryColumns.setPinnedLeftColumns(pinnedColumns.left)
+      queryColumns.setPinnedLeftColumns(pinnedColumns.left);
-      queryColumns.setPinnedRightColumns(pinnedColumns.right)
+      queryColumns.setPinnedRightColumns(pinnedColumns.right);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
    /*******************************************************************************
@@ -1118,7 +1121,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       let selectedPrimaryKeys = new Set<string>();
       selectionModel.forEach((value: GridRowId, index: number) =>
       {
-         checkboxesChecked++
+         checkboxesChecked++;
          const valueToPush = latestQueryResults[value as number].values.get(tableMetaData.primaryKeyField);
          selectedPrimaryKeys.add(valueToPush as string);
       });
@@ -1147,7 +1150,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       queryColumns.updateColumnOrder(columnOrdering);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1159,7 +1162,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       queryColumns.updateColumnWidth(params.colDef.field, params.width);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1182,13 +1185,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       {
          const fieldName = gridSort[i].field;
          const isAscending = gridSort[i].sort == "asc";
-         queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending))
+         queryFilter.orderBys.push(new QFilterOrderBy(fieldName, isAscending));
       }
 
       //////////////////////////////////////////////////////////
       // set a default order-by, if none is otherwise present //
       //////////////////////////////////////////////////////////
-      if(queryFilter.orderBys.length == 0)
+      if (queryFilter.orderBys.length == 0)
       {
          queryFilter.orderBys.push(new QFilterOrderBy(tableMetaData.primaryKeyField, false));
       }
@@ -1206,7 +1209,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handleColumnHeaderClick = (params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails): void =>
    {
       event.defaultMuiPrevented = true;
-   }
+   };
 
 
    /*******************************************************************************
@@ -1224,7 +1227,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       setRowsPerPage(view.rowsPerPage ?? defaultRowsPerPage);
       setMode(view.mode ?? defaultMode);
-      setQuickFilterFieldNames(view.quickFilterFieldNames ?? []) // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
+      setQuickFilterFieldNames(view.quickFilterFieldNames ?? []); // todo not i think ?? getDefaultQuickFilterFieldNames(tableMetaData));
 
       //////////////////////////////////////////////////////////////////////////////////////////////////
       // do this last - in case anything in the view got modified in any of those other doSet methods //
@@ -1237,7 +1240,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
       // @ts-ignore
       setTimeout(() => basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "activatedView"));
-   }
+   };
 
 
    /*******************************************************************************
@@ -1255,7 +1258,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////////
       // in case there's no orderBys, set default here //
       ///////////////////////////////////////////////////
-      if(!queryFilter.orderBys || queryFilter.orderBys.length == 0)
+      if (!queryFilter.orderBys || queryFilter.orderBys.length == 0)
       {
          queryFilter.orderBys = [new QFilterOrderBy(tableMetaData?.primaryKeyField, false)];
          view.queryFilter = queryFilter;
@@ -1281,17 +1284,17 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////
       // put this query filter in the current view //
       ///////////////////////////////////////////////
-      if(!isFromActivateView)
+      if (!isFromActivateView)
       {
          view.queryFilter = queryFilter;
-         doSetView(view)
+         doSetView(view);
       }
 
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       // this force-update causes a re-render that'll see the changed filter hash/json string, and make an updateTable run (if appropriate) //
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
       forceUpdate();
-   }
+   };
 
    /*******************************************************************************
     ** Wrapper around setQueryColumns that also sets column models for the grid, puts
@@ -1321,12 +1324,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////
       // put these columns in the current view //
       ///////////////////////////////////////////
-      if(!isFromActivateView)
+      if (!isFromActivateView)
       {
          view.queryColumns = queryColumns;
-         doSetView(view)
+         doSetView(view);
-      }
       }
+   };
 
 
    /*******************************************************************************
@@ -1338,7 +1341,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setQuickFilterFieldNames([...(names ?? [])]);
 
       view.quickFilterFieldNames = names;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1351,7 +1354,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       view.mode = newValue;
       doSetView(view);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1369,7 +1372,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return (selectedIds.length);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1380,12 +1383,18 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       if (selectFullFilterState === "filter")
       {
-         return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(queryFilter))}`;
+         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         filterForBackend.skip = 0;
+         filterForBackend.limit = null;
+         return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
       }
 
       if (selectFullFilterState === "filterSubset")
       {
-         return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(queryFilter))}`;
+         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         filterForBackend.skip = 0;
+         filterForBackend.limit = selectionSubsetSize;
+         return `?recordsParam=filterJSON&filterJSON=${encodeURIComponent(JSON.stringify(filterForBackend))}`;
       }
 
       if (selectedIds.length > 0)
@@ -1394,7 +1403,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return "";
-   }
+   };
 
 
    /*******************************************************************************
@@ -1405,11 +1414,17 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       if (selectFullFilterState === "filter")
       {
-         setRecordIdsForProcess(queryFilter);
+         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         filterForBackend.skip = 0;
+         filterForBackend.limit = null;
+         setRecordIdsForProcess(filterForBackend);
       }
       else if (selectFullFilterState === "filterSubset")
       {
-         setRecordIdsForProcess(new QQueryFilter(queryFilter.criteria, queryFilter.orderBys, queryFilter.booleanOperator, 0, selectionSubsetSize));
+         const filterForBackend = prepQueryFilterForBackend(queryFilter);
+         filterForBackend.skip = 0;
+         filterForBackend.limit = selectionSubsetSize;
+         setRecordIdsForProcess(filterForBackend);
       }
       else if (selectedIds.length > 0)
       {
@@ -1544,7 +1559,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
     *******************************************************************************/
    const doSetCurrentSavedView = (savedViewRecord: QRecord) =>
    {
-      if(savedViewRecord == null)
+      if (savedViewRecord == null)
       {
          console.log("doSetCurrentView called with a null view record - calling doClearCurrentSavedView instead.");
          doClearCurrentSavedView();
@@ -1553,7 +1568,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       setCurrentSavedView(savedViewRecord);
 
-      const viewJson = savedViewRecord.values.get("viewJson")
+      const viewJson = savedViewRecord.values.get("viewJson");
       const newView = RecordQueryView.buildFromJSON(viewJson);
 
       activateView(newView);
@@ -1562,7 +1577,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // todo can/should/does this move into the view's "identity"? //
       ////////////////////////////////////////////////////////////////
       localStorage.setItem(currentSavedViewLocalStorageKey, `${savedViewRecord.values.get("id")}`);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1572,7 +1587,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       setCurrentSavedView(null);
       localStorage.removeItem(currentSavedViewLocalStorageKey);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1588,7 +1603,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       newDefaultView.quickFilterFieldNames = [];
       newDefaultView.mode = defaultMode;
       return newDefaultView;
-   }
+   };
 
    /*******************************************************************************
     ** event handler for SavedViews component, to handle user selecting a view
@@ -1623,9 +1638,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          ///////////////////////////////////////////////
          // activate a new default view for the table //
          ///////////////////////////////////////////////
-         activateView(buildTableDefaultView(tableMetaData))
+         activateView(buildTableDefaultView(tableMetaData));
-      }
       }
+   };
 
    /*******************************************************************************
     ** utility function to fetch a saved view from the backend.
@@ -1653,7 +1668,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          // such as, making values be what they'd be in the UI (not necessarily      //
          // what they're like in the backend); similarly, set anything that's unset. //
          //////////////////////////////////////////////////////////////////////////////
-         const viewJson = qRecord.values.get("viewJson")
+         const viewJson = qRecord.values.get("viewJson");
          const newView = RecordQueryView.buildFromJSON(viewJson);
 
          setWarningAlert(null);
@@ -1669,16 +1684,16 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          ///////////////////////////
          // set columns if absent //
          ///////////////////////////
-         if(!newView.queryColumns || !newView.queryColumns.columns || newView.queryColumns.columns?.length == 0)
+         if (!newView.queryColumns || !newView.queryColumns.columns || newView.queryColumns.columns?.length == 0)
          {
             newView.queryColumns = QQueryColumns.buildDefaultForTable(tableMetaData);
          }
 
-         qRecord.values.set("viewJson", JSON.stringify(newView))
+         qRecord.values.set("viewJson", JSON.stringify(newView));
       }
 
       return (qRecord);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1778,12 +1793,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       const removedFieldCount = removedFieldNames.size;
-      if(removedFieldCount > 0)
+      if (removedFieldCount > 0)
       {
          const plural = removedFieldCount > 1;
          setWarningAlert(`${removedFieldCount} field${plural ? "s" : ""} that ${plural ? "were" : "was"} part of this view ${plural ? "are" : "is"} no longer in this table, and ${plural ? "were" : "was"} removed from this view (${[...removedFieldNames.values()].join(", ")}).`);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -1793,7 +1808,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       const newCriteria = new QFilterCriteria(fieldName, null, []);
 
-      if(!queryFilter.criteria)
+      if (!queryFilter.criteria)
       {
          queryFilter.criteria = [];
       }
@@ -1819,8 +1834,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////
       // open the filter panel //
       ///////////////////////////
-      gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
+      gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1915,7 +1930,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                <MenuItem onClick={(e) =>
                {
                   hideMenu(e);
-                  if(mode == "advanced")
+                  if (mode == "advanced")
                   {
                      handleColumnMenuAdvancedFilterSelection(currentColumn.field);
                   }
@@ -1974,24 +1989,24 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          for (let i = 0; i < queryFilter?.criteria?.length; i++)
          {
             const criteria = queryFilter.criteria[i];
-            if(criteria.fieldName == props.field && validateCriteria(criteria, null).criteriaIsValid)
+            if (criteria.fieldName == props.field && validateCriteria(criteria, null).criteriaIsValid)
             {
                showFilter = true;
             }
          }
 
-         if(showFilter)
+         if (showFilter)
          {
             return (<IconButton size="small" sx={{p: "2px"}} onClick={(event) =>
             {
-               if(mode == "basic")
+               if (mode == "basic")
                {
                   // @ts-ignore !?
                   basicAndAdvancedQueryControlsRef.current.addField(props.field);
                }
                else
                {
-                  gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
+                  gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
                }
 
                event.stopPropagation();
@@ -2095,23 +2110,35 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
        *******************************************************************************/
       const selectionMenuCallback = (selectedIndex: number) =>
       {
-         if(selectedIndex == 0)
+         if (selectedIndex == 0)
          {
+            ///////////////
+            // this page //
+            ///////////////
             programmaticallySelectSomeOrAllRows();
-            setSelectFullFilterState("checked")
+            setSelectFullFilterState("checked");
          }
-         else if(selectedIndex == 1)
+         else if (selectedIndex == 1)
          {
+            ///////////////////////
+            // full query result //
+            ///////////////////////
             programmaticallySelectSomeOrAllRows();
-            setSelectFullFilterState("filter")
+            setSelectFullFilterState("filter");
          }
-         else if(selectedIndex == 2)
+         else if (selectedIndex == 2)
          {
+            ////////////////////////////
+            // subset of query result //
+            ////////////////////////////
             setSelectionSubsetSizePromptOpen(true);
          }
-         else if(selectedIndex == 3)
+         else if (selectedIndex == 3)
          {
-            setSelectFullFilterState("n/a")
+            /////////////////////
+            // clear selection //
+            /////////////////////
+            setSelectFullFilterState("n/a");
             setRowSelectionModel([]);
             setSelectedIds([]);
          }
@@ -2133,13 +2160,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                {
                   setSelectionSubsetSizePromptOpen(false);
 
-                  if(value !== undefined)
+                  if (value !== undefined)
                   {
-                     if(typeof value === "number" && value > 0)
+                     if (typeof value === "number" && value > 0)
                      {
                         programmaticallySelectSomeOrAllRows(value);
                         setSelectionSubsetSize(value);
-                        setSelectFullFilterState("filterSubset")
+                        setSelectFullFilterState("filterSubset");
                      }
                      else
                      {
@@ -2243,7 +2270,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////////////////////
    const [filterHash, setFilterHash] = useState("");
 
-   if(pageState == "ready")
+   if (pageState == "ready")
    {
       const newFilterHash = JSON.stringify(prepQueryFilterForBackend(queryFilter));
       if (filterHash != newFilterHash)
@@ -2356,7 +2383,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                for (let i = 0; i < queryFilter?.criteria?.length; i++)
                {
                   const criteria = queryFilter.criteria[i];
-                  if(criteria.operator == QCriteriaOperator.NOT_EQUALS)
+                  if (criteria.operator == QCriteriaOperator.NOT_EQUALS)
                   {
                      criteria.operator = QCriteriaOperator.NOT_EQUALS_OR_IS_NULL;
                   }
@@ -2374,14 +2401,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                /////////////////////////////////////////////////////////////////////////////////////////////
                doClearCurrentSavedView();
             }
-            catch(e)
+            catch (e)
             {
                setAlertContent("Error parsing filter from URL");
             }
          }
          else if (viewIdInLocation)
          {
-            if(view.viewIdentity == `savedView:${viewIdInLocation}`)
+            if (view.viewIdentity == `savedView:${viewIdInLocation}`)
             {
                /////////////////////////////////////////////////////////////////////////////////////////////////
                // if the view id in the location is the same as the view that was most-recently active here,  //
@@ -2426,7 +2453,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                // so the useEffect that monitors location will see the change, and will set viewIdInLocation      //
                // so upon a re-render we'll hit this block again.                                                 //
                /////////////////////////////////////////////////////////////////////////////////////////////////////
-               setPageState("loadedMetaData")
+               setPageState("loadedMetaData");
                return;
             }
 
@@ -2460,7 +2487,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setTimeout(() =>
       {
          // @ts-ignore
-         basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded")
+         basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "defaultFilterLoaded");
       });
 
       console.log("finished preparing grid, going to page state ready");
@@ -2482,13 +2509,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ////////////////////////////////////////////////////////////////////////
    useEffect(() =>
    {
-      if(pageState == "ready")
+      if (pageState == "ready")
       {
-         pageLoadingState.setNotLoading()
+         pageLoadingState.setNotLoading();
 
-         if(!tableVariantPromptOpen)
+         if (!tableVariantPromptOpen)
          {
-            updateTable("pageState is now ready")
+            updateTable("pageState is now ready");
          }
       }
    }, [pageState, tableVariantPromptOpen]);
@@ -2517,7 +2544,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    /////////////////////////////////////////////////////////////////////////////////////////////
    if (tableMetaData && !tableMetaData.capabilities.has(Capability.TABLE_QUERY) && tableMetaData.capabilities.has(Capability.TABLE_GET))
    {
-      if(tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
+      if (tableMetaData?.usesVariants && (!tableVariant || tableVariantPromptOpen))
       {
          return (
             <BaseLayout>
@@ -2534,9 +2561,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       // if the table uses variants, then put the variant-selector into the goto dialog //
       ////////////////////////////////////////////////////////////////////////////////////
       let gotoVariantSubHeader = <></>;
-      if(tableMetaData?.usesVariants)
+      if (tableMetaData?.usesVariants)
       {
-         gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>
+         gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>;
       }
 
       return (
@@ -2549,7 +2576,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    ///////////////////////////////////////////////////////////
    // render a loading screen if the page state isn't ready //
    ///////////////////////////////////////////////////////////
-   if(pageState != "ready")
+   if (pageState != "ready")
    {
       console.log(`page state is ${pageState}... no-op while those complete async's run...`);
       return (getLoadingScreen());
@@ -2559,13 +2586,13 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    // if the table isn't loaded yet, display loading screen.                                //
    // this shouldn't be possible, to be out-of-sync with pageState, but just as a fail-safe //
    ///////////////////////////////////////////////////////////////////////////////////////////
-   if(!tableMetaData)
+   if (!tableMetaData)
    {
       return (getLoadingScreen());
    }
 
    let savedViewsComponent = null;
-   if(metaData && metaData.processes.has("querySavedView"))
+   if (metaData && metaData.processes.has("querySavedView"))
    {
       savedViewsComponent = (<SavedViews qController={qController} metaData={metaData} tableMetaData={tableMetaData} view={view} viewAsJson={viewAsJson} currentSavedView={currentSavedView} tableDefaultView={tableDefaultView} viewOnChangeCallback={handleSavedViewChange} loadingSavedView={loadingSavedView} />);
    }
@@ -2588,9 +2615,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ////////////////////////////////////////////////////////////////////////////////////////////////////////////
       const baseView = currentSavedView ? JSON.parse(currentSavedView.values.get("viewJson")) as RecordQueryView : tableDefaultView;
       const viewDiffs: string[] = [];
-      SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs)
+      SavedViewUtils.diffColumns(tableMetaData, baseView, view, viewDiffs);
 
-      if(viewDiffs.length == 0 && currentSavedView)
+      if (viewDiffs.length == 0 && currentSavedView)
       {
          /////////////////////////////////////////////////////////////////
          // if 's a saved view, and it's "clean", show it in main style //
@@ -2599,7 +2626,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          buttonBorder = accentColor;
          buttonColor = "#FFFFFF";
       }
-      else if(viewDiffs.length > 0)
+      else if (viewDiffs.length > 0)
       {
          ///////////////////////////////////////////////////
          // else if there are diffs, show alt/light style //
@@ -2626,7 +2653,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             color: buttonColor,
             backgroundColor: buttonBackground,
          }
-      }
+      };
 
       return (<Box order="2">
          <FieldListMenu
@@ -2641,19 +2668,19 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             handleToggleField={handleChangeOneColumnVisibility}
          />
       </Box>);
-   }
+   };
 
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    // these numbers help set the height of the grid (so page won't scroll) based on spcae above & below it //
    //////////////////////////////////////////////////////////////////////////////////////////////////////////
    let spaceBelowGrid = 40;
    let spaceAboveGrid = 205;
-   if(tableMetaData?.usesVariants)
+   if (tableMetaData?.usesVariants)
    {
       spaceAboveGrid += 30;
    }
 
-   if(mode == "advanced")
+   if (mode == "advanced")
    {
       spaceAboveGrid += 60;
    }

src/qqq/utils/qqq/FilterUtils.tsx

@@ -64,7 +64,6 @@ class FilterUtils
       let rs = [];
       for (let i = 0; i < param.length; i++)
       {
-         console.log(param[i]);
          if (param[i] && param[i].id && param[i].label)
          {
             /////////////////////////////////////////////////////////////
@@ -115,8 +114,11 @@ class FilterUtils
             // 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)
+            if (values && values.length > 0 && values[0] !== null && values[0] !== undefined && values[0] !== "")
             {
                values = await qController.possibleValues(fieldTable.name, null, field.name, "", values);
             }
@@ -261,39 +263,45 @@ class FilterUtils
    /*******************************************************************************
     **
     *******************************************************************************/
-   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; reasonsWhyItCannot?: string[] }
+   public static canFilterWorkAsBasic(tableMetaData: QTableMetaData, filter: QQueryFilter): { canFilterWorkAsBasic: boolean; canFilterWorkAsAdvanced: boolean, reasonsWhyItCannot?: string[] }
    {
       const reasonsWhyItCannot: string[] = [];
 
-      if(filter == null)
+      if (filter == null)
       {
-         return ({canFilterWorkAsBasic: true});
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
       }
 
-      if(filter.booleanOperator == "OR")
+      if (filter.booleanOperator == "OR")
       {
-         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
+         reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
       }
 
-      if(filter.criteria)
+      if (filter.subFilters?.length > 0)
       {
-         const usedFields: {[name: string]: boolean} = {};
+         reasonsWhyItCannot.push("Filter contains sub-filters.");
-         const warnedFields: {[name: string]: boolean} = {};
+         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)
+            if (!criteriaName)
             {
                continue;
             }
 
-            if(usedFields[criteriaName])
+            if (usedFields[criteriaName])
             {
-               if(!warnedFields[criteriaName])
+               if (!warnedFields[criteriaName])
                {
                   const [field, tableForField] = TableUtils.getFieldAndTable(tableMetaData, criteriaName);
                   let fieldLabel = field.label;
-                  if(tableForField.name != tableMetaData.name)
+                  if (tableForField.name != tableMetaData.name)
                   {
                      let fieldLabel = `${tableForField.label}: ${field.label}`;
                   }
@@ -305,13 +313,13 @@ class FilterUtils
          }
       }
 
-      if(reasonsWhyItCannot.length == 0)
+      if (reasonsWhyItCannot.length == 0)
       {
-         return ({canFilterWorkAsBasic: true});
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
       }
       else
       {
-         return ({canFilterWorkAsBasic: false, reasonsWhyItCannot: reasonsWhyItCannot});
+         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: true, reasonsWhyItCannot: reasonsWhyItCannot});
       }
    }
 
@@ -319,11 +327,11 @@ class FilterUtils
     ** 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
+   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)
+      if (criteria.operator == QCriteriaOperator.IS_BLANK || criteria.operator == QCriteriaOperator.IS_NOT_BLANK)
       {
          ///////////////////////////////////////////////
          // we don't want values for these operators. //
@@ -340,6 +348,10 @@ class FilterUtils
          {
             maxLoops = maxValuesToShow;
          }
+         else if (maxValuesToShow == 1 && criteria.values.length > 1)
+         {
+            maxLoops = 1;
+         }
 
          for (let i = 0; i < maxLoops; i++)
          {
@@ -357,17 +369,22 @@ class FilterUtils
             else if (value.type == "ThisOrLastPeriod")
             {
                const expression = new ThisOrLastPeriodExpression(value);
-               labels.push(expression.toString());
+               let startOfPrefix = "";
-            }
+               if (fieldMetaData.type == QFieldType.DATE_TIME || expression.timeUnit != "DAYS")
-            else if(fieldMetaData.type == QFieldType.BOOLEAN)
                {
-               labels.push(value == true ? "yes" : "no")
+                  startOfPrefix = "start of ";
                }
-            else if(fieldMetaData.type == QFieldType.DATE_TIME)
+               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)
+            else if (fieldMetaData.type == QFieldType.DATE)
             {
                labels.push(ValueUtils.formatDate(value));
             }
@@ -383,7 +400,16 @@ class FilterUtils
 
          if (maxLoops < criteria.values.length)
          {
-            labels.push(" and " + (criteria.values.length - maxLoops) + " other values.");
+            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(", "));
@@ -430,7 +456,7 @@ class FilterUtils
       for (let i = 0; i < queryFilter?.orderBys?.length; i++)
       {
          const orderBy = queryFilter.orderBys[i];
-         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"})
+         gridSortModel.push({field: orderBy.fieldName, sort: orderBy.isAscending ? "asc" : "desc"});
       }
       return (gridSortModel);
    }
@@ -441,7 +467,7 @@ class FilterUtils
     *******************************************************************************/
    public static operatorToHumanString(criteria: QFilterCriteria, field: QFieldMetaData): string
    {
-      if(criteria == null || criteria.operator == null)
+      if (criteria == null || criteria.operator == null)
       {
          return (null);
       }
@@ -451,7 +477,7 @@ class FilterUtils
 
       try
       {
-         switch(criteria.operator)
+         switch (criteria.operator)
          {
             case QCriteriaOperator.EQUALS:
                return ("equals");
@@ -475,35 +501,35 @@ class FilterUtils
             case QCriteriaOperator.NOT_CONTAINS:
                return ("does not contain");
             case QCriteriaOperator.LESS_THAN:
-               if(isDate || isDateTime)
+               if (isDate || isDateTime)
                {
-                  return ("is before")
+                  return ("is before");
                }
                return ("less than");
             case QCriteriaOperator.LESS_THAN_OR_EQUALS:
-               if(isDate)
+               if (isDate)
                {
-                  return ("is on or before")
+                  return ("is on or before");
                }
-               if(isDateTime)
+               if (isDateTime)
                {
-                  return ("is at or before")
+                  return ("is at or before");
                }
                return ("less than or equals");
             case QCriteriaOperator.GREATER_THAN:
-               if(isDate || isDateTime)
+               if (isDate || isDateTime)
                {
-                  return ("is after")
+                  return ("is after");
                }
                return ("greater than or equals");
             case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
-               if(isDate)
+               if (isDate)
                {
-                  return ("is on or after")
+                  return ("is on or after");
                }
-               if(isDateTime)
+               if (isDateTime)
                {
-                  return ("is at or after")
+                  return ("is at or after");
                }
                return ("greater than or equals");
             case QCriteriaOperator.IS_BLANK:
@@ -516,10 +542,10 @@ class FilterUtils
                return ("is not between");
          }
       }
-      catch(e)
+      catch (e)
       {
          console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
-         return criteria?.operator
+         return criteria?.operator;
       }
    }
 
@@ -529,7 +555,7 @@ class FilterUtils
     *******************************************************************************/
    public static criteriaToHumanString(table: QTableMetaData, criteria: QFilterCriteria, styled = false): string | JSX.Element
    {
-      if(criteria == null)
+      if (criteria == null)
       {
          return (null);
       }
@@ -538,7 +564,7 @@ class FilterUtils
       const fieldLabel = TableUtils.getFieldFullLabel(table, criteria.fieldName);
       const valuesString = FilterUtils.getValuesString(field, criteria);
 
-      if(styled)
+      if (styled)
       {
          return (
             <Box display="inline" whiteSpace="nowrap" color="#FFFFFF" mb={"0.5rem"}>
@@ -547,7 +573,7 @@ class FilterUtils
                {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
       {

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;
@@ -504,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
@@ -514,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);
@@ -537,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;
@@ -103,7 +106,7 @@ public class QueryScreenLib
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void clickFilterButton()
+   public void clickFilterBuilderButton()
    {
       qSeleniumLib.waitForSelectorContaining("BUTTON", "FILTER BUILDER").click();
    }
@@ -181,10 +184,11 @@ public class QueryScreenLib
    }
 
 
+
    /*******************************************************************************
     **
     *******************************************************************************/
-   public void addAdvancedQueryFilterInput(QSeleniumLib qSeleniumLib, int index, String fieldLabel, String operator, String value, String booleanOperator)
+   public void addAdvancedQueryFilterInput(int index, String fieldLabel, String operator, String value, String booleanOperator)
    {
       if(index > 0)
       {
@@ -221,10 +225,91 @@ public class QueryScreenLib
       operatorInput.sendKeys("\n");
       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/query/QueryScreenFilterInUrlAdvancedModeTest.java

@@ -82,7 +82,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       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\"]");
 
       ///////////////////////////////
@@ -93,7 +93,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       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\"]");
@@ -116,7 +116,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       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");
@@ -129,7 +129,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       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\"]");
 
@@ -142,7 +142,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       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\"]");
@@ -165,7 +165,7 @@ public class QueryScreenFilterInUrlAdvancedModeTest extends QBaseSeleniumTest
       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=\"does not equal\"]");
       qSeleniumLib.waitForSelector("input[value=\"St. Louis\"]");
 

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

@@ -22,6 +22,7 @@
 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;
@@ -48,6 +49,7 @@ public class QueryScreenTest extends QBaseSeleniumTest
          .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");
    }
 
@@ -64,13 +66,13 @@ public class QueryScreenTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.gotoAdvancedMode();
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
 
       /////////////////////////////////////////////////////////////////////
       // open the filter window, enter a value, wait for query to re-run //
       /////////////////////////////////////////////////////////////////////
       qSeleniumJavalin.beginCapture();
-      queryScreenLib.addAdvancedQueryFilterInput(qSeleniumLib, 0, "Id", "equals", "1", null);
+      queryScreenLib.addAdvancedQueryFilterInput(0, "Id", "equals", "1", null);
 
       ///////////////////////////////////////////////////////////////////
       // assert that query & count both have the expected filter value //
@@ -117,11 +119,11 @@ public class QueryScreenTest extends QBaseSeleniumTest
       qSeleniumLib.gotoAndWaitForBreadcrumbHeaderToContain("/peopleApp/greetingsApp/person", "Person");
       queryScreenLib.waitForQueryToHaveRan();
       queryScreenLib.gotoAdvancedMode();
-      queryScreenLib.clickFilterButton();
+      queryScreenLib.clickFilterBuilderButton();
 
       qSeleniumJavalin.beginCapture();
-      queryScreenLib.addAdvancedQueryFilterInput(qSeleniumLib, 0, "First Name", "contains", "Dar", "Or");
+      queryScreenLib.addAdvancedQueryFilterInput(0, "First Name", "contains", "Dar", "Or");
-      queryScreenLib.addAdvancedQueryFilterInput(qSeleniumLib, 1, "First Name", "contains", "Jam", "Or");
+      queryScreenLib.addAdvancedQueryFilterInput(1, "First Name", "contains", "Jam", "Or");
 
       String expectedFilterContents0 = """
          {"fieldName":"firstName","operator":"CONTAINS","values":["Dar"]}""";
@@ -137,6 +139,138 @@ public class QueryScreenTest extends QBaseSeleniumTest
    }
 
 
+
+   /*******************************************************************************
+    **
+    *******************************************************************************/
+   @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();
+   }
+
 }