add handling for missing render data

Author: gpanciera

src/app/components/PerfView.tsx

@@ -54,8 +54,9 @@ const PerfView = (props:PerfViewProps) => {
                     .sort((a:{value:number}, b:{value:number}) => { return b.value - a.value; }));
   }, [adjustedSize]);
 
-  function onNoRenderData() {
-    setNoRenderData(false);
+  function handleNoRenderData(isNoRenderData) {
+    console.log("lick balls", isNoRenderData);
+    setNoRenderData(isNoRenderData);
   }
 
   // If indexToDisplay changes, clear old tree nodes
@@ -105,8 +106,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}}}) =>  {
-          return `${d.data.name}: ${Number.parseFloat(d.data.componentData.actualDuration || 0).toFixed(2)}ms`});
+        .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();

src/app/components/StateRoute.tsx

@@ -1,9 +1,15 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react/jsx-first-prop-new-line */
+/* eslint-disable no-trailing-spaces */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable react/jsx-one-expression-per-line */
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
 import React, { useState } from 'react';
 import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
 import Tree from './Tree';
 import PerfView from './PerfView';
+import { spawn } from 'child_process';
 
 const Chart = require('./Chart').default;
 const ErrorHandler = require('./ErrorHandler').default;
@@ -20,7 +26,7 @@ interface StateRouteProps {
 
 const StateRoute = (props:StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
-  const [noRenderData, setNoRenderData] = useState(true);
+  const [noRenderData, setNoRenderData] = useState(false);
 
   // 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 = () => {
@@ -38,15 +44,26 @@ const StateRoute = (props:StateRouteProps) => {
     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 = () => {
-    if (hierarchy) {
-      return (
-        <ErrorHandler>
-          <PerfView viewIndex={viewIndex} snapshots={snapshots} setNoRenderData={setNoRenderData} width={600} height={1000} />
-        </ErrorHandler>
-      );
-    }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return (
+      <ErrorHandler>
+        {perfChart}
+      </ErrorHandler>
+    );
   };
 
   return (

src/app/styles/components/d3graph.css

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

src/app/styles/layout/_stateContainer.scss

@@ -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;