@deephaven/dashboard 0.15.1-beta.4 → 0.15.2-beta.6

package/dist/layout/LayoutUtils.js

@@ -8,8 +8,30 @@ import deepEqual from 'deep-equal';
 import shortid from 'shortid';
 import isMatch from 'lodash.ismatch';
 import Log from '@deephaven/log';
+import { assertNotNull } from '@deephaven/utils';
 import GoldenLayoutThemeExport from "./GoldenLayoutThemeExport.js";
 var log = Log.module('LayoutUtils');
+export function isReactComponentConfig(config) {
+  return config.component !== undefined;
+}
+
+function isComponentConfig(config) {
+  return config.componentName !== undefined;
+}
+
+function isHTMLElement(element) {
+  return element.focus !== undefined;
+}
+
+function assertReactComponentConfig(config) {
+  if (!isReactComponentConfig(config)) {
+    throw new Error('config is not react component config');
+  }
+}
+
+function isStackItemConfig(config) {
+  return config.activeItemIndex !== undefined;
+}
 
 class LayoutUtils {
   static activateTab(root, config) {
@@ -22,13 +44,16 @@ class LayoutUtils {
 
 
     var contentItem = LayoutUtils.getContentItemInStack(stack, config);
-    stack.setActiveContentItem(contentItem);
+
+    if (contentItem) {
+      stack.setActiveContentItem(contentItem);
+    }
   }
   /**
    * Is the tab with the given config active
-   * @param {ContentItem} root A GoldenLayout content item with the tab
-   * @param {Object} config Tab config to match
-   * @returns {boolean} True if the tab is active
+   * @param root A GoldenLayout content item with the tab
+   * @param config Tab config to match
+   * @returns True if the tab is active
    */
 
 
@@ -47,7 +72,7 @@ class LayoutUtils {
   }
   /**
    * Adds a stack to the root layout specified. Adds to the first row/column with only one item
-   * @param {ContentItem} root A GoldenLayout content item to add the stack to
+   * @param parent A GoldenLayout content item to add the stack to
    * @returns The newly created stack.
    */
 
@@ -76,7 +101,10 @@ class LayoutUtils {
 
         var maintainFocusElement = document.activeElement;
         parent.contentItems[0].addChild(child);
-        maintainFocusElement === null || maintainFocusElement === void 0 ? void 0 : maintainFocusElement.focus();
+
+        if (maintainFocusElement && maintainFocusElement.focus) {
+          maintainFocusElement.focus();
+        }
       }
 
       return this.addStack(parent.contentItems[0], columnPreferred);
@@ -105,8 +133,8 @@ class LayoutUtils {
   }
   /**
    * Gets the first stack which contains a contentItem with the given config values
-   * @param {ContentItem} item Golden layout content item to search for the stack
-   * @param {Config} config The item properties to match
+   * @param item Golden layout content item to search for the stack
+   * @param  config The item properties to match
    */
 
 
@@ -142,10 +170,11 @@ class LayoutUtils {
   }
   /**
    * Gets a stack matching the specified config
-   * @param {Config} config The item config type to match, eg. { component: 'IrisGridPanel', title: 'Table Name' }
-   * @param {boolean} createIfNecessary Whether to create the stack if it does not exist.
-   * @param {boolean} matchComponentType If the config doesn't match exactly, just find another one of the same component type
-   * @param {boolean} allowEmptyStack If no configs match, search for an empty stack that can be used
+   * @param root The root GoldenLayout element
+   * @param config The item config type to match, eg. { component: 'IrisGridPanel', title: 'Table Name' }
+   * @param createIfNecessary Whether to create the stack if it does not exist.
+   * @param matchComponentType If the config doesn't match exactly, just find another one of the same component type
+   * @param allowEmptyStack If no configs match, search for an empty stack that can be used
    */
 
 
@@ -169,11 +198,11 @@ class LayoutUtils {
   }
   /**
    * Gets a stack matching one of the specified types, creates new stack if necessary
-   * @param {ContentItem} root The GoldenLayout root to find or create the stack in
-   * @param {Array[string]} types The array of component types to match
-   * @param {boolean} createIfNecessary Whether to create the stack if it does not exist
-   * @param {boolean} matchComponentType If the config doesn't match exactly, just find another one of the same component type
-   * @param {boolean} allowEmptyStack If no configs match, search for an empty stack that can be used
+   * @param root The GoldenLayout root to find or create the stack in
+   * @param types The array of component types to match
+   * @param createIfNecessary Whether to create the stack if it does not exist
+   * @param matchComponentType If the config doesn't match exactly, just find another one of the same component type
+   * @param allowEmptyStack If no configs match, search for an empty stack that can be used
    */
 
 
@@ -198,13 +227,17 @@ class LayoutUtils {
   }
   /**
    * Gets first content item with the specified config in stack.
-   * @param {ContentItem} stack The stack to search for the item
-   * @param {Config} config The item config type to match, eg. { component: 'IrisGridPanel', title: 'Table Name' }
-   * @returns {ContentItem} Returns the found content item, null if not found.
+   * @param stack The stack to search for the item
+   * @param config The item config type to match, eg. { component: 'IrisGridPanel', title: 'Table Name' }
+   * @returns Returns the found content item, null if not found.
    */
 
 
   static getContentItemInStack(stack, config) {
+    if (!stack) {
+      return null;
+    }
+
     for (var i = 0; i < stack.contentItems.length; i += 1) {
       var contentItem = stack.contentItems[i];
 
@@ -219,9 +252,8 @@ class LayoutUtils {
   }
   /**
    * Removes dynamic props from components in the given config so this config could be serialized
-   * @param {Array} config Config object
-   * @param {(name: string, config: PanelConfig) => PanelConfig | null}
-   * @returns {Array} Dehydrated config
+   * @param config Config objec
+   * @returns Dehydrated config
    */
 
 
@@ -267,7 +299,7 @@ class LayoutUtils {
     } = glContainer;
 
     if (tab == null) {
-      throw new Error('Cannot get tab for panel container', glContainer);
+      throw new Error("Cannot get tab for panel container ".concat(glContainer));
     }
 
     var tabRect = tab.element[0].getBoundingClientRect();
@@ -275,7 +307,7 @@ class LayoutUtils {
   }
   /**
    * Drop minor changes in Layout Configuration for deep comparison
-   * @param {Object} config Layout Configuration
+   * @param config Layout Configuration
    *
    * minor changes:
    * 1. sorts in grid
@@ -289,32 +321,34 @@ class LayoutUtils {
   static dropLayoutMinorChange(config) {
     for (var i = 0; i < config.length; i += 1) {
       var itemConfig = config[i];
-      var {
-        component,
-        content,
-        activeItemIndex
-      } = itemConfig;
-
-      if (content) {
-        if (activeItemIndex || activeItemIndex === 0) {
-          delete itemConfig.activeItemIndex;
-        }
 
-        LayoutUtils.dropLayoutMinorChange(content);
-      } else if (component === 'IrisGridPanel') {
-        if (itemConfig.props.panelState) {
-          delete itemConfig.id;
-          itemConfig.props.panelState.irisGridState.sorts = [];
-          itemConfig.props.panelState.irisGridState.quickFilters = [];
+      if (isReactComponentConfig(itemConfig)) {
+        var {
+          component,
+          content
+        } = itemConfig;
+
+        if (content) {
+          if (isStackItemConfig(itemConfig)) {
+            delete itemConfig.activeItemIndex;
+          }
+
+          LayoutUtils.dropLayoutMinorChange(content);
+        } else if (component === 'IrisGridPanel') {
+          if (itemConfig.props.panelState) {
+            delete itemConfig.id;
+            itemConfig.props.panelState.irisGridState.sorts = [];
+            itemConfig.props.panelState.irisGridState.quickFilters = [];
+          }
         }
       }
     }
   }
   /**
    * Compare two layouts to see if they are equivalent
-   * @param {object} layout1 A Golden Layout config object
-   * @param {object} layout2 Another Golden layout config object
-   * @param {boolean} major When true, will ignore "minor" property differences (eg. sorts)
+   * @param layout1 A Golden Layout config object
+   * @param layout2 Another Golden layout config object
+   * @param major When true, will ignore "minor" property differences (eg. sorts)
    */
 
 
@@ -337,9 +371,9 @@ class LayoutUtils {
   }
   /**
    * Adds dynamic props to components in the given config so this config could be used to initialize a layout
-   * @param {GoldenLayout.Config} config Dehydrated config object
-   * @param {(name: string, config: PanelProps) => PanelProps} hydrateComponent Function to hydrate the component
-   * @returns {Array} Hydrated config
+   * @param config Dehydrated config object
+   * @param hydrateComponent Function to hydrate the component
+   * @returns Hydrated config
    */
 
 
@@ -352,6 +386,7 @@ class LayoutUtils {
 
     for (var i = 0; i < config.length; i += 1) {
       var itemConfig = config[i];
+      assertReactComponentConfig(itemConfig);
       var {
         component,
         content,
@@ -368,13 +403,14 @@ class LayoutUtils {
         }));
       } else if (content) {
         var contentConfig = LayoutUtils.hydrateLayoutConfig(content, hydrateComponent);
+        var reactConfig = itemConfig;
 
-        if (itemConfig.activeItemIndex != null && itemConfig.activeItemIndex >= contentConfig.length) {
-          log.warn('Fixing bad activeItemIndex!', itemConfig.activeItemIndex, itemConfig);
-          itemConfig.activeItemIndex = 0;
+        if (isStackItemConfig(reactConfig) && reactConfig.activeItemIndex != null && reactConfig.activeItemIndex >= contentConfig.length) {
+          log.warn('Fixing bad activeItemIndex!', reactConfig.activeItemIndex, reactConfig);
+          reactConfig.activeItemIndex = 0;
         }
 
-        hydratedConfig.push(_objectSpread(_objectSpread({}, itemConfig), {}, {
+        hydratedConfig.push(_objectSpread(_objectSpread({}, reactConfig), {}, {
           content: contentConfig
         }));
       } else {
@@ -388,13 +424,13 @@ class LayoutUtils {
    * Opens a component. It will try and open the component in an existing stack of the same component.
    * If `replaceExisting` is true and there is a component found with the same `config.id`, it will replace that component with this one.
    * If `allowStack` is true and there is a component of the same type found, it will open in that stack (potentially covering up a panel).
-   * @param {ContentItem} root The GoldenLayout root to open the component in
-   * @param {Config} config The component config definition to open
-   * @param {Boolean} replaceExisting Whether it should replace the existing one matching component type and id, or open a new one
-   * @param {Config} replaceConfig The component config to replace
-   * @param {Boolean} createNewStack True to force opening in a new stack, false to try and open in a stack with the same type of component.
-   * @param {String} focusElement The element to focus on
-   * @param {MouseEvent} dragEvent Whether component is being created with a drag, mouse event is initial position for drag proxy
+   * @param root The GoldenLayout root to open the component in
+   * @param config The component config definition to open
+   * @param replaceExisting Whether it should replace the existing one matching component type and id, or open a new one
+   * @param replaceConfig The component config to replace
+   * @param createNewStack True to force opening in a new stack, false to try and open in a stack with the same type of component.
+   * @param focusElement The element to focus on
+   * @param dragEvent Whether component is being created with a drag, mouse event is initial position for drag proxy
    */
 
 
@@ -403,10 +439,10 @@ class LayoutUtils {
       root,
       config: configParam,
       replaceExisting = true,
-      replaceConfig = null,
+      replaceConfig = undefined,
       createNewStack = false,
-      focusElement = null,
-      dragEvent = null
+      focusElement = undefined,
+      dragEvent = undefined
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     // attempt to retain focus after dom manipulation, which can break focus
     var maintainFocusElement = document.activeElement;
@@ -418,7 +454,7 @@ class LayoutUtils {
     }
 
     if (dragEvent) {
-      root.layoutManager.createDragSourceFromEvent(config, dragEvent);
+      root === null || root === void 0 ? void 0 : root.layoutManager.createDragSourceFromEvent(config, dragEvent);
       return;
     }
 
@@ -426,7 +462,9 @@ class LayoutUtils {
       id: config.id,
       component: config.component
     };
+    assertNotNull(root);
     var stack = createNewStack ? LayoutUtils.addStack(root) : LayoutUtils.getStackForRoot(root, searchConfig);
+    assertNotNull(stack);
     var oldContentItem = LayoutUtils.getContentItemInStack(stack, searchConfig);
 
     if (focusElement) {
@@ -457,16 +495,16 @@ class LayoutUtils {
       stack.addChild(config);
     }
 
-    if (!focusElement && maintainFocusElement) {
+    if (!focusElement && maintainFocusElement && isHTMLElement(maintainFocusElement)) {
       maintainFocusElement.focus();
     }
   }
   /**
    * Opens a component in an given stack.
    * If `replaceExisting` is true and there is a component found with the same `config.id`, it will replace that component with this one
-   * @param {ContentItem} stack The GoldenLayout stack to open the component in
-   * @param {Config} config The component config definition to open
-   * @param {Boolean} replaceExisting Whether it should replace the existing one matching component type and id, or open a new one
+   * @param stack The GoldenLayout stack to open the component in
+   * @param config The component config definition to open
+   * @param replaceExisting Whether it should replace the existing one matching component type and id, or open a new one
    */
 
 
@@ -479,23 +517,25 @@ class LayoutUtils {
     };
     var oldContentItem = LayoutUtils.getContentItemInStack(stack, searchConfig);
 
-    if (replaceExisting && oldContentItem) {
-      var index = stack.contentItems.indexOf(oldContentItem); // Using remove/add here instead of replaceChild because I was getting errors with replaceChild... should be the same.
+    if (replaceExisting && oldContentItem && stack) {
+      var index = stack === null || stack === void 0 ? void 0 : stack.contentItems.indexOf(oldContentItem); // Using remove/add here instead of replaceChild because I was getting errors with replaceChild... should be the same.
       // Add first so that the stack doesn't get screwed up
 
       stack.addChild(config, index + 1);
       stack.removeChild(oldContentItem);
       stack.setActiveContentItem(stack.contentItems[index]);
     } else {
-      stack.addChild(config);
+      stack === null || stack === void 0 ? void 0 : stack.addChild(config);
     }
 
-    if (maintainFocusElement) maintainFocusElement.focus();
+    if (maintainFocusElement && isHTMLElement(maintainFocusElement)) {
+      maintainFocusElement.focus();
+    }
   }
   /**
    * Close the specified component and remove it from the stack it's currently in
-   * @param {ContentItem} root The GoldenLayout root to search and close the component in
-   * @param {Config} config The GoldenLayout component config definition to close, eg. { component: 'IrisGridPanel', id: 'table-t' }
+   * @param root The GoldenLayout root to search and close the component in
+   * @param config The GoldenLayout component config definition to close, eg. { component: 'IrisGridPanel', id: 'table-t' }
    */
 
 
@@ -512,14 +552,18 @@ class LayoutUtils {
     var oldContentItem = LayoutUtils.getContentItemInStack(stack, config);
     var maintainFocusElement = document.activeElement; // attempt to retain focus after dom manipulation, which can break focus
 
-    if (oldContentItem.isComponent) {
-      oldContentItem.container.close();
-    } else {
-      stack.removeChild(oldContentItem);
+    if (oldContentItem) {
+      if (oldContentItem.isComponent) {
+        // container property exists on a contentItem if contentItem is a component,
+        // however, this is not included in the types for a contentitem, thus the casting
+        oldContentItem.container.close();
+      } else {
+        stack.removeChild(oldContentItem);
+      }
     } // if focused element is still in dom restore focus, note it could have been in the removed panel so check first
 
 
-    if (maintainFocusElement && document.contains(maintainFocusElement)) {
+    if (maintainFocusElement && document.contains(maintainFocusElement) && isHTMLElement(maintainFocusElement)) {
       maintainFocusElement.focus();
     }
   }
@@ -534,13 +578,16 @@ class LayoutUtils {
 
 
     var contentItem = LayoutUtils.getContentItemInStack(stack, config);
-    contentItem.setTitle(newTitle);
+
+    if (contentItem) {
+      contentItem.setTitle(newTitle);
+    }
   }
   /**
    * Create a component clone based on the given config
-   * @param {ContentItem} root The GoldenLayout root to clone the component in
-   * @param {Config} config The config to clone
-   * @returns {Config} Clone config
+   * @param root The GoldenLayout root to clone the component in
+   * @param config The config to clone
+   * @returns Clone config
    */
 
 
@@ -570,17 +617,25 @@ class LayoutUtils {
   }
   /**
    * Get panel component state for the given config
-   * @param {Object} config Panel config
-   * @returns {Object} Panel state
+   * @param config Panel config
+   * @returns Panel state
    */
 
 
   static getPanelComponentState(config) {
-    var _ref, _config$componentStat, _config$componentStat2, _config$props;
+    if (isComponentConfig(config)) {
+      var _config$componentStat;
+
+      return (_config$componentStat = config.componentState) === null || _config$componentStat === void 0 ? void 0 : _config$componentStat.panelState;
+    }
 
-    return (// Fallback to props.panelState for uninitialized panels
-      (_ref = (_config$componentStat = (_config$componentStat2 = config.componentState) === null || _config$componentStat2 === void 0 ? void 0 : _config$componentStat2.panelState) !== null && _config$componentStat !== void 0 ? _config$componentStat : (_config$props = config.props) === null || _config$props === void 0 ? void 0 : _config$props.panelState) !== null && _ref !== void 0 ? _ref : null
-    );
+    if (isReactComponentConfig(config)) {
+      var _config$props;
+
+      return (_config$props = config.props) === null || _config$props === void 0 ? void 0 : _config$props.panelState;
+    }
+
+    return null;
   }
 
   static makeDefaultLayout() {
@@ -599,7 +654,7 @@ class LayoutUtils {
   }
   /**
    * Gets a containers root node
-   * @param {GlContainer} container The Golden Layout container to get the root for
+   * @param container The Golden Layout container to get the root for
    */
 
 
@@ -608,7 +663,7 @@ class LayoutUtils {
   }
   /**
    * Gets the config for the panel component given a glContainer
-   * @param {GlContainer} container The Golden Layout container to get the config for
+   * @param container The Golden Layout container to get the config for
    */
 
 
@@ -617,6 +672,8 @@ class LayoutUtils {
       if (container.tab && container.tab.contentItem) {
         return container.tab.contentItem.config;
       } // If the container hasn't populated the tab yet, just get the config directly from the container
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore private api usage
       // eslint-disable-next-line no-underscore-dangle
 
 
@@ -643,8 +700,8 @@ class LayoutUtils {
   }
   /**
    * Retrieve the panel ID for the provided golden layout container
-   * @param {GlContainer} glContainer The container to get the panel ID for
-   * @returns {string|null} Panel ID
+   * @param glContainer The container to get the panel ID for
+   * @returns Panel ID
    */
 
 
@@ -659,8 +716,8 @@ class LayoutUtils {
   }
   /**
    * Retrieve the ID of the panel provided
-   * @param {Component} panel The panel to get the ID for
-   * @returns {string|null} Panel ID
+   * @param panel The panel to get the ID for
+   * @returns Panel ID
    */
 
 
@@ -672,24 +729,30 @@ class LayoutUtils {
   }
   /**
    * Get component name from the panel instance
-   * @param {Component} panel Panel to get component name for
-   * @returns {string} Component name or null if unable to retrieve name
+   * @param panel Panel to get component name for
+   * @returns Component name or null if unable to retrieve name
    */
 
 
   static getComponentNameFromPanel(panel) {
-    var _config$component;
-
     var {
       glContainer
     } = panel.props;
     var config = LayoutUtils.getComponentConfigFromContainer(glContainer);
-    return (_config$component = config === null || config === void 0 ? void 0 : config.component) !== null && _config$component !== void 0 ? _config$component : null;
+
+    if (config) {
+      var _config$component;
+
+      assertReactComponentConfig(config);
+      return (_config$component = config === null || config === void 0 ? void 0 : config.component) !== null && _config$component !== void 0 ? _config$component : null;
+    }
+
+    return null;
   }
   /**
    * Get component name for wrapped and un-wrapped components
-   * @param {Component} component Component to get name for
-   * @returns {string} Component name
+   * @param component Component to get name for
+   * @returns Component name
    * @throws If displayName for the component is not defined
    */
 
@@ -700,7 +763,7 @@ class LayoutUtils {
     var name = (_component$WrappedCom = (_component$WrappedCom2 = component.WrappedComponent) === null || _component$WrappedCom2 === void 0 ? void 0 : _component$WrappedCom2.displayName) !== null && _component$WrappedCom !== void 0 ? _component$WrappedCom : component.displayName;
 
     if (name == null) {
-      throw new Error('Component displayName not defined', component);
+      throw new Error("Component displayName not defined ".concat(component));
     }
 
     return name;
@@ -708,9 +771,9 @@ class LayoutUtils {
   /**
    * Put focus on the first "input" element (input, button, select, textarea) within an element
    * If element is null or input element not found, does nothing
-   * @param {DOMElement} element The element to put focus in.
-   * @param {String} selector The first element matching this selector will be focused.
-   * @returns {DOMElement} The element that was focused, null if not focused
+   * @param element The element to put focus in.
+   * @param selector The first element matching this selector will be focused.
+   * @returns The element that was focused, null if not focused
    */
 
 
@@ -727,12 +790,15 @@ class LayoutUtils {
       return null;
     }
 
-    focusElement.focus();
+    if (isHTMLElement(focusElement)) {
+      focusElement.focus();
+    }
+
     return focusElement;
   }
   /**
    * Get a promise that initializes when layout is initialized
-   * @param {GoldenLayout} layout The layout to await initialization on
+   * @param layout The layout to await initialization on
    * @returns Promise that resolves when layout is initialized
    */