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

src/ui/public/visualize/components/index.js → 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';

src/ui/public/visualize/components/visualization_noresults.js → 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;

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

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

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

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;

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

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>
+`;

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