⚙️ Fixes dependency tree-view

app/components/Workflow/DependencyTree/DependencyTree.css

@@ -8,3 +8,19 @@
   height: inherit !important;
   position: fixed;
 }
+
+.node__root > circle {
+  stroke-width: 9px;
+  stroke:maroon;
+  fill:pink;
+}
+
+.node__branch > circle {
+  fill:dodgerblue;
+}
+
+.node__leaf > circle {
+  stroke-width: 8px;
+  stroke:darkslategrey;
+  fill:rgb(174, 209, 174);
+}

app/components/Workflow/DependencyTree/DependencyTreeD3.js

@@ -1,25 +1,40 @@
 import React from 'react';
 import Tree from 'react-d3-tree';
 import WorkflowUtil from '../../../utils/workflow';
-import CodeNode from '../DependencyGraph/CustomNodes/Code/CodeNode';
+import AssetUtil from '../../../utils/asset';
 import styles from './DependencyTree.css';
 
-const renderCodeNode = node => (
-  <CodeNode
-    renderType="svg"
-    node={{ name: node.nodeDatum.name, assetType: node.nodeDatum.attributes.assetType }}
-  />
-);
-
-const dependencyGraphD3 = props => {
+const dependencyGraphD3 = (props) => {
   const { assets } = props;
 
-  const data = WorkflowUtil.getAllDependenciesAsTree(assets);
+  const data = WorkflowUtil.getAllDependenciesAsTree(AssetUtil.filterIncludedFileAssets(assets));
   let tree = null;
   if (data) {
-    tree = <Tree data={data} renderCustomNodeElement={renderCodeNode} />;
+    tree = (
+      <Tree
+        data={data}
+        initialDepth={2}
+        depthFactor={750}
+        separation={{
+          siblings: 0.4,
+          nonSiblings: 0.8,
+        }}
+        dimensions={{ height: window.innerHeight / 2, width: (2 * window.innerWidth) / 3 }}
+        pathFunc={'step'}
+        zoom={0.4}
+        scaleExtent={{ max: 2, min: 0.1 }}
+        translate={{ x: 10, y: window.innerHeight / 3 }}
+        rootNodeClassName={styles.node__root}
+        branchNodeClassName={styles.node__branch}
+        leafNodeClassName={styles.node__leaf}
+      />
+    );
   }
-  return <div className={styles.container}>{tree}</div>;
+  return (
+    <div style={{ width: '100%', height: '75vh', fontSize: '2.1em', fontFamily: 'monospace' }}>
+      {tree}
+    </div>
+  );
 };
 
 export default dependencyGraphD3;

app/components/Workflow/DependencyTree/DependencyTreeEChart.js

@@ -4,7 +4,7 @@ import WorkflowUtil from '../../../utils/workflow';
 import AssetUtil from '../../../utils/asset';
 import styles from './DependencyTree.css';
 
-const dependencyGraphEChart = props => {
+const dependencyGraphEChart = (props) => {
   const { assets } = props;
 
   const data = WorkflowUtil.getAllDependenciesAsTree(AssetUtil.filterIncludedFileAssets(assets));
@@ -13,7 +13,7 @@ const dependencyGraphEChart = props => {
     const option = {
       tooltip: {
         trigger: 'item',
-        triggerOn: 'mousemove'
+        triggerOn: 'mousemove',
       },
       series: [
         {
@@ -26,16 +26,16 @@ const dependencyGraphEChart = props => {
           initialTreeDepth: 2,
           label: {
             position: 'left',
-            align: 'right'
+            align: 'right',
           },
           leaves: {
             label: {
               position: 'right',
-              align: 'left'
-            }
-          }
-        }
-      ]
+              align: 'left',
+            },
+          },
+        },
+      ],
     };
     tree = <ReactECharts option={option} style={{ height: '100%', width: '100%' }} />;
   }