From 0295530012203717ae7db757c7c7f2f85869769a Mon Sep 17 00:00:00 2001
From: Tim Roes <mail@timroes.de>
Date: Mon, 23 Jul 2018 16:21:45 +0200
Subject: [PATCH] TypeScriptify visualization components (#20940)

* Refactor vis components to TypeScript

* Fix issue with ResizeChecker

* Fix calling onInit for no data

* Explicit named export

* Add title to vistype

* Fix error in test file

* Move onInit to no VisualizationNoResults

* Make listenOnChange changeable

* Add memoize util

* Use memoize for no results check

* Address issue with uiState

* Optimize memoize function
---
 .../index.js => persisted_state/index.d.ts}   |   4 +-
 .../persisted_state.d.ts}                     |  17 +-
 src/ui/public/utils/memoize.test.ts           |  50 ++++++
 src/ui/public/utils/memoize.ts                |  61 +++++++
 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     |  40 +++++
 .../visualization_noresults.test.js.snap      |  29 ++++
 src/ui/public/visualize/components/index.ts   |  20 +++
 .../visualize/components/visualization.js     |  87 ----------
 .../components/visualization.test.js          |  60 ++++---
 .../visualize/components/visualization.tsx    | 107 ++++++++++++
 .../components/visualization_chart.js         | 113 -------------
 .../components/visualization_chart.test.js    |   2 +-
 .../components/visualization_chart.tsx        | 156 ++++++++++++++++++
 .../visualization_noresults.test.js           |   5 +
 .../components/visualization_noresults.tsx    |  53 ++++++
 18 files changed, 577 insertions(+), 243 deletions(-)
 rename src/ui/public/{visualize/components/index.js => persisted_state/index.d.ts} (87%)
 rename src/ui/public/{visualize/components/visualization_noresults.js => persisted_state/persisted_state.d.ts} (66%)
 create mode 100644 src/ui/public/utils/memoize.test.ts
 create mode 100644 src/ui/public/utils/memoize.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
 create mode 100644 src/ui/public/visualize/components/index.ts
 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
 create mode 100644 src/ui/public/visualize/components/visualization_noresults.tsx

diff --git a/src/ui/public/visualize/components/index.js b/src/ui/public/persisted_state/index.d.ts
similarity index 87%
rename from src/ui/public/visualize/components/index.js
rename to src/ui/public/persisted_state/index.d.ts
index b11aba5ee8278..ab5a3e7be7d28 100644
--- a/src/ui/public/visualize/components/index.js
+++ b/src/ui/public/persisted_state/index.d.ts
@@ -17,6 +17,4 @@
  * under the License.
  */
 
-export * from './visualization';
-export * from './visualization_chart';
-export * from './visualization_noresults';
+export { PersistedState } from './persisted_state';
diff --git a/src/ui/public/visualize/components/visualization_noresults.js b/src/ui/public/persisted_state/persisted_state.d.ts
similarity index 66%
rename from src/ui/public/visualize/components/visualization_noresults.js
rename to src/ui/public/persisted_state/persisted_state.d.ts
index 17ece5ffb4758..6a02df8f67f7b 100644
--- a/src/ui/public/visualize/components/visualization_noresults.js
+++ b/src/ui/public/persisted_state/persisted_state.d.ts
@@ -17,17 +17,6 @@
  * under the License.
  */
 
-import React from 'react';
-
-export function VisualizationNoResults() {
-  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>
-  );
-}
+// 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/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..cf9258538bf60
--- /dev/null
+++ b/src/ui/public/utils/memoize.ts
@@ -0,0 +1,61 @@
+/*
+ * 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.
+ */
+
+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 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 (
+      prevCall !== neverCalled &&
+      prevCall.this === this &&
+      prevCall.args.length === args.length &&
+      prevCall.args.every((arg, index) => arg === args[index])
+    ) {
+      return prevCall.returnValue;
+    }
+
+    prevCall = {
+      args,
+      this: this,
+      returnValue: func.apply(this, args),
+    };
+
+    return prevCall.returnValue;
+  } as T;
+
+  return memoizedFunction;
+}
+
+export { memoizeLast };
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..6e74986852196
--- /dev/null
+++ b/src/ui/public/vis/vis_types/vis_type.d.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 {
+  title: string;
+  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.ts b/src/ui/public/visualize/components/index.ts
new file mode 100644
index 0000000000000..73685de81d68e
--- /dev/null
+++ b/src/ui/public/visualize/components/index.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 { Visualization } from './visualization';
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..8c88e004c6fc6 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 }
@@ -65,10 +48,32 @@ describe('Visualization', () => {
 
   const uiState = {
     on: () => {},
-    on: () => {},
+    off: () => {},
     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,9 +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 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
new file mode 100644
index 0000000000000..66bf127180a3a
--- /dev/null
+++ b/src/ui/public/visualize/components/visualization.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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 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';
+
+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;
+}
+
+export class Visualization extends React.Component<VisualizationProps> {
+  private showNoResultsMessage = memoizeLast(shouldShowNoResultsMessage);
+
+  constructor(props: VisualizationProps) {
+    super(props);
+
+    const { vis, uiState, listenOnChange } = props;
+
+    vis._setUiState(props.uiState);
+    if (listenOnChange) {
+      uiState.on('change', this.onUiStateChanged);
+    }
+  }
+
+  public render() {
+    const { vis, visData, onInit, uiState } = this.props;
+
+    const noResults = this.showNoResultsMessage(vis, visData);
+
+    return (
+      <div className="visualization">
+        {noResults ? (
+          <VisualizationNoResults onInit={onInit} />
+        ) : (
+          <VisualizationChart vis={vis} visData={visData} onInit={onInit} uiState={uiState} />
+        )}
+      </div>
+    );
+  }
+
+  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);
+  }
+
+  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.
+   */
+  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.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
new file mode 100644
index 0000000000000..91587fcc945fc
--- /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 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 React.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.tsx b/src/ui/public/visualize/components/visualization_noresults.tsx
new file mode 100644
index 0000000000000..3e9ade6908fbf
--- /dev/null
+++ b/src/ui/public/visualize/components/visualization_noresults.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 from 'react';
+
+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>
+    );
+  }
+
+  public componentDidMount() {
+    if (this.props.onInit) {
+      this.props.onInit();
+    }
+  }
+
+  public componentDidUpdate() {
+    if (this.props.onInit) {
+      this.props.onInit();
+    }
+  }
+}