From 38756f08fcfc4797c9fb261763528cad9f284b3f Mon Sep 17 00:00:00 2001
From: Gordon Smith <GordonJSmith@gmail.com>
Date: Wed, 30 Oct 2024 10:50:08 +0000
Subject: [PATCH] HPCC-32834 Refactor WU Details fullscreen

Move fullscreen logic to WU Details to allow switching tabs in fullscreen mode

Signed-off-by: Gordon Smith <GordonJSmith@gmail.com>
---
 esp/src/src-react/components/FileDetails.tsx  | 118 ++++++++-------
 esp/src/src-react/components/Helpers.tsx      |   7 +-
 esp/src/src-react/components/Metrics.tsx      |  28 +---
 esp/src/src-react/components/QueryDetails.tsx |  76 +++++-----
 esp/src/src-react/components/Resources.tsx    |   8 +-
 esp/src/src-react/components/Results.tsx      |   9 +-
 .../src-react/components/WorkunitDetails.tsx  | 134 +++++++++--------
 .../src-react/components/WorkunitSummary.tsx  |  15 +-
 esp/src/src-react/layouts/Fullscreen.tsx      |  50 +++++++
 esp/src/src-react/routes.tsx                  |  24 +--
 esp/src/src-react/util/hashUrl.ts             | 141 ++++++++++++++++++
 esp/src/src-react/util/history.ts             |  32 ++--
 12 files changed, 426 insertions(+), 216 deletions(-)
 create mode 100644 esp/src/src-react/layouts/Fullscreen.tsx
 create mode 100644 esp/src/src-react/util/hashUrl.ts

diff --git a/esp/src/src-react/components/FileDetails.tsx b/esp/src/src-react/components/FileDetails.tsx
index c936e617142..89c2fb8dc3c 100644
--- a/esp/src/src-react/components/FileDetails.tsx
+++ b/esp/src/src-react/components/FileDetails.tsx
@@ -3,9 +3,10 @@ import { WsDfu } from "@hpcc-js/comms";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
-import { FileParts } from "./FileParts";
 import { useFile, useDefFile } from "../hooks/file";
-import { pushUrl, replaceUrl } from "../util/history";
+import { pushUrl, replaceUrl, updateFullscreen } from "../util/history";
+import { FullscreenFrame, FullscreenStack } from "../layouts/Fullscreen";
+import { FileParts } from "./FileParts";
 import { FileBlooms } from "./FileBlooms";
 import { FileHistory } from "./FileHistory";
 import { ProtectedBy } from "./ProtectedBy";
@@ -28,6 +29,7 @@ interface FileDetailsProps {
     cluster?: string;
     logicalFile: string;
     tab?: string;
+    fullscreen?: boolean;
     sort?: { subfiles?: QuerySortItem, superfiles?: QuerySortItem, parts?: QuerySortItem, graphs?: QuerySortItem, history?: QuerySortItem, blooms?: QuerySortItem, protectby?: QuerySortItem };
     queryParams?: { contents?: StringStringMap };
 }
@@ -36,6 +38,7 @@ export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
     cluster,
     logicalFile,
     tab = "summary",
+    fullscreen = false,
     sort = {},
     queryParams = {}
 }) => {
@@ -50,7 +53,8 @@ export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
 
     const onTabSelect = React.useCallback((tab: TabInfo) => {
         pushUrl(tab.__state ?? `/files/${cluster}/${logicalFile}/${tab.id}`);
-    }, [cluster, logicalFile]);
+        updateFullscreen(fullscreen);
+    }, [fullscreen, cluster, logicalFile]);
 
     const tabs = React.useMemo((): TabInfo[] => {
         return [{
@@ -103,56 +107,60 @@ export const FileDetails: React.FunctionComponent<FileDetailsProps> = ({
         }];
     }, [file]);
 
-    return <SizeMe monitorHeight>{({ size }) =>
-        <div style={{ height: "100%" }}>
-            <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
-            <DelayLoadedPanel visible={tab === "summary"} size={size}>
-                {file?.ContentType === "key"
-                    ? <IndexFileSummary cluster={cluster} logicalFile={logicalFile} />
-                    : file?.isSuperfile
-                        ? <SuperFileSummary cluster={cluster} logicalFile={logicalFile} />
-                        : <LogicalFileSummary cluster={cluster} logicalFile={logicalFile} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "contents"} size={size}>
-                <Result cluster={cluster} logicalFile={logicalFile} filter={queryParams.contents} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "datapatterns"} size={size}>
-                <DataPatterns cluster={cluster} logicalFile={logicalFile} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "ecl"} size={size}>
-                <SourceEditor text={file?.Ecl} mode="ecl" readonly={true} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "def"} size={size}>
-                <XMLSourceEditor text={defFile} readonly={true} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "xml"} size={size}>
-                <XMLSourceEditor text={xmlFile} readonly={true} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "subfiles"} size={size}>
-                <SubFiles cluster={cluster} logicalFile={logicalFile} sort={sort.subfiles} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "superfiles"} size={size}>
-                <SuperFiles cluster={cluster} logicalFile={logicalFile} sort={sort.superfiles} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "parts"} size={size}>
-                <FileParts cluster={cluster} logicalFile={logicalFile} sort={sort.parts} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "queries"} size={size}>
-                <Queries filter={{ FileName: logicalFile }} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "graphs"} size={size}>
-                <FileDetailsGraph cluster={cluster} logicalFile={logicalFile} sort={sort.graphs} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "history"} size={size}>
-                <FileHistory cluster={cluster} logicalFile={logicalFile} sort={sort.history} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "blooms"} size={size}>
-                <FileBlooms cluster={cluster} logicalFile={logicalFile} sort={sort.blooms} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "protectby"} size={size}>
-                <ProtectedBy cluster={cluster} logicalFile={logicalFile} sort={sort.protectby} />
-            </DelayLoadedPanel>
-        </div>
-    }</SizeMe>;
+    return <FullscreenFrame fullscreen={fullscreen}>
+        <SizeMe monitorHeight>{({ size }) =>
+            <div style={{ height: "100%" }}>
+                <FullscreenStack fullscreen={fullscreen}>
+                    <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
+                </FullscreenStack>
+                <DelayLoadedPanel visible={tab === "summary"} size={size}>
+                    {file?.ContentType === "key"
+                        ? <IndexFileSummary cluster={cluster} logicalFile={logicalFile} />
+                        : file?.isSuperfile
+                            ? <SuperFileSummary cluster={cluster} logicalFile={logicalFile} />
+                            : <LogicalFileSummary cluster={cluster} logicalFile={logicalFile} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "contents"} size={size}>
+                    <Result cluster={cluster} logicalFile={logicalFile} filter={queryParams.contents} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "datapatterns"} size={size}>
+                    <DataPatterns cluster={cluster} logicalFile={logicalFile} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "ecl"} size={size}>
+                    <SourceEditor text={file?.Ecl} mode="ecl" readonly={true} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "def"} size={size}>
+                    <XMLSourceEditor text={defFile} readonly={true} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "xml"} size={size}>
+                    <XMLSourceEditor text={xmlFile} readonly={true} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "subfiles"} size={size}>
+                    <SubFiles cluster={cluster} logicalFile={logicalFile} sort={sort.subfiles} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "superfiles"} size={size}>
+                    <SuperFiles cluster={cluster} logicalFile={logicalFile} sort={sort.superfiles} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "parts"} size={size}>
+                    <FileParts cluster={cluster} logicalFile={logicalFile} sort={sort.parts} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "queries"} size={size}>
+                    <Queries filter={{ FileName: logicalFile }} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "graphs"} size={size}>
+                    <FileDetailsGraph cluster={cluster} logicalFile={logicalFile} sort={sort.graphs} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "history"} size={size}>
+                    <FileHistory cluster={cluster} logicalFile={logicalFile} sort={sort.history} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "blooms"} size={size}>
+                    <FileBlooms cluster={cluster} logicalFile={logicalFile} sort={sort.blooms} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "protectby"} size={size}>
+                    <ProtectedBy cluster={cluster} logicalFile={logicalFile} sort={sort.protectby} />
+                </DelayLoadedPanel>
+            </div>
+        }</SizeMe>
+    </FullscreenFrame>;
 };
diff --git a/esp/src/src-react/components/Helpers.tsx b/esp/src/src-react/components/Helpers.tsx
index 73fed185eca..972a7453a4c 100644
--- a/esp/src/src-react/components/Helpers.tsx
+++ b/esp/src/src-react/components/Helpers.tsx
@@ -6,6 +6,8 @@ import { HelperRow, useWorkunitHelpers } from "../hooks/workunit";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
+import { SearchParams } from "../util/hashUrl";
+import { hashHistory } from "../util/history";
 
 function canShowContent(type: string) {
     switch (type) {
@@ -135,8 +137,11 @@ export const Helpers: React.FunctionComponent<HelpersProps> = ({
                 formatter: (Type, row) => {
                     const target = getTarget(row.id, row);
                     if (target) {
+                        const searchParams = new SearchParams(hashHistory.location.search);
+                        searchParams.param("mode", encodeURIComponent(target.sourceMode));
+                        searchParams.param("src", encodeURIComponent(target.url));
                         const linkText = Type.replace("Slave", "Worker") + (row?.Description ? " (" + row.Description + ")" : "");
-                        return <Link href={`#/workunits/${row?.workunit?.Wuid}/helpers/${row.Type}?mode=${encodeURIComponent(target.sourceMode)}&src=${encodeURIComponent(target.url)}`}>{linkText}</Link>;
+                        return <Link href={`#/workunits/${row?.workunit?.Wuid}/helpers/${row.Type}?${searchParams.serialize()}`}>{linkText}</Link>;
                     }
                     return Type;
                 }
diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
index 3d1f91cc2bd..9b430ef6793 100644
--- a/esp/src/src-react/components/Metrics.tsx
+++ b/esp/src/src-react/components/Metrics.tsx
@@ -15,7 +15,7 @@ import { HolyGrail } from "../layouts/HolyGrail";
 import { AutosizeComponent, AutosizeHpccJSComponent } from "../layouts/HpccJSAdapter";
 import { DockPanel, DockPanelItem, ResetableDockPanel } from "../layouts/DockPanel";
 import { LayoutStatus, MetricGraph, MetricGraphWidget, isGraphvizWorkerResponse, layoutCache } from "../util/metricGraph";
-import { pushUrl as _pushUrl } from "../util/history";
+import { pushUrl } from "../util/history";
 import { debounce } from "../util/throttle";
 import { ErrorBoundary } from "../util/errorBoundary";
 import { ShortVerticalDivider } from "./Common";
@@ -45,7 +45,6 @@ interface MetricsProps {
     queryId?: string;
     parentUrl?: string;
     selection?: string;
-    fullscreen?: boolean;
 }
 
 export const Metrics: React.FunctionComponent<MetricsProps> = ({
@@ -53,8 +52,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
     querySet = "",
     queryId = "",
     parentUrl = `/workunits/${wuid}/metrics`,
-    selection,
-    fullscreen = false
+    selection
 }) => {
     const [_uiState, _setUIState] = React.useState({ ...defaultUIState });
     const [selectedMetricsSource, setSelectedMetricsSource] = React.useState<SelectedMetricsSource>("");
@@ -97,20 +95,11 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         }).catch(err => logger.error(err));
     }, [wuid]);
 
-    const pushUrl = React.useCallback((selection?: string, fullscreen?: boolean) => {
+    const pushSelectionUrl = React.useCallback((selection: string) => {
         const selectionStr = selection?.length ? `/${selection}` : "";
-        const fullscreenStr = fullscreen ? "?fullscreen" : "";
-        _pushUrl(`${parentUrl}${selectionStr}${fullscreenStr}`);
+        pushUrl(`${parentUrl}${selectionStr}`);
     }, [parentUrl]);
 
-    const pushSelectionUrl = React.useCallback((selection: string) => {
-        pushUrl(selection, fullscreen);
-    }, [fullscreen, pushUrl]);
-
-    const pushFullscreenUrl = React.useCallback((fullscreen: boolean) => {
-        pushUrl(selection, fullscreen);
-    }, [pushUrl, selection]);
-
     const onHotspot = React.useCallback(() => {
         setSelectedMetricsSource("hotspot");
         pushSelectionUrl(selection);
@@ -532,18 +521,13 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
                 }]
             }
         },
-        { key: "divider_2", itemType: ContextualMenuItemType.Divider, onRender: () => <ShortVerticalDivider /> },
-        {
-            key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
-            onClick: () => pushFullscreenUrl(!fullscreen)
-        }
-    ], [dot, formatColumns, fullscreen, metrics, pushFullscreenUrl, wuid]);
+    ], [dot, formatColumns, metrics, wuid]);
 
     const setShowMetricOptionsHook = React.useCallback((show: boolean) => {
         setShowMetricOptions(show);
     }, []);
 
-    return <HolyGrail fullscreen={fullscreen}
+    return <HolyGrail
         header={<>
             <CommandBar items={buttons} farItems={rightButtons} />
             <AutosizeHpccJSComponent widget={timeline} fixedHeight={`${TIMELINE_FIXEDHEIGHT + 8}px`} padding={4} hidden={!view.showTimeline} />
diff --git a/esp/src/src-react/components/QueryDetails.tsx b/esp/src/src-react/components/QueryDetails.tsx
index bbd2e3e969c..0df1981da4e 100644
--- a/esp/src/src-react/components/QueryDetails.tsx
+++ b/esp/src/src-react/components/QueryDetails.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 import { SizeMe } from "react-sizeme";
 import nlsHPCC from "src/nlsHPCC";
 import * as ESPQuery from "src/ESPQuery";
-import { pushUrl } from "../util/history";
+import { pushUrl, updateFullscreen } from "../util/history";
+import { FullscreenFrame, FullscreenStack } from "../layouts/Fullscreen";
 import { QueryErrors } from "./QueryErrors";
 import { QueryLibrariesUsed } from "./QueryLibrariesUsed";
 import { QueryLogicalFiles } from "./QueryLogicalFiles";
@@ -18,6 +19,7 @@ interface QueryDetailsProps {
     querySet: string;
     queryId: string;
     tab?: string;
+    fullscreen?: boolean;
     state?: { metricsTab?: string, metricsState?: string, testTab?: string };
     queryParams?: { metricsSelection?: string };
 }
@@ -26,6 +28,7 @@ export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
     querySet,
     queryId,
     tab = "summary",
+    fullscreen = false,
     state = {},
     queryParams = {}
 }) => {
@@ -63,7 +66,8 @@ export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
                 pushUrl(tab.__state ?? `/queries/${querySet}/${queryId}/${tab.id}`);
                 break;
         }
-    }, [queryId, querySet, state.testTab]);
+        updateFullscreen(fullscreen);
+    }, [fullscreen, queryId, querySet, state.testTab]);
 
     const tabs = React.useMemo((): TabInfo[] => {
         return [{
@@ -100,36 +104,40 @@ export const QueryDetails: React.FunctionComponent<QueryDetailsProps> = ({
         }];
     }, [libsUsedCount, logicalFileCount, superFileCount, wuid]);
 
-    return <SizeMe monitorHeight>{({ size }) =>
-        <div style={{ height: "100%" }}>
-            <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
-            <DelayLoadedPanel visible={tab === "summary"} size={size}>
-                <QuerySummary queryId={queryId} querySet={querySet} isSuspended={suspended} isActivated={activated} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "errors"} size={size}>
-                <QueryErrors queryId={queryId} querySet={querySet} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "logicalFiles"} size={size}>
-                <QueryLogicalFiles queryId={queryId} querySet={querySet} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "superfiles"} size={size}>
-                <QuerySuperFiles queryId={queryId} querySet={querySet} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "librariesUsed"} size={size}>
-                <QueryLibrariesUsed queryId={queryId} querySet={querySet} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "summaryStatistics"} size={size}>
-                <QuerySummaryStats queryId={queryId} querySet={querySet} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "metrics"} size={size}>
-                <QueryMetrics wuid={query?.Wuid} queryId={queryId} querySet={querySet} tab={state.metricsTab} selection={queryParams.metricsSelection} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "resources"} size={size}>
-                <Resources wuid={wuid} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "testPages"} size={size}>
-                <QueryTests queryId={queryId} querySet={querySet} tab={state.testTab} />
-            </DelayLoadedPanel>
-        </div>
-    }</SizeMe>;
+    return <FullscreenFrame fullscreen={fullscreen}>
+        <SizeMe monitorHeight>{({ size }) =>
+            <div style={{ height: "100%" }}>
+                <FullscreenStack fullscreen={fullscreen}>
+                    <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
+                </FullscreenStack>
+                <DelayLoadedPanel visible={tab === "summary"} size={size}>
+                    <QuerySummary queryId={queryId} querySet={querySet} isSuspended={suspended} isActivated={activated} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "errors"} size={size}>
+                    <QueryErrors queryId={queryId} querySet={querySet} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "logicalFiles"} size={size}>
+                    <QueryLogicalFiles queryId={queryId} querySet={querySet} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "superfiles"} size={size}>
+                    <QuerySuperFiles queryId={queryId} querySet={querySet} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "librariesUsed"} size={size}>
+                    <QueryLibrariesUsed queryId={queryId} querySet={querySet} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "summaryStatistics"} size={size}>
+                    <QuerySummaryStats queryId={queryId} querySet={querySet} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "metrics"} size={size}>
+                    <QueryMetrics wuid={query?.Wuid} queryId={queryId} querySet={querySet} tab={state.metricsTab} selection={queryParams.metricsSelection} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "resources"} size={size}>
+                    <Resources wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "testPages"} size={size}>
+                    <QueryTests queryId={queryId} querySet={querySet} tab={state.testTab} />
+                </DelayLoadedPanel>
+            </div>
+        }</SizeMe>
+    </FullscreenFrame>;
 };
