TypeScriptify visualization components

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);
+  });
+});

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 };

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,51 +44,28 @@ interface VisualizationProps {
   visData: any;
 }
 
-interface VisualizationState {
-  listenOnChange: boolean;
-  showNoResultsMessage: boolean;
-}
-
-export class Visualization extends React.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;
-  }
+export class Visualization extends React.Component<VisualizationProps> {
+  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 = {
-      listenOnChange,
-      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} />
@@ -96,10 +74,29 @@ export class Visualization extends React.Component<VisualizationProps, Visualiza
     );
   }
 
+  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.