diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index cea1890551c..876222122d5 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -6,7 +6,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'; import memoizeOne from 'memoize-one'; import { selectors } from '@grafana/e2e-selectors'; import { Collapse, CustomScrollbar, ErrorBoundaryAlert, Themeable2, withTheme2 } from '@grafana/ui'; -import { AbsoluteTimeRange, DataFrame, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data'; +import { AbsoluteTimeRange, DataQuery, GrafanaTheme2, LoadingState, RawTimeRange } from '@grafana/data'; import LogsContainer from './LogsContainer'; import { QueryRows } from './QueryRows'; @@ -31,6 +31,7 @@ import { ExploreGraph } from './ExploreGraph'; import { LogsVolumePanel } from './LogsVolumePanel'; import { ExploreGraphLabel } from './ExploreGraphLabel'; import { ExploreGraphStyle } from 'app/core/utils/explore'; +import { getNodeGraphDataFrames } from 'app/plugins/panel/nodeGraph/utils'; const getStyles = (theme: GrafanaTheme2) => { return { @@ -267,20 +268,14 @@ export class Explore extends React.PureComponent { const { exploreId, showTrace, queryResponse } = this.props; return ( ); } - getNodeGraphDataFrames = memoizeOne((frames: DataFrame[]) => { - // TODO: this not in sync with how other types of responses are handled. Other types have a query response - // processing pipeline which ends up populating redux state with proper data. As we move towards more dataFrame - // oriented API it seems like a better direction to move such processing into to visualisations and do minimal - // and lazy processing here. Needs bigger refactor so keeping nodeGraph and Traces as they are for now. - return frames.filter((frame) => frame.meta?.preferredVisualisationType === 'nodeGraph'); - }); + memoizedGetNodeGraphDataFrames = memoizeOne(getNodeGraphDataFrames); renderTraceViewPanel() { const { queryResponse, splitOpen, exploreId } = this.props; diff --git a/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx b/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx index c61ce2984bf..5e1394a5b2f 100644 --- a/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx +++ b/public/app/plugins/panel/nodeGraph/NodeGraphPanel.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { PanelProps } from '@grafana/data'; +import memoizeOne from 'memoize-one'; import { Options } from './types'; import { NodeGraph } from './NodeGraph'; +import { getNodeGraphDataFrames } from './utils'; import { useLinks } from '../../../features/explore/utils/links'; export const NodeGraphPanel: React.FunctionComponent> = ({ width, height, data }) => { @@ -14,9 +16,10 @@ export const NodeGraphPanel: React.FunctionComponent> = ({ w ); } + const memoizedGetNodeGraphDataFrames = memoizeOne(getNodeGraphDataFrames); return (
- +
); }; diff --git a/public/app/plugins/panel/nodeGraph/utils.ts b/public/app/plugins/panel/nodeGraph/utils.ts index a01fcd68744..c1005a326f0 100644 --- a/public/app/plugins/panel/nodeGraph/utils.ts +++ b/public/app/plugins/panel/nodeGraph/utils.ts @@ -317,3 +317,11 @@ export function graphBounds(nodes: NodeDatum[]): Bounds { }, }; } + +export function getNodeGraphDataFrames(frames: DataFrame[]) { + // TODO: this not in sync with how other types of responses are handled. Other types have a query response + // processing pipeline which ends up populating redux state with proper data. As we move towards more dataFrame + // oriented API it seems like a better direction to move such processing into to visualisations and do minimal + // and lazy processing here. Needs bigger refactor so keeping nodeGraph and Traces as they are for now. + return frames.filter((frame) => frame.meta?.preferredVisualisationType === 'nodeGraph'); +}