diff --git a/ecl/hql/hqlexpr.cpp b/ecl/hql/hqlexpr.cpp
index 90e2ef1d91a..395f2a64b55 100644
--- a/ecl/hql/hqlexpr.cpp
+++ b/ecl/hql/hqlexpr.cpp
@@ -11030,7 +11030,9 @@ IHqlExpression *CHqlDelayedCall::clone(HqlExprArray &newkids)
 
 IHqlExpression * CHqlDelayedCall::makeDelayedCall(IHqlExpression * _funcdef, HqlExprArray &operands)
 {
-    ITypeInfo * returnType = _funcdef->queryType()->queryChildType();
+    ITypeInfo * funcType = _funcdef->queryType();
+    assertex(funcType->getTypeCode() == type_function);
+    ITypeInfo * returnType = funcType->queryChildType();
     CHqlDelayedCall * ret;
     switch (returnType->getTypeCode())
     {
diff --git a/ecl/hql/hqlgram2.cpp b/ecl/hql/hqlgram2.cpp
index 9eb87818735..dbea47b84c0 100644
--- a/ecl/hql/hqlgram2.cpp
+++ b/ecl/hql/hqlgram2.cpp
@@ -3638,6 +3638,30 @@ IHqlExpression * HqlGram::implementInterfaceFromModule(const attribute & modpos,
             {
                 HqlExprArray parameters;
                 bool isParametered = extractSymbolParameters(parameters, &baseSym);
+                if (baseSym.isFunction() != match->isFunction())
+                {
+                    if (isParametered)
+                    {
+                        //Convert the value to a function definition - the parameters will be ignored
+                        IHqlExpression * formals = queryFunctionParameters(&baseSym);
+                        IHqlExpression * defaults = queryFunctionDefaults(&baseSym);
+                        OwnedHqlExpr funcdef = createFunctionDefinition(id, LINK(match->queryBody()), LINK(formals), LINK(defaults), NULL);
+                        match.setown(match->cloneAllAnnotations(funcdef));
+                    }
+                    else
+                    {
+                        //Convert a function into a value - possible if all parameters (including none) have default values
+                        if (!allParametersHaveDefaults(match))
+                        {
+                            reportError(ERR_EXPECTED_ATTRIBUTE, ipos, "Symbol %s is defined as a value in the base scope, but a function with non-default parameters in the interface", str(id));
+                        }
+                        else
+                        {
+                            HqlExprArray actuals;
+                            match.setown(createBoundFunction(nullptr, match, actuals, nullptr, false));
+                        }
+                    }
+                }
 
                 checkDerivedCompatible(id, newScopeExpr, match, isParametered, parameters, modpos);
                 newScope->defineSymbol(LINK(match));
diff --git a/ecl/regress/iproject.ecl b/ecl/regress/iproject.ecl
new file mode 100644
index 00000000000..3822182065d
--- /dev/null
+++ b/ecl/regress/iproject.ecl
@@ -0,0 +1,50 @@
+/*##############################################################################
+
+    HPCC SYSTEMS software Copyright (C) 2024 HPCC Systems®.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+############################################################################## */
+
+myModule := MODULE
+
+    EXPORT value1 := 100;
+    EXPORT value2 := 200;
+    EXPORT value3(unsigned x = 10) := 300;
+    EXPORT value4() := 400;
+
+END;
+
+myInterface := INTERFACE
+
+    EXPORT value1 := 0;
+    EXPORT value2(unsigned unknown) := 0;
+    EXPORT value3 := 0;
+    EXPORT value4() := 0;
+
+END;
+
+
+
+display(myInterface x) := FUNCTION
+    RETURN
+        ORDERED(
+            OUTPUT(x.value1);
+            OUTPUT(x.value2(99999));
+            OUTPUT(x.value3);
+            OUTPUT(x.value4());
+        );
+END;
+
+
+mappedModule := PROJECT(myModule, myInterface);
+display(mappedModule);
\ No newline at end of file
diff --git a/ecl/regress/iproject_err.ecl b/ecl/regress/iproject_err.ecl
new file mode 100644
index 00000000000..cb4d64b7c74
--- /dev/null
+++ b/ecl/regress/iproject_err.ecl
@@ -0,0 +1,50 @@
+/*##############################################################################
+
+    HPCC SYSTEMS software Copyright (C) 2024 HPCC Systems®.
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+############################################################################## */
+
+myModule := MODULE
+
+    EXPORT value1 := 100;
+    EXPORT value2 := 200;
+    EXPORT value3(unsigned i) := 300;   // invalid - no default value supplied
+    EXPORT value4() := 400;
+
+END;
+
+myInterface := INTERFACE
+
+    EXPORT value1 := 0;
+    EXPORT value2() := 0;
+    EXPORT value3 := 0;
+    EXPORT value4() := 0;
+
+END;
+
+
+
+display(myInterface x) := FUNCTION
+    RETURN
+        ORDERED(
+            OUTPUT(x.value1);
+            OUTPUT(x.value2());
+            OUTPUT(x.value3);
+            OUTPUT(x.value4());
+        );
+END;
+
+
+mappedModule := PROJECT(myModule, myInterface);
+display(mappedModule);
\ No newline at end of file
diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json
index 3391efbb526..4fcce04e973 100644
--- a/esp/src/package-lock.json
+++ b/esp/src/package-lock.json
@@ -18,7 +18,7 @@
         "@hpcc-js/chart": "2.84.1",
         "@hpcc-js/codemirror": "2.63.0",
         "@hpcc-js/common": "2.72.0",
-        "@hpcc-js/comms": "2.95.0",
+        "@hpcc-js/comms": "2.96.1",
         "@hpcc-js/dataflow": "8.1.7",
         "@hpcc-js/eclwatch": "2.75.3",
         "@hpcc-js/graph": "2.86.0",
@@ -2082,10 +2082,9 @@
       }
     },
     "node_modules/@hpcc-js/comms": {
-      "version": "2.95.0",
-      "resolved": "https://registry.npmjs.org/@hpcc-js/comms/-/comms-2.95.0.tgz",
-      "integrity": "sha512-kzEyDxf1Msus5rhU0yO826JxgIl2kh/bI7yNTxHAlCfLKp4SU//zrj/MK5SuEDs2lUHvmTkfx1jbfGUAK3RGFg==",
-      "license": "Apache-2.0",
+      "version": "2.96.1",
+      "resolved": "https://registry.npmjs.org/@hpcc-js/comms/-/comms-2.96.1.tgz",
+      "integrity": "sha512-38vIe8foZa5fYtrj65oeWyYWUDZmQTbKetHG5HXWZWMu0Lfmln8uG5/J7mO0ilw3ls2oZj7xOk5T/4xvg7v43w==",
       "dependencies": {
         "@hpcc-js/ddl-shim": "^2.21.0",
         "@hpcc-js/util": "^2.52.0",
diff --git a/esp/src/package.json b/esp/src/package.json
index de3511485ec..db7708ef45d 100644
--- a/esp/src/package.json
+++ b/esp/src/package.json
@@ -44,7 +44,7 @@
     "@hpcc-js/chart": "2.84.1",
     "@hpcc-js/codemirror": "2.63.0",
     "@hpcc-js/common": "2.72.0",
-    "@hpcc-js/comms": "2.95.0",
+    "@hpcc-js/comms": "2.96.1",
     "@hpcc-js/dataflow": "8.1.7",
     "@hpcc-js/eclwatch": "2.75.3",
     "@hpcc-js/graph": "2.86.0",
diff --git a/esp/src/src-react/components/Helpers.tsx b/esp/src/src-react/components/Helpers.tsx
index 458308debd8..73fed185eca 100644
--- a/esp/src/src-react/components/Helpers.tsx
+++ b/esp/src/src-react/components/Helpers.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
 import * as ESPRequest from "src/ESPRequest";
 import nlsHPCC from "src/nlsHPCC";
 import { HelperRow, useWorkunitHelpers } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -223,18 +224,18 @@ export const Helpers: React.FunctionComponent<HelpersProps> = ({
         setData(helpers);
     }, [helpers]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"id"}
-            alphaNumColumns={{ Value: true }}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"id"}
+                alphaNumColumns={{ Value: true }}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/InfoGrid.tsx b/esp/src/src-react/components/InfoGrid.tsx
index da3a212ba8b..99cccb3fafc 100644
--- a/esp/src/src-react/components/InfoGrid.tsx
+++ b/esp/src/src-react/components/InfoGrid.tsx
@@ -236,7 +236,7 @@ export const InfoGrid: React.FunctionComponent<InfoGridProps> = ({
         }
     }, [data.length]);
 
-    return <div style={{ height: "100%" }}>
+    return <div style={{ height: "100%", overflow: "hidden" }}>
         <CommandBar items={buttons} farItems={copyButtons} />
         <SizeMe monitorHeight >{({ size }) =>
             <FluentGrid
diff --git a/esp/src/src-react/components/LogViewer.tsx b/esp/src/src-react/components/LogViewer.tsx
index 2e44c369051..4f5e5cdcf41 100644
--- a/esp/src/src-react/components/LogViewer.tsx
+++ b/esp/src/src-react/components/LogViewer.tsx
@@ -102,16 +102,14 @@ export const LogViewer: React.FunctionComponent<LogViewerProps> = ({
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <div style={{ position: "relative", height: "100%" }}>
-                <FluentGrid
-                    data={data}
-                    primaryID={"dateTime"}
-                    columns={columns}
-                    setSelection={setSelection}
-                    setTotal={setTotal}
-                    refresh={refreshTable}
-                ></FluentGrid>
-            </div>
+            <FluentGrid
+                data={data}
+                primaryID={"dateTime"}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
         }
     />;
 };
diff --git a/esp/src/src-react/components/Logs.tsx b/esp/src/src-react/components/Logs.tsx
index d9703c0e74f..86f7297abc1 100644
--- a/esp/src/src-react/components/Logs.tsx
+++ b/esp/src/src-react/components/Logs.tsx
@@ -182,7 +182,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
     return <HolyGrail
         header={<CommandBar items={buttons} farItems={copyButtons} />}
         main={
-            <>
+            <div style={{ position: "relative", height: "100%" }}>
                 <FluentPagedGrid
                     store={gridStore}
                     query={query}
@@ -200,7 +200,7 @@ export const Logs: React.FunctionComponent<LogsProps> = ({
                     refresh={refreshTable}
                 ></FluentPagedGrid>
                 <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
-            </>
+            </div>
         }
         footer={<FluentPagedFooter
             persistID={"cloudlogs"}
diff --git a/esp/src/src-react/components/MetricsOptions.tsx b/esp/src/src-react/components/MetricsOptions.tsx
index ce48f07513e..aa0d20a108f 100644
--- a/esp/src/src-react/components/MetricsOptions.tsx
+++ b/esp/src/src-react/components/MetricsOptions.tsx
@@ -67,16 +67,18 @@ const GridOptions: React.FunctionComponent<GridOptionsProps> = ({
         }
     }, [selectionHandler, strSelection]);
 
-    return <FluentGrid
-        data={data}
-        primaryID={"id"}
-        columns={columns}
-        selectionMode={SelectionMode.multiple}
-        setSelection={selectionHandler}
-        setTotal={setTotal}
-        refresh={refreshTable}
-        height={`${innerHeight}px`}
-    ></FluentGrid>;
+    return <div style={{ position: "relative", height: 400 }}>
+        <FluentGrid
+            data={data}
+            primaryID={"id"}
+            columns={columns}
+            selectionMode={SelectionMode.multiple}
+            setSelection={selectionHandler}
+            setTotal={setTotal}
+            refresh={refreshTable}
+            height={`${innerHeight}px`}
+        ></FluentGrid>
+    </div>;
 };
 
 interface AddLabelProps {
diff --git a/esp/src/src-react/components/Resources.tsx b/esp/src/src-react/components/Resources.tsx
index d3cb0a73a53..ccae64dfa5e 100644
--- a/esp/src/src-react/components/Resources.tsx
+++ b/esp/src/src-react/components/Resources.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResources } from "../hooks/workunit";
 import { updateParam } from "../util/history";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { IFrame } from "./IFrame";
@@ -108,21 +109,21 @@ export const Resources: React.FunctionComponent<ResourcesProps> = ({
         }));
     }, [resources, wuid]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        {preview && webUrl ?
-            <IFrame src={webUrl} /> :
-            <FluentGrid
-                data={data}
-                primaryID={"DisplayPath"}
-                alphaNumColumns={{ Value: true }}
-                sort={sort}
-                columns={columns}
-                setSelection={setSelection}
-                setTotal={setTotal}
-                refresh={refreshTable}
-            ></FluentGrid>}
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            preview && webUrl ?
+                <IFrame src={webUrl} /> :
+                <FluentGrid
+                    data={data}
+                    primaryID={"DisplayPath"}
+                    alphaNumColumns={{ Value: true }}
+                    sort={sort}
+                    columns={columns}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/Results.tsx b/esp/src/src-react/components/Results.tsx
index 02595519fd9..1343c84268d 100644
--- a/esp/src/src-react/components/Results.tsx
+++ b/esp/src/src-react/components/Results.tsx
@@ -1,9 +1,10 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, Pivot, PivotItem, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, Pivot, PivotItem } from "@fluentui/react";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResults } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { pivotItemStyle } from "../layouts/pivot";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
@@ -141,21 +142,21 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
         }));
     }, [results]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"__hpcc_id"}
-            alphaNumColumns={{ Name: true, Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane >;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"__hpcc_id"}
+                alphaNumColumns={{ Name: true, Value: true }}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
 
 interface TabbedResultsProps {
diff --git a/esp/src/src-react/components/SourceFiles.tsx b/esp/src/src-react/components/SourceFiles.tsx
index cda748e8845..2c1b1c6578b 100644
--- a/esp/src/src-react/components/SourceFiles.tsx
+++ b/esp/src/src-react/components/SourceFiles.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Image, Link } from "@fluentui/react";
 import * as Utility from "src/Utility";
 import { QuerySortItem } from "src/store/Store";
 import nlsHPCC from "src/nlsHPCC";
 import { useWorkunitSourceFiles } from "../hooks/workunit";
 import { pushParams } from "../util/history";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { Fields } from "./forms/Fields";
 import { Filter } from "./forms/Filter";
@@ -131,20 +132,22 @@ export const SourceFiles: React.FunctionComponent<SourceFilesProps> = ({
         setData(files);
     }, [filter, sourceFiles]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"Name"}
-            alphaNumColumns={{ Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-        <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <div style={{ position: "relative", height: "100%" }}>
+                <FluentGrid
+                    data={data}
+                    primaryID={"Name"}
+                    alphaNumColumns={{ Value: true }}
+                    sort={sort}
+                    columns={columns}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+                <Filter showFilter={showFilter} setShowFilter={setShowFilter} filterFields={filterFields} onApply={pushParams} />
+            </div>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/SubFiles.tsx b/esp/src/src-react/components/SubFiles.tsx
index e7088869472..5b1e2f3a0c7 100644
--- a/esp/src/src-react/components/SubFiles.tsx
+++ b/esp/src/src-react/components/SubFiles.tsx
@@ -1,11 +1,12 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, FontIcon, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, FontIcon, ICommandBarItemProps, Link } from "@fluentui/react";
 import * as ESPLogicalFile from "src/ESPLogicalFile";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import * as WsDfu from "src/WsDfu";
 import { useConfirm } from "../hooks/confirm";
 import { useFile, useSubfiles } from "../hooks/file";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { pushUrl } from "../util/history";
@@ -159,21 +160,21 @@ export const SubFiles: React.FunctionComponent<SubFilesProps> = ({
         setUIState(state);
     }, [selection]);
 
-    return <>
-        <ScrollablePane>
-            <Sticky>
-                <CommandBar items={buttons} farItems={copyButtons} />
-            </Sticky>
-            <FluentGrid
-                data={data}
-                primaryID={"Name"}
-                columns={columns}
-                alphaNumColumns={{ RecordCount: true, Totalsize: true }}
-                setSelection={setSelection}
-                setTotal={setTotal}
-                refresh={refreshTable}
-            ></FluentGrid>
-        </ScrollablePane >
-        <DeleteSubfilesConfirm />
-    </>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <div style={{ position: "relative", height: "100%" }}>
+                <FluentGrid
+                    data={data}
+                    primaryID={"Name"}
+                    columns={columns}
+                    alphaNumColumns={{ RecordCount: true, Totalsize: true }}
+                    setSelection={setSelection}
+                    setTotal={setTotal}
+                    refresh={refreshTable}
+                ></FluentGrid>
+                <DeleteSubfilesConfirm />
+            </div>
+        }
+    />;
 };
\ No newline at end of file
diff --git a/esp/src/src-react/components/SuperFiles.tsx b/esp/src/src-react/components/SuperFiles.tsx
index b9cb69e99e4..49e83e1a68b 100644
--- a/esp/src/src-react/components/SuperFiles.tsx
+++ b/esp/src/src-react/components/SuperFiles.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useFile } from "../hooks/file";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -88,18 +89,18 @@ export const SuperFiles: React.FunctionComponent<SuperFilesProps> = ({
         }
     }, [file]);
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"Name"}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"Name"}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/Variables.tsx b/esp/src/src-react/components/Variables.tsx
index 35c3231f328..6cb7f193df6 100644
--- a/esp/src/src-react/components/Variables.tsx
+++ b/esp/src/src-react/components/Variables.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitVariables } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -54,19 +55,19 @@ export const Variables: React.FunctionComponent<VariablesProps> = ({
 
     const copyButtons = useCopyButtons(columns, selection, "variables");
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"__hpcc_id"}
-            alphaNumColumns={{ Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"__hpcc_id"}
+                alphaNumColumns={{ Value: true }}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/Workflows.tsx b/esp/src/src-react/components/Workflows.tsx
index 7c12d4415f8..c372e2e3c81 100644
--- a/esp/src/src-react/components/Workflows.tsx
+++ b/esp/src/src-react/components/Workflows.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, ScrollablePane, Sticky } from "@fluentui/react";
+import { CommandBar, ContextualMenuItemType, ICommandBarItemProps } from "@fluentui/react";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitWorkflows } from "../hooks/workunit";
+import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 
@@ -73,19 +74,19 @@ export const Workflows: React.FunctionComponent<WorkflowsProps> = ({
 
     const copyButtons = useCopyButtons(columns, selection, "workflows");
 
-    return <ScrollablePane>
-        <Sticky>
-            <CommandBar items={buttons} farItems={copyButtons} />
-        </Sticky>
-        <FluentGrid
-            data={data}
-            primaryID={"__hpcc_id"}
-            alphaNumColumns={{ Name: true, Value: true }}
-            sort={sort}
-            columns={columns}
-            setSelection={setSelection}
-            setTotal={setTotal}
-            refresh={refreshTable}
-        ></FluentGrid>
-    </ScrollablePane>;
+    return <HolyGrail
+        header={<CommandBar items={buttons} farItems={copyButtons} />}
+        main={
+            <FluentGrid
+                data={data}
+                primaryID={"__hpcc_id"}
+                alphaNumColumns={{ Name: true, Value: true }}
+                sort={sort}
+                columns={columns}
+                setSelection={setSelection}
+                setTotal={setTotal}
+                refresh={refreshTable}
+            ></FluentGrid>
+        }
+    />;
 };
diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
index 8e595bf7b16..f30bbf974ae 100644
--- a/esp/src/src-react/components/WorkunitDetails.tsx
+++ b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -27,8 +27,7 @@ import { Workflows } from "./Workflows";
 import { WorkunitSummary } from "./WorkunitSummary";
 import { TabInfo, DelayLoadedPanel, OverflowTabList } from "./controls/TabbedPanes/index";
 import { ECLArchive } from "./ECLArchive";
-
-const Metrics = React.lazy(() => import("./Metrics").then(mod => ({ default: mod.Metrics })));
+import { Metrics } from "./Metrics";
 
 const logger = scopedLogger("src-react/components/WorkunitDetails.tsx");
 
diff --git a/esp/src/src-react/components/controls/Grid.tsx b/esp/src/src-react/components/controls/Grid.tsx
index 129271d47b3..e0ddc78c7e0 100644
--- a/esp/src/src-react/components/controls/Grid.tsx
+++ b/esp/src/src-react/components/controls/Grid.tsx
@@ -237,12 +237,21 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
         });
     });
 
+    const abortController = React.useRef<AbortController>();
+
+    React.useEffect(() => {
+        if (abortController.current) {
+            abortController.current.abort({ message: "Grid aborting stale request" });
+        }
+        abortController.current = new AbortController();
+    }, [query]);
+
     const refreshTable = useDeepCallback((clearSelection = false) => {
         if (isNaN(start) || isNaN(count)) return;
         if (clearSelection) {
             selectionHandler.setItems([], true);
         }
-        const storeQuery = store.query({ ...query }, { start, count, sort: sorted ? [sorted] : undefined });
+        const storeQuery = store.query({ ...query }, { start, count, sort: sorted ? [sorted] : undefined }, abortController.current.signal);
         storeQuery.total.then(total => {
             setTotal(total);
         });
@@ -308,24 +317,26 @@ const FluentStoreGrid: React.FunctionComponent<FluentStoreGridProps> = ({
         columnWidths.set(column.key, newWidth);
     }, [columnWidths]);
 
-    return <ScrollablePane>
-        <DetailsList
-            compact={true}
-            items={items}
-            columns={fluentColumns}
-            layoutMode={DetailsListLayoutMode.fixedColumns}
-            constrainMode={ConstrainMode.unconstrained}
-            selection={selectionHandler}
-            isSelectedOnFocus={false}
-            selectionPreservedOnEmptyClick={true}
-            onColumnHeaderClick={onColumnClick}
-            onRenderDetailsHeader={renderDetailsHeader}
-            onColumnResize={columnResize}
-            onRenderRow={onRenderRow}
-            styles={gridStyles(height)}
-            selectionMode={selectionMode}
-        />
-    </ScrollablePane>;
+    return <div style={{ position: "relative", height: "100%" }}>
+        <ScrollablePane>
+            <DetailsList
+                compact={true}
+                items={items}
+                columns={fluentColumns}
+                layoutMode={DetailsListLayoutMode.fixedColumns}
+                constrainMode={ConstrainMode.unconstrained}
+                selection={selectionHandler}
+                isSelectedOnFocus={false}
+                selectionPreservedOnEmptyClick={true}
+                onColumnHeaderClick={onColumnClick}
+                onRenderDetailsHeader={renderDetailsHeader}
+                onColumnResize={columnResize}
+                onRenderRow={onRenderRow}
+                styles={gridStyles(height)}
+                selectionMode={selectionMode}
+            />
+        </ScrollablePane>
+    </div>;
 };
 
 interface FluentGridProps {
diff --git a/esp/src/src/ESPWorkunit.ts b/esp/src/src/ESPWorkunit.ts
index 1efadc5afc1..5cb9b91aeb5 100644
--- a/esp/src/src/ESPWorkunit.ts
+++ b/esp/src/src/ESPWorkunit.ts
@@ -1082,11 +1082,11 @@ export function CreateWUQueryStore(): BaseStore<WsWorkunitsNS.WUQuery, typeof Wo
         count: "PageSize",
         sortBy: "Sortby",
         descending: "Descending"
-    }, "Wuid", request => {
+    }, "Wuid", (request, abortSignal) => {
         if (request.Sortby && request.Sortby === "TotalClusterTime") {
             request.Sortby = "ClusterTime";
         }
-        return service.WUQuery(request).then(response => {
+        return service.WUQuery(request, abortSignal).then(response => {
             const page = {
                 start: undefined,
                 end: undefined
diff --git a/esp/src/src/store/Deferred.ts b/esp/src/src/store/Deferred.ts
index db7c3288666..a0f4d0c65ce 100644
--- a/esp/src/src/store/Deferred.ts
+++ b/esp/src/src/store/Deferred.ts
@@ -68,7 +68,7 @@ export class Deferred<T> implements Thenable<T> {
     }
 }
 
-export class DeferredResponse<T> extends Deferred<T[]>  {
+export class DeferredResponse<T> extends Deferred<T[]> {
 
     //  --- Legacy Dojo Support (fake QeuryResults) ---
     forEach(callback) {
diff --git a/esp/src/src/store/Paged.ts b/esp/src/src/store/Paged.ts
index eb57375376a..b4c1025e8db 100644
--- a/esp/src/src/store/Paged.ts
+++ b/esp/src/src/store/Paged.ts
@@ -16,7 +16,7 @@ function dataPage<T>(array: T[], start: number, size: number, total: number): Pa
     return retVal;
 }
 
-type FetchData<R, T> = (query: QueryRequest<R>) => Thenable<{ data: T[], total: number }>;
+type FetchData<R, T> = (query: QueryRequest<R>, abortSignal?: AbortSignal) => Thenable<{ data: T[], total: number }>;
 
 export interface RequestFields<T extends BaseRow> {
     start: keyof T;
@@ -43,7 +43,7 @@ export class Paged<R extends BaseRow = BaseRow, T extends BaseRow = BaseRow> ext
         this._fetchData = fetchData;
     }
 
-    fetchData(request: QueryRequest<R>, options: QueryOptions<T>): ThenableResponse<T> {
+    fetchData(request: QueryRequest<R>, options: QueryOptions<T>, abortSignal?: AbortSignal): ThenableResponse<T> {
         if (options.start !== undefined && options.count !== undefined) {
             request[this._requestFields.start] = options.start as any;
             request[this._requestFields.count] = options.count as any;
@@ -52,7 +52,7 @@ export class Paged<R extends BaseRow = BaseRow, T extends BaseRow = BaseRow> ext
             request[this._requestFields.sortBy] = options.sort[0].attribute as any;
             request[this._requestFields.descending] = options.sort[0].descending as any;
         }
-        return this._fetchData(request).then(response => {
+        return this._fetchData(request, abortSignal).then(response => {
             response.data.forEach(row => {
                 this.index[this.getIdentity(row)] = row;
             });
diff --git a/esp/src/src/store/Store.ts b/esp/src/src/store/Store.ts
index d41d24e893c..9e8aab02b15 100644
--- a/esp/src/src/store/Store.ts
+++ b/esp/src/src/store/Store.ts
@@ -1,5 +1,8 @@
 import * as QueryResults from "dojo/store/util/QueryResults";
 import { DeferredResponse, Thenable } from "./Deferred";
+import { scopedLogger } from "@hpcc-js/util";
+
+const logger = scopedLogger("src/store/Store.ts");
 
 //  Query  ---
 export type Key = string | number | symbol;
@@ -32,7 +35,7 @@ export abstract class BaseStore<R extends BaseRow, T extends BaseRow> {
         this.responseIDField = responseIDField;
     }
 
-    protected abstract fetchData(request: QueryRequest<R>, options: QueryOptions<T>): ThenableResponse<T>;
+    protected abstract fetchData(request: QueryRequest<R>, options: QueryOptions<T>, abortSignal?: AbortSignal): ThenableResponse<T>;
 
     abstract get(id: string | number): T;
 
@@ -40,11 +43,13 @@ export abstract class BaseStore<R extends BaseRow, T extends BaseRow> {
         return object[this.responseIDField];
     }
 
-    protected query(request: QueryRequest<R>, options: QueryOptions<T>): DeferredResponse<T> {
+    protected query(request: QueryRequest<R>, options: QueryOptions<T>, abortSignal?: AbortSignal): DeferredResponse<T> {
         const retVal = new DeferredResponse<T>();
-        this.fetchData(request, options).then((data: QueryResponse<T>) => {
+        this.fetchData(request, options, abortSignal).then((data: QueryResponse<T>) => {
             retVal.total.resolve(data.total);
             retVal.resolve(data);
+        }, (err) => {
+            logger.debug(err);
         });
         return QueryResults(retVal);
     }