diff --git a/esp/src/src-react/components/Resources.tsx b/esp/src/src-react/components/Resources.tsx
index ccae64dfa5e..b084802d30c 100644
--- a/esp/src/src-react/components/Resources.tsx
+++ b/esp/src/src-react/components/Resources.tsx
@@ -3,7 +3,8 @@ import { CommandBar, ContextualMenuItemType, ICommandBarItemProps, Link } from "
 import nlsHPCC from "src/nlsHPCC";
 import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResources } from "../hooks/workunit";
-import { updateParam } from "../util/history";
+import { hashHistory, updateParam } from "../util/history";
+import { SearchParams } from "../util/hashUrl";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
@@ -22,7 +23,9 @@ interface ResourcesProps {
 const defaultSort = { attribute: "Wuid", descending: true };
 
 function formatUrl(wuid: string, url: string) {
-    return `#/workunits/${wuid}/resources/content?url=/WsWorkunits/${url}`;
+    const searchParams = new SearchParams(hashHistory.location.search);
+    searchParams.param("url", `/WsWorkunits/${url}`);
+    return `#/workunits/${wuid}/resources/content?${searchParams.serialize()}`;
 }
 
 export const Resources: React.FunctionComponent<ResourcesProps> = ({
@@ -48,6 +51,7 @@ export const Resources: React.FunctionComponent<ResourcesProps> = ({
             },
             DisplayPath: {
                 label: nlsHPCC.Name, sortable: true,
+                width: 800,
                 formatter: (url, row) => {
                     return <Link href={formatUrl(wuid, row.URL)}>{url}</Link>;
                 }
diff --git a/esp/src/src-react/components/Results.tsx b/esp/src/src-react/components/Results.tsx
index 1343c84268d..516103282af 100644
--- a/esp/src/src-react/components/Results.tsx
+++ b/esp/src/src-react/components/Results.tsx
@@ -6,6 +6,7 @@ import { QuerySortItem } from "src/store/Store";
 import { useWorkunitResults } from "../hooks/workunit";
 import { HolyGrail } from "../layouts/HolyGrail";
 import { pivotItemStyle } from "../layouts/pivot";
+import { hashHistory } from "../util/history";
 import { FluentGrid, useCopyButtons, useFluentStoreState, FluentColumns } from "./controls/Grid";
 import { ShortVerticalDivider } from "./Common";
 import { Result } from "./Result";
@@ -44,13 +45,13 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
             Name: {
                 label: nlsHPCC.Name, width: 180, sortable: true,
                 formatter: (Name, row) => {
-                    return <Link href={`#/workunits/${row.Wuid}/outputs/${Name}`}>{Name}</Link>;
+                    return <Link href={`#/workunits/${row.Wuid}/outputs/${Name}${hashHistory.location.search}`}>{Name}</Link>;
                 }
             },
             FileName: {
                 label: nlsHPCC.FileName, sortable: true,
                 formatter: (FileName, row) => {
-                    return <Link href={`#/files/${FileName}`}>{FileName}</Link>;
+                    return <Link href={`#/files/${FileName}${hashHistory.location.search}`}>{FileName}</Link>;
                 }
             },
             Value: {
@@ -80,10 +81,10 @@ export const Results: React.FunctionComponent<ResultsProps> = ({
             key: "open", text: nlsHPCC.Open, disabled: !uiState.hasSelection, iconProps: { iconName: "WindowEdit" },
             onClick: () => {
                 if (selection.length === 1) {
-                    window.location.href = `#/workunits/${wuid}/outputs/${selection[0].Name}`;
+                    window.location.href = `#/workunits/${wuid}/outputs/${selection[0].Name}${hashHistory.location.search}`;
                 } else {
                     for (let i = selection.length - 1; i >= 0; --i) {
-                        window.open(`#/workunits/${wuid}/outputs/${selection[i].Name}`, "_blank");
+                        window.open(`#/workunits/${wuid}/outputs/${selection[i].Name}${hashHistory.location.search}`, "_blank");
                     }
                 }
             }
diff --git a/esp/src/src-react/components/WorkunitDetails.tsx b/esp/src/src-react/components/WorkunitDetails.tsx
index 47d632db043..d050319d619 100644
--- a/esp/src/src-react/components/WorkunitDetails.tsx
+++ b/esp/src/src-react/components/WorkunitDetails.tsx
@@ -10,7 +10,8 @@ import { emptyFilter, formatQuery } from "src/ESPWorkunit";
 import { useWorkunit } from "../hooks/workunit";
 import { useDeepEffect } from "../hooks/deepHooks";
 import { DojoAdapter } from "../layouts/DojoAdapter";
-import { parseQuery, pushUrl } from "../util/history";
+import { FullscreenFrame, FullscreenStack } from "../layouts/Fullscreen";
+import { parseQuery, pushUrl, updateFullscreen } from "../util/history";
 import { WorkunitPersona } from "./controls/StateIcon";
 import { Helpers } from "./Helpers";
 import { IFrame } from "./IFrame";
@@ -39,6 +40,7 @@ interface WorkunitDetailsProps {
     wuid: string;
     parentUrl?: string;
     tab?: string;
+    fullscreen?: boolean;
     state?: { outputs?: string, metrics?: string, resources?: string, helpers?: string, eclsummary?: string };
     queryParams?: { summary?: StringStringMap, outputs?: StringStringMap, inputs?: StringStringMap, metrics?: StringStringMap, resources?: StringStringMap, helpers?: StringStringMap, logs?: StringStringMap };
 }
@@ -47,6 +49,7 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
     wuid,
     parentUrl = "/workunits",
     tab = "summary",
+    fullscreen = false,
     state,
     queryParams = {}
 }) => {
@@ -120,7 +123,8 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
 
     const onTabSelect = React.useCallback((tab: TabInfo) => {
         pushUrl(tab.__state ?? `${parentUrl}/${wuid}/${tab.id}`);
-    }, [parentUrl, wuid]);
+        updateFullscreen(fullscreen);
+    }, [fullscreen, parentUrl, wuid]);
 
     const tabs = React.useMemo((): TabInfo[] => {
         return [{
@@ -173,65 +177,69 @@ export const WorkunitDetails: React.FunctionComponent<WorkunitDetailsProps> = ({
         }];
     }, [logCount, logsDisabled, workunit?.ApplicationValueCount, workunit?.DebugValueCount, workunit?.GraphCount, workunit?.HelpersCount, workunit?.ResourceURLCount, workunit?.ResultCount, workunit?.SourceFileCount, workunit?.VariableCount, workunit?.WorkflowCount, wuid]);
 
-    return <SizeMe monitorHeight>{({ size }) =>
-        <div style={{ height: "100%" }}>
-            <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
-            <DelayLoadedPanel visible={tab === "summary"} size={size}>
-                <WorkunitSummary wuid={wuid} fullscreen={queryParams.summary?.fullscreen !== undefined} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "variables"} size={size}>
-                <Variables wuid={wuid} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "outputs"} size={size}>
-                {state?.outputs ?
-                    queryParams.outputs?.hasOwnProperty("__legacy") ? <IFrame src={`/WsWorkunits/WUResult?Wuid=${wuid}&ResultName=${state?.outputs}`} height="99%" /> :
-                        queryParams.outputs?.hasOwnProperty("__visualize") ? <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: wuid, Sequence: state?.outputs }} /> :
-                            <Result wuid={wuid} resultName={state?.outputs} filter={queryParams.outputs} /> :
-                    <Results wuid={wuid} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "inputs"} size={size}>
-                <SourceFiles wuid={wuid} filter={queryParams.inputs} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "metrics"} size={size}>
-                <React.Suspense fallback={
-                    <>
-                        <Shimmer />
-                        <Shimmer />
-                        <Shimmer />
-                        <Shimmer />
-                    </>
-                }>
-                    <Metrics wuid={wuid} parentUrl={`${parentUrl}/${wuid}/metrics`} selection={state?.metrics} fullscreen={queryParams.metrics?.fullscreen !== undefined} />
-                </React.Suspense>
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "workflows"} size={size}>
-                <Workflows wuid={wuid} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "queries"} size={size}>
-                <Queries filter={{ WUID: wuid }} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "resources"} size={size}>
-                {state?.resources ?
-                    <FetchEditor mode={queryParams.resources?.mode as any} url={queryParams.resources?.url as string} /> :
-                    <Resources wuid={wuid} preview={queryParams.resources?.preview as any} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "helpers"} size={size}>
-                {state?.helpers ?
-                    <FetchEditor mode={queryParams.helpers?.mode as any} url={queryParams.helpers?.src as string} wuid={queryParams.helpers?.mode?.toLowerCase() === "ecl" ? wuid : ""} /> :
-                    <Helpers wuid={wuid} />
-                }
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "logs"} size={size}>
-                <Logs wuid={wuid} filter={queryParams.logs} setLogCount={setLogCount} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "eclsummary"} size={size}>
-                <ECLArchive wuid={wuid} parentUrl={`${parentUrl}/${wuid}/eclsummary`} selection={state?.eclsummary} />
-            </DelayLoadedPanel>
-            <DelayLoadedPanel visible={tab === "xml"} size={size}>
-                <WUXMLSourceEditor wuid={wuid} />
-            </DelayLoadedPanel>
-        </div>
-    }</SizeMe>;
+    return <FullscreenFrame fullscreen={fullscreen}>
+        <SizeMe monitorHeight>{({ size }) =>
+            <div style={{ height: "100%" }}>
+                <FullscreenStack fullscreen={fullscreen}>
+                    <OverflowTabList tabs={tabs} selected={tab} onTabSelect={onTabSelect} size="medium" />
+                </FullscreenStack>
+                <DelayLoadedPanel visible={tab === "summary"} size={size}>
+                    <WorkunitSummary wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "variables"} size={size}>
+                    <Variables wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "outputs"} size={size}>
+                    {state?.outputs ?
+                        queryParams.outputs?.hasOwnProperty("__legacy") ? <IFrame src={`/ WsWorkunits / WUResult ? Wuid = ${wuid} & ResultName= ${state?.outputs}`} height="99%" /> :
+                            queryParams.outputs?.hasOwnProperty("__visualize") ? <DojoAdapter widgetClassID="VizWidget" params={{ Wuid: wuid, Sequence: state?.outputs }} /> :
+                                <Result wuid={wuid} resultName={state?.outputs} filter={queryParams.outputs} /> :
+                        <Results wuid={wuid} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "inputs"} size={size}>
+                    <SourceFiles wuid={wuid} filter={queryParams.inputs} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "metrics"} size={size}>
+                    <React.Suspense fallback={
+                        <>
+                            <Shimmer />
+                            <Shimmer />
+                            <Shimmer />
+                            <Shimmer />
+                        </>
+                    }>
+                        <Metrics wuid={wuid} parentUrl={`${parentUrl}/${wuid}/metrics`} selection={state?.metrics} />
+                    </React.Suspense>
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "workflows"} size={size}>
+                    <Workflows wuid={wuid} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "queries"} size={size}>
+                    <Queries filter={{ WUID: wuid }} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "resources"} size={size}>
+                    {state?.resources ?
+                        <FetchEditor mode={queryParams.resources?.mode as any} url={queryParams.resources?.url as string} /> :
+                        <Resources wuid={wuid} preview={queryParams.resources?.preview as any} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "helpers"} size={size}>
+                    {state?.helpers ?
+                        <FetchEditor mode={queryParams.helpers?.mode as any} url={queryParams.helpers?.src as string} wuid={queryParams.helpers?.mode?.toLowerCase() === "ecl" ? wuid : ""} /> :
+                        <Helpers wuid={wuid} />
+                    }
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "logs"} size={size}>
+                    <Logs wuid={wuid} filter={queryParams.logs} setLogCount={setLogCount} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "eclsummary"} size={size}>
+                    <ECLArchive wuid={wuid} parentUrl={`${parentUrl}/${wuid}/eclsummary`} selection={state?.eclsummary} />
+                </DelayLoadedPanel>
+                <DelayLoadedPanel visible={tab === "xml"} size={size}>
+                    <WUXMLSourceEditor wuid={wuid} />
+                </DelayLoadedPanel>
+            </div>
+        }</SizeMe>
+    </FullscreenFrame>;
 };
