@refinitiv-ui/efx-grid 6.0.12 → 6.0.14

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -1,6 +1,8 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
 /** @typedef {Array<ColumnGroupingPlugin~GroupDefinition>} ColumnGroupingPlugin~Options
 * @description This options can be specified by `columnGrouping` property of the main grid's options or extension options.
 */
@@ -23,69 +25,69 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @extends {GridPlugin}
 * @param {ColumnGroupingPlugin~Options=} options
 */
-
 var ColumnGroupingPlugin = function ColumnGroupingPlugin(options) {
   var t = this;
   t._hosts = [];
   t._onColumnChanged = t._onColumnChanged.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onColumnMoved = t._onColumnMoved.bind(t);
+  t._requestApplyAddChildGroup = t._requestApplyAddChildGroup.bind(this);
   t._onPostSectionRender = t._onPostSectionRender.bind(t);
   t._onBeforeColumnBoundUpdate = t._onBeforeColumnBoundUpdate.bind(t);
   t._groupDefs = [];
   t._groupMap = {};
   t._childToParent = {};
-
   if (options) {
     t.config({
       "columnGrouping": options
     });
   }
 };
-
 Ext.inherits(ColumnGroupingPlugin, GridPlugin);
+
 /** @type {!ColumnGroupingPlugin~GroupDefinitions}
 * @description An array of group definition objects
 * @private
 */
-
 ColumnGroupingPlugin.prototype._groupDefs;
 /** @type {!Object.<string, ColumnGroupingPlugin~GroupDefinition>}
 * @description A map of group id to group defintion
 * @private
 */
-
 ColumnGroupingPlugin.prototype._groupMap;
 /** @type {!Object.<string, string>}
 * @description A map of child id to parent id
 * @private
 */
-
 ColumnGroupingPlugin.prototype._childToParent;
 /** @type {number}
 * @private
 */
-
 ColumnGroupingPlugin.prototype._maxDepth = 0;
 /** @type {boolean}
 * @private
 */
-
 ColumnGroupingPlugin.prototype._restructuring = false;
 /** @type {number}
 * @private
 */
-
 ColumnGroupingPlugin.prototype._rerenderTimerId = 0;
+/** @type {number}
+* @private
+*/
+ColumnGroupingPlugin.prototype._addingTimerId = 0;
+/** @type {Array<Object>}
+* @private
+*/
+ColumnGroupingPlugin.prototype._addingEvents = null;
+
 /** @private
 * @param {ColumnGroupingPlugin~GroupDefinition} groupingOptions
 * @return {string}
 */
-
 ColumnGroupingPlugin._getTooltip = function (groupingOptions) {
   var tooltip = groupingOptions["tooltip"];
   var title = groupingOptions["title"] || groupingOptions["name"];
-
   if (tooltip != null) {
     if (typeof tooltip === "string") {
       return tooltip; // There is a custom tooltip
@@ -95,7 +97,6 @@ ColumnGroupingPlugin._getTooltip = function (groupingOptions) {
       return "";
     }
   }
-
   return title;
 };
 /** Prevent built-in config
@@ -104,8 +105,6 @@ ColumnGroupingPlugin._getTooltip = function (groupingOptions) {
 * @param {Object} optionValue
 * @return {*}
 */
-
-
 ColumnGroupingPlugin.prototype.beforeProcessOption = function (optionName, optionValue) {
   if (optionName === "columnGroups") {
     this._legacyColumnGroups = optionValue;
@@ -117,8 +116,6 @@ ColumnGroupingPlugin.prototype.beforeProcessOption = function (optionName, optio
 /** @public
 * @return {string}
 */
-
-
 ColumnGroupingPlugin.prototype.getName = function () {
   return "ColumnGroupingPlugin"; // Read Only
 };
@@ -126,24 +123,22 @@ ColumnGroupingPlugin.prototype.getName = function () {
 * @override
 * @return {boolean}
 */
-
-
 ColumnGroupingPlugin.prototype.hasMultiTableSupport = function () {
   return true;
 };
+
 /** @public
 * @param {Object} host core grid object
 * @param {Object=} options
 */
-
-
 ColumnGroupingPlugin.prototype.initialize = function (host, options) {
   if (this._hosts.indexOf(host) >= 0) {
     return;
   }
-
   this._hosts.push(host);
-
+  if (!this._addingEvents) {
+    this._addingEvents = [];
+  }
   if (this._hosts.length === 1) {
     host.listen("columnAdded", this._onColumnAdded);
     host.listen("columnMoved", this._onColumnMoved);
@@ -152,93 +147,84 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
     host.listen("postSectionRender", this._onPostSectionRender);
     host.listen("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
   }
-
   this.config(options);
   this._legacyColumnGroups = null;
-
   if (this._initializedGrid && host.getSection("title")) {
     // For run-time loading
     this._applyGrouping();
   }
-
   if (!ColumnGroupingPlugin._styles) {
     ColumnGroupingPlugin._styles = prettifyCss([".tr-grid .title .column .cell:not(:last-child)", ["box-shadow: none;"]]);
   }
-
   if (!host._columnGroupingStyles) {
     host._columnGroupingStyles = true;
     injectCss(ColumnGroupingPlugin._styles, host.getElement());
-  } // TODO: wrong render group in hide/show column
-
+  }
+  // TODO: wrong render group in hide/show column
 };
 /**
 * @protected
 * @ignore
 */
-
-
 ColumnGroupingPlugin.prototype._afterInit = function () {
   this._applyGrouping();
 };
 /** @public
 * @param {Object} host core grid object
 */
-
-
 ColumnGroupingPlugin.prototype.unload = function (host) {
   var at = this._hosts.indexOf(host);
-
   if (at < 0) {
     return;
   }
-
   this._hosts.splice(at, 1);
-
   host.unlisten("columnAdded", this._onColumnChanged);
   host.unlisten("columnMoved", this._onColumnMoved);
   host.unlisten("columnRemoved", this._onColumnChanged);
   host.unlisten("postSectionRender", this._onPostSectionRender);
   host.unlisten("beforeColumnBoundUpdate", this._onBeforeColumnBoundUpdate);
-
   if (!this._hosts.length) {
     if (this._rerenderTimerId) {
       clearTimeout(this._rerenderTimerId);
       this._rerenderTimerId = 0;
     }
+    if (this._addingTimerId) {
+      clearTimeout(this._addingTimerId);
+      this._addingTimerId = 0;
+      this._addingEvents.length = 0;
+    }
   }
-
   this._dispose();
 };
 /** @public
 * @param {Object} options
 */
-
-
 ColumnGroupingPlugin.prototype.config = function (options) {
   if (!options) {
     return;
   }
-
   var extOptions = options["columnGrouping"];
-
   if (Array.isArray(extOptions)) {
-    this._groupDefs = extOptions.filter(ColumnGroupingPlugin._isValidGroup); // Shallow copy
+    this._groupDefs = extOptions.filter(ColumnGroupingPlugin._isValidGroup).map(ColumnGroupingPlugin._cloneObject);
   }
-
   this._migrateLegacyStructure(options["columns"]);
 };
 /** @public
 * @param {Object=} gridOptions
 * @return {!Object}
 */
-
-
 ColumnGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
-  var obj = gridOptions || {}; // TODO: Handle legacyRender method that has been migrated
+  var obj = gridOptions || {};
 
-  obj.columnGrouping = this.getGroupDefinitions();
+  // TODO: Handle legacyRender method that has been migrated
+  var columnGroupingDefs = this.getGroupDefinitions();
+  for (var i = 0; i < columnGroupingDefs.length; i++) {
+    columnGroupingDefs[i] = this._groupMap[columnGroupingDefs[i].id];
+  }
+  obj.columnGrouping = columnGroupingDefs;
   return obj;
 };
+
 /** Legacy group structure from composite grid will be converted to the new structure
 * @private
 * @param {Object.<string, Array>} objMap
@@ -246,119 +232,102 @@ ColumnGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 * @param {string} childId
 * @return {boolean} Returns true if there is any change
 */
-
-
 ColumnGroupingPlugin._mapParentToChildren = function (objMap, parentId, childId) {
   if (parentId && childId) {
     var ary = objMap[parentId];
-
     if (!ary) {
       ary = objMap[parentId] = [];
     }
-
     ary.push(childId);
     return true;
   }
-
   return false;
 };
 /** Legacy group structure from composite grid will be converted to the new structure
 * @private
 * @param {Array.<Object>} colModels
 */
-
-
 ColumnGroupingPlugin.prototype._migrateLegacyStructure = function (colModels) {
   var legacyColumnGroups = this._legacyColumnGroups;
-
   if (!legacyColumnGroups || !this._compositeGrid) {
     return;
-  } // Collecting parent groups from col models (leaf node)
-
-
+  }
+  // Collecting parent groups from col models (leaf node)
   var colCount = colModels.length;
   var groupMap = {}; // Parent-children pair map
-
   for (var c = 0; c < colCount; ++c) {
     var colModel = colModels[c];
-
     if (colModel) {
       ColumnGroupingPlugin._mapParentToChildren(groupMap, colModel.columnGroup, colModel.id);
     }
-  } // Collecting parent groups from the group list (groups can have parent as well)
-
-
+  }
+  // Collecting parent groups from the group list (groups can have parent as well)
   var groupCount = legacyColumnGroups.length;
   var i, groupDef;
-
   for (i = 0; i < groupCount; ++i) {
     groupDef = legacyColumnGroups[i];
-
     if (groupDef) {
       ColumnGroupingPlugin._mapParentToChildren(groupMap, groupDef.parent, groupDef.id);
     }
-  } // TODO: Merge child relationship to existing group structure
-  // Add new definitions and structure to the given legacy objects
-
+  }
+  // TODO: Merge child relationship to existing group structure
 
+  // Add new definitions and structure to the given legacy objects
   for (i = 0; i < groupCount; ++i) {
     groupDef = legacyColumnGroups[i];
-
     if (groupDef && groupDef.id) {
       // WARNING: Modify user's object
       var childAry = groupMap[groupDef.id];
       groupDef.children = childAry ? childAry : [];
-
       if (groupDef["formatter"] && groupDef["formatter"]["render"]) {
         groupDef["legacyRender"] = groupDef["formatter"]["render"];
         delete groupDef["formatter"];
       }
-
       this._groupDefs.push(groupDef);
     }
   }
 };
+
 /** Consolidate and process configuration. Force rerendering on column adding, removing, moving, initializaing, and run-time API execution.
 * @private
 */
-
-
 ColumnGroupingPlugin.prototype._applyGrouping = function () {
   this._rerenderTimerId = 0;
-
   if (this._restructuring) {
     return;
   }
-
   this._restructuring = true;
-
   this._evaluateGroupStructure();
-
-  var i;
+  var i, c, r, cell, section, colCount;
+  var rowCount = this._maxDepth + 1;
   var hostCount = this._hosts.length;
-
   for (i = hostCount; --i >= 0;) {
-    var host = this._hosts[i];
-    var titleSection = host.getSection("title");
-
-    if (titleSection) {
-      var rowCount = this._maxDepth + 1;
-      titleSection.setRowCount(rowCount); // This will cause postSectionRender event to be fired
-
-      titleSection.clearCellSpans();
-
-      this._spanGroupVertically(titleSection); // TODO: Some calculation in here should not be done in this loop
-
-
-      this._spanGroupHorizontally(titleSection);
+    section = this._hosts[i].getSection("title");
+    if (section) {
+      section.setRowCount(rowCount); // This will cause postSectionRender event to be fired
+      section.clearCellSpans();
+
+      // Remove additional cell settings from _renderGroups() method
+      colCount = section.getColumnCount();
+      for (c = 0; c < colCount; c++) {
+        for (r = 0; r < rowCount; r++) {
+          cell = section.getCell(c, r, false);
+          if (cell) {
+            cell.removeClass("no-sort");
+            cell.removeAttribute("group-id");
+          }
+        }
+      }
+      this._spanGroupVertically(section);
+      // TODO: Some calculation in here should not be done in this loop
+      this._spanGroupHorizontally(section);
     }
   }
+  this._restructuring = false;
 
-  this._restructuring = false; // Request re-rendering
-
+  // Request re-rendering
   for (i = hostCount; --i >= 0;) {
     var settings = this._hosts[i].getSectionSettings("title");
-
     if (settings) {
       settings.rerender();
     }
@@ -367,8 +336,6 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
 /** Set a timer to call applyGrouping only once to avoid performance issue
 * @private
 */
-
-
 ColumnGroupingPlugin.prototype._requestApplyGrouping = function () {
   if (!this._rerenderTimerId) {
     this._rerenderTimerId = setTimeout(this._applyGrouping.bind(this), 10);
@@ -378,38 +345,28 @@ ColumnGroupingPlugin.prototype._requestApplyGrouping = function () {
 * @private
 * @param {number} colIndex
 */
-
-
 ColumnGroupingPlugin.prototype._applyNearestGrouping = function (colIndex) {
   if (colIndex == null || colIndex < 0) {
     return;
   }
-
   var colIndexLeft = colIndex - 1;
   var colIndexRight = colIndex + 1;
   var groupLeftIds = this.getGroupIds(colIndexLeft);
   var groupRightIds = this.getGroupIds(colIndexRight);
-
   if (groupLeftIds && groupRightIds) {
     var i, j, groupLeftId, groupRightId, field;
     var found = false;
-
     for (i = 0; i < groupLeftIds.length; i++) {
       groupLeftId = groupLeftIds[i];
-
       for (j = 0; j < groupRightIds.length; j++) {
         groupRightId = groupRightIds[j];
-
         if (groupLeftId === groupRightId) {
           // found same Id between group
           field = this.getColumnId(colIndex);
-
           this._addGroupChild(field, groupRightId);
-
           found = true;
         }
       }
-
       if (found) {
         break;
       }
@@ -419,31 +376,24 @@ ColumnGroupingPlugin.prototype._applyNearestGrouping = function (colIndex) {
 /** @private
 * @param {Object=} titleSection
 */
-
-
 ColumnGroupingPlugin.prototype._spanGroupVertically = function (titleSection) {
   var api = this.getGridApi();
-
   if (!api) {
     return;
   }
-
   var core = this._hosts[0];
   var maxDepth = this._maxDepth;
   var rowCount = maxDepth + 1;
   var colCount = api.getColumnCount();
-
   for (var col = 0; col < colCount; col++) {
     var toSpan = rowCount;
-
     var parentNode = this._getParentGroup(this.getColumnId(col));
-
     if (parentNode) {
       var depth = parentNode["onRow"] + 1;
       toSpan = rowCount - depth;
-    } // Note that invisible column cannot have row span
-
+    }
 
+    // Note that invisible column cannot have row span
     if (core.isColumnVisible(col) && toSpan > 1) {
       titleSection.setCellRowSpan(col, rowCount - toSpan, toSpan);
     }
@@ -452,21 +402,17 @@ ColumnGroupingPlugin.prototype._spanGroupVertically = function (titleSection) {
 /** @private
 * @param {Object} titleSection
 */
-
-
 ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection) {
   var section = titleSection;
-  var groupTable = this._groupMap; // Span column of column group
+  var groupTable = this._groupMap;
 
+  // Span column of column group
   for (var id in groupTable) {
     var node = groupTable[id];
-
     var colSpans = this._findColumnSpans(node); // find appropriate span
 
-
     for (var col = 0; col < colSpans.length; col++) {
       var spanIndexes = colSpans[col];
-
       if (spanIndexes.length > 0) {
         // This could be unnecessary
         var start = spanIndexes[0];
@@ -479,38 +425,33 @@ ColumnGroupingPlugin.prototype._spanGroupHorizontally = function (titleSection)
 };
 /** @private
 */
-
-
 ColumnGroupingPlugin.prototype._renderGroups = function () {
   var hostCount = this._hosts.length;
   var groupMap = this._groupMap;
-
   for (var i = 0; i < hostCount; ++i) {
     var section = this._hosts[i].getSection("title");
-
     if (!section) {
       continue;
     }
-
     var arg = {};
-
     for (var id in groupMap) {
       var node = groupMap[id];
       var colIndex = node["colIndex"];
       var rowIndex = node["onRow"];
       var cell = section.getCell(colIndex, rowIndex);
-
       if (cell) {
+        // Overide the defaults
         cell.setStyle("text-align", node["alignment"] || "");
         cell.setTooltip(ColumnGroupingPlugin._getTooltip(node));
         cell.setContent(node["title"] || node["name"]);
-        cell.addClass("no-sort"); // TODO: This should be removed after rerendering
 
+        // Additional cell settings must be removed in the _applyGrouping() method
+        cell.addClass("no-sort");
+        cell.setAttribute("group-id", node["id"]);
         if (node["legacyRender"]) {
           // Built-in version if render receive colIndex, cell, groupDefinition as arguments
           node["legacyRender"](colIndex, cell, node);
         }
-
         if (node["render"]) {
           arg["cell"] = cell;
           arg["colIndex"] = colIndex;
@@ -521,40 +462,98 @@ ColumnGroupingPlugin.prototype._renderGroups = function () {
     }
   }
 };
+
 /** @private
 * @param {Object} e
 */
-
-
 ColumnGroupingPlugin.prototype._onPostSectionRender = function (e) {
   if (e.sectionType === "title" && !this._restructuring) {
     this._renderGroups();
   }
 };
+
 /** @private
-* @param {Object} e dispatching of columnAdded event object
-*/
+  * @param {Object} e dispatching of columnAdded event object
+  */
+ColumnGroupingPlugin.prototype._requestApplyAddChildGroup = function (e) {
+  this._addingEvents.push(e);
+  if (!this._addingTimerId) {
+    this._addingTimerId = setTimeout(this._applyTimeSeries.bind(this, e), 10);
+  }
+};
 
+/** @private
+  * @param {Object} e dispatching of columnAdded event object
+  */
+ColumnGroupingPlugin.prototype._applyTimeSeries = function (e) {
+  this._addingTimerId = 0; // clear timer
+  var addingEvents = this._addingEvents.map(function (eventObj) {
+    return eventObj;
+  });
+  this._addingEvents.length = 0; // clear conflation value
 
-ColumnGroupingPlugin.prototype._onColumnAdded = function (e) {
   var colIndex = e.colIndex;
-
+  var i;
+  if (addingEvents.length > 0) {
+    var addingEvent;
+    var children = [];
+    var firstChildColumn;
+    for (i = 0; i < addingEvents.length; i++) {
+      addingEvent = addingEvents[i];
+      if (addingEvent.context.asChildrenTimeSeries) {
+        if (!firstChildColumn) {
+          firstChildColumn = addingEvent.context;
+        }
+        var childIndex = addingEvent.colIndex; // Assume time series column ordered
+        var childId = this.getColumnId(childIndex);
+        children.push(childId);
+      }
+    }
+    if (firstChildColumn && firstChildColumn.asChildrenTimeSeries) {
+      var tsParentDef = firstChildColumn.parent;
+      if (tsParentDef) {
+        var parentName = tsParentDef.getName();
+        var parentId = tsParentDef.getId();
+        var groupId = "timeSerieGroup_" + parentId;
+        var getGroupDefintion = this.getGroupDefinition(groupId);
+        if (getGroupDefintion) {
+          // add children time series field to parent
+          for (i = 0; i < children.length; i++) {
+            var child = children[i];
+            this._addGroupChild(child, groupId);
+          }
+        } else {
+          // create new group
+          this.addGroup({
+            id: groupId,
+            title: parentName,
+            children: children
+          });
+        }
+      }
+    }
+  }
   this._applyNearestGrouping(colIndex);
+  this._requestApplyGrouping();
+};
 
+/** @private
+* @param {Object} e dispatching of columnAdded event object
+*/
+ColumnGroupingPlugin.prototype._onColumnAdded = function (e) {
+  var colIndex = e.colIndex;
+  this._requestApplyAddChildGroup(e);
+  this._applyNearestGrouping(colIndex);
   this._requestApplyGrouping();
 };
 /** @private
 */
-
-
 ColumnGroupingPlugin.prototype._onColumnChanged = function () {
   this._requestApplyGrouping();
 };
 /** @private
 * @param {Object} e dispatching of columnMoved event object
 */
-
-
 ColumnGroupingPlugin.prototype._onColumnMoved = function (e) {
   var toColIndex = e.toColIndex;
   var colId = this.getColumnId(toColIndex);
@@ -565,44 +564,35 @@ ColumnGroupingPlugin.prototype._onColumnMoved = function (e) {
   var colIdRight = this.getColumnId(colIndexRight);
   var groupIdLeft = this._childToParent[colIdLeft];
   var groupIdRight = this._childToParent[colIdRight];
-
   if (groupId != groupIdLeft && groupId != groupIdRight) {
     // remove column from previous group
     if (groupId) {
       var groupChild = this.getGroupChildren(groupId);
       var removeIndex = groupChild.indexOf(colId);
-
       if (removeIndex > -1) {
         groupChild.splice(removeIndex, 1);
       }
-
       this.setGroupChildren(groupId, groupChild);
     }
-
     this._applyNearestGrouping(toColIndex);
   }
-
   this._requestApplyGrouping();
 };
 /** @private
 * @param {Object} e
 */
-
-
 ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
   var selectedColumns = e.selectedColumns;
-  var parentMap = this._childToParent; // Find non-grouped column
+  var parentMap = this._childToParent;
 
+  // Find non-grouped column
   var i, colId, nonGroupedColId, groupId;
   var colIds = [];
   var groupMap = {};
-
   for (i = 0; i < selectedColumns.length; i++) {
     colId = this.getColumnId(selectedColumns[i]);
-
     if (colId) {
       groupId = parentMap[colId];
-
       if (!groupId) {
         nonGroupedColId = colId;
         break;
@@ -618,36 +608,30 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
     e.topBoundRowIndex = 0;
     return;
   }
-
   var topBoundRowIndex = this._maxDepth; // Column title row
-  // Find minimum row index of group
 
+  // Find minimum row index of group
   var rootGroupMap = {};
   var headerRowIndex, group;
-
   for (groupId in groupMap) {
     group = this._getRootGroup(groupId);
     rootGroupMap[group.id] = group;
     headerRowIndex = groupMap[groupId].onRow + 1;
-
     if (headerRowIndex < topBoundRowIndex) {
       topBoundRowIndex = headerRowIndex;
     }
-  } // Traverse down from the root group to find group that its all members are selected
-
+  }
 
+  // Traverse down from the root group to find group that its all members are selected
   var n, members, allSelected, findingGroup, children;
   var nextLevelGroups = rootGroupMap;
-
   for (i = 0; i < topBoundRowIndex; i++) {
     findingGroup = nextLevelGroups;
     nextLevelGroups = {};
-
     for (groupId in findingGroup) {
       group = findingGroup[groupId];
       allSelected = true;
       members = this._getGroupMembers(group);
-
       if (members.length <= colIds.length) {
         for (n = 0; n < members.length; n++) {
           if (colIds.indexOf(members[n]) < 0) {
@@ -655,27 +639,23 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
             break;
           }
         }
-
         if (allSelected) {
           e.topBoundRowIndex = i;
           return;
         }
-      } // Cache the next level group
-
+      }
 
+      // Cache the next level group
       children = group.children;
-
       for (n = 0; n < children.length; n++) {
         var id = children[n];
         group = this._groupMap[id];
-
         if (group) {
           nextLevelGroups[id] = group;
         }
       }
     }
   }
-
   e.topBoundRowIndex = topBoundRowIndex;
 };
 /** Deprecated. Column should be directly added through grid APIs.
@@ -685,40 +665,32 @@ ColumnGroupingPlugin.prototype._onBeforeColumnBoundUpdate = function (e) {
 * @param {string} groupId
 * @param {number} colIndex Column index
 */
-
-
 ColumnGroupingPlugin.prototype.addColumnToGroup = function (column, groupId, colIndex) {
   if (!column || !groupId) return;
   var columnIndex = colIndex || this.getColumnCount();
-
   this._addGroupChild(column.id, groupId);
-
   if (this._realTimeGrid) {
     this._realTimeGrid.insertColumn(column, columnIndex);
   } else if (this._compositeGrid) {
     this._compositeGrid.insertColumn(columnIndex, column);
   }
 };
+
 /** Add new group definition to existing group structure. Inexisting or duplicate group id is not allowed
 * @public
 * @param {ColumnGroupingPlugin~GroupDefinition} groupDef Group definition object
 * @return {boolean} Return true if there is any change
 */
-
-
 ColumnGroupingPlugin.prototype.addGroup = function (groupDef) {
   if (groupDef && groupDef.id) {
     var curDef = this.getGroupDefinition(groupDef.id);
-
     if (!curDef) {
-      this._groupDefs.push(groupDef);
-
+      var newGroupDef = cloneObject(groupDef);
+      this._groupDefs.push(newGroupDef);
       this._applyGrouping();
-
       return true;
     }
   }
-
   return false;
 };
 /** Deprecated. Use addGroup() method instead
@@ -728,51 +700,39 @@ ColumnGroupingPlugin.prototype.addGroup = function (groupDef) {
 * @param {ColumnGroupingPlugin~GroupDefinition} groupDef Group definition object
 * @see {@link ColumnGroupingPlugin#addGroup}
 */
-
-
 ColumnGroupingPlugin.prototype.addColumnGrouping = ColumnGroupingPlugin.prototype.addGroup;
 /** @public
 * @param {string} groupId
 * @return {Object} Return removed group definition object.
 */
-
 ColumnGroupingPlugin.prototype.removeGroup = function (groupId) {
   var curDef = this.getGroupDefinition(groupId);
-
   if (curDef) {
     var at = this._groupDefs.indexOf(curDef);
-
     this._groupDefs.splice(at, 1);
-
     this._applyGrouping();
   }
-
   return curDef;
 };
+
 /** Remove all existing group definitions and replace with the given definitions.
 * @public
 * @param {ColumnGroupingPlugin~GroupDefinitions} groupDefs Use null or empty array to remove all existing groups
 */
-
-
 ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
   if (Array.isArray(groupDefs)) {
     groupDefs = groupDefs.filter(ColumnGroupingPlugin._isValidGroup);
-
     if (!groupDefs.length) {
       groupDefs = null;
     }
   } else {
     groupDefs = null;
   }
-
   if (groupDefs) {
     this._groupDefs = groupDefs;
-
     this._applyGrouping();
   } else if (this._groupDefs.length) {
     this._groupDefs = [];
-
     this._applyGrouping();
   }
 };
@@ -781,8 +741,6 @@ ColumnGroupingPlugin.prototype.setGroupDefinitions = function (groupDefs) {
 * @param {Object} groupDef
 * @return {boolean}
 */
-
-
 ColumnGroupingPlugin._isValidGroup = function (groupDef) {
   if (groupDef) {
     if (groupDef.id) {
@@ -793,15 +751,20 @@ ColumnGroupingPlugin._isValidGroup = function (groupDef) {
       return true;
     }
   }
-
   return false;
 };
+/** @private
+* @function
+* @param {Object} obj
+* @return {boolean}
+*/
+ColumnGroupingPlugin._cloneObject = function (obj) {
+  return cloneObject(obj);
+};
 /** Get a shallow copy of all existing group definitions
 * @public
 * @return {!ColumnGroupingPlugin~GroupDefinitions}
 */
-
-
 ColumnGroupingPlugin.prototype.getGroupDefinitions = function () {
   return this._groupDefs.slice();
 };
@@ -810,17 +773,12 @@ ColumnGroupingPlugin.prototype.getGroupDefinitions = function () {
 * @param {string} groupId
 * @param {ColumnGroupingPlugin~GroupDefinition} newDef
 */
-
-
 ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, newDef) {
   var curDef = this.getGroupDefinition(groupId);
-
   if (curDef) {
     var at = this._groupDefs.indexOf(curDef);
-
     newDef.id = groupId;
     this._groupDefs[at] = newDef;
-
     this._applyGrouping();
   }
 };
@@ -828,13 +786,10 @@ ColumnGroupingPlugin.prototype.setGroupDefinition = function (groupId, newDef) {
 * @param {string} groupId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
-
-
 ColumnGroupingPlugin.prototype.getGroupDefinition = function (groupId) {
   if (groupId) {
     return this._groupMap[groupId] || null;
   }
-
   return null;
 };
 /** Replace and update existing group definition.
@@ -842,19 +797,14 @@ ColumnGroupingPlugin.prototype.getGroupDefinition = function (groupId) {
 * @param {string} groupId
 * @param {Array.<string>} newChildList If null is given, all existing children in the group will be removed
 */
-
-
 ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildList) {
   var groupDef = this.getGroupDefinition(groupId);
-
   if (groupDef) {
     if (Array.isArray(newChildList)) {
       groupDef.children = newChildList.slice();
-
       this._applyGrouping();
     } else if (!newChildList && groupDef.children.length) {
       groupDef.children = [];
-
       this._applyGrouping();
     }
   }
@@ -863,250 +813,202 @@ ColumnGroupingPlugin.prototype.setGroupChildren = function (groupId, newChildLis
 * @param {string} groupId
 * @return {Array.<string>}
 */
-
-
 ColumnGroupingPlugin.prototype.getGroupChildren = function (groupId) {
   var groupDef = this.getGroupDefinition(groupId);
-
   if (groupDef) {
     return groupDef.children.slice(); // Shallow copy
   }
 
   return null;
 };
+
 /** Return all column indices under the given group id
 * @public
 * @param {string} groupId
 * @return {Array.<number>}
 */
-
-
 ColumnGroupingPlugin.prototype.getChildColumnIndices = function (groupId) {
   var group = this._groupMap[groupId];
-
   if (group) {
     var colIds = this._getGroupMembers(group);
-
     var colIndices = [];
     var id;
-
     for (var i = 0; i < colIds.length; i++) {
       id = this._getColumnIndexById(colIds[i]);
-
       if (id > -1) {
         colIndices.push(id);
       }
     }
-
     return colIndices.sort();
   }
-
   return null;
 };
+
 /** @public
 * @param {string|number} colRef
 * @return {Array.<string>}
 */
-
-
 ColumnGroupingPlugin.prototype.getGroupIds = function (colRef) {
   if (colRef != null) {
     var colId = colRef;
-
     if (typeof colRef === "number") {
       colId = this.getColumnId(colRef);
     }
-
     if (colId) {
       var groupId = this._childToParent[colId];
-
       if (groupId) {
         var groupIds = [groupId];
         var group = this._groupMap[groupId];
-
         while (group && group.parent) {
           group = this.getGroupDefinition(group.parent);
-
           if (group) {
             groupIds.push(group.id);
           }
         }
-
         return groupIds;
       }
     }
   }
-
   return null;
 };
+
 /** Return deepest row index of column headers
 * @public
 * @return {number}
 */
-
-
 ColumnGroupingPlugin.prototype.getMaxGroupLevel = function () {
   return this._maxDepth;
 };
+
 /** Return row index of the given group id
 * @public
 * @param {string} groupId
 * @return {number}
 */
-
-
 ColumnGroupingPlugin.prototype.getGroupLevel = function (groupId) {
   var group = this._groupMap[groupId];
-
   if (group) {
     return group.onRow;
   }
-
   return -1;
 };
+
 /** @private
 * @param {ColumnGroupingPlugin~GroupDefinition} group Group definition
 * @param {Array=} members
 * @return {Array.<string>}
 */
-
-
 ColumnGroupingPlugin.prototype._getGroupMembers = function (group, members) {
   if (!members) {
     members = [];
   }
-
   var children = group.children;
   var groupMap = this._groupMap;
   var g, id;
-
   for (var i = 0; i < children.length; i++) {
     id = children[i];
     g = groupMap[id];
-
     if (g) {
       this._getGroupMembers(g, members);
     } else {
       members.push(id);
     }
   }
-
   return members;
 };
+
 /** @private
 * @param {String} groupId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
-
-
 ColumnGroupingPlugin.prototype._getRootGroup = function (groupId) {
   if (!groupId) {
     return null;
   }
-
   var group = this._groupMap[groupId];
-
   while (group.parent) {
     group = this.getGroupDefinition(group.parent);
   }
-
   return group;
 };
+
 /** @private
 */
-
-
 ColumnGroupingPlugin.prototype._evaluateGroupStructure = function () {
   // Clear existing group structure
   this._groupMap = {};
   this._childToParent = {};
-  this._maxDepth = -1; // Flatten tree to dictionary
+  this._maxDepth = -1;
 
+  // Flatten tree to dictionary
   var columnGroups = this._groupDefs;
   var inUsedGroup = {};
   var node;
-
   for (var cg = 0; cg < columnGroups.length; cg++) {
     // node can be a root or child
-    node = columnGroups[cg]; // skip tree that don't have a child
-
+    node = columnGroups[cg];
+    // skip tree that don't have a child
     if (node.children && node.children.length) {
       this._flattenTree(node, inUsedGroup);
     }
   }
-
-  var id; // Apply parent id to columnGroup for easy to find depth
-
+  var id;
+  // Apply parent id to columnGroup for easy to find depth
   for (id in this._groupMap) {
     node = this._groupMap[id];
-
     if (this._childToParent[node.id]) {
       var parentId = this._childToParent[node.id];
       node["parent"] = parentId;
     }
-  } // find depth of each group
-
+  }
 
+  // find depth of each group
   for (id in this._groupMap) {
     node = this._groupMap[id];
-
     var depth = this._findGroupTreeDepth(node, 1);
-
     node["onRow"] = depth - 1; // Modify user's object
-  } // Calculate max depth
-
+  }
 
+  // Calculate max depth
   var maxDepth = 0;
-
   for (id in this._groupMap) {
     node = this._groupMap[id];
     depth = node["onRow"] + 1;
-
     if (depth > maxDepth) {
       maxDepth = depth;
     }
   }
-
   this._maxDepth = maxDepth;
 };
 /** @private
 * @param {Object} node
 * @param {boolean} inUsedGroup
 */
-
-
 ColumnGroupingPlugin.prototype._flattenTree = function (node, inUsedGroup) {
   var childrens = node.children;
-
   if (childrens && childrens.length > 0) {
     var childId;
-
     for (var c = 0; c < childrens.length; c++) {
       var child = childrens[c];
-
       if (child.id) {
         // child is group object
         childId = child.id;
-
         this._flattenTree(child, inUsedGroup);
       } else {
         // child can be column id or group id
         childId = child;
-
         if (inUsedGroup[childId] || this._getColumnIndexById(childId) !== -1) {
           inUsedGroup[node.id] = true;
         }
       }
-
       if (!this._childToParent[childId] && childId != node.id) {
         this._childToParent[childId] = node.id;
       }
-    } // Create Tree node for only in-used group
-
+    }
 
+    // Create Tree node for only in-used group
     if (!this._groupMap[node.id] && inUsedGroup[node.id]) {
-      // need to change
-      this._groupMap[node.id] = node; // TODO: Check if we need to clone
+      this._groupMap[node.id] = cloneObject(node); // clone node
     }
   }
 };
@@ -1115,59 +1017,47 @@ ColumnGroupingPlugin.prototype._flattenTree = function (node, inUsedGroup) {
 * @param {number} currentDepth
 * @return {number}
 */
-
-
 ColumnGroupingPlugin.prototype._findGroupTreeDepth = function (node, currentDepth) {
   var parentId = node["parent"];
   var parentNode = this._groupMap[parentId];
-
   if (parentNode) {
     return this._findGroupTreeDepth(parentNode, currentDepth + 1);
   } else {
     return currentDepth;
   }
 };
+
 /** This version exclude invisible column unlike the one in GridPlugin
 * @private
 * @param {string} id
 * @return {number} index of the column
 */
-
-
 ColumnGroupingPlugin.prototype._getColumnIndexById = function (id) {
   var api = this.getGridApi();
-
   if (api && id) {
     var core = this._hosts[0];
     var colCount = core.getColumnCount();
-
     for (var c = 0; c < colCount; c++) {
       if (this.getColumnId(c) === id && core.isColumnVisible(c)) {
         return c;
       }
     }
   }
-
   return -1;
 };
 /** @private
 * @param {Object} node
 * @param {Array} cluster
 */
-
-
 ColumnGroupingPlugin.prototype._findColumnIndexArr = function (node, cluster) {
   if (node) {
     var childrens = node.children;
-
     if (childrens && childrens.length) {
       for (var i = 0; i < childrens.length; i++) {
         var child = childrens[i];
-
         if (!child.id) {
           if (!this._groupMap[child]) {
             var colIndex = this._getColumnIndexById(child);
-
             if (colIndex !== -1) {
               cluster.push(colIndex);
             }
@@ -1179,7 +1069,6 @@ ColumnGroupingPlugin.prototype._findColumnIndexArr = function (node, cluster) {
           if (child.id === node.id) {
             return;
           }
-
           this._findColumnIndexArr(this._groupMap[child.id], cluster);
         }
       }
@@ -1190,38 +1079,29 @@ ColumnGroupingPlugin.prototype._findColumnIndexArr = function (node, cluster) {
 * @param {Object} node
 * @return {Array} group of span index
 */
-
-
 ColumnGroupingPlugin.prototype._findColumnSpans = function (node) {
   var cluster = [];
-
   this._findColumnIndexArr(node, cluster); // Recursively get column index
 
-
   return ColumnGroupingPlugin._groupConsecutiveArr(cluster);
 };
 /** @private
 * @param {Array} arr
 * @return {Array} group of Consecutive number
 */
-
-
 ColumnGroupingPlugin._groupConsecutiveArr = function (arr) {
   var result = [];
-
   if (!arr || !arr.length) {
     return result;
   }
-
   var array = arr.sort(function (a, b) {
     return a - b;
   });
   var start = array[0];
-  var stop = start; // start at second member of array
-
+  var stop = start;
+  // start at second member of array
   for (var i = 1; i <= array.length; i++) {
     var next = array[i];
-
     if (next === stop + 1) {
       // move to next member
       stop = next;
@@ -1230,28 +1110,22 @@ ColumnGroupingPlugin._groupConsecutiveArr = function (arr) {
         result.push([start, start]);
       } else {
         result.push([start, stop]);
-      } // reset the start and stop pointers
-
-
+      }
+      // reset the start and stop pointers
       start = array[i];
       stop = start;
     }
   }
-
   return result;
 };
 /** @private
 * @param {string} childId
 * @param {string} groupId
 */
-
-
 ColumnGroupingPlugin.prototype._addGroupChild = function (childId, groupId) {
   var groupDef = this.getGroupDefinition(groupId);
-
   if (childId && groupDef) {
     var chdr = groupDef.children;
-
     if (chdr && chdr.indexOf(childId) < 0) {
       this._childToParent[childId] = groupId;
       chdr.push(childId);
@@ -1262,8 +1136,6 @@ ColumnGroupingPlugin.prototype._addGroupChild = function (childId, groupId) {
 * @param {string} childId
 * @return {ColumnGroupingPlugin~GroupDefinition}
 */
-
-
 ColumnGroupingPlugin.prototype._getParentGroup = function (childId) {
   return this.getGroupDefinition(this._childToParent[childId]);
 };
@@ -1272,63 +1144,45 @@ ColumnGroupingPlugin.prototype._getParentGroup = function (childId) {
 * @param {number} groupLevel
 * @return {string}
 */
-
-
 ColumnGroupingPlugin.prototype._getGroupId = function (colId, groupLevel) {
   var groupId = this._childToParent[colId];
-
   if (!groupId) {
     return "";
   }
-
   if (groupLevel == null) {
     return groupId;
   }
-
   var currentLevel = this.getGroupLevel(groupId);
-
   while (currentLevel > groupLevel && groupId) {
     groupId = this._childToParent[groupId];
     currentLevel--;
   }
-
   return groupId || "";
 };
 /** @public
 * @param {Element|Event|MouseEvent} e
 * @return {Object}
 */
-
-
 ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
   var api = this.getGridApi();
   var grid = e["grid"] || this.getRelativeGrid(e);
-
   if (!api || !grid) {
     return null;
   }
-
   var cellInfo = grid.getCellInfo(e);
-
   if (!cellInfo.cell) {
     var cell = cellInfo.section.getCell(cellInfo.colIndex, cellInfo.rowIndex);
     cellInfo["cell"] = cell;
   }
-
   var colId = this.getColumnId(cellInfo.colIndex);
-
   var groupId = this._getGroupId(colId, cellInfo.sectionType == "title" ? cellInfo.rowIndex : null);
-
   if (!groupId) {
     cellInfo["columnId"] = colId;
     return cellInfo;
   }
-
   var groupInfo = this.getGroupDefinition(groupId);
-
   if (groupInfo) {
     var isGroupHeader = cellInfo.sectionType == "title" && cellInfo.rowIndex == this.getGroupLevel(groupId);
-
     if (isGroupHeader) {
       cellInfo["groupId"] = groupInfo.id;
       cellInfo["groupName"] = groupInfo.name;
@@ -1336,10 +1190,8 @@ ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
     } else {
       cellInfo["columnId"] = colId;
     }
-
     cellInfo["parent"] = isGroupHeader ? groupInfo.parent || null : groupInfo.id;
   }
-
   return cellInfo;
 };
 /** @public
@@ -1347,122 +1199,98 @@ ColumnGroupingPlugin.prototype.getCellInfo = function (e) {
 * @param {number} to
 * @param {string} groupId
 */
-
-
 ColumnGroupingPlugin.prototype.moveColumnIntoGroup = function (from, to, groupId) {
   var fromIndex = -1;
-
   if (typeof from == "string") {
     fromIndex = this._getColumnIndexById(from);
   } else {
     fromIndex = from;
   }
-
   if (fromIndex == -1) {
     return;
   }
-
   var groupDef = this.getGroupDefinition(groupId);
-
   if (!groupDef) {
     for (var j = this._hosts.length; --j >= 0;) {
       var grid = this._hosts[j];
       grid.moveColumn(fromIndex, to);
     }
-
     return;
   }
-
   var childIndices = this.getChildColumnIndices(groupId);
   var startIndex = -1;
   var endIndex = -1;
-
   if (childIndices && childIndices.length) {
     startIndex = childIndices[0];
     endIndex = childIndices[childIndices.length - 1];
   }
-
   if (to < startIndex) {
-    to = startIndex; // handle move column to right
-
+    to = startIndex;
+    // handle move column to right
     if (to > fromIndex) {
       to -= 1;
     }
   } else if (to > endIndex) {
-    to = endIndex; // handle move column to left
-
+    to = endIndex;
+    // handle move column to left
     if (to < fromIndex) {
       to += 1;
     }
-  } //find column index that should be moved, it should not be between columns in child group
-
+  }
 
+  //find column index that should be moved, it should not be between columns in child group
   for (var i = 0; i < groupDef.children.length; i++) {
     var notAllowIndices = this.getChildColumnIndices(groupDef.children[i]);
-
     if (notAllowIndices && notAllowIndices.length) {
       var notAllowStart = notAllowIndices[0];
       var notAllowEnd = notAllowIndices[notAllowIndices.length - 1];
-
       if (to > fromIndex) {
         notAllowStart -= 1;
       }
-
       if (to < fromIndex) {
         notAllowEnd += 1;
       }
-
       if (to > notAllowStart && to < notAllowEnd) {
         to = notAllowEnd;
       }
     }
   }
-
   for (var gridIndex = this._hosts.length; --gridIndex >= 0;) {
     var host = this._hosts[gridIndex];
     host.moveColumn(fromIndex, to);
-  } //remove previous group apply to column
-
+  }
 
+  //remove previous group apply to column
   var colId = this.getColumnId(to);
   var previousGroup = this._childToParent[colId];
-
   if (previousGroup) {
     var previousGroupChild = this.getGroupChildren(previousGroup);
     previousGroupChild.splice(previousGroupChild.indexOf(colId), 1);
     this.setGroupChildren(previousGroup, previousGroupChild);
-  } //apply new group
-
+  }
 
+  //apply new group
   var children = this.getGroupChildren(groupId);
-
   if (children.indexOf(colId) == -1) {
     if (colId) {
       children.push(colId);
     }
   }
-
   this.setGroupChildren(groupId, children);
-
   this._requestApplyGrouping();
 };
 /** @public
 * @param {number|string} columnIndex //Column index or id that should be moved
 * @param {string} groupId
 */
-
-
 ColumnGroupingPlugin.prototype.setColumnParent = function (columnIndex, groupId) {
   var api = this.getGridApi();
-
   if (!api) {
     return;
   }
-
   var grid = this._hosts[0];
   var colCount = grid.getColumnCount();
   this.moveColumnIntoGroup(columnIndex, colCount, groupId);
 };
-
 export default ColumnGroupingPlugin;
 export { ColumnGroupingPlugin, ColumnGroupingPlugin as ColumnGrouping, ColumnGroupingPlugin as ColumnGroupingExtension };