Merge branch 'master' into feature4

Author: crperezt

.gitmodules

@@ -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,14 +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
+  const { snapshots, viewIndex, width, height, setNoRenderData } = props;
+  const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
 
   // Figure out which snapshot index to use
@@ -41,19 +41,22 @@ const PerfView = (props:PerfViewProps) => {
   // Set up color scaling function
   const colorScale = d3.scaleLinear()
     .domain([0, 7])
-    .range(['hsl(200,60%,60%)', 'hsl(255,30%,30%)'])
-    // .range(['hsl(152,30%,80%)', 'hsl(228,30%,40%)'])
+    .range(['hsl(200,60%,60%)', 'hsl(255,30%,40%)'])
     .interpolate(d3.interpolateHcl);
 
   // Set up circle-packing layout function
   const packFunc = useCallback((data:object) => {
     return d3.pack()
-    .size([width, height])
+    .size([adjustedSize, adjustedSize])
     // .radius(d => { return d.r; })
     .padding(3)(d3.hierarchy(data)
                     .sum((d:{componentData?:{actualDuration?:number}}) => { return d.componentData.actualDuration || 0; })
                     .sort((a:{value:number}, b:{value:number}) => { return b.value - a.value; }));
-  }, [width, height]);
+  }, [adjustedSize]);
+
+  function handleNoRenderData(isNoRenderData) {
+    setNoRenderData(isNoRenderData);
+  }
 
   // If indexToDisplay changes, clear old tree nodes
   useEffect(() => {
@@ -70,17 +73,17 @@ 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
+    // Set up viewBox dimensions and onClick for parent svg 
     const svg = d3.select(svgRef.current)
-      .attr('viewBox', `-${width / 2} -${height / 2} ${width} ${height}`)
+      .attr('viewBox', `-${adjustedSize / 2} -${adjustedSize / 2} ${width} ${height}`)
       .on('click', () => zoomToNode(packedRoot));
 
     // Connect circles below root to data
@@ -102,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();
@@ -150,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/PerfView.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={600}/>
-        </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/StateRoute.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 
-
 const getItemString = (type, data:{state?:object|string, name:string, children:[]}) => {
-  // check to make sure that we are on the tree node, not anything else
-  if (
-    Object.keys(data).length > 3
-    && typeof data.state === 'object'
-    && typeof data.name === 'string'
-    && Array.isArray(data.children)
-  ) {
+  if (data && data.name) {
     return <span>{data.name}</span>;
   }
-  return null;
+  return <span />;
 };
 
 interface TreeProps {
@@ -21,6 +14,7 @@ interface TreeProps {
 
 const Tree = (props:TreeProps) => {
   const { snapshot } = props;
+  // console.log('Tree -> snapshot', snapshot);
 
   return (
     <>
@@ -30,7 +24,9 @@ const Tree = (props:TreeProps) => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={(raw:any[]) => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
+          labelRenderer={(raw:any[]) => {
+            return (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)
+          }}
         />
       )}
     </>

src/app/components/Tree.tsx

@@ -54,19 +54,19 @@ div.tooltip {
   max-width: 250px;
   overflow-wrap: break-word;
   padding: 6px;
-  color: #1a2229;
+  color: #320a5c;
   font-size: 12px;
   font-family: "Overpass Mono", monospace;
-  background: #6699C4;
+  background: #9cf4df;
   border-radius: 8px;
   pointer-events: none;
 }
 
  .d3-tip {
   line-height: 1;
   padding: 6px;
-  background: #6699C4;
-  color: #1a2229;
+  background: #9cf4df;
+  color: #320a5c;
   border-radius: 4px;
   font-size: 13px;
   max-width: 400px;
@@ -80,7 +80,7 @@ div.tooltip {
   display: inline;
   font-size: 15px;
   line-height: 1;
-  color: #6699C4;
+  color: #9cf4df;
   content: "\25BC";
   position: absolute;
   text-align: center;
@@ -102,9 +102,9 @@ div.tooltip {
 }
 
 .perf-d3-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  /* display: flex; */
+  /* flex-direction: column; */
+  /* justify-content: space-between; */
   height: calc(100% - 70px);
   /* border: 2px solid red; */
 }
@@ -115,10 +115,11 @@ div.tooltip {
 
 .perf-chart-labels {
   font: 1.3em sans-serif;
+  font-weight: bold;
   /* font-size: calc(12px + .8vw); */
   /* color: white; */
   /* fill: rgb(231, 231, 231); */
   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

@@ -0,0 +1,43 @@
+// import 'core-js';
+// const reactimeBackend = require('../../dev-reactime/index.js');
+
+let firstMessage: boolean = true;
+
+// listening for messages from npm package
+window.addEventListener('message', msg => { // runs automatically every second
+  // window listener picks up the message it sends, so we should filter
+  // messages sent by contentscrip
+  if (firstMessage) {
+    // tell the background script that the tab has reloaded
+    chrome.runtime.sendMessage({ action: 'tabReload' });
+    firstMessage = false;
+  }
+
+  // post initial Message to background.js
+  const { action }: { action: string } = msg.data;
+
+  if (action === 'recordSnap') { // this is firing on page load
+    chrome.runtime.sendMessage(msg.data);
+  }
+});
+
+// listening for messages from the UI
+chrome.runtime.onMessage.addListener(request => { // seems to never fire
+  // send the message to npm package
+  const { action }: { action: string } = request;
+  switch (action) {
+    case 'jumpToSnap':
+      chrome.runtime.sendMessage(request);
+      window.postMessage(request, '*');
+      break;
+    case 'setLock':
+    case 'setPause':
+      window.postMessage(request, '*');
+      break;
+    default:
+      break;
+  }
+  return true; // attempt to fix port closing console error
+});
+
+chrome.runtime.sendMessage({ action: 'injectScript' });

src/backend/reactWorkTags.js

@@ -10,7 +10,7 @@ const config = {
     // app: './src/app/index.js',
     app: './src/app/index.tsx',
     background: './src/extension/background.js',
-    content: './src/extension/contentScript.js',
+    content: './src/extension/contentScript.ts',
     backend: './src/backend/index.ts',
   },
   output: {