-
Notifications
You must be signed in to change notification settings - Fork 11.6k
/
CanvasTooltip.tsx
80 lines (71 loc) · 2.32 KB
/
CanvasTooltip.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import { css } from '@emotion/css';
import { useDialog } from '@react-aria/dialog';
import { useOverlay } from '@react-aria/overlays';
import React, { createRef } from 'react';
import { GrafanaTheme2, LinkModel } from '@grafana/data/src';
import { LinkButton, Portal, useStyles2, VerticalGroup, VizTooltipContainer } from '@grafana/ui';
import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
import { Scene } from 'app/features/canvas/runtime/scene';
interface Props {
scene: Scene;
}
export const CanvasTooltip = ({ scene }: Props) => {
const style = useStyles2(getStyles);
const onClose = () => {
if (scene?.tooltipCallback && scene.tooltip) {
scene.tooltipCallback(undefined);
}
};
const ref = createRef<HTMLElement>();
const { overlayProps } = useOverlay({ onClose: onClose, isDismissable: true }, ref);
const { dialogProps } = useDialog({}, ref);
const element = scene.tooltip?.element;
if (!element) {
return <></>;
}
const renderDataLinks = () =>
element.data?.links &&
element.data?.links.length > 0 && (
<div>
<VerticalGroup>
{element.data?.links?.map((link: LinkModel, i: number) => (
<LinkButton
key={i}
icon={'external-link-alt'}
target={link.target}
href={link.href}
onClick={link.onClick}
fill="text"
style={{ width: '100%' }}
>
{link.title}
</LinkButton>
))}
</VerticalGroup>
</div>
);
return (
<>
{scene.tooltip?.element && scene.tooltip.anchorPoint && (
<Portal>
<VizTooltipContainer
position={{ x: scene.tooltip.anchorPoint.x, y: scene.tooltip.anchorPoint.y }}
offset={{ x: 5, y: 0 }}
allowPointerEvents={scene.tooltip.isOpen}
>
<section ref={ref} {...overlayProps} {...dialogProps}>
{scene.tooltip.isOpen && <CloseButton style={{ zIndex: 1 }} onClick={onClose} />}
<div className={style.wrapper}>{renderDataLinks()}</div>
</section>
</VizTooltipContainer>
</Portal>
)}
</>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
margin-top: 20px;
background: ${theme.colors.background.primary};
`,
});