@refinitiv-ui/efx-grid 6.0.33 → 6.0.34

package/lib/rt-grid/dist/rt-grid.js

@@ -150,20 +150,22 @@ Ext.inherits = function (childCtor, parentCtor) {
 
 "use strict";
 /* unused harmony export Util */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return extendObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return extendObject; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return cloneObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return isEmptyObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return deepEqual; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return arrayToObject; });
 /* unused harmony export extendProperty */
 /* unused harmony export extendArrayProperty */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return parseCondition; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return prettifyCss; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return parseCondition; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return prettifyCss; });
 /* unused harmony export getShadowRoot */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return injectCss; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return injectCss; });
 /* unused harmony export isIE */
 /* unused harmony export isMac */
 /* unused harmony export isTouchDevice */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return nestedObjectToArray; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return rgb2Hex; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return nestedObjectToArray; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return rgb2Hex; });
 /* unused harmony export prepareTSVContent */
 /** @namespace */
 var Util = {};
@@ -305,6 +307,20 @@ var extendObject = function (obj, extender, limiters) {
 var cloneObject = function (obj, limiters) {
 	return extendObject({}, obj, limiters);
 };
+
+/** Check empty object
+* @public
+* @function
+* @param {Object} obj
+* @return {boolean}=true, if the obj is empty
+*/
+var isEmptyObject = function (obj) {
+	for (var key in obj) {
+		return false;
+	}
+	return true;
+};
+
 /** @public
 * @param {Array=} data
 * @param {Array.<string>=} fields In case of the given data is an array, this param will be used for mapping index to field
@@ -353,6 +369,58 @@ var extendProperty = function (obj, extender, propName) {
 		}
 	}
 };
+
+
+/** Compare the values of obj1 and obj2. if they are the same object or have the same value, the result will be true. Otherwise, it will return false.
+* @public
+* @param {*} obj1
+* @param {*} obj2
+* @return {boolean}
+*/
+var deepEqual = function (obj1, obj2) {
+
+	if(obj1 === obj2) {
+		return true;
+	}
+
+	if (typeof obj1 !== typeof obj2) {
+		return false;
+	}
+
+	if (typeof obj1 === "object") {
+
+		// We need to split array and object for performance reason
+		if(Array.isArray(obj1)) {
+			if(obj1.length !== obj2.length) {
+				return false;
+			}
+
+			for (var i = 0; i < obj1.length; i++) {
+				if (!deepEqual(obj1[i], obj2[i])) { // The array may not be a match if the elements are not sorted, so it will not be considered equal if there is a mismatch.
+					return false;
+				}
+			}
+
+		} else {
+
+			if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+				return false;
+			}
+
+			for (var key in obj1) {
+				if (!deepEqual(obj1[key], obj2[key])) {
+					return false;
+				}
+			}
+		}
+
+
+		return true;
+	}
+
+	return false;
+
+};
 /** Array.push() is much faster than Array.concat(). The downside is the parameters must be an array, whereas concat() has no such requirement. <br>
 * This method excels in extending known array property in an object.
 * @public
@@ -3475,7 +3543,7 @@ ElfUtil.injectIcons = function (configObj, optElem) {
 */
 ElfUtil.getIconList = function () {
 	var iconStruct = ElfUtil._icons[ElfUtil.getThemeName()];
-	return iconStruct ? Object(Util["e" /* nestedObjectToArray */])(iconStruct) : [];
+	return iconStruct ? Object(Util["g" /* nestedObjectToArray */])(iconStruct) : [];
 };
 
 /** @private
@@ -3767,9 +3835,9 @@ ElfUtil._retrieveThemeColors = function(profileName) {
 		}
 	}
 	// WARNING: Computed styles return rgb/rgba color format instead of hex format
-	colors["tableBg"] = Object(Util["h" /* rgb2Hex */])(colors["tableBg"]);
-	colors["tableText"] = Object(Util["h" /* rgb2Hex */])(colors["tableText"]);
-	colors["tableBorder"] = Object(Util["h" /* rgb2Hex */])(colors["tableBorder"]);
+	colors["tableBg"] = Object(Util["j" /* rgb2Hex */])(colors["tableBg"]);
+	colors["tableText"] = Object(Util["j" /* rgb2Hex */])(colors["tableText"]);
+	colors["tableBorder"] = Object(Util["j" /* rgb2Hex */])(colors["tableBorder"]);
 	document.body.removeChild(tableElem);
 
 	// For CellPainter backward compatability
@@ -10497,6 +10565,22 @@ Segment.prototype.getOrder = function() {
 	}
 	return this._order * 10000;
 };
+/** Get the last (highest) order from the entire tree regardless of the current position segment in the hierachy
+* @public
+* @return {number}
+*/
+Segment.prototype.getLastOrder = function() {
+	if(this._subSegDef) {
+		var subSegments = this._subSegDef.subSegments;
+		if(subSegments) {
+			var lastSegment = subSegments[subSegments.length - 1];
+			if(lastSegment) {
+				return lastSegment.getOrder();
+			}
+		}
+	}
+	return this.getOrder();
+};
 /** @public
 * @param {number} val
 */
@@ -10618,9 +10702,10 @@ SegmentCollection.prototype.dispose = function() {
 };
 /** @public
 * @param {string} rid
+* @param {Array.<string>=} childRids Children of the newly added segment. This is a shorthand to addSegmentChildren method
 * @return {boolean} Returns true if there is any change. Otherwise, returns false
 */
-SegmentCollection.prototype.addSegment = function(rid) {
+SegmentCollection.prototype.addSegment = function(rid, childRids) {
 	if(rid && !this._segments[rid]) {
 		if(this.getParentRowId(rid)) {
 			console.log("child of a segment cannot be set as a segment separator");
@@ -10631,6 +10716,10 @@ SegmentCollection.prototype.addSegment = function(rid) {
 		segment.addEventListener("subSegmentRemoved", this._onSubSegmentRemoved);
 		++this._segmentCount;
 		this._segmentList = null; // order could be changed
+
+		if(childRids && childRids.length) {
+			segment.addChildren(childRids);
+		}
 		return true;
 	}
 	return false;
@@ -10978,9 +11067,10 @@ SegmentCollection.prototype.calcSegmentOrder = function(rids) {
 };
 /** @public
 * @param {!Array.<string>} rids Array of row ids
+* @param {boolean=} partial Indicating that the given ids are not the whole list
 * @return {Array.<number>} Returns Array of segment values, if there are at least one segment, otherwise returns null
-*/
-SegmentCollection.prototype.getSegmentValues = function(rids) {
+*/ //
+SegmentCollection.prototype.getSegmentValues = function(rids, partial) {
 	var rowCount = rids ? rids.length : 0;
 	if(!rowCount) {
 		return null;
@@ -10997,29 +11087,30 @@ SegmentCollection.prototype.getSegmentValues = function(rids) {
 		var rid = rids[r];
 		curSegment = segmentSeparators[rid];
 		if(curSegment) { // segment separator
-			if(prevSegment !== curSegment) {
-				prevSegment = curSegment;
-				segmentVal = curSegment.getOrder() * 100;
-				if(segmentVal > highestVal) {
-					highestVal = segmentVal;
+			segmentVal = curSegment.getOrder() * 100;
+			offset = 0;
+			if(!curSegment.isSubSegment()) {
+				if(prevSegment !== curSegment) {
+					prevSegment = curSegment;
+					highestVal = curSegment.getLastOrder() * 100;
 				}
 			}
-			offset = 0;
 		} else {
 			var parentId = childToSegmentId[rid];
 			if(parentId) { // segment member
 				curSegment = segmentSeparators[parentId];
-				if(prevSegment !== curSegment) {
-					prevSegment = curSegment;
-					segmentVal = curSegment.getOrder() * 100;
-					if(segmentVal > highestVal) {
-						highestVal = segmentVal;
-					}
-				}
+				segmentVal = curSegment.getOrder() * 100;
 				offset = 1;
+				if(partial) {
+					highestVal = curSegment.getLastOrder() * 100;
+				}
 			} else { // row outside of segments
-				segmentVal = highestVal;
-				offset = 10;
+				if(highestVal) {
+					segmentVal = highestVal;
+					offset = 10;
+				} else {
+					segmentVal = offset = 0;
+				}
 			}
 		}
 
@@ -12288,9 +12379,9 @@ DataTable.prototype.addSegmentChild = function(segmentId, rid, dataId) {
 	if(this._segments) {
 		var dirty = this._segments.addSegmentChild(segmentId, rid, dataId);
 		if(dirty) {
-			if(this._sort(null)) {
-				this._dispatchPositionChange();
-			}
+			this._sort(null);
+			this._dispatchPositionChange(); // Force rerendering, even if there is no position change
+
 			this.requestClassifying();
 			return true;
 		}
@@ -12307,9 +12398,9 @@ DataTable.prototype.addSegmentChildren = function(segmentId, rids, dataIds) {
 	if(this._segments) {
 		var dirty = this._segments.addSegmentChildren(segmentId, rids, dataIds);
 		if(dirty) {
-			if(this._sort(null)) {
-				this._dispatchPositionChange();
-			}
+			this._sort(null);
+			this._dispatchPositionChange(); // Force rerendering, even if there is no position change
+
 			this.requestClassifying();
 			return true;
 		}
@@ -13062,6 +13153,7 @@ DataTable._proto = DataTable.prototype;
 /** @typedef {Object} RowDefinition~Options
 * @description RowDefinition options
 * @property {string=} ric="" RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.
+* @property {string=} permId="" Organization PermId to be used instead of ric for private company.
 * @property {(Array|Object)=} values=null Values for static data
 * @property {Array.<string>=} fields=null Field that corresponds to the given static values
 * @property {boolean=} asChain=false The given ric will be treated as a chain
@@ -13143,6 +13235,10 @@ RowDefinition.prototype._ric = ""; // Contains no 0#
 /** @type {string}
 * @private
 */
+RowDefinition.prototype._permId = "";
+/** @type {string}
+* @private
+*/
 RowDefinition.prototype._displayText = "";
 /** @type {string|null}
 * @private
@@ -13268,13 +13364,20 @@ RowDefinition.prototype.initialize = function(rowOptions) {
 
 	var val = rowOptions["ric"];
 	if(val != null) {
-		this.setContent(/** @type{string} */(val)); // this._dataId is modified
+		this._ric = val;
+	}
+	val = rowOptions["permId"];
+	if(val != null) {
+		this._permId = val;
 	}
+	if(this._ric || this._permId){
+		this.setContent(this._ric, this._permId); // this._dataId is modified
+	}
+
 	val = rowOptions["chainRic"];
 	if(val != null) {
 		this._chainRic = val;
 	}
-
 	val = rowOptions["values"];
 	// eslint-disable-next-line no-undefined
 	if(val !== undefined) {
@@ -13328,10 +13431,11 @@ RowDefinition.prototype._initializeAsConstituent = function(rowOptions) {
 	}
 };
 /** @public
-* @param {string} userInput
+* @param {string} userInput RIC
+* @param {string=} permId=null Organization PermId, which use for getting ADC data for private  company
 * @return {boolean} True if there is any change otherwise false
 */
-RowDefinition.prototype.setContent = function(userInput) {
+RowDefinition.prototype.setContent = function(userInput, permId) {
 	if(this._autoGenerated) { // AutoGenerated RowDefinition cannot be changed by user input
 		return false;
 	}
@@ -13342,7 +13446,15 @@ RowDefinition.prototype.setContent = function(userInput) {
 		userInput += "";
 	}
 
-	if(this._userInput === userInput) {
+	var dirty = (this._userInput !== userInput);
+	if(this._permId !== permId){
+		this._permId = permId || "";
+		if(!userInput){
+			this._displayText = this._permId;
+			dirty = true;
+		}
+	}
+	if(!dirty) {
 		return false;
 	}
 
@@ -13369,7 +13481,7 @@ RowDefinition.prototype.setContent = function(userInput) {
 		this._displayText = this._ric; // No 0#
 	}
 
-	this._dataId = this._rowId + this._ric; // JET/RTK will generate data id to be rowId (given from this rowDef) + ric;
+	this._dataId = this._rowId + this.getSymbol(); // JET/RTK will generate data id to be rowId (given from this rowDef) + ric;
 
 	// This will work for runtime ric modification, but not for first initilization.
 	if(!this.subscribeForUpdates()) {
@@ -13397,6 +13509,11 @@ RowDefinition.prototype.getConfigObject = function(rowOptions) {
 		obj["ric"] = val;
 	}
 
+	val = this._permId;
+	if(val) {
+		obj["permId"] = val;
+	}
+
 	val = this._chainRic;
 	if(val) {
 		obj["chainRic"] = val;
@@ -13642,6 +13759,18 @@ RowDefinition.prototype.getRic = function() {
 /** @public
 * @return {string}
 */
+RowDefinition.prototype.getPermId = function() {
+	return this._permId;
+};
+/** @public
+* @return {string}
+*/
+RowDefinition.prototype.getSymbol = function() {
+	return this._ric || this._permId;
+};
+/** @public
+* @return {string}
+*/
 RowDefinition.prototype.getDisplayText = function() {
 	if(this._label != null) { // Empty string is allowed
 		return this._label;
@@ -13707,7 +13836,7 @@ RowDefinition.prototype.isAutoGenerated = function() {
 * @return {boolean}
 */
 RowDefinition.prototype.isRealTimeRow = function() {
-	if(!this._ric) { // Empty row
+	if(!this.getRic()) { // Empty row
 		return false;
 	}
 	if(this.isRowHeader()) {
@@ -13724,7 +13853,7 @@ RowDefinition.prototype.isRealTimeRow = function() {
 * @return {boolean} If a subscription is made, return true.
 */
 RowDefinition.prototype.subscribeForUpdates = function() {
-	if(!this.isRealTimeRow()) {
+	if(!this.isRealTimeRow() && !this.getPermId()) {
 		return false;
 	}
 
@@ -13738,14 +13867,14 @@ RowDefinition.prototype.subscribeForUpdates = function() {
 	if(this.isChain()) {
 		this._subId = subs["addChain"](this._chainRic || this._ric, this._rowId); // Some chain require 0# symbol to populate its constituents
 		// TODO: Handle Dynamic chain such as .PG.PA
-	} else {
+	} else if(this._ric) {
 		this._subId = subs["addRic"](this._ric, this._rowId);
 	}
 
 	if(prevRowData) {
 		this._dc.setRowData(this._dataId, prevRowData); // TODO: We may need to create a new object instead of prevRowData for data correctness
 	} else {
-		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this._ric, "ROW_DEF": this}); // Trigger data update immediately
+		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this.getSymbol(), "ROW_DEF": this}); // Trigger data update immediately
 	}
 	return true;
 };
@@ -15402,7 +15531,7 @@ ColumnDefinition.prototype.getAllFields = function() {
 * @return {boolean}
 */
 ColumnDefinition.prototype.isRealTimeField = function() {
-	return js_FieldDefinition.isRealTimeField(this.getField());
+	return js_FieldDefinition.isRealTimeField(this.getField() || this._field);
 };
 /** @public
 * @return {boolean}
@@ -15593,8 +15722,9 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 		obj["sort"] = this._initialOrder;
 	}
 
-	if(this._classes) {
-		obj["className"] = this._classes.join(" ");
+	var classes = this._classes;
+	if(classes && classes.length > 0) {
+		obj["className"] = classes.join(" ");
 	}
 
 	if(this._textSelect) {
@@ -15612,14 +15742,18 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 	var core = this._eventArg["core"];
 	var grid = this._eventArg["grid"];
 	var colIndex = grid.getColumnIndex(this);
-	value = core.getColumnScalability(colIndex);
-	obj["scalable"] = value;
 
-	value = core.getColumnCustomLaneSize(colIndex);
-	obj["width"] = value;
+	// The scalable, width and minWidth cannot be shifted into core as getConfigObject is accessible from colDef.
+	var scalable = core.getColumnScalability(colIndex);
+	var width = core.getColumnCustomLaneSize(colIndex);
+
+	if (scalable !== true || width !== 1) {
+		obj["scalable"] = scalable;
+		obj["width"] = width;
+	}
 
 	value = core.getMinimumColumnWidth(colIndex);
-	if(value !== 32) {
+	if(value !== 0) {
 		obj["minWidth"] = value;
 	}
 
@@ -15976,16 +16110,6 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
 
 
 
-/** @private
-* @param {Object} obj
-* @return {boolean}
-*/
-var isEmptyObject = function (obj) {
-	for (var key in obj) {
-		return false;
-	}
-	return true;
-};
 
 /** This class make requesting ADC field easier by encapsulating JET.Data APIs and mapping data to the row
 * @constructor
@@ -16305,7 +16429,7 @@ SnapshotFiller.prototype._onJETSuccess = function (fields, serverResult) {
 	var updatedData = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			updatedData[ric] = obj;
 		}
 	}
@@ -16378,7 +16502,7 @@ SnapshotFiller.prototype._onRTKSuccess = function (fields, serverResult) {
 	var updatedData = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			updatedData[ric] = obj;
 		}
 	}
@@ -16448,7 +16572,7 @@ SnapshotFiller.prototype._onRTKTimeSeriesSuccess = function (fields, serverResul
 	var dataMapping = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			dataMapping[ric] = obj;
 		}
 	}
@@ -31837,7 +31961,7 @@ DataView.prototype._sort = function() {
 	if(this._dt._getSegmentSeparators() || this.isSorting()) {
 		var rids = this._rids;
 		var dataRows = this._dt.getMultipleRowData(rids);
-		var segmentValues = this._dt.getSegmentValues(rids);
+		var segmentValues = this._dt.getSegmentValues(rids, true); // WARNING: This does not work well for hidden/filtered rows
 		var change = data_DataTable._performMultiLevelSorting(dataRows, this._sortingDefs, segmentValues);
 
 		if(change) {
@@ -35591,7 +35715,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.41";
+	return "5.1.44";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -35727,10 +35851,10 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		}
 	}
 
-	if(this._rowHighlighting) {
-		obj["rowHighlighting"] = true;
-	}
-	obj["columnVirtualization"] = this._colVirtualizer.isEnabled();
+	// It will be overwrite in rt-grid or atlas-blotter
+	obj["rowVirtualization"] = this.isRowVirtualizationEnabled();
+	obj["columnVirtualization"] = this.isColumnVirtualizationEnabled();
+	obj["rowHighlighting"] = this._rowHighlighting;
 
 	if(this._fixFrozenTopSections) {
 		obj["topFreezingCount"] = this._startVScrollbarIndex >= 0 ? (this._startVScrollbarIndex + 1) : false;
@@ -35743,7 +35867,13 @@ Core.prototype.getConfigObject = function (gridOptions) {
 	if(this._rowScrollingStep) {
 		obj["stepScroll"] = (this._rowScrollingStep === 1) ? true : this._rowScrollingStep;
 	}
-	obj["autoHideScrollbar"] = this._vscrollbar.getAutoHide(); // this._hscrollbar has the same settings
+
+	var val = this._vscrollbar.getAutoHide();
+	if(val !== true) {
+		// TODO: check this._hscrollbar and this._vscrollbar can be difference config
+		obj["autoHideScrollbar"] = val; // this._hscrollbar has the same settings
+	}
+
 	var wheelSpeed = this._vscrollbar.getMouseWheelSpeed();
 	if(wheelSpeed) {
 		obj["linearWheelScrolling"] = wheelSpeed;
@@ -38716,6 +38846,14 @@ Core.prototype.enableRowVirtualization = function (opt_enabled) {
 		this._rowVirtualizer.deactivate();
 	}
 };
+
+/** @public
+* @return {boolean}
+*/
+Core.prototype.isRowVirtualizationEnabled = function () {
+	return this._rowVirtualizer.isEnabled();
+};
+
 /** No runtime support
 * @public
 * @param {boolean=} opt_enabled
@@ -38730,6 +38868,13 @@ Core.prototype.enableColumnVirtualization = function (opt_enabled) {
 	}
 };
 
+/** @public
+* @return {boolean}
+*/
+Core.prototype.isColumnVirtualizationEnabled = function () {
+	return this._colVirtualizer.isEnabled();
+};
+
 /** Scrolling step will be multiple of the default row height in pixels. For example, if default row height is 32 pixel and row scrolling step is 2, <br>
 * then the actual scrolling step for vertical scrollbar will be (32 * 2) = 64 pixels
 * @public
@@ -40746,7 +40891,7 @@ StyleLoader.chainIcon = '';
 /** @type {string}
 * @public
 */
-StyleLoader.styles = Object(Util["g" /* prettifyCss */])([
+StyleLoader.styles = Object(Util["i" /* prettifyCss */])([
 	".tr-grid .chain-icon", [
 		"cursor: pointer;"
 	],
@@ -40769,7 +40914,7 @@ StyleLoader.styles = Object(Util["g" /* prettifyCss */])([
 StyleLoader.applyStyle = function (grid) {
 	if (grid && !grid._rowGroupingStyles) { // TODO: Support run-time theme loading
 		grid._rowGroupingStyles = true; // Prevent loading the same style twice
-		Object(Util["d" /* injectCss */])(StyleLoader.styles, grid.getElement());
+		Object(Util["e" /* injectCss */])(StyleLoader.styles, grid.getElement());
 	}
 };
 
@@ -41107,7 +41252,7 @@ DataConnector.prototype.getRowDefByRic = function (ric) {
 * @return {boolean} True if new reference is added.
 */
 DataConnector.prototype.addRic = function (rowDef) {
-	var ric = rowDef ? rowDef.getRic() : "";
+	var ric = rowDef ? rowDef.getSymbol() : "";
 	if(!ric) {
 		return false;
 	}
@@ -41135,7 +41280,8 @@ DataConnector.prototype.addRic = function (rowDef) {
 */
 DataConnector.prototype.removeRic = function (rowDef, ric) {
 	if(!ric) {
-		ric = rowDef ? rowDef.getRic() : "";
+		// TODO: RIC or permId maybe change during run-time, need to check before remove RIC/permId
+		ric = rowDef ? rowDef.getSymbol() : "";
 	}
 	if(!ric) {
 		return;
@@ -41442,6 +41588,7 @@ RowDefSorter.prototype._rowDefSorter = function(rowDefA, rowDefB, order) {
 
 
 
+
 /* eslint-enable */
 
 /** Fired when user click and before the sorting operation.
@@ -41901,7 +42048,10 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 		field = opt["field"];
 		if (field) {
-			col["sortBy"] = field;
+			if(col["field"] !== field) {
+				col["sortBy"] = field;
+			} // else The default value is an empty sortBy, which refers to the same column field by default.
+
 			if (this._sortingSequenceMap && this._sortingSequenceMap[field]) {
 				col["sortingSequence"] = this._sortingSequenceMap[field];
 			}
@@ -41914,16 +42064,32 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions = obj["sorting"] = {};
 	}
 
-	extOptions["initialSort"] = this.getSortedColumns();
-	extOptions["sortableIndicator"] = this._sortableIndicator;
+	var val = this.getSortedColumns();
+	if(val != null) {
+		extOptions["initialSort"] = val;
+	}
+
+	val = this._sortableIndicator;
+	if(val !== false) {
+		extOptions["sortableIndicator"] = val;
+	}
+
 	if(this._maxCount !== 1) {
 		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
 	}
 	if(this._dblClickAllowed) {
 		extOptions["disableDoubleClickToSort"] = !this._dblClickAllowed;
 	}
-	extOptions["sortableColumns"] = this._sortableColumns;
-	extOptions["indicatorOnly"] = !this._dataSorting;
+
+	val = this._sortableColumns;
+	if(val !== true) {
+		extOptions["sortableColumns"] = val;
+	}
+
+	val = this._dataSorting;
+	if(val !== true) {
+		extOptions["indicatorOnly"] = val;
+	}
 	// extOptions["mode"] = this._mode;
 	if(this._disabled) {
 		extOptions["disabled"] = true;
@@ -41940,6 +42106,10 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions["sortingSequence"] = sortingSeq.slice();
 	}
 
+	if(Object(Util["f" /* isEmptyObject */])(obj["sorting"])) {
+		delete obj["sorting"];
+	}
+
 	return obj;
 };
 
@@ -44220,7 +44390,7 @@ Grid.prototype.initialize = function(gridOption) {
 			if(rows[n]["values"]) { // merge row's values, values can be object or array
 				values = Object(Util["a" /* arrayToObject */])(rows[n]["values"], fields);
 				data = Object(Util["a" /* arrayToObject */])(ary[n], fields);
-				rows[n]["values"] = Object(Util["c" /* extendObject */])(values, data);
+				rows[n]["values"] = Object(Util["d" /* extendObject */])(values, data);
 			} else {
 				rows[n]["values"] = ary[n];
 			}
@@ -44282,6 +44452,28 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		grid.getConfigObject(obj);
 	}
 
+	// Difference from composite grid in default config
+	if(obj["columnVirtualization"] === false) {
+		delete obj["columnVirtualization"];
+	}
+
+	if(obj["rowVirtualization"] === true) {
+		delete obj["rowVirtualization"];
+	}
+
+	if(obj["rowHighlighting"] === true) {
+		delete obj["rowHighlighting"];
+	}
+
+	if(obj["contentVerticalLines"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["contentVerticalLines"];
+	}
+
+	if(obj["borders"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["borders"];
+	}
+
+
 	var i, len;
 	len = this.getColumnCount();
 	for (i = 0; i < len; ++i) {
@@ -44306,12 +44498,12 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	val = grid.getDefaultRowHeight();
-	if(val !== 32) {
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
 		obj["rowHeight"] = val;
 	}
 
 	val = grid.getSection("title").getDefaultRowHeight();
-	if(val !== 32) {
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
 		obj["headerRowHeight"] = val;
 	}
 
@@ -44319,7 +44511,8 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		obj["autoLayoutUpdate"] = true;
 	}
 
-	if (this._defaultColumnOptions) {
+	val = Object(Util["f" /* isEmptyObject */])(this._defaultColumnOptions);
+	if (!val) { // Currently, this variable is the object, we need to check empty array for default value
 		obj["defaultColumnOptions"] = this._defaultColumnOptions;
 	}
 
@@ -44378,10 +44571,13 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	// TODO: The following states need to be retrieved
-	// rowHighlighting
-	// columnVirtualization
 	// topFreezingCount, bottomFreezingCount
 	// scrollbarParent
+	// linearWheelScrolling
+	// stepScroll
+	// noColumnDragging
+	// columnReorder
+	// topSection
 
 	// NOTE: no need to export synapseApiKey, ADC and RTK
 
@@ -44457,7 +44653,7 @@ Grid.prototype._onRicAdded = function(e) {
 		var jLen = rowDefs ? rowDefs.length : 0;
 		for (var j = 0; j < jLen; ++j) {
 			var rowDef = rowDefs[j];
-			if (rowDef.getRic() === ric) {
+			if (rowDef.getSymbol() === ric) {
 				this._snapshot.addRic(ric); // ADC
 			}
 		}
@@ -44482,7 +44678,7 @@ Grid.prototype._onFieldAdded = function(e) {
 
 	// ADC
 	for (var i in rowDefs) {
-		this._snapshot.addRic(rowDefs[i].getRic());
+		this._snapshot.addRic(rowDefs[i].getSymbol());
 	}
 	this._snapshot.addFields(addedFields);
 
@@ -44676,7 +44872,7 @@ Grid.prototype.replaceColumn = function (columnOption, colRef) {
 	colConfig["width"] = value;
 
 	value = core.getMinimumColumnWidth(colIndex);
-	if(value !== 32) {
+	if(value > 0) {
 		colConfig["minWidth"] = value;
 	}
 
@@ -44830,6 +45026,79 @@ Grid.prototype.setColumns = function(columns) {
 		}
 	}
 };
+
+
+/** Remove, add and keep column based on the given column data
+* @public
+* @param {Array.<Object>} columns Array of column options
+*/
+Grid.prototype.restoreColumns = function(columns) {
+	var configObj = this.getConfigObject();
+	var previousColumns = configObj.columns;
+
+	var preColLen = previousColumns.length;
+	var newColLen = columns.length;
+
+	var removingFields = [];
+	var keepingColumns = [];
+	var columnOrdering = [];
+
+	var i, j, found;
+	// Slow, time complexity BigO(n ^ 2)
+	for (i = 0; i < preColLen; i++) {
+		found = false;
+		for (j = 0; j < newColLen; j++) {
+			if (Object(Util["c" /* deepEqual */])(previousColumns[i], columns[j])) {
+				keepingColumns.push(previousColumns[i]);
+				found = true;
+				break;
+			}
+		}
+		if (!found) {
+			removingFields.push(previousColumns[i].field);
+		}
+	}
+
+	var sortingStates;
+	var removeLen = removingFields.length;
+	if(removeLen > 0 && this._stp) {
+		sortingStates = this._stp.getSortingStates().slice(); // We need to clone array for avoid object reference in remove column
+	}
+
+	this.removeColumns(removingFields);
+
+	var keepingLen = keepingColumns.length;
+	var prevState = false;
+	if(newColLen > 1) {
+		prevState = this._grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
+	}
+	for (i = 0; i < newColLen; i++) {
+		found = false;
+		for (j = 0; j < keepingLen; j++) { // loop only keeping column
+			if (Object(Util["c" /* deepEqual */])(columns[i], keepingColumns[j])) {
+				found = true;
+				var colIndex = this.getColumnIndex(columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
+				columnOrdering.push(this.getColumnId(colIndex));
+				break;
+			}
+		}
+		if (!found) {
+			this.insertColumn(columns[i], i);
+			columnOrdering.push(this.getColumnId(i)); // Use new insertion column index
+		}
+	}
+
+	if(newColLen > 1) {
+		this._grid.freezeLayout(prevState);
+	}
+
+	if(removeLen > 0 && this._stp) {
+		this._stp.sortColumns(sortingStates);
+	}
+
+	this._grid.reorderColumns(columnOrdering);
+};
+
 /** Remove all existing columns and add new columns based on the given texts/fields
 * @public
 * @function
@@ -44974,10 +45243,11 @@ Grid.prototype.removeColumn = function(colRef) {
 			this._dc.removeStaticFields([colDef.getField()]);
 		}
 	}
-	colDef.dispose();
-	this._grid.removeColumnAt(colIndex);
 
+	this._grid.removeColumnAt(colIndex);
 	this._connector.removeFields(colDef);
+
+	colDef.dispose(); // Dispose at the last line to avoid making properties inaccessible
 	// TODO: Remove fields that are related to the column (e.g. fields for coloring)
 };
 /** Remove multiple columns through array. To remove all columns, use removeAllColumns() instead of this method
@@ -45323,7 +45593,7 @@ Grid.prototype.setColumnSorter = function(colRef, func) {
 * @param {RowDefinition} rowDef
 */
 Grid.prototype._initDuplicateRicData = function(rowDef) {
-	var ric = rowDef.getRic();
+	var ric = rowDef.getSymbol();
 	var rowDefs = this._connector.getRowDefByRic(ric);
 	if(rowDefs && rowDefs.length) {
 		cloneRowData(rowDefs[0], rowDef);
@@ -45740,8 +46010,9 @@ Grid.prototype.setRic = function(rowRef, str, options) {
 				this.insertRow(options, rowIndex);
 			}
 		} else {
-			var oldRic = rowDef.getRic();
-			if(rowDef.setContent(str)) { // The given string may not be a RIC
+			var oldRic = rowDef.getSymbol();
+			var permId = options["permId"] || "";
+			if(rowDef.setContent(str, permId)) { // The given string may not be a RIC
 				this._connector.removeRic(rowDef, oldRic);
 				this._initDuplicateRicData(rowDef);
 				this._connector.addRic(rowDef);
@@ -46062,7 +46333,7 @@ Grid.prototype.setRicData = function(ric, values) {
 	var rowCount = rowDefs ? rowDefs.length : 0;
 	for (var i = 0; i < rowCount; ++i) {
 		var rowDef = rowDefs[i];
-		if (rowDef && rowDef.getRic() === ric) {
+		if (rowDef && rowDef.getSymbol() === ric) {
 			rowDef.setRowData(values); // TODO: Need conflator to improve performance
 		}
 	}
@@ -49979,7 +50250,7 @@ CellPainter.themeReady = null;
 * var fn = CellPainter.parse("[CF_BID] >= 10 && [CF_BID] <= 100");
 * window.console.log(fn(25));
 */
-CellPainter.parse = Util["f" /* parseCondition */];
+CellPainter.parse = Util["h" /* parseCondition */];
 
 
 /** @public */
@@ -50077,25 +50348,17 @@ CellPainter.prototype.clearHeatMap = function() {
 /** @public */
 CellPainter.prototype.applyThemeColor = function() {
 	var colors = ElfUtil.getColors();
-	var cond = this._conditions[0]; // Heatmap, color text condition must be the first
-	if(cond) {
-		if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+	if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+		var cond = this._conditions[0]; // Heatmap, color text condition must be the first
+		if(cond) {
 			if(cond["textMode"]) {
 				cond["baseColor"] = colors["baseText"];
 			} else {
 				cond["baseColor"] = colors["baseGrid"];
 			}
-		}
-		if(cond["useThemeColor"]) { // Only heatmap and colorText painters use theme color
-			if(this._coloringType === CellPainter.ColoringTypes.HEATMAP || this._coloringType === CellPainter.ColoringTypes.TEXT) {
-				var up, down;
-				if(this._coloringType === CellPainter.ColoringTypes.TEXT && cond["field"] === "CF_TICK") {
-					up = colors["tickUp"];
-					down = colors["tickDown"];
-				} else {
-					up = colors["up"];
-					down = colors["down"];
-				}
+			if(cond["useThemeColor"]) {
+				var up = colors["up"];
+				var down = colors["down"];
 				var level = (colors["level"] === colors["baseText"]) ? "" : colors["level"];
 				CellPainter._setUpDownColors(cond, up, down, level);
 			}
@@ -50214,34 +50477,36 @@ CellPainter.prototype.addHeatmapWithTheme = function(field, midPoint, opt_textMo
 /** @private
 * @param {Function} expression
 * @param {string} field
-* @param {string} upColor
-* @param {string} downColor
-* @param {string} levelColor
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
 * @return {!Object}
 */
-CellPainter.prototype._addColorText = function(expression, field, upColor, downColor, levelColor) {
+CellPainter.prototype._addColorText = function(expression, field, upClass, downClass, levelClass) {
 	this._setColoringType(CellPainter.ColoringTypes.TEXT);
 
 	var condition = {};
 	condition["field"] = field;
 	condition["expression"] = expression.bind(null, field);
-	CellPainter._setUpDownColors(condition, upColor, downColor, levelColor);
+	condition["upClass"] = upClass;
+	condition["downClass"] = downClass;
+	condition["levelClass"] = levelClass;
 
 	this._addCondition(condition);
 	return condition;
 };
 /** @public
 * @param {string} field
-* @param {string} upColor
-* @param {string} downColor
-* @param {string} levelColor
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
 * @return {!Object}
 */
-CellPainter.prototype.addColorText = function(field, upColor, downColor, levelColor) {
+CellPainter.prototype.addColorText = function(field, upClass, downClass, levelClass) {
 	return this._addColorText(
 		TickFields[field] ? CellPainter._tickColorTextCondition : CellPainter._colorTextCondition,
 		field,
-		upColor, downColor, levelColor
+		upClass, downClass, levelClass
 	);
 };
 /** @public
@@ -50249,14 +50514,7 @@ CellPainter.prototype.addColorText = function(field, upColor, downColor, levelCo
 * @return {!Object}
 */
 CellPainter.prototype.addColorTextWithTheme = function(field) {
-	var colors = ElfUtil.themeColors;
-	var condition = this.addColorText(field,
-		colors["up"],
-		colors["down"],
-		(colors["level"] === colors["baseText"]) ? "" : colors["level"]
-	);
-
-	condition["useThemeColor"] = true;
+	var condition = this.addColorText(field, "positive", "negative", "neutral");
 	return condition;
 };
 /** @public
@@ -50358,14 +50616,16 @@ CellPainter.prototype.renderForPrinting = function(cell, rowData, min, max) {
 		return;
 	}
 	var styles = this._getStyles(rowData, min, max);
-	var cssClass = styles["cssClass"];
-	if (cssClass) {
-		if (cell._coloringCssClass !== cssClass) {
-			cell.classList.remove(cell._coloringCssClass);
-			cell._coloringCssClass = null;
+	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (cssClass != null) { // Predefined colors mode
+		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
+			elem.classList.remove(elem._coloringCssClass);
+			elem._coloringCssClass = null;
+		}
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
 		}
-		cell.classList.add(cssClass);
-		cell._coloringCssClass = cssClass;
 	} else {
 		if (cell._coloringCssClass) {
 			cell.classList.remove(cell._coloringCssClass);
@@ -50498,14 +50758,17 @@ CellPainter._cellRestorer = function(scope) {
 		}
 
 		var styles = this._getStyles(rowData, min, max);
-		var cssClass = styles["cssClass"];
-		if (cssClass) {
+		var cssClass = styles["cssClass"]; // Can be an empty string
+		if (cssClass != null) { // Predefined colors mode
 			if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
 				elem.classList.remove(elem._coloringCssClass);
 				elem._coloringCssClass = null;
 			}
-			elem.classList.add(cssClass);
-			elem._coloringCssClass = cssClass;
+			if (cssClass) {
+				elem.classList.add(cssClass);
+				elem._coloringCssClass = cssClass;
+			}
+			// Remove blinking color
 			elem.style.backgroundColor = "";
 			elem.style.color = "";
 		} else {
@@ -50560,13 +50823,14 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 				}
 			} else if(this._coloringType === CellPainter.ColoringTypes.TEXT) {
 				if(ret > 0) {
-					CellPainter._colorObj["color"] = curCond["upColor"];
+					curCond["cssClass"] = curCond["upClass"];
 				} else if(ret < 0) {
-					CellPainter._colorObj["color"] = curCond["downColor"];
+					curCond["cssClass"] = curCond["downClass"];
 				} else {
-					CellPainter._colorObj["color"] = this._levelColorDisabled ? "" : curCond["levelColor"];
+					curCond["cssClass"] = this._levelColorDisabled ? "" : curCond["levelClass"];
 				}
-				return CellPainter._colorObj;
+				curCond["cssClass"] = curCond["cssClass"] || "";
+				return curCond;
 			}
 
 			// Expected return value is {
@@ -50626,7 +50890,7 @@ CellPainter.blackAndWhite = function (triplet) {
 * @param {string} rgbCode
 * @return {string} resultColor E.g. "#10FF0D"
 */
-CellPainter.rgb2Hex = Util["h" /* rgb2Hex */]; // For backward compatability
+CellPainter.rgb2Hex = Util["j" /* rgb2Hex */]; // For backward compatability
 
 /** @public
 * @function
@@ -50742,6 +51006,10 @@ CellPainter.clearCellStyle = function(cell, styles) {
 		// WARNING: Scope is not removed from the this._scopes collection to speed things up
 	}
 
+	if(elem._coloringCssClass) {
+		elem.classList.remove(elem._coloringCssClass);
+	}
+
 	styles = styles || CellPainter.supportedStyles;
 	for(var i = styles.length; --i >= 0;) {
 		elem.style[styles[i]] = "";  // WARNING: Very slow
@@ -50755,22 +51023,24 @@ CellPainter.clearCellStyle = function(cell, styles) {
 * @param {boolean=} withContrast
 */
 CellPainter._setUpDownColors = function(scp, upColor, downColor, levelColor, withContrast) {
+	scp["upColor"] = upColor;
 	if(upColor != null) {
-		scp["upColor"] = upColor;
 		if(withContrast) {
 			scp["contrastUpColor"] = CellPainter.getOppositeColor(upColor);
 		}
 		//scp["rgbUp"] = CellPainter.hex2Rgb(upColor);
 	}
+
+	scp["downColor"] = downColor;
 	if(downColor != null) {
-		scp["downColor"] = downColor;
 		if(withContrast) {
 			scp["contrastDownColor"] = CellPainter.getOppositeColor(downColor);
 		}
 		//scp["rgbDown"] = CellPainter.hex2Rgb(downColor);
 	}
+
+	scp["levelColor"] = levelColor;
 	if(levelColor != null) {
-		scp["levelColor"] = levelColor;
 		if(withContrast) {
 			scp["contrastLevelColor"] = CellPainter.getOppositeColor(levelColor);
 		}
@@ -50864,14 +51134,16 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 	}
 
 	var styles = this._getStyles(rowData, min, max);
-	var cssClass = styles["cssClass"];
-	if (cssClass) {
-		if (elem._coloringCssClass !== cssClass) {
+	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (cssClass != null) { // Predefined colors mode
+		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
 			elem.classList.remove(elem._coloringCssClass);
 			elem._coloringCssClass = null;
 		}
-		elem.classList.add(cssClass);
-		elem._coloringCssClass = cssClass;
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
+		}
 	} else {
 		if (elem._coloringCssClass) {
 			elem.classList.remove(elem._coloringCssClass);