IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-12 16:45:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

EventsCanvas: Clean up action to avoid memory leak (#37592)

Browse Source
This commit is contained in:
An 2021-08-17 20:29:24 -04:00 committed by GitHub
parent 16b1922cdc
commit b028dbc537
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx
View File

@ -1,5 +1,5 @@
import { DataFrame, DataFrameFieldIndex } from '@grafana/data';
import React, { useLayoutEffect, useMemo, useState } from 'react';
import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { usePlotContext } from '../context';
import { Marker } from './Marker';
import { XYCanvas } from './XYCanvas';
@ -21,13 +21,25 @@ export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords
// render token required to re-render annotation markers. Rendering lines happens in uPlot and the props do not change
// so we need to force the re-render when the draw hook was performed by uPlot
const [renderToken, setRenderToken] = useState(0);
const isMounted = useRef(false);
useLayoutEffect(() => {
if (isMounted.current === false) {
return;
}
config.addHook('draw', () => {
setRenderToken((s) => s + 1);
});
}, [config, setRenderToken]);
// clean up action to avoid memory leak
useEffect(() => {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
const eventMarkers = useMemo(() => {
const markers: React.ReactNode[] = [];
const plotInstance = plotCtx.plot;