From c65351438b11c55e2a5a716764e4d989177ad725 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Tue, 28 Jul 2020 14:33:11 +0800 Subject: [PATCH] [Optimize flamechart][3/4] Rename flame graph -> flame chart --- src/CanvasPage.js | 34 +++++++++---------- src/canvas/canvasUtils.js | 8 ++--- src/canvas/constants.js | 4 +-- .../{FlamegraphView.js => FlamechartView.js} | 10 +++--- src/canvas/views/index.js | 2 +- 5 files changed, 29 insertions(+), 29 deletions(-) rename src/canvas/views/{FlamegraphView.js => FlamechartView.js} (97%) diff --git a/src/CanvasPage.js b/src/CanvasPage.js index bac804d..211400f 100644 --- a/src/CanvasPage.js +++ b/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(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,7 +158,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) { axisMarkersView, reactEventsView, reactMeasuresView, - flamegraphVScrollWrapper, + flamechartVScrollWrapper, ], ); @@ -166,7 +166,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) { 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, ]); diff --git a/src/canvas/canvasUtils.js b/src/canvas/canvasUtils.js index 96508a6..f2dc6e9 100644 --- a/src/canvas/canvasUtils.js +++ b/src/canvas/canvasUtils.js @@ -49,8 +49,8 @@ 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, @@ -58,10 +58,10 @@ export const trimFlamegraphText = ( 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) { diff --git a/src/canvas/constants.js b/src/canvas/constants.js index 7aaebf9..b510af7 100644 --- a/src/canvas/constants.js +++ b/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', diff --git a/src/canvas/views/FlamegraphView.js b/src/canvas/views/FlamechartView.js similarity index 97% rename from src/canvas/views/FlamegraphView.js rename to src/canvas/views/FlamechartView.js index a8fdb8f..2ae144e 100644 --- a/src/canvas/views/FlamegraphView.js +++ b/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), diff --git a/src/canvas/views/index.js b/src/canvas/views/index.js index 04dfba8..306e396 100644 --- a/src/canvas/views/index.js +++ b/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';