perf view bold font; lighten colors for deep hierarchies; remove reactWorkTags

Author: gpanciera

src/app/components/PerfView.tsx

@@ -31,6 +31,7 @@ interface PerfViewProps {
 
 const PerfView = (props:PerfViewProps) => {
   const { snapshots, viewIndex, width, height } = props
+  let adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
 
   // Figure out which snapshot index to use
@@ -41,19 +42,18 @@ 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%,60%)'])
     .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]);
 
   // If indexToDisplay changes, clear old tree nodes
   useEffect(() => {
@@ -79,8 +79,12 @@ const PerfView = (props:PerfViewProps) => {
     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)
     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

src/app/styles/components/d3graph.css

@@ -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,6 +115,7 @@ 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); */

src/backend/linkFiber.ts

@@ -109,7 +109,7 @@ export default (snap: Snapshot, mode: Mode): ()=>void => {
     } = currentFiber;
 
     let newState: any;
-    let componentData: ComponentData;
+    let componentData: ComponentData = {};
     let componentFound = false;
 
     // Check if node is a stateful setState component

src/backend/reactWorkTags.js

@@ -27,11 +27,11 @@ export interface MsgData {
 }
 
 export interface ComponentData {
-  index: number;
-  actualDuration: number;
-  actualStartTime: number;
-  selfBaseDuration: number;
-  treeBaseDuration: number;
+  index?: number;
+  actualDuration?: number;
+  actualStartTime?: number;
+  selfBaseDuration?: number;
+  treeBaseDuration?: number;
 }
 
 interface HookStateItem {