From 45c763a76bbf94c88be6ba13ffbe21381e266666 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 29 Apr 2021 13:51:21 +0200 Subject: [PATCH] GraphNG: Bring back plot instance getter on the Plot context (#33516) * Bring back plot instnace getter on the Plot context * Update plot context usage --- packages/grafana-ui/src/components/uPlot/Plot.tsx | 4 ++-- packages/grafana-ui/src/components/uPlot/context.ts | 2 +- .../src/components/uPlot/geometries/EventsCanvas.tsx | 5 +++-- .../src/components/uPlot/geometries/XYCanvas.tsx | 2 +- .../src/components/uPlot/plugins/TooltipPlugin.tsx | 11 ++++++----- .../panel/timeseries/plugins/AnnotationsPlugin.tsx | 4 ++-- .../panel/timeseries/plugins/ExemplarsPlugin.tsx | 2 +- 7 files changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx index 386a5e3d744..315cca1823c 100755 --- a/packages/grafana-ui/src/components/uPlot/Plot.tsx +++ b/packages/grafana-ui/src/components/uPlot/Plot.tsx @@ -74,9 +74,9 @@ export const UPlotChart: React.FC = (props) => { // Memoize plot context const plotCtx = useMemo(() => { return { - plot: plotInstance.current, + getPlot: () => plotInstance.current, }; - }, [plotInstance.current, props.data]); + }, []); return ( diff --git a/packages/grafana-ui/src/components/uPlot/context.ts b/packages/grafana-ui/src/components/uPlot/context.ts index 338b90f8c60..f0ce70badcf 100644 --- a/packages/grafana-ui/src/components/uPlot/context.ts +++ b/packages/grafana-ui/src/components/uPlot/context.ts @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import uPlot from 'uplot'; interface PlotContextType { - plot: uPlot | undefined; + getPlot: () => uPlot | undefined; } /** diff --git a/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx b/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx index ceb410581a7..441f79be961 100644 --- a/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx +++ b/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx @@ -27,7 +27,8 @@ export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords const eventMarkers = useMemo(() => { const markers: React.ReactNode[] = []; - if (!plotCtx.plot || events.length === 0) { + const plotInstance = plotCtx.getPlot(); + if (!plotInstance || events.length === 0) { return markers; } @@ -49,7 +50,7 @@ export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords return <>{markers}; }, [events, renderEventMarker, renderToken, plotCtx]); - if (!plotCtx.plot) { + if (!plotCtx.getPlot()) { return null; } diff --git a/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx b/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx index 0b2ad895bfb..0e2edea48a5 100644 --- a/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx +++ b/packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx @@ -10,7 +10,7 @@ interface XYCanvasProps {} */ export const XYCanvas: React.FC = ({ children }) => { const plotCtx = usePlotContext(); - const plotInstance = plotCtx.plot; + const plotInstance = plotCtx.getPlot(); if (!plotInstance) { return null; diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx index 98404b0aaf6..22b996cf6f2 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx @@ -74,7 +74,8 @@ export const TooltipPlugin: React.FC = ({ }); }, [config]); - if (!plotCtx.plot || focusedPointIdx === null) { + const plotInstance = plotCtx.getPlot(); + if (!plotInstance || focusedPointIdx === null) { return null; } @@ -91,10 +92,10 @@ export const TooltipPlugin: React.FC = ({ // when interacting with a point in single mode if (mode === TooltipDisplayMode.Single && focusedSeriesIdx !== null) { const field = otherProps.data.fields[focusedSeriesIdx]; - const plotSeries = plotCtx.plot.series; + const plotSeries = plotInstance.series; const fieldFmt = field.display || getDisplayProcessor({ field, timeZone, theme }); - const value = fieldFmt(plotCtx.plot.data[focusedSeriesIdx!][focusedPointIdx]); + const value = fieldFmt(plotInstance.data[focusedSeriesIdx!][focusedPointIdx]); tooltip = ( = ({ if (mode === TooltipDisplayMode.Multi) { let series: SeriesTableRowProps[] = []; - const plotSeries = plotCtx.plot.series; + const plotSeries = plotInstance.series; for (let i = 0; i < plotSeries.length; i++) { const frame = otherProps.data; @@ -127,7 +128,7 @@ export const TooltipPlugin: React.FC = ({ continue; } - const value = field.display!(plotCtx.plot.data[i][focusedPointIdx]); + const value = field.display!(plotInstance.data[i][focusedPointIdx]); series.push({ // TODO: align with uPlot typings diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx index f2f54f39162..a8dbf918583 100644 --- a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx +++ b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx @@ -84,7 +84,7 @@ export const AnnotationsPlugin: React.FC = ({ annotation (frame: DataFrame, index: number) => { const view = new DataFrameView(frame); const annotation = view.get(index); - const plotInstance = plotCtx.plot; + const plotInstance = plotCtx.getPlot(); if (!annotation.time || !plotInstance) { return undefined; } @@ -94,7 +94,7 @@ export const AnnotationsPlugin: React.FC = ({ annotation y: plotInstance.bbox.height / window.devicePixelRatio + 4, }; }, - [plotCtx.plot] + [plotCtx] ); const renderMarker = useCallback( diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx index ad1be4156ee..2d5b71fd5a0 100644 --- a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx +++ b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx @@ -22,7 +22,7 @@ export const ExemplarsPlugin: React.FC = ({ exemplars, tim const mapExemplarToXYCoords = useCallback( (dataFrame: DataFrame, index: number) => { - const plotInstance = plotCtx.plot; + const plotInstance = plotCtx.getPlot(); const time = dataFrame.fields.find((f) => f.name === TIME_SERIES_TIME_FIELD_NAME); const value = dataFrame.fields.find((f) => f.name === TIME_SERIES_VALUE_FIELD_NAME);