Panel Editor: avoid updates when schema is the same (#32668)

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -29,7 +29,7 @@ const PanelInspectorUnconnected: React.FC<Props> = ({ panel, dashboard, plugin }
   });
 
   const location = useLocation();
-  const { data, isLoading, error } = usePanelLatestData(panel, dataOptions);
+  const { data, isLoading, error } = usePanelLatestData(panel, dataOptions, true);
   const metaDs = useDatasourceMetadata(data);
   const tabs = useInspectTabs(dashboard, plugin, error, metaDs);
   const defaultTab = new URLSearchParams(location.search).get('inspectTab') as InspectTab;

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

@@ -32,7 +32,7 @@ export const OptionsPane: React.FC<Props> = ({
 }: Props) => {
   const styles = useStyles(getStyles);
   const isVizPickerOpen = useSelector((state: StoreState) => state.panelEditor.isVizPickerOpen);
-  const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false });
+  const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);
 
   return (
     <div className={styles.wrapper} aria-label={selectors.components.PanelEditor.OptionsPane.content}>

public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts

@@ -1,4 +1,11 @@
-import { DataQueryError, LoadingState, PanelData } from '@grafana/data';
+import {
+  compareArrayValues,
+  compareDataFrameStructures,
+  DataFrame,
+  DataQueryError,
+  LoadingState,
+  PanelData,
+} from '@grafana/data';
 import { useEffect, useRef, useState } from 'react';
 import { PanelModel } from '../../state';
 import { Unsubscribable } from 'rxjs';
@@ -14,16 +21,37 @@ interface UsePanelLatestData {
 /**
  * Subscribes and returns latest panel data from PanelQueryRunner
  */
-export const usePanelLatestData = (panel: PanelModel, options: GetDataOptions): UsePanelLatestData => {
+export const usePanelLatestData = (
+  panel: PanelModel,
+  options: GetDataOptions,
+  checkSchema?: boolean
+): UsePanelLatestData => {
   const querySubscription = useRef<Unsubscribable>();
   const [latestData, setLatestData] = useState<PanelData>();
 
   useEffect(() => {
+    let last: DataFrame[] = [];
+    let lastUpdate = 0;
+
     querySubscription.current = panel
       .getQueryRunner()
       .getData(options)
       .subscribe({
-        next: (data) => setLatestData(data),
+        next: (data) => {
+          if (checkSchema) {
+            const sameStructure = compareArrayValues(last, data.series, compareDataFrameStructures);
+            if (sameStructure) {
+              const now = Date.now();
+              const elapsed = now - lastUpdate;
+              if (elapsed < 10000) {
+                return; // avoid updates if the schema has not changed for 10s
+              }
+              lastUpdate = now;
+            }
+            last = data.series;
+          }
+          setLatestData(data);
+        },
       });
 
     return () => {