analytics/webcontent/bi/js/dashboard-analytics/visualizations/renderer/vipr3/VIPRView.js

'use strict';

/**
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| IBM Cognos Products: Dashboard
 *| (C) Copyright IBM Corp. 2017, 2022
 *|
 *| US Government Users Restricted Rights - Use, duplication or disclosure
 *| restricted by GSA ADP Schedule Contract with IBM Corp.
 *+------------------------------------------------------------------------+
 */
/* global Blob FileReader */
define(['jquery', 'underscore', './VIPREventTarget', '../VisView', '../VisEventHandler', 'dashboard-analytics/visualizations/vipr/VIPR', 'dashboard-analytics/visualizations/vipr/VIPRUtils', 'dashboard-analytics/visualizations/vipr/VIPRDataRequestHandler', 'dashboard-analytics/visualizations/vipr/VIPRCachedDataRequestHandler', 'dashboard-analytics/visualizations/vipr/properties/VIPRProperties', 'dashboard-analytics/visualizations/vipr/properties/ColorPropertiesCreator', 'dashboard-analytics/visualizations/vipr/VIPRConfig', '../../../lib/@waca/core-client/js/core-client/utils/BrowserUtils', '../../../widgets/livewidget/nls/StringResources', 'dashboard-analytics/visualizations/interactions/BinningActionsUtils', '../../../lib/@waca/core-client/js/core-client/utils/PerfUtils', '../../../widgets/livewidget/SdkShowError', 'react-dom', 'react', './components/CustomVisPreviewMessage', '../../../util/ContentUtil', 'dashboard-analytics/widgets/livewidget/util/VisUtil'], function ($, _, VIPREventTarget, VisView, VisEventHandler, VIPR, VIPRUtils, VIPRDataRequestHandler, VIPRCachedDataRequestHandler, VIPRProperties, ColorPropertiesCreator, VIPRConfig, BrowserUtils, stringResources, BinningActionsUtils, PerfUtils, SdkShowError, ReactDOM, React, CustomVisPreviewMessage, ContentUtil, VisUtil) {
	'use strict';

	var DEFAULT_THUMBNAIL_PROPERTIES = {
		'optimizeSize': true,
		'gridLines.visible': false,
		'markers.visible': false,
		'widget.legend.size': 0,
		'labels.visible': false,
		'itemAxis.line.visible': false,
		'valueAxis.line.visible': false,
		'valueAxis.ticks.visible': false,
		'itemAxis.ticks.visible': false,
		'itemAxis.gridLines.visible': false,
		'valueAxis.gridLines.visible': false
	};

	/**
  * List of ignored decorations when generating a thumbnails
  * @type {string[]}
  */
	var IGNORED_THUMBNAIL_DECORATIONS = [
	// TODO: right now livewidget does not know what vis-crosshairs is
	// we should probably contribute this list of decorations to be ignored from outside
	'compareLine', // old vis-crosshairs - to be removed when the new crosshair feature flag is removed
	'lines' // new vis-crosshairs
	];

	var VIPRView = VisView.extend({
		initVizPromise: null,

		init: function init(options) {
			VIPRView.inherited('init', this, arguments);

			this.logger = options.logger;

			this.$el.attr('id', this.viewId);
			this.$el.addClass('dataview vipr-view');
			this.dashboard = options.dashboardApi;
			this.colorsService = this.dashboard.getFeature('Colors');
			this.visAPI = options.visModel;
			this.predictHandler = this._createPredictHandler(VIPRDataRequestHandler);
			this.highContrastEnabled = $(document.body).hasClass('highcontrast');
			this.content = options.content;

			this.visualization = this.content.getFeature('Visualization');

			this.internalVisDefinitions = this.dashboard.getFeature('VisDefinitions.internal');

			//Initialize members choosing which title to show (name/titleHtml vs annotation)
			if (this.visModel.getShowTitle()) {
				this._hasUserTitle = true;
				this._hasAnnotationTitle = false;
			}

			this.visController = {};
			this.viprDecorations = {};

			this.dataItemDecorations = {};

			//A list of widgets marked to be destroyed after the current viprWidget control render completes (part of a reRender)
			this._deferredDestroyViprWidgetsList = [];

			this.viprControlRenderInProgress = false;
		},

		/**
   * Setup the view and events based on the model
   * @override
   */
		createView: function createView() {
			VIPRView.inherited('createView', this, arguments);

			// Listen for theme changes
			this.visModel.on('change:theme', this.onChangeTheme, this);
			if (this._isSmartTitleEnabled()) {
				this.visModel.on('change:titleMode', this.onShowTitle, this);
			} else {
				this.visModel.on('change:showTitle', this.onShowTitle, this);
			}

			this.visModel.on('change:customData', this.onChangeCustomData, this);

			this._createVisTabs();
		},

		/**
   * Create a predict handler
   *
   * @param {Function} Class - class to use for the predict handler
   * @param {[type]} [handler] - original predict handler, if any; This is used for thumbnails for caching API requests
   *
   * @return {object} predict handler instance
   */
		_createPredictHandler: function _createPredictHandler(Class, handler) {
			var options = {
				visAPI: this.visAPI,
				visView: this,
				logger: this.logger
			};
			if (handler) {
				options.handler = handler;
			}
			return new Class(options);
		},

		/**
  *
  * @param event - payload for a customData model change event
  * 			 event.prevValue - previous selections of custom data
  * 			 event.value - current selections of custom data
  */
		onChangeCustomData: function onChangeCustomData(event) {
			var prevSelections = event.prevValue && event.prevValue.selected || [];
			var prevIds = prevSelections.map(function (decoration) {
				return decoration.id;
			});
			var prevSelectedCustomData = this.visAPI.getCustomData(prevIds);

			//clear decorations for previous selections;
			prevSelectedCustomData.forEach(function (item) {
				item.setDecoration && item.setDecoration('selected', false);
			});

			var curSelectedCustomData = this.visAPI.getDecoratedCustomData('selected');
			// set decorations for current selections;
			curSelectedCustomData.forEach(function (item) {
				item.setDecoration && item.setDecoration('selected', true);
			});

			return this.renderVIPRControl({ callRenderComplete: true });
		},

		/**
   * Create the visualization tabs if the definition require the tabs
   * The tabs definition consists with the following:
   * tabs : {
   *		entries:[{
   *			id: <unique identifier of the tab>,
   *			resource: <resource key of the tab display label>
   *		}]
   *		default: <identifier of the default select tab entry>
   * }
   */
		_createVisTabs: function _createVisTabs() {
			var _this = this;

			if (this._tabs) {
				// ensure we start from scratch
				this._tabs.reset();

				// check the tabs definitions
				var definition = this.visModel.getDefinition();
				if (definition.tabs) {
					// create the tabs
					this._tabs.createTabs(_.map(definition.tabs.entries, function (tab) {
						return {
							id: tab.id,
							label: stringResources.get(tab.resource),
							onChange: function (tabId) {
								this.visModel.ownerWidget.updateVisProperties({
									id: 'actions',
									value: tabId
								});
							}.bind(_this)
						};
					}), this.visModel.getPropertyValue('actions') || definition.tabs.default);
				}

				// hide the tabs until necessary to show
				this._tabs.hide();
			}
		},

		/**
   * return a public API to a decorator for the nth vipr dataset (default dataset=0)
   * the decorator implements:
   *		- decorate (decorate the dataset),
   *		- decorateItem (decorate an item),
   *		- decoratePoint(decorate a point)
   *		- clearItemDecoration (clear a given item decoration)
   *		All decoratorAPIs implement the same updateDecorations method to render the decorations.
   * Most visualizations have only 1 decoratorAPI (ie: 1 vipr dataset).  Maps, for example have 3.
   * @param n - the nth decorator (dataset)....default 0
   * @returns a decoratorAPI for the whole decorator, items or points
   */
		getDecoratorAPI: function getDecoratorAPI(n) {
			var _this2 = this;

			var setDecorateItem = function setDecorateItem(itemIndex, decoration, value) {
				// Save the decoration so that they are applied when the decoration is refreshed
				// We are only saving the dataitem decorations
				// TODO: Do we need to save datapoints and dataset decorations ??
				if (!_this2.dataItemDecorations[n]) {
					_this2.dataItemDecorations[n] = {};
				}
				if (!_this2.dataItemDecorations[n][itemIndex]) {
					_this2.dataItemDecorations[n][itemIndex] = {};
				}

				var dataItemN = oDataSet.getDataItem(itemIndex);
				/**
     * decorationValue from viprData is usually the same as the value passed in EXCEPT FOR the 'lines' decoration.
     * The lines decoration returns an array of VIDA decoration instances that are the elements of the line that correspond to the value spec passed in . eg: { baseLine: {}, grabber: {}}
     */
				var decorationValue = dataItemN && dataItemN.decorate(decoration, value);
				_this2.dataItemDecorations[n][itemIndex][decoration] = decorationValue;
				return;
			};

			n = n || 0;
			if (!this.viprData || n > this.viprData.getDataSetCount() || !this._isViprWidgetValid()) {
				return null;
			}
			var oDataSet = this.viprData.getDataSetAt(n);
			if (oDataSet) {
				var datapoints = oDataSet.getDataPointIterator() && oDataSet.getDataPointIterator().datapoints;
				return {
					decorateItem: setDecorateItem,
					decoratePoint: function decoratePoint(row, decoration, value) {
						return datapoints && datapoints[row] && datapoints[row].decorate && datapoints[row].decorate(decoration, value);
					},
					decorate: function decorate(decoration, value) {
						return oDataSet.decorate(decoration, value);
					},
					clearItemDecoration: function clearItemDecoration(decoration) {
						if (_this2.dataItemDecorations[n]) {
							var dataItemIndex = void 0;
							for (dataItemIndex in _this2.dataItemDecorations[n]) {
								var dataItemN = oDataSet.getDataItem(dataItemIndex);
								if (dataItemN) {
									dataItemN.decorate(decoration, '');
								}
								delete _this2.dataItemDecorations[n][dataItemIndex][decoration];
							}
						}
					},
					updateDecorations: function updateDecorations() {
						return _this2.renderVIPRControl();
					}
				};
			}
			return null;
		},

		/**
   * return a public interface to all decorators in the visualization
   * (ie: one decoratorAPI per dataset as an array)
   * @returns an array of 0 or more getDecoratorAPIs
   */
		getDecoratorAPIs: function getDecoratorAPIs() {
			var decoratorAPIs = [];
			if (this.viprData && this.viprData.getDataSetCount) {
				for (var i = 0; i < this.viprData.getDataSetCount(); ++i) {
					var decoratorAPI = this.getDecoratorAPI(i);
					if (decoratorAPI) {
						decoratorAPIs.push(decoratorAPI);
					}
				}
			}
			return decoratorAPIs;
		},

		/**
  * @returns {boolean} true iff and only if this view supports annotations
  * The base view always returns false, the child view shoud override if different
  */
		supportsAnnotations: function supportsAnnotations() {
			return !this.doesVisPropertyMatchExpected('doesNotSupportAnnotations', true);
		},
		supportsForecasts: function supportsForecasts() {
			var forecastFeature = this.content && this.content.getFeature('Forecast');
			return forecastFeature && forecastFeature.supportsForecasts();
		},


		/**
   * Handle visualization definition change
   */
		onChangeDefinition: function onChangeDefinition() {
			this.initVizPromise = null;
			VIPRView.inherited('onChangeDefinition', this, arguments);
			//Clean Info Indicator and we update the indicator after Data Query is executed
			//for the new view.
			if (this.infoIndicator) {
				this.infoIndicator.reset();
			}

			//clean listener flag for vida prop changes
			if (this.propChangeslistener) {
				this.propChangeslistener = undefined;
			}

			// recreate the tabs for the new vistype
			this._createVisTabs();
		},

		/**
   * Handle removal of the View and/or its embedded viprWidget control.
   * @param finalRemove - (default) remove is 'final', the embedded viprWidget control is destroyed immediately
   *		remove can also be called as part of a reRender (final=false).  In this case, the embedded viprWidget is marked
   *		to be destroyed after the current control render.
   *		(the embedded control render is async and can't be destroyed mid-render)
   */
		remove: function remove() {
			var finalRemove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;


			this.visModel.off('change:theme', this.onChangeTheme, this);
			if (this._isSmartTitleEnabled()) {
				this.visModel.off('change:titleMode', this.onShowTitle, this);
			} else {
				this.visModel.off('change:showTitle', this.onShowTitle, this);
			}
			this.visModel.off('change:customData', this.onChangeCustomData, this);

			this._cleanupVIPRWidget(finalRemove);
			// The super.destroy will clear all members of this class.
			// this is why we do it at the end
			VIPRView.inherited('remove', this, arguments);
		},

		/**
   * Clean up the VIPR widget and event handler
   * @param finalRemove - (default) remove is 'final', false - part of reRender (see remove)
   */
		_cleanupVIPRWidget: function _cleanupVIPRWidget() {
			var finalRemove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

			if (this.eventHandler) {
				this.eventHandler.remove();
			}
			if (this.$customVisPreviewMessage) {
				ReactDOM.unmountComponentAtNode(this.$customVisPreviewMessage[0]);
				this.$customVisPreviewMessage.remove();
				this.$customVisPreviewMessage = null;
			}

			this._destroyCustomVisShowError();

			if (this.viprWidget) {
				if (finalRemove && !this.viprControlRenderInProgress) {
					//Destroy immmediately
					this.viprWidget.destroy();
					this.viprWidget = null;
				} else if (this._deferredDestroyViprWidgetsList.indexOf(this.viprWidget) === -1) {
					//Set the viprWidget control to be destroyed at the end of control's async render.
					this._deferredDestroyViprWidgetsList.push(this.viprWidget);
				}
			}
		},

		_destroyCustomVisShowError: function _destroyCustomVisShowError() {
			if (this.sdkShowError) {
				this.sdkShowError.destroy();
				this.sdkShowError = null;
			}
		},


		/**
   * This function is called after the viprWidget render to destroy any viprWidget controls that were marked to be destroyed.
   */
		_deferredDestroyVIPRWidgets: function _deferredDestroyVIPRWidgets() {
			_.each(this._deferredDestroyViprWidgetsList, function (viprWidgetToDestroy) {
				viprWidgetToDestroy.destroy();
			});
			this._deferredDestroyViprWidgetsList = [];
		},

		/**
   * Create a VIPRWidget instance and event handler
   */
		_createVIPRWidget: function _createVIPRWidget() {
			var _this3 = this;

			if (!this.viprWidget) {
				// Create a VIPR container.
				// NOTE. VIPR will literally owns this container and will remove on viprWidget.destroy()
				var containerId = 'VIPR_' + this.viewId;
				this.$el.append($('<div id="' + containerId + '" style="width:100%; height:100%" role="application"></div>'));

				var cursors = VIPRUtils.getCursor(this.visAPI.getVisId());

				// The last supported cursor wins. For example, only -webkit-grab works
				// on chrome. This means that if cursors = ['-webkit-grab', 'grab', '-moz-grab'],
				// the style.cursor of the element will be set to '-webkit-grab'.
				if (cursors) {
					_.forEach(cursors, function (cursor) {
						_this3.$el.get(0).style.cursor = cursor;
					});
				}
				//If there is a passed in predictData during initilization, we will create a VIPRCachedDataRequestHandler that caches the predictData
				if (this.predictData) {
					this.predictHandler.setLastRequestData('Catalyst', this.predictData);
					this.predictHandler = this._createPredictHandler(VIPRCachedDataRequestHandler, this.predictHandler);
				}
				this.viprWidget = VIPR.createWidget(containerId, this.predictHandler);

				var userProfileService = this.dashboard.getGlassCoreSvc('.UserProfile');
				if (userProfileService) {
					this.viprWidget.formatLocale = userProfileService.preferences.contentLocale;
				}
				this.eventHandler = new VisEventHandler({
					target: new VIPREventTarget({
						$el: this.$el,
						viprWidget: this.viprWidget,
						visAPI: this.visAPI,
						visualization: this.visualization,
						content: this.content
					}),
					transaction: this.transactionApi,
					ownerWidget: this.ownerWidget,
					visAPI: this.visAPI,
					logger: this.logger,
					dashboard: this.dashboard
				});
			}
		},

		/**
   * Handle when visualization is ready
   */
		whenVisControlReady: function whenVisControlReady() {
			var _this4 = this;

			if (!this.initVizPromise) {
				this._createVIPRWidget();
				this.initVizPromise = this.viprWidget.newViz(this.visAPI.getVisId(), 'client').then(function (vizBundle) {
					// force to create a new vipr data
					_this4.viprData = null;
					_this4.vizBundle = vizBundle;
					return _this4.visController;
				}).catch(function (error) {
					//Remove this checking in R5 for Custom Vis, this is no longer needed
					if (_this4.visAPI.getVisId() === 'visualizationPreview') {
						_this4.logger.error(error, _this4);
						return _this4.visController;
					} else {
						throw error;
					}
				});
			}
			return this.initVizPromise;
		},

		/**
   * Create an instance of VIPR data from query data
   *
   * @param {object} data - query data
   *
   * @return {object} VIPR data
   */
		createViprData: function createViprData(data) {
			var viprData = data.getQueryResults ? VIPRUtils.createData(data.getQueryResults(), this.visualization, this.content) : VIPRUtils.createQueryResultData(data, this.visualization, this.content);
			viprData.hasMoreData = data.hasMoreData;
			viprData.queryThreshold = data.queryThreshold;
			return viprData;
		},

		/**
   * When there is a connection error we should not deal with preparing data anymore.
   */
		canRender: function canRender() {
			return this._hasMappedSlots() && this.isMappingComplete();
		},


		/**
   * Handle when data is ready
   */
		whenDataReady: function whenDataReady() {
			var _this5 = this;

			return VIPRView.inherited('whenDataReady', this, arguments).then(function (_ref) {
				var data = _ref.data,
				    sameQueryData = _ref.sameQueryData;

				var result = void 0;
				if (_this5.canRender() && !_this5.hasUnavailableMetadataColumns() && !_this5.hasMissingFilters()) {
					// preserve the query results
					_this5._dataObject = data;

					if (sameQueryData) {
						result = {
							data: data,
							sameQueryData: sameQueryData
						};
					} else {
						_this5.predictHandler.resetCustomData();
						_this5._viprSlotMapping = VIPRUtils.createSlotMapping(_this5.visualization);
						result = {
							data: data
						};
					}
				} else {
					result = {
						data: {}
					};
				}

				return result;
			});
		},

		/**
  * Set a model property if its valid.
  * @param {String} propertyName - name of the property of interest.
  * @param {String} visId - id of the visualization of interest.
  */
		_setModelProperty: function _setModelProperty(propertyName, visId) {
			if (this._shouldPropertyBeApplied(propertyName)) {
				var val = this._getPropValueWhenSaving(visId, propertyName);
				var propInfo = {
					id: propertyName,
					value: val
				};
				this.setProperty(propInfo);
			}
		},


		/**
  * set properties needed before data is set.
  */
		_setPreDataProperties: function _setPreDataProperties() {
			var _this6 = this;

			// Check for such properties in the vipr config
			var visId = this.visAPI.getVisId();
			var config = VIPRConfig.getConfig(visId);
			if (config && config.propertiesToSetBeforeData && config.propertiesToSetBeforeData.length > 0) {
				config.propertiesToSetBeforeData.forEach(function (propertyName) {
					_this6._setModelProperty(propertyName, visId);
				});
			}
		},


		/**
   * handles when data is ready before setting
   * @param {Object} renderContext
   */
		whenSetDataReady: function whenSetDataReady(renderContext) {
			var result = Promise.resolve(true);
			if (this.canRender() && !this.hasUnavailableMetadataColumns() && !this.hasMissingFilters()) {
				var autoRefresh = !!(renderContext && renderContext.extraInfo && renderContext.extraInfo.queryRefresh);
				// we only care if its the same query IFF the query is an auto refresh query
				// otherwise the query is considered valid to construct a new VIPRData
				var sameQueryData = autoRefresh ? !!renderContext.sameQueryData : false;
				var requiresNewVIPRData = this.viprData ? !sameQueryData : true;
				if (requiresNewVIPRData) {
					this._isAnnotated = false;
					// Some properties, such as custom polygons, need to be set before data is set. Do so now.
					this._setPreDataProperties();
					// preserve the query results
					this._dataObject = renderContext.data;

					this._viprSlotMapping = VIPRUtils.createSlotMapping(this.visualization);
					this.viprData = this.createViprData(this._dataObject);

					if (this.viprData) {
						try {
							this.viprWidget.setData(this.viprData, this._viprSlotMapping);
						} catch (e) {
							result = Promise.reject(e);
						}
					} else {
						result = Promise.reject(new Error('Unable to create VIPR data in whenSetDataReady'));
					}
				}
			} else {
				//for cases that that we can render without complete mapping and there is no required slots like schematic, we need to check the slots,
				// if not data item is mapped, so we need to clear data
				var isMappingComplete = this.isMappingComplete() && this.visualization.getSlots().getMappingInfoList().length > 0;
				if (this.isRenderWithoutCompletingMapping() && !isMappingComplete) {
					this.viprWidget.setData(null);
					if (this.infoIndicator) {
						this.infoIndicator.reset();
					}
				}
			}
			return result;
		},
		_getAnnotationMessages: function _getAnnotationMessages(facetData) {
			return facetData.getMessages() || {};
		},


		whenAnnotatedResultsReady: function whenAnnotatedResultsReady() {
			var _this7 = this;

			return VIPRView.inherited('whenAnnotatedResultsReady', this, arguments).then(function (data) {
				if (data) {
					// preserve the result object which holds the annotation titles
					_this7._dataObject = data._aQueryResults && data._aQueryResults.length ? data : _this7._dataObject;

					if (!_.isEmpty(_this7.content.getFeature('Forecast').getForecastInfo().annotations)) {
						_this7.viprData = _this7.createViprData(_this7._dataObject);
						_this7.viprWidget.setData(_this7.viprData, _this7._viprSlotMapping);
					}

					// preserve the query results
					_this7._queryResults = data.getQueryResults();
					_this7._isAnnotated = true;

					_this7.visAPI.setAnnotationMessages(_this7._getAnnotationMessages(data));
				}
				return data;
			}).catch(function (e) {
				throw e;
			});
		},

		onShowTitle: function onShowTitle(event) {
			this._hasUserTitle = event.value !== 'noTitle';

			if (this._hasUserTitle) {
				this._hasAnnotationTitle = false;
			}
		},

		/**
   * VIPR view should use VIPR's built-in animations and not do the default animations.
   */
		// @Override
		animate: function animate() {},

		_readyForRender: function _readyForRender() {
			return (this.canRender() || this.isRenderWithoutCompletingMapping()) && !this.hasUnavailableMetadataColumns() && !this.hasMissingFilters();
		},

		_updateViprProp: function _updateViprProp(viprPropId, viprPropValue) {
			// we need to explicitly update property value so that dirty flag would be set and users will be aware.
			var options = {
				merge: true,
				remove: false,
				silent: false
			};
			if (viprPropId !== undefined && viprPropValue !== undefined) {
				this.visModel.ownerWidget.updateVisProperties({
					'id': viprPropId,
					'value': viprPropValue && viprPropValue.name ? viprPropValue.name : viprPropValue
				}, options);
			}
		},
		_onViprPropValueChange: function _onViprPropValueChange(viprProp) {
			var viprPropId = viprProp.property.getName();
			var viprPropValue = viprProp.property.getValue();
			/*
   * It seems like dashboard is storing the object structures when persisting length properties.
   * This will (e.g. for Length) return an object { value:15, unit:"px" }. However, if vida starts adding
   * internal variables on the object, these will unnecessarily end up in the serialization.
   * If we want to store property values in a spec, need to serialize them by calling 'Prop.toString()'.
   * This will yield e.g. "15px" for the above object.
   * They can then simply be reconstituted into objects by calling Length.parse("15px").
   * This applies to all complex properties, e.g. Color, Palettes, Length, Font etc.
   * NOTE: Have a discussion with Shawn, this is a temporary fix to have the minimum impact on the product,
   * need a generic fix in future
   */
			if (viprProp.property.type === 'length') {
				viprPropValue = viprPropValue ? viprPropValue.toString() : viprPropValue;
			}
			this._updateViprProp(viprPropId, viprPropValue);
		},
		_allowShowTabs: function _allowShowTabs() {
			return this.ownerWidget.allowShowTabs && this.ownerWidget.allowShowTabs();
		},
		_renderTabs: function _renderTabs() {
			// ensure the a tabs are visible with the selected tab
			if (this._tabs.getTabsCount() > 0 && this._allowShowTabs()) {
				this._tabs.show();
				this._tabs.selectTab(this.visModel.getPropertyValue('actions'));
			} else {
				this._tabs.hide();
			}
		},


		/**
   * Render the VIPR visualization
   */
		render: function render(renderInfo) {
			var _this8 = this;

			VIPRView.inherited('render', this, [renderInfo, /*callRenderComplete*/false]);

			this._destroyCustomVisShowError();

			if (!this.viprWidget) {
				return Promise.resolve();
			}

			if (this._renderCustomVisContext()) {
				renderInfo.widgetSize.height = this.$el.closest('.liveWidgetContent').height();
			}

			this.resizeToWidget(renderInfo);
			if (!this._readyForRender()) {
				return VisUtil.validateVisDefinition(this.content, this.dashboardApi, { visId: this.ownerWidget.model.visId }).then(function (isValid) {
					if (isValid) {
						_this8.renderIconView();
					} else {
						var $originalContentBeforeError = _this8.$el.children();
						$originalContentBeforeError.detach();

						_this8.sdkShowError = new SdkShowError(_this8.$el[0], stringResources.get('extVisNoSDKConnection'), stringResources.get('extVisNoSDKPreviewMsg'), 'disconnect');
						_this8.sdkShowError.showError();
					}
				});
			}

			this._renderTabs();

			this.removeIconView();

			//Listen for property value change if any, add a flag to prevent registering the same listener multiple times
			if (!this.propChangeslistener) {
				this._registerListenerForPropChanges();
			}

			return this._applySavedModelProperties(renderInfo).then(function () {
				if (!_this8.visModel.getRenderSequence().isActive()) {
					return;
				}
				var augmentations = _this8.visAPI.ownerWidget.model.augmentation; //TODO: add getAugmentations to visAPI
				if (augmentations && augmentations.length > 0) {
					for (var i = 0; i < augmentations.length; i++) {
						var augmentation = augmentations[i];
						_this8._appendDVI(augmentation);
					}
				}

				return _this8.renderSelected(renderInfo);
			});
		},
		/**
  * Render items that are specific to custom visualizations (ex. Custom Vis Preview Message)
  */
		_renderCustomVisContext: function _renderCustomVisContext() {
			if (this.ownerWidget.model.visId === 'visualizationPreview') {
				var iconsFeature = this.dashboard.getFeature('Icons');
				var $parent = $(this.$el.closest('.widgetContentWrapper'));
				if ($parent.find('.customVisPreviewMessage').length < 1) {
					this.$customVisPreviewMessage = $('<div>');
					this.$customVisPreviewMessage.addClass('customVisPreviewMessage');
					$parent.prepend(this.$customVisPreviewMessage);
					ReactDOM.render(React.createElement(CustomVisPreviewMessage, { iconsFeature: iconsFeature }), this.$customVisPreviewMessage[0]);
				}
				return true;
			}
			return false;
		},

		reveal: function reveal() {
			var _this9 = this;

			if (BrowserUtils.isIE11() || !this._readyForRender() || !this._getEntryDurationProperty() || !this.viprData) {
				this.visAPI.renderCompleteBeforeAnimation();
				return Promise.resolve();
			}
			// reveal is a render which triggers the widget's entry level animation.
			// This is done by clearing and resetting the data as there is no API for it atm.

			var emptyData = this.viprWidget.processData(this.viprData, this._viprSlotMapping).empty();
			this.viprWidget.setData(emptyData, this._viprSlotMapping);
			this._applyEntryDurationProperty('zero');
			return this.renderVIPRControl().then(function () {
				_this9._applyEntryDurationProperty('model');
				_this9.viprWidget.setData(_this9.viprData, _this9._viprSlotMapping);
				_this9.renderVIPRControl();
				return {
					// renderControlApi is a thenable object (has a then method),
					// but it's not a pure promise since it has other methods added by VIDA.
					// if we return it directly those api's get lost.
					renderControlApi: _this9.renderControlApi
				};
			}).catch(function (e) {
				_this9.viprWidget.setData(_this9.viprData, _this9._viprSlotMapping);
				throw e;
			});
		},

		getCurrentViewSelector: function getCurrentViewSelector() {
			return this.eventHandler;
		},

		/**
   * @private
   * TODO: SmartsExecution requests are using a legacy QueryResultsObject.
   * Annotations should be moved to a feature and updated with proper api's for decorations.
   * In the meantime, the response value indexes and decorations can be accessed via the "pt" array and "deco" member.
   * @param {Object} value - datapoint value
   * @return {String} unique string representing the datapoint
   */
		_getDatapointKeyFromSmartAnnotationsResult: function _getDatapointKeyFromSmartAnnotationsResult(value) {
			// generate a unique key that consists of the category indices
			// without the ordinal values
			// INPUT: [2, 1, {v: 886.970000016}]
			// OUTPUT: '2,1'
			return value ? _.filter(value.pt, function (pt) {
				return typeof pt === 'number';
			}).toString() : '';
		},

		_decorateDatapoints: function _decorateDatapoints(dataset, datasetIndex) {
			var it = dataset.getDataPointIterator();
			var selection = this.getSelector().getSelection(ContentUtil.getColumnIdList(dataset.slots || this.visualization.getSlots().getMappedSlotList(), 'attribute'));
			var queryResult = this._isAnnotated ? this._queryResults[datasetIndex] : null;
			var facetData = queryResult ? queryResult.getFacetData() : null;
			var annotatedDatapoints = facetData ? facetData.getDatapoints() : null;

			var nextValue = it.nextValue();
			var index = 0;
			while (nextValue !== null) {
				if (nextValue.decorate && nextValue.hasDecoration) {
					if (annotatedDatapoints && annotatedDatapoints[index] &&
					// When dashboard submits a stats query for smart annotations,
					// certain rows may be removed when attempting to calculate using columns with no values.
					// As a result the stats query (and SA execution query) may have less rows compared to the main data query.
					// This code ensures they match.
					nextValue.getDataPointKey() === this._getDatapointKeyFromSmartAnnotationsResult(annotatedDatapoints[index])) {
						var decorations = annotatedDatapoints[index++].deco;
						if (decorations !== undefined) {

							_.each(decorations, function (value, key) {
								nextValue.decorate(key, value);
							});
						} else {
							nextValue.clearDecorations();
						}
					} else {
						nextValue.clearDecorations();
					}

					// Decorate only if needed. Avoid re-decorating with the same decorations.
					if (selection && selection.isSelected(it.getTupleItems())) {
						nextValue.decorate('selected', true);
					} else if (nextValue.hasDecoration('selected')) {
						nextValue.decorate('selected', false);
					}
				}
				nextValue = it.nextValue();
			}

			return !!selection;
		},

		_decorateDataItems: function _decorateDataItems(dataset, datasetIndex) {
			var _this10 = this;

			var decorated = false;
			var queryResult = this._isAnnotated ? this._queryResults[datasetIndex] : null;
			var annotatedData = queryResult ? queryResult.getFacetData() : null;

			var _loop = function _loop(iDataItem) {
				var dataItem = dataset.getDataItem(iDataItem);
				// decorate annotations
				if (annotatedData) {
					var annotatedDataItem = annotatedData.getResultDataItem(iDataItem);
					if (annotatedDataItem) {
						var decoration = annotatedDataItem.getDecoration();
						if (_.isEmpty(decoration)) {
							dataItem.clearDecorations();
						} else {
							_.each(decoration, function (value, key) {
								dataItem.decorate(key, value);
							});
						}
					}
				} else {
					dataItem.clearDecorations();
				}

				// Maintain any decoration that were added using the widget decorator API
				if (_this10.dataItemDecorations[datasetIndex] && _this10.dataItemDecorations[datasetIndex][iDataItem]) {
					var dataItemDecorations = _this10.dataItemDecorations[datasetIndex][iDataItem];
					var decoName = void 0;
					for (decoName in dataItemDecorations) {
						if (dataItemDecorations[decoName] !== null && dataItemDecorations[decoName] !== undefined) {
							dataItem.decorate(decoName, dataItemDecorations[decoName]);
						}
					}
				}

				// decorate selection
				if (dataItem.getType() === 'cat') {
					(function () {
						// collect the ItemIds (single or nested)
						var itemIds = [];
						var aItemClassSet = dataItem.getItemClassSet();

						for (var iItemClass = 0; iItemClass < aItemClassSet.getItemClassCount(); iItemClass++) {
							itemIds.push(aItemClassSet.getItemClass(iItemClass).getUniqueName());
						}

						var selection = _this10.getSelector().getSelection(itemIds);
						var selectedVIPRItem = {};
						var allVIPRItem = {};
						for (var iTuple = 0; iTuple < dataItem.getTupleCount(); iTuple++) {
							var tuple = dataItem.getTuple(iTuple);

							tuple.items.forEach(function (VIPRItem) {
								return allVIPRItem[VIPRItem.getUniqueName()] = VIPRItem;
							});

							var tupleItems = [];
							for (var iTupleItem = 0; iTupleItem < tuple.getItemCount(); iTupleItem++) {
								tupleItems.push(tuple.getItem(iTupleItem).item);
							}

							// unlike the datapoint decorations, each legend items need to be explictly selected/unselected
							if (selection) {
								var isTupleSelected = !!selection.isSelected(tupleItems);
								tuple.decorate('selected', isTupleSelected);

								isTupleSelected && tuple.items.forEach(function (VIPRItem) {
									selectedVIPRItem[VIPRItem.getUniqueName()] = VIPRItem;
								});

								decorated = true;
							} else {
								tuple.decorate('selected', false);
								tuple.items.forEach(function (VIPRItem) {
									VIPRItem.decorate('selected', false);
								});
							}
						}

						// handle VIPRItem selection
						Object.values(selectedVIPRItem).forEach(function (viprItem) {
							return viprItem.decorate('selected', true);
						});
						Object.keys(allVIPRItem).filter(function (key) {
							return !selectedVIPRItem[key];
						}).forEach(function (itemKey) {
							allVIPRItem[itemKey].decorate('selected', false);
						});
					})();
				}
			};

			for (var iDataItem = 0; iDataItem < dataset.getDataItemCount(); iDataItem++) {
				_loop(iDataItem);
			}
			return decorated;
		},

		decorateData: function decorateData(viprData) {
			var decorations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
				dataPoints: true,
				dataItems: true,
				selection: true,
				annotations: true
			};

			var dataset = void 0;
			for (var i = 0; i < viprData.getDataSetCount(); i++) {
				dataset = viprData.getDataSetAt(i);
				if (dataset) {
					var dataItemsDecorated = false;
					if (decorations.dataItems) {
						dataItemsDecorated = this._decorateDataItems(dataset, i);
					}

					var datapointsDecorated = false;
					if (decorations.dataPoints) {
						datapointsDecorated = this._decorateDatapoints(dataset, i);
					}

					if (decorations.selection) {
						// The hasSelection decoration tells the visualization if there is any selection in play, and changes
						// how items are rendered by default.
						dataset.decorate('hasSelection', datapointsDecorated || dataItemsDecorated);
					}

					if (decorations.annotations) {
						// Check for annotation type
						var meaningfulDiff = _.where(this.visAPI.getEnabledAnnotations(), { type: 'MEANINGFUL_DIFFERENCES' });
						dataset.decorate('hasAnnotations', !!meaningfulDiff.length);
					}
				}
			}
		},

		renderSelected: function renderSelected(renderInfo) {
			var _this11 = this;

			if (!this.visModel.getRenderSequence().isActive()) {
				return Promise.resolve();
			}
			if (this.viprData) {
				this.decorateData(this.viprData);
			}
			// restore the visualization state
			if (this.eventHandler) {
				this.eventHandler.restoreState();
			}
			var perfMarkName = 'WidgetRender_' + this.visModel.getWidgetId();
			PerfUtils.createPerformanceMark({
				'component': 'dashboard',
				'name': perfMarkName,
				'state': 'start'
			});

			return this.renderVIPRControl({ renderInfo: renderInfo, callRenderComplete: true }).then(function () {
				PerfUtils.createPerformanceMark({
					'component': 'dashboard',
					'name': perfMarkName,
					'state': 'end'
				});
				if (!_this11.visModel.getRenderSequence().isActive()) {
					return;
				}
			});
		},

		renderVIPRControl: function renderVIPRControl() {
			var _this12 = this;

			var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { callRenderComplete: false };
			var renderInfo = options.renderInfo,
			    callRenderComplete = options.callRenderComplete;
			// complete the previous render if it's still running.

			if (this.renderControlApi && this.renderControlApi.complete) {
				this.renderControlApi.complete();
			}
			this.viprControlRenderInProgress = true;
			this.renderControlApi = this.viprWidget.render('client');
			this.renderControlApi.onprogress = function (_message) {
				if (_message.status === 'animating') {
					_this12.visAPI.renderCompleteBeforeAnimation();
				}
			};
			return this.renderControlApi.then(function () {
				callRenderComplete && _this12.visAPI.renderComplete(renderInfo);
				_this12._deferredDestroyVIPRWidgets();
				_this12.viprControlRenderInProgress = false;
			}).catch(function (e) {
				throw e;
			});
		},


		/**
   * check if the value of a property matched expected
   * @param  {String} propertyName
   * @param  {object} expectedValue
   * @return {boolean} true if it matches
   */
		doesVisPropertyMatchExpected: function doesVisPropertyMatchExpected(propertyName, expectedValue) {
			if (propertyName && this.viprWidget) {
				return VIPRUtils.doesConfigPropertyMatchExpected(this.visualization.getDefinition().getId(), propertyName, expectedValue);
			}
			return false;
		},

		/**
   * check if auto binning is set for this view.
   * @return {boolean} true if anto binning can be appied for this view
   */
		canApplyAutoBin: function canApplyAutoBin() {
			var doesConfigSupportAutobinning = VIPRUtils.canApplyAutoBin(this.visualization.getDefinition().getId());

			var definition = this.visualization.getDefinition();
			var slots = this.visualization.getSlots().getMappedSlotList();
			var slotOneRole = 'explanatory';
			var colorSlotRole = 'group';
			var doesWidgetHaveBinnableDataItem = false;
			if (definition.getProperty('canApplyBinning')) {
				_.find(slots, function (slot) {
					var role = slot.getDefinition().getRole();
					if (slot.getDefinition().getType() !== 'ordinal' && (role === slotOneRole || role === colorSlotRole)) {
						var fact = slot.getDataItemList().find(function (dataItem) {
							return dataItem.getMetadataColumn().getType() === 'fact';
						});
						doesWidgetHaveBinnableDataItem = !!fact;
						return doesWidgetHaveBinnableDataItem;
					}
				});
			}

			return doesConfigSupportAutobinning && doesWidgetHaveBinnableDataItem;
		},

		/**
   * @returns the default binning config  for this widget.
   */
		getBinningConfig: function getBinningConfig() {
			return VIPRUtils.getBinning(this.visualization.getDefinition().getId());
		},

		/**
  * @returns the default palette from the colorsService
  */
		_getDefaultContinuousPaletteName: function _getDefaultContinuousPaletteName() {
			return this.colorsService.getDefaultPaletteName('HeatPalette');
		},

		/**
  * @returns the default palette from the colorsSerivce
  */
		_getDefaultCategoricalPaletteName: function _getDefaultCategoricalPaletteName() {
			return this.colorsService.getDefaultPaletteName('ColorPalette');
		},

		/**
  * @param palette - palette property item describing a specific vipr palette
  * @param possibleDataSlots - all possible data slots for the current vis type.
  * @returns a continuous heat palette description needed to set a palette resolver in VIPR
  * eg.
  * {
  *	type: "cont"
  *	colors: description of colors (either continuous or categorical)
  * defaultIndex: index into the palette for an element when the color by slot is empty.
  * }
  */
		_getContinuousColorPaletteDesc: function _getContinuousColorPaletteDesc(viprPalette, possibleDataSlots) {
			var _this13 = this;

			// Get either the overriden palette or the default palette
			var colorPropsCreatorInstance = ColorPropertiesCreator.getInstance();
			var dataLayerId = colorPropsCreatorInstance.getDataLayerIdFromPaletteAndSlots(viprPalette, possibleDataSlots);
			var propertyName = colorPropsCreatorInstance.getContinuousColorPalettePropertyNameWithLayer(dataLayerId);
			var paletteName = this.visModel.getPropertyValue(propertyName) || this._getDefaultContinuousPaletteName();

			return this.colorsService.getPalette({
				paletteId: paletteName,
				type: 'HeatPalette'
			}).then(function (palette) {
				var paletteDef = {
					type: ''
				};
				if (palette) {
					paletteDef.type = 'cont';
					paletteDef.dataLayerId = dataLayerId;
					var colors = [];
					/* VIPR had an original issue with the typical way we express our color
     * stops. We could wait for their fix (its on its way) or work around it.
     * This is the work around. We want to change our stops to return in this
     * format:
     *	 ["color %", "color %", ...]
     */
					// Order the colors depending on the heat scale color order property.
					var heatScalePropId = colorPropsCreatorInstance.getHeatScalePalettePropertyNameWithLayer(dataLayerId);
					var colorOrder = _this13.visModel.getPropertyValue(heatScalePropId);
					var paletteFills = palette.fills;
					var paletteLength = paletteFills.length;
					for (var index = 0; index < paletteLength; index++) {
						// If the colorOrder is dark to light then reverse the colors.
						var color = colorOrder !== 'DarkerForLowerValue' ? paletteFills[index].fill : paletteFills[paletteLength - index - 1].fill;
						var at = paletteFills[index].at;
						var colorStr = color + ' ' + String(at * 100) + '%';
						colors.push(colorStr);
					}
					paletteDef.colors = colors;
				}
				return paletteDef;
			});
		},

		/**
  * @param {Object} palette - viprWidget palette
  * @returns secondary color index is needed, undefined otherwise.
  */
		_getSecondaryColorIndexForCatColorPalettes: function _getSecondaryColorIndexForCatColorPalettes(palette) {
			var defaultSecondaryColor = void 0;
			var secondaryColorProp = void 0;
			var singlePaletteProps = VIPRUtils.getSinglePaletteProperties(this.visAPI.getVisId());
			if (singlePaletteProps) {
				Object.values(singlePaletteProps).forEach(function (propDesc) {
					if (propDesc.defaultColorIndex === 1) {
						secondaryColorProp = propDesc;
					}
				});
			}
			if (secondaryColorProp) {
				var secondaryValue = this.visModel.getPropertyValue(secondaryColorProp.id);
				defaultSecondaryColor = secondaryValue !== null ? secondaryValue : 1;
				// Ensure defaultIndex is not above the number of colors in the current palette
				defaultSecondaryColor = defaultSecondaryColor < palette.fills.length ? defaultSecondaryColor : 1;
			}
			return defaultSecondaryColor;
		},

		/**
  * @param {Object} palette - viprWidget palette
  * @returns {Object} primary and secondary color index
  */
		_getColorIndicesForCatColorPalettes: function _getColorIndicesForCatColorPalettes(palette, propertyName) {
			var defaultIndex = this.visModel.getPropertyValue('defaultPaletteIndex') || this.visModel.getPropertyValue(propertyName + '_defaultIndex') || 0;
			// Ensure defaultIndex is not above the number of colors in the current palette
			defaultIndex = defaultIndex < palette.fills.length ? defaultIndex : 0;

			var defaultSecondaryColor = this._getSecondaryColorIndexForCatColorPalettes(palette);

			return {
				defaultIndex: defaultIndex,
				secondaryIndex: defaultSecondaryColor
			};
		},

		/**
  * @param viprPalette - viprWidget.palettes item describing a specific vipr palette
  * @param possibleDataSlots - all possible data slots for the current vis type.
  * @returns a categorical palette description needed to set a palette resolver in VIPR
  * eg.
  * {
  *	type: "cat"
  *	colors: description of colors (either continuous or categorical)
  * defaultIndex: index into the palette for an element when the color by slot is empty.
  * }
  */
		_getCategoricalColorPaletteDesc: function _getCategoricalColorPaletteDesc(viprPalette, possibleDataSlots) {
			var _this14 = this;

			// Get either the overriden palette or the default palette
			var colorPropsCreatorInstance = ColorPropertiesCreator.getInstance();
			var dataLayerId = colorPropsCreatorInstance.getDataLayerIdFromPaletteAndSlots(viprPalette, possibleDataSlots);
			var propertyName = colorPropsCreatorInstance._getCategoricalColorPalettePropertyNameWithLayer(dataLayerId);
			var paletteName = this.visModel.getPropertyValue(propertyName) || this._getDefaultCategoricalPaletteName();

			return this.colorsService.getPalette({
				paletteId: paletteName,
				type: 'ColorPalette'
			}).then(function (palette) {
				var paletteDef = {
					type: '',
					colors: ''
				};

				var colorIndices = _this14._getColorIndicesForCatColorPalettes(palette, propertyName);

				if (palette) {
					paletteDef.type = 'cat';
					paletteDef.colors = palette.fills;
					paletteDef.defaultIndex = colorIndices.defaultIndex;
					paletteDef.secondaryColorIndex = colorIndices.secondaryIndex;
				}
				return paletteDef;
			});
		},

		/**
  * @param viprPalette - viprWidget.palettes item describing a specific vipr palette
  * @param possibleDataSlots - all possible data slots for the current vis type.
  * @returns a palette description needed to set a palette resolver in VIPR
  * eg.
  * {
  *	type: "" // cat or cont
  *	colors: description of colors (either continuous or categorical)
  * defaultIndex: index into the palette for an element when the color by slot is empty. This is only supplied for categorical palettes.
  * }
  */
		_getPaletteDescForPalette: function _getPaletteDescForPalette(viprPalette, possibleDataSlots) {
			var getColorPaletteDesc = void 0;
			switch (viprPalette.paletteType) {
				case 'cont':
				case 'customcont':
					getColorPaletteDesc = this._getContinuousColorPaletteDesc.bind(this);
					break;
				case 'cat':
				case 'single':
				case 'customcat':
					getColorPaletteDesc = this._getCategoricalColorPaletteDesc.bind(this);
					break;
				default:
					getColorPaletteDesc = null;
			}

			return getColorPaletteDesc ? getColorPaletteDesc(viprPalette, possibleDataSlots).then(function (desc) {
				desc.type = viprPalette.paletteType;
				return desc;
			}) : Promise.resolve({});
		},

		_getEntryDurationProperty: function _getEntryDurationProperty() {
			var name = null;
			var configuration = VIPRConfig.getConfig(this.visAPI.getVisId());
			if (configuration && configuration.entryDurationProperty) {
				name = configuration.entryDurationProperty;
			} else if (this.viprWidget.properties.get('effect.duration')) {
				var val = VIPRUtils.getOverridenDefaultForProperty(this.visAPI.getVisId(), 'effect.duration').defaultValue;
				if (val !== null && val >= 0) {
					// backward compatible value, if we actually have a value to set (I.e defaultValue is configured)
					name = 'effect.duration';
				}
			}
			return name;
		},

		_isDurationPropertyValuePropValid: function _isDurationPropertyValuePropValid(value) {
			return !(value === undefined || value < 0);
		},


		_applyEntryDurationProperty: function _applyEntryDurationProperty(durationOverwrite) {
			var propertyName = this._getEntryDurationProperty();
			if (!propertyName) {
				return;
			}

			/*
   * 3 possible values for the duration:
   * 1) zero - set the value to 0 so there is no animation
   * 2) model - ask the model for the value to use. If the user has set a value
   * then it will be used.
   * 3) if value is still undefined, check our local config for overrides.
   *
   * zero is a special case where we set all the animations values to zero.
   * for now this only includes effect.duration.
   *
   */
			var value = void 0;
			var effectValue = VIPRUtils.getOverridenDefaultForProperty(this.visAPI.getVisId(), 'effect.duration').defaultValue || 0;
			if (durationOverwrite === 'zero') {
				value = 0;
				effectValue = 0;
			} else if (durationOverwrite === 'model') {
				value = this.visModel.getPropertyValue(propertyName);
			}
			//default (and if model has no value) - check for config override.
			if (!this._isDurationPropertyValuePropValid(value)) {
				value = VIPRUtils.getOverridenDefaultForProperty(this.visAPI.getVisId(), propertyName).defaultValue;
			}
			// If we still don't have a value, forget it, we'll use the default.
			if (this._isDurationPropertyValuePropValid(value)) {
				this.setProperty({ id: 'effect.duration', value: effectValue });
				this.setProperty({ id: propertyName, value: value });
			}
		},

		/**
  * Single palettes are handled differently than categorical or continuous
  * For one, there is always two of them. Secondly, both the single palette
  * resolvers must use the same categorical palette (or at least same colors)
  */
		_applySavedSingleColorPalette: function _applySavedSingleColorPalette() {
			var _this15 = this;

			// Create the categorical palette resolver needed for the single palette.
			return this._getCategoricalColorPaletteDesc().then(function (catPaletteDesc) {
				return VIPRProperties.getInstance().setSinglePaletteResolvers(_this15.viprWidget, catPaletteDesc);
			});
		},

		/**
  * VIPR has some properties in its bundles that are handled in a different way.
  * We have to protect against setting them using the properties API as there
  * could be unexpected side affects.
  * @param property - specific vipr defined property in question
  * @returns true iff the property should be applied
  * @// TODO: replace this list with dontApply: true in the VIPR config
  */
		_shouldPropertyBeApplied: function _shouldPropertyBeApplied(propertyName) {
			var blackList = ['legend.display', 'legend.position', 'effect.duration', 'effect.entry.line.duration', 'effect.entry.bar.duration'];
			blackList = blackList.concat(this._getDontApplyProperties());
			return !(blackList.indexOf(propertyName) !== -1);
		},

		_getDontApplyProperties: function _getDontApplyProperties() {
			var dontApplyProperties = [];
			//Since the VIDA 2.10 change, VIDA is now treating color palettes like properties.
			//They are now included as part of the VIPRWidget properties.
			//Therefore, we dont want to override the palettes with the default value
			//Add them to the list of dontApplyProperties
			var colorPalettes = VIPRUtils.getPalettes(this.viprWidget.properties, this.visualization.getDefinition().getId());
			colorPalettes.forEach(function (palette) {
				if (palette.name !== 'colors.series') {
					//colors.series is marked in VIPRConfig to not set the default value
					dontApplyProperties.push(palette.name);
				}
			});
			return dontApplyProperties;
		},


		/**
  * Set the palette resolvers for the categorical and continuous palettes.
  */
		_applySavedNonSingleColorPalette: function _applySavedNonSingleColorPalette() {
			var _this16 = this;

			var promises = [];

			// Only apply the palettes associated with the current visualization.
			var possibleDataSlots = this.visualization.getSlots().getSlotList();
			VIPRUtils.getPalettes(this.viprWidget.properties, this.visualization.getDefinition().getId()).forEach(function (palette) {
				promises.push(_this16._getPaletteDescForPalette(palette, possibleDataSlots).then(function (paletteDef) {
					// Make sure there is avalid defintion for the palette type.
					if (paletteDef) {
						VIPRProperties.getInstance().setPaletteResolvers(palette, paletteDef, possibleDataSlots, _this16.visAPI.getFredIsRed());
					}
					return paletteDef;
				}));
			});

			return Promise.all(promises);
		},

		/**
  * Apply all palette properties relevant to the current visualization
  */
		_applySavedColorPalette: function _applySavedColorPalette() {
			var isThereSinglePalettes = VIPRUtils.getSinglePalettes(this.viprWidget.properties, this.visualization.getDefinition().getId()).length > 0;
			if (isThereSinglePalettes) {
				return this._applySavedSingleColorPalette();
			} else {
				return this._applySavedNonSingleColorPalette();
			}
		},

		/**
  * VIPR will optimize the size of a visualization when told (i.e. remove axis labels
  * when it thinks more space should be given to the visual elements). We want
  * to enable this be default or if we are showing small multiples. It should
  * only be disabled for upgraded content.
  */
		_setOptimizedSizeProperty: function _setOptimizedSizeProperty(visId) {
			var propertyId = 'optimizeSize';
			var defaultValue = this._getPropValueWhenSaving(visId, propertyId);
			if (!defaultValue) {
				// Do we have small multiple mapped slots?
				var aMultipliers = _.filter(this.visualization.getSlots().getMappedSlotList(), function (dataSlot) {
					return dataSlot.getDefinition().getProperty('multiplier') === true;
				});
				// If we have small multiple mapped slots then lets optimize.
				if (aMultipliers && aMultipliers.length > 0 || this.visAPI.isOptimizeForSize()) {
					defaultValue = true;
				}
			}
			var propInfo = {
				id: propertyId,
				value: defaultValue === undefined || defaultValue === null ? true : defaultValue // true by default
			};

			this.setProperty(propInfo);
		},

		/**
  * @return the default background color in hex
  */
		_getDefaultBackgroundColorInHex: function _getDefaultBackgroundColorInHex() {
			var defaultSpecColor = this.colorsService.getPropertyForUIElement('widget', 'backgroundColor').value;
			// The value may be equal to a simple hex or variable name or it may be an object which we have to dig into a little more.
			if (_.isObject(defaultSpecColor)) {
				defaultSpecColor = defaultSpecColor.color;
			}
			// I love themes and the theme definition object <insert sarcasm smirk here>. The color may come back
			// as a nice hex value or as a variable that needs to be mapped. If its a variable it will begin with
			// a '$' and we have to map it to get the hex value.
			if (defaultSpecColor.substring(0, 1) === '$') {
				defaultSpecColor = this.colorsService.getValueForVariable('Color', defaultSpecColor.substr(1));
			}
			// Ensure we have a valid hex value or transparent
			if (defaultSpecColor.substring(0, 1) === '#' && !isNaN(parseInt(defaultSpecColor.substr(1), 16)) || defaultSpecColor === 'transparent') {
				return defaultSpecColor;
			}
			return null;
		},

		/**
  * Set the background color of the viprwidget
  */
		_setBackgroundColor: function _setBackgroundColor() {
			var _this17 = this;

			if (this.highContrastEnabled) {
				//Clear background and foreground element colors in high-contrast mode and allow idvis to determine them.
				this.setProperty({
					id: 'backgroundColor',
					value: undefined
				});

				var fgElementProps = this.colorsService.getForegroundPropertiesForUIElement();
				var propMap = {};
				this.visModel.getDefinition().themeMapping.forEach(function (prop) {
					propMap[prop.id] = prop.mapping;
				});
				fgElementProps.forEach(function (prop) {
					if (propMap[prop.id]) {
						propMap[prop.id].forEach(function (mappedPropName) {
							_this17.setProperty({ id: mappedPropName, value: undefined });
						});
					} else {
						_this17.setProperty({ id: prop.id, value: undefined });
					}
				});
			} else {
				// Get the current fill color stored in our model
				var fillColor = this.visModel.ownerWidget.model.fillColor;
				var hexFillColor = void 0;

				if (fillColor) {
					// If there is a defined fill color its in the form of 'colorx', we need
					// it in the hex form. Get the hex value and set the property.
					hexFillColor = this.colorsService.getHexColorFromDashboardColorSet(fillColor);
				} else {
					// Get the default value and  set the property.
					hexFillColor = this._getDefaultBackgroundColorInHex();
				}

				var propInfo = {
					id: 'backgroundColor',
					value: hexFillColor
				};
				this.setProperty(propInfo);
			}
		},

		_getColorToSave: function _getColorToSave(savedValue, isCustomVis) {
			var colorToSave = void 0;
			if (_.isString(savedValue)) {
				if (this.colorsService.isCustomColor(savedValue)) {
					this.colorsService.addCustomColor(this.colorsService.getHexColorFromClassName(savedValue));
				}
				colorToSave = this.colorsService.getHexColorFromDashboardColorSet(savedValue);
			} else {
				if (isCustomVis) {
					savedValue = this.colorsService.makeSureColorIsValidInModel(savedValue);
				}
				colorToSave = savedValue;
			}
			return colorToSave;
		},


		/**
  * Apply the color set property of the specified property id
  * @param {String} visId - visualization type id
  * @param {String} propId - id of the color set property to set
  */
		_applyColorSetProperty: function _applyColorSetProperty(visId, propId, isCustomVis) {
			var savedValue = this._getPropValueWhenSaving(visId, propId);

			// Only apply the color if we have something saved
			if (savedValue) {
				var colorToSave = this._getColorToSave(savedValue, isCustomVis);
				// Put the information in a structure Vida understands
				var colorInfo = {
					id: propId,
					value: colorToSave
				};
				this.setProperty(colorInfo);
			}
		},


		/**
  * @param {String} visId - id of the current visualization.
  * @param {Array} properties - array of property names for the specified vis
  */
		_applyColorSetProperties: function _applyColorSetProperties(visId, properties, isCustomVis) {
			var _this18 = this;

			properties.forEach(function (propertyName) {
				var property = _this18.visModel.getPropertyById(propertyName);
				if (property && property.colorClass) {
					_this18._applyColorSetProperty(visId, propertyName, isCustomVis);
				}
			});
		},
		_getLengthPropWithPxUnit: function _getLengthPropWithPxUnit(value) {
			if (typeof value !== 'undefined' && value !== null) {
				return value && value.endsWith && value.endsWith('px') ? value : value + 'px';
			}
			return null;
		},


		_applyTargetMarkerThicknessProperties: function _applyTargetMarkerThicknessProperties(visId) {
			var targetThickness = this._getPropValueWhenSaving(visId, 'target.marker.thickness');
			if (VIPRProperties.getInstance().isTargetThicknessInputValid(targetThickness)) {
				var valueToSet = this._getLengthPropWithPxUnit(targetThickness);
				var targetThicknessInfo = {
					id: 'target.marker.thickness',
					value: valueToSet
				};
				this.setProperty(targetThicknessInfo);
			}
		},

		/**
  * Apply any saved layer transparencies.
  * Only applies to visualizations that support layers.
  */
		_applySavedLayerTransparencies: function _applySavedLayerTransparencies() {
			var configuration = VIPRConfig.getConfig(this.visAPI.getVisId());
			if (configuration && configuration.supportsLayers) {
				configuration.layerDescriptions.forEach(function (layerDesc) {
					var val = this.visModel.getPropertyValue(layerDesc.colorRelatedProps.transparencyProp);
					if (val !== undefined && val !== null) {
						// Can be false
						var propInfo = {
							id: layerDesc.colorRelatedProps.transparencyProp,
							value: val * 100 // Property is saved from 0.0 to 1.0, we want 0-100
						};
						this.setProperty(propInfo);
					}
				}.bind(this));
			}
		},

		/**
  * @returns true iff the value is not undefined.
  */
		_isPropValueValid: function _isPropValueValid(value, propDesc) {
			var isPropValidByDescCheck = propDesc.checkForValidValue ? propDesc.checkForValidValue(value) : true;
			return isPropValidByDescCheck && value !== undefined;
		},


		/**
  * @returns true if the prop is inactive, readonly and has a valid default value
  */
		_isValidReadOnlyProperty: function _isValidReadOnlyProperty(propDesc) {
			return propDesc && propDesc.isActive === false && propDesc.isReadOnly === true && this._isPropValueValid(propDesc.defaultValue, propDesc);
		},


		/**
  * So, Vida will provide us with defaults for value and default value among
  * other things. We need these for properties such as themeable props. One
  * thing we don't need is all the vida property methods that come alogn with
  * the property. So, we want to overide our model prop with wanted object
  * properties only. Note, calling this will actually override the property
  * in the model!
  * @param {String} propertyName - id of the property of interest.
  */
		overrideWithVidaProperty: function overrideWithVidaProperty(propertyName) {
			var modelProp = this.visModel.getPropertyById(propertyName);
			var vidaProp = this.viprWidget.properties.get(propertyName);
			if (vidaProp && modelProp) {
				// Should never happen but Vida is missing some deprecated props right now.
				var propsWeWantFromVidaProp = {
					active: vidaProp.active,
					caption: vidaProp.caption,
					defaultValue: vidaProp.defaultValue,
					description: vidaProp.description,
					name: vidaProp.name,
					type: vidaProp.type,
					possibleValues: vidaProp.possibleValues
				};
				if (modelProp.value !== undefined) {
					_.extend(propsWeWantFromVidaProp, { value: vidaProp.value });
				}
				_.defaults(modelProp, propsWeWantFromVidaProp);
			}
		},


		/**
  * When saving the values for a property it can be a little tricky. For example,
  * if you set the stacked parameter to false in an area chart and then change the
  * vis type to a stacked bar chart we still want it to stack. So, we should
  * check the property to see if its active. If it isn't then we have to do a
  * little priority checking.
  * @param {String} visId - bundle id
  * @param {String} propertyName - name of the property of interest
  * @returns value of the property to use when saving.
  */
		_getPropValueWhenSaving: function _getPropValueWhenSaving(visId, propertyName) {
			var result = null;
			var propDesc = VIPRUtils.getOverridenDefaultForProperty(visId, propertyName);

			/*
   * Do we have a readonly property (i.e. one that has a default and can't be
   * overriden by a user or programmatically)? If so, use the defaultValue
   */
			if (this._isValidReadOnlyProperty(propDesc)) {
				result = propDesc.defaultValue;
			} else {
				// Get any vida defaults we may need.
				this.overrideWithVidaProperty(propertyName);

				// Now we should look at the model. If there is a valid (non undefined) value there
				// use it, otherwise check for the defaultValue in the config.
				var modelValue = this.visModel.getPropertyValue(propertyName);
				if (this._isPropValueValid(modelValue, propDesc)) {
					result = modelValue;
				} else {
					result = propDesc.defaultValue;
				}
			}

			return result;
		},
		_registerListenerForPropChanges: function _registerListenerForPropChanges() {
			var _this19 = this;

			var listenForPropChanges = this.visAPI.getListenForPropChangesFromDefinition();
			if (listenForPropChanges) {
				_.each(listenForPropChanges, function (prop) {
					_this19.viprWidget.properties.get(prop).on('value', _this19._onViprPropValueChange.bind(_this19));
				});
				//should update the flag when there are actual listeners have been registered
				this.propChangeslistener = true;
			}
		},


		/**
  * When a visualization is about to be rendered we want to ensure that the
  * visualization properties are all set to the user overriden value, if any.
  */
		_applySavedModelProperties: function _applySavedModelProperties(renderInfo) {
			var _this20 = this;

			return this._applySavedColorPalette().then(function () {
				var visId = _this20.visAPI.getVisId();
				var configuration = VIPRConfig.getConfig(visId);
				var configInclude = configuration && configuration.config && configuration.config.include ? configuration.config.include : [];
				if (configuration && configuration.isCustomVis && configuration.bundleInclude) {
					configInclude = configuration.bundleInclude;
				}
				configInclude.forEach(function (propertyName) {
					_this20._setModelProperty(propertyName, visId);
				});
				_this20._applySavedLayerTransparencies();

				if (renderInfo && renderInfo.extraInfo && renderInfo.extraInfo.preserveDrawingBuffer === true) {
					_this20.setProperty({ id: 'webGL.preserveDrawingBuffer', value: true });
				} else {
					_this20.setProperty({ id: 'webGL.preserveDrawingBuffer', value: false });
				}
				// Now that the default value for optimize size is set, override it to what we really want.
				_this20._setOptimizedSizeProperty(visId);
				_this20._setBackgroundColor();
				_this20._applyEntryDurationProperty(renderInfo && renderInfo.extraInfo && renderInfo.extraInfo.entryDuration);
				_this20._applyTargetMarkerThicknessProperties(visId);
				// Apply all color set property values as denoted in VIPRConfig
				configuration && _this20._applyColorSetProperties(visId, configuration.config.include, configuration.isCustomVis);
			});
		},

		/**
  * @returns array of run time properties in a format usable by the properties panel.
  */
		getProperties: function getProperties() {
			var _this21 = this;

			return this.whenVisControlReady().then(function () {
				return VIPRProperties.getInstance().getProperties(_this21.viprWidget.properties, _this21.visualization.getSlots().getSlotList(), _this21.visualization.getDefinition().getId());
			}).then(function (properties) {
				//todo ???widget.getFeature? is it dead code??  livewidget_cleanup
				var propertiesFilter = _this21.visModel.ownerWidget.getFeature('visPropertiesFilter');
				return propertiesFilter ? propertiesFilter.filter(properties) : properties;
			});
		},

		getPropertyList: function getPropertyList() {
			return VIPRProperties.getInstance().getPropertyList(this.viprWidget.properties, this.visualization.getSlots().getSlotList(), this.content);
		},

		getPropertyLayoutList: function getPropertyLayoutList() {
			return VIPRProperties.getInstance().getPropertyLayoutList(this.viprWidget.properties, this.visualization.getSlots().getSlotList(), this.content, this.dashboard);
		},

		/**
   * When a theme changes we expect that all the models and their theme definitions have been
   * updated before we are notified. Then all we have to do is re-render.
   *
   * NOTE: Only Rave and VIPR Views have to do this as all other (current views) use css.
   */
		onChangeTheme: function onChangeTheme() {
			this.visModel.getRenderSequence().reRender();
		},

		/**
  * Set the specified property to the specified value
  * @param - info -> property of interest
  *	{
  *		id - property id,
  *		value - new value for the prop
  *	}
  */
		setProperty: function setProperty(info) {
			VIPRProperties.getInstance().setProperty(this.viprWidget, info);
		},

		/**
   * Generate thumbnail
   *
   * @param {Object} [options] - generate options
   * @param {Object} [options.size] - aspect ratio to generate
   * @param {number} [options.size.width=150] - aspect ratio width
   * @param {number} [options.size.height=100] - aspect ratio height
   * @param {string} [options.type=svg] - type of thumbnail to generate
   *
   * @return {Promise}
   */
		generateThumbnail: function generateThumbnail() {
			var _this22 = this;

			var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
			    _ref2$size = _ref2.size,
			    size = _ref2$size === undefined ? {} : _ref2$size,
			    _ref2$type = _ref2.type,
			    type = _ref2$type === undefined ? 'svg' : _ref2$type;

			var _getThumbnailConfig = this.getThumbnailConfig(),
			    _getThumbnailConfig$e = _getThumbnailConfig.enabled,
			    enabled = _getThumbnailConfig$e === undefined ? true : _getThumbnailConfig$e;

			var isMappingIncomplete = false;
			var isDisabled = !enabled;

			if (!this.isMappingComplete()) {
				isMappingIncomplete = true;
			}

			var promise = void 0;
			if (isDisabled || isMappingIncomplete) {
				promise = Promise.resolve();
			} else {
				var _getThumbnailConfig2 = this.getThumbnailConfig(),
				    configType = _getThumbnailConfig2.type,
				    _getThumbnailConfig2$ = _getThumbnailConfig2.properties,
				    configProperties = _getThumbnailConfig2$ === undefined ? {} : _getThumbnailConfig2$;

				var width = size.width,
				    height = size.height;


				if (configType) {
					type = configType;
				}

				var handler = this._createPredictHandler(VIPRCachedDataRequestHandler, this.predictHandler);

				promise = this.viprWidget.createHidden(width, height, type, true, IGNORED_THUMBNAIL_DECORATIONS, handler).then(function (_hiddenViprWidgetInstance) {

					var properties = Object.assign({}, DEFAULT_THUMBNAIL_PROPERTIES, configProperties);

					Object.keys(properties).forEach(function (key) {
						var value = properties[key];
						_hiddenViprWidgetInstance.setProperty(key, value);
					});

					return _hiddenViprWidgetInstance.render(type).then(function (_renderOperation) {
						var result = void 0;
						if (_renderOperation && _renderOperation.completed) {
							result = _this22.processThumbnailData(_renderOperation.data);
						}
						_hiddenViprWidgetInstance.destroy();
						return result;
					});
				});
			}

			return promise.then(function (thumbnail) {
				return {
					thumbnail: thumbnail,
					isMappingIncomplete: isMappingIncomplete,
					isDisabled: isDisabled
				};
			});
		},

		processThumbnailData: function processThumbnailData(data) {
			var _this23 = this;

			var result = void 0;
			if (data instanceof Blob) {
				result = new Promise(function (resolve, reject) {
					try {
						var reader = new FileReader();
						var altThumbnailImage = stringResources.get('loadedThumbnailImage', { visType: _this23.visModel.getDefinition().label });
						reader.addEventListener('loadend', function () {
							resolve('<img src="' + reader.result + '" alt="' + altThumbnailImage + '"></img>');
						});
						reader.readAsDataURL(data);
					} catch (error) {
						reject(error);
					}
				});
			} else {
				result = Promise.resolve(data);
			}
			return result;
		},

		/**
   * Thumbnail config
   *
   * @return {Object} thumbnail config
   */
		getThumbnailConfig: function getThumbnailConfig() {
			var _ref3 = VIPRConfig.getConfig(this.visAPI.getVisId()) || {},
			    _ref3$thumbnail = _ref3.thumbnail,
			    thumbnail = _ref3$thumbnail === undefined ? {} : _ref3$thumbnail;

			return thumbnail;
		},

		_isSmartTitleEnabled: function _isSmartTitleEnabled() {
			var featureChecker = this.dashboard && this.dashboard.getGlassCoreSvc('.FeatureChecker');
			if (featureChecker && featureChecker.checkValue) {
				return !featureChecker.checkValue('dashboard', 'SmartTitle', 'disabled');
			}
			return false;
		},

		/**
   * check if vipr widget is valid (its id does not exists in the destroyed widgets array)
   *
   * @return {Boolean} True, if valid, False otherwise
   */
		_isViprWidgetValid: function _isViprWidgetValid() {
			var _this24 = this;

			return !this._deferredDestroyViprWidgetsList.find(function (widget) {
				return widget.id === _this24.viprWidget.id;
			});
		}
	});

	return VIPRView;
});
//# sourceMappingURL=VIPRView.js.map