tree displaying correctly

Author: diegovazquezny

app/src/components/bottom/CodePreview.tsx

@@ -22,6 +22,8 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const optionColor = '#252526';
+
 const CodePreview = () => {
   const [state, dispatch] = useContext(stateContext);
   const [theme, setTheme] = useState('monokai');
@@ -60,11 +62,11 @@ const CodePreview = () => {
           value={theme}
           onChange={changeTheme}
         >
-          <option value={'monokai'}>Monokai</option>
-          <option value={'github'}>Github</option>
-          <option value={'solarized_dark'}>Solarized Dark</option>
-          <option value={'terminal'}>Terminal</option>
-          <option value={'solarized_light'}>Solarized Light</option>
+          <option value={'monokai'} style={{backgroundColor: optionColor}}>Monokai</option>
+          <option value={'github'} style={{backgroundColor: optionColor}}>Github</option>
+          <option value={'solarized_dark'} style={{backgroundColor: optionColor}}>Solarized Dark</option>
+          <option value={'terminal'} style={{backgroundColor: optionColor}}>Terminal</option>
+          <option value={'solarized_light'} style={{backgroundColor: optionColor}}>Solarized Light</option>
         </NativeSelect>
       </FormControl>
       <AceEditor

app/src/tree/TreeChart.tsx

@@ -1,8 +1,5 @@
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect } 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) {
@@ -14,14 +11,14 @@ function usePrevious(value) {
 }
 
 function TreeChart({ data }) {
-  const [state, dispatch] = useContext(stateContext);
   const svgRef = useRef();
   const wrapperRef = useRef();
+   
+  const xPosition = 50;
+  const textAndBorderColor = 'rgb(51, 235, 145)';
 
-  // this needs to be modified
   const dimensions = useResizeObserver(wrapperRef);
-  console.log('dimensions', dimensions);
-
+ 
   // we save data to see if it changed
   const previouslyRenderedData = usePrevious(data);
 
@@ -34,14 +31,10 @@ function TreeChart({ data }) {
     // (dimensions are null for the first render)
     const { width, height } =
       dimensions || wrapperRef.current.getBoundingClientRect();
-    
-    console.log('width', width);
-    console.log('height', height);
-
     // transform hierarchical data
     const root = hierarchy(data[0]);
-    const treeLayout = tree().size([height, width]);
-
+    const treeLayout = tree().size([height, width-125]);
+    
     // 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()
@@ -62,10 +55,13 @@ function TreeChart({ data }) {
         cx: The position of the centre of the element in the x axis measured from the left side of the screen.
         cy: The position of the centre of the element in the y axis measured from the top of the screen.
       */
-      .attr("cx", node => node.y)
-      .attr("cy", node => node.x)
-      .attr("r", 4) // radius of circle
-      .attr("opacity", 1);
+     // translate (x, y)
+     .attr("cx", node => node.y)
+     .attr("cy", node => node.x)
+     .attr("r", 4) // radius of circle
+     .attr("opacity", 1)
+     .style('fill', 'white')
+     .attr("transform", `translate(${xPosition}, 0)`);
 
     // link - lines that connect the nodes
     const enteringAndUpdatingLinks = svg
@@ -74,14 +70,11 @@ function TreeChart({ data }) {
       .join("path")
       .attr("class", "link")
       .attr("d", linkGenerator)
-      .attr("stroke-dasharray", function() {
-        const length = this.getTotalLength();
-        return `${length} ${length}`;
-      })
-      .attr("stroke", "black")
+      .attr("stroke", "white")
       .attr("fill", "none")
-      .attr("opacity", 1);
-
+      .attr("opacity", 1)
+      .attr("transform", `translate(${xPosition}, 0)`);
+      
     if (data !== previouslyRenderedData) {
       enteringAndUpdatingLinks
         .attr("stroke-dashoffset", function() {
@@ -93,20 +86,37 @@ function TreeChart({ data }) {
     // label - the names of each html element (node)
     svg
       .selectAll(".label")
-      .data(root.descendants())
+      .data(root.descendants())    
       .join(enter => enter.append("text").attr("opacity", 0))
       .attr("class", "label")
       .attr("x", node => node.y)
       .attr("y", node => node.x - 12)
       .attr("text-anchor", "middle")
-      .attr("font-size", 24)
+      .attr("font-size", 18)
+      .style('fill', textAndBorderColor)
       .text(node => node.data.name)
-      .attr("opacity", 1);
+      .attr("opacity", 1)
+      .attr("transform", `translate(${xPosition}, 0)`);
   }, [data, dimensions, previouslyRenderedData]);
 
+  const treeStyles = {
+    height: '100%',
+    width: `100%`,
+    margin: '10px 10px 10px 10px',
+    overflow: 'auto'
+  }
+
+  const wrapperStyles = {
+    border: `2px solid ${textAndBorderColor}`,
+    borderRadius: '8px',
+    width: '100%',
+    height: '90%',
+    display: 'flex',
+    justifyContent: 'center',
+  }
   return (
-    <div ref={wrapperRef} style={{ marginBottom: "2rem" }}>
-      <svg ref={svgRef}></svg>
+    <div ref={wrapperRef} style={wrapperStyles}>
+      <svg ref={svgRef} style={treeStyles}></svg>
     </div>
   );
 }

app/src/tree/useResizeObserver.js

@@ -4,9 +4,11 @@ import ResizeObserver from "resize-observer-polyfill";
 const useResizeObserver = ref => {
   const [dimensions, setDimensions] = useState(null);
   useEffect(() => {
+    // the element being observed (div with green border)
     const observeTarget = ref.current;
     const resizeObserver = new ResizeObserver(entries => {
-      entries.forEach(entry => {
+        entries.forEach(entry => {
+          // contentRect is an object containing the dimensions of the observed element
         setDimensions(entry.contentRect);
       });
     });
@@ -15,7 +17,7 @@ const useResizeObserver = ref => {
       resizeObserver.unobserve(observeTarget);
     };
   }, [ref]);
-  return dimensions;
+  return dimensions; // { height, width }
 };
 
 export default useResizeObserver;