Merge branch 'staging' into extension

Author: crperezt

src/app/components/Chart.jsx

@@ -46,14 +46,14 @@ class Chart extends Component {
 
   maked3Tree() {
     this.removed3Tree();
-    const margin = {
-      top: 0,
-      right: 60,
-      bottom: 200,
-      left: 120,
-    };
-    const width = 600 - margin.right - margin.left;
-    const height = 700 - margin.top - margin.bottom;
+    // const margin = {
+    //   top: 0,
+    //   right: 60,
+    //   bottom: 200,
+    //   left: 120,
+    // };
+    const width = 600; // - margin.right - margin.left;
+    const height = 600; // 700 - margin.top - margin.bottom;
     const chartContainer = d3.select(this.chartRef.current)
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
@@ -202,7 +202,11 @@ class Chart extends Component {
   }
 
   render() {
-    return <div ref={this.chartRef} className="d3Container" />;
+    return (
+      <div className="history-d3-container">
+        <div ref={this.chartRef} className="history-d3-div" />
+      </div>
+    );
   }
 }
 

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,9 +42,10 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
   const packFunc = useCallback(data => {
     return d3.pack()
     .size([width, height])
+    // .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; }));
+                    .sum(d => { return d.componentData.actualDuration || 0; })
+                    .sort((a, b) => { return b.value - a.value; }));
   }, [width, height]);
 
   // If indexToDisplay changes, clear old tree nodes
@@ -55,12 +56,14 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
   }, [indexToDisplay, svgRef]);
 
   useEffect(() => {
-    
+    // console.log(`***** useEffect - MAIN -> snapshots[${indexToDisplay}]`, snapshots[indexToDisplay]);
+
     // Error, no App-level component present
     if (snapshots[indexToDisplay].children.length < 1) return;
 
     // Generate tree with our data
     const packedRoot = packFunc(snapshots[indexToDisplay]);
+    console.log('PerfView -> packedRoot', packedRoot);
 
     // Set initial focus to root node
     let curFocus = packedRoot;
@@ -80,13 +83,12 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
       .enter().append('circle')
         .attr('fill', d => (d.children ? colorScale(d.depth) : 'white'))
         .attr('pointer-events', d => (!d.children ? 'none' : null))
-        .on('mouseover', () => d3.select(this).attr('stroke', '#000'))
-        .on('mouseout', () => d3.select(this).attr('stroke', null))
+        .on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
+        .on('mouseout', function () { d3.select(this).attr('stroke', null); })
         .on('click', d => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
 
     // Generate text labels. Set (only) root to visible initially
     const label = svg.append('g')
-        // .style('fill', 'rgb(231, 231, 231)')
         .attr('class', 'perf-chart-labels')
       .selectAll('text')
       .data(packedRoot.descendants())
@@ -133,11 +135,16 @@ const PerfView = ({ snapshots, viewIndex, width = 600, height = 600 }) => {
     }
   }, [colorScale, packFunc, width, height, indexToDisplay, snapshots]);
 
-  return <svg className="perfContainer" ref={svgRef} />;
+  return (
+    <div className="perf-d3-container">
+      <svg className="perf-d3-svg" ref={svgRef} />
+      {/* <span>TEST</span> */}
+    </div>
+    );
 };
 
 export default PerfView;
 
 
     // d3.quantize(d3.interpolateHcl('#60c96e', '#4d4193'), 10);
-        // const colorScale = d3.scaleOrdinal(colorScheme);
+        // const colorScale = d3.scaleOrdinal(colorScheme);

src/app/styles/components/d3graph.css

@@ -93,22 +93,31 @@ div.tooltip {
   left: 0;
 }
 
-.perfContainer {
-  display: block;
-  /* margin: 0 -14px;
-  background-color: hsl(152,80%,80%); */
+.history-d3-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100% - 70px);
   /* border: 2px solid red; */
 }
 
-.d3divContainer {
-  /* display: flex;
+.perf-d3-container {
+  display: flex;
   flex-direction: column;
-  justify-content: space-between; */
+  justify-content: space-between;
+  height: calc(100% - 70px);
+  /* border: 2px solid red; */
+}
+
+.perf-d3-svg {
+  display: block;
 }
 
 .perf-chart-labels {
-  font: 15px sans-serif;
-  color: white;
+  font: 12px sans-serif;
+  /* color: white; */
+  /* fill: rgb(231, 231, 231); */
+  fill: #2a2f3a;
   pointer-events: none;
   text-anchor: middle;
 };