Skip to content

A
atlas
Commit 1cb155a2 by kevalbhatt Committed by Sarath Subramanian
Options

ATLAS-3059: UI : Lineage data structure change to support hide deleted and hide…

ATLAS-3059: UI : Lineage data structure change to support hide deleted and hide process entities to gather Signed-off-by: 's avatarSarath Subramanian <ssubramanian@hortonworks.com>
parent fe22a652
Showing with 386 additions and 199 deletions
dashboardv2/public/css/scss/graph.scss
...@@ -34,6 +34,8 @@ ...@@ -34,6 +34,8 @@
font-family: $font_1; font-family: $font_1;
} }
transition: opacity 0.3s linear;
rect { rect {
stroke: $color_mountain_mist_approx; stroke: $color_mountain_mist_approx;
fill: $white; fill: $white;
...@@ -279,8 +281,7 @@ g.type-TK>rect { ...@@ -279,8 +281,7 @@ g.type-TK>rect {
.zoom-button-group {} .zoom-button-group {}
} }
.lineage-fltr-panel, .box-panel {
.lineage-search-panel {
position: absolute; position: absolute;
top: 45px; top: 45px;
border: 1px solid #ccc; border: 1px solid #ccc;
...@@ -417,7 +418,8 @@ g.type-TK>rect { ...@@ -417,7 +418,8 @@ g.type-TK>rect {
} }
.show-filter-panel, .show-filter-panel,
.show-search-panel { .show-search-panel,
.show-box-panel {
right: 0px !important; right: 0px !important;
} }
...@@ -501,4 +503,20 @@ span#zoom_in { ...@@ -501,4 +503,20 @@ span#zoom_in {
.wobble { .wobble {
animation: zoominoutsinglefeatured 1s 5; animation: zoominoutsinglefeatured 1s 5;
}
.hover {
g.node {
opacity: 0.1 !important;
}
g.edgePath {
opacity: 0 !important;
}
g.node.hover-active,
g.edgePath.hover-active-node {
opacity: 1 !important;
}
} }
\ No newline at end of file
dashboardv2/public/css/scss/relationship.scss
...@@ -16,11 +16,13 @@ ...@@ -16,11 +16,13 @@
* limitations under the License. * limitations under the License.
*/ */
.relationship-box { .relationship-box,
.lineage-box {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
.relatioship-link { .relatioship-link {
fill: none; fill: none;
stroke-width: 1.5px; stroke-width: 1.5px;
......
dashboardv2/public/js/templates/graph/LineageLayoutView_tmpl.html
...@@ -16,10 +16,10 @@ ...@@ -16,10 +16,10 @@
--> -->
<!-- <div class="graph-toolbar clearfix"></div> --> <!-- <div class="graph-toolbar clearfix"></div> -->
<div class="white-bg no-padding lineage-box"> <div class="white-bg no-padding lineage-box">
<div class="lineage-fltr-panel"> <div class="box-panel filter-box">
<div class="header clearfix"> <div class="header clearfix">
<h4>Filters</h4> <h4>Filters</h4>
<span data-id="fltr-togler" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
</div> </div>
<div class="body"> <div class="body">
<div class="hideProcessContainer form-group text-left col-sm-12"> <div class="hideProcessContainer form-group text-left col-sm-12">
...@@ -46,10 +46,10 @@ ...@@ -46,10 +46,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="lineage-search-panel"> <div class="box-panel search-box">
<div class="header clearfix"> <div class="header clearfix">
<h4>Search</h4> <h4>Search</h4>
<span data-id="search-togler" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span> <span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
</div> </div>
<div class="body"> <div class="body">
<div class="col-sm-12 no-padding"> <div class="col-sm-12 no-padding">
...@@ -64,12 +64,39 @@ ...@@ -64,12 +64,39 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box-panel setting-box">
<div class="header clearfix">
<h4>Settings</h4>
<span data-id="box-close" style="margin: 7px" class="btn btn-action btn-sm fltr-togler"><i class="fa fa-close"></i></span>
</div>
<div class="body">
<div class="showOnlyHoverPath form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" checked class="pull-left" data-id="showOnlyHoverPath" value="" />
<div class="state p-primary">
<label>On hover show current path</label>
</div>
</div>
</div>
<div class="showTooltip form-group text-left col-sm-12">
<div class="pretty p-switch p-fill">
<input type="checkbox" class="pull-left" data-id="showTooltip" value="" />
<div class="state p-primary">
<label>Show node details on hover</label>
</div>
</div>
</div>
</div>
</div>
<div class="graph-button-group pull-right"> <div class="graph-button-group pull-right">
<div> <div>
<button type="button" data-id="fltr-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button> <button type="button" data-id="setting-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-gear"></i></button>
</div>
<div>
<button type="button" data-id="filter-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-filter"></i></button>
</div> </div>
<div> <div>
<button type="button" data-id="search-togler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button> <button type="button" data-id="search-toggler" class="btn btn-action btn-gray btn-sm"><i class="fa fa-search"></i></button>
</div> </div>
<div> <div>
<button type="button" data-id="fullScreen-toggler" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button> <button type="button" data-id="fullScreen-toggler" class="btn btn-action btn-gray btn-sm fullscreen_lineage"><i class="fa fa-expand"></i></button>
......
dashboardv2/public/js/views/graph/LineageLayoutView.js
...@@ -49,15 +49,20 @@ define(['require', ...@@ -49,15 +49,20 @@ define(['require',
checkHideProcess: "[data-id='checkHideProcess']", checkHideProcess: "[data-id='checkHideProcess']",
checkDeletedEntity: "[data-id='checkDeletedEntity']", checkDeletedEntity: "[data-id='checkDeletedEntity']",
selectDepth: 'select[data-id="selectDepth"]', selectDepth: 'select[data-id="selectDepth"]',
fltrTogler: '[data-id="fltr-togler"]', filterToggler: '[data-id="filter-toggler"]',
lineageFilterPanel: '.lineage-fltr-panel', settingToggler: '[data-id="setting-toggler"]',
searchToggler: '[data-id="search-toggler"]',
boxClose: '[data-id="box-close"]',
lineageFullscreenToggler: '[data-id="fullScreen-toggler"]', lineageFullscreenToggler: '[data-id="fullScreen-toggler"]',
searchTogler: '[data-id="search-togler"]', filterBox: '.filter-box',
lineageSearchPanel: '.lineage-search-panel', searchBox: '.search-box',
settingBox: '.setting-box',
lineageTypeSearch: '[data-id="typeSearch"]', lineageTypeSearch: '[data-id="typeSearch"]',
lineageDetailClose: '[data-id="close"]', lineageDetailClose: '[data-id="close"]',
searchNode: '[data-id="searchNode"]', searchNode: '[data-id="searchNode"]',
nodeEntityList: '[data-id="entityList"]' nodeEntityList: '[data-id="entityList"]',
showOnlyHoverPath: '[data-id="showOnlyHoverPath"]',
showTooltip: '[data-id="showTooltip"]'
}, },
templateHelpers: function() { templateHelpers: function() {
return { return {
...@@ -71,9 +76,11 @@ define(['require', ...@@ -71,9 +76,11 @@ define(['require',
events["click " + this.ui.checkHideProcess] = 'onCheckUnwantedEntity'; events["click " + this.ui.checkHideProcess] = 'onCheckUnwantedEntity';
events["click " + this.ui.checkDeletedEntity] = 'onCheckUnwantedEntity'; events["click " + this.ui.checkDeletedEntity] = 'onCheckUnwantedEntity';
events['change ' + this.ui.selectDepth] = 'onSelectDepthChange'; events['change ' + this.ui.selectDepth] = 'onSelectDepthChange';
events["click " + this.ui.fltrTogler] = 'onClickFiltrTogler'; 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.lineageFullscreenToggler] = 'onClickLineageFullscreenToggler';
events["click " + this.ui.searchTogler] = 'onClickSearchTogler'; events["click " + this.ui.searchToggler] = 'onClickSearchToggler';
events["click " + this.ui.lineageDetailClose] = function() { events["click " + this.ui.lineageDetailClose] = function() {
this.toggleLineageInfomationSlider({ close: true }); this.toggleLineageInfomationSlider({ close: true });
}; };
...@@ -119,7 +126,6 @@ define(['require', ...@@ -119,7 +126,6 @@ define(['require',
return {}; return {};
}); });
}, },
onRender: function() { onRender: function() {
var that = this; var that = this;
this.fetchGraphData(); this.fetchGraphData();
...@@ -158,32 +164,30 @@ define(['require', ...@@ -158,32 +164,30 @@ define(['require',
}, },
onCheckUnwantedEntity: function(e) { onCheckUnwantedEntity: function(e) {
var data = $.extend(true, {}, this.lineageData); var data = $.extend(true, {}, this.lineageData);
this.fromToObj = {}; //this.fromToNodeData = {};
this.initializeGraph(); this.initializeGraph();
if ($(e.target).data("id") === "checkHideProcess") { if ($(e.target).data("id") === "checkHideProcess") {
this.filterObj.isProcessHideCheck = e.target.checked; this.filterObj.isProcessHideCheck = e.target.checked;
} else { } else {
this.filterObj.isDeletedEntityHideCheck = e.target.checked; this.filterObj.isDeletedEntityHideCheck = e.target.checked;
} }
this.generateData(data.relations, data.guidEntityMap); this.generateData({ "relationshipMap": this.relationshipMap, "guidEntityMap": this.guidEntityMap });
},
onClickFiltrTogler: function() {
var lineageFilterPanel = this.ui.lineageFilterPanel;
var lineageSearchPanel = this.ui.lineageSearchPanel;
$(lineageFilterPanel).toggleClass("show-filter-panel");
if (lineageSearchPanel.hasClass('show-search-panel')) {
$(this.ui.lineageSearchPanel).toggleClass("show-search-panel")
}
}, },
onClickSearchTogler: function() { toggleBoxPanel: function(el) {
var lineageSearchPanel = this.ui.lineageSearchPanel; this.$el.find('.show-box-panel').removeClass('show-box-panel');
var lineageFilterPanel = this.ui.lineageFilterPanel; if (el && el.addClass) {
$(lineageSearchPanel).toggleClass("show-search-panel"); el.addClass('show-box-panel');
if (lineageFilterPanel.hasClass('show-filter-panel')) {
$(this.ui.lineageFilterPanel).toggleClass("show-filter-panel");
} }
}, },
onClickFilterToggler: function() {
this.toggleBoxPanel(this.ui.filterBox);
},
onClickSettingToggler: function() {
this.toggleBoxPanel(this.ui.settingBox);
},
onClickSearchToggler: function() {
this.toggleBoxPanel(this.ui.searchBox);
},
onSelectDepthChange: function(e, options) { onSelectDepthChange: function(e, options) {
this.initializeGraph(); this.initializeGraph();
this.filterObj.depthCount = e.currentTarget.value; this.filterObj.depthCount = e.currentTarget.value;
...@@ -193,7 +197,7 @@ define(['require', ...@@ -193,7 +197,7 @@ define(['require',
fetchGraphData: function(options) { fetchGraphData: function(options) {
var that = this, var that = this,
queryParam = options && options.queryParam || {}; queryParam = options && options.queryParam || {};
this.fromToObj = {}; this.fromToNodeData = {};
this.$('.fontLoader').show(); this.$('.fontLoader').show();
this.$('svg>g').hide(); this.$('svg>g').hide();
this.collection.getLineage(this.guid, { this.collection.getLineage(this.guid, {
...@@ -201,8 +205,13 @@ define(['require', ...@@ -201,8 +205,13 @@ define(['require',
queryParam: queryParam, queryParam: queryParam,
success: function(data) { success: function(data) {
if (data.relations.length) { if (data.relations.length) {
that.lineageData = $.extend(true, {}, data) that.lineageData = $.extend(true, {}, data);
that.generateData(data.relations, data.guidEntityMap); that.relationshipMap = that.crateLineageRelationshipHashMap(data);
that.guidEntityMap = $.extend(true, {}, data.guidEntityMap);
if (that.lineageData) {
that.renderLineageTypeSearch();
}
that.generateData({ "relationshipMap": that.relationshipMap, "guidEntityMap": that.guidEntityMap });
} else { } else {
that.noLineage(); that.noLineage();
that.hideCheckForProcess(); that.hideCheckForProcess();
...@@ -221,7 +230,6 @@ define(['require', ...@@ -221,7 +230,6 @@ define(['require',
noLineage: function() { noLineage: function() {
this.$('.fontLoader').hide(); this.$('.fontLoader').hide();
this.$('.depth-container').hide(); this.$('.depth-container').hide();
//this.$('svg').height('100');
this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No lineage data found</text>'); this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No lineage data found</text>');
if (this.actionCallBack) { if (this.actionCallBack) {
this.actionCallBack(); this.actionCallBack();
...@@ -230,168 +238,227 @@ define(['require', ...@@ -230,168 +238,227 @@ define(['require',
hideCheckForProcess: function() { hideCheckForProcess: function() {
this.$('.hideProcessContainer').hide(); this.$('.hideProcessContainer').hide();
}, },
generateData: function(relations, guidEntityMap) { isProcess: function(node) {
var that = this; var typeName = node.typeName,
superTypes = node.superTypes,
function isProcess(node) { entityDef = node.entityDef;
if (_.isUndefined(node) || node.typeName == "Process") { if (typeName == "Process") {
return true; return true;
}
var entityDef = that.entityDefCollection.fullCollection.find({ name: node.typeName });
return _.contains(Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: that.entityDefCollection }), "Process")
} }
return _.contains(superTypes, "Process");
function isDeleted(node) { },
if (_.isUndefined(node)) { isDeleted: function(node) {
return if (_.isUndefined(node)) {
} return
return Enums.entityStateReadOnly[node.status];
} }
return Enums.entityStateReadOnly[node.status];
},
isNodeToBeUpdated: function(node) {
var isProcessHideCheck = this.filterObj.isProcessHideCheck,
isDeletedEntityHideCheck = this.filterObj.isDeletedEntityHideCheck
var returnObj = {
isProcess: (isProcessHideCheck && node.isProcess),
isDeleted: (isDeletedEntityHideCheck && node.isDeleted)
function isNodeToBeUpdated(node) { };
var isProcessHideCheck = that.filterObj.isProcessHideCheck, returnObj["update"] = returnObj.isProcess || returnObj.isDeleted;
isDeletedEntityHideCheck = that.filterObj.isDeletedEntityHideCheck return returnObj;
var returnObj = { },
isProcess: (isProcessHideCheck && isProcess(node)), getNestedSuperTypes: function(options) {
isDeleted: (isDeletedEntityHideCheck && isDeleted(node)) var entityDef = options.entityDef;
return Utils.getNestedSuperTypes({ data: entityDef.toJSON(), collection: this.entityDefCollection })
}; },
returnObj["update"] = returnObj.isProcess || returnObj.isDeleted; getEntityDef: function(typeName) {
return returnObj; var entityDef = null;
if (typeName) {
entityDef = this.entityDefCollection.fullCollection.find({ name: typeName });
} }
return entityDef;
function getServiceType(typeName) { },
var serviceType = null; getServiceType: function(options) {
if (typeName) { if (!options) {
var entityDef = that.entityDefCollection.fullCollection.find({ name: typeName }); return;
if (entityDef) { }
serviceType = entityDef.get("serviceType") || null; var typeName = options.typeName,
} entityDef = options.entityDef,
serviceType = null;
if (typeName) {
if (entityDef) {
serviceType = entityDef.get("serviceType") || null;
} }
return serviceType;
} }
return serviceType;
function makeNodeObj(relationObj) { },
var obj = {}; crateLineageRelationshipHashMap: function(data) {
obj['shape'] = "img"; var that = this,
obj['typeName'] = relationObj.typeName relations = data && data.relations,
obj['label'] = relationObj.displayText.trunc(18); guidEntityMap = data && data.guidEntityMap,
obj['toolTipLabel'] = relationObj.displayText; makeNodeData = function(relationObj) {
obj['id'] = relationObj.guid; var obj = $.extend(true, {
obj['isLineage'] = true; shape: "img",
obj['queryText'] = relationObj.queryText; label: relationObj.displayText.trunc(18),
obj['serviceType'] = getServiceType(relationObj.typeName); toolTipLabel: relationObj.displayText,
if (relationObj.status) { id: relationObj.guid,
obj['status'] = relationObj.status; isLineage: true,
entityDef: this.getEntityDef(relationObj.typeName)
}, relationObj);
obj["serviceType"] = this.getServiceType({ typeName: relationObj.typeName, entityDef: obj.entityDef });
obj["superTypes"] = this.getNestedSuperTypes({ entityDef: obj.entityDef });
obj['isProcess'] = this.isProcess(obj);
obj['isDeleted'] = this.isDeleted(obj);
return obj;
}.bind(this),
newHashMap = {};
_.each(relations, function(obj) {
if (!that.fromToNodeData[obj.fromEntityId]) {
that.fromToNodeData[obj.fromEntityId] = makeNodeData(guidEntityMap[obj.fromEntityId]);
} }
if (that.filterObj.isProcessHideCheck) { if (!that.fromToNodeData[obj.toEntityId]) {
obj['isProcess'] = relationObj.isProcess; that.fromToNodeData[obj.toEntityId] = makeNodeData(guidEntityMap[obj.toEntityId]);
}
if (newHashMap[obj.fromEntityId]) {
newHashMap[obj.fromEntityId].push(obj.toEntityId);
} else { } else {
obj['isProcess'] = isProcess(relationObj); newHashMap[obj.fromEntityId] = [obj.toEntityId];
} }
});
return obj; return newHashMap;
} },
generateData: function(options) {
var newRelations = [], var that = this,
finalRelations = relations, relationshipMap = options && $.extend(true, {}, options.relationshipMap) || {},
isHideFilterOn = this.filterObj.isProcessHideCheck || this.filterObj.isDeletedEntityHideCheck; guidEntityMap = options && options.guidEntityMap || {},
if (isHideFilterOn) { styleObj = {
_.each(relations, function(obj, index, relationArr) { fill: 'none',
var toNodeToBeUpdated = isNodeToBeUpdated(guidEntityMap[obj.toEntityId]); stroke: '#ffb203',
var fromNodeToBeUpdated = isNodeToBeUpdated(guidEntityMap[obj.fromEntityId]); width: 3
if (toNodeToBeUpdated.update) { },
if (that.filterObj.isProcessHideCheck) { getStyleObjStr = function(styleObj) {
//We have already checked entity is process or not inside isNodeToBeUpdated(); return 'fill:' + styleObj.fill + ';stroke:' + styleObj.stroke + ';stroke-width:' + styleObj.width;
guidEntityMap[obj.toEntityId]["isProcess"] = true; },
} filterRelationshipMap = relationshipMap,
_.filter(relationArr, function(flrObj) { isHideFilterOn = this.filterObj.isProcessHideCheck || this.filterObj.isDeletedEntityHideCheck,
if (flrObj.fromEntityId === obj.toEntityId) { getNewToNodeRelationship = function(toNodeGuid) {
if (that.filterObj.isDeletedEntityHideCheck && isDeleted(guidEntityMap[flrObj.toEntityId])) { if (toNodeGuid && relationshipMap[toNodeGuid]) {
return; var newRelationship = [];
_.each(relationshipMap[toNodeGuid], function(guid) {
var nodeToBeUpdated = that.isNodeToBeUpdated(that.fromToNodeData[guid]);
if (nodeToBeUpdated.update) {
var newRelation = getNewToNodeRelationship(guid);
if (newRelation) {
newRelationship = newRelationship.concat(newRelation);
} }
newRelations.push({ } else {
fromEntityId: obj.fromEntityId, newRelationship.push(guid);
toEntityId: flrObj.toEntityId
});
}
})
} else if (fromNodeToBeUpdated.update) {
if (that.filterObj.isProcessHideCheck) {
//We have already checked entity is process or not inside isNodeToBeUpdated();
guidEntityMap[obj.fromEntityId]["isProcess"] = true;
}
_.filter(relationArr, function(flrObj) {
if (that.filterObj.isDeletedEntityHideCheck && isDeleted(guidEntityMap[flrObj.fromEntityId])) {
return;
} }
if (flrObj.toEntityId === obj.fromEntityId) { });
newRelations.push({ return newRelationship;
fromEntityId: flrObj.fromEntityId, } else {
toEntityId: obj.toEntityId return null;
}); }
},
getToNodeRelation = function(toNodes, fromNodeToBeUpdated) {
var toNodeRelationship = [];
_.each(toNodes, function(toNodeGuid) {
var toNodeToBeUpdated = that.isNodeToBeUpdated(that.fromToNodeData[toNodeGuid]);
if (toNodeToBeUpdated.update) {
// To node need to updated
if (pendingFromRelationship[toNodeGuid]) {
toNodeRelationship = toNodeRelationship.concat(pendingFromRelationship[toNodeGuid]);
} else {
var newToNodeRelationship = getNewToNodeRelationship(toNodeGuid);
if (newToNodeRelationship) {
toNodeRelationship = toNodeRelationship.concat(newToNodeRelationship);
}
} }
}) } else {
//when bothe node not to be updated.
toNodeRelationship.push(toNodeGuid);
}
});
return toNodeRelationship;
},
pendingFromRelationship = {};
if (isHideFilterOn) {
filterRelationshipMap = {};
_.each(relationshipMap, function(toNodes, fromNodeGuid) {
var fromNodeToBeUpdated = that.isNodeToBeUpdated(that.fromToNodeData[fromNodeGuid]),
toNodeList = getToNodeRelation(toNodes, fromNodeToBeUpdated);
if (fromNodeToBeUpdated.update) {
if (pendingFromRelationship[fromNodeGuid]) {
pendingFromRelationship[fromNodeGuid] = pendingFromRelationship[fromNodeGuid].concat(toNodeList);
} else {
pendingFromRelationship[fromNodeGuid] = toNodeList;
}
} else { } else {
newRelations.push(obj); if (filterRelationshipMap[fromNodeGuid]) {
filterRelationshipMap[fromNodeGuid] = filterRelationshipMap[fromNodeGuid].concat(toNodeList);
} else {
filterRelationshipMap[fromNodeGuid] = toNodeList;
}
} }
}); })
finalRelations = newRelations;
} }
_.each(finalRelations, function(obj, index) { _.each(filterRelationshipMap, function(toNodesList, fromNodeGuid) {
if (!that.fromToObj[obj.fromEntityId]) { if (!that.g._nodes[fromNodeGuid]) {
that.fromToObj[obj.fromEntityId] = makeNodeObj(guidEntityMap[obj.fromEntityId]); that.g.setNode(fromNodeGuid, that.fromToNodeData[fromNodeGuid]);
that.g.setNode(obj.fromEntityId, that.fromToObj[obj.fromEntityId]);
}
if (!that.fromToObj[obj.toEntityId]) {
that.fromToObj[obj.toEntityId] = makeNodeObj(guidEntityMap[obj.toEntityId]);
that.g.setNode(obj.toEntityId, that.fromToObj[obj.toEntityId]);
}
var styleObj = {
fill: 'none',
stroke: '#ffb203',
width: 3
} }
that.g.setEdge(obj.fromEntityId, obj.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj }); _.each(toNodesList, function(toNodeGuid) {
}); if (!that.g._nodes[toNodeGuid]) {
that.g.setNode(toNodeGuid, that.fromToNodeData[toNodeGuid]);
}
that.g.setEdge(fromNodeGuid, toNodeGuid, {
"arrowhead": 'arrowPoint',
"lineInterpolate": 'basis',
"style": getStyleObjStr(styleObj),
'styleObj': styleObj
});
})
})
//if no relations found //if no relations found
if (!finalRelations.length) { if (_.isEmpty(filterRelationshipMap)) {
this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No relations to display</text>'); this.$('svg').html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No relations to display</text>');
} else {
this.$('svg').html('<text></text>');
} }
if (this.fromToObj[this.guid]) { if (this.fromToNodeData[this.guid]) {
this.fromToObj[this.guid]['isLineage'] = false; this.fromToNodeData[this.guid]['isLineage'] = false;
this.checkForLineageOrImpactFlag(finalRelations, this.guid); this.findImpactNodeAndUpdateData({ "relationshipMap": filterRelationshipMap, "guid": this.guid, "getStyleObjStr": getStyleObjStr });
} }
if (this.asyncFetchCounter == 0) { if (this.asyncFetchCounter == 0) {
this.createGraph(); this.createGraph();
} }
if (this.lineageData) {
this.renderLineageTypeSearch();
this.lineageTypeSearch()
}
}, },
checkForLineageOrImpactFlag: function(relations, guid) { findImpactNodeAndUpdateData: function(options) {
var that = this, var that = this,
nodeFound = _.where(relations, { 'fromEntityId': guid }); relationshipMap = options.relationshipMap,
if (nodeFound.length) { fromNodeGuid = options.guid,
_.each(nodeFound, function(node) { getStyleObjStr = options.getStyleObjStr,
if (!node["traversed"]) { toNodeList = relationshipMap[fromNodeGuid];
node["traversed"] = true; if (toNodeList && toNodeList.length) {
that.fromToObj[node.toEntityId]['isLineage'] = false; if (!relationshipMap[fromNodeGuid]["traversed"]) {
relationshipMap[fromNodeGuid]["traversed"] = true;
_.each(toNodeList, function(toNodeGuid) {
that.fromToNodeData[toNodeGuid]['isLineage'] = false;
var styleObj = { var styleObj = {
fill: 'none', fill: 'none',
stroke: '#fb4200', stroke: '#fb4200',
width: 3 width: 3
} }
that.g.setEdge(node.fromEntityId, node.toEntityId, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis', "style": "fill:" + styleObj.fill + ";stroke:" + styleObj.stroke + ";stroke-width:" + styleObj.width + "", 'styleObj': styleObj }); that.g.setEdge(fromNodeGuid, toNodeGuid, {
that.checkForLineageOrImpactFlag(relations, node.toEntityId); "arrowhead": 'arrowPoint',
} "lineInterpolate": 'basis',
}); "style": getStyleObjStr(styleObj),
'styleObj': styleObj
});
that.findImpactNodeAndUpdateData({
"relationshipMap": relationshipMap,
"guid": toNodeGuid,
"getStyleObjStr": getStyleObjStr
});
});
}
} }
}, },
toggleInformationSlider: function(options) { toggleInformationSlider: function(options) {
...@@ -404,12 +471,22 @@ define(['require', ...@@ -404,12 +471,22 @@ define(['require',
}, },
centerNode: function(nodeID) { centerNode: function(nodeID) {
var zoom = function() { var zoom = function() {
svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}, };
matrix = this.$('svg').find("g.nodes").find('>g#' + nodeID).attr('transform').replace(/[^0-9\-.,]/g, '').split(','), var selectedNode = this.$('svg').find("g.nodes").find('>g#' + nodeID);
x = matrix[0],
y = matrix[1], if (selectedNode.length > 0) {
viewerWidth = this.$('svg').width(), selectedNode = selectedNode;
var matrix = selectedNode.attr('transform').replace(/[^0-9\-.,]/g, '').split(','),
x = matrix[0],
y = matrix[1];
} else {
selectedNode = this.$('svg').find("g.nodes").find('g').eq(1);
var x = this.g.graph().width / 2,
y = this.g.graph().height / 2;
}
var viewerWidth = this.$('svg').width(),
viewerHeight = this.$('svg').height(), viewerHeight = this.$('svg').height(),
gBBox = d3.select('g').node().getBBox(), gBBox = d3.select('g').node().getBBox(),
zoomListener = d3.behavior.zoom().scaleExtent([0.01, 50]).on("zoom", zoom), zoomListener = d3.behavior.zoom().scaleExtent([0.01, 50]).on("zoom", zoom),
...@@ -577,8 +654,39 @@ define(['require', ...@@ -577,8 +654,39 @@ define(['require',
svg.on("dblclick.zoom", null) svg.on("dblclick.zoom", null)
// .on("wheel.zoom", null); // .on("wheel.zoom", null);
//change text postion //change text postion
function isConnected(a, b, o) {
//console.log(a, b, o);
if (a === o || (b && b.length && b.indexOf(o) != -1)) {
return true;
}
}
function fade(opacity, d, nodesToHighlight) {
var node = svg.selectAll('.node');
var path = svg.selectAll('.edgePath');
node.classed("hover-active", function(selectedNode, i, nodes) {
if (isConnected(d, nodesToHighlight, selectedNode)) {
return true;
} else {
return false;
}
});
path.classed('hover-active-node', function(c) {
var _thisOpacity = c.v === d || c.w === d ? 1 : 0;
if (_thisOpacity) {
return true;
} else {
return false;
}
});
}
//Highlight on click
svgGroup.selectAll("g.nodes g.label") svgGroup.selectAll("g.nodes g.label")
.attr("transform", "translate(2,-35)"); .attr("transform", "translate(2,-35)");
var waitForDoubleClick = null;
svgGroup.selectAll("g.nodes g.node") svgGroup.selectAll("g.nodes g.node")
.on('mouseenter', function(d) { .on('mouseenter', function(d) {
that.activeNode = true; that.activeNode = true;
...@@ -604,38 +712,68 @@ define(['require', ...@@ -604,38 +712,68 @@ define(['require',
} else if ((currentELWidth.top) < 400) { } else if ((currentELWidth.top) < 400) {
direction = ((currentELWidth.left) < 50) ? 'se' : 's'; direction = ((currentELWidth.left) < 50) ? 'se' : 's';
} }
tooltip.direction(direction).show(d) if (that.ui.showTooltip.prop('checked')) {
tooltip.direction(direction).show(d);
}
if (!that.ui.showOnlyHoverPath.prop('checked')) {
return;
}
that.$('svg').addClass('hover');
var nextNode = that.g.successors(d),
previousNode = that.g.predecessors(d),
nodesToHighlight = nextNode.concat(previousNode);
fade(0.3, d, nodesToHighlight);
}) })
.on('dblclick', function(d) { .on('mouseleave', function(d) {
tooltip.hide(d);
Utils.setUrl({
url: '#!/detailPage/' + d + '?tabActive=lineage',
mergeBrowserUrl: false,
trigger: true
});
}).on('mouseleave', function(d) {
that.activeNode = false; that.activeNode = false;
var nodeEL = this; var nodeEL = this;
setTimeout(function(argument) { setTimeout(function(argument) {
if (!(that.activeTip || that.activeNode)) { if (!(that.activeTip || that.activeNode)) {
$(nodeEL).removeClass('active'); $(nodeEL).removeClass('active');
tooltip.hide(d); if (that.ui.showTooltip.prop('checked')) {
tooltip.hide(d);
}
} }
}, 400) }, 400);
}).on('click', function(d) { if (!that.ui.showOnlyHoverPath.prop('checked')) {
return;
}
that.$('svg').removeClass('hover');
fade(1, d);
})
.on('click', function(d) {
if (d3.event.defaultPrevented) return; // ignore drag if (d3.event.defaultPrevented) return; // ignore drag
that.toggleLineageInfomationSlider({ open: true, obj: d }); d3.event.preventDefault();
svgGroup.selectAll('[data-stroke]').attr('stroke', 'none');
svgGroup.selectAll('[data-stroke]').attr('stroke', function(c) { if (waitForDoubleClick != null) {
if (c == d) { clearTimeout(waitForDoubleClick)
return "#316132"; waitForDoubleClick = null;
} else { tooltip.hide(d);
return 'none'; Utils.setUrl({
} url: '#!/detailPage/' + d + '?tabActive=lineage',
}) mergeBrowserUrl: false,
that.updateRelationshipDetails({ obj: d }); trigger: true
});
} else {
var currentEvent = d3.event
waitForDoubleClick = setTimeout(function() {
tooltip.hide(d);
that.toggleLineageInfomationSlider({ open: true, obj: d });
svgGroup.selectAll('[data-stroke]').attr('stroke', 'none');
svgGroup.selectAll('[data-stroke]').attr('stroke', function(c) {
if (c == d) {
return "#316132";
} else {
return 'none';
}
})
that.updateRelationshipDetails({ obj: d });
waitForDoubleClick = null;
}, 150)
}
}); });
svgGroup.selectAll("g.edgePath path.path").on('click', function(d) { svgGroup.selectAll("g.edgePath path.path").on('click', function(d) {
var data = { obj: _.find(that.lineageData.relations, { "fromEntityId": d.v, "toEntityId": d.w }) }, var data = { obj: _.find(that.lineageData.relations, { "fromEntityId": d.v, "toEntityId": d.w }) },
relationshipId = data.obj.relationshipId; relationshipId = data.obj.relationshipId;
...@@ -692,8 +830,9 @@ define(['require', ...@@ -692,8 +830,9 @@ define(['require',
}); });
} }
that.ui.lineageTypeSearch.html(typeStr); that.ui.lineageTypeSearch.html(typeStr);
this.initilizelineageTypeSearch()
}, },
lineageTypeSearch: function() { initilizelineageTypeSearch: function() {
var that = this; var that = this;
that.ui.lineageTypeSearch.select2({ that.ui.lineageTypeSearch.select2({
closeOnSelect: true, closeOnSelect: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment