started adding useState to StateRoute for no render data

Author: gpanciera

src/app/components/PerfView.tsx

@@ -6,13 +6,11 @@
 /* eslint-disable no-plusplus */
 /* eslint-disable func-names */
 /* eslint-disable no-shadow */
-/* eslint-disable no-multi-spaces */
 /* eslint-disable newline-per-chained-call */
 /* eslint-disable object-curly-newline */
 /* eslint-disable object-property-newline */
 /* eslint-disable class-methods-use-this */
 // eslint-disable-next-line object-curly-newline
-/* eslint-disable comma-dangle */
 /* eslint-disable indent */
 /* eslint-disable no-console */
 
@@ -23,15 +21,16 @@ import { schemeSet1 as colorScheme } from 'd3';
 // import { addNewSnapshots } from '../actions/actions.ts';
 
 interface PerfViewProps {
-  snapshots:any[]; 
-  viewIndex:number; 
+  snapshots:any[];
+  viewIndex:number;
   width: number;
   height: number;
+  setNoRenderData: any;
 }
 
 const PerfView = (props:PerfViewProps) => {
-  const { snapshots, viewIndex, width, height } = props
-  let adjustedSize = Math.min(width, height);
+  const { snapshots, viewIndex, width, height, setNoRenderData } = props;
+  const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
 
   // Figure out which snapshot index to use
@@ -42,7 +41,7 @@ const PerfView = (props:PerfViewProps) => {
   // Set up color scaling function
   const colorScale = d3.scaleLinear()
     .domain([0, 7])
-    .range(['hsl(200,60%,60%)', 'hsl(255,30%,60%)'])
+    .range(['hsl(200,60%,60%)', 'hsl(255,30%,40%)'])
     .interpolate(d3.interpolateHcl);
 
   // Set up circle-packing layout function
@@ -55,6 +54,10 @@ const PerfView = (props:PerfViewProps) => {
                     .sort((a:{value:number}, b:{value:number}) => { return b.value - a.value; }));
   }, [adjustedSize]);
 
+  function onNoRenderData() {
+    setNoRenderData(false);
+  }
+
   // If indexToDisplay changes, clear old tree nodes
   useEffect(() => {
     while (svgRef.current.hasChildNodes()) {
@@ -78,11 +81,7 @@ const PerfView = (props:PerfViewProps) => {
     // View [x, y, r]
     let view;
 
-    // Set up viewBox dimensions and onClick for parent svg
- 
-    // console.log("PerfView -> height", height)
-    // console.log("PerfView -> width", width)
-    // console.log("PerfView -> adjustedSize", adjustedSize)
+    // Set up viewBox dimensions and onClick for parent svg 
     const svg = d3.select(svgRef.current)
       .attr('viewBox', `-${adjustedSize / 2} -${adjustedSize / 2} ${width} ${height}`)
       .on('click', () => zoomToNode(packedRoot));
@@ -154,8 +153,4 @@ const PerfView = (props:PerfViewProps) => {
     );
 };
 
-export default PerfView;
-
-
-    // d3.quantize(d3.interpolateHcl('#60c96e', '#4d4193'), 10);
-        // const colorScale = d3.scaleOrdinal(colorScheme);
+export default PerfView;

src/app/components/StateRoute.tsx

@@ -1,27 +1,27 @@
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
-import React from 'react';
+import React, { useState } from 'react';
 import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
-
-
-const Chart = require('./Chart').default;
 import Tree from './Tree';
 import PerfView from './PerfView';
+
+const Chart = require('./Chart').default;
 const ErrorHandler = require('./ErrorHandler').default;
 
 const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
 // eslint-disable-next-line react/prop-types
 
-
 interface StateRouteProps {
-  snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; }; 
-  hierarchy: object; 
-  snapshots: []; 
+  snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; };
+  hierarchy: object;
+  snapshots: [];
   viewIndex: number;
 }
 
 const StateRoute = (props:StateRouteProps) => {
-  const { snapshot, hierarchy, snapshots, viewIndex } = props
+  const { snapshot, hierarchy, snapshots, viewIndex } = props;
+  const [noRenderData, setNoRenderData] = useState(true);
+
   // gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was initialize involk render chart
   const renderChart = () => {
     if (hierarchy) {
@@ -42,7 +42,7 @@ const StateRoute = (props:StateRouteProps) => {
     if (hierarchy) {
       return (
         <ErrorHandler>
-          <PerfView viewIndex={viewIndex} snapshots={snapshots} width={600} height={1000}/>
+          <PerfView viewIndex={viewIndex} snapshots={snapshots} setNoRenderData={setNoRenderData} width={600} height={1000} />
         </ErrorHandler>
       );
     }
@@ -53,13 +53,13 @@ const StateRoute = (props:StateRouteProps) => {
     <Router>
       <div className="navbar">
         <NavLink className="router-link" activeClassName="is-active" exact to="/">
-        Tree
+          Tree
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/chart">
-        History
+          History
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/performance">
-        Performance
+          Performance
         </NavLink>
       </div>
       <Switch>
@@ -71,4 +71,4 @@ const StateRoute = (props:StateRouteProps) => {
   );
 };
 
-export default StateRoute;
+export default StateRoute;

src/backend/linkFiber.ts

@@ -111,10 +111,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration,
     } = currentFiber;
 
-<<<<<<< HEAD
-    let newState: any = {};
-    let componentData: ComponentData = {};
-=======
     let newState: any;
     let componentData: ComponentData = {};
     /* = {
@@ -125,7 +121,6 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
       treeBaseDuration: 0,
     };
     */
->>>>>>> master
     let componentFound = false;
 
     // Check if node is a stateful setState component
@@ -182,10 +177,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
     let newNode = null;
     // We want to add this fiber node to the snapshot
-<<<<<<< HEAD
-=======
     // const snapshotState = newState.state || newState.hooksState;
->>>>>>> master
     if (componentFound || newState === 'stateless') {
       if (fromSibling) {
         newNode = tree.addSibling(newState,
@@ -229,10 +221,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
 
   function onVisibilityChange(): void {
     doWork = !document.hidden;
-<<<<<<< HEAD
-=======
     // console.log('doWork is:', doWork);
->>>>>>> master
   }
 
   return () => {