Merge pull request #731 from AbsaOSS/bugfix/spline-718-graph-layout-improvement

Bugfix/spline 718 graph layout improvement

Author: wajda

client-ui/src/app/components/lineage-overview/lineage-overview-details/lineage-overview-details.component.html

@@ -30,7 +30,7 @@ <h3 class="text-center pb-3 mt-3"> Execution Event </h3>
     </p>
     <ul>
       <p>
-        <strong>URI:</strong> {{ lineageInfo.targetNodeName }}
+        <strong>URI:</strong> {{ lineageInfo.targetURI }}
       </p>
     </ul>
 

client-ui/src/app/components/lineage-overview/lineage-overview-details/lineage-overview-details.component.ts

@@ -39,7 +39,7 @@ export class LineageOverviewDetailsComponent {
   readonly executedLogicalPlan$: Observable<ExecutedLogicalPlanVM>
 
   readonly lineageInfo$: Observable<{
-    targetNodeName: string
+    targetURI: string
     executionEventId: string
     [key: string]: any
   }>

client-ui/src/app/effects/lineage-overview.effects.ts

@@ -83,33 +83,40 @@ export class LineageOverviewEffects {
   }
 
   private toLineageOverviewVM = (lineageOverview: LineageOverview, executionEventId: string): LineageOverviewVM => {
-    const cytoscapeGraphVM = {} as CytoscapeGraphVM
-    cytoscapeGraphVM.nodes = []
-    cytoscapeGraphVM.edges = []
+    const cytoscapeGraphVM: CytoscapeGraphVM = {
+      nodes: [],
+      edges: []
+    }
 
     const graph = lineageOverview.graph
-    const nonTerminalNodeIds = new Set(graph.edges.map(e => e.source))
-    const targetNodeId = graph.nodes
-      .map((n: LineageOverviewNodeVM) => n._id)
-      .find(id => !nonTerminalNodeIds.has(id))
+    let targetURI = ''
 
-    let targetNodeName = ''
     _.each(graph.nodes, (node: LineageOverviewNodeVM) => {
       const cytoscapeOperation = {} as CytoscapeOperationVM
-      if (node._id == targetNodeId) {
-        targetNodeName = node.name
-        cytoscapeOperation.properties = { 'targetNode': true }
+      const isTargetNode = node._id == lineageOverview.info.targetDataSourceId
+
+      if (isTargetNode) {
+        targetURI = node.name
       }
+
       cytoscapeOperation._type = node._type
       cytoscapeOperation.id = node._id
       cytoscapeOperation._id = node.name
+
       const nodeName = node._type == LineageOverviewNodeType.DataSource ? node.name.substring(node.name.lastIndexOf('/') + 1) : node.name
       const splitedNames = node.name.split('/')
       cytoscapeOperation.name = nodeName == '*' ? `${splitedNames[splitedNames.length - 2]}/${nodeName}` : nodeName
-      cytoscapeOperation.color = lineageOverviewColorCodes.get(node._type)
       cytoscapeOperation.icon = lineageOverviewIconCodes.get(node._type)
-      cytoscapeGraphVM.nodes.push({ data: cytoscapeOperation })
+      cytoscapeOperation.color = isTargetNode
+        ? lineageOverviewColorCodes.get("Root")
+        : lineageOverviewColorCodes.get(node._type)
+
+      cytoscapeGraphVM.nodes.push({
+        data: cytoscapeOperation,
+        classes: isTargetNode ? ["root"] : undefined
+      })
     })
+
     _.each(graph.edges, (edge: Transition) => {
       cytoscapeGraphVM.edges.push({ data: edge })
     })
@@ -118,12 +125,11 @@ export class LineageOverviewEffects {
     lineageOverviewVM.lineage = cytoscapeGraphVM
     lineageOverviewVM.lineageInfo = {
       ...lineageOverview.info,
-      targetNodeName: targetNodeName,
+      targetURI: targetURI,
       executionEventId: executionEventId
     }
-
-    lineageOverviewVM.depthComputed = lineageOverview.graph.depthComputed ? lineageOverview.graph.depthComputed : 0
-    lineageOverviewVM.depthRequested = lineageOverview.graph.depthRequested ? lineageOverview.graph.depthRequested : 0
+    lineageOverviewVM.depthComputed = graph.depthComputed ? graph.depthComputed : 0
+    lineageOverviewVM.depthRequested = graph.depthRequested ? graph.depthRequested : 0
     lineageOverviewVM.hasMoreNodes = lineageOverviewVM.depthComputed && lineageOverviewVM.depthComputed >= lineageOverviewVM.depthRequested
 
     return lineageOverviewVM

client-ui/src/app/model/lineage-graph/lineage-graph.models.ts

@@ -20,7 +20,7 @@ import { Stylesheet } from 'cytoscape'
 export const LINE_WIDTH_PLANE = 10
 export const LINE_WIDTH_HIGHLIGHTED = 10
 export const LINE_WIDTH_SELECTED = 16
-export const LINE_COLOR_PLANE = '#eaeaea'
+export const LINE_COLOR_PLANE = '#e0e0e0'
 export const LINE_COLOR_SELECTED = 'orange'
 export const LINE_COLOR_HLT_PRIMARY = 'black'
 export const LINE_COLOR_HLT_LINEAGE = 'magenta'
@@ -59,6 +59,12 @@ export const cyStyles: Partial<Stylesheet>[] = [
       ...selectedNodeStyles
     },
   } as Stylesheet,
+  {
+    selector: 'node.root',
+    style: {
+      'background-color': '#333333',
+    },
+  } as Stylesheet,
   {
     selector: 'node.hlt_prim',
     style: {
@@ -119,6 +125,7 @@ export const cyStyles: Partial<Stylesheet>[] = [
       'width': LINE_WIDTH_PLANE,
       'curve-style': 'bezier',
       'target-arrow-shape': 'triangle',
+      'arrow-scale': 1.5,
     },
     css: {
       'label': (el) => el.data('label') || '',

client-ui/src/app/model/types/lineageOverviewNodeType.ts

@@ -17,5 +17,6 @@
 
 export const enum LineageOverviewNodeType {
     Execution = 'ExecutionNode',
-    DataSource = 'DataSourceNode'
+    DataSource = 'DataSourceNode',
+    Root = 'Root'
 }

client-ui/src/app/model/viewModels/cytoscape/graphNodeVM.ts

@@ -16,5 +16,6 @@
 import {CytoscapeOperationVM} from './cytoscapeOperationVM';
 
 export type GraphNode = {
-    data: CytoscapeOperationVM
+  data: CytoscapeOperationVM,
+  classes?: string[]
 }

client-ui/src/app/model/viewModels/lineageOverview.ts

@@ -18,7 +18,7 @@ import { CytoscapeGraphVM } from './cytoscape/cytoscapeGraphVM'
 
 export type LineageOverviewVM = {
   lineageInfo: {
-    targetNodeName: string;
+    targetURI: string;
     executionEventId: string
     [key: string]: any
   }

client-ui/src/app/store/reducers/layout.reducer.ts

@@ -53,8 +53,8 @@ function getConfiguration(): any {
             /* UNDEFINED, RIGHT, LEFT, DOWN, UP */
             edgeRouting: 'SPLINES', // Defines how edges are routed (POLYLINE, ORTHOGONAL, SPLINES)
             edgeSpacingFactor: 0.5, // Factor by which the object spacing is multiplied to arrive at the minimal spacing between edges.
-            feedbackEdges: false, // Whether feedback edges should be highlighted by routing around the nodes.
-            fixedAlignment: 'LEFTUP', // Tells the BK node placer to use a certain alignment instead of taking the optimal result.  This option should usually be left alone.
+            feedbackEdges: true, // Whether feedback edges should be highlighted by routing around the nodes.
+            fixedAlignment: 'NONE', // Tells the BK node placer to use a certain alignment instead of taking the optimal result.  This option should usually be left alone.
             /* NONE Chooses the sTmallest layout from the four possible candidates.
             LEFTUP Chooses the left-up candidate from the four possible candidates.
             RIGHTUP Chooses the right-up candidate from the four possible candidates.
@@ -83,4 +83,4 @@ function getConfiguration(): any {
         },
         priority: function (edge) { return null }, // Edges with a non-nil value are skipped when geedy edge cycle breaking is enabled
     }
-}
+}

client-ui/src/app/store/reducers/lineage-overview.reducer.ts

@@ -35,6 +35,7 @@ export const lineageOverviewIconCodes: Map<string, number> = new Map([
 
 
 export const lineageOverviewColorCodes: Map<string, string> = new Map([
+  [LineageOverviewNodeType.Root, "#ffffff"],
   [LineageOverviewNodeType.Execution, "#e39255"],
   [LineageOverviewNodeType.DataSource, "#337AB7"]
 ])

consumer-services/src/main/scala/za/co/absa/spline/consumer/service/repo/LineageRepositoryImpl.scala

@@ -31,12 +31,14 @@ class LineageRepositoryImpl @Autowired()(db: ArangoDatabaseAsync) extends Lineag
     .queryOne[LineageOverview](
       """
         |LET executionEvent = FIRST(FOR p IN progress FILTER p._key == @eventId RETURN p)
+        |LET targetDataSource = FIRST(FOR ds IN 2 OUTBOUND executionEvent progressOf, affects RETURN ds)
         |LET lineageGraph = SPLINE::EVENT_LINEAGE_OVERVIEW(executionEvent, @maxDepth)
         |
         |RETURN lineageGraph && {
         |    "info": {
         |        "timestamp" : executionEvent.timestamp,
-        |        "applicationId" : executionEvent.extra.appId
+        |        "applicationId" : executionEvent.extra.appId,
+        |        "targetDataSourceId": targetDataSource._key
         |    },
         |    "graph": {
         |        "depthRequested": @maxDepth,