analytics/webcontent/bi/js/dashboard-analytics/visualizationPanel/VisualizationPanelView.js

'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2019, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['../lib/@waca/core-client/js/core-client/ui/core/View', '../lib/@waca/core-client/js/core-client/ui/KeyCodes', '../widgets/livewidget/nls/StringResources', '../visualizations/vipr/VIPRConfig', '../visualizations/vipr/extendedVis/SchematicVis', '../util/VidaSdkUtil', 'text!./templates/LoadingIndicator.html', 'underscore', 'jquery', 'doT', 'react', 'react-dom', 'prop-types', 'ca-ui-toolkit', './components/VisualizationContentContainer', './components/custom/CustomPanelContainer', './components/util/CustomVisAction', 'hammerjs', 'jquery.hammer'], function (View, KeyCodes, StringResources, VIPRConfig, SchematicVis, VidaSdkUtil, LoadingIndicatorTemplate, _, $, dot, React, ReactDOM, PropTypes, UI_Toolkit, VisualizationContentContainer, CustomPanelContainer, CustomVisAction) {
	var Component = React.Component;
	var Container = UI_Toolkit.Container,
	    ProgressIndicator = UI_Toolkit.ProgressIndicator;
	var Tabs = UI_Toolkit.Tabs,
	    TabPanel = UI_Toolkit.TabPanel,
	    VSpacer = UI_Toolkit.VSpacer,
	    Label = UI_Toolkit.Label,
	    FlexLayout = UI_Toolkit.FlexLayout,
	    FlexItem = UI_Toolkit.FlexItem;


	var DEFAULT_SELECTED_TAB = 'System';

	var VisualizationTabs = function (_Component) {
		_inherits(VisualizationTabs, _Component);

		function VisualizationTabs() {
			_classCallCheck(this, VisualizationTabs);

			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
				args[_key] = arguments[_key];
			}

			var _this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args)));

			_this.state = {
				selectedTab: _this.props.selectedTab,
				isRefreshing: false,
				deleteable: false,
				editable: false,
				addable: false,
				align: 'center',
				tabs: _this.props
			};
			return _this;
		}

		VisualizationTabs.prototype.render = function render() {
			var panels = this._renderTabPanels();
			var tabsClassNames = panels.length === 1 ? 'vis-panel-tabs hide-tabs' : 'vis-panel-tabs';
			return React.createElement(
				Container,
				{ className: 'vis-panel-container' },
				React.createElement(VSpacer, { size: 2 }),
				React.createElement(Label, { className: 'vis-panel-banner', label: StringResources.get('visualizationSlideoutTitle') }),
				React.createElement(VSpacer, { size: 2 }),
				React.createElement(
					Tabs,
					{ className: tabsClassNames,
						selected: this.state.selectedTab,
						onChange: this.onChange.bind(this)
					},
					panels
				)
			);
		};

		VisualizationTabs.prototype._renderTabPanels = function _renderTabPanels() {
			var panels = [];
			panels.push(React.createElement(
				TabPanel,
				{
					id: DEFAULT_SELECTED_TAB,
					label: StringResources.get('extVisSystem')
				},
				React.createElement(VisualizationContentContainer, {
					containerClass: 'vis-system-container',
					itemClass: 'prop-item',
					items: this.props.tabs.system.items,
					handlers: this.props.tabs.handlers
				})
			));

			var customVisAction = this.props.customVisAction;

			if (customVisAction.isEnabled()) {
				panels.push(React.createElement(
					TabPanel,
					{
						id: 'Custom',
						label: StringResources.get('extVisCustom')
					},
					this._renderCustomPanelContainer()
				));
			}
			return panels;
		};

		VisualizationTabs.prototype.onChange = function onChange(tabId) {
			var _this2 = this;

			var customVisAction = this.props.customVisAction;

			var isRefreshing = customVisAction.shouldRefreshCustomPanel() && tabId === 'Custom';

			this.setState({
				selectedTab: tabId,
				isRefreshing: isRefreshing
			});

			if (isRefreshing) {
				return customVisAction.refreshCustomVis(true).then(function () {
					var tabs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

					_this2.setState({
						tabs: tabs,
						isRefreshing: false
					});
				});
			}
		};

		VisualizationTabs.prototype._renderProgressIndicator = function _renderProgressIndicator() {
			return React.createElement(
				FlexLayout,
				{
					fullHeight: true,
					direction: 'column',
					justifyContent: 'center',
					width: '100%',
					height: '100%'
				},
				React.createElement(
					FlexItem,
					{ alignSelf: 'center' },
					React.createElement(ProgressIndicator, null)
				)
			);
		};

		VisualizationTabs.prototype._renderCustomPanelContainer = function _renderCustomPanelContainer() {
			var _props = this.props,
			    dashboardApi = _props.dashboardApi,
			    customVisAction = _props.customVisAction,
			    tabs = _props.tabs;
			var isRefreshing = this.state.isRefreshing;


			return React.createElement(CustomPanelContainer, {
				custom: tabs.custom,
				handlers: tabs.handlers,
				dashboardApi: dashboardApi,
				customVisAction: customVisAction,
				isRefreshing: isRefreshing
			});
		};

		return VisualizationTabs;
	}(Component);

	VisualizationTabs.propTypes = {
		tabs: PropTypes.object.isRequired,
		dashboardApi: PropTypes.object.isRequired,
		selectedTab: PropTypes.string.isRequired,
		customVisAction: PropTypes.object.isRequired
	};

	VisualizationTabs.defaultProps = {
		selectedTab: DEFAULT_SELECTED_TAB,
		isRefreshing: false
	};

	var SKD_VIS_PREVIEW = 'visualizationPreview';
	var CUS_VIS_SCHEMATIC_PREVIEW = 'com.ibm.vis.schematicsPreview';

	var _geVisItemSelector = function _geVisItemSelector(classSelectors) {
		return _.chain(classSelectors).map(function (selector) {
			return '.' + selector;
		}).value().join(' ');
	};

	return function (_View) {
		_inherits(VisualizationPanelView, _View);

		function VisualizationPanelView() {
			_classCallCheck(this, VisualizationPanelView);

			for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
				args[_key2] = arguments[_key2];
			}

			var _this3 = _possibleConstructorReturn(this, _View.call.apply(_View, [this].concat(args)));

			var options = args[0];

			if (!options.getEntries) {
				var _ret;

				return _ret = Promise.reject('Invalid getEntries api provided'), _possibleConstructorReturn(_this3, _ret);
			}
			_this3.getEntries = options.getEntries;
			_this3.selectedTab = options.selectedTab || DEFAULT_SELECTED_TAB;
			_this3.dashboardApi = options.dashboardApi;
			_this3.dndManager = _this3.dashboardApi.getFeature('DashboardDnd.internal');
			_this3.loadingIndicatorTemplate = dot.template(LoadingIndicatorTemplate || '');
			_this3.customVisAction = new CustomVisAction({
				dashboardApi: _this3.dashboardApi,
				refreshCustomVis: _this3._refreshCustomVisDefinitions.bind(_this3)
			});
			_this3._createViewStates();
			return _this3;
		}

		VisualizationPanelView.prototype.init = function init() {
			var _View$prototype$init;

			this.events = {
				'clicktap .vis-panel-container .prop-item:not(.is-disabled)': '_onItemClick',
				'mousedown .vis-panel-container .prop-item:not(.is-disabled)': '_onItemMouseDownStartDrag',
				'keydown .vis-panel-container .prop-item:not(.is-disabled)': '_onItemKeyDown'
			};

			for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
				args[_key3] = arguments[_key3];
			}

			(_View$prototype$init = _View.prototype.init).call.apply(_View$prototype$init, [this].concat(args));
		};

		VisualizationPanelView.prototype.remove = function remove() {
			var _View$prototype$remov;

			if (this._dropZone) {
				this._dropZone.remove();
				this._dropZone = null;
			}
			this.dndManager = null;
			this.customVisAction.destroy();
			this.customVisAction = null;
			ReactDOM.unmountComponentAtNode(this.$el[0]);

			for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
				args[_key4] = arguments[_key4];
			}

			(_View$prototype$remov = _View.prototype.remove).call.apply(_View$prototype$remov, [this].concat(args));
		};

		VisualizationPanelView.prototype.render = function render() {
			var _this4 = this;

			this._showLoadingIndicator();

			return this.getEntries().then(function (data) {
				_this4.items = data.items;
				_this4.options = data.options;
				return _this4._separateVisBaseOnFunctionality(data.items);
			}).then(function () {

				_this4.viewState.handlers = {
					componentDidMountCallback: _this4._componentDidMountCallback.bind(_this4),
					componentWillUnmountCallback: _this4._componentWillUnmountCallback.bind(_this4),
					refreshCustomVisDefinitions: _this4._refreshCustomVisDefinitions.bind(_this4),
					isSchematicType: _this4.isSchematicType.bind(_this4),
					isSDKActive: _this4._isSDKActive.bind(_this4),
					isSchematicTypePreview: _this4.isSchematicTypePreview.bind(_this4)
				};

				ReactDOM.render(React.createElement(VisualizationTabs, {
					tabs: _this4.viewState,
					dashboardApi: _this4.dashboardApi,
					selectedTab: _this4.selectedTab,
					customVisAction: _this4.customVisAction
				}), _this4.$el[0]);
			}).finally(function () {
				_this4._hideLoadingIndicator();
				_this4._dropZone = _this4.dndManager.addDropTarget(_this4.$el[0], { accepts: _this4._accepts.bind(_this4) });
			});
		};

		VisualizationPanelView.prototype._createViewStates = function _createViewStates() {
			this.viewState = {
				system: {
					items: []
				},
				custom: {
					preview: {
						previewItems: []
					},
					visuals: {
						items: []
					}
				}
			};
		};

		VisualizationPanelView.prototype._showLoadingIndicator = function _showLoadingIndicator() {
			this.$el.append(this.loadingIndicatorTemplate({}));
			this.loadingIndicatorContainer = this.$el.find('.loadingIndicatorContainer');
			this.loadingIndicator = this.loadingIndicatorContainer.find('.loading_indicator');
			ReactDOM.render(React.createElement(ProgressIndicator, null), this.loadingIndicator.get(0));
		};

		VisualizationPanelView.prototype._hideLoadingIndicator = function _hideLoadingIndicator() {
			if (this.loadingIndicatorContainer) {
				this.loadingIndicatorContainer.remove();
				this.loadingIndicatorContainer = null;
				ReactDOM.unmountComponentAtNode(this.loadingIndicator.get(0));
			}
		};

		VisualizationPanelView.prototype._accepts = function _accepts() {
			return true;
		};

		VisualizationPanelView.prototype._componentDidMountCallback = function _componentDidMountCallback(containerSelector, visItemSelector, $node) {
			var _this5 = this;

			if ($node instanceof $) {
				$node.hammer();
				$node.on('hold', this._onItemHoldAndStartDrag.bind(this));
			} else {
				var selector = _geVisItemSelector([containerSelector, visItemSelector]);
				var $items = this.$el.find(selector);
				_.each($items, function (item) {
					var $item = $(item);
					$item.hammer();
					$item.on('hold', _this5._onItemHoldAndStartDrag.bind(_this5));
				});
			}
		};

		VisualizationPanelView.prototype._componentWillUnmountCallback = function _componentWillUnmountCallback(containerSelector, visItemSelector, $node) {
			var _this6 = this;

			if ($node instanceof $) {
				$node.off('hold', this._onItemHoldAndStartDrag.bind(this));
			} else {
				var selector = _geVisItemSelector([containerSelector, visItemSelector]);
				var $items = this.$el.find(selector);
				_.each($items, function (item) {
					var $item = $(item);
					$item.off('hold', _this6._onItemHoldAndStartDrag.bind(_this6));
				});
			}
		};

		VisualizationPanelView.prototype._refreshCustomVisDefinitions = function _refreshCustomVisDefinitions() {
			var _this7 = this;

			var freshAll = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

			if (!this.getEntries) {
				return Promise.reject('Invalid getEntries api provided');
			}

			var visDefinitionAPI = this.dashboardApi.getFeature('VisDefinitions');
			if (!this._refreshPromise) {
				this._refreshPromise = visDefinitionAPI.refresh().then(this.getEntries.bind(this)).then(function () {
					var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

					var items = data.items || [];
					_this7.items = items;
					return _this7._separateVisBaseOnFunctionality(items);
				}).then(function () {
					_this7._refreshPromise = null;
					return freshAll ? _this7.viewState : _this7.viewState.custom.visuals.items;
				}).catch(function (err) {
					_this7._refreshPromise = null;
					throw err;
				});
			}
			return this._refreshPromise;
		};

		VisualizationPanelView.prototype._isSDKActive = function _isSDKActive() {
			var _this8 = this;

			if (!this._sdkPromise) {
				this._sdkPromise = VidaSdkUtil.isSDKActive(this.dashboardApi).then(function (sdkIsActive) {
					if (sdkIsActive) {
						if (_this8._refreshPromise) {
							// prevent multiple refreshes from happening at the same time.
							return _this8._refreshPromise.then(_this8._refreshCustomVisDefinitions.bind(_this8, true));
						} else {
							return _this8._refreshCustomVisDefinitions(true);
						}
					} else {
						throw new Error('SDK is not active');
					}
				}).then(function () {
					_this8._sdkPromise = null;
					return true;
				}).catch(function () {
					_this8._sdkPromise = null;
					return false;
				});
			}
			return this._sdkPromise;
		};

		VisualizationPanelView.prototype._separateVisBaseOnFunctionality = function _separateVisBaseOnFunctionality() {
			var _this9 = this;

			var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

			var customPreviewVis = [];
			var customExtVis = [];
			var systemVis = this.viewState.system.items = [];
			var schematicBundles = [];

			var visPreview = void 0;
			var svgPreview = void 0;

			var CustomVisual_32 = this.dashboardApi.getFeature('Icons').getIcon('customVisual');

			items.forEach(function (item) {
				var bundle = VIPRConfig.getConfig(item.name);
				var isCustomVis = bundle && bundle.isCustomVis;
				var isSchematic = bundle && bundle.isSchematic;
				if (item.name === SKD_VIS_PREVIEW) {
					visPreview = item;
				} else if (item.name === CUS_VIS_SCHEMATIC_PREVIEW) {
					svgPreview = item;
				} else if (isCustomVis) {
					if (!item.icon) {
						//Default to generic icon
						item.icon = CustomVisual_32.id;
					}
					item.isCustomVis = isCustomVis;
					customExtVis.push(item);
				} else if (isSchematic) {
					item.isSchematic = isSchematic;
					schematicBundles.push({
						item: item,
						bundle: bundle
					});
				} else {
					systemVis.push(item);
				}
			});

			// Add visualizationPreview first
			if (visPreview) {
				customPreviewVis.push(visPreview);
			} else {
				//add a dummy visPreview just in case the user has develop permission but SDK is not running
				customPreviewVis.push({
					name: 'visualizationPreview',
					label: StringResources.get('customVisTestVisualization')
				});
			}

			//Add SVG preview second
			if (svgPreview) {
				customPreviewVis.push(svgPreview);
			}

			return this._getSchematicSVGContext(schematicBundles).then(function () {
				_this9.viewState.custom.preview.previewItems = customPreviewVis;
				var schematicItems = schematicBundles.map(function (bundle) {
					return bundle.item;
				});
				_this9.viewState.custom.visuals.items = _.sortBy([].concat(customExtVis, schematicItems), function (item) {
					return item.label;
				});
			});
		};

		VisualizationPanelView.prototype._getSchematicSVGContext = function _getSchematicSVGContext() {
			var _this10 = this;

			var schematicBundles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

			var promises = [];
			schematicBundles.forEach(function (schematic) {
				var payload = {
					method: 'get',
					type: 'meta',
					library: schematic.bundle.id
				};
				promises.push(schematic.bundle.schematicVis.getSchematicContent(payload, _this10.dashboardApi));
			});
			return Promise.all(promises).then(function () {
				var responses = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

				responses.forEach(function (response, idx) {
					var bundle = schematicBundles[idx];
					var metadata = JSON.parse(response) || {};
					var content = metadata.content || [];
					bundle.item.numSVGs = content.length;
					if (bundle.bundle.icon) {
						bundle.item.placeholderIcon = bundle.bundle.placeholderIcon + SchematicVis.cleanseFilename(bundle.bundle.icon);
					} else {
						var SchematicVisual_32 = _this10.dashboardApi.getFeature('Icons').getIcon('schematicVisual');
						bundle.item.icon = SchematicVisual_32.id;
					}
				});
			});
		};

		VisualizationPanelView.prototype._getEntry = function _getEntry(event) {
			var $node = $(event.target);
			var $target = $node.closest('.prop-item');
			var targetName = $target.data('name');
			var targetItem = this.items.find(function (item) {
				return item.name === targetName;
			});

			//The content contains the svg that only gets use for Drag and Drop
			return targetItem.content;
		};

		VisualizationPanelView.prototype._onItemKeyDown = function _onItemKeyDown(event) {
			if (event.keyCode === KeyCodes.ENTER || event.keyCode === KeyCodes.SPACE) {
				this._onItemClick(event);
			}
		};

		VisualizationPanelView.prototype._onItemClick = function _onItemClick(event) {
			var currentTarget = event.currentTarget;
			if ($.data(currentTarget, '_clickEventReceived') !== true) {
				// Guard against adding two widgets at once during a double click.
				$.data(currentTarget, '_clickEventReceived', true);
				setTimeout(function () {
					$.data(currentTarget, '_clickEventReceived', false);
				}, 500);
				if (this.options.onItemClick) {
					var entry = this._getEntry(event);
					this.options.onItemClick(entry, event);

					if (event && event.gesture) {
						event.gesture.preventDefault();
					}
				}
			}
		};

		VisualizationPanelView.prototype._onStartDrag = function _onStartDrag(event) {
			if (this.options.onItemStartDrag) {
				if (event.preventDefault) {
					// prevent default drag behavior
					event.preventDefault();
				}
				var entry = this._getEntry(event);
				this.options.onItemStartDrag(entry, event);
			}
		};

		VisualizationPanelView.prototype._onItemHoldAndStartDrag = function _onItemHoldAndStartDrag(event) {
			event.showAvatarImmediately = true;
			this._onStartDrag(event);
		};

		VisualizationPanelView.prototype._onItemMouseDownStartDrag = function _onItemMouseDownStartDrag(event) {
			this._onStartDrag(event);
		};

		VisualizationPanelView.prototype.isSchematicType = function isSchematicType() {
			var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			return item.name === CUS_VIS_SCHEMATIC_PREVIEW || item.isSchematic;
		};

		VisualizationPanelView.prototype.isSchematicTypePreview = function isSchematicTypePreview() {
			var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

			return item.name === CUS_VIS_SCHEMATIC_PREVIEW;
		};

		return VisualizationPanelView;
	}(View);
});
//# sourceMappingURL=VisualizationPanelView.js.map