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
4 changed files with 30 additions and 10 deletions
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)) { if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
tooltipRef.current.style.top = e.clientY + 'px'; // tooltip has a set number of lines of text so 200 should be good enough (with some buffer) without going
if (document.documentElement.clientWidth - e.clientX < 400) { // into measuring rendered sizes
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px'; if (e.clientY < document.documentElement.clientHeight - 200) {
tooltipRef.current.style.left = 'auto'; tooltipRef.current.style.top = e.clientY + 'px';
tooltipRef.current.style.bottom = 'auto';
} else { } 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.left = e.clientX + 15 + 'px';
tooltipRef.current.style.right = 'auto'; 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]); 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` tooltip: css`
title: tooltip; title: tooltip;
position: fixed; position: fixed;
z-index: ${theme.zIndex.tooltip};
`, `,
tooltipContent: css` tooltipContent: css`
title: tooltipContent; title: tooltipContent;
@@ -101,7 +102,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
padding: ${theme.spacing(0.5, 1)}; padding: ${theme.spacing(0.5, 1)};
transition: opacity 0.3s; transition: opacity 0.3s;
z-index: ${theme.zIndex.tooltip};
max-width: 400px; max-width: 400px;
overflow-wrap: break-word; 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)) { if (barIndex !== -1 && !isNaN(levelIndex) && !isNaN(barIndex)) {
tooltipRef.current.style.top = e.clientY + 'px'; // tooltip has a set number of lines of text so 200 should be good enough (with some buffer) without going
if (document.documentElement.clientWidth - e.clientX < 400) { // into measuring rendered sizes
tooltipRef.current.style.right = document.documentElement.clientWidth - e.clientX + 15 + 'px'; if (e.clientY < document.documentElement.clientHeight - 200) {
tooltipRef.current.style.left = 'auto'; tooltipRef.current.style.top = e.clientY + 'px';
tooltipRef.current.style.bottom = 'auto';
} else { } 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.left = e.clientX + 15 + 'px';
tooltipRef.current.style.right = 'auto'; 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]); 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` tooltip: css`
title: tooltip; title: tooltip;
position: fixed; position: fixed;
z-index: ${theme.zIndex.tooltip};
`, `,
tooltipContent: css` tooltipContent: css`
title: tooltipContent; title: tooltipContent;
@@ -101,7 +102,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
font-size: ${theme.typography.bodySmall.fontSize}; font-size: ${theme.typography.bodySmall.fontSize};
padding: ${theme.spacing(0.5, 1)}; padding: ${theme.spacing(0.5, 1)};
transition: opacity 0.3s; transition: opacity 0.3s;
z-index: ${theme.zIndex.tooltip};
max-width: 400px; max-width: 400px;
overflow-wrap: break-word; overflow-wrap: break-word;
`, `,