Merge pull request #15 from kevinfey/cleanup

Rename Frontend files for clarity

Author: hienqn

src/app/__tests__/ComponentMap.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import ComponentMap from '../components/ComponentMap'
+import * as d3 from 'd3'
+
+describe('canvas', ()=> {
+  const getCanvas = () => {
+    console.log(d3.select('#canvas'))
+    return d3.select('#canvas')
+  }
+
+  it ('should exist', ()=>{
+    expect(getCanvas()).not.toBeNull();
+  })
+})

src/app/__tests__/Chart.test.tsx renamed to src/app/__tests__/History.test.tsx

@@ -7,21 +7,40 @@
 import React from 'react';
 import { configure, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
+import History from '../components/History';
 
-const Chart = require('../components/Chart').default;
 
 // Unit test cases for d3 functionality
 configure({ adapter: new (Adapter as any)() });
 
-// Test the life cycle methods in Chart
-describe('Life cycle methods in Chart', () => {
+// Test the life cycle methods in History
+describe('Life cycle methods in History', () => {
   let wrapper;
   const props = {
-    hierarchy: 0,
+    hierarchy: {
+      branch: 0,
+      children : [
+        {
+          index:1,
+          name:2,
+          branch:0,
+          stateSnapshot:{},
+          children: []
+        }
+      ],
+      index : 0,
+      name : 1,
+      stateSnapshot : {
+        children:[{}],
+        componentData: {},
+        name: "root",
+        state: "root"
+      }
+    },
   };
   // Set up wrapper
   beforeEach(() => {
-    wrapper = mount(<Chart {...props} />);
+    wrapper = mount(<History {...props} />);
   });
   // test componentDidMount
   it('should call componentDidMount once', () => {
@@ -65,7 +84,7 @@ describe('Root object', () => {
   };
   // Set up wrapper
   beforeEach(() => {
-    wrapper = mount(<Chart {...props} />);
+    wrapper = mount(<History {...props} />);
   });
 
   // eslint-disable-next-line jest/no-disabled-tests
@@ -85,7 +104,7 @@ describe('maked3Tree method', () => {
   };
   // Set up wrapper
   beforeEach(() => {
-    wrapper = mount(<Chart {...props} />);
+    wrapper = mount(<History {...props} />);
   });
   // Test the invocation of removed3Tree within maked3Tree
   it('should call removed3Tree once', () => {

src/app/components/Map.tsx renamed to src/app/components/ComponentMap.tsx

@@ -4,20 +4,29 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/ban-types */
 
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
 
-const Map = (props) => {
+interface componentMapProps {
+  x: number;
+  y: number;
+  k: number;
+  setZoomState: any;
+  snapshots: [];
+  viewIndex: number;
+}
+
+const ComponentMap = (props: componentMapProps) => {
   //import props
-  const { viewIndex, snapshots ,x ,y, k, setZoomState} = props;
+  const { viewIndex, snapshots ,x , y, k, setZoomState} = props;
   let lastSnap: number | null = null;
   if (viewIndex < 0) lastSnap = snapshots.length - 1;
   else lastSnap = viewIndex;
 
   //external constants
   const width: number = 900;
   const height: number = 600;
-  let data = snapshots[lastSnap];
+  let data: Object = snapshots[lastSnap];
 
   useEffect(() => {
     document.getElementById('canvas').innerHTML = '_';
@@ -75,7 +84,7 @@ const Map = (props) => {
 
       // declare re render funciton to handle collapse and expansion of nodes
       const update = (source) => {
-        const duration = 0;
+        const duration = 250;
         const nodes = root.descendants().reverse();
         const links = root.links();
 
@@ -251,4 +260,4 @@ const Map = (props) => {
   );
 };
 
-export default Map;
+export default ComponentMap;

src/app/components/Chart.tsx renamed to src/app/components/History.tsx

@@ -30,27 +30,26 @@ const filterHooks = (data: any[]) => {
   return JSON.stringify(data[0].state);
 };
 
-interface ChartProps {
+interface HistoryProps {
   hierarchy: Record<string, unknown>;
 }
 
 let root = {};
-class Chart extends Component {
+class History extends Component {
   /**
    * @method maked3Tree :Creates a new D3 Tree
    */
-  constructor(props: ChartProps) {
+  constructor(props: HistoryProps) {
     super(props);
     // what React.createRef() is doing.
-    this.chartRef = React.createRef();
+    this.HistoryRef = React.createRef();
     this.maked3Tree = this.maked3Tree.bind(this);
     this.removed3Tree = this.removed3Tree.bind(this);
     this.isRecoil = false;
   }
 
   componentDidMount() {
     const { hierarchy } = this.props;
-    console.log('HIERARCHYYYYY', hierarchy);
     root = JSON.parse(JSON.stringify(hierarchy));
     this.maked3Tree();
   }
@@ -62,23 +61,23 @@ class Chart extends Component {
   }
 
   removed3Tree() {
-    const { current } = this.chartRef;
+    const { current } = this.HistoryRef;
     while (current.hasChildNodes()) {
       current.removeChild(current.lastChild);
     }
   }
 
   /**
-   * @method maked3Tree Creates a new Tree Chart
+   * @method maked3Tree Creates a new Tree History
    * @var
    */
   maked3Tree(): void {
     this.removed3Tree();
-  
-    const width = 800; 
-    const height = 600; 
+    console.log("HIEARARCHY", this.props.hierarchy)
+    const width : number = 800;
+    const height : number = 600;
     const svgContainer = d3
-      .select(this.chartRef.current)
+      .select(this.HistoryRef.current)
       .append('svg') // svgContainer is now pointing to svg
       .attr('width', width)
       .attr('height', height);
@@ -88,19 +87,13 @@ class Chart extends Component {
       // this is changing where the graph is located physically
       .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`);
 
-    // if we consider the container for our radial node graph as a box encapsulating
-    // half of this container width is essentially the radius of our radial node graph
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const radius = width / 2;
-
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
     const hierarchy = d3.hierarchy(root);
 
     const tree = d3
       .tree()
-      // this assigns width of tree to be 2pi
-      // .size([2 * Math.PI, radius / 1.3])
+
       .nodeSize([width / 10, height / 10])
       // .separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
       .separation(function (a: { parent: object }, b: { parent: object }) {
@@ -227,21 +220,12 @@ class Chart extends Component {
         return `${d.data.name}.${d.data.branch}`;
       });
 
-    // allows svg to be dragged around
-    node.call(
-      d3
-        .drag()
-        .on('start', dragstarted)
-        .on('drag', dragged)
-        .on('end', dragended)
-    );
-
-    // d3 zoom functionality
+    // Zoom Functions
     let zoom = d3.zoom().on('zoom', zoomed);
     svgContainer.call(
       zoom.transform,
       // Changes the initial view, (left, top)
-      d3.zoomIdentity.translate(width/2, height/2).scale(1)
+      d3.zoomIdentity.translate(width / 2, height / 2).scale(1)
     );
     // allows the canvas to be zoom-able
     svgContainer.call(
@@ -255,7 +239,15 @@ class Chart extends Component {
       g.attr('transform', d3.event.transform);
     }
 
-    // Drag
+    // DRAG FUNCTIONS
+    node.call(
+      d3
+        .drag()
+        .on('start', dragstarted)
+        .on('drag', dragged)
+        .on('end', dragended)
+    );
+    
     function dragstarted() {
       d3.select(this).raise();
       g.attr('cursor', 'grabbing');
@@ -286,10 +278,10 @@ class Chart extends Component {
   render() {
     return (
       <div className="history-d3-container">
-        <div ref={this.chartRef} className="history-d3-div" />
+        <div ref={this.HistoryRef} className="history-d3-div" />
       </div>
     );
   }
 }
 
-export default Chart;
+export default History;

src/app/components/StateRoute.tsx

@@ -12,17 +12,14 @@ import {
   Switch,
 } from 'react-router-dom';
 import Tree from './Tree';
-import Map from './Map';
+import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
 
-
-
-const Chart = require('./Chart').default;
+const History = require('./History').default;
 
 const ErrorHandler = require('./ErrorHandler').default;
 
-const NO_STATE_MSG =
-  'No state change detected. Trigger an event to change state';
+const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
 
 interface StateRouteProps {
@@ -46,20 +43,21 @@ const StateRoute = (props: StateRouteProps) => {
     y: 250,
     k: 0.75,
   });
+
   //Map
-  const renderMap = () => {
+  const renderComponentMap = () => {
     if (hierarchy) {
-      return <Map viewIndex={viewIndex} snapshots={snapshots} x={x} y={y} k={k} setZoomState={setZoomState} />;
+      return <ComponentMap viewIndex={viewIndex} snapshots={snapshots} x={x} y={y} k={k} setZoomState={setZoomState} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
   // the hierarchy gets set on the first click in the page
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
   // if true involk render chart with hierarchy
-  const renderChart = () => {
+  const renderHistory = () => {
     if (hierarchy) {
-      return <Chart hierarchy={hierarchy} />;
+      return <History hierarchy={hierarchy} />;
     }
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
@@ -87,7 +85,7 @@ const StateRoute = (props: StateRouteProps) => {
       />
     );
   }
-  
+
   //This will intermitently block Recoil PerfCharts from rendering
   // else {
   //   perfChart = (
@@ -114,7 +112,7 @@ const StateRoute = (props: StateRouteProps) => {
         <NavLink
           className="router-link"
           activeClassName="is-active"
-          to="/chart"
+          to="/history"
         >
           History
         </NavLink>
@@ -130,8 +128,8 @@ const StateRoute = (props: StateRouteProps) => {
         </NavLink>
       </div>
       <Switch>
-        <Route path="/map" render={renderMap}  />
-        <Route path="/chart" render={renderChart} />
+        <Route path="/map" render={renderComponentMap} />
+        <Route path="/history" render={renderHistory} />
         <Route path="/performance" render={renderPerfView} />
         <Route path="/" render={renderTree} />
       </Switch>