New Lineage Updated

dashboard/v2/public/css/common.css

@@ -120,10 +120,10 @@ footer.navbar-bottom img {
     min-height: 0;
     padding: 5px 5px 5px 0;
 }
-#Details
-{
-    height: 800px;
-}
+/*#Details*/
+/*{*/
+    /*height: 800px;*/
+/*}*/
 .pagination {
     float: right;
 }

dashboard/v2/public/css/lineage.css

@@ -16,26 +16,28 @@
  * limitations under the License.
  */
 
-g circle {
-    cursor: pointer;
-    stroke: green;
-    stroke-width: 2px;
-    fill: url(#process-image);
-}
+/*g circle {*/
+    /*cursor: pointer;*/
+    /*stroke: green;*/
+    /*stroke-width: 2px;*/
+    /*fill: url(#process-image);*/
+/*}*/
 
-g circle.empty {
-    fill: #90ef96;
-}
+/*g circle.empty {*/
+    /*fill: #90ef96;*/
+/*}*/
 
 .link {
     fill: none;
     stroke: green;
     stroke-width: 2px;
+
 }
 
 g text {
     pointer-events: none;
     text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
+    text-align: center;
 }
 
 .d3-tip pre {
@@ -44,28 +46,35 @@ g text {
 
 div.lineage {
     border-bottom: 2px solid #006600;
-    margin-bottom: 30px;
-}
 
-.node rect {
-    stroke: #333;
-    fill: #fff;
 }
 
+/*.node rect {*/
+    /*stroke: #333;*/
+    /*fill: #fff;*/
+/*}*/
+
 .edgePath path {
     stroke: #333;
     fill: #333;
     stroke-width: 1.5px;
 }
 
-.node rect,
-.node circle {
-    stroke: #333;
-    fill: #fff;
-    stroke-width: 1.5px;
-}
+/*.node rect,*/
+/*.node circle {*/
+    /*stroke: #333;*/
+    /*fill: #fff;*/
+    /*stroke-width: 1.5px;*/
+/*}*/
 
 .lineage-viz {
-    padding: 10px;
+    padding: 5px;
     margin: 0 auto;
+    overflow: auto;
+    border-top: none;
+    border-right: inherit  ;
+
 }
+/*.images {*/
+    /*background-image: url("../img/process.png");*/
+/*}​*/

dashboard/v2/public/modules/details/views/details.html

@@ -39,7 +39,7 @@
             </table>
         </tab>
         <tab data-heading="Schema"><ng-include src="'/modules/details/views/schema.html'"/></tab>
-        <tab data-heading="Output" data-disable="!tableName" data-select="onActivate('outputs')"><ng-include data-table-type="outputs" src="'/modules/lineage/views/lineage.html'"/></tab>
+        <tab  data-heading="Output" data-disable="!tableName" data-select="onActivate('outputs')"><ng-include data-table-type="outputs" src="'/modules/lineage/views/lineage.html'"/></tab>
         <tab data-heading="Input" data-disable="!tableName" data-select="onActivate('inputs')"><ng-include data-table-type="inputs" src="'/modules/lineage/views/lineage.html'"/></tab>
     </tabset>
 

dashboard/v2/public/modules/lineage/lineageController.js

@@ -69,7 +69,8 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
             function getNode(guid) {
                 var vertex = {
                     guid: guid,
-                    name: vertices.hasOwnProperty(guid) ? vertices[guid].values.name : 'Load Process-Added'
+                    name: vertices.hasOwnProperty(guid) ? vertices[guid].values.name : 'Load Process',
+                    type: vertices.hasOwnProperty(guid) ? vertices[guid].values.vertexId.values.typeName : 'LoadProcess'
                 };
                 if (!nodes.hasOwnProperty(guid)) {
                     nodes[guid] = vertex;
@@ -108,10 +109,10 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
                 height = Math.max(container.height, 350);
 
             var margin = {
-                top: 20,
-                right: 120,
-                bottom: 20,
-                left: 120
+                top: 100,
+                right: 10,
+                bottom: 30,
+                left: 100
             };
             width = width - margin.right - margin.left;
             height = height - margin.top - margin.bottom;
@@ -119,7 +120,8 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
             var i = 0;
 
             var tree = d3.layout.tree()
-                .size([height, width]);
+
+            .size([height, width]);
 
             var diagonal = d3.svg.diagonal()
                 .projection(function(d) {
@@ -130,8 +132,11 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
                 .attr('width', width + margin.right + margin.left)
                 .attr('height', height + margin.top + margin.bottom)
                 .select('g')
-                .attr('transform',
-                    'translate(' + margin.left + ',' + margin.top + ')');
+
+            .attr('transform',
+                'translate(' + margin.left + ',' + margin.right + ')');
+            //arrow
+            svg.append("svg:defs").append("svg:marker").attr("id", "arrow").attr("viewBox", "0 0 10 10").attr("refX", 26).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 6).attr("markerHeight", 9).attr("orient", "auto").append("svg:path").attr("d", "M 0 0 L 10 5 L 0 10 z");
 
             var root = data;
 
@@ -159,28 +164,30 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
                         return 'translate(' + d.y + ',' + d.x + ')';
                     });
 
-                nodeEnter.append('image')
-                    .attr('xlink:href', function(d) {
-                        return d.icon;
+                nodeEnter.append("image")
+                    .attr("xlink:href", function(d) {
+                        //return d.icon;
+                        return d.type === 'Table' ? '../img/tableicon.png' : '../img/process.png';
                     })
-                    .attr('x', '-12px')
-                    .attr('y', '-12px')
-                    .attr('width', '24px')
-                    .attr('height', '24px');
+                    .attr("x", "-12px")
+                    .attr("y", "-12px")
+                    .attr("width", "24px")
+                    .attr("height", "24px");
 
                 nodeEnter.append('text')
                     .attr('x', function(d) {
                         return d.children || d._children ?
-                            (15) * -1 : +15;
+                            (5) * -1 : +15;
                     })
-                    .attr('dy', '.35em')
+                    .attr('dy', '-1.35em')
                     .attr('text-anchor', function(d) {
-                        return d.children || d._children ? 'end' : 'start';
+                        return d.children || d._children ? 'middle' : 'middle';
                     })
                     .text(function(d) {
                         return d.name;
                     })
-                    .style('fill-opacity', 1);
+
+                .style('fill-opacity', 1);
 
                 // Declare the links…
                 var link = svg.selectAll('path.link')
@@ -188,12 +195,12 @@ angular.module('dgc.lineage').controller('LineageController', ['$element', '$sco
                         return d.target.id;
                     });
 
-                // Enter the links.
                 link.enter().insert('path', 'g')
                     .attr('class', 'link')
                     //.style('stroke', function(d) { return d.target.level; })
-                    .style('stroke', '#000')
+                    .style('stroke', 'green')
                     .attr('d', diagonal);
+                link.attr("marker-end", "url(#arrow)");
 
             }
 

dashboard/v2/public/modules/lineage/views/lineage.html

@@ -19,7 +19,7 @@
 <div class="lineage-viz" data-ng-controller="LineageController">
     <h4 data-ng-if="!requested && !lineageData">No lineage data found</h4>
     <i data-ng-if="requested" class="fa fa-spinner fa-spin fa-5x"></i>
-    <svg>
+    <svg >
         <g/>
     </svg>
 </div>