Merge pull request #9 from kevinfey/chart

Change data input into Map.tsx d3.hierachy. Add CSS for sticky Navbar z=1

Author: haejinjo

src/app/components/Chart.tsx

@@ -30,8 +30,6 @@ const filterHooks = (data: any[]) => {
   return JSON.stringify(data[0].state);
 };
 
-//const filterRecoil = (data: any[]) => {};
-
 interface ChartProps {
   hierarchy: Record<string, unknown>;
 }
@@ -76,14 +74,9 @@ class Chart extends Component {
    */
   maked3Tree(): void {
     this.removed3Tree();
-    // const margin = {
-    //   top: 0,
-    //   right: 60,
-    //   bottom: 200,
-    //   left: 120,
-    // };
-    const width = 600; // - margin.right - margin.left;
-    const height = 600; // 700 - margin.top - margin.bottom;
+  
+    const width = 800; 
+    const height = 600; 
     const svgContainer = d3
       .select(this.chartRef.current)
       .append('svg') // svgContainer is now pointing to svg

src/app/components/Map.tsx

@@ -8,12 +8,12 @@ import React, { useState, useEffect } from 'react';
 import * as d3 from 'd3';
 
 const Map = (props) => {
-  // Current snapshot
-  const { snapshot } = props;
-  console.log('MAP SNAPSHOT', snapshot);
+ 
+  const { snapshot, snapshots} = props;
+  const lastSnap = snapshots.length -1
 
   // set the heights and width of the tree to be passed into treeMap function
-  const width: number = 1100;
+  const width: number = 900;
   const height: number = 600;
 
   // this state allows the canvas to stay at the zoom level on multiple re-renders
@@ -22,15 +22,9 @@ const Map = (props) => {
     setZoomState(d3.zoomTransform(d3.select('#canvas').node()));
   }, [snapshot.children]);
 
-  // Create D3 Tree Diagram 
+  // Create D3 Tree Diagram
   useEffect(() => {
 
-    const appState: any = {
-      name: ' Root',
-      children: snapshot.children,
-    };
-    console.log('STATE', appState);
-
     document.getElementById('canvas').innerHTML = '';
 
     // creating the main svg container for d3 elements
@@ -44,12 +38,11 @@ const Map = (props) => {
       .append('g')
       .attr('transform', `translate(${x}, ${y}), scale(${k})`); // sets the canvas to the saved zoomState
 
-   
     // creating the tree map
     const treeMap: any = d3.tree().nodeSize([width, height]);
 
     // creating the nodes of the tree
-    const hierarchyNodes: any = d3.hierarchy(appState);
+    const hierarchyNodes: any = d3.hierarchy(snapshots[lastSnap]);
 
     // calling the tree function with nodes created from data
     const finalMap: any = treeMap(hierarchyNodes);
@@ -110,7 +103,6 @@ const Map = (props) => {
       .attr('stroke', '#646464')
       .attr('stroke-width', 2);
 
-
     // display the data in the node on hover
     node.on('mouseover', function (d: any, i: number): any {
       if (!d.children) {
@@ -142,24 +134,24 @@ const Map = (props) => {
     );
 
     // allows the canvas to be zoom-able
- // d3 zoom functionality
- let zoom = d3.zoom().on('zoom', zoomed);
- svgContainer.call(
-   zoom.transform,
-   // Changes the initial view, (left, top)
-   d3.zoomIdentity.translate(150, 250).scale(0.2),
- );
- // allows the canvas to be zoom-able
- svgContainer.call(
-   d3
-     .zoom()
-     .scaleExtent([0.05, 0.9]) // [zoomOut, zoomIn]
-     .on('zoom', zoomed),
- );
- // helper function that allows for zooming
- function zoomed(d: any) {
-   g.attr('transform', d3.event.transform);
- }
+    // d3 zoom functionality
+    let zoom = d3.zoom().on('zoom', zoomed);
+    svgContainer.call(
+      zoom.transform,
+      // Changes the initial view, (left, top)
+      d3.zoomIdentity.translate(150, 250).scale(0.2)
+    );
+    // allows the canvas to be zoom-able
+    svgContainer.call(
+      d3
+        .zoom()
+        .scaleExtent([0.05, 0.9]) // [zoomOut, zoomIn]
+        .on('zoom', zoomed)
+    );
+    // helper function that allows for zooming
+    function zoomed(d: any) {
+      g.attr('transform', d3.event.transform);
+    }
 
     // helper functions that help with dragging functionality
     function dragStarted(): any {
@@ -176,8 +168,6 @@ const Map = (props) => {
     function dragEnded(): any {
       g.attr('cursor', 'grab');
     }
-
-    
   });
 
   return (

src/app/components/StateRoute.tsx

@@ -43,7 +43,7 @@ const StateRoute = (props: StateRouteProps) => {
   //Test Map
   const renderMap = () => {
     if (hierarchy) {
-      return <Map snapshot={snapshot} />;
+      return <Map snapshot={snapshot} snapshots={snapshots} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
@@ -83,6 +83,8 @@ const StateRoute = (props: StateRouteProps) => {
       />
     );
   }
+  
+  //This will intermitently block Recoil PerfCharts from rendering
   // else {
   //   perfChart = (
   //     <div className="no-data-message">

src/app/styles/layout/_stateContainer.scss

@@ -1,10 +1,12 @@
 .state-container {
   font-size: 12px;
   overflow: auto;
+  
   background-color: $brand-color;
 }
 
 .state-container .navbar {
+
   background-color: $navbar-color;
   display: flex;
   flex-direction: row;
@@ -14,15 +16,21 @@
 }
 
 .state-container .main-navbar{
+
   background-color: #565A61;
   display: flex;
   flex-direction: row;
+  justify-content: flex-start;
   align-items: center;
   height: 40px;
   margin: 6px;
 }
 
 .state-container .main-navbar-container{
+  position: sticky ;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
   background-color: #565A61;
   display: flex;
   flex-direction: row;
@@ -33,7 +41,7 @@
 
 .navbar {
   // prevent navbar from scrolling with state/tree display
-  position: sticky;
+  position: sticky ;
   top: 0px;
   left: 0px;
   z-index: 1;