Fix dashboards crashing by making some performance optimizations

Co-authored-by: Brandon Farmer <bthesorceror@gmail.com>

ui/src/shared/annotations/helpers.ts

@@ -16,7 +16,8 @@ export const TEMP_ANNOTATION: AnnotationInterface = {
 
 export const visibleAnnotations = (
   xAxisRange: [number, number],
-  annotations: AnnotationInterface[] = []
+  annotations: AnnotationInterface[] = [],
+  tempAnnotationID: string
 ): AnnotationInterface[] => {
   const [xStart, xEnd] = xAxisRange
 
@@ -25,6 +26,9 @@ export const visibleAnnotations = (
   }
 
   return annotations.filter(a => {
+    if (a.id === tempAnnotationID) {
+      return false
+    }
     if (a.startTime === null || a.endTime === null) {
       return false
     }

ui/src/shared/components/Annotations.tsx

@@ -92,8 +92,9 @@ class Annotations extends Component<Props> {
   get annotations() {
     return visibleAnnotations(
       this.props.xAxisRange,
-      this.props.annotations
-    ).filter(a => a.id !== TEMP_ANNOTATION.id)
+      this.props.annotations,
+      TEMP_ANNOTATION.id
+    )
   }
 
   get tempAnnotation() {

ui/src/shared/components/Dygraph.tsx

@@ -1,10 +1,4 @@
-import React, {
-  Component,
-  CSSProperties,
-  MouseEvent,
-  ReactElement,
-  Children,
-} from 'react'
+import React, {Component, CSSProperties, MouseEvent} from 'react'
 import {connect} from 'react-redux'
 import _ from 'lodash'
 import NanoDate from 'nano-date'
@@ -74,7 +68,6 @@ interface Props {
 
 interface State {
   staticLegendHeight: null | number
-  isMounted: boolean
   xAxisRange: [number, number]
 }
 
@@ -110,7 +103,6 @@ class Dygraph extends Component<Props, State> {
     super(props)
     this.state = {
       staticLegendHeight: null,
-      isMounted: false,
       xAxisRange: [0, 0],
     }
 
@@ -174,7 +166,7 @@ class Dygraph extends Component<Props, State> {
 
     const {w} = this.dygraph.getArea()
     this.props.setResolution(w)
-    this.setState({isMounted: true, xAxisRange: this.dygraph.xAxisRange()})
+    this.setState({xAxisRange: this.dygraph.xAxisRange()})
   }
 
   public componentWillUnmount() {
@@ -184,12 +176,6 @@ class Dygraph extends Component<Props, State> {
     }
   }
 
-  public shouldComponentUpdate(nextProps: Props, nextState: State) {
-    const arePropsEqual = _.isEqual(this.props, nextProps)
-    const areStatesEqual = _.isEqual(this.state, nextState)
-    return !arePropsEqual || !areStatesEqual
-  }
-
   public componentDidUpdate(prevProps: Props) {
     const {
       labels,
@@ -275,7 +261,7 @@ class Dygraph extends Component<Props, State> {
             />
             <Crosshair
               dygraph={this.dygraph}
-              staticLegendHeight={staticLegendHeight}
+              stasticLegendHeight={staticLegendHeight}
             />
           </div>
         )}
@@ -293,7 +279,7 @@ class Dygraph extends Component<Props, State> {
             }
           />
         )}
-        {this.isGraphNested &&
+        {this.nestedGraph &&
           React.cloneElement(this.nestedGraph, {
             staticLegendHeight,
           })}
@@ -312,17 +298,17 @@ class Dygraph extends Component<Props, State> {
     )
   }
 
-  private get nestedGraph(): ReactElement<any> {
+  private get nestedGraph(): JSX.Element {
     const {children} = this.props
-    const kids = Children.toArray(children)
+    if (children) {
+      if (children[0]) {
+        return children[0]
+      }
 
-    return _.get(kids, '0', null)
-  }
+      return children as JSX.Element
+    }
 
-  private get isGraphNested(): boolean {
-    const {children} = this.props
-
-    return children && Children.count(children) > 0
+    return null
   }
 
   private get dygraphStyle(): CSSProperties {
@@ -375,8 +361,15 @@ class Dygraph extends Component<Props, State> {
   }
 
   private handleDraw = () => {
-    if (this.dygraph) {
-      this.setState({xAxisRange: this.dygraph.xAxisRange()})
+    if (!this.dygraph) {
+      return
+    }
+
+    const {xAxisRange} = this.state
+    const newXAxisRange = this.dygraph.xAxisRange()
+
+    if (!_.isEqual(xAxisRange, newXAxisRange)) {
+      this.setState({xAxisRange: newXAxisRange})
     }
   }
 
@@ -439,12 +432,7 @@ class Dygraph extends Component<Props, State> {
   }
 
   private get areAnnotationsVisible() {
-    if (!this.dygraph) {
-      return false
-    }
-
-    const [start, end] = this.dygraph && this.dygraph.xAxisRange()
-    return !!start && !!end
+    return !!this.dygraph
   }
 
   private getLabel = (axis: string): string => {

ui/src/shared/components/DygraphLegend.tsx

@@ -176,7 +176,10 @@ class DygraphLegend extends PureComponent<Props, State> {
   }
 
   private highlightCallback = (e: MouseEvent) => {
-    this.props.setActiveCell(this.props.cellID)
+    if (this.props.activeCellID !== this.props.cellID) {
+      this.props.setActiveCell(this.props.cellID)
+    }
+
     this.setState({pageX: e.pageX})
     this.props.onShow(e)
   }

ui/src/shared/components/LayoutRenderer.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import ReactGridLayout, {WidthProvider} from 'react-grid-layout'
+import {fastMap} from 'src/utils/fast'
 
 import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'
 
@@ -105,7 +106,7 @@ class LayoutRenderer extends Component {
           isDraggable={isDashboard}
           isResizable={isDashboard}
         >
-          {cells.map(cell => (
+          {fastMap(cells, cell => (
             <div key={cell.i}>
               <Authorized
                 requiredRole={EDITOR_ROLE}