Merge pull request #18974 from GordonSmith/HPCC-32417-DOCKPANEL_VIS_C…

…HANGEDEVENT HPCC-32417 Add visibility changed event to DockPanel Reviewed-By: Jeremy Clements <[email protected]> Merged-by: Gavin Halliday <[email protected]>
hpcc-systems · Aug 21, 2024 · 6390524 · 6390524
2 parents 9723ed0 + ee61ccb
commit 6390524
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 24 deletions.
diff --git a/esp/src/eslint/index.js b/esp/src/eslint/index.js
@@ -2,6 +2,9 @@
 module.exports = {
     rules: {
         "no-src-react": {
+            meta: {
+                fixable: "code"
+            },
             create: function (context) {
                 return {
                     ImportDeclaration(node) {

diff --git a/esp/src/package-lock.json b/esp/src/package-lock.json
diff --git a/esp/src/package.json b/esp/src/package.json
@@ -57,7 +57,7 @@
     "@hpcc-js/timeline": "2.53.0",
     "@hpcc-js/tree": "2.41.0",
     "@hpcc-js/util": "2.52.0",
-    "@hpcc-js/wasm": "2.18.1",
+    "@hpcc-js/wasm": "2.18.2",
     "@kubernetes/client-node": "0.20.0",
     "clipboard": "2.0.11",
     "d3-dsv": "3.0.1",

diff --git a/esp/src/src-react/components/ECLArchive.tsx b/esp/src/src-react/components/ECLArchive.tsx
@@ -111,7 +111,7 @@ export const ECLArchive: React.FunctionComponent<ECLArchiveProps> = ({
     return <HolyGrail fullscreen={fullscreen}
         header={<CommandBar items={buttons} farItems={rightButtons} />}
         main={
-            <DockPanel hideSingleTabs onDockPanelCreate={setDockpanel}>
+            <DockPanel hideSingleTabs onCreate={setDockpanel}>
                 <DockPanelItem key="scopesTable" title="Files" >
                     {   //  Only render after archive is loaded (to ensure it "defaults to open") ---
                         archive?.modAttrs.length &&

diff --git a/esp/src/src-react/components/Frame.tsx b/esp/src/src-react/components/Frame.tsx
@@ -88,7 +88,7 @@ export const Frame: React.FunctionComponent<FrameProps> = () => {
 
         router.resolve(hashHistory.location).then(setBody);
 
-        userKeyValStore().get("user_cookie_consent")
+        userKeyValStore().get(USER_COOKIE_CONSENT)
             .then((resp) => {
                 setShowCookieConsent(resp === "1");
             })

diff --git a/esp/src/src-react/components/Metrics.tsx b/esp/src/src-react/components/Metrics.tsx
@@ -634,7 +634,7 @@ export const Metrics: React.FunctionComponent<MetricsProps> = ({
         </>}
         main={
             <ErrorBoundary>
-                <DockPanel layout={options?.layout} onDockPanelCreate={setDockpanel}>
+                <DockPanel layout={options?.layout} onCreate={setDockpanel}>
                     <DockPanelItem key="scopesTable" title={nlsHPCC.Metrics}>
                         <HolyGrail
                             header={<Stack horizontal>

diff --git a/esp/src/src-react/layouts/DockPanel.tsx b/esp/src/src-react/layouts/DockPanel.tsx
@@ -3,8 +3,8 @@ import * as ReactDOM from "react-dom";
 import { Theme, ThemeProvider } from "@fluentui/react";
 import { useConst } from "@fluentui/react-hooks";
 import { FluentProvider, Theme as ThemeV9 } from "@fluentui/react-components";
-import { HTMLWidget, Widget } from "@hpcc-js/common";
-import { DockPanel as HPCCDockPanel, IClosable } from "@hpcc-js/phosphor";
+import { HTMLWidget, Widget, Utility } from "@hpcc-js/common";
+import { DockPanel as HPCCDockPanel, IClosable, WidgetAdapter } from "@hpcc-js/phosphor";
 import { compare2 } from "@hpcc-js/util";
 import { lightTheme, lightThemeV9 } from "../themes";
 import { useUserTheme } from "../hooks/theme";
@@ -96,6 +96,7 @@ export class ResetableDockPanel extends HPCCDockPanel {
 
     protected _origLayout: DockPanelLayout | undefined;
     protected _lastLayout: DockPanelLayout | undefined;
+    protected _visibility: { [id: string]: boolean };
 
     resetLayout() {
         if (this._origLayout) {
@@ -118,8 +119,19 @@ export class ResetableDockPanel extends HPCCDockPanel {
         return formatLayout(this.layout()) ?? this._lastLayout ?? this._origLayout;
     }
 
+    getVisibility() {
+        return this._visibility;
+    }
+
     render(callback?: (w: Widget) => void) {
-        const retVal = super.render();
+        const retVal = this._visibility !== undefined ? super.render() : super.render(() => {
+            if (this._visibility === undefined) {
+                this._visibility = {};
+                this.widgetAdapters().forEach(wa => {
+                    this._visibility[wa.widget.id()] = wa.isVisible;
+                });
+            }
+        });
         if (this._origLayout === undefined) {
             this._origLayout = formatLayout(this.layout());
         }
@@ -130,9 +142,27 @@ export class ResetableDockPanel extends HPCCDockPanel {
     }
 
     //  Events  ---
+    childActivation(w: Widget, wa: WidgetAdapter) {
+    }
+
+    childVisibility(w: Widget, visible: boolean, wa: WidgetAdapter) {
+        if (this._visibility && this._visibility[w.id()] !== visible) {
+            this._visibility[w.id()] = visible;
+            this._lazyVisibilityChanged();
+        }
+    }
+
     layoutChanged() {
         this._lastLayout = this.getLayout();
     }
+
+    //  Exposed Events  ---
+    private _lazyVisibilityChanged = Utility.debounce(async () => {
+        this.visibilityChanged(this._visibility);
+    }, 60);
+
+    visibilityChanged(visibility: { [id: string]: boolean }) {
+    }
 }
 
 interface DockPanelItemProps {
@@ -154,14 +184,16 @@ export const DockPanelItem: React.FunctionComponent<DockPanelItemProps> = ({
 interface DockPanelProps {
     layout?: object;
     hideSingleTabs?: boolean;
-    onDockPanelCreate?: (dockpanel: ResetableDockPanel) => void;
+    onCreate?: (dockpanel: ResetableDockPanel) => void;
+    onVisibilityChanged?: (visibility: { [id: string]: boolean }) => void;
     children?: React.ReactElement<DockPanelItemProps> | React.ReactElement<DockPanelItemProps>[];
 }
 
 export const DockPanel: React.FunctionComponent<DockPanelProps> = ({
     layout,
     hideSingleTabs,
-    onDockPanelCreate,
+    onCreate: onDockPanelCreate,
+    onVisibilityChanged: onDockPanelVisibilityChanged,
     children
 }) => {
     const items = React.useMemo(() => {
@@ -179,6 +211,9 @@ export const DockPanel: React.FunctionComponent<DockPanelProps> = ({
                 onDockPanelCreate(retVal);
             }, 0);
         }
+        if (onDockPanelVisibilityChanged) {
+            retVal.on("visibilityChanged", visibility => onDockPanelVisibilityChanged(visibility), true);
+        }
         return retVal;
     });