perf: dashboard cell and view rendering (#14078)

* chore: package.lock * chore: remove unused logic * perf: only render views in view :) * chore: cleanup * chore: remove cruft
influxdata · Jun 6, 2019 · 02c12a0 · 02c12a0
1 parent cbda5d6
commit 02c12a0
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 64 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/src/shared/components/RefreshingView.tsx b/ui/src/shared/components/RefreshingView.tsx
@@ -24,7 +24,6 @@ import {SpinnerContainer, TechnoSpinner} from '@influxdata/clockface'
 
 interface OwnProps {
   timeRange: TimeRange
-  inView: boolean
   manualRefresh: number
   properties: QueryViewProperties
   dashboardID: string
@@ -62,7 +61,7 @@ class RefreshingView extends PureComponent<Props, State> {
   }
 
   public render() {
-    const {inView, properties, manualRefresh, variablesStatus} = this.props
+    const {properties, manualRefresh, variablesStatus} = this.props
     const {submitToken} = this.state
 
     return (
@@ -71,7 +70,6 @@ class RefreshingView extends PureComponent<Props, State> {
         spinnerComponent={<TechnoSpinner />}
       >
         <TimeSeries
-          inView={inView}
           submitToken={submitToken}
           queries={this.queries}
           key={manualRefresh}

diff --git a/ui/src/shared/components/TimeSeries.tsx b/ui/src/shared/components/TimeSeries.tsx
@@ -47,7 +47,6 @@ interface OwnProps {
   variables?: VariableAssignment[]
   submitToken: number
   implicitSubmit?: boolean
-  inView?: boolean
   children: (r: QueriesState) => JSX.Element
 }
 
@@ -77,7 +76,6 @@ const defaultState = (): State => ({
 
 class TimeSeries extends Component<Props & WithRouterProps, State> {
   public static defaultProps = {
-    inView: true,
     implicitSubmit: true,
   }
 
@@ -118,14 +116,10 @@ class TimeSeries extends Component<Props & WithRouterProps, State> {
   }
 
   private reload = async () => {
-    const {inView, variables, notify} = this.props
+    const {variables, notify} = this.props
     const queries = this.props.queries.filter(({text}) => !!text.trim())
     const orgID = this.props.params.orgID
 
-    if (!inView) {
-      return
-    }
-
     if (!queries.length) {
       this.setState(defaultState())
 

diff --git a/ui/src/shared/components/cells/Cell.tsx b/ui/src/shared/components/cells/Cell.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {Component} from 'react'
+import React, {Component, RefObject} from 'react'
 import {connect} from 'react-redux'
 import {get} from 'lodash'
 
@@ -38,10 +38,36 @@ interface OwnProps {
   onEditNote: (id: string) => void
 }
 
+interface State {
+  inView: boolean
+}
+
 type Props = StateProps & OwnProps
 
 @ErrorHandling
-class CellComponent extends Component<Props> {
+class CellComponent extends Component<Props, State> {
+  state: State = {
+    inView: false,
+  }
+
+  private observer: IntersectionObserver
+
+  private cellRef: RefObject<HTMLDivElement> = React.createRef()
+
+  public componentDidMount() {
+    this.observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        const {isIntersecting} = entry
+        if (isIntersecting) {
+          this.setState({inView: true})
+          this.observer.disconnect()
+        }
+      })
+    })
+
+    this.observer.observe(this.cellRef.current)
+  }
+
   public render() {
     const {
       onEditCell,
@@ -51,6 +77,7 @@ class CellComponent extends Component<Props> {
       cell,
       view,
     } = this.props
+    const {inView} = this.state
 
     return (
       <>
@@ -66,8 +93,12 @@ class CellComponent extends Component<Props> {
             onCSVDownload={this.handleCSVDownload}
           />
         )}
-        <div className="cell--view" data-testid="cell--view-empty">
-          {this.view}
+        <div
+          className="cell--view"
+          data-testid="cell--view-empty"
+          ref={this.cellRef}
+        >
+          {inView && this.view}
         </div>
       </>
     )