Make TreeMap cross-platform

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## v71.0.0-SNAPSHOT - unreleased
 
+### 💥 Breaking Changes
+
+* `ErrorMessage` is now cross-platform. Its import paths has changed from `@xh/hoist/desktop/cmp/error`
+  and `@xh/hoist/mobile/cmp/error` to `@xh/hoist/cmp/error`.
+* `Mask` is now cross-platform. Its import paths has changed from `@xh/hoist/desktop/cmp/mask`
+  and `@xh/hoist/mobile/cmp/mask` to `@xh/hoist/cmp/mask`.
+* `LoadingIndicator` is now cross-platform. Its import paths has changed from
+  `@xh/hoist/desktop/cmp/loadingindicator` and `@xh/hoist/mobile/cmp/loadingindicator` to
+  `@xh/hoist/cmp/loadingindicator`.
+* `TreeMap` and `SplitTreeMap` are now cross-platform and can be used in mobile applications.
+  Their import paths have changed from `@xh/hoist/desktop/cmp/treemap` to `@xh/hoist/cmp/treemap`.
+
 ### 🎁 New Features
 
 * Major Improvements to ViewManager component

admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -9,7 +9,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {div, hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, buttonGroup, colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';

admin/tabs/cluster/ClusterTab.ts

@@ -7,7 +7,7 @@
 import {grid} from '@xh/hoist/cmp/grid';
 import {tabContainer} from '@xh/hoist/cmp/tab';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {mask} from '@xh/hoist/desktop/cmp/mask';
+import {mask} from '@xh/hoist/cmp/mask';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {tabSwitcher} from '@xh/hoist/desktop/cmp/tab';
 import {box, div, hspacer, p, placeholder, vframe} from '@xh/hoist/cmp/layout';

admin/tabs/cluster/connpool/ConnPoolMonitorPanel.ts

@@ -11,7 +11,7 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {filler, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';

admin/tabs/cluster/environment/ServerEnvPanel.ts

@@ -10,7 +10,7 @@ import {filler} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 
 export const serverEnvPanel = hoistCmp.factory({

admin/tabs/cluster/logs/LogDisplay.ts

@@ -11,7 +11,7 @@ import {hoistCmp, uses, XH} from '@xh/hoist/core';
 import {button, modalToggleButton} from '@xh/hoist/desktop/cmp/button';
 import {gridFindField} from '@xh/hoist/desktop/cmp/grid';
 import {numberInput, switchInput, textInput} from '@xh/hoist/desktop/cmp/input';
-import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
+import {loadingIndicator} from '@xh/hoist/cmp/loadingindicator';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {Icon} from '@xh/hoist/icon';

admin/tabs/cluster/logs/LogViewer.ts

@@ -9,7 +9,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {hframe} from '@xh/hoist/cmp/layout';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp} from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon';

admin/tabs/cluster/memory/MemoryMonitorPanel.ts

@@ -11,7 +11,7 @@ import {grid, gridCountLabel} from '@xh/hoist/cmp/grid';
 import {code, filler, fragment, hbox, hspacer, span, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSeparator} from '@xh/hoist/desktop/cmp/toolbar';
 import {fmtDate} from '@xh/hoist/format';

admin/tabs/cluster/services/DetailsPanel.ts

@@ -7,7 +7,7 @@
 import {DetailsModel} from '@xh/hoist/admin/tabs/cluster/services/DetailsModel';
 import {placeholder} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {jsonInput} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';

admin/tabs/cluster/websocket/WebSocketPanel.ts

@@ -11,7 +11,7 @@ import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {storeFilterField} from '@xh/hoist/cmp/store';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
 import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';

admin/tabs/monitor/MonitorTab.ts

@@ -12,7 +12,7 @@ import {filler, hbox, label, placeholder, tileFrame} from '@xh/hoist/cmp/layout'
 import {relativeTimestamp} from '@xh/hoist/cmp/relativetimestamp';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';

admin/tabs/userData/roles/RolePanel.ts

@@ -9,7 +9,7 @@ import {grid} from '@xh/hoist/cmp/grid';
 import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/desktop/cmp/error';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {switchInput} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';

cmp/error/ErrorBoundary.ts

@@ -5,8 +5,7 @@
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
 import {elementFactory, hoistCmp, uses, XH} from '@xh/hoist/core';
-import {errorMessage as desktopErrorMessage} from '@xh/hoist/dynamics/desktop';
-import {errorMessage as mobileErrorMessage} from '@xh/hoist/dynamics/mobile';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {Component, ReactNode} from 'react';
 import {ErrorBoundaryModel} from './ErrorBoundaryModel';
 
@@ -34,8 +33,7 @@ export const [ErrorBoundary, errorBoundary] = hoistCmp.withFactory<ErrorBoundary
         if (!error) return reactErrorBoundary({model, children});
         if (errorRenderer) return errorRenderer(error);
 
-        const cmp = XH.isMobileApp ? mobileErrorMessage : desktopErrorMessage;
-        return cmp({
+        return errorMessage({
             error,
             title: 'Unexpected error while rendering this component',
             actionFn: () => model.clear(),

desktop/cmp/error/ErrorMessage.scss → cmp/error/ErrorMessage.scss

@@ -8,7 +8,6 @@
 .xh-error-message {
   align-items: center;
   justify-content: center;
-  padding: 10px;
 
   &__inner {
     padding: var(--xh-pad-px);
@@ -31,3 +30,11 @@
     font-weight: bold;
   }
 }
+
+.xh-desktop .xh-error-message {
+  padding: 10px;
+}
+
+.xh-mobile .xh-error-message__inner {
+  margin: 0 var(--xh-pad-px);
+}

desktop/cmp/error/ErrorMessage.ts → cmp/error/ErrorMessage.ts

@@ -4,14 +4,14 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {div, filler, frame, hbox, p} from '@xh/hoist/cmp/layout';
-import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
-import {button, ButtonProps} from '@xh/hoist/desktop/cmp/button';
-import '@xh/hoist/desktop/register';
+import {BoxProps, hoistCmp, HoistProps, XH} from '@xh/hoist/core';
+import {frame} from '@xh/hoist/cmp/layout';
+import {ButtonProps} from '@xh/hoist/desktop/cmp/button';
+import {errorMessageImpl as desktopErrorMessageImpl} from '@xh/hoist/dynamics/desktop';
+import {errorMessageImpl as mobileErrorMessageImpl} from '@xh/hoist/dynamics/mobile';
 import {isNil, isString} from 'lodash';
-import {isValidElement, ReactNode} from 'react';
+import {ReactNode} from 'react';
 import './ErrorMessage.scss';
-import {Icon} from '@xh/hoist/icon';
 
 export interface ErrorMessageProps extends HoistProps, Omit<BoxProps, 'title'> {
     /**
@@ -90,52 +90,25 @@ export const [ErrorMessage, errorMessage] = hoistCmp.withFactory<ErrorMessagePro
             detailsButtonProps = {...detailsButtonProps, onClick: () => detailsFn(error)};
         }
 
-        let buttons = [],
-            buttonBar = null;
-        if (detailsButtonProps) buttons.push(detailsButton(detailsButtonProps));
-        if (actionButtonProps) buttons.push(actionButton(actionButtonProps));
-        if (buttons.length == 1) {
-            buttonBar = buttons[0];
-        } else if (buttons.length == 2) {
-            buttonBar = hbox(buttons[0], filler(), buttons[1]);
-        }
-
         return frame({
             ref,
             className,
             ...rest,
-            item: div({
-                className: 'xh-error-message__inner',
-                items: [titleCmp({title}), messageCmp({message, error}), buttonBar]
-            })
+            item: XH.isMobileApp
+                ? mobileErrorMessageImpl({
+                      error,
+                      message,
+                      title,
+                      actionButtonProps,
+                      detailsButtonProps
+                  })
+                : desktopErrorMessageImpl({
+                      error,
+                      message,
+                      title,
+                      actionButtonProps,
+                      detailsButtonProps
+                  })
         });
     }
 });
-
-const titleCmp = hoistCmp.factory(({title}) => {
-    if (isValidElement(title)) return title;
-    if (isString(title)) return div({className: 'xh-error-message__title', item: title});
-    return null;
-});
-
-const messageCmp = hoistCmp.factory(({message}) => {
-    if (isValidElement(message)) return message;
-    if (isString(message)) return p(message);
-    return null;
-});
-
-const actionButton = hoistCmp.factory<ButtonProps>(props => {
-    return button({
-        text: 'Retry',
-        icon: Icon.refresh(),
-        ...props
-    });
-});
-
-const detailsButton = hoistCmp.factory<ButtonProps>(props => {
-    return button({
-        text: 'Details',
-        icon: Icon.detail(),
-        ...props
-    });
-});

cmp/error/index.ts

@@ -1,2 +1,3 @@
 export * from './ErrorBoundary';
 export * from './ErrorBoundaryModel';
+export * from './ErrorMessage';

desktop/cmp/loadingindicator/LoadingIndicator.scss → cmp/loadingindicator/LoadingIndicator.scss

@@ -4,7 +4,6 @@
 
   position: absolute;
   padding: var(--xh-pad-half-px);
-  font-size: var(--xh-font-size-small-px);
   background-color: var(--xh-loading-indicator-bg);
   color: var(--xh-loading-indicator-color);
   border-color: var(--xh-loading-indicator-border-color);
@@ -80,3 +79,7 @@
     white-space: nowrap;
   }
 }
+
+.xh-desktop .xh-loading-indicator {
+  font-size: var(--xh-font-size-small-px);
+}

desktop/cmp/loadingindicator/LoadingIndicator.ts → cmp/loadingindicator/LoadingIndicator.ts

@@ -16,12 +16,12 @@ import {
     TaskObserver,
     useLocalModel
 } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
 import {withDefault} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
 import {truncate} from 'lodash';
 import './LoadingIndicator.scss';
 
+// Todo: Move to cmp, delete mobile, update imports, add CHANGELOG
 export interface LoadingIndicatorProps extends HoistProps {
     /** TaskObserver(s) that should be monitored to determine if the Indicator should be displayed. */
     bind?: Some<TaskObserver>;
@@ -49,14 +49,10 @@ export const [LoadingIndicator, loadingIndicator] = hoistCmp.withFactory<Loading
     displayName: 'LoadingIndicator',
     className: 'xh-loading-indicator',
 
-    render({
-        isDisplayed,
-        message,
-        maxMessageLength = 30,
-        spinner = true,
-        corner = 'br',
-        className
-    }) {
+    render(
+        {isDisplayed, message, maxMessageLength = 30, spinner = true, corner = 'br', className},
+        ref
+    ) {
         const impl = useLocalModel(LocalMaskModel);
 
         isDisplayed = withDefault(isDisplayed, impl.task?.isPending);
@@ -80,6 +76,7 @@ export const [LoadingIndicator, loadingIndicator] = hoistCmp.withFactory<Loading
         };
 
         return div({
+            ref,
             className: classNames(className, hasMessageCls, hasSpinnerCls, cornerCls),
             item: hbox(innerItems())
         });

desktop/cmp/mask/Mask.ts → cmp/mask/Mask.ts

@@ -4,20 +4,24 @@
  *
  * Copyright © 2024 Extremely Heavy Industries Inc.
  */
-import {box, vbox, vspacer} from '@xh/hoist/cmp/layout';
-import {spinner as spinnerCmp} from '@xh/hoist/cmp/spinner';
-import {hoistCmp, HoistModel, HoistProps, Some, TaskObserver, useLocalModel} from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
-import {Classes, overlay} from '@xh/hoist/kit/blueprint';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    Some,
+    TaskObserver,
+    useLocalModel,
+    XH
+} from '@xh/hoist/core';
+import {maskImpl as desktopMaskImpl} from '@xh/hoist/dynamics/desktop';
+import {maskImpl as mobileMaskImpl} from '@xh/hoist/dynamics/mobile';
 import {withDefault} from '@xh/hoist/utils/js';
 import {ReactNode, MouseEvent} from 'react';
-import classNames from 'classnames';
-import './Mask.scss';
 
 export interface MaskProps extends HoistProps {
     /** Task(s) that should be monitored to determine if the mask should be displayed. */
     bind?: Some<TaskObserver>;
-    /** True (default) to contain mask within its parent, false to fill the viewport. */
+    /** True (default) to contain mask within its parent, false to fill the viewport. Desktop only. */
     inline?: boolean;
     /** True to display mask. */
     isDisplayed?: boolean;
@@ -41,29 +45,16 @@ export const [Mask, mask] = hoistCmp.withFactory<MaskProps>({
     displayName: 'Mask',
     className: 'xh-mask',
 
-    render({isDisplayed, message, inline = true, spinner = false, className}) {
+    render({isDisplayed, message, onClick, inline = true, spinner = false, className}) {
         const impl = useLocalModel(MaskLocalModel);
 
         isDisplayed = withDefault(isDisplayed, impl.task?.isPending);
         message = withDefault(message, impl.task?.message);
 
         if (!isDisplayed) return null;
-        return overlay({
-            className: classNames(className, Classes.OVERLAY_SCROLL_CONTAINER),
-            autoFocus: false,
-            isOpen: true,
-            canEscapeKeyClose: false,
-            usePortal: !inline,
-            enforceFocus: !inline,
-            item: vbox({
-                className: 'xh-mask-body',
-                items: [
-                    spinner ? spinnerCmp() : null,
-                    spinner ? vspacer(10) : null,
-                    message ? box({className: 'xh-mask-text', item: message}) : null
-                ]
-            })
-        });
+        return XH.isMobileApp
+            ? mobileMaskImpl({message, onClick, spinner, className})
+            : desktopMaskImpl({message, onClick, inline, spinner, className});
     }
 });
 

desktop/cmp/treemap/SplitTreeMap.scss → cmp/treemap/SplitTreeMap.scss

@@ -36,6 +36,22 @@
     }
   }
 
+  &__splitter {
+    background-color: var(--xh-resizable-bg);
+
+    &--vertical {
+      height: 4px;
+      border-top: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+      border-bottom: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+    }
+
+    &--horizontal {
+      width: 4px;
+      border-left: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+      border-right: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
+    }
+  }
+
   &__mask-holder {
     position: absolute;
     top: 0;