getting johns pr

Author: diegovazquezny

app/src/tree/TreeChart.tsx

@@ -1,6 +1,8 @@
 import React, { useRef, useEffect, useContext } from "react";
 import { select, hierarchy, tree, linkHorizontal } from "d3";
 import { stateContext } from '../context/context';
+
+// i don't think this does what i need it to do
 import useResizeObserver from "./useResizeObserver";
 
 function usePrevious(value) {
@@ -15,6 +17,8 @@ function TreeChart({ data }) {
   const [state, dispatch] = useContext(stateContext);
   const svgRef = useRef();
   const wrapperRef = useRef();
+
+  // this needs to be modified
   const dimensions = useResizeObserver(wrapperRef);
   console.log('dimensions', dimensions);
 
@@ -33,11 +37,12 @@ function TreeChart({ data }) {
 
     console.log('width', width);
     console.log('height', height);
+
     // transform hierarchical data
     const root = hierarchy(data[0]);
     const treeLayout = tree().size([height, width]);
 
-    // Returns a new link generator with horizontal tangents. 
+    // Returns a new link generator with horizontal display. 
     // To visualize links in a tree diagram rooted on the left edge of the display
     const linkGenerator = linkHorizontal()
       .x(link => link.y)
@@ -46,7 +51,7 @@ function TreeChart({ data }) {
     // insert our data into the tree layout
     treeLayout(root);
 
-    // nodes - each element in the tree
+    // node - each element in the tree
     svg
       .selectAll(".node")
       .data(root.descendants())
@@ -62,7 +67,7 @@ function TreeChart({ data }) {
       .attr("r", 4) // radius of circle
       .attr("opacity", 1);
 
-    // links - lines that connect the nodes
+    // link - lines that connect the nodes
     const enteringAndUpdatingLinks = svg
       .selectAll(".link")
       .data(root.links())

package.json

@@ -110,6 +110,7 @@
     "connected-react-router": "^6.8.0",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
+    "d3": "^6.2.0",
     "electron-debug": "^3.1.0",
     "electron-devtools-installer": "^2.2.4",
     "electron-splashscreen": "^1.0.0",
@@ -118,9 +119,9 @@
     "immutable": "^4.0.0-rc.12",
     "js-cookie": "^2.2.1",
     "localforage": "^1.7.2",
+    "node-fetch": "^2.6.0",
     "passport": "^0.4.1",
     "passport-github2": "^0.1.12",
-    "node-fetch": "^2.6.0",
     "prettier": "^1.19.1",
     "prop-types": "^15.6.2",
     "react": "^16.13.0",
@@ -129,6 +130,7 @@
     "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.4.1",
     "react-router-dom": "^5.2.0",
+    "resize-observer-polyfill": "^1.5.1",
     "seamless-immutable": "^7.1.4",
     "source-map-support": "^0.5.19",
     "uuid": "^8.2.0"