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: Prevent cropping of tooltip by bottom of the viewport (#70633)

Browse Source
This commit is contained in:
Andrej Ocenas 2023-06-26 18:03:41 +02:00 committed by GitHub
parent e313db386a
commit 0f2922d709
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraph.tsx
View File

@ -165,13 +165,23 @@ const FlameGraph = ({
);
if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
tooltipRef.current.style.top = e.clientY + 'px';
if (document.documentElement.clientWidth - e.clientX < 400) {
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
tooltipRef.current.style.left = 'auto';
// tooltip has a set number of lines of text so 200 should be good enough (with some buffer) without going
// into measuring rendered sizes
if (e.clientY < document.documentElement.clientHeight - 200) {
tooltipRef.current.style.top = e.clientY + 'px';
tooltipRef.current.style.bottom = 'auto';
} else {
tooltipRef.current.style.bottom = document.documentElement.clientHeight - e.clientY + 'px';
tooltipRef.current.style.top = 'auto';
}
// 400 is max width of the tooltip
if (e.clientX < document.documentElement.clientWidth - 400) {
tooltipRef.current.style.left = e.clientX + 15 + 'px';
tooltipRef.current.style.right = 'auto';
} else {
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
tooltipRef.current.style.left = 'auto';
}
setTooltipItem(levels[levelIndex][barIndex]);

2
public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
View File

@ -90,6 +90,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
tooltip: css`
title: tooltip;
position: fixed;
z-index: ${theme.zIndex.tooltip};
`,
tooltipContent: css`
title: tooltipContent;
@ -101,7 +102,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
font-size: ${theme.typography.bodySmall.fontSize};
padding: ${theme.spacing(0.5, 1)};
transition: opacity 0.3s;
z-index: ${theme.zIndex.tooltip};
max-width: 400px;
overflow-wrap: break-word;
`,

18
public/app/plugins/panel/flamegraph/flamegraphV2/components/FlameGraph/FlameGraph.tsx
View File

@ -143,13 +143,23 @@ const FlameGraph = ({
);
if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
tooltipRef.current.style.top = e.clientY + 'px';
if (document.documentElement.clientWidth - e.clientX < 400) {
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
tooltipRef.current.style.left = 'auto';
// tooltip has a set number of lines of text so 200 should be good enough (with some buffer) without going
// into measuring rendered sizes
if (e.clientY < document.documentElement.clientHeight - 200) {
tooltipRef.current.style.top = e.clientY + 'px';
tooltipRef.current.style.bottom = 'auto';
} else {
tooltipRef.current.style.bottom = document.documentElement.clientHeight - e.clientY + 'px';
tooltipRef.current.style.top = 'auto';
}
// 400 is max width of the tooltip
if (e.clientX < document.documentElement.clientWidth - 400) {
tooltipRef.current.style.left = e.clientX + 15 + 'px';
tooltipRef.current.style.right = 'auto';
} else {
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px';
tooltipRef.current.style.left = 'auto';
}
setTooltipItem(levels[levelIndex][barIndex]);

2
public/app/plugins/panel/flamegraph/flamegraphV2/components/FlameGraph/FlameGraphTooltip.tsx
View File

@ -90,6 +90,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
tooltip: css`
title: tooltip;
position: fixed;
z-index: ${theme.zIndex.tooltip};
`,
tooltipContent: css`
title: tooltipContent;
@ -101,7 +102,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
font-size: ${theme.typography.bodySmall.fontSize};
padding: ${theme.spacing(0.5, 1)};
transition: opacity 0.3s;
z-index: ${theme.zIndex.tooltip};
max-width: 400px;
overflow-wrap: break-word;
`,