merge to oslabs

Author: aquinojardim

package-lock.json

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
@@ -11,13 +12,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 */
 
@@ -32,10 +31,11 @@ interface PerfViewProps {
   viewIndex:number;
   width: number;
   height: number;
+  setNoRenderData: any;
 }
 
 const PerfView = (props:PerfViewProps) => {
-  const { snapshots, viewIndex, width, height } = props;
+  const { snapshots, viewIndex, width, height, setNoRenderData } = props;
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
 
@@ -47,7 +47,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
@@ -60,6 +60,10 @@ const PerfView = (props:PerfViewProps) => {
                     .sort((a:{value:number}, b:{value:number}) => { return b.value - a.value; }));
   }, [adjustedSize]);
 
+  function handleNoRenderData(isNoRenderData) {
+    setNoRenderData(isNoRenderData);
+  }
+
   // If indexToDisplay changes, clear old tree nodes
   useEffect(() => {
     while (svgRef.current.hasChildNodes()) {
@@ -75,7 +79,7 @@ const PerfView = (props:PerfViewProps) => {
 
     // Generate tree with our data
     const packedRoot = packFunc(snapshots[indexToDisplay]);
-    console.log('PerfView -> packedRoot', packedRoot);
+    // console.log('PerfView -> packedRoot', packedRoot);
 
     // Set initial focus to root node
     let curFocus = packedRoot;
@@ -84,10 +88,6 @@ const PerfView = (props:PerfViewProps) => {
     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)
     const svg = d3.select(svgRef.current)
       .attr('viewBox', `-${adjustedSize / 2} -${adjustedSize / 2} ${width} ${height}`)
       .on('click', () => zoomToNode(packedRoot));
@@ -111,9 +111,12 @@ const PerfView = (props:PerfViewProps) => {
       .enter().append('text')
         .style('fill-opacity', (d:{parent:object}) => (d.parent === packedRoot ? 1 : 0))
         .style('display', (d:{parent?:object}) => (d.parent === packedRoot ? 'inline' : 'none'))
-        .text((d:{data:{name:string, componentData?:{actualDuration:any}}}) =>  {
+        .text((d:{data:{name:string, componentData?:{actualDuration:any}}}) => {
+          // console.log("PerfView -> d.data", d.data);
+          if (!d.data.componentData.actualDuration) handleNoRenderData(true);
+          else handleNoRenderData(false);
           return `${d.data.name}: ${Number.parseFloat(d.data.componentData.actualDuration || 0).toFixed(2)}ms`;
-});
+        });
 
     // Remove any unused nodes
     label.exit().remove();
@@ -150,7 +153,7 @@ const PerfView = (props:PerfViewProps) => {
 
       curFocus = newFocus;
     }
-  }, [colorScale, packFunc, width, height, indexToDisplay, snapshots, adjustedSize]);
+  }, [colorScale, packFunc, width, height, indexToDisplay, snapshots, adjustedSize, handleNoRenderData]);
 
   return (
     <div className="perf-d3-container">
@@ -161,6 +164,3 @@ const PerfView = (props:PerfViewProps) => {
 };
 
 export default PerfView;
-
-    // d3.quantize(d3.interpolateHcl('#60c96e', '#4d4193'), 10);
-        // const colorScale = d3.scaleOrdinal(colorScheme);

src/app/components/PerfView.tsx

@@ -4,7 +4,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* 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';
 import Tree from './Tree';
 import PerfView from './PerfView';
@@ -24,6 +24,8 @@ interface StateRouteProps {
 
 const StateRoute = (props:StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
+  const [noRenderData, setNoRenderData] = useState(false);
+
   // 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
@@ -44,19 +46,26 @@ const StateRoute = (props:StateRouteProps) => {
     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 Performance graphic with snapshots
-  const renderPerfView = () => {
-    if (hierarchy) {
-      return (
-        <ErrorHandler>
-          <PerfView viewIndex={viewIndex} snapshots={snapshots} width={600} height={1000} />
-        </ErrorHandler>
-      );
-    }
-    return <div className="noState">{NO_STATE_MSG}</div>;
-  };
+  let perfChart;
+  if (!noRenderData) {
+    perfChart = (
+      <PerfView
+        viewIndex={viewIndex}
+        snapshots={snapshots}
+        setNoRenderData={setNoRenderData}
+        width={600}
+        height={1000}
+      />
+    );
+  } else {
+    perfChart = <div className="no-data-message">Rendering Data is not available for this application</div>;
+  }
+
+  const renderPerfView = () => (
+    <ErrorHandler>
+      {perfChart}
+    </ErrorHandler>
+  );
 
   return (
     <Router>

src/app/components/StateRoute.tsx

@@ -122,4 +122,4 @@ div.tooltip {
   fill: #2a2f3a;
   pointer-events: none;
   text-anchor: middle;
-};
+};

src/app/styles/components/d3graph.css

@@ -40,6 +40,14 @@
   @extend %disable-highlight
 }
 
+
+.no-data-message {
+  font: 1.2em sans-serif;
+  padding: 10px;
+  // margin: 10px;
+  color: hsl(0%, 50%, 50%);
+}
+
 .state-container {
   .main-navbar-text {
     margin: 6px;

src/app/styles/layout/_stateContainer.scss

@@ -237,8 +237,10 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-    const throttledUpdateSnapshot = throttle(updateSnapShotTree, 140);
+
+    const throttledUpdateSnapshot = throttle(updateSnapShotTree, 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
+
     if (reactInstance && reactInstance.version) {
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {