From dff08edc5604985a6414fbb8bbf5bbe7912a9fbf Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Wed, 18 Jul 2018 15:07:32 +0200
Subject: [PATCH 01/12] Refactor vis components to TypeScript

---
 src/ui/public/persisted_state/index.d.ts      |  20 +++
 .../persisted_state/persisted_state.d.ts      |  22 +++
 src/ui/public/vis/index.d.ts                  |   1 +
 src/ui/public/vis/update_status.ts            |   3 +-
 src/ui/public/vis/vis.d.ts                    |  12 +-
 src/ui/public/vis/vis_types/vis_type.d.ts     |  39 +++++
 .../visualization_noresults.test.js.snap      |  29 ++++
 .../components/{index.js => index.ts}         |   2 -
 .../visualize/components/visualization.js     |  87 ----------
 .../components/visualization.test.js          |   8 +
 .../visualize/components/visualization.tsx    | 110 ++++++++++++
 .../components/visualization_chart.js         | 113 -------------
 .../components/visualization_chart.tsx        | 156 ++++++++++++++++++
 .../visualization_noresults.test.js           |   5 +
 ...results.js => visualization_noresults.tsx} |   8 +-
 15 files changed, 408 insertions(+), 207 deletions(-)
 create mode 100644 src/ui/public/persisted_state/index.d.ts
 create mode 100644 src/ui/public/persisted_state/persisted_state.d.ts
 create mode 100644 src/ui/public/vis/vis_types/vis_type.d.ts
 create mode 100644 src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap
 rename src/ui/public/visualize/components/{index.js => index.ts} (91%)
 delete mode 100644 src/ui/public/visualize/components/visualization.js
 create mode 100644 src/ui/public/visualize/components/visualization.tsx
 delete mode 100644 src/ui/public/visualize/components/visualization_chart.js
 create mode 100644 src/ui/public/visualize/components/visualization_chart.tsx
 rename src/ui/public/visualize/components/{visualization_noresults.js => visualization_noresults.tsx} (86%)

diff --git a/src/ui/public/persisted_state/index.d.ts b/src/ui/public/persisted_state/index.d.ts
new file mode 100644
index 0000000000000..ab5a3e7be7d28
--- /dev/null
+++ b/src/ui/public/persisted_state/index.d.ts
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { PersistedState } from './persisted_state';
diff --git a/src/ui/public/persisted_state/persisted_state.d.ts b/src/ui/public/persisted_state/persisted_state.d.ts
new file mode 100644
index 0000000000000..6a02df8f67f7b
--- /dev/null
+++ b/src/ui/public/persisted_state/persisted_state.d.ts
@@ -0,0 +1,22 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// It's currenty hard to properly type PersistedState, since it dynamically
+// inherits the class passed into the constructor.
+export type PersistedState = any;
diff --git a/src/ui/public/vis/index.d.ts b/src/ui/public/vis/index.d.ts
index 0ee214507a9f3..6dddd51132908 100644
--- a/src/ui/public/vis/index.d.ts
+++ b/src/ui/public/vis/index.d.ts
@@ -19,3 +19,4 @@
 
 export { AggConfig } from './agg_config';
 export { Vis, VisProvider } from './vis';
+export { VisualizationController, VisType } from './vis_types/vis_type';
diff --git a/src/ui/public/vis/update_status.ts b/src/ui/public/vis/update_status.ts
index 51e26bcc100ad..17b5f968da327 100644
--- a/src/ui/public/vis/update_status.ts
+++ b/src/ui/public/vis/update_status.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { PersistedState } from '../persisted_state';
 import { calculateObjectHash } from './lib/calculate_object_hash';
 import { Vis } from './vis';
 
@@ -57,7 +58,7 @@ function hasSizeChanged(size: Size, oldSize?: Size): boolean {
 function getUpdateStatus<T extends Status>(
   requiresUpdateStatus: T[] = [],
   obj: any,
-  param: { vis: Vis; visData: any; uiState: any }
+  param: { vis: Vis; visData: any; uiState: PersistedState }
 ): { [reqStats in T]: boolean } {
   const status = {} as { [reqStats in T]: boolean };
 
diff --git a/src/ui/public/vis/vis.d.ts b/src/ui/public/vis/vis.d.ts
index 004795920ab41..ef2ac096f27f0 100644
--- a/src/ui/public/vis/vis.d.ts
+++ b/src/ui/public/vis/vis.d.ts
@@ -17,6 +17,16 @@
  * under the License.
  */
 
-export type Vis = any;
+import { VisType } from './vis_types/vis_type';
+
+export interface Vis {
+  type: VisType;
+
+  // Since we haven't typed everything here yet, we basically "any" the rest
+  // of that interface. This should be removed as soon as this type definition
+  // has been completed. But that way we at least have typing for a couple of
+  // properties on that type.
+  [key: string]: any;
+}
 
 export type VisProvider = (...dependencies: any[]) => Vis;
diff --git a/src/ui/public/vis/vis_types/vis_type.d.ts b/src/ui/public/vis/vis_types/vis_type.d.ts
new file mode 100644
index 0000000000000..e5e0048b7c2e0
--- /dev/null
+++ b/src/ui/public/vis/vis_types/vis_type.d.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Vis } from '..';
+import { Status } from '../update_status';
+
+export class VisualizationController {
+  constructor(element: HTMLElement, vis: Vis);
+  public render(visData: any, update: { [key in Status]: boolean }): Promise<void>;
+  public destroy(): void;
+  public isLoaded?(): Promise<void> | void;
+}
+
+export interface VisType {
+  visualization: typeof VisualizationController;
+  isAccessible?: boolean;
+
+  // Since we haven't typed everything here yet, we basically "any" the rest
+  // of that interface. This should be removed as soon as this type definition
+  // has been completed. But that way we at least have typing for a couple of
+  // properties on that type.
+  [key: string]: any;
+}
diff --git a/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap b/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap
new file mode 100644
index 0000000000000..332d75e727a22
--- /dev/null
+++ b/src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VisualizationNoResults should render according to snapshot 1`] = `
+<div
+  class="text-center visualize-error visualize-chart"
+>
+  <div
+    class="item top"
+  />
+  <div
+    class="item"
+  >
+    <h2
+      aria-hidden="true"
+    >
+      <i
+        aria-hidden="true"
+        class="fa fa-meh-o"
+      />
+    </h2>
+    <h4>
+      No results found
+    </h4>
+  </div>
+  <div
+    class="item bottom"
+  />
+</div>
+`;
diff --git a/src/ui/public/visualize/components/index.js b/src/ui/public/visualize/components/index.ts
similarity index 91%
rename from src/ui/public/visualize/components/index.js
rename to src/ui/public/visualize/components/index.ts
index b11aba5ee8278..dbb860bb5d166 100644
--- a/src/ui/public/visualize/components/index.js
+++ b/src/ui/public/visualize/components/index.ts
@@ -18,5 +18,3 @@
  */
 
 export * from './visualization';
-export * from './visualization_chart';
-export * from './visualization_noresults';
diff --git a/src/ui/public/visualize/components/visualization.js b/src/ui/public/visualize/components/visualization.js
deleted file mode 100644
index 053c90eb93212..0000000000000
--- a/src/ui/public/visualize/components/visualization.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import './visualization.less';
-import _ from 'lodash';
-import React, { Component } from 'react';
-import { VisualizationNoResults, VisualizationChart } from './';
-
-const _showNoResultsMessage = (vis, visData) => {
-  const requiresSearch = _.get(vis, 'type.requiresSearch');
-  const isZeroHits = _.get(visData, 'hits.total') === 0;
-  const shouldShowMessage = !_.get(vis, 'params.handleNoResults');
-
-  return Boolean(requiresSearch && isZeroHits && shouldShowMessage);
-};
-
-export class Visualization extends Component {
-  static getDerivedStateFromProps(props, prevState) {
-    const listenOnChangeChanged = props.hasOwnProperty('listenOnChange') && props.listenOnChange !== prevState.listenOnChange;
-    const uiStateChanged = props.uiState && props.uiState !== props.vis.getUiState();
-    if (listenOnChangeChanged || uiStateChanged) {
-      throw new Error('Changing listenOnChange or uiState props is not allowed!');
-    }
-
-    const showNoResultsMessage = _showNoResultsMessage(props.vis, props.visData);
-    if (prevState.showNoResultsMessage !== showNoResultsMessage) {
-      return { showNoResultsMessage };
-    }
-    return null;
-  }
-
-  constructor(props) {
-    super(props);
-
-    const { vis, visData, uiState, listenOnChange } = props;
-
-    vis._setUiState(props.uiState);
-    if (listenOnChange) {
-      uiState.on('change', this._onChangeListener);
-    }
-
-    this.state = {
-      listenOnChange: listenOnChange,
-      showNoResultsMessage: _showNoResultsMessage(vis, visData)
-    };
-  }
-
-  render() {
-    const { vis, visData, onInit } = this.props;
-
-    return (
-      <div className="visualization">
-        {this.state.showNoResultsMessage ? (<VisualizationNoResults />) :
-          (<VisualizationChart
-            vis={vis}
-            visData={visData}
-            onInit={onInit}
-          />)
-        }
-      </div>
-    );
-  }
-
-  _onChangeListener = () => {
-    this.forceUpdate();
-  };
-
-  componentWillUnmount() {
-    this.props.uiState.off('change', this._onChangeListener);
-  }
-}
diff --git a/src/ui/public/visualize/components/visualization.test.js b/src/ui/public/visualize/components/visualization.test.js
index 8b4a76935613d..3759a6705fabe 100644
--- a/src/ui/public/visualize/components/visualization.test.js
+++ b/src/ui/public/visualize/components/visualization.test.js
@@ -85,4 +85,12 @@ describe('Visualization', () => {
     const error = 'Changing listenOnChange or uiState props is not allowed!';
     expect(() => wrapper.setProps({ listenOnChange: false })).toThrow(error);
   });
+
+  it('should call onInit when rendering a chart', () => {
+
+  });
+
+  it('should call onInit when rendering no data', () => {
+
+  });
 });
diff --git a/src/ui/public/visualize/components/visualization.tsx b/src/ui/public/visualize/components/visualization.tsx
new file mode 100644
index 0000000000000..fce23244ed743
--- /dev/null
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -0,0 +1,110 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { get } from 'lodash';
+import React, { Component } from 'react';
+
+import { PersistedState } from '../../persisted_state';
+import { Vis } from '../../vis';
+import { VisualizationChart } from './visualization_chart';
+import { VisualizationNoResults } from './visualization_noresults';
+
+import './visualization.less';
+
+function shouldShowNoResultsMessage(vis: Vis, visData: any): boolean {
+  const requiresSearch = get(vis, 'type.requiresSearch');
+  const isZeroHits = get(visData, 'hits.total') === 0;
+  const shouldShowMessage = !get(vis, 'params.handleNoResults');
+
+  return Boolean(requiresSearch && isZeroHits && shouldShowMessage);
+}
+
+interface VisualizationProps {
+  listenOnChange: boolean;
+  onInit?: () => void;
+  uiState: PersistedState;
+  vis: Vis;
+  visData: any;
+}
+
+interface VisualizationState {
+  listenOnChange: boolean;
+  showNoResultsMessage: boolean;
+}
+
+export class Visualization extends Component<VisualizationProps, VisualizationState> {
+  public static getDerivedStateFromProps(
+    props: VisualizationProps,
+    prevState: VisualizationState
+  ): Partial<VisualizationState> | null {
+    const listenOnChangeChanged = props.listenOnChange !== prevState.listenOnChange;
+    const uiStateChanged = props.uiState && props.uiState !== props.vis.getUiState();
+    if (listenOnChangeChanged || uiStateChanged) {
+      throw new Error('Changing listenOnChange or uiState props is not allowed!');
+    }
+
+    const showNoResultsMessage = shouldShowNoResultsMessage(props.vis, props.visData);
+    if (prevState.showNoResultsMessage !== showNoResultsMessage) {
+      return { showNoResultsMessage };
+    }
+    return null;
+  }
+
+  constructor(props: VisualizationProps) {
+    super(props);
+
+    const { vis, visData, uiState, listenOnChange } = props;
+
+    vis._setUiState(props.uiState);
+    if (listenOnChange) {
+      uiState.on('change', this.onUiStateChanged);
+    }
+
+    this.state = {
+      listenOnChange,
+      showNoResultsMessage: shouldShowNoResultsMessage(vis, visData),
+    };
+  }
+
+  public render() {
+    const { vis, visData, onInit, uiState } = this.props;
+
+    return (
+      <div className="visualization">
+        {this.state.showNoResultsMessage ? (
+          <VisualizationNoResults />
+        ) : (
+          <VisualizationChart vis={vis} visData={visData} onInit={onInit} uiState={uiState} />
+        )}
+      </div>
+    );
+  }
+
+  public componentWillUnmount() {
+    this.props.uiState.off('change', this.onUiStateChanged);
+  }
+
+  /**
+   * In case something in the uiState changed, we need to force a redraw of
+   * the visualization, since these changes could effect visualization rendering.
+   */
+  private onUiStateChanged() {
+    this.forceUpdate();
+  }
+}
diff --git a/src/ui/public/visualize/components/visualization_chart.js b/src/ui/public/visualize/components/visualization_chart.js
deleted file mode 100644
index 16c94cfca44fc..0000000000000
--- a/src/ui/public/visualize/components/visualization_chart.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { Component } from 'react';
-import * as Rx from 'rxjs';
-import { tap, debounceTime, filter, share, switchMap } from 'rxjs/operators';
-import { ResizeChecker } from 'ui/resize_checker';
-import { getUpdateStatus } from 'ui/vis/update_status';
-import { dispatchRenderComplete, dispatchRenderStart } from 'ui/render_complete';
-
-export class VisualizationChart extends Component {
-  constructor(props) {
-    super(props);
-
-    const render$ = Rx.Observable.create(observer => {
-      this._observer = observer;
-    }).pipe(
-      share()
-    );
-
-    const success$ = render$.pipe(
-      tap(() => {
-        dispatchRenderStart(this.chartDiv.current);
-      }),
-      filter(({ vis, visData, container }) => vis && container && (!vis.type.requiresSearch || visData)),
-      debounceTime(100),
-      switchMap(async ({ vis, visData, container }) => {
-        vis.size = [container.clientWidth, container.clientHeight];
-        const status = getUpdateStatus(vis.type.requiresUpdateStatus, this, this.props);
-        const renderPromise = this.visualization.render(visData, status);
-        return renderPromise;
-      })
-    );
-
-    const requestError$ = render$.pipe(
-      filter(({ vis }) => vis.requestError)
-    );
-
-    this.renderSubscription = Rx.merge(success$, requestError$)
-      .subscribe(() => {
-        dispatchRenderComplete(this.chartDiv.current);
-      });
-
-    this.chartDiv = React.createRef();
-    this.containerDiv = React.createRef();
-  }
-
-  render() {
-    return (
-      <div className="vis-container" tabIndex="0" ref={this.containerDiv}>
-        <span className="kuiScreenReaderOnly">
-          {this.props.vis.type.title} visualization, not yet accessible
-        </span>
-        <div
-          aria-hidden={!this.props.vis.type.isAccessible}
-          className="visualize-chart"
-          ref={this.chartDiv}
-        />
-      </div>
-    );
-  }
-
-  _startRenderVisualization = () => {
-    this._observer.next({
-      vis: this.props.vis,
-      visData: this.props.visData,
-      container: this.containerDiv.current
-    });
-  };
-
-  componentDidMount() {
-    const { vis, onInit } = this.props;
-    const Visualization = vis.type.visualization;
-
-    this.visualization = new Visualization(this.chartDiv.current, vis);
-
-    if (onInit) {
-      const visLoaded = this.visualization.isLoaded ? this.visualization.isLoaded() : true;
-      Promise.resolve(visLoaded).then(onInit);
-    }
-
-    this.resizeChecker = new ResizeChecker(this.containerDiv.current);
-    this.resizeChecker.on('resize', this._startRenderVisualization);
-
-    this._startRenderVisualization();
-  }
-
-  componentDidUpdate() {
-    this._startRenderVisualization();
-  }
-
-  componentWillUnmount() {
-    if (this.renderSubscription) this.renderSubscription.unsubscribe();
-    if (this.resizeChecker) this.resizeChecker.destroy();
-    if (this.visualization) this.visualization.destroy();
-  }
-}
diff --git a/src/ui/public/visualize/components/visualization_chart.tsx b/src/ui/public/visualize/components/visualization_chart.tsx
new file mode 100644
index 0000000000000..4098ba9609306
--- /dev/null
+++ b/src/ui/public/visualize/components/visualization_chart.tsx
@@ -0,0 +1,156 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { Component } from 'react';
+import * as Rx from 'rxjs';
+import { debounceTime, filter, share, switchMap, tap } from 'rxjs/operators';
+
+import { PersistedState } from '../../persisted_state';
+import { dispatchRenderComplete, dispatchRenderStart } from '../../render_complete';
+import { ResizeChecker } from '../../resize_checker';
+import { Vis, VisualizationController } from '../../vis';
+import { getUpdateStatus } from '../../vis/update_status';
+
+interface VisualizationChartProps {
+  onInit?: () => void;
+  uiState: PersistedState;
+  vis: Vis;
+  visData: any;
+}
+
+class VisualizationChart extends Component<VisualizationChartProps> {
+  private resizeChecker?: ResizeChecker;
+  private visualization?: VisualizationController;
+  private chartDiv = React.createRef<HTMLDivElement>();
+  private containerDiv = React.createRef<HTMLDivElement>();
+  private renderSubject: Rx.Subject<{
+    vis: Vis;
+    visData: any;
+    container: HTMLElement;
+  }>;
+  private renderSubscription: Rx.Subscription;
+
+  constructor(props: VisualizationChartProps) {
+    super(props);
+
+    this.renderSubject = new Rx.Subject();
+    const render$ = this.renderSubject.asObservable().pipe(share());
+
+    const success$ = render$.pipe(
+      tap(() => {
+        if (this.chartDiv.current) {
+          dispatchRenderStart(this.chartDiv.current);
+        }
+      }),
+      filter(
+        ({ vis, visData, container }) => vis && container && (!vis.type.requiresSearch || visData)
+      ),
+      debounceTime(100),
+      switchMap(async ({ vis, visData, container }) => {
+        if (!this.visualization) {
+          // This should never happen, since we only should trigger another rendering
+          // after this component has mounted and thus the visualization implementation
+          // has been initialized
+          throw new Error('Visualization implementation was not initialized on first render.');
+        }
+
+        vis.size = [container.clientWidth, container.clientHeight];
+        const status = getUpdateStatus(vis.type.requiresUpdateStatus, this, this.props);
+        return this.visualization.render(visData, status);
+      })
+    );
+
+    const requestError$ = render$.pipe(filter(({ vis }) => vis.requestError));
+
+    this.renderSubscription = Rx.merge(success$, requestError$).subscribe(() => {
+      if (this.chartDiv.current !== null) {
+        dispatchRenderComplete(this.chartDiv.current);
+      }
+    });
+  }
+
+  public render() {
+    return (
+      <div className="vis-container" tabIndex={0} ref={this.containerDiv}>
+        <span className="kuiScreenReaderOnly">
+          {this.props.vis.type.title} visualization, not yet accessible
+        </span>
+        <div
+          aria-hidden={!this.props.vis.type.isAccessible}
+          className="visualize-chart"
+          ref={this.chartDiv}
+        />
+      </div>
+    );
+  }
+
+  public componentDidMount() {
+    if (!this.chartDiv.current || !this.containerDiv.current) {
+      throw new Error('chartDiv and currentDiv reference should always be present.');
+    }
+
+    const { vis, onInit } = this.props;
+    const Visualization = vis.type.visualization;
+
+    this.visualization = new Visualization(this.chartDiv.current, vis);
+
+    if (onInit) {
+      // In case the visualization implementation has an isLoaded function, we
+      // call that and wait for the result to resolve (in case it was a promise).
+      const visLoaded = this.visualization.isLoaded && this.visualization.isLoaded();
+      Promise.resolve(visLoaded).then(onInit);
+    }
+
+    // We know that containerDiv.current will never be null, since we will always
+    // have rendered and the div is always rendered into the tree (i.e. not
+    // inside any condition).
+    this.resizeChecker = new ResizeChecker(this.containerDiv.current);
+    this.resizeChecker.on('resize', this.startRenderVisualization);
+
+    this.startRenderVisualization();
+  }
+
+  public componentDidUpdate() {
+    this.startRenderVisualization();
+  }
+
+  public componentWillUnmount() {
+    if (this.renderSubscription) {
+      this.renderSubscription.unsubscribe();
+    }
+    if (this.resizeChecker) {
+      this.resizeChecker.destroy();
+    }
+    if (this.visualization) {
+      this.visualization.destroy();
+    }
+  }
+
+  private startRenderVisualization(): void {
+    if (this.containerDiv.current && this.chartDiv.current) {
+      this.renderSubject.next({
+        vis: this.props.vis,
+        visData: this.props.visData,
+        container: this.containerDiv.current,
+      });
+    }
+  }
+}
+
+export { VisualizationChart };
diff --git a/src/ui/public/visualize/components/visualization_noresults.test.js b/src/ui/public/visualize/components/visualization_noresults.test.js
index 771f236d82064..1dbd2bcfb4e93 100644
--- a/src/ui/public/visualize/components/visualization_noresults.test.js
+++ b/src/ui/public/visualize/components/visualization_noresults.test.js
@@ -22,6 +22,11 @@ import { render } from 'enzyme';
 import { VisualizationNoResults } from './visualization_noresults';
 
 describe('VisualizationNoResults', () => {
+  it('should render according to snapshot', () => {
+    const wrapper = render(<VisualizationNoResults />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('should set html', () => {
     const wrapper = render(<VisualizationNoResults />);
     expect(wrapper.text()).toBe('No results found');
diff --git a/src/ui/public/visualize/components/visualization_noresults.js b/src/ui/public/visualize/components/visualization_noresults.tsx
similarity index 86%
rename from src/ui/public/visualize/components/visualization_noresults.js
rename to src/ui/public/visualize/components/visualization_noresults.tsx
index 17ece5ffb4758..df0d89956d98b 100644
--- a/src/ui/public/visualize/components/visualization_noresults.js
+++ b/src/ui/public/visualize/components/visualization_noresults.tsx
@@ -19,15 +19,17 @@
 
 import React from 'react';
 
-export function VisualizationNoResults() {
+export const VisualizationNoResults: React.SFC<{}> = () => {
   return (
     <div className="text-center visualize-error visualize-chart">
       <div className="item top" />
       <div className="item">
-        <h2 aria-hidden="true"><i aria-hidden="true" className="fa fa-meh-o" /></h2>
+        <h2 aria-hidden="true">
+          <i aria-hidden="true" className="fa fa-meh-o" />
+        </h2>
         <h4>No results found</h4>
       </div>
       <div className="item bottom" />
     </div>
   );
-}
+};

From 3574c370dd3818f0d4a152c022b45ae7afab408e Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Wed, 18 Jul 2018 15:16:40 +0200
Subject: [PATCH 02/12] Fix issue with ResizeChecker

---
 src/ui/public/visualize/components/visualization_chart.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/public/visualize/components/visualization_chart.tsx b/src/ui/public/visualize/components/visualization_chart.tsx
index 4098ba9609306..524570055fd5c 100644
--- a/src/ui/public/visualize/components/visualization_chart.tsx
+++ b/src/ui/public/visualize/components/visualization_chart.tsx
@@ -121,7 +121,7 @@ class VisualizationChart extends Component<VisualizationChartProps> {
     // have rendered and the div is always rendered into the tree (i.e. not
     // inside any condition).
     this.resizeChecker = new ResizeChecker(this.containerDiv.current);
-    this.resizeChecker.on('resize', this.startRenderVisualization);
+    this.resizeChecker.on('resize', () => this.startRenderVisualization());
 
     this.startRenderVisualization();
   }

From ca679e0062bb76be3c96bd704b25119271177e43 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Wed, 18 Jul 2018 18:26:27 +0200
Subject: [PATCH 03/12] Fix calling onInit for no data

---
 .../components/visualization.test.js          | 64 ++++++++++---------
 .../visualize/components/visualization.tsx    | 16 ++++-
 .../components/visualization_chart.test.js    |  2 +-
 .../components/visualization_chart.tsx        |  4 +-
 4 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/ui/public/visualize/components/visualization.test.js b/src/ui/public/visualize/components/visualization.test.js
index 3759a6705fabe..773fdddca7405 100644
--- a/src/ui/public/visualize/components/visualization.test.js
+++ b/src/ui/public/visualize/components/visualization.test.js
@@ -40,24 +40,7 @@ class VisualizationStub {
   }
 }
 
-describe('Visualization', () => {
-  const vis = {
-    _setUiState: function (uiState) {
-      this.uiState = uiState;
-    },
-    getUiState: function () {
-      return this.uiState;
-    },
-    params: {
-
-    },
-    type: {
-      title: 'new vis',
-      requiresSearch: true,
-      handleNoResults: true,
-      visualization: VisualizationStub
-    }
-  };
+describe('<Visualization/>', () => {
 
   const visData = {
     hits: { total: 1 }
@@ -69,6 +52,28 @@ describe('Visualization', () => {
     set: () => {}
   };
 
+  let vis;
+
+  beforeEach(() => {
+    vis = {
+      _setUiState: function (uiState) {
+        this.uiState = uiState;
+      },
+      getUiState: function () {
+        return this.uiState;
+      },
+      params: {
+
+      },
+      type: {
+        title: 'new vis',
+        requiresSearch: true,
+        handleNoResults: true,
+        visualization: VisualizationStub
+      }
+    };
+  });
+
   it('should display no result message when length of data is 0', () => {
     const data = { hits: { total: 0 } };
     const wrapper = render(<Visualization vis={vis} visData={data} listenOnChange={true} uiState={uiState} />);
@@ -80,17 +85,18 @@ describe('Visualization', () => {
     expect(wrapper.text()).not.toBe('No results found');
   });
 
-  it('should not allow to change listenOnChange', () => {
-    const wrapper = mount(<Visualization vis={vis} visData={visData} uiState={uiState} listenOnChange={true} />);
-    const error = 'Changing listenOnChange or uiState props is not allowed!';
-    expect(() => wrapper.setProps({ listenOnChange: false })).toThrow(error);
-  });
-
-  it('should call onInit when rendering a chart', () => {
-
-  });
-
   it('should call onInit when rendering no data', () => {
-
+    const spy = jest.fn();
+    const noData = { hits: { total: 0 } };
+    mount(
+      <Visualization
+        vis={vis}
+        visData={noData}
+        uiState={uiState}
+        listenOnChange={false}
+        onInit={spy}
+      />
+    );
+    expect(spy).toHaveBeenCalled();
   });
 });
diff --git a/src/ui/public/visualize/components/visualization.tsx b/src/ui/public/visualize/components/visualization.tsx
index fce23244ed743..68d1bc56fd1ed 100644
--- a/src/ui/public/visualize/components/visualization.tsx
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -18,7 +18,7 @@
  */
 
 import { get } from 'lodash';
-import React, { Component } from 'react';
+import React from 'react';
 
 import { PersistedState } from '../../persisted_state';
 import { Vis } from '../../vis';
@@ -48,7 +48,7 @@ interface VisualizationState {
   showNoResultsMessage: boolean;
 }
 
-export class Visualization extends Component<VisualizationProps, VisualizationState> {
+export class Visualization extends React.Component<VisualizationProps, VisualizationState> {
   public static getDerivedStateFromProps(
     props: VisualizationProps,
     prevState: VisualizationState
@@ -96,6 +96,18 @@ export class Visualization extends Component<VisualizationProps, VisualizationSt
     );
   }
 
+  public componentDidMount() {
+    if (this.state.showNoResultsMessage && this.props.onInit) {
+      this.props.onInit();
+    }
+  }
+
+  public componentDidUpdate() {
+    if (this.state.showNoResultsMessage && this.props.onInit) {
+      this.props.onInit();
+    }
+  }
+
   public componentWillUnmount() {
     this.props.uiState.off('change', this.onUiStateChanged);
   }
diff --git a/src/ui/public/visualize/components/visualization_chart.test.js b/src/ui/public/visualize/components/visualization_chart.test.js
index b867f606bd791..b6ae878ad9383 100644
--- a/src/ui/public/visualize/components/visualization_chart.test.js
+++ b/src/ui/public/visualize/components/visualization_chart.test.js
@@ -41,7 +41,7 @@ class VisualizationStub {
   }
 }
 
-describe('VisualizationChart', () => {
+describe('<VisualizationChart/>', () => {
   const vis = {
     type: {
       title: 'Test Visualization',
diff --git a/src/ui/public/visualize/components/visualization_chart.tsx b/src/ui/public/visualize/components/visualization_chart.tsx
index 524570055fd5c..91587fcc945fc 100644
--- a/src/ui/public/visualize/components/visualization_chart.tsx
+++ b/src/ui/public/visualize/components/visualization_chart.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import * as Rx from 'rxjs';
 import { debounceTime, filter, share, switchMap, tap } from 'rxjs/operators';
 
@@ -34,7 +34,7 @@ interface VisualizationChartProps {
   visData: any;
 }
 
-class VisualizationChart extends Component<VisualizationChartProps> {
+class VisualizationChart extends React.Component<VisualizationChartProps> {
   private resizeChecker?: ResizeChecker;
   private visualization?: VisualizationController;
   private chartDiv = React.createRef<HTMLDivElement>();

From 91860acc1b68e5174f1b079d59ef3548845801a4 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Wed, 18 Jul 2018 18:29:04 +0200
Subject: [PATCH 04/12] Explicit named export

---
 src/ui/public/visualize/components/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/public/visualize/components/index.ts b/src/ui/public/visualize/components/index.ts
index dbb860bb5d166..73685de81d68e 100644
--- a/src/ui/public/visualize/components/index.ts
+++ b/src/ui/public/visualize/components/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export * from './visualization';
+export { Visualization } from './visualization';

From 83b66fde9f8180d392237601b6420e4d00b645df Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Wed, 18 Jul 2018 18:56:59 +0200
Subject: [PATCH 05/12] Add title to vistype

---
 src/ui/public/vis/vis_types/vis_type.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/public/vis/vis_types/vis_type.d.ts b/src/ui/public/vis/vis_types/vis_type.d.ts
index e5e0048b7c2e0..6e74986852196 100644
--- a/src/ui/public/vis/vis_types/vis_type.d.ts
+++ b/src/ui/public/vis/vis_types/vis_type.d.ts
@@ -28,6 +28,7 @@ export class VisualizationController {
 }
 
 export interface VisType {
+  title: string;
   visualization: typeof VisualizationController;
   isAccessible?: boolean;
 

From 90623842764a6770841a7d994a38013552505188 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 19 Jul 2018 12:49:44 +0200
Subject: [PATCH 06/12] Fix error in test file

---
 src/ui/public/visualize/components/visualization.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/public/visualize/components/visualization.test.js b/src/ui/public/visualize/components/visualization.test.js
index 773fdddca7405..8c88e004c6fc6 100644
--- a/src/ui/public/visualize/components/visualization.test.js
+++ b/src/ui/public/visualize/components/visualization.test.js
@@ -48,7 +48,7 @@ describe('<Visualization/>', () => {
 
   const uiState = {
     on: () => {},
-    on: () => {},
+    off: () => {},
     set: () => {}
   };
 

From 06ee085c6de6f0562e2380013b3ca01f4f31034e Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 19 Jul 2018 12:54:33 +0200
Subject: [PATCH 07/12] Move onInit to no VisualizationNoResults

---
 .../visualize/components/visualization.tsx    | 14 +-----
 .../components/visualization_noresults.tsx    | 44 +++++++++++++------
 2 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/ui/public/visualize/components/visualization.tsx b/src/ui/public/visualize/components/visualization.tsx
index 68d1bc56fd1ed..bc7d34399be91 100644
--- a/src/ui/public/visualize/components/visualization.tsx
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -88,7 +88,7 @@ export class Visualization extends React.Component<VisualizationProps, Visualiza
     return (
       <div className="visualization">
         {this.state.showNoResultsMessage ? (
-          <VisualizationNoResults />
+          <VisualizationNoResults onInit={onInit} />
         ) : (
           <VisualizationChart vis={vis} visData={visData} onInit={onInit} uiState={uiState} />
         )}
@@ -96,18 +96,6 @@ export class Visualization extends React.Component<VisualizationProps, Visualiza
     );
   }
 
-  public componentDidMount() {
-    if (this.state.showNoResultsMessage && this.props.onInit) {
-      this.props.onInit();
-    }
-  }
-
-  public componentDidUpdate() {
-    if (this.state.showNoResultsMessage && this.props.onInit) {
-      this.props.onInit();
-    }
-  }
-
   public componentWillUnmount() {
     this.props.uiState.off('change', this.onUiStateChanged);
   }
diff --git a/src/ui/public/visualize/components/visualization_noresults.tsx b/src/ui/public/visualize/components/visualization_noresults.tsx
index df0d89956d98b..3e9ade6908fbf 100644
--- a/src/ui/public/visualize/components/visualization_noresults.tsx
+++ b/src/ui/public/visualize/components/visualization_noresults.tsx
@@ -19,17 +19,35 @@
 
 import React from 'react';
 
-export const VisualizationNoResults: React.SFC<{}> = () => {
-  return (
-    <div className="text-center visualize-error visualize-chart">
-      <div className="item top" />
-      <div className="item">
-        <h2 aria-hidden="true">
-          <i aria-hidden="true" className="fa fa-meh-o" />
-        </h2>
-        <h4>No results found</h4>
+interface VisualizationNoResultsProps {
+  onInit?: () => void;
+}
+
+export class VisualizationNoResults extends React.Component<VisualizationNoResultsProps> {
+  public render() {
+    return (
+      <div className="text-center visualize-error visualize-chart">
+        <div className="item top" />
+        <div className="item">
+          <h2 aria-hidden="true">
+            <i aria-hidden="true" className="fa fa-meh-o" />
+          </h2>
+          <h4>No results found</h4>
+        </div>
+        <div className="item bottom" />
       </div>
-      <div className="item bottom" />
-    </div>
-  );
-};
+    );
+  }
+
+  public componentDidMount() {
+    if (this.props.onInit) {
+      this.props.onInit();
+    }
+  }
+
+  public componentDidUpdate() {
+    if (this.props.onInit) {
+      this.props.onInit();
+    }
+  }
+}

From 361e2a8d7de430c6133b477834767a9b6c070650 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 19 Jul 2018 20:47:17 +0200
Subject: [PATCH 08/12] Make listenOnChange changeable

---
 .../visualize/components/visualization.tsx    | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/ui/public/visualize/components/visualization.tsx b/src/ui/public/visualize/components/visualization.tsx
index bc7d34399be91..1f5ffaef8ed67 100644
--- a/src/ui/public/visualize/components/visualization.tsx
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -44,7 +44,6 @@ interface VisualizationProps {
 }
 
 interface VisualizationState {
-  listenOnChange: boolean;
   showNoResultsMessage: boolean;
 }
 
@@ -53,10 +52,9 @@ export class Visualization extends React.Component<VisualizationProps, Visualiza
     props: VisualizationProps,
     prevState: VisualizationState
   ): Partial<VisualizationState> | null {
-    const listenOnChangeChanged = props.listenOnChange !== prevState.listenOnChange;
     const uiStateChanged = props.uiState && props.uiState !== props.vis.getUiState();
-    if (listenOnChangeChanged || uiStateChanged) {
-      throw new Error('Changing listenOnChange or uiState props is not allowed!');
+    if (uiStateChanged) {
+      throw new Error('Changing uiState props is not allowed!');
     }
 
     const showNoResultsMessage = shouldShowNoResultsMessage(props.vis, props.visData);
@@ -77,7 +75,6 @@ export class Visualization extends React.Component<VisualizationProps, Visualiza
     }
 
     this.state = {
-      listenOnChange,
       showNoResultsMessage: shouldShowNoResultsMessage(vis, visData),
     };
   }
@@ -100,6 +97,18 @@ export class Visualization extends React.Component<VisualizationProps, Visualiza
     this.props.uiState.off('change', this.onUiStateChanged);
   }
 
+  public componentDidUpdate(prevProps: VisualizationProps) {
+    const { listenOnChange } = this.props;
+    // If the listenOnChange prop changed, we need to register or deregister from uiState
+    if (prevProps.listenOnChange !== listenOnChange) {
+      if (listenOnChange) {
+        this.props.uiState.on('change', this.onUiStateChanged);
+      } else {
+        this.props.uiState.off('change', this.onUiStateChanged);
+      }
+    }
+  }
+
   /**
    * In case something in the uiState changed, we need to force a redraw of
    * the visualization, since these changes could effect visualization rendering.

From 8f069181dad7b12bd058964c73b08c41b27a772f Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 19 Jul 2018 21:58:43 +0200
Subject: [PATCH 09/12] Add memoize util

---
 src/ui/public/utils/memoize.test.ts | 50 ++++++++++++++++++++++++++++
 src/ui/public/utils/memoize.ts      | 51 +++++++++++++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 src/ui/public/utils/memoize.test.ts
 create mode 100644 src/ui/public/utils/memoize.ts

diff --git a/src/ui/public/utils/memoize.test.ts b/src/ui/public/utils/memoize.test.ts
new file mode 100644
index 0000000000000..f604c6bac8c29
--- /dev/null
+++ b/src/ui/public/utils/memoize.test.ts
@@ -0,0 +1,50 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { memoizeLast } from './memoize';
+
+describe('memoizeLast', () => {
+  type SumFn = (a: number, b: number) => number;
+  let originalSum: SumFn;
+  let memoizedSum: SumFn;
+
+  beforeEach(() => {
+    originalSum = jest.fn((a, b) => a + b);
+    memoizedSum = memoizeLast(originalSum);
+  });
+
+  it('should call through function', () => {
+    expect(memoizedSum(26, 16)).toBe(42);
+    expect(originalSum).toHaveBeenCalledWith(26, 16);
+  });
+
+  it('should memoize the last call', () => {
+    memoizedSum(26, 16);
+    expect(originalSum).toHaveBeenCalledTimes(1);
+    memoizedSum(26, 16);
+    expect(originalSum).toHaveBeenCalledTimes(1);
+  });
+
+  it('should use parameters as cache keys', () => {
+    expect(memoizedSum(26, 16)).toBe(42);
+    expect(originalSum).toHaveBeenCalledTimes(1);
+    expect(memoizedSum(16, 26)).toBe(42);
+    expect(originalSum).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/src/ui/public/utils/memoize.ts b/src/ui/public/utils/memoize.ts
new file mode 100644
index 0000000000000..eea6dd4ec2809
--- /dev/null
+++ b/src/ui/public/utils/memoize.ts
@@ -0,0 +1,51 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * A simple memoize function, that only stores the last returned value
+ * and uses the identity of all passed parameters as a cache key.
+ */
+function memoizeLast<T extends (...args: any[]) => any>(func: T): T {
+  let prevResult: any;
+  let called: boolean = false;
+  let prevThis: any;
+  let prevArgs: any[];
+
+  // We need to use a `function` here for proper this passing.
+  // tslint:disable-next-line:only-arrow-functions
+  const memoizedFunction = function(this: any, ...args: any[]) {
+    if (
+      called &&
+      prevThis === this &&
+      prevArgs.length === args.length &&
+      args.every((arg, index) => arg === prevArgs[index])
+    ) {
+      return prevResult;
+    }
+    called = true;
+    prevThis = this;
+    prevArgs = args;
+    prevResult = func.apply(this, args);
+    return prevResult;
+  } as T;
+
+  return memoizedFunction;
+}
+
+export { memoizeLast };

From b8e57cc47cff05aef0d1d8d90399513115f66893 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Thu, 19 Jul 2018 22:21:52 +0200
Subject: [PATCH 10/12] Use memoize for no results check

---
 .../visualize/components/visualization.tsx    | 30 ++++++-------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/ui/public/visualize/components/visualization.tsx b/src/ui/public/visualize/components/visualization.tsx
index 1f5ffaef8ed67..ce63c122b2944 100644
--- a/src/ui/public/visualize/components/visualization.tsx
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -21,6 +21,7 @@ import { get } from 'lodash';
 import React from 'react';
 
 import { PersistedState } from '../../persisted_state';
+import { memoizeLast } from '../../utils/memoize';
 import { Vis } from '../../vis';
 import { VisualizationChart } from './visualization_chart';
 import { VisualizationNoResults } from './visualization_noresults';
@@ -43,48 +44,35 @@ interface VisualizationProps {
   visData: any;
 }
 
-interface VisualizationState {
-  showNoResultsMessage: boolean;
-}
-
-export class Visualization extends React.Component<VisualizationProps, VisualizationState> {
-  public static getDerivedStateFromProps(
-    props: VisualizationProps,
-    prevState: VisualizationState
-  ): Partial<VisualizationState> | null {
+export class Visualization extends React.Component<VisualizationProps> {
+  public static getDerivedStateFromProps(props: VisualizationProps): void {
     const uiStateChanged = props.uiState && props.uiState !== props.vis.getUiState();
     if (uiStateChanged) {
       throw new Error('Changing uiState props is not allowed!');
     }
-
-    const showNoResultsMessage = shouldShowNoResultsMessage(props.vis, props.visData);
-    if (prevState.showNoResultsMessage !== showNoResultsMessage) {
-      return { showNoResultsMessage };
-    }
-    return null;
   }
 
+  private showNoResultsMessage = memoizeLast(shouldShowNoResultsMessage);
+
   constructor(props: VisualizationProps) {
     super(props);
 
-    const { vis, visData, uiState, listenOnChange } = props;
+    const { vis, uiState, listenOnChange } = props;
 
     vis._setUiState(props.uiState);
     if (listenOnChange) {
       uiState.on('change', this.onUiStateChanged);
     }
-
-    this.state = {
-      showNoResultsMessage: shouldShowNoResultsMessage(vis, visData),
-    };
   }
 
   public render() {
     const { vis, visData, onInit, uiState } = this.props;
 
+    const noResults = this.showNoResultsMessage(vis, visData);
+
     return (
       <div className="visualization">
-        {this.state.showNoResultsMessage ? (
+        {noResults ? (
           <VisualizationNoResults onInit={onInit} />
         ) : (
           <VisualizationChart vis={vis} visData={visData} onInit={onInit} uiState={uiState} />

From dc4c456d6ee84d6def808bc2cae1ae56d23493c4 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Fri, 20 Jul 2018 09:43:29 +0200
Subject: [PATCH 11/12] Address issue with uiState

---
 .../public/visualize/components/visualization.tsx  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/ui/public/visualize/components/visualization.tsx b/src/ui/public/visualize/components/visualization.tsx
index ce63c122b2944..66bf127180a3a 100644
--- a/src/ui/public/visualize/components/visualization.tsx
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -45,13 +45,6 @@ interface VisualizationProps {
 }
 
 export class Visualization extends React.Component<VisualizationProps> {
-  public static getDerivedStateFromProps(props: VisualizationProps): void {
-    const uiStateChanged = props.uiState && props.uiState !== props.vis.getUiState();
-    if (uiStateChanged) {
-      throw new Error('Changing uiState props is not allowed!');
-    }
-  }
-
   private showNoResultsMessage = memoizeLast(shouldShowNoResultsMessage);
 
   constructor(props: VisualizationProps) {
@@ -81,6 +74,13 @@ export class Visualization extends React.Component<VisualizationProps> {
     );
   }
 
+  public shouldComponentUpdate(nextProps: VisualizationProps): boolean {
+    if (nextProps.uiState !== this.props.uiState) {
+      throw new Error('Changing uiState on <Visualization/> is not supported!');
+    }
+    return true;
+  }
+
   public componentWillUnmount() {
     this.props.uiState.off('change', this.onUiStateChanged);
   }

From a919b5de75d1e5e78bbab5c75e4627c5b8f3f4f7 Mon Sep 17 00:00:00 2001
From: Tim Roes <tim.roes@elastic.co>
Date: Fri, 20 Jul 2018 12:28:20 +0200
Subject: [PATCH 12/12] Optimize memoize function

---
 src/ui/public/utils/memoize.ts | 38 +++++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/ui/public/utils/memoize.ts b/src/ui/public/utils/memoize.ts
index eea6dd4ec2809..cf9258538bf60 100644
--- a/src/ui/public/utils/memoize.ts
+++ b/src/ui/public/utils/memoize.ts
@@ -17,32 +17,42 @@
  * under the License.
  */
 
+interface MemoizedCall {
+  args: any[];
+  returnValue: any;
+  this: any;
+}
+
+// A symbol expressing, that the memoized function has never been called
+const neverCalled: unique symbol = Symbol();
+type NeverCalled = typeof neverCalled;
+
 /**
  * A simple memoize function, that only stores the last returned value
  * and uses the identity of all passed parameters as a cache key.
  */
 function memoizeLast<T extends (...args: any[]) => any>(func: T): T {
-  let prevResult: any;
-  let called: boolean = false;
-  let prevThis: any;
-  let prevArgs: any[];
+  let prevCall: MemoizedCall | NeverCalled = neverCalled;
 
   // We need to use a `function` here for proper this passing.
   // tslint:disable-next-line:only-arrow-functions
   const memoizedFunction = function(this: any, ...args: any[]) {
     if (
-      called &&
-      prevThis === this &&
-      prevArgs.length === args.length &&
-      args.every((arg, index) => arg === prevArgs[index])
+      prevCall !== neverCalled &&
+      prevCall.this === this &&
+      prevCall.args.length === args.length &&
+      prevCall.args.every((arg, index) => arg === args[index])
     ) {
-      return prevResult;
+      return prevCall.returnValue;
     }
-    called = true;
-    prevThis = this;
-    prevArgs = args;
-    prevResult = func.apply(this, args);
-    return prevResult;
+
+    prevCall = {
+      args,
+      this: this,
+      returnValue: func.apply(this, args),
+    };
+
+    return prevCall.returnValue;
   } as T;
 
   return memoizedFunction;