Explore: Log highlights only update when user stops typing (#17845)

Reverts performance enhancements made to LogsContainer as they are no
longer needed, and complicated things.
Closes #17818

public/app/features/explore/LogsContainer.tsx

-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
 import {
 import {
@@ -52,7 +52,7 @@ interface LogsContainerProps {
   absoluteRange: AbsoluteTimeRange;
   absoluteRange: AbsoluteTimeRange;
 }
 }
 
 
-export class LogsContainer extends Component<LogsContainerProps> {
+export class LogsContainer extends PureComponent<LogsContainerProps> {
   onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
   onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
     const { exploreId, updateTimeRange } = this.props;
     const { exploreId, updateTimeRange } = this.props;
 
 
@@ -86,19 +86,6 @@ export class LogsContainer extends Component<LogsContainerProps> {
     return [];
     return [];
   };
   };
 
 
-  // Limit re-rendering to when a query is finished executing or when the deduplication strategy changes
-  // for performance reasons.
-  shouldComponentUpdate(nextProps: LogsContainerProps): boolean {
-    return (
-      nextProps.loading !== this.props.loading ||
-      nextProps.dedupStrategy !== this.props.dedupStrategy ||
-      nextProps.logsHighlighterExpressions !== this.props.logsHighlighterExpressions ||
-      nextProps.hiddenLogLevels !== this.props.hiddenLogLevels ||
-      nextProps.scanning !== this.props.scanning ||
-      nextProps.isLive !== this.props.isLive
-    );
-  }
-
   render() {
   render() {
     const {
     const {
       exploreId,
       exploreId,

public/app/features/explore/QueryField.tsx

@@ -19,6 +19,7 @@ import { makeFragment, makeValue } from '@grafana/ui';
 import PlaceholdersBuffer from './PlaceholdersBuffer';
 import PlaceholdersBuffer from './PlaceholdersBuffer';
 
 
 export const TYPEAHEAD_DEBOUNCE = 100;
 export const TYPEAHEAD_DEBOUNCE = 100;
+export const HIGHLIGHT_WAIT = 500;
 
 
 function getSuggestionByIndex(suggestions: CompletionItemGroup[], index: number): CompletionItem {
 function getSuggestionByIndex(suggestions: CompletionItemGroup[], index: number): CompletionItem {
   // Flatten suggestion groups
   // Flatten suggestion groups
@@ -77,11 +78,13 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   plugins: any[];
   plugins: any[];
   resetTimer: any;
   resetTimer: any;
   mounted: boolean;
   mounted: boolean;
+  updateHighlightsTimer: any;
 
 
   constructor(props: QueryFieldProps, context: Context<any>) {
   constructor(props: QueryFieldProps, context: Context<any>) {
     super(props, context);
     super(props, context);
 
 
     this.placeholdersBuffer = new PlaceholdersBuffer(props.initialQuery || '');
     this.placeholdersBuffer = new PlaceholdersBuffer(props.initialQuery || '');
+    this.updateHighlightsTimer = _.debounce(this.updateLogsHighlights, HIGHLIGHT_WAIT);
 
 
     // Base plugins
     // Base plugins
     this.plugins = [ClearPlugin(), NewlinePlugin(), ...(props.additionalPlugins || [])].filter(p => p);
     this.plugins = [ClearPlugin(), NewlinePlugin(), ...(props.additionalPlugins || [])].filter(p => p);
@@ -152,7 +155,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
           this.executeOnChangeAndRunQueries();
           this.executeOnChangeAndRunQueries();
         }
         }
         if (textChanged && !invokeParentOnValueChanged) {
         if (textChanged && !invokeParentOnValueChanged) {
-          this.updateLogsHighlights();
+          this.updateHighlightsTimer();
         }
         }
       }
       }
     });
     });
@@ -168,6 +171,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
 
   updateLogsHighlights = () => {
   updateLogsHighlights = () => {
     const { onChange } = this.props;
     const { onChange } = this.props;
+
     if (onChange) {
     if (onChange) {
       onChange(Plain.serialize(this.state.value));
       onChange(Plain.serialize(this.state.value));
     }
     }