diff --git a/esp/src/src-react/components/WorkunitSummary.tsx b/esp/src/src-react/components/WorkunitSummary.tsx
index a519dd1a36c..85b00921166 100644
--- a/esp/src/src-react/components/WorkunitSummary.tsx
+++ b/esp/src/src-react/components/WorkunitSummary.tsx
@@ -27,12 +27,10 @@ interface MessageBarContent {
 
 interface WorkunitSummaryProps {
     wuid: string;
-    fullscreen?: boolean;
 }
 
 export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
-    wuid,
-    fullscreen = false
+    wuid
 }) => {
 
     const [workunit, , , , refresh] = useWorkunit(wuid, true);
@@ -174,13 +172,6 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
         },
     ], [_protected, canDelete, canDeschedule, canReschedule, canSave, description, jobname, refresh, refreshSavings, setShowDeleteConfirm, showMessageBar, workunit, wuid]);
 
-    const rightButtons = React.useMemo((): ICommandBarItemProps[] => [
-        {
-            key: "fullscreen", title: nlsHPCC.MaximizeRestore, iconProps: { iconName: fullscreen ? "ChromeRestore" : "FullScreen" },
-            onClick: () => pushUrl(`/workunits/${wuid}${fullscreen ? "" : "?fullscreen"}`)
-        }
-    ], [fullscreen, wuid]);
-
     const serviceNames = React.useMemo(() => {
         return workunit?.ServiceNames?.Item?.join("\n") || "";
     }, [workunit?.ServiceNames?.Item]);
