Merge pull request #93 from oslabs-beta/staging

Staging

Author: crperezt

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 handleNoRenderData(isNoRenderData) {
+    setNoRenderData(isNoRenderData);
+  }
+
   // If indexToDisplay changes, clear old tree nodes
   useEffect(() => {
     while (svgRef.current.hasChildNodes()) {
@@ -70,19 +73,15 @@ 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;
 
     // 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));
@@ -106,8 +105,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();
@@ -154,8 +157,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,33 @@
+/* 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 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';
+import { spawn } from 'child_process';
+
+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(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 = () => {
     if (hierarchy) {
@@ -38,28 +44,39 @@ 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} width={600} height={1000}/>
-        </ErrorHandler>
-      );
-    }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return (
+      <ErrorHandler>
+        {perfChart}
+      </ErrorHandler>
+    );
   };
 
   return (
     <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 +88,4 @@ const StateRoute = (props:StateRouteProps) => {
   );
 };
 
-export default StateRoute;
+export default StateRoute;

src/app/components/Tree.tsx

@@ -14,8 +14,7 @@ interface TreeProps {
 
 const Tree = (props:TreeProps) => {
   const { snapshot } = props;
-
-  console.log('Tree -> snapshot', snapshot);
+  // console.log('Tree -> snapshot', snapshot);
 
   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;