QueryOptions: Open QueryEditors: run queries after changing group options #29864

public/app/features/query/components/QueryGroup.tsx

@@ -167,8 +167,13 @@ export class QueryGroup extends PureComponent<Props, State> {
     this.setState({ scrollTop: 1000 });
   };
 
+  onUpdateAndRun = (options: QueryGroupOptions) => {
+    this.props.onOptionsChange(options);
+    this.props.onRunQueries();
+  };
+
   renderTopSection(styles: QueriesTabStyls) {
-    const { onOpenQueryInspector, options, onOptionsChange } = this.props;
+    const { onOpenQueryInspector, options } = this.props;
     const { dataSource, data } = this.state;
 
     return (
@@ -199,7 +204,7 @@ export class QueryGroup extends PureComponent<Props, State> {
                   options={options}
                   dataSource={dataSource}
                   data={data}
-                  onChange={onOptionsChange}
+                  onChange={this.onUpdateAndRun}
                 />
               </div>
               {onOpenQueryInspector && (

public/app/features/query/components/QueryGroupOptions.tsx

@@ -144,19 +144,23 @@ export class QueryGroupOptionsEditor extends PureComponent<Props, State> {
       maxDataPoints = null;
     }
 
-    onChange({
-      ...options,
-      maxDataPoints: maxDataPoints,
-    });
+    if (maxDataPoints !== options.maxDataPoints) {
+      onChange({
+        ...options,
+        maxDataPoints,
+      });
+    }
   };
 
   onMinIntervalBlur = (event: ChangeEvent<HTMLInputElement>) => {
     const { options, onChange } = this.props;
-
-    onChange({
-      ...options,
-      minInterval: emptyToNull(event.target.value),
-    });
+    const minInterval = emptyToNull(event.target.value);
+    if (minInterval !== options.minInterval) {
+      onChange({
+        ...options,
+        minInterval,
+      });
+    }
   };
 
   renderCacheTimeoutOption() {