[Optimize flamechart][3/4] Rename flame graph -> flame chart

src/CanvasPage.js

@@ -36,7 +36,7 @@ const CONTEXT_MENU_ID = 'canvas';
 import type {ReactHoverContextInfo, ReactProfilerData} from './types';
 import {useCanvasInteraction} from './useCanvasInteraction';
 import {
-  FlamegraphView,
+  FlamechartView,
   ReactEventsView,
   ReactMeasuresView,
   TimeAxisMarkersView,
@@ -108,7 +108,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
   ] = useState<ReactHoverContextInfo | null>(null);
 
   const surfaceRef = useRef(new Surface());
-  const flamegraphViewRef = useRef(null);
+  const flamechartViewRef = useRef(null);
   const axisMarkersViewRef = useRef(null);
   const reactEventsViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
@@ -136,18 +136,18 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     );
     reactMeasuresViewRef.current = reactMeasuresView;
 
-    const flamegraphView = new FlamegraphView(
+    const flamechartView = new FlamechartView(
       surfaceRef.current,
       {origin: zeroPoint, size: {width, height}},
       data.flamechart,
       data,
     );
-    flamegraphViewRef.current = flamegraphView;
-    const flamegraphVScrollWrapper = new VerticalScrollView(
+    flamechartViewRef.current = flamechartView;
+    const flamechartVScrollWrapper = new VerticalScrollView(
       surfaceRef.current,
       {origin: zeroPoint, size: {width, height}},
-      flamegraphView,
-      flamegraphView.intrinsicSize.height,
+      flamechartView,
+      flamechartView.intrinsicSize.height,
     );
 
     const stackedZoomables = new StaticLayoutView(
@@ -158,15 +158,15 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         axisMarkersView,
         reactEventsView,
         reactMeasuresView,
-        flamegraphVScrollWrapper,
+        flamechartVScrollWrapper,
       ],
     );
 
     const contentZoomWrapper = new HorizontalPanAndZoomView(
       surfaceRef.current,
       {origin: zeroPoint, size: {width, height}},
       stackedZoomables,
-      flamegraphView.intrinsicSize.width,
+      flamechartView.intrinsicSize.width,
     );
 
     rootViewRef.current = new StaticLayoutView(
@@ -248,9 +248,9 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       };
     }
 
-    const {current: flamegraphView} = flamegraphViewRef;
-    if (flamegraphView) {
-      flamegraphView.onHover = flamechartStackFrame => {
+    const {current: flamechartView} = flamechartViewRef;
+    if (flamechartView) {
+      flamechartView.onHover = flamechartStackFrame => {
         if (
           !hoveredEvent ||
           hoveredEvent.flamechartStackFrame !== flamechartStackFrame
@@ -267,7 +267,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
   }, [
     reactEventsViewRef,
     reactMeasuresViewRef,
-    flamegraphViewRef,
+    flamechartViewRef,
     hoveredEvent,
     setHoveredEvent,
   ]);
@@ -285,16 +285,16 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       );
     }
 
-    const {current: flamegraphView} = flamegraphViewRef;
-    if (flamegraphView) {
-      flamegraphView.setHoveredFlamechartNode(
+    const {current: flamechartView} = flamechartViewRef;
+    if (flamechartView) {
+      flamechartView.setHoveredFlamechartNode(
         hoveredEvent ? hoveredEvent.flamechartStackFrame : null,
       );
     }
   }, [
     reactEventsViewRef,
     reactMeasuresViewRef,
-    flamegraphViewRef,
+    flamechartViewRef,
     hoveredEvent,
   ]);
 

src/canvas/canvasUtils.js

@@ -49,19 +49,19 @@ export function getTimeTickInterval(zoomLevel: number) {
   return interval;
 }
 
-const cachedFlamegraphTextWidths = new Map();
-export const trimFlamegraphText = (
+const cachedFlamechartTextWidths = new Map();
+export const trimFlamechartText = (
   context: CanvasRenderingContext2D,
   text: string,
   width: number,
 ) => {
   for (let i = text.length - 1; i >= 0; i--) {
     const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
 
-    let measuredWidth = cachedFlamegraphTextWidths.get(trimmedText);
+    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);
     if (measuredWidth == null) {
       measuredWidth = context.measureText(trimmedText).width;
-      cachedFlamegraphTextWidths.set(trimmedText, measuredWidth);
+      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);
     }
 
     if (measuredWidth <= width) {

src/canvas/constants.js

@@ -61,8 +61,8 @@ export const EVENT_ROW_HEIGHT_FIXED =
 
 export const COLORS = Object.freeze({
   BACKGROUND: '#ffffff',
-  FLAME_GRAPH: '#fff79f',
-  FLAME_GRAPH_HOVER: '#ffe900',
+  FLAME_CHART: '#fff79f',
+  FLAME_CHART_HOVER: '#ffe900',
   OTHER_SCRIPT: '#fff791',
   OTHER_SCRIPT_HOVER: '#ffea00',
   PRIORITY_BACKGROUND: '#ededf0',

src/canvas/views/FlamegraphView.js → src/canvas/views/FlamechartView.js

@@ -20,7 +20,7 @@ import {
   durationToWidth,
   positioningScaleFactor,
   timestampToPosition,
-  trimFlamegraphText,
+  trimFlamechartText,
 } from '../canvasUtils';
 import {
   COLORS,
@@ -30,7 +30,7 @@ import {
   REACT_WORK_BORDER_SIZE,
 } from '../constants';
 
-export class FlamegraphView extends View {
+export class FlamechartView extends View {
   flamechart: Flamechart;
   profilerData: ReactProfilerData;
   intrinsicSize: Size;
@@ -125,8 +125,8 @@ export class FlamegraphView extends View {
 
         const showHoverHighlight = hoveredFlamechartNode === stackLayer[j];
         context.fillStyle = showHoverHighlight
-          ? COLORS.FLAME_GRAPH_HOVER
-          : COLORS.FLAME_GRAPH;
+          ? COLORS.FLAME_CHART_HOVER
+          : COLORS.FLAME_CHART;
 
         const drawableRect = rectIntersectionWithRect(nodeRect, visibleArea);
         context.fillRect(
@@ -137,7 +137,7 @@ export class FlamegraphView extends View {
         );
 
         if (width > FLAMECHART_TEXT_PADDING * 2) {
-          const trimmedName = trimFlamegraphText(
+          const trimmedName = trimFlamechartText(
             context,
             name,
             width - FLAMECHART_TEXT_PADDING * 2 + (x < 0 ? x : 0),

src/canvas/views/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-export * from './FlamegraphView';
+export * from './FlamechartView';
 export * from './ReactEventsView';
 export * from './ReactMeasuresView';
 export * from './TimeAxisMarkersView';