@@ -200,14 +191,14 @@ export const WorkunitSummary: React.FunctionComponent<WorkunitSummaryProps> = ({
         }, 0) || 0;
     }, [exceptions]);
 
-    return <HolyGrail fullscreen={fullscreen}
+    return <HolyGrail
         main={<>
             <ReflexContainer orientation="horizontal">
                 <ReflexElement>
                     <div className="pane-content">
                         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
                             <Sticky stickyPosition={StickyPositionType.Header}>
-                                <CommandBar items={buttons} farItems={rightButtons} />
+                                <CommandBar items={buttons} />
                                 {messageBarContent &&
                                     <MessageBar messageBarType={messageBarContent.type} dismissButtonAriaLabel={nlsHPCC.Close} onDismiss={dismissMessageBar} >
                                         {messageBarContent.message}
diff --git a/esp/src/src-react/layouts/Fullscreen.tsx b/esp/src/src-react/layouts/Fullscreen.tsx
new file mode 100644
index 00000000000..162bef836c2
--- /dev/null
+++ b/esp/src/src-react/layouts/Fullscreen.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+import { IconButton, IIconProps, Stack, mergeStyleSets } from "@fluentui/react";
+import { useUserTheme } from "../hooks/theme";
+import { updateFullscreen } from "../util/history";
+
+const FullscreenIcon: IIconProps = { iconName: "FullScreen" };
+const RestoreIcon: IIconProps = { iconName: "ChromeRestore" };
+
+export interface FullscreenProps {
+    fullscreen: boolean;
+}
+
+export const FullscreenFrame: React.FunctionComponent<FullscreenProps> = ({
+    fullscreen,
+    children
+}) => {
+    const { themeV9 } = useUserTheme();
+    const layoutStyles = React.useMemo(() => mergeStyleSets({
+        fullscreen: {
+            position: "fixed",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            background: themeV9.colorNeutralBackground1,
+        },
+        normal: {
+            height: "100%"
+        }
+    }), [themeV9.colorNeutralBackground1]);
+
+    return <div className={fullscreen ? layoutStyles.fullscreen : layoutStyles.normal}>
+        {children}
+    </div>;
+};
+
+export const FullscreenStack: React.FunctionComponent<FullscreenProps> = ({
+    fullscreen,
+    children
+}) => {
+
+    return <Stack horizontal>
+        <Stack.Item grow>
+            {children}
+        </Stack.Item>
+        <Stack.Item align="center">
+            <IconButton iconProps={fullscreen ? RestoreIcon : FullscreenIcon} onClick={() => updateFullscreen(!fullscreen)} />
+        </Stack.Item>
+    </Stack>;
+};
diff --git a/esp/src/src-react/routes.tsx b/esp/src/src-react/routes.tsx
index e73d78d9823..7462b7ec821 100644
--- a/esp/src/src-react/routes.tsx
+++ b/esp/src/src-react/routes.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Route, RouterContext } from "universal-router";
-import { initialize, parsePage, parseSearch, parseSort, pushUrl, replaceUrl } from "./util/history";
+import { initialize, parsePage, parseSearch, parseSort, parseFullscreen, pushUrl, replaceUrl } from "./util/history";
 
 declare const dojoConfig;
 
@@ -25,17 +25,17 @@ const workunitsChildren: Route[] = [
     },
     {
         path: "/:Wuid", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} queryParams={{ summary: parseSearch(ctx.search) as any }} />;
+            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} fullscreen={parseFullscreen(ctx.search)} queryParams={{ summary: parseSearch(ctx.search) as any }} />;
         })
     },
     {
         path: "/:Wuid/:Tab", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} tab={params.Tab as string} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
