IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Flamegraph: Fix rendering on non-retina screens (#78085)

Browse Source
This commit is contained in:
Dmitry Filimonov 2023-11-14 04:21:21 -06:00 committed by GitHub
parent 4a152a0e35
commit c755ceae31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
packages/grafana-flamegraph/src/FlameGraph/__snapshots__/FlameGraph.test.tsx.snap
View File

@ -218,7 +218,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) test/pkg/agent.(*Target).start.func1 (4.10 Bil)",
"x": 16,
"x": 10,
"y": 35,
},
"transform": [
@ -250,7 +250,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 0,
"y": 22,
},
@ -295,8 +295,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 8,
"width": 3,
"x": 4,
"y": 27.5,
},
"transform": [
@ -1888,7 +1888,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) test/pkg/pprof.OpenRaw (390 Mil)",
"x": 125.84204131227219,
"x": 119.84204131227219,
"y": 79,
},
"transform": [
@ -1920,7 +1920,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 109.84204131227219,
"y": 66,
},
@ -1965,8 +1965,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 117.84204131227219,
"width": 3,
"x": 113.84204131227219,
"y": 71.5,
},
"transform": [
@ -4211,7 +4211,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) sort.Sort (240 Mil)",
"x": 184.16524908869988,
"x": 178.16524908869988,
"y": 101,
},
"transform": [
@ -4243,7 +4243,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 168.16524908869988,
"y": 88,
},
@ -4288,8 +4288,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 176.16524908869988,
"width": 3,
"x": 172.16524908869988,
"y": 93.5,
},
"transform": [
@ -6522,7 +6522,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(4) io/ioutil.ReadAll (430 Mil)",
"x": 372.74362089914945,
"x": 366.74362089914945,
"y": 57,
},
"transform": [
@ -6554,7 +6554,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 356.74362089914945,
"y": 44,
},
@ -6599,8 +6599,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 364.74362089914945,
"width": 3,
"x": 360.74362089914945,
"y": 49.5,
},
"transform": [
@ -7379,7 +7379,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(8) net/http.serverHandler.ServeHTTP (5.58 Bil)",
"x": 414.5419198055893,
"x": 408.5419198055893,
"y": 57,
},
"transform": [
@ -7411,7 +7411,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 398.5419198055893,
"y": 44,
},
@ -7456,8 +7456,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 406.5419198055893,
"width": 3,
"x": 402.5419198055893,
"y": 49.5,
},
"transform": [
@ -7575,7 +7575,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) net/http.HandlerFunc.ServeHTTP (5.54 Bil)",
"x": 414.5419198055893,
"x": 408.5419198055893,
"y": 79,
},
"transform": [
@ -7607,7 +7607,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 398.5419198055893,
"y": 66,
},
@ -7652,8 +7652,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 406.5419198055893,
"width": 3,
"x": 402.5419198055893,
"y": 71.5,
},
"transform": [
@ -8089,7 +8089,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) github.com/weaveworks/common/middleware.Instrument.Wrap.func1.2 (5.49 Bil)",
"x": 414.5419198055893,
"x": 408.5419198055893,
"y": 167,
},
"transform": [
@ -8121,7 +8121,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 398.5419198055893,
"y": 154,
},
@ -8166,8 +8166,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 406.5419198055893,
"width": 3,
"x": 402.5419198055893,
"y": 159.5,
},
"transform": [
@ -8285,7 +8285,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) github.com/bufbuild/connect-go.(*Handler).ServeHTTP (1.61 Bil)",
"x": 414.5419198055893,
"x": 408.5419198055893,
"y": 189,
},
"transform": [
@ -8317,7 +8317,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 398.5419198055893,
"y": 176,
},
@ -8362,8 +8362,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 406.5419198055893,
"width": 3,
"x": 402.5419198055893,
"y": 181.5,
},
"transform": [
@ -8481,7 +8481,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) github.com/bufbuild/connect-go.NewUnaryHandler[...].func1.1 (1.54 Bil)",
"x": 414.5419198055893,
"x": 408.5419198055893,
"y": 211,
},
"transform": [
@ -8513,7 +8513,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 398.5419198055893,
"y": 198,
},
@ -8558,8 +8558,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 406.5419198055893,
"width": 3,
"x": 402.5419198055893,
"y": 203.5,
},
"transform": [
@ -13607,7 +13607,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(4) net/http.(*ServeMux).ServeHTTP (3.88 Bil)",
"x": 571.0425273390036,
"x": 565.0425273390036,
"y": 189,
},
"transform": [
@ -13639,7 +13639,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 555.0425273390036,
"y": 176,
},
@ -13684,8 +13684,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 563.0425273390036,
"width": 3,
"x": 559.0425273390036,
"y": 181.5,
},
"transform": [
@ -13909,7 +13909,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) runtime/pprof.writeAlloc (3.23 Bil)",
"x": 571.0425273390036,
"x": 565.0425273390036,
"y": 233,
},
"transform": [
@ -13941,7 +13941,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 555.0425273390036,
"y": 220,
},
@ -13986,8 +13986,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 563.0425273390036,
"width": 3,
"x": 559.0425273390036,
"y": 225.5,
},
"transform": [
@ -22041,7 +22041,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) runtime/pprof.writeGoroutine (640 Mil)",
"x": 885.0157958687728,
"x": 879.0157958687728,
"y": 233,
},
"transform": [
@ -22073,7 +22073,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 869.0157958687728,
"y": 220,
},
@ -22118,8 +22118,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 877.0157958687728,
"width": 3,
"x": 873.0157958687728,
"y": 225.5,
},
"transform": [
@ -22237,7 +22237,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) runtime/pprof.runtime_goroutineProfileWithLabels (250 Mil)",
"x": 885.0157958687728,
"x": 879.0157958687728,
"y": 255,
},
"transform": [
@ -22269,7 +22269,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 869.0157958687728,
"y": 242,
},
@ -22314,8 +22314,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 877.0157958687728,
"width": 3,
"x": 873.0157958687728,
"y": 247.5,
},
"transform": [
@ -26212,7 +26212,7 @@ exports[`FlameGraph should render correctly 1`] = `
"props": {
"maxWidth": null,
"text": "(2) runtime.systemstack (6.17 Bil)",
"x": 961.8080194410693,
"x": 955.8080194410693,
"y": 57,
},
"transform": [
@ -26244,7 +26244,7 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 22,
"width": 20,
"width": 10,
"x": 945.8080194410693,
"y": 44,
},
@ -26289,8 +26289,8 @@ exports[`FlameGraph should render correctly 1`] = `
{
"props": {
"height": 11,
"width": 6,
"x": 953.8080194410693,
"width": 3,
"x": 949.8080194410693,
"y": 49.5,
},
"transform": [

21
packages/grafana-flamegraph/src/FlameGraph/rendering.ts
View File

@ -12,6 +12,10 @@ import {
HIDE_THRESHOLD,
LABEL_THRESHOLD,
PIXELS_PER_LEVEL,
GROUP_STRIP_WIDTH,
GROUP_STRIP_PADDING,
GROUP_STRIP_MARGIN_LEFT,
GROUP_TEXT_OFFSET,
} from '../constants';
import { ClickedItemData, ColorScheme, ColorSchemeDiff, TextAlign } from '../types';
@ -146,7 +150,7 @@ function useRenderFunc(
label,
item,
width,
textAlign === 'left' ? x + groupStripMarginLeft + 4 : x,
textAlign === 'left' ? x + GROUP_STRIP_MARGIN_LEFT + GROUP_TEXT_OFFSET : x,
y,
textAlign
);
@ -163,8 +167,6 @@ function useRenderFunc(
}, [ctx, getBarColor, textAlign, data, collapsedMap]);
}
const groupStripMarginLeft = 8;
/**
* Render small strip on the left side of the bar to indicate that this item is part of a group that can be collapsed.
* @param ctx
@ -182,12 +184,11 @@ function renderGroupingStrip(
item: LevelItem,
collapsedItemConfig: CollapseConfig
) {
const groupStripX = x + groupStripMarginLeft;
const groupStripWidth = 6;
const groupStripX = x + GROUP_STRIP_MARGIN_LEFT;
// This is to mask the label in case we align it right to left.
ctx.beginPath();
ctx.rect(x, y, groupStripX - x + groupStripWidth + 6, height);
ctx.rect(x, y, groupStripX - x + GROUP_STRIP_WIDTH + GROUP_STRIP_PADDING, height);
ctx.fill();
// For item in a group that can be collapsed, we draw a small strip to mark them. On the items that are at the
@ -195,16 +196,16 @@ function renderGroupingStrip(
// visually.
ctx.beginPath();
if (collapsedItemConfig.collapsed) {
ctx.rect(groupStripX, y + height / 4, groupStripWidth, height / 2);
ctx.rect(groupStripX, y + height / 4, GROUP_STRIP_WIDTH, height / 2);
} else {
if (collapsedItemConfig.items[0] === item) {
// Top item
ctx.rect(groupStripX, y + height / 2, groupStripWidth, height / 2);
ctx.rect(groupStripX, y + height / 2, GROUP_STRIP_WIDTH, height / 2);
} else if (collapsedItemConfig.items[collapsedItemConfig.items.length - 1] === item) {
// Bottom item
ctx.rect(groupStripX, y, groupStripWidth, height / 2);
ctx.rect(groupStripX, y, GROUP_STRIP_WIDTH, height / 2);
} else {
ctx.rect(groupStripX, y, groupStripWidth, height);
ctx.rect(groupStripX, y, GROUP_STRIP_WIDTH, height);
}
}

4
packages/grafana-flamegraph/src/constants.ts
View File

@ -4,5 +4,9 @@ export const HIDE_THRESHOLD = 0.5 * window.devicePixelRatio;
export const LABEL_THRESHOLD = 20 * window.devicePixelRatio;
export const BAR_BORDER_WIDTH = 0.5 * window.devicePixelRatio;
export const BAR_TEXT_PADDING_LEFT = 4 * window.devicePixelRatio;
export const GROUP_STRIP_WIDTH = 3 * window.devicePixelRatio;
export const GROUP_STRIP_PADDING = 3 * window.devicePixelRatio;
export const GROUP_STRIP_MARGIN_LEFT = 4 * window.devicePixelRatio;
export const GROUP_TEXT_OFFSET = 2 * window.devicePixelRatio;
export const MIN_WIDTH_TO_SHOW_BOTH_TOPTABLE_AND_FLAMEGRAPH = 800;
export const TOP_TABLE_COLUMN_WIDTH = 120;