NodeGraph: fix rendering of node graph in dashboard panel (#44552) (#44558)

Signed-off-by: tharun <rajendrantharun@live.com>
(cherry picked from commit 5721933e4b)

Co-authored-by: Tharun Rajendran <rajendrantharun@live.com>

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<Props, ExploreState> {
     const { exploreId, showTrace, queryResponse } = this.props;
     return (
       <NodeGraphContainer
-        dataFrames={this.getNodeGraphDataFrames(queryResponse.series)}
+        dataFrames={this.memoizedGetNodeGraphDataFrames(queryResponse.series)}
         exploreId={exploreId}
         withTraceView={showTrace}
       />
     );
   }
 
-  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;

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<PanelProps<Options>> = ({ width, height, data }) => {
@@ -14,9 +16,10 @@ export const NodeGraphPanel: React.FunctionComponent<PanelProps<Options>> = ({ w
     );
   }
 
+  const memoizedGetNodeGraphDataFrames = memoizeOne(getNodeGraphDataFrames);
   return (
     <div style={{ width, height }}>
-      <NodeGraph dataFrames={data.series} getLinks={getLinks} />
+      <NodeGraph dataFrames={memoizedGetNodeGraphDataFrames(data.series)} getLinks={getLinks} />
     </div>
   );
 };

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');
+}