update error message; set text colors to app dark; tried error checks in d3

Author: gpanciera

src/app/components/ErrorHandler.jsx

@@ -12,7 +12,7 @@ class ErrorHandler extends React.Component {
   }
 
   render() {
-    return this.state.errorOccurred ? <h1>An error occurred</h1> : this.props.children
+    return this.state.errorOccurred ? <div margin="8px">Unexpected Error</div> : this.props.children
   }
 }
 

src/app/components/PerfView.jsx

@@ -42,7 +42,7 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
   const packFunc = useCallback(data => {
     return d3.pack()
     .size([width, height])
-    .radius(d => { return d.r; })
+    // .radius(d => { return d.r; })
     .padding(3)(d3.hierarchy(data)
                     .sum(d => { return d.componentData.actualDuration || 0; })
                     .sort((a, b) => { return b.value - a.value; }));
@@ -109,7 +109,9 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
     // Zoom/relocated nodes and labels based on dimensions given [x, y, r]
     function zoomViewArea(newXYR) {
       // console.log('zoomTo -> newXYR', newXYR);
-      const k = width / newXYR[2];
+      // if (!newXYR.every(val => Number.isNaN(val))) { console.log('NaN'); return; }
+
+      const k = (width / newXYR[2]);
       view = newXYR;
       label.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);
       node.attr('transform', d => `translate(${(d.x - newXYR[0]) * k},${(d.y - newXYR[1]) * k})`);

src/app/styles/components/d3graph.css

@@ -109,7 +109,8 @@ div.tooltip {
 .perf-chart-labels {
   font: 12px sans-serif;
   /* color: white; */
-  fill: rgb(231, 231, 231);
+  /* fill: rgb(231, 231, 231); */
+  fill: #2a2f3a;
   pointer-events: none;
   text-anchor: middle;
 };