@deephaven/dashboard 0.5.2-beta.0 → 0.6.1-demo.8

package/dist/layout/LayoutUtils.js

@@ -2,800 +2,755 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import deepEqual from 'deep-equal';
 import shortid from 'shortid';
+import isMatch from 'lodash.ismatch';
 import Log from '@deephaven/log';
-import GoldenLayoutThemeExport from './GoldenLayoutThemeExport';
+import GoldenLayoutThemeExport from "./GoldenLayoutThemeExport.js";
 var log = Log.module('LayoutUtils');
 
-var LayoutUtils = /*#__PURE__*/function () {
-  function LayoutUtils() {
-    _classCallCheck(this, LayoutUtils);
+class LayoutUtils {
+  static activateTab(root, config) {
+    var stack = LayoutUtils.getStackForRoot(root, config, false);
+
+    if (!stack) {
+      log.error('Could not find stack for config', config);
+      return;
+    } // Find the tab with the specified table and activate it
+
+
+    var contentItem = LayoutUtils.getContentItemInStack(stack, config);
+    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
+   */
 
-  _createClass(LayoutUtils, null, [{
-    key: "activateTab",
-    value: function activateTab(root, config) {
-      var stack = LayoutUtils.getStackForRoot(root, config, false);
 
-      if (!stack) {
-        log.error('Could not find stack for config', config);
-        return;
-      } // Find the tab with the specified table and activate it
-
-
-      var contentItem = LayoutUtils.getContentItemInStack(stack, config);
-      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
-     */
-
-  }, {
-    key: "isActiveTab",
-    value: function isActiveTab(root, config) {
-      var stack = LayoutUtils.getStackForRoot(root, config, false);
-
-      if (!stack) {
-        log.error('Could not find stack for config', config);
-        return false;
-      } // Find the item with the specified config and compare with active item
-
-
-      var contentItem = LayoutUtils.getContentItemInStack(stack, config);
-      var activeItem = stack.getActiveContentItem();
-      return activeItem === contentItem;
-    }
-    /**
-     * 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
-     * @returns The newly created stack.
-     */
-
-  }, {
-    key: "addStack",
-    value: function addStack(parent) {
-      var columnPreferred = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var type = columnPreferred ? 'column' : 'row';
-
-      if (parent.isRoot) {
-        if (!parent.contentItems || parent.contentItems.length === 0) {
-          parent.addChild({
-            type: type
-          });
-        }
+  static isActiveTab(root, config) {
+    var stack = LayoutUtils.getStackForRoot(root, config, false);
 
-        var child = parent.contentItems[0];
+    if (!stack) {
+      log.error('Could not find stack for config', config);
+      return false;
+    } // Find the item with the specified config and compare with active item
 
-        var _isCorrectType = columnPreferred ? child.isColumn : child.isRow;
 
-        if (!_isCorrectType) {
-          parent.removeChild(child, true);
-          parent.addChild({
-            type: type
-          });
-          parent.contentItems[0].addChild(child);
-        }
+    var contentItem = LayoutUtils.getContentItemInStack(stack, config);
+    var activeItem = stack.getActiveContentItem();
+    return activeItem === contentItem;
+  }
+  /**
+   * 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
+   * @returns The newly created stack.
+   */
 
-        return this.addStack(parent.contentItems[0], columnPreferred);
-      }
 
-      if (parent.contentItems.length < 2) {
+  static addStack(parent) {
+    var columnPreferred = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var type = columnPreferred ? 'column' : 'row';
+
+    if (parent.isRoot) {
+      if (!parent.contentItems || parent.contentItems.length === 0) {
         parent.addChild({
-          type: 'stack'
+          type
         });
-        return parent.contentItems[parent.contentItems.length - 1];
       }
 
-      var newParent = parent.contentItems[parent.contentItems.length - 1];
-      var isCorrectType = !columnPreferred ? newParent.isColumn : newParent.isRow;
+      var child = parent.contentItems[0];
+
+      var _isCorrectType = columnPreferred ? child.isColumn : child.isRow;
 
-      if (!isCorrectType) {
+      if (!_isCorrectType) {
+        parent.removeChild(child, true);
         parent.addChild({
-          type: !columnPreferred ? 'column' : 'row'
-        });
-        parent.removeChild(newParent, true);
-        parent.contentItems[parent.contentItems.length - 1].addChild(newParent);
-        newParent = parent.contentItems[parent.contentItems.length - 1];
+          type
+        }); // The addChild may cause the element that has focus to be removed from the DOM, which changes focus to the body
+        // Try and maintain the focus as best we can. The unfocused element may still send a blur/focus event so that needs to be handled correctly.
+
+        var maintainFocusElement = document.activeElement;
+        parent.contentItems[0].addChild(child);
+        maintainFocusElement === null || maintainFocusElement === void 0 ? void 0 : maintainFocusElement.focus();
       }
 
-      return this.addStack(newParent, !columnPreferred);
+      return this.addStack(parent.contentItems[0], columnPreferred);
     }
-    /**
-     * @param {ContentItem} item Golden layout content item to search for the stack
-     * @param {Config} config The item properties to match
-     */
 
-  }, {
-    key: "getStackForConfig",
-    value: function getStackForConfig(item) {
-      var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      var allowEmptyStack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (parent.contentItems.length < 2) {
+      parent.addChild({
+        type: 'stack'
+      });
+      return parent.contentItems[parent.contentItems.length - 1];
+    }
 
-      if (allowEmptyStack && item.isStack && item.contentItems.length === 0) {
-        return item;
-      }
+    var newParent = parent.contentItems[parent.contentItems.length - 1];
+    var isCorrectType = !columnPreferred ? newParent.isColumn : newParent.isRow;
 
-      if (!item.contentItems) {
-        return null;
-      }
+    if (!isCorrectType) {
+      parent.addChild({
+        type: !columnPreferred ? 'column' : 'row'
+      });
+      parent.removeChild(newParent, true);
+      parent.contentItems[parent.contentItems.length - 1].addChild(newParent);
+      newParent = parent.contentItems[parent.contentItems.length - 1];
+    }
 
-      for (var i = 0; i < item.contentItems.length; i += 1) {
-        var contentItem = item.contentItems[i];
+    return this.addStack(newParent, !columnPreferred);
+  }
+  /**
+   * 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
+   */
 
-        if (contentItem.isComponent && contentItem.config) {
-          var isMatch = true;
-          var keys = Object.keys(config);
 
-          for (var k = 0; k < keys.length; k += 1) {
-            var key = keys[k];
+  static getStackForConfig(item) {
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var allowEmptyStack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-            if (config[key] !== contentItem.config[key]) {
-              isMatch = false;
-              break;
-            }
-          }
+    if (allowEmptyStack && item.isStack && item.contentItems.length === 0) {
+      return item;
+    }
 
-          if (isMatch) {
-            return item;
-          }
-        }
+    if (!item.contentItems) {
+      return null;
+    }
 
-        var stack = this.getStackForConfig(contentItem, config, allowEmptyStack);
+    for (var i = 0; i < item.contentItems.length; i += 1) {
+      var contentItem = item.contentItems[i];
 
-        if (stack) {
-          return stack;
+      if (contentItem.isComponent && contentItem.config) {
+        if (isMatch(contentItem.config, config)) {
+          return item;
         }
       }
 
-      return null;
-    }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "getStackForRoot",
-    value: function getStackForRoot(root, config) {
-      var createIfNecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var matchComponentType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-      var allowEmptyStack = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-      var stack = this.getStackForConfig(root, config);
-
-      if (!stack && matchComponentType) {
-        stack = this.getStackForConfig(root, {
-          component: config.component
-        }, allowEmptyStack);
-      }
-
-      if (!stack && createIfNecessary) {
-        stack = this.addStack(root);
-      }
+      var stack = this.getStackForConfig(contentItem, config, allowEmptyStack);
 
-      return stack;
-    }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "getStackForComponentTypes",
-    value: function getStackForComponentTypes(root, types) {
-      var createIfNecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var matchComponentType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-      var allowEmptyStack = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-
-      for (var i = 0; i < types.length; i += 1) {
-        var component = types[i];
-        var isLastType = i === types.length - 1;
-        var stack = LayoutUtils.getStackForRoot(root, {
-          component: component
-        }, createIfNecessary && isLastType, matchComponentType, allowEmptyStack);
-
-        if (stack) {
-          return stack;
-        }
+      if (stack) {
+        return stack;
       }
+    }
 
-      return null;
+    return null;
+  }
+  /**
+   * 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
+   */
+
+
+  static getStackForRoot(root, config) {
+    var createIfNecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var matchComponentType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    var allowEmptyStack = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+    var stack = this.getStackForConfig(root, config);
+
+    if (!stack && matchComponentType) {
+      stack = this.getStackForConfig(root, {
+        component: config.component
+      }, allowEmptyStack);
     }
-    /**
-     * Gets 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.
-     */
-
-  }, {
-    key: "getContentItemInStack",
-    value: function getContentItemInStack(stack, config) {
-      for (var i = 0; i < stack.contentItems.length; i += 1) {
-        var contentItem = stack.contentItems[i];
-
-        if (contentItem.isComponent && contentItem.config) {
-          var isMatch = true;
-          var keys = Object.keys(config);
-
-          for (var k = 0; k < keys.length; k += 1) {
-            var key = keys[k];
-
-            if (config[key] !== contentItem.config[key]) {
-              isMatch = false;
-              break;
-            }
-          }
-
-          if (isMatch) {
-            return contentItem;
-          }
-        }
-      }
 
-      return null;
+    if (!stack && createIfNecessary) {
+      stack = this.addStack(root);
     }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "dehydrateLayoutConfig",
-    value: function dehydrateLayoutConfig(config, dehydrateComponent) {
-      if (!config || !config.length) {
-        return [];
-      }
 
-      var dehydratedConfig = [];
+    return stack;
+  }
+  /**
+   * 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
+   */
+
+
+  static getStackForComponentTypes(root, types) {
+    var createIfNecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var matchComponentType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    var allowEmptyStack = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+
+    for (var i = 0; i < types.length; i += 1) {
+      var component = types[i];
+      var isLastType = i === types.length - 1;
+      var stack = LayoutUtils.getStackForRoot(root, {
+        component
+      }, createIfNecessary && isLastType, matchComponentType, allowEmptyStack);
+
+      if (stack) {
+        return stack;
+      }
+    }
 
-      for (var i = 0; i < config.length; i += 1) {
-        var itemConfig = config[i];
-        var component = itemConfig.component,
-            content = itemConfig.content;
+    return null;
+  }
+  /**
+   * 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.
+   */
 
-        if (component) {
-          var dehydratedComponent = dehydrateComponent(component, itemConfig);
 
-          if (dehydratedComponent) {
-            dehydratedConfig.push(dehydratedComponent);
-          } else {
-            log.debug2("dehydrateLayoutConfig: skipping unmapped component \"".concat(component, "\""));
-          }
-        } else if (content) {
-          var layoutItemConfig = _objectSpread(_objectSpread({}, itemConfig), {}, {
-            content: LayoutUtils.dehydrateLayoutConfig(content, dehydrateComponent)
-          });
+  static getContentItemInStack(stack, config) {
+    for (var i = 0; i < stack.contentItems.length; i += 1) {
+      var contentItem = stack.contentItems[i];
 
-          dehydratedConfig.push(layoutItemConfig);
-        } else {
-          dehydratedConfig.push(itemConfig);
+      if (contentItem.isComponent && contentItem.config) {
+        if (isMatch(contentItem.config, config)) {
+          return contentItem;
         }
       }
+    }
 
-      return dehydratedConfig;
+    return null;
+  }
+  /**
+   * 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
+   */
+
+
+  static dehydrateLayoutConfig(config, dehydrateComponent) {
+    if (!config || !config.length) {
+      return [];
     }
-  }, {
-    key: "getTabPoint",
-    value: function getTabPoint(glContainer) {
-      var tab = glContainer.tab;
 
-      if (tab == null) {
-        throw new Error('Cannot get tab for panel container', glContainer);
-      }
+    var dehydratedConfig = [];
+
+    for (var i = 0; i < config.length; i += 1) {
+      var itemConfig = config[i];
+      var {
+        component,
+        content
+      } = itemConfig;
+
+      if (component) {
+        var dehydratedComponent = dehydrateComponent(component, itemConfig);
 
-      var tabRect = tab.element[0].getBoundingClientRect();
-      return [tabRect.left + tabRect.width * 0.5, tabRect.bottom - 8];
-    }
-    /**
-     * Drop minor changes in Layout Configuration for deep comparison
-     * @param {Object} config Layout Configuration
-     *
-     * minor changes:
-     * 1. sorts in grid
-     * 2. quick filters in grid
-     * 3. active item
-     *
-     * item id is also removed
-     */
-
-  }, {
-    key: "dropLayoutMinorChange",
-    value: function dropLayoutMinorChange(config) {
-      for (var i = 0; i < config.length; i += 1) {
-        var itemConfig = config[i];
-        var component = itemConfig.component,
-            content = itemConfig.content,
-            activeItemIndex = itemConfig.activeItemIndex;
-
-        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 (dehydratedComponent) {
+          dehydratedConfig.push(dehydratedComponent);
+        } else {
+          log.debug2("dehydrateLayoutConfig: skipping unmapped component \"".concat(component, "\""));
         }
+      } else if (content) {
+        var layoutItemConfig = _objectSpread(_objectSpread({}, itemConfig), {}, {
+          content: LayoutUtils.dehydrateLayoutConfig(content, dehydrateComponent)
+        });
+
+        dehydratedConfig.push(layoutItemConfig);
+      } else {
+        dehydratedConfig.push(itemConfig);
       }
     }
-    /**
-     * 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)
-     */
-
-  }, {
-    key: "isEqual",
-    value: function isEqual(layout1, layout2) {
-      var major = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-
-      if (major) {
-        var layout1Clone = LayoutUtils.cloneLayout(layout1);
-        var layout2Clone = LayoutUtils.cloneLayout(layout2);
-        LayoutUtils.dropLayoutMinorChange(layout1Clone);
-        LayoutUtils.dropLayoutMinorChange(layout2Clone);
-        return deepEqual(layout1Clone, layout2Clone);
-      }
 
-      return deepEqual(layout1, layout2);
-    }
-  }, {
-    key: "cloneLayout",
-    value: function cloneLayout(layout) {
-      return JSON.parse(JSON.stringify(layout));
-    }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "hydrateLayoutConfig",
-    value: function hydrateLayoutConfig(config, hydrateComponent) {
-      if (!config || !config.length) {
-        return [];
-      }
+    return dehydratedConfig;
+  }
 
-      var hydratedConfig = [];
-
-      for (var i = 0; i < config.length; i += 1) {
-        var itemConfig = config[i];
-        var component = itemConfig.component,
-            content = itemConfig.content,
-            props = itemConfig.props,
-            type = itemConfig.type;
-
-        if (type === 'react-component') {
-          var _itemConfig$id;
-
-          hydratedConfig.push(_objectSpread(_objectSpread({}, itemConfig), {}, {
-            id: (_itemConfig$id = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.id) !== null && _itemConfig$id !== void 0 ? _itemConfig$id : shortid(),
-            props: hydrateComponent(component, props)
-          }));
-        } else if (content) {
-          var contentConfig = LayoutUtils.hydrateLayoutConfig(content, hydrateComponent);
-
-          if (itemConfig.activeItemIndex != null && itemConfig.activeItemIndex >= contentConfig.length) {
-            log.warn('Fixing bad activeItemIndex!', itemConfig.activeItemIndex, itemConfig);
-            itemConfig.activeItemIndex = 0;
-          }
-
-          hydratedConfig.push(_objectSpread(_objectSpread({}, itemConfig), {}, {
-            content: contentConfig
-          }));
-        } else {
-          hydratedConfig.push(itemConfig);
+  static getTabPoint(glContainer) {
+    var {
+      tab
+    } = glContainer;
+
+    if (tab == null) {
+      throw new Error('Cannot get tab for panel container', glContainer);
+    }
+
+    var tabRect = tab.element[0].getBoundingClientRect();
+    return [tabRect.left + tabRect.width * 0.5, tabRect.bottom - 8];
+  }
+  /**
+   * Drop minor changes in Layout Configuration for deep comparison
+   * @param {Object} config Layout Configuration
+   *
+   * minor changes:
+   * 1. sorts in grid
+   * 2. quick filters in grid
+   * 3. active item
+   *
+   * item id is also removed
+   */
+
+
+  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;
         }
-      }
 
-      return hydratedConfig;
-    }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "openComponent",
-    value: function openComponent() {
-      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          root = _ref.root,
-          configParam = _ref.config,
-          _ref$replaceExisting = _ref.replaceExisting,
-          replaceExisting = _ref$replaceExisting === void 0 ? true : _ref$replaceExisting,
-          _ref$replaceConfig = _ref.replaceConfig,
-          replaceConfig = _ref$replaceConfig === void 0 ? null : _ref$replaceConfig,
-          _ref$createNewStack = _ref.createNewStack,
-          createNewStack = _ref$createNewStack === void 0 ? false : _ref$createNewStack,
-          _ref$focusElement = _ref.focusElement,
-          focusElement = _ref$focusElement === void 0 ? null : _ref$focusElement,
-          _ref$dragEvent = _ref.dragEvent,
-          dragEvent = _ref$dragEvent === void 0 ? null : _ref$dragEvent;
-
-      // attempt to retain focus after dom manipulation, which can break focus
-      var maintainFocusElement = document.activeElement;
-
-      var config = _objectSpread({}, configParam);
-
-      if (!config.id) {
-        config.id = shortid.generate();
+        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)
+   */
+
+
+  static isEqual(layout1, layout2) {
+    var major = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+    if (major) {
+      var layout1Clone = LayoutUtils.cloneLayout(layout1);
+      var layout2Clone = LayoutUtils.cloneLayout(layout2);
+      LayoutUtils.dropLayoutMinorChange(layout1Clone);
+      LayoutUtils.dropLayoutMinorChange(layout2Clone);
+      return deepEqual(layout1Clone, layout2Clone);
+    }
 
-      if (dragEvent) {
-        root.layoutManager.createDragSourceFromEvent(config, dragEvent);
-        return;
-      }
+    return deepEqual(layout1, layout2);
+  }
+
+  static cloneLayout(layout) {
+    return JSON.parse(JSON.stringify(layout));
+  }
+  /**
+   * 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
+   */
 
-      var searchConfig = replaceConfig || {
-        id: config.id,
-        component: config.component
-      };
-      var stack = createNewStack ? LayoutUtils.addStack(root) : LayoutUtils.getStackForRoot(root, searchConfig);
-      var oldContentItem = LayoutUtils.getContentItemInStack(stack, searchConfig);
-
-      if (focusElement) {
-        // We need to listen for when the stack is created
-        var onComponentCreated = function onComponentCreated(event) {
-          log.debug('Component created, focusing element', focusElement);
-          stack.off('componentCreated', onComponentCreated);
-          var element = event.origin.element; // Need to wait until the component actually renders.
-
-          requestAnimationFrame(function () {
-            LayoutUtils.focusElement(element[0], focusElement);
-          });
-        };
-
-        stack.on('componentCreated', onComponentCreated);
-      }
 
-      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.
-        // Add first so that the stack doesn't get screwed up
+  static hydrateLayoutConfig(config, hydrateComponent) {
+    if (!config || !config.length) {
+      return [];
+    }
+
+    var hydratedConfig = [];
+
+    for (var i = 0; i < config.length; i += 1) {
+      var itemConfig = config[i];
+      var {
+        component,
+        content,
+        props,
+        type
+      } = itemConfig;
+
+      if (type === 'react-component') {
+        var _itemConfig$id;
+
+        hydratedConfig.push(_objectSpread(_objectSpread({}, itemConfig), {}, {
+          id: (_itemConfig$id = itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.id) !== null && _itemConfig$id !== void 0 ? _itemConfig$id : shortid(),
+          props: hydrateComponent(component, props)
+        }));
+      } else if (content) {
+        var contentConfig = LayoutUtils.hydrateLayoutConfig(content, hydrateComponent);
+
+        if (itemConfig.activeItemIndex != null && itemConfig.activeItemIndex >= contentConfig.length) {
+          log.warn('Fixing bad activeItemIndex!', itemConfig.activeItemIndex, itemConfig);
+          itemConfig.activeItemIndex = 0;
+        }
 
-        stack.addChild(config, index + 1);
-        stack.removeChild(oldContentItem);
-        stack.setActiveContentItem(stack.contentItems[index]);
+        hydratedConfig.push(_objectSpread(_objectSpread({}, itemConfig), {}, {
+          content: contentConfig
+        }));
       } else {
-        stack.addChild(config);
+        hydratedConfig.push(itemConfig);
       }
+    }
 
-      if (!focusElement && maintainFocusElement) {
-        maintainFocusElement.focus();
-      }
+    return hydratedConfig;
+  }
+  /**
+   * 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
+   */
+
+
+  static openComponent() {
+    var {
+      root,
+      config: configParam,
+      replaceExisting = true,
+      replaceConfig = null,
+      createNewStack = false,
+      focusElement = null,
+      dragEvent = null
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    // attempt to retain focus after dom manipulation, which can break focus
+    var maintainFocusElement = document.activeElement;
+
+    var config = _objectSpread({}, configParam);
+
+    if (!config.id) {
+      config.id = shortid.generate();
     }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "openComponentInStack",
-    value: function openComponentInStack(stack, config) {
-      var replaceExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var maintainFocusElement = document.activeElement; // attempt to retain focus after dom manipulation, which can break focus
-
-      var searchConfig = {
-        id: config.id,
-        component: config.component
+
+    if (dragEvent) {
+      root.layoutManager.createDragSourceFromEvent(config, dragEvent);
+      return;
+    }
+
+    var searchConfig = replaceConfig || {
+      id: config.id,
+      component: config.component
+    };
+    var stack = createNewStack ? LayoutUtils.addStack(root) : LayoutUtils.getStackForRoot(root, searchConfig);
+    var oldContentItem = LayoutUtils.getContentItemInStack(stack, searchConfig);
+
+    if (focusElement) {
+      // We need to listen for when the stack is created
+      var onComponentCreated = event => {
+        log.debug('Component created, focusing element', focusElement);
+        stack.off('componentCreated', onComponentCreated);
+        var {
+          element
+        } = event.origin; // Need to wait until the component actually renders.
+
+        requestAnimationFrame(() => {
+          LayoutUtils.focusElement(element[0], focusElement);
+        });
       };
-      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.
-        // Add first so that the stack doesn't get screwed up
+      stack.on('componentCreated', onComponentCreated);
+    }
 
-        stack.addChild(config, index + 1);
-        stack.removeChild(oldContentItem);
-        stack.setActiveContentItem(stack.contentItems[index]);
-      } else {
-        stack.addChild(config);
-      }
+    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.
+      // Add first so that the stack doesn't get screwed up
 
-      if (maintainFocusElement) maintainFocusElement.focus();
+      stack.addChild(config, index + 1);
+      stack.removeChild(oldContentItem);
+      stack.setActiveContentItem(stack.contentItems[index]);
+    } else {
+      stack.addChild(config);
     }
-    /**
-     * 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' }
-     */
 
-  }, {
-    key: "closeComponent",
-    value: function closeComponent(root, config) {
-      var stack = LayoutUtils.getStackForRoot(root, config, false, false, false);
+    if (!focusElement && 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
+   */
+
+
+  static openComponentInStack(stack, config) {
+    var replaceExisting = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var maintainFocusElement = document.activeElement; // attempt to retain focus after dom manipulation, which can break focus
+
+    var searchConfig = {
+      id: config.id
+    };
+    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.
+      // 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);
+    }
 
-      if (!stack) {
-        log.warn('Cannot find stack for component, ignoring close', config);
-        return;
-      } // Find the tab with the specified config and remove it
-      // Same component was used to get the stack above, so getContentItemInStack shouldn't return null
+    if (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' }
+   */
 
 
-      var oldContentItem = LayoutUtils.getContentItemInStack(stack, config);
-      var maintainFocusElement = document.activeElement; // attempt to retain focus after dom manipulation, which can break focus
+  static closeComponent(root, config) {
+    var stack = LayoutUtils.getStackForRoot(root, config, false, false, false);
 
-      if (oldContentItem.isComponent) {
-        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 (!stack) {
+      log.warn('Cannot find stack for component, ignoring close', config);
+      return;
+    } // Find the tab with the specified config and remove it
+    // Same component was used to get the stack above, so getContentItemInStack shouldn't return null
 
 
-      if (maintainFocusElement && document.contains(maintainFocusElement)) {
-        maintainFocusElement.focus();
-      }
-    }
-  }, {
-    key: "renameComponent",
-    value: function renameComponent(root, config, newTitle) {
-      var stack = LayoutUtils.getStackForRoot(root, config, false);
+    var oldContentItem = LayoutUtils.getContentItemInStack(stack, config);
+    var maintainFocusElement = document.activeElement; // attempt to retain focus after dom manipulation, which can break focus
 
-      if (!stack) {
-        log.error('Could not find stack for config', config);
-        return;
-      } // Find the tab with the specified config and rename it
+    if (oldContentItem.isComponent) {
+      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
 
 
-      var contentItem = LayoutUtils.getContentItemInStack(stack, config);
-      contentItem.setTitle(newTitle);
+    if (maintainFocusElement && document.contains(maintainFocusElement)) {
+      maintainFocusElement.focus();
     }
-    /**
-     * 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
-     */
+  }
 
-  }, {
-    key: "cloneComponent",
-    value: function cloneComponent(root, config) {
-      var stack = LayoutUtils.getStackForRoot(root, config, false);
+  static renameComponent(root, config, newTitle) {
+    var stack = LayoutUtils.getStackForRoot(root, config, false);
 
-      if (!stack) {
-        log.error('Could not find stack for config', config);
-        return null;
-      }
+    if (!stack) {
+      log.error('Could not find stack for config', config);
+      return;
+    } // Find the tab with the specified config and rename it
 
-      var _config$props$panelSt = config.props.panelState,
-          panelState = _config$props$panelSt === void 0 ? null : _config$props$panelSt;
-      var componentState = config.componentState;
 
-      if (componentState) {
-        panelState = componentState.panelState;
-      }
+    var contentItem = LayoutUtils.getContentItemInStack(stack, config);
+    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
+   */
 
-      var cloneConfig = {
-        type: 'react-component',
-        component: config.component,
-        props: _objectSpread(_objectSpread({}, config.props), {}, {
-          panelState: panelState
-        }),
-        title: "".concat(config.title, " Copy"),
-        id: shortid.generate()
-      };
-      LayoutUtils.openComponentInStack(stack, cloneConfig);
-      return cloneConfig;
-    }
-  }, {
-    key: "makeDefaultLayout",
-    value: function makeDefaultLayout() {
-      return {
-        dimensions: {
-          headerHeight: GoldenLayoutThemeExport.tabHeight,
-          borderWidth: GoldenLayoutThemeExport.dragBorderWidth,
-          borderGrabWidth: 10
-        },
-        settings: {
-          showPopoutIcon: false,
-          showCloseIcon: false,
-          constrainDragToContainer: false
-        }
-      };
+
+  static cloneComponent(root, config) {
+    var stack = LayoutUtils.getStackForRoot(root, config, false);
+
+    if (!stack) {
+      log.error('Could not find stack for config', config);
+      return null;
     }
-    /**
-     * Gets a containers root node
-     * @param {GlContainer} container The Golden Layout container to get the root for
-     */
 
-  }, {
-    key: "getRootFromContainer",
-    value: function getRootFromContainer(container) {
-      return container.layoutManager.root;
+    var panelState = LayoutUtils.getPanelComponentState(config);
+    var cloneConfig = {
+      type: 'react-component',
+      component: config.component,
+      props: _objectSpread(_objectSpread({}, config.props), {}, {
+        panelState
+      }),
+      title: "".concat(config.title, " Copy"),
+      id: shortid.generate()
+    };
+    LayoutUtils.openComponentInStack(stack, cloneConfig);
+    return cloneConfig;
+  }
+  /**
+   * Get panel component state for the given config
+   * @param {Object} config Panel config
+   * @returns {Object} Panel state
+   */
+
+
+  static getPanelComponentState(config) {
+    var _ref, _config$componentStat, _config$componentStat2, _config$props;
+
+    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
+    );
+  }
+
+  static makeDefaultLayout() {
+    return {
+      dimensions: {
+        headerHeight: GoldenLayoutThemeExport.tabHeight,
+        borderWidth: GoldenLayoutThemeExport.dragBorderWidth,
+        borderGrabWidth: 10
+      },
+      settings: {
+        showPopoutIcon: false,
+        showCloseIcon: false,
+        constrainDragToContainer: false
+      }
+    };
+  }
+  /**
+   * Gets a containers root node
+   * @param {GlContainer} container The Golden Layout container to get the root for
+   */
+
+
+  static getRootFromContainer(container) {
+    return container.layoutManager.root;
+  }
+  /**
+   * Gets the config for the panel component given a glContainer
+   * @param {GlContainer} container The Golden Layout container to get the config for
+   */
+
+
+  static getComponentConfigFromContainer(container) {
+    if (container) {
+      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 no-underscore-dangle
+
+
+      return container._config;
     }
-    /**
-     * Gets the config for the panel component given a glContainer
-     * @param {GlContainer} container The Golden Layout container to get the config for
-     */
 
-  }, {
-    key: "getComponentConfigFromContainer",
-    value: function getComponentConfigFromContainer(container) {
-      if (container) {
-        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 no-underscore-dangle
+    return null;
+  }
 
+  static getTitleFromContainer(container) {
+    if (container && container.tab && container.tab.contentItem) {
+      return container.tab.contentItem.config.title;
+    }
 
-        return container._config;
-      }
+    return null;
+  }
 
-      return null;
+  static getTitleFromTab(tab) {
+    if (tab && tab.contentItem) {
+      return tab.contentItem.config.title;
     }
-  }, {
-    key: "getTitleFromContainer",
-    value: function getTitleFromContainer(container) {
-      if (container && container.tab && container.tab.contentItem) {
-        return container.tab.contentItem.config.title;
-      }
 
-      return null;
+    return null;
+  }
+  /**
+   * 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
+   */
+
+
+  static getIdFromContainer(glContainer) {
+    var config = LayoutUtils.getComponentConfigFromContainer(glContainer);
+
+    if (config) {
+      return config.id;
     }
-  }, {
-    key: "getTitleFromTab",
-    value: function getTitleFromTab(tab) {
-      if (tab && tab.contentItem) {
-        return tab.contentItem.config.title;
-      }
 
-      return null;
+    return null;
+  }
+  /**
+   * Retrieve the ID of the panel provided
+   * @param {Component} panel The panel to get the ID for
+   * @returns {string|null} Panel ID
+   */
+
+
+  static getIdFromPanel(panel) {
+    var {
+      glContainer
+    } = panel.props;
+    return LayoutUtils.getIdFromContainer(glContainer);
+  }
+  /**
+   * 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
+   */
+
+
+  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;
+  }
+  /**
+   * Get component name for wrapped and un-wrapped components
+   * @param {Component} component Component to get name for
+   * @returns {string} Component name
+   * @throws If displayName for the component is not defined
+   */
+
+
+  static getComponentName(component) {
+    var _component$WrappedCom, _component$WrappedCom2;
+
+    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);
     }
-    /**
-     * 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
-     */
 
-  }, {
-    key: "getIdFromContainer",
-    value: function getIdFromContainer(glContainer) {
-      var config = LayoutUtils.getComponentConfigFromContainer(glContainer);
+    return name;
+  }
+  /**
+   * 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
+   */
+
 
-      if (config) {
-        return config.id;
-      }
+  static focusElement(element) {
+    var selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LayoutUtils.DEFAULT_FOCUS_SELECTOR;
 
+    if (element == null) {
       return null;
     }
-    /**
-     * Retrieve the ID of the panel provided
-     * @param {Component} panel The panel to get the ID for
-     * @returns {string|null} Panel ID
-     */
-
-  }, {
-    key: "getIdFromPanel",
-    value: function getIdFromPanel(panel) {
-      var glContainer = panel.props.glContainer;
-      return LayoutUtils.getIdFromContainer(glContainer);
-    }
-    /**
-     * 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
-     */
-
-  }, {
-    key: "getComponentNameFromPanel",
-    value: function getComponentNameFromPanel(panel) {
-      var _config$component;
-
-      var glContainer = panel.props.glContainer;
-      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;
-    }
-    /**
-     * Get component name for wrapped and un-wrapped components
-     * @param {Component} component Component to get name for
-     * @returns {string} Component name
-     * @throws If displayName for the component is not defined
-     */
-
-  }, {
-    key: "getComponentName",
-    value: function getComponentName(component) {
-      var _component$WrappedCom, _component$WrappedCom2;
-
-      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);
-      }
 
-      return name;
-    }
-    /**
-     * 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
-     */
+    var focusElement = element.querySelector(selector);
 
-  }, {
-    key: "focusElement",
-    value: function focusElement(element) {
-      var selector = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LayoutUtils.DEFAULT_FOCUS_SELECTOR;
+    if (focusElement == null) {
+      return null;
+    }
 
-      if (element == null) {
-        return null;
-      }
+    focusElement.focus();
+    return focusElement;
+  }
+  /**
+   * Get a promise that initializes when layout is initialized
+   * @param {GoldenLayout} layout The layout to await initialization on
+   * @returns Promise that resolves when layout is initialized
+   */
 
-      var focusElement = element.querySelector(selector);
 
-      if (focusElement == null) {
-        return null;
+  static onInitialized(layout) {
+    return new Promise(resolve => {
+      if (layout.isInitialised) {
+        resolve();
+        return;
       }
 
-      focusElement.focus();
-      return focusElement;
-    }
-    /**
-     * Get a promise that initializes when layout is initialized
-     * @param {GoldenLayout} layout The layout to await initialization on
-     * @returns Promise that resolves when layout is initialized
-     */
-
-  }, {
-    key: "onInitialized",
-    value: function onInitialized(layout) {
-      return new Promise(function (resolve) {
-        if (layout.isInitialised) {
-          resolve();
-          return;
-        }
-
-        var onInit = function onInit() {
-          layout.off('initialised', onInit);
-          resolve();
-        };
+      var onInit = () => {
+        layout.off('initialised', onInit);
+        resolve();
+      };
 
-        layout.on('initialised', onInit);
-      });
-    }
-  }]);
+      layout.on('initialised', onInit);
+    });
+  }
 
-  return LayoutUtils;
-}();
+}
 
 _defineProperty(LayoutUtils, "DEFAULT_FOCUS_SELECTOR", 'input, select, textarea, button');