Use new API methods of d3-dag library

Author: gusevda

ui/components/DagGraph.tsx

@@ -83,17 +83,19 @@ function DagGraph({ className, nodes }: Props) {
   const linkStrokeWidth = 5;
 
   //use d3 to create DAG structure
-  const stratify = d3d.dagStratify();
-  const root = stratify(nodes);
+  const builder = d3d.graphStratify();
+  const graph = builder(nodes);
   const makeDag = d3d
     .sugiyama()
     .nodeSize(() => [
       nodeSize.width + nodeSize.horizontalSeparation,
       nodeSize.height + nodeSize.verticalSeparation,
     ]);
-  const { width } = makeDag(root);
-  const descendants = root.descendants();
-  const links = root.links();
+  const { width } = makeDag(graph);
+  const root = [...graph.roots()][0];
+
+  const descendants = root ? [...root.descendants()] : [];
+  const links = [...graph.links()];
 
   const graphOffsetX = zoomBox / 2 - width / 2;
   const verticalSeparationHalf = nodeSize.verticalSeparation / 2;

ui/components/ReconciliationGraph.tsx

@@ -137,6 +137,7 @@ export const Graph = ({
   const handleMouseUp = () => {
     setIsPanning(false);
   };
+  console.log('ReconciliationGraph');
   return (
     <Flex className={className} wide tall>
       <GraphDiv