+            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} fullscreen={parseFullscreen(ctx.search)} tab={params.Tab as string} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
         })
     },
     {
         path: "/:Wuid/:Tab/:State", action: (ctx, params) => import("./components/WorkunitDetails").then(_ => {
-            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} tab={params.Tab as string} state={{ [params.Tab as string]: (params.State as string) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
+            return <_.WorkunitDetails wuid={params.Wuid as string} parentUrl={params.parentUrl as string} fullscreen={parseFullscreen(ctx.search)} tab={params.Tab as string} state={{ [params.Tab as string]: (params.State as string) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
         })
     },
 ];
@@ -131,17 +131,17 @@ export const routes: RoutesEx = [
             },
             {
                 path: "/:Name", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={undefined} logicalFile={params.Name as string} />;
+                    return <_.FileDetails cluster={undefined} logicalFile={params.Name as string} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
             {
                 path: "/:NodeGroup/:Name", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} />;
+                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
             {
                 path: "/:NodeGroup/:Name/:Tab", action: (ctx, params) => import("./components/FileDetails").then(_ => {
-                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} tab={params.Tab as string} sort={{ [params.Tab as string]: parseSort(ctx.search) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
+                    return <_.FileDetails cluster={params.NodeGroup as string} logicalFile={params.Name as string} tab={params.Tab as string} sort={{ [params.Tab as string]: parseSort(ctx.search) }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
         ]
@@ -228,22 +228,22 @@ export const routes: RoutesEx = [
             },
             {
                 path: "/:QuerySetId/:Id", action: (ctx, params) => import("./components/QueryDetails").then(_ => {
-                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} />;
+                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
             {
                 path: "/:QuerySetId/:Id/:Tab", action: (ctx, params) => import("./components/QueryDetails").then(_ => {
-                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab={params.Tab as string} />;
+                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab={params.Tab as string} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
             {
                 path: "/:QuerySetId/:Id/metrics/:MetricsTab", action: (ctx, params) => import("./components/QueryDetails").then(_ => {
-                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="metrics" state={{ metricsTab: params.MetricsTab as string }} />;
+                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="metrics" state={{ metricsTab: params.MetricsTab as string }} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
             {
                 path: "/:QuerySetId/:Id/metrics/:MetricsTab/:Selection", action: (ctx, params) => import("./components/QueryDetails").then(_ => {
-                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="metrics" state={{ metricsTab: params.MetricsTab as string }} queryParams={{ metricsSelection: params.Selection as string }} />;
+                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="metrics" state={{ metricsTab: params.MetricsTab as string }} queryParams={{ metricsSelection: params.Selection as string }} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
             {
@@ -253,7 +253,7 @@ export const routes: RoutesEx = [
             },
             {
                 path: "/:QuerySetId/:Id/testPages/:Tab", action: (ctx, params) => import("./components/QueryDetails").then(_ => {
-                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="testPages" state={{ testTab: params.Tab as string }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} />;
+                    return <_.QueryDetails querySet={params.QuerySetId as string} queryId={params.Id as string} tab="testPages" state={{ testTab: params.Tab as string }} queryParams={{ [params.Tab as string]: parseSearch(ctx.search) as any }} fullscreen={parseFullscreen(ctx.search)} />;
                 })
             },
         ]
diff --git a/esp/src/src-react/util/hashUrl.ts b/esp/src/src-react/util/hashUrl.ts
new file mode 100644
index 00000000000..43dcbf40839
--- /dev/null
+++ b/esp/src/src-react/util/hashUrl.ts
@@ -0,0 +1,141 @@
+import { parse, stringify } from "query-string";
+
+class SortBy {
+    readonly attribute: string = "";
+    readonly descending: boolean = false;
+
+    constructor(sortBy: string);
+    constructor(attribute: string, descending: boolean);
+    constructor(attribute_sortBy: string, descending: boolean = false) {
+        if (descending === undefined) {
+            this.attribute = attribute_sortBy;
+            this.descending = false;
+            if (attribute_sortBy.charAt(0) === "-") {
+                this.attribute = attribute_sortBy.substring(1);
+                this.descending = true;
+            }
+        } else {
+            this.attribute = attribute_sortBy;
+            this.descending = descending;
+        }
+    }
+
+    serialize(): string {
+        return (this.descending ? "-" : "") + this.attribute;
+    }
+
+    static deserialize(sortBy: string): SortBy {
+        return new SortBy(sortBy);
+    }
+
+}
+
+export type ParamValue = string | boolean | number | null;
+export interface Params {
+    sortBy?: string;
+    pageNum?: number;
+    fullscreen?: boolean;
+    [key: string]: ParamValue | Array<ParamValue>;
+}
+
+export class SearchParams {
+    readonly params: Params = {};
+
+    constructor();
+    constructor(search: string);
+    constructor(params: Params);
+    constructor(search?: string | Params) {
+        if (typeof search === "string") {
+            this.params = parse(search, { parseBooleans: true, parseNumbers: true });
+        } else if (search) {
+            this.params = search;
+        }
+    }
+
+    serialize(): string {
+        return stringify(this.params, {
+            encode: false,
+            skipEmptyString: true
+        });
+    }
+
+    static deserialize(search: string): SearchParams {
+        return new SearchParams(search);
+    }
+
+    sortBy(): SortBy | undefined;
+    sortBy(sortBy: SortBy | null): this;
+    sortBy(sortBy?: SortBy | null): SortBy | undefined | this {
+        if (sortBy !== undefined) {
+            if (sortBy === null) {
+                delete this.params["sortBy"];
+            } else {
+                this.params["sortBy"] = sortBy.serialize();
+            }
+            return this;
+        }
+        return this.params["sortBy"] ? SortBy.deserialize(this.params["sortBy"]) : undefined;
+    }
+
+    pageNum(): number | undefined;
+    pageNum(pageNum: number | null): this;
+    pageNum(pageNum?: number | null): number | undefined | this {
+        if (pageNum !== undefined) {
+            if (pageNum === null) {
+                delete this.params["pageNum"];
+            } else {
+                this.params["pageNum"] = pageNum;
+            }
+            return this;
+        }
+        return this.params["pageNum"];
+    }
+
+    fullscreen(): boolean | undefined;
+    fullscreen(fullscreen: boolean): this;
+    fullscreen(fullscreen?: boolean): boolean | undefined | this {
+        if (fullscreen !== undefined) {
+            if (fullscreen === false) {
+                delete this.params["fullscreen"];
+            } else {
+                this.params["fullscreen"] = null;
+            }
+            return this;
+        }
+        return this.params["fullscreen"] === null || this.params["fullscreen"] === true;
+    }
+
+    param(key: string): ParamValue | ParamValue[] | undefined;
+    param(key: string, val: ParamValue | null): this;
+    param(key: string, val?: ParamValue | null): ParamValue | ParamValue[] | undefined | this {
+        if (val !== undefined) {
+            if (val === null) {
+                delete this.params[key];
+            } else {
+                switch (key) {
+                    case "sortBy":
+                        this.sortBy(new SortBy(val as string));
+                        break;
+                    case "pageNum":
+                        this.pageNum(val as number);
+                        break;
+                    case "fullscreen":
+                        this.fullscreen(val as boolean);
+                        break;
+                    default:
+                        this.params[key] = val;
+                }
+            }
+            return this;
+        }
+        switch (key) {
+            case "sortBy":
+                return this.sortBy()?.serialize();
+            case "pageNum":
+                return this.pageNum(val as number);
+            case "fullscreen":
+                return this.fullscreen();
+        }
+        return this.params[key];
+    }
+}
diff --git a/esp/src/src-react/util/history.ts b/esp/src/src-react/util/history.ts
index 6f54845db45..009a122a80f 100644
--- a/esp/src/src-react/util/history.ts
+++ b/esp/src/src-react/util/history.ts
@@ -3,8 +3,9 @@ import { parse, ParsedQuery, pick, stringify } from "query-string";
 import { hashSum, scopedLogger } from "@hpcc-js/util";
 import { userKeyValStore } from "src/KeyValStore";
 import { QuerySortItem } from "src/store/Store";
+import { ParamValue, SearchParams } from "./hashUrl";
 
-const logger = scopedLogger("../util/history.ts");
+const logger = scopedLogger("src-react/util/history.ts");
 
 let g_router: UniversalRouter;
 
@@ -79,6 +80,17 @@ export function updatePage(pageNum: string) {
     updateParam("pageNum", pageNum);
 }
 
+export function parseFullscreen(_: string): boolean {
+    const searchParams = new SearchParams(_);
+    return searchParams.fullscreen();
+}
+
+export function updateFullscreen(fullscreen: boolean) {
+    const searchParams = new SearchParams(hashHistory.location.search);
+    searchParams.fullscreen(fullscreen);
+    updateSearch(searchParams);
+}
+
 interface HistoryLocation {
     pathname: string;
     search: string;
@@ -148,6 +160,8 @@ class History<S extends object = object> {
     }
 
     push(to: { pathname?: string, search?: string }) {
+        to.pathname = to.pathname ?? this.location.pathname;
+        to.search = to.search ?? this.location.search;
         const newHash = this.fixHash(`${this.trimRightSlash(to.pathname || this.location.pathname)}${to.search || ""}`);
         if (window.location.hash !== newHash) {
             globalHistory.pushState(undefined, "", newHash);
@@ -209,8 +223,8 @@ export function pushSearch(_: object) {
     });
 }
 
-export function updateSearch(_: object) {
-    const search = stringify(_ as any);
+export function updateSearch(searchParams: SearchParams) {
+    const search = searchParams.serialize();
     hashHistory.replace({
         search: search ? "?" + search : ""
     });
@@ -259,14 +273,10 @@ export function pushParams(search: { [key: string]: string | string[] | number |
     pushSearch(calcParams(search, keepEmpty));
 }
 
-export function updateParam(key: string, val?: string | string[] | number | boolean) {
-    const params = parseQuery(hashHistory.location.search);
-    if (val === undefined) {
-        delete params[key];
-    } else {
-        params[key] = val;
-    }
-    updateSearch(params);
+export function updateParam(key: string, val?: ParamValue) {
+    const searchParams = new SearchParams(hashHistory.location.search);
+    searchParams.param(key, val);
+    updateSearch(searchParams);
 }
 
 export function updateState(key: string, val?: string | string[] | number | boolean) {