/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import dagreD3 from "dagre-d3";
import { select, selection, event } from "d3-selection";
import { curveBasis } from "d3-shape";
import { LineageUtils, DataUtils } from "./Utils";
import d3Tip from "d3-tip";
import "./styles/style.scss";
export default class LineageHelper {
constructor(options) {
this.options = {};
this._updateOptions(options);
const { el, manualTrigger = false } = this.options;
if (el === undefined) {
throw new Error("LineageHelper requires el propety to render the graph");
}
this.initReturnObj = {
init: (arg) => this.init(arg),
updateOptions: (options) => this._updateAllOptions(options),
createGraph: (opt = {}) => this._createGraph(this.options, this.graphOptions, opt),
clear: (arg) => this.clear(arg),
refresh: (arg) => this.refresh(arg),
centerAlign: (arg) => this.centerAlign(arg),
exportLineage: (arg) => this.exportLineage(arg),
zoomIn: (arg) => this.zoomIn(arg),
zoomOut: (arg) => this.zoomOut(arg),
zoom: (arg) => this.zoom(arg),
fullScreen: (arg) => this.fullScreen(arg),
searchNode: (arg) => this.searchNode(arg),
removeNodeSelection: (arg) => this.removeNodeSelection(arg),
getGraphOptions: () => this.graphOptions,
getNode: (guid, actual) => {
let rObj = null;
if (actual) {
rObj = this.actualData[guid];
} else {
rObj = this.g._nodes[guid];
}
if (rObj) {
rObj = Object.assign({}, rObj);
}
return rObj;
},
getNodes: (guid, actual) => {
let rObj = null;
if (actual) {
rObj = this.actualData;
} else {
rObj = this.g._nodes;
}
if (rObj) {
rObj = Object.assign({}, rObj);
}
return rObj;
},
setNode: this._setGraphNode,
setEdge: this._setGraphEdge
};
if (manualTrigger === false) {
this.init();
}
return this.initReturnObj;
}
/**
* [updateAllOptions]
* @param {[type]}
* @return {[type]}
*/
_updateAllOptions(options) {
Object.assign(this.options, options);
var svgRect = this.svg.node().getBoundingClientRect();
this.graphOptions.width = this.options.width || svgRect.width;
this.graphOptions.height = this.options.height || svgRect.height;
const { svg, width, height, guid } = this.graphOptions;
const { fitToScreen } = this.options;
svg.select("g").node().removeAttribute("transform");
svg.attr("viewBox", "0 0 " + width + " " + height).attr("enable-background", "new 0 0 " + width + " " + height);
this.centerAlign({ fitToScreen, guid });
}
/**
* [updateOptions get the options from user and appedn add it in this,option context]
* @param {[Object]} options [lib options from user]
* @return {[null]} [null]
*/
_updateOptions(options) {
Object.assign(this.options, { filterObj: { isProcessHideCheck: false, isDeletedEntityHideCheck: false } }, options);
}
/**
* [init Start the graph build process]
* @return {[null]} [null]
*/
init() {
const { data = {} } = this.options;
if (data.baseEntityGuid) {
this.guid = data.baseEntityGuid;
}
// Call the initializeGraph method to initlize dagreD3 graphlib
this._initializeGraph();
this._initGraph();
}
/**
* [clear Allows user to clear the graph refrence and dom]
* @return {[type]} [description]
*/
clear() {
if (!this.options.el) {
this.svg.remove();
this.svg = null;
}
this.g = null;
this.graphOptions = {};
}
/**
* [centerAlign Allows user to center the lineage position, without rerender]
* @return {[type]} [description]
*/
centerAlign(opt = {}) {
var svgGroupEl = this.svg.select("g"),
edgePathEl = svgGroupEl.selectAll("g.edgePath");
LineageUtils.centerNode({
...this.graphOptions,
svgGroupEl,
edgePathEl,
...opt
});
}
/**
* [zoomIn description]
* @return {[type]} [description]
*/
zoomIn(opt = {}) {
LineageUtils.zoomIn({ ...this.graphOptions, ...opt });
}
/**
* [zoomOut description]
* @return {[type]} [description]
*/
zoomOut(opt = {}) {
LineageUtils.zoomOut({ ...this.graphOptions, ...opt });
}
/**
* [zoom description]
* @return {[type]} [description]
*/
zoom(opt = {}) {
LineageUtils.zoom({ ...this.graphOptions, ...opt });
}
/**
* [refresh Allows user to rerender the lineage]
* @return {[type]} [description]
*/
refresh() {
this.clear();
this._initializeGraph();
this._initGraph({ refresh: true });
}
/**
* [removeNodeSelection description]
* @return {[type]} [description]
*/
removeNodeSelection() {
this.svg.selectAll("g.node>circle").classed("node-detail-highlight", false);
}
/**
* [searchNode description]
* @return {[type]} [description]
*/
searchNode({ guid, onSearchNode }) {
this.svg.selectAll(".serach-rect").remove();
this.centerAlign({
guid: guid,
onCenterZoomed: function (opts) {
const { selectedNodeEl } = opts;
selectedNodeEl.select(".label").attr("stroke", "#316132");
selectedNodeEl.select("circle").classed("wobble", true);
selectedNodeEl
.insert("rect", "circle")
.attr("class", "serach-rect")
.attr("x", -50)
.attr("y", -27.5)
.attr("width", 100)
.attr("height", 55);
if (onSearchNode && typeof onSearchNode === "function") {
onSearchNode(opts);
}
}
});
}
/**
* [exportLineage description]
* @param {Object} options [description]
* @return {[type]} [description]
*/
exportLineage(options = {}) {
let downloadFileName = options.downloadFileName;
if (downloadFileName === undefined) {
let node = this.g._nodes[this.guid];
if (node && node.attributes) {
downloadFileName = `${node.attributes.qualifiedName || node.attributes.name || "lineage_export"}.png`;
} else {
downloadFileName = "export.png";
}
}
LineageUtils.saveSvg({
...this.graphOptions,
downloadFileName: downloadFileName,
onExportLineage: (opt) => {
if (options.onExportLineage) {
onExportLineage(opt);
}
}
});
}
/**
* [fullScreen description]
* @param {Object} options.el } [description]
* @return {[type]} [description]
*/
fullScreen({ el } = {}) {
if (el === undefined) {
throw new Error("LineageHelper requires el propety to apply fullScreen class");
}
const fullScreenEl = select(el);
if (fullScreenEl.classed("fullscreen-mode")) {
fullScreenEl.classed("fullscreen-mode", false);
return false;
} else {
fullScreenEl.classed("fullscreen-mode", true);
return true;
}
}
/**
* [_getValueFromUser description]
* @param {[type]} ref [description]
* @return {[type]} [description]
*/
_getValueFromUser(ref) {
if (ref !== undefined) {
if (typeof ref === "function") {
return ref();
} else {
return ref;
}
}
return;
}
/**
* [initializeGraph initlize the dagreD3 graphlib]
* @return {[null]} [null]
*/
_initializeGraph() {
const { width = "100%", height = "100%", el } = this.options;
// Append the svg using d3.
this.svg = select(el);
if (!(el instanceof SVGElement)) {
this.svg.selectAll("*").remove();
this.svg = this.svg
.append("svg")
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr(" xmlns:xlink", "http://www.w3.org/1999/xlink")
.attr("version", "1.1")
.attr("width", width)
.attr("height", height);
}
// initlize the dagreD3 graphlib
this.g = new dagreD3.graphlib.Graph()
.setGraph(
Object.assign(
{
nodesep: 50,
ranksep: 90,
rankdir: "LR",
marginx: 20,
marginy: 20,
transition: function transition(selection) {
return selection.transition().duration(500);
}
},
this.options.dagreOptions
)
)
.setDefaultEdgeLabel(function () {
return {};
});
// Create graphOptions for common use
var svgRect = this.svg.node().getBoundingClientRect();
this.actualData = {};
this.graphOptions = {
svg: this.svg,
g: this.g,
dagreD3: dagreD3,
guid: this.guid,
width: this.options.width || svgRect.width,
height: this.options.height || svgRect.height
};
}
/**
* [_initGraph description]
* @return {[type]} [description]
*/
_initGraph({ refresh } = {}) {
if (this.svg) {
this.svg.select("g").remove();
}
let filterObj = this.options.filterObj;
if (this.options.getFilterObj) {
let filterObjVal = this.options.getFilterObj();
if (filterObjVal !== undefined || filterObjVal !== null) {
if (typeof filterObjVal === "object") {
filterObj = filterObjVal;
} else {
throw new Error("getFilterObj expect return type `object`,`null` or `Undefined`");
}
}
}
if (this.options.setDataManually === true) {
return;
} else if (this.options.data === undefined || (this.options.data && this.options.data.relations.length === 0)) {
if (this.options.beforeRender) {
this.options.beforeRender();
}
this.svg
.append("text")
.attr("x", "50%")
.attr("y", "50%")
.attr("alignment-baseline", "middle")
.attr("text-anchor", "middle")
.text("No lineage data found");
if (this.options.afterRender) {
this.options.afterRender();
}
return;
}
return DataUtils.generateData({
...this.options,
filterObj: filterObj,
...this.graphOptions,
setGraphNode: this._setGraphNode,
setGraphEdge: this._setGraphEdge
}).then((graphObj) => {
this._createGraph(this.options, this.graphOptions, { refresh });
});
}
/**
* [description]
* @param {[type]} guid [description]
* @param {[type]} nodeData [description]
* @return {[type]} [description]
*/
_setGraphNode = (guid, nodeData) => {
this.actualData[guid] = Object.assign({}, nodeData);
this.g.setNode(guid, nodeData);
};
/**
* [description]
* @param {[type]} fromGuid [description]
* @param {[type]} toGuid [description]
* @param {[type]} opts [description]
* @return {[type]} [description]
*/
_setGraphEdge = (fromGuid, toGuid, opts) => {
this.g.setEdge(fromGuid, toGuid, {
curve: curveBasis,
...opts
});
};
/**
* [_createGraph description]
* @param {Object} options.data [description]
* @param {Boolean} isShowTooltip [description]
* @param {Boolean} isShowHoverPath [description]
* @param {[type]} onLabelClick [description]
* @param {[type]} onPathClick [description]
* @param {[type]} onNodeClick } [description]
* @param {[type]} graphOptions [description]
* @return {[type]} [description]
*/
_createGraph(
{
data = {},
imgBasePath,
isShowTooltip,
isShowHoverPath,
onLabelClick,
onPathClick,
onNodeClick,
zoom,
fitToScreen,
getToolTipContent,
toolTipTitle
},
graphOptions,
{ refresh }
) {
if (this.options.beforeRender) {
this.options.beforeRender();
}
const that = this,
{ svg, g, width, height } = graphOptions,
isRankdirToBottom = this.options.dagreOptions && this.options.dagreOptions.rankdir === "tb";
if (svg instanceof selection === false) {
throw new Error("svg is not initialized or something went wrong while creatig graph instance");
return;
}
if (g._nodes === undefined || g._nodes.length === 0) {
svg.html('<text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle">No relations to display</text>');
return;
}
g.nodes().forEach(function (v) {
var node = g.node(v);
// Round the corners of the nodes
if (node) {
node.rx = node.ry = 5;
}
});
svg.attr("viewBox", "0 0 " + width + " " + height).attr("enable-background", "new 0 0 " + width + " " + height);
var svgGroupEl = svg.append("g");
// Append defs
var defsEl = svg.append("defs");
// Create the renderer
var render = new dagreD3.render();
// Add our custom arrow (a hollow-point)
render.arrows().arrowPoint = function () {
return LineageUtils.arrowPointRender(...arguments, { ...graphOptions });
};
// Render custom img inside shape
render.shapes().img = function () {
return LineageUtils.imgShapeRender(...arguments, {
...graphOptions,
isRankdirToBottom: isRankdirToBottom,
imgBasePath: that._getValueFromUser(imgBasePath),
defsEl
});
};
var tooltip = d3Tip()
.attr("class", "d3-tip")
.offset([10, 0])
.html((d) => {
if (getToolTipContent && typeof getToolTipContent === "function") {
return getToolTipContent(d, g.node(d));
} else {
var value = g.node(d);
var htmlStr = "";
if (toolTipTitle) {
htmlStr = "<h5 style='text-align: center;'>" + toolTipTitle + "</h5>";
} else if (value.id !== this.guid) {
htmlStr = "<h5 style='text-align: center;'>" + (value.isLineage ? "Lineage" : "Impact") + "</h5>";
}
htmlStr += "<h5 class='text-center'><span style='color:#359f89'>" + value.toolTipLabel + "</span></h5> ";
if (value.typeName) {
htmlStr += "<h5 class='text-center'><span>(" + value.typeName + ")</span></h5> ";
}
if (value.queryText) {
htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
}
return "<div class='tip-inner-scroll'>" + htmlStr + "</div>";
}
});
svg.call(tooltip);
// if (platform.name !== "IE") {
// this.$(".fontLoader").hide();
// }
render(svgGroupEl, g);
//change text postion
svgGroupEl
.selectAll("g.nodes g.label")
.attr("transform", () => {
if (isRankdirToBottom) {
return "translate(2,-20)";
}
return "translate(2,-35)";
})
.on("mouseenter", function (d) {
event.preventDefault();
select(this).classed("highlight", true);
})
.on("mouseleave", function (d) {
event.preventDefault();
select(this).classed("highlight", false);
})
.on("click", function (d) {
event.preventDefault();
if (onLabelClick && typeof onLabelClick === "function") {
onLabelClick({ clickedData: d });
}
tooltip.hide(d);
});
svgGroupEl
.selectAll("g.nodes g.node circle")
.on("mouseenter", function (d, index, element) {
that.activeNode = true;
var matrix = this.getScreenCTM().translate(+this.getAttribute("cx"), +this.getAttribute("cy"));
that.svg.selectAll(".node").classed("active", false);
select(this).classed("active", true);
if (that._getValueFromUser(isShowTooltip)) {
var direction = LineageUtils.getToolTipDirection({ el: this });
tooltip.direction(direction).show(d, this);
}
if (that._getValueFromUser(isShowHoverPath) === false) {
return;
}
LineageUtils.onHoverFade({
opacity: 0.3,
mouseenter: true,
hoveredNode: d,
...graphOptions
});
})
.on("mouseleave", function (d) {
that.activeNode = false;
var nodeEL = this;
setTimeout(function (argument) {
if (!(that.activeTip || that.activeNode)) {
select(nodeEL).classed("active", false);
if (that._getValueFromUser(isShowTooltip)) {
tooltip.hide(d);
}
}
}, 150);
if (that._getValueFromUser(isShowHoverPath) === false) {
return;
}
LineageUtils.onHoverFade({
mouseenter: false,
hoveredNode: d,
...graphOptions
});
})
.on("click", function (d) {
if (event.defaultPrevented) return; // ignore drag
event.preventDefault();
tooltip.hide(d);
svg.selectAll("g.node>circle").classed("node-detail-highlight", false);
select(this).classed("node-detail-highlight", true);
if (onNodeClick && typeof onNodeClick === "function") {
onNodeClick({ clickedData: d, el: this });
}
});
// Bind event on edgePath
var edgePathEl = svgGroupEl.selectAll("g.edgePath");
edgePathEl.selectAll("path.path").on("click", function (d) {
if (onPathClick && typeof onPathClick === "function") {
var pathRelationObj = data.relations.find(function (obj) {
if (obj.fromEntityId === d.v && obj.toEntityId === d.w) {
return true;
}
});
onPathClick({ pathRelationObj, clickedData: d });
}
});
// tooltip hover handle to fix node hover conflict
// select("body").on("mouseover", ".d3-tip", function(el) {
// that.activeTip = true;
// });
// select("body").on("mouseleave", ".d3-tip", function(el) {
// that.activeTip = false;
// svg.selectAll(".node").classed("active", false);
// //tooltip.hide();
// });
// Center the graph
if (zoom !== false) {
LineageUtils.centerNode({
...graphOptions,
fitToScreen,
svgGroupEl,
edgePathEl
});
}
// if (platform.name === "IE") {
// LineageUtils.refreshGraphForIE({
// edgeEl: this.$("svg .edgePath")
// });
// }
LineageUtils.dragNode({
...graphOptions,
edgePathEl
});
if (refresh !== true) {
this._addLegend();
}
if (this.options.afterRender) {
this.options.afterRender();
}
}
_addLegend() {
if (this.options.legends === false) {
return;
}
var container = select(this.options.legendsEl || this.options.el)
.insert("div", ":first-child")
.classed("legends", true);
let span = container.append("span").style("color", "#fb4200");
span.append("i").classed("fa fa-circle-o fa-fw", true);
span.append("span").html("Current Entity");
span = container.append("span").style("color", "#686868");
span.append("i").classed("fa fa-hourglass-half fa-fw", true);
span.append("span").html("In Progress");
span = container.append("span").style("color", "#df9b00");
span.append("i").classed("fa fa-long-arrow-right fa-fw", true);
span.append("span").html("Lineage");
span = container.append("span").style("color", "#fb4200");
span.append("i").classed("fa fa-long-arrow-right fa-fw", true);
span.append("span").html("Impact");
}
}