define([ "require", "backbone", "hbs!tmpl/graph/LineageLayoutView_tmpl", "collection/VLineageList", "models/VEntity", "utils/Utils", "LineageHelper", "d3", "dagreD3", "d3-tip", "utils/Enums", "utils/UrlLinks", "utils/Globals", "utils/CommonViewFunction", "platform", "jquery-ui" ], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, LineageHelper, d3, dagreD3, d3Tip, Enums, UrlLinks, Globals, CommonViewFunction, platform) { "use strict"; var LineageLayoutView = Backbone.Marionette.LayoutView.extend({ _viewName: "LineageLayoutView", template: LineageLayoutViewtmpl, className: "resizeGraph", regions: {}, ui: { graph: ".graph", checkHideProcess: "[data-id='checkHideProcess']", checkDeletedEntity: "[data-id='checkDeletedEntity']", selectDepth: 'select[data-id="selectDepth"]', filterToggler: '[data-id="filter-toggler"]', settingToggler: '[data-id="setting-toggler"]', searchToggler: '[data-id="search-toggler"]', boxClose: '[data-id="box-close"]', lineageFullscreenToggler: '[data-id="fullScreen-toggler"]', filterBox: ".filter-box", searchBox: ".search-box", settingBox: ".setting-box", lineageTypeSearch: '[data-id="typeSearch"]', searchNode: '[data-id="searchNode"]', nodeDetailTable: '[data-id="nodeDetailTable"]', showOnlyHoverPath: '[data-id="showOnlyHoverPath"]', showTooltip: '[data-id="showTooltip"]', saveSvg: '[data-id="saveSvg"]', resetLineage: '[data-id="resetLineage"]', onZoomIn: '[data-id="zoom-in"]', labelFullName: '[data-id="labelFullName"]', onZoomOut: '[data-id="zoom-out"]' }, templateHelpers: function() { return { width: "100%", height: "100%" }; }, events: function() { var events = {}; return events["click " + this.ui.checkHideProcess] = "onCheckUnwantedEntity", events["click " + this.ui.checkDeletedEntity] = "onCheckUnwantedEntity", events["change " + this.ui.selectDepth] = "onSelectDepthChange", events["click " + this.ui.filterToggler] = "onClickFilterToggler", events["click " + this.ui.boxClose] = "toggleBoxPanel", events["click " + this.ui.settingToggler] = "onClickSettingToggler", events["click " + this.ui.lineageFullscreenToggler] = "onClickLineageFullscreenToggler", events["click " + this.ui.searchToggler] = "onClickSearchToggler", events["click " + this.ui.saveSvg] = "onClickSaveSvg", events["click " + this.ui.resetLineage] = "onClickResetLineage", events["click " + this.ui.onZoomIn] = "onClickZoomIn", events["click " + this.ui.onZoomOut] = "onClickZoomOut", events["change " + this.ui.labelFullName] = "onClickLabelFullName", events; }, initialize: function(options) { _.extend(this, _.pick(options, "processCheck", "guid", "entity", "entityName", "entityDefCollection", "actionCallBack", "fetchCollection", "attributeDefs")), this.collection = new VLineageList(), this.typeMap = {}, this.apiGuid = {}, this.edgeCall, this.filterObj = { isProcessHideCheck: !1, isDeletedEntityHideCheck: !1, depthCount: "" }, this.searchNodeObj = { selectedNode: "" }, this.labelFullText = !1; }, onRender: function() { this.ui.searchToggler.prop("disabled", !0), this.$graphButtonsEl = this.$(".graph-button-group button, select[data-id='selectDepth']"), this.fetchGraphData(), this.layoutRendered && this.layoutRendered(), this.processCheck && this.hideCheckForProcess(), this.ui.selectDepth.select2({ data: _.sortBy([ 3, 6, 9, 12, 15, 18, 21 ]), tags: !0, dropdownCssClass: "number-input", multiple: !1 }); }, onShow: function() { this.$(".fontLoader").show(); }, onClickLineageFullscreenToggler: function(e) { var icon = $(e.currentTarget).find("i"), panel = $(e.target).parents(".tab-pane").first(); icon.toggleClass("fa-expand fa-compress"), icon.hasClass("fa-expand") ? icon.parent("button").attr("data-original-title", "Full Screen") : icon.parent("button").attr("data-original-title", "Default View"), panel.toggleClass("fullscreen-mode"); var node = this.$("svg").parent()[0].getBoundingClientRect(); this.LineageHelperRef.updateOptions({ width: node.width, height: node.height }), this.calculateLineageDetailPanelHeight(); }, onCheckUnwantedEntity: function(e) { "checkHideProcess" === $(e.target).data("id") ? this.filterObj.isProcessHideCheck = e.target.checked : this.filterObj.isDeletedEntityHideCheck = e.target.checked, this.LineageHelperRef.refresh(); }, toggleBoxPanel: function(options) { var el = options && options.el; options && options.nodeDetailToggler, options.currentTarget; this.$el.find(".show-box-panel").removeClass("show-box-panel"), el && el.addClass && el.addClass("show-box-panel"), this.$("circle.node-detail-highlight").removeClass("node-detail-highlight"); }, toggleLoader: function(element) { element.hasClass("fa-camera") ? element.removeClass("fa-camera").addClass("fa-spin-custom fa-refresh") : element.removeClass("fa-spin-custom fa-refresh").addClass("fa-camera"); }, toggleDisableState: function(options) { var el = options.el, disabled = options.disabled; el && el.prop && (disabled ? el.prop("disabled", disabled) : el.prop("disabled", !el.prop("disabled"))); }, onClickNodeToggler: function(options) { this.toggleBoxPanel({ el: this.$(".lineage-node-detail"), nodeDetailToggler: !0 }); }, onClickFilterToggler: function() { this.toggleBoxPanel({ el: this.ui.filterBox }); }, onClickSettingToggler: function() { this.toggleBoxPanel({ el: this.ui.settingBox }); }, onClickSearchToggler: function() { this.toggleBoxPanel({ el: this.ui.searchBox }); }, onSelectDepthChange: function(e, options) { this.filterObj.depthCount = e.currentTarget.value, this.fetchGraphData({ queryParam: { depth: this.filterObj.depthCount }, legends: !1 }); }, onClickResetLineage: function() { this.LineageHelperRef.refresh(), this.searchNodeObj.selectedNode = "", this.ui.lineageTypeSearch.data({ refresh: !0 }).val("").trigger("change"), this.ui.labelFullName.prop("checked", !1), this.labelFullText = !1; }, onClickSaveSvg: function(e, a) { var that = this; return that.lineageRelationshipLength >= 1e3 ? void Utils.notifyInfo({ content: "There was an error in downloading lineage: Lineage exceeds display parameters!" }) : void this.LineageHelperRef.exportLineage(); }, onClickZoomIn: function() { this.LineageHelperRef.zoomIn(); }, onClickZoomOut: function() { this.LineageHelperRef.zoomOut(); }, onClickLabelFullName: function() { this.labelFullText = !this.labelFullText, this.LineageHelperRef.displayFullName({ bLabelFullText: this.labelFullText }); }, fetchGraphData: function(options) { var that = this, queryParam = options && options.queryParam || {}; this.$(".fontLoader").show(), this.$("svg>g").hide(), this.toggleDisableState({ el: that.$graphButtonsEl, disabled: !0 }), this.collection.getLineage(this.guid, { queryParam: queryParam, success: function(data) { if (!that.isDestroyed) { data.legends = !options || options.legends; var relationsReverse = data.relations ? data.relations.reverse() : null, lineageMaxRelationCount = 9e3; relationsReverse.length > lineageMaxRelationCount && (data.relations = relationsReverse.splice(relationsReverse.length - lineageMaxRelationCount, relationsReverse.length - 1), Utils.notifyInfo({ content: "Lineage exceeds display parameters and hence only upto 9000 relationships from this lineage can be displayed" })), that.lineageRelationshipLength = data.relations.length, that.createGraph(data), that.renderLineageTypeSearch(data); } }, cust_error: function(model, response) { that.noLineage(); }, complete: function() { that.$(".fontLoader").hide(), that.$("svg>g").show(); } }); }, createGraph: function(data) { var that = this; $(".resizeGraph").css("height", this.$(".svg").height() + "px"), this.LineageHelperRef = new LineageHelper.default({ entityDefCollection: this.entityDefCollection.fullCollection.toJSON(), data: data, el: this.$(".svg")[0], legendsEl: this.$(".legends")[0], legends: data.legends, getFilterObj: function() { return { isProcessHideCheck: that.filterObj.isProcessHideCheck, isDeletedEntityHideCheck: that.filterObj.isDeletedEntityHideCheck }; }, isShowHoverPath: function() { return that.ui.showOnlyHoverPath.prop("checked"); }, isShowTooltip: function() { return that.ui.showTooltip.prop("checked"); }, onPathClick: function(d) { if (console.log("Path Clicked"), d.pathRelationObj) { var relationshipId = d.pathRelationObj.relationshipId; require([ "views/graph/PropagationPropertyModal" ], function(PropagationPropertyModal) { new PropagationPropertyModal({ edgeInfo: d.pathRelationObj, relationshipId: relationshipId, lineageData: data, apiGuid: that.apiGuid, detailPageFetchCollection: that.fetchCollection }); }); } }, onNodeClick: function(d) { that.onClickNodeToggler(), that.updateRelationshipDetails({ guid: d.clickedData }), that.calculateLineageDetailPanelHeight(); }, onLabelClick: function(d) { var guid = d.clickedData; that.guid == guid ? Utils.notifyInfo({ html: !0, content: "You are already on " + that.entityName + " detail page." }) : Utils.setUrl({ url: "#!/detailPage/" + guid + "?tabActive=lineage", mergeBrowserUrl: !1, trigger: !0 }); }, beforeRender: function() { that.$(".fontLoader").show(), that.toggleDisableState({ el: that.$graphButtonsEl, disabled: !0 }); }, afterRender: function() { that.$(".fontLoader").hide(), data.relations.length && that.toggleDisableState({ el: that.$graphButtonsEl, disabled: !1 }); } }); }, noLineage: function() { this.$(".fontLoader").hide(), this.$(".depth-container").hide(), this.$("svg").html('No lineage data found'), this.actionCallBack && this.actionCallBack(); }, hideCheckForProcess: function() { this.$(".hideProcessContainer").hide(); }, renderLineageTypeSearch: function(data) { var that = this; return new Promise(function(resolve, reject) { try { var typeStr = ""; _.isEmpty(data) || _.each(data.guidEntityMap, function(obj, index) { var nodeData = that.LineageHelperRef.getNode(obj.guid); (that.filterObj.isProcessHideCheck || that.filterObj.isDeletedEntityHideCheck) && nodeData && (nodeData.isProcess || nodeData.isDeleted) || (typeStr += '"); }), that.ui.lineageTypeSearch.html(typeStr), that.initilizelineageTypeSearch(), resolve(); } catch (e) { console.log(e), reject(e); } }); }, initilizelineageTypeSearch: function() { var that = this; this.ui.lineageTypeSearch.select2({ closeOnSelect: !0, placeholder: "Select Node" }).on("change.select2", function(e) { if (e.stopPropagation(), e.stopImmediatePropagation(), that.ui.lineageTypeSearch.data("refresh")) that.ui.lineageTypeSearch.data("refresh", !1); else { var selectedNode = $('[data-id="typeSearch"]').val(); that.searchNodeObj.selectedNode = selectedNode, that.LineageHelperRef.searchNode({ guid: selectedNode }); } }), this.searchNodeObj.selectedNode && (this.ui.lineageTypeSearch.val(this.searchNodeObj.selectedNode), this.ui.lineageTypeSearch.trigger("change.select2")); }, updateRelationshipDetails: function(options) { var that = this, guid = options.guid, initialData = that.LineageHelperRef.getNode(guid); if (void 0 !== initialData) { var typeName = initialData.typeName || guid, attributeDefs = initialData && initialData.entityDef ? initialData.entityDef.attributeDefs : null; this.$("[data-id='typeName']").text(typeName), this.entityModel = new VEntity({}); var config = { guid: "guid", typeName: "typeName", name: "name", qualifiedName: "qualifiedName", owner: "owner", createTime: "createTime", status: "status", classificationNames: "classifications", meanings: "term" }, data = {}; _.each(config, function(valKey, key) { var val = initialData[key]; _.isUndefined(val) && initialData.attributes && initialData.attributes[key] && (val = initialData.attributes[key]), val && (data[valKey] = val); }), this.ui.nodeDetailTable.html(CommonViewFunction.propertyTable({ scope: this, valueObject: data, attributeDefs: attributeDefs, sortBy: !1 })); } }, calculateLineageDetailPanelHeight: function() { var $parentContainer = $("#tab-lineage .resizeGraph"), $panel = $parentContainer.find(".fix-box"), $parentHeight = $parentContainer.find(".fix-box, tbody").removeAttr("style").height() - 48, $tBody = $panel.find("tbody"), panelHeight = $tBody.height() + 100; $parentHeight < panelHeight && (panelHeight = $parentHeight), $panel.css("height", panelHeight + "px"), $tBody.css("height", "100%"); } }); return LineageLayoutView; });