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

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

.circleci/config.yml

@@ -7,7 +7,7 @@ orbs:
 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.87",
+      "@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-876-develop-missing-widget-types-20240221.002945-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>();

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

@@ -22,7 +22,9 @@
 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;
 
 
 /*******************************************************************************
@@ -30,7 +32,39 @@ import com.kingsrook.qqq.backend.core.model.metadata.layout.QSupplementalAppMeta
  *******************************************************************************/
 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);
+   }
 
 
 
@@ -51,7 +85,7 @@ public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
    @Override
    public String getType()
    {
-      return ("materialDashboard");
+      return TYPE_NAME;
    }
 
 
@@ -85,4 +119,35 @@ public class MaterialDashboardAppMetaData extends QSupplementalAppMetaData
       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/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
@@ -81,8 +81,12 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
       const newValue = qRecord.values.get("auditDetail.newValue");
       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);
    }
@@ -198,12 +202,12 @@ 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")]);
@@ -233,7 +237,7 @@ 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++)
@@ -252,7 +256,7 @@ function AuditBody({tableMetaData, recordId, record}: Props): JSX.Element
                   detailMap.set(id, []);
                }
 
-               detailMap.get(id).push(auditDetail)
+               detailMap.get(id).push(auditDetail);
             }
 
             // table version, probably not to commit
@@ -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

@@ -71,7 +71,7 @@ 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;
@@ -108,7 +108,7 @@ function GotoRecordDialog(props: Props): JSX.Element
       const rs = {} as { [field: string]: string };
       fields.forEach((field) => rs[field.name] = "");
       return (rs);
-   }
+   };
 
    const [error, setError] = useState("");
    const [values, setValues] = useState(makeInitialValues());
@@ -118,14 +118,14 @@ 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>) =>
    {
@@ -144,7 +144,7 @@ function GotoRecordDialog(props: Props): JSX.Element
          const index = targetId?.replaceAll("gotoInput-", "");
          document.getElementById("gotoButton-" + index).click();
       }
-   }
+   };
 
    const closeRequested = () =>
    {
@@ -152,15 +152,15 @@ function GotoRecordDialog(props: Props): JSX.Element
       {
          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.");
@@ -183,13 +183,13 @@ function GotoRecordDialog(props: Props): JSX.Element
          setError(`Error: ${(e && e.message) ? e.message : e}`);
          setTimeout(() => setError(""), 6000);
       }
-   }
+   };
 
    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()
    {

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);
          }
-      }
+      };
    });
 
 
@@ -207,7 +208,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
       if (found)
       {
-         clearTimeout(debounceTimeout)
+         clearTimeout(debounceTimeout);
          debounceTimeout = setTimeout(() =>
          {
             setQueryFilter(queryFilter);
@@ -254,7 +255,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
     *******************************************************************************/
    const handleRemoveQuickFilterField = (fieldName: string): void =>
    {
-      const index = quickFilterFieldNames.indexOf(fieldName)
+      const index = quickFilterFieldNames.indexOf(fieldName);
       if (index >= 0)
       {
          //////////////////////////////////////
@@ -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);
-   }
+   };
 
 
    /*******************************************************************************
@@ -352,7 +353,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       }
 
       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,7 +404,8 @@ 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)
@@ -411,9 +414,12 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
 
                   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>
       );
    };
@@ -440,10 +452,15 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             // 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;
             }
 
@@ -475,14 +492,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          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")
@@ -496,7 +520,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
             }
          }
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -514,7 +538,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
          }
       }
       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();
-   }
+   };
 
 
    /*******************************************************************************
@@ -546,7 +570,7 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       {
          handleSetSort(field, table, isAscending);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -563,21 +587,21 @@ const BasicAndAdvancedQueryControls = forwardRef((props: BasicAndAdvancedQueryCo
       }
       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)
    {
       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></>;
    }
 
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -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,9 +755,9 @@ 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">
                            <>
@@ -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/ExportMenuItem.tsx

@@ -45,7 +45,7 @@ export default function ExportMenuItem(props: QExportMenuItemProps)
 
    return (
       <MenuItem
-         disabled={!totalRecords}
+         disabled={totalRecords === 0}
          onClick={() =>
          {
             ///////////////////////////////////////////////////////////////////////////////

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

@@ -504,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}

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

@@ -21,8 +21,6 @@
 
 import BlockElementWrapper from "qqq/components/widgets/blocks/BlockElementWrapper";
 import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockModels";
-import UpOrDownNumberBlock from "qqq/components/widgets/blocks/UpOrDownNumberBlock";
-
 
 
 /*******************************************************************************
@@ -40,7 +38,7 @@ export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComp
       <div style={{width: data.styles.width ?? "auto"}}>
 
          <div style={{fontWeight: "700", fontSize: "0.875rem", color: "#3D3D3D", marginBottom: "-0.5rem"}}>
-            <BlockElementWrapper data={data} slot="heading">
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
                <span>{data.values.heading}</span>
             </BlockElementWrapper>
          </div>
@@ -49,14 +47,14 @@ export default function BigNumberBlock({widgetMetaData, data}: StandardBlockComp
 
             <div style={{display: "flex", alignItems: "baseline"}}>
                <div style={{fontWeight: "700", fontSize: "2rem", marginRight: "0.25rem"}}>
-                  <BlockElementWrapper data={data} slot="number">
+                  <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 data={data} slot="context">
+                     <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
                         <span>{data.values.context}</span>
                      </BlockElementWrapper>
                   </div>

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

@@ -20,14 +20,18 @@
  */
 
 
+import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
 import {Tooltip} from "@mui/material";
-import React, {ReactElement} from "react";
+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;
@@ -36,8 +40,10 @@ interface BlockElementWrapperProps
 /*******************************************************************************
  ** For Blocks - wrap their "slot" elements with an optional tooltip and/or link
  *******************************************************************************/
-export default function BlockElementWrapper({data, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
+export default function BlockElementWrapper({data, metaData, slot, linkProps, children}: BlockElementWrapperProps): JSX.Element
 {
+   const {helpHelpActive} = useContext(QContext);
+
    let link: BlockLink;
    let tooltip: BlockTooltip;
 
@@ -61,6 +67,26 @@ export default function BlockElementWrapper({data, slot, linkProps, children}: B
       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)

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

@@ -24,6 +24,7 @@ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/Q
 
 export interface BlockData
 {
+   blockId?: string;
    blockTypeName: string;
 
    tooltip?: BlockTooltip;
@@ -38,7 +39,7 @@ export interface BlockData
 
 export interface BlockTooltip
 {
-   title: string;
+   title: string | JSX.Element;
    placement: string;
 }
 

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

@@ -28,19 +28,19 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
  **
  ** ${number} ${icon}
  *******************************************************************************/
-export default function NumberIconBadgeBlock({data}: StandardBlockComponentProps): JSX.Element
+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 data={data} slot="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 data={data} slot="icon">
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="icon">
                <Icon style={{color: data.styles.color, fontSize: "1rem", position: "relative", top: "3px"}}>{data.values.iconName}</Icon>
             </BlockElementWrapper>
          }

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

@@ -35,14 +35,14 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
  **    ${heading}
  **    ${bar}             ${value}
  *******************************************************************************/
-export default function ProgressBarBlock({data}: StandardBlockComponentProps): JSX.Element
+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 data={data} slot="heading">
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="heading">
                   <span>{data.values.heading}</span>
                </BlockElementWrapper>
             </div>
@@ -50,7 +50,7 @@ export default function ProgressBarBlock({data}: StandardBlockComponentProps): J
 
          <div style={{display: "flex", alignItems: "center", marginBottom: "0.75rem"}}>
 
-            <BlockElementWrapper data={data} slot="bar" linkProps={{style: {width: "100%"}}}>
+            <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> : <></>
@@ -59,7 +59,7 @@ export default function ProgressBarBlock({data}: StandardBlockComponentProps): J
             </BlockElementWrapper>
 
             <div style={{width: "60px", textAlign: "right", fontWeight: 600, color: "#3D3D3D"}}>
-               <BlockElementWrapper data={data} slot="value">
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
                   <span>{data.values.value ?? `${(data.values.percent as number).toFixed(1)}%`}</span>
                </BlockElementWrapper>
             </div>

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

@@ -29,7 +29,7 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
  **
  ** ${label} ${value}
  *******************************************************************************/
-export default function TableSubRowDetailRowBlock({data}: StandardBlockComponentProps): JSX.Element
+export default function TableSubRowDetailRowBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
 {
    return (
       <div style={{display: "flex", maxWidth: "calc(100% - 24px)", justifyContent: "space-between"}}>
@@ -37,7 +37,7 @@ export default function TableSubRowDetailRowBlock({data}: StandardBlockComponent
          {
             data.values.label &&
             <div style={{overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis"}}>
-               <BlockElementWrapper data={data} slot="label">
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="label">
                   <span style={{color: data.styles.labelColor}}>{data.values.label}</span>
                </BlockElementWrapper>
             </div>
@@ -45,7 +45,7 @@ export default function TableSubRowDetailRowBlock({data}: StandardBlockComponent
 
          {
             data.values.value &&
-            <BlockElementWrapper data={data} slot="value">
+            <BlockElementWrapper metaData={widgetMetaData} data={data} slot="value">
                <span style={{color: data.styles.valueColor}}>{data.values.value}</span>
             </BlockElementWrapper>
          }

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

@@ -27,10 +27,10 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
  **
  ** ${text}
  *******************************************************************************/
-export default function TextBlock({data}: StandardBlockComponentProps): JSX.Element
+export default function TextBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
 {
    return (
-      <BlockElementWrapper data={data} slot="">
+      <BlockElementWrapper metaData={widgetMetaData} data={data} slot="">
          <span>{data.values.text}</span>
       </BlockElementWrapper>
    );

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

@@ -35,7 +35,7 @@ import {StandardBlockComponentProps} from "qqq/components/widgets/blocks/BlockMo
  ** ${icon} ${number}
  ** ${context}
  *******************************************************************************/
-export default function UpOrDownNumberBlock({data}: StandardBlockComponentProps): JSX.Element
+export default function UpOrDownNumberBlock({widgetMetaData, data}: StandardBlockComponentProps): JSX.Element
 {
    if (!data.styles)
    {
@@ -61,7 +61,7 @@ export default function UpOrDownNumberBlock({data}: StandardBlockComponentProps)
          <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 data={data} slot="number">
+               <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>
@@ -70,7 +70,7 @@ export default function UpOrDownNumberBlock({data}: StandardBlockComponentProps)
             </div>
 
             <div style={{fontWeight: 500, fontSize: "0.875rem", color: "#7b809a", marginLeft: "0.25rem"}}>
-               <BlockElementWrapper data={data} slot="context">
+               <BlockElementWrapper metaData={widgetMetaData} data={data} slot="context">
                   <span>{data.values.context}</span>
                </BlockElementWrapper>
             </div>

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
 {
@@ -82,7 +80,7 @@ export default function DataBagViewer({dataBagId}: Props): JSX.Element
    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,7 +98,7 @@ 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);

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,8 +97,8 @@ 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);
@@ -106,7 +106,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    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"));
@@ -135,7 +135,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             }
             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
@@ -147,14 +147,14 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
             setScriptTypeFileSchemaList(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);
@@ -253,12 +253,12 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
    const handleSelectFile = (event: SelectChangeEvent) =>
    {
       setSelectedFileName(event.target.value);
-   }
+   };
 
    const getSelectedFileCode = (): string =>
    {
       return (getSelectedVersionCode()[selectedFileName] ?? "");
-   }
+   };
 
    const getSelectedFileType = (): string =>
    {
@@ -272,12 +272,12 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       }
 
       return ("javascript"); // have some default...
-   }
+   };
 
    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)
    {
@@ -348,7 +348,7 @@ export default function ScriptViewer({scriptId, associatedScriptTableName, assoc
       {
          (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";

src/qqq/pages/apps/Home.tsx

@@ -77,9 +77,11 @@ 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(() =>
@@ -128,9 +130,10 @@ 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);
@@ -171,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);
 
@@ -299,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
@@ -340,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
@@ -383,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
@@ -395,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) ?
@@ -402,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>
@@ -411,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/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>);
-}
+};
 
 
 /*******************************************************************************
@@ -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)
    {
       setIsFirstRenderAfterChangingTables(false);
 
       console.log("This is the first render after changing tables - so - setting state based on 'defaults' from localStorage");
-      setView(defaultView)
+      setView(defaultView);
    }
 
    /*******************************************************************************
@@ -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>
@@ -552,7 +552,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             <ul style={{marginLeft: "1rem"}}>
                {joinLabels.map((name) => <li key={name}>{name}</li>)}
             </ul>
-         </div>
+         </div>;
 
          return (
             <div>
@@ -586,7 +586,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             </Tooltip>
          </Typography>
       );
-   }
+   };
 
    ///////////////////////
    // Keyboard handling //
@@ -602,12 +602,12 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          {
             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")
             {
-               e.preventDefault()
+               e.preventDefault();
                updateTable("'r' keyboard event");
             }
             /*
@@ -620,23 +620,23 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             */
             else if (!e.metaKey && e.key === "f")
             {
-               e.preventDefault()
+               e.preventDefault();
 
                // @ts-ignore
                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]);
 
 
    /*******************************************************************************
@@ -645,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 //
@@ -703,7 +703,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setView(view);
       setViewAsJson(JSON.stringify(view));
       localStorage.setItem(viewLocalStorageKey, JSON.stringify(view));
-   }
+   };
 
 
    /*******************************************************************************
@@ -712,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();
    };
@@ -735,7 +735,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          fieldName = `${table.name}.${field.name}`;
       }
 
-      view.queryColumns.setIsVisible(fieldName, newValue)
+      view.queryColumns.setIsVisible(fieldName, newValue);
 
       /////////////////////
       // update the grid //
@@ -745,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();
-   }
+   };
 
 
    /*******************************************************************************
@@ -790,7 +790,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setPinnedColumns(queryColumns.toGridPinnedColumns());
       setColumnVisibilityModel(queryColumns.toColumnVisibilityModel());
       setColumnsModel(columns);
-   }
+   };
 
 
    /*******************************************************************************
@@ -799,7 +799,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const promptForTableVariantSelection = () =>
    {
       setTableVariantPromptOpen(true);
-   }
+   };
 
 
    /*******************************************************************************
@@ -826,7 +826,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return (rs);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1055,7 +1055,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setRowsPerPage(size);
 
       view.rowsPerPage = size;
-      doSetView(view)
+      doSetView(view);
    };
 
    /*******************************************************************************
@@ -1064,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);
    };
 
    /*******************************************************************************
@@ -1121,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);
       });
@@ -1150,7 +1150,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       queryColumns.updateColumnOrder(columnOrdering);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1162,7 +1162,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       queryColumns.updateColumnWidth(params.colDef.field, params.width);
 
       view.queryColumns = queryColumns;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1185,7 +1185,7 @@ 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));
       }
 
       //////////////////////////////////////////////////////////
@@ -1209,7 +1209,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    const handleColumnHeaderClick = (params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails): void =>
    {
       event.defaultMuiPrevented = true;
-   }
+   };
 
 
    /*******************************************************************************
@@ -1227,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 //
@@ -1240,7 +1240,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////////////////////////////////////////////////////////////////////////////////
       // @ts-ignore
       setTimeout(() => basicAndAdvancedQueryControlsRef?.current?.ensureAllFilterCriteriaAreActiveQuickFilters(view.queryFilter, "activatedView"));
-   }
+   };
 
 
    /*******************************************************************************
@@ -1287,14 +1287,14 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       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
@@ -1327,9 +1327,9 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       if (!isFromActivateView)
       {
          view.queryColumns = queryColumns;
-         doSetView(view)
+         doSetView(view);
-      }
       }
+   };
 
 
    /*******************************************************************************
@@ -1341,7 +1341,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       setQuickFilterFieldNames([...(names ?? [])]);
 
       view.quickFilterFieldNames = names;
-      doSetView(view)
+      doSetView(view);
    };
 
 
@@ -1354,7 +1354,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
 
       view.mode = newValue;
       doSetView(view);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1372,7 +1372,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return (selectedIds.length);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1403,7 +1403,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       }
 
       return "";
-   }
+   };
 
 
    /*******************************************************************************
@@ -1568,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);
@@ -1577,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")}`);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1587,7 +1587,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       setCurrentSavedView(null);
       localStorage.removeItem(currentSavedViewLocalStorageKey);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1603,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
@@ -1638,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.
@@ -1668,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);
@@ -1689,11 +1689,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             newView.queryColumns = QQueryColumns.buildDefaultForTable(tableMetaData);
          }
 
-         qRecord.values.set("viewJson", JSON.stringify(newView))
+         qRecord.values.set("viewJson", JSON.stringify(newView));
       }
 
       return (qRecord);
-   }
+   };
 
 
    /*******************************************************************************
@@ -1798,7 +1798,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
          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(", ")}).`);
       }
-   }
+   };
 
 
    /*******************************************************************************
@@ -1834,8 +1834,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       ///////////////////////////
       // open the filter panel //
       ///////////////////////////
-      gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
+      gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
-   }
+   };
 
 
    /*******************************************************************************
@@ -2006,7 +2006,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                }
                else
                {
-                  gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters)
+                  gridApiRef.current.showPreferences(GridPreferencePanelsValue.filters);
                }
 
                event.stopPropagation();
@@ -2116,7 +2116,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             // this page //
             ///////////////
             programmaticallySelectSomeOrAllRows();
-            setSelectFullFilterState("checked")
+            setSelectFullFilterState("checked");
          }
          else if (selectedIndex == 1)
          {
@@ -2124,7 +2124,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             // full query result //
             ///////////////////////
             programmaticallySelectSomeOrAllRows();
-            setSelectFullFilterState("filter")
+            setSelectFullFilterState("filter");
          }
          else if (selectedIndex == 2)
          {
@@ -2138,7 +2138,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             /////////////////////
             // clear selection //
             /////////////////////
-            setSelectFullFilterState("n/a")
+            setSelectFullFilterState("n/a");
             setRowSelectionModel([]);
             setSelectedIds([]);
          }
@@ -2166,7 +2166,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
                      {
                         programmaticallySelectSomeOrAllRows(value);
                         setSelectionSubsetSize(value);
-                        setSelectFullFilterState("filterSubset")
+                        setSelectFullFilterState("filterSubset");
                      }
                      else
                      {
@@ -2453,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;
             }
 
@@ -2487,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");
@@ -2511,11 +2511,11 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
    {
       if (pageState == "ready")
       {
-         pageLoadingState.setNotLoading()
+         pageLoadingState.setNotLoading();
 
          if (!tableVariantPromptOpen)
          {
-            updateTable("pageState is now ready")
+            updateTable("pageState is now ready");
          }
       }
    }, [pageState, tableVariantPromptOpen]);
@@ -2563,7 +2563,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
       let gotoVariantSubHeader = <></>;
       if (tableMetaData?.usesVariants)
       {
-         gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>
+         gotoVariantSubHeader = <Box mb={2}>{getTableVariantHeader(tableVariant)}</Box>;
       }
 
       return (
@@ -2615,7 +2615,7 @@ 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)
       {
@@ -2653,7 +2653,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element
             color: buttonColor,
             backgroundColor: buttonBackground,
          }
-      }
+      };
 
       return (<Box order="2">
          <FieldListMenu
@@ -2668,7 +2668,7 @@ 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 //

src/qqq/utils/qqq/FilterUtils.tsx

@@ -114,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);
             }
@@ -260,18 +263,24 @@ 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)
       {
-         return ({canFilterWorkAsBasic: true});
+         return ({canFilterWorkAsBasic: true, canFilterWorkAsAdvanced: true});
       }
 
       if (filter.booleanOperator == "OR")
       {
-         reasonsWhyItCannot.push("Filter uses the 'OR' operator.")
+         reasonsWhyItCannot.push("Filter uses the 'OR' operator.");
+      }
+
+      if (filter.subFilters?.length > 0)
+      {
+         reasonsWhyItCannot.push("Filter contains sub-filters.");
+         return ({canFilterWorkAsBasic: false, canFilterWorkAsAdvanced: false, reasonsWhyItCannot: reasonsWhyItCannot});
       }
 
       if (filter.criteria)
@@ -306,11 +315,11 @@ class FilterUtils
 
       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});
       }
    }
 
@@ -369,7 +378,7 @@ class FilterUtils
             }
             else if (fieldMetaData.type == QFieldType.BOOLEAN)
             {
-               labels.push(value == true ? "yes" : "no")
+               labels.push(value == true ? "yes" : "no");
             }
             else if (fieldMetaData.type == QFieldType.DATE_TIME)
             {
@@ -447,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);
    }
@@ -494,33 +503,33 @@ class FilterUtils
             case QCriteriaOperator.LESS_THAN:
                if (isDate || isDateTime)
                {
-                  return ("is before")
+                  return ("is before");
                }
                return ("less than");
             case QCriteriaOperator.LESS_THAN_OR_EQUALS:
                if (isDate)
                {
-                  return ("is on or before")
+                  return ("is on or before");
                }
                if (isDateTime)
                {
-                  return ("is at or before")
+                  return ("is at or before");
                }
                return ("less than or equals");
             case QCriteriaOperator.GREATER_THAN:
                if (isDate || isDateTime)
                {
-                  return ("is after")
+                  return ("is after");
                }
                return ("greater than or equals");
             case QCriteriaOperator.GREATER_THAN_OR_EQUALS:
                if (isDate)
                {
-                  return ("is on or after")
+                  return ("is on or after");
                }
                if (isDateTime)
                {
-                  return ("is at or after")
+                  return ("is at or after");
                }
                return ("greater than or equals");
             case QCriteriaOperator.IS_BLANK:
@@ -536,7 +545,7 @@ class FilterUtils
       catch (e)
       {
          console.log(`Error getting operator human string for ${JSON.stringify(criteria)}: ${e}`);
-         return criteria?.operator
+         return criteria?.operator;
       }
    }
 
@@ -564,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
       {