IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

StateTimeline: Fix tooltip showing erroneously in shared crosshair dashboards (#55809)

Browse Source 
* StateTimeline: Fix shared crosshair

* Fix for StatusHistory also
This commit is contained in:
Victor Marin 2022-10-07 08:56:15 +03:00 committed by GitHub
parent 21d9cf0db4
commit b622a87aee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/grafana-ui/src/components/uPlot/config/addTooltipSupport.ts
View File

@ -1,6 +1,6 @@
import { Dispatch, MutableRefObject, SetStateAction } from 'react';
import { CartesianCoords2D } from '@grafana/data';
import { CartesianCoords2D, DashboardCursorSync } from '@grafana/data';
import { positionTooltip } from '../plugins/TooltipPlugin';
@ -21,6 +21,9 @@ type SetupConfigParams = {
setCoords: Dispatch<SetStateAction<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>>;
setHover: Dispatch<SetStateAction<HoverEvent | undefined>>;
isToolTipOpen: MutableRefObject<boolean>;
isActive: boolean;
setIsActive: Dispatch<SetStateAction<boolean>>;
sync?: (() => DashboardCursorSync) | undefined;
};
// This applies config hooks to setup tooltip listener. Ideally this could happen in the same `prepConfig` function
@ -33,13 +36,26 @@ export const addTooltipSupport = ({
setCoords,
setHover,
isToolTipOpen,
isActive,
setIsActive,
sync,
}: SetupConfigParams): UPlotConfigBuilder => {
// Ensure tooltip is closed on config changes
isToolTipOpen.current = false;
const onMouseEnter = () => {
if (setIsActive) {
setIsActive(true);
}
};
const onMouseLeave = () => {
if (!isToolTipOpen.current) {
setCoords(null);
if (setIsActive) {
setIsActive(false);
}
}
};
@ -50,6 +66,11 @@ export const addTooltipSupport = ({
ref_over = u.over;
ref_parent?.addEventListener('click', onUPlotClick);
ref_over.addEventListener('mouseleave', onMouseLeave);
ref_over.addEventListener('mouseenter', onMouseEnter);
if (sync && sync() === DashboardCursorSync.Crosshair) {
u.root.classList.add('shared-crosshair');
}
});
const clearPopupIfOpened = () => {
@ -64,6 +85,7 @@ export const addTooltipSupport = ({
config.addHook('destroy', () => {
ref_parent?.removeEventListener('click', onUPlotClick);
ref_over?.removeEventListener('mouseleave', onMouseLeave);
ref_over?.removeEventListener('mouseenter', onMouseEnter);
clearPopupIfOpened();
});
@ -84,7 +106,7 @@ export const addTooltipSupport = ({
setFocusedSeriesIdx,
setFocusedPointIdx,
(clear) => {
if (clear) {
if (clear && isActive) {
setCoords(null);
return;
}
@ -104,7 +126,7 @@ export const addTooltipSupport = ({
}
config.addHook('setLegend', (u) => {
if (!isToolTipOpen.current && !tooltipInterpolator) {
if (!isToolTipOpen.current) {
setFocusedPointIdx(u.legend.idx!);
}
if (u.cursor.idxs != null) {

5
public/app/plugins/panel/barchart/BarChartPanel.tsx
View File

@ -82,6 +82,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
const [coords, setCoords] = useState<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>(null);
const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
const [isActive, setIsActive] = useState<boolean>(false);
const [shouldDisplayCloseButton, setShouldDisplayCloseButton] = useState<boolean>(false);
const onCloseToolTip = () => {
@ -298,6 +299,8 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
setCoords,
setHover,
isToolTipOpen,
isActive,
setIsActive,
});
}
@ -307,7 +310,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({
return (
<Portal>
{hover && coords && (
{hover && coords && focusedSeriesIdx && (
<VizTooltipContainer
position={{ x: coords.viewport.x, y: coords.viewport.y }}
offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}

14
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { CartesianCoords2D, DataFrame, FieldType, PanelProps } from '@grafana/data';
import { CartesianCoords2D, DashboardCursorSync, DataFrame, FieldType, PanelProps } from '@grafana/data';
import {
Portal,
TooltipDisplayMode,
@ -50,8 +50,9 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
const [coords, setCoords] = useState<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>(null);
const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
const [isActive, setIsActive] = useState<boolean>(false);
const [shouldDisplayCloseButton, setShouldDisplayCloseButton] = useState<boolean>(false);
const { canAddAnnotations } = usePanelContext();
const { sync, canAddAnnotations } = usePanelContext();
const onCloseToolTip = () => {
isToolTipOpen.current = false;
@ -178,6 +179,9 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
setCoords,
setHover,
isToolTipOpen,
isActive,
setIsActive,
sync,
});
}
@ -198,9 +202,13 @@ export const StateTimelinePanel: React.FC<TimelinePanelProps> = ({
return null;
}
if (focusedPointIdx === null || (!isActive && sync && sync() === DashboardCursorSync.Crosshair)) {
return null;
}
return (
<Portal>
{hover && coords && (
{hover && coords && focusedSeriesIdx && (
<VizTooltipContainer
position={{ x: coords.viewport.x, y: coords.viewport.y }}
offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}

13
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@ -1,10 +1,11 @@
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { CartesianCoords2D, DataFrame, FieldType, PanelProps } from '@grafana/data';
import { CartesianCoords2D, DashboardCursorSync, DataFrame, FieldType, PanelProps } from '@grafana/data';
import {
Portal,
TooltipDisplayMode,
UPlotConfigBuilder,
usePanelContext,
useTheme2,
VizTooltipContainer,
ZoomPlugin,
@ -46,7 +47,9 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
const [coords, setCoords] = useState<{ viewport: CartesianCoords2D; canvas: CartesianCoords2D } | null>(null);
const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
const [isActive, setIsActive] = useState<boolean>(false);
const [shouldDisplayCloseButton, setShouldDisplayCloseButton] = useState<boolean>(false);
const { sync } = usePanelContext();
const onCloseToolTip = () => {
isToolTipOpen.current = false;
@ -179,6 +182,8 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
setCoords,
setHover,
isToolTipOpen,
isActive,
setIsActive,
});
}
@ -186,11 +191,15 @@ export const StatusHistoryPanel: React.FC<TimelinePanelProps> = ({
return null;
}
if (focusedPointIdx === null || (!isActive && sync && sync() === DashboardCursorSync.Crosshair)) {
return null;
}
return (
<>
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />
<Portal>
{hover && coords && (
{hover && coords && focusedSeriesIdx && (
<VizTooltipContainer
position={{ x: coords.viewport.x, y: coords.viewport.y }}
offset={{ x: TOOLTIP_OFFSET, y: TOOLTIP_OFFSET }}