From 364f1f2e559c184170bd9b5e27edab0c06f296bf Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Tue, 2 Jul 2019 09:06:21 +0100
Subject: [PATCH] =?UTF-8?q?Explore:=C2=A0Log=20highlights=20only=20update?=
 =?UTF-8?q?=20when=20user=20stops=20typing=20(#17845)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reverts performance enhancements made to LogsContainer as they are no
longer needed, and complicated things.
Closes #17818
---
 public/app/features/explore/LogsContainer.tsx | 17 ++---------------
 public/app/features/explore/QueryField.tsx    |  6 +++++-
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx
index 4b5c00798d4..20da384dc1f 100644
--- a/public/app/features/explore/LogsContainer.tsx
+++ b/public/app/features/explore/LogsContainer.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import {
@@ -52,7 +52,7 @@ interface LogsContainerProps {
   absoluteRange: AbsoluteTimeRange;
 }
 
-export class LogsContainer extends Component<LogsContainerProps> {
+export class LogsContainer extends PureComponent<LogsContainerProps> {
   onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
     const { exploreId, updateTimeRange } = this.props;
 
@@ -86,19 +86,6 @@ export class LogsContainer extends Component<LogsContainerProps> {
     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() {
     const {
       exploreId,
diff --git a/public/app/features/explore/QueryField.tsx b/public/app/features/explore/QueryField.tsx
index aded4cf029a..93b6c075092 100644
--- a/public/app/features/explore/QueryField.tsx
+++ b/public/app/features/explore/QueryField.tsx
@@ -19,6 +19,7 @@ import { makeFragment, makeValue } from '@grafana/ui';
 import PlaceholdersBuffer from './PlaceholdersBuffer';
 
 export const TYPEAHEAD_DEBOUNCE = 100;
+export const HIGHLIGHT_WAIT = 500;
 
 function getSuggestionByIndex(suggestions: CompletionItemGroup[], index: number): CompletionItem {
   // Flatten suggestion groups
@@ -77,11 +78,13 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   plugins: any[];
   resetTimer: any;
   mounted: boolean;
+  updateHighlightsTimer: any;
 
   constructor(props: QueryFieldProps, context: Context<any>) {
     super(props, context);
 
     this.placeholdersBuffer = new PlaceholdersBuffer(props.initialQuery || '');
+    this.updateHighlightsTimer = _.debounce(this.updateLogsHighlights, HIGHLIGHT_WAIT);
 
     // Base plugins
     this.plugins = [ClearPlugin(), NewlinePlugin(), ...(props.additionalPlugins || [])].filter(p => p);
@@ -152,7 +155,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
           this.executeOnChangeAndRunQueries();
         }
         if (textChanged && !invokeParentOnValueChanged) {
-          this.updateLogsHighlights();
+          this.updateHighlightsTimer();
         }
       }
     });
@@ -168,6 +171,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
 
   updateLogsHighlights = () => {
     const { onChange } = this.props;
+
     if (onChange) {
       onChange(Plain.serialize(this.state.value));
     }