[Maps] convert tooltip classes to typescript (#59589)

* getting started

* fix ts lint errors

* TS es_tooltip_property

* convert ESAggTooltipProperty to TS

* final clean up

* ts lint cleanup

* review feedback

* remove unused import

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/maps/public/layers/fields/es_agg_field.ts

@@ -13,10 +13,10 @@ import { IVectorSource } from '../sources/vector_source';
 import { ESDocField } from './es_doc_field';
 import { AGG_TYPE, FIELD_ORIGIN } from '../../../common/constants';
 import { isMetricCountable } from '../util/is_metric_countable';
-// @ts-ignore
-import { ESAggMetricTooltipProperty } from '../tooltips/es_aggmetric_tooltip_property';
 import { getField, addFieldToDSL } from '../util/es_agg_utils';
 import { TopTermPercentageField } from './top_term_percentage_field';
+import { ITooltipProperty, TooltipProperty } from '../tooltips/tooltip_property';
+import { ESAggTooltipProperty } from '../tooltips/es_agg_tooltip_property';
 
 export interface IESAggField extends IField {
   getValueAggDsl(indexPattern: IndexPattern): unknown | null;
@@ -92,15 +92,10 @@ export class ESAggField implements IESAggField {
     return this._esDocField ? this._esDocField.getName() : '';
   }
 
-  async createTooltipProperty(value: number | string): Promise<unknown> {
+  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
     const indexPattern = await this._source.getIndexPattern();
-    return new ESAggMetricTooltipProperty(
-      this.getName(),
-      await this.getLabel(),
-      value,
-      indexPattern,
-      this
-    );
+    const tooltipProperty = new TooltipProperty(this.getName(), await this.getLabel(), value);
+    return new ESAggTooltipProperty(tooltipProperty, indexPattern, this);
   }
 
   getValueAggDsl(indexPattern: IndexPattern): unknown | null {

x-pack/legacy/plugins/maps/public/layers/fields/es_doc_field.js

@@ -6,6 +6,7 @@
 
 import { AbstractField } from './field';
 import { ESTooltipProperty } from '../tooltips/es_tooltip_property';
+import { TooltipProperty } from '../tooltips/tooltip_property';
 import { COLOR_PALETTE_MAX_SIZE } from '../../../common/constants';
 import { indexPatterns } from '../../../../../../../src/plugins/data/public';
 
@@ -20,7 +21,8 @@ export class ESDocField extends AbstractField {
 
   async createTooltipProperty(value) {
     const indexPattern = await this._source.getIndexPattern();
-    return new ESTooltipProperty(this.getName(), this.getName(), value, indexPattern);
+    const tooltipProperty = new TooltipProperty(this.getName(), this.getName(), value);
+    return new ESTooltipProperty(tooltipProperty, indexPattern, this);
   }
 
   async getDataType() {

x-pack/legacy/plugins/maps/public/layers/fields/field.ts

@@ -6,6 +6,7 @@
 
 import { FIELD_ORIGIN } from '../../../common/constants';
 import { IVectorSource } from '../sources/vector_source';
+import { ITooltipProperty } from '../tooltips/tooltip_property';
 
 export interface IField {
   getName(): string;
@@ -13,6 +14,7 @@ export interface IField {
   canValueBeFormatted(): boolean;
   getLabel(): Promise<string>;
   getDataType(): Promise<string>;
+  createTooltipProperty(value: string | undefined): Promise<ITooltipProperty>;
   getSource(): IVectorSource;
   getOrigin(): FIELD_ORIGIN;
   isValid(): boolean;
@@ -65,7 +67,7 @@ export class AbstractField implements IField {
     return this._fieldName;
   }
 
-  async createTooltipProperty(): Promise<unknown> {
+  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
     throw new Error('must implement Field#createTooltipProperty');
   }
 

x-pack/legacy/plugins/maps/public/layers/fields/top_term_percentage_field.ts

@@ -7,7 +7,7 @@
 import { IESAggField } from './es_agg_field';
 import { IVectorSource } from '../sources/vector_source';
 // @ts-ignore
-import { TooltipProperty } from '../tooltips/tooltip_property';
+import { ITooltipProperty, TooltipProperty } from '../tooltips/tooltip_property';
 import { TOP_TERM_PERCENTAGE_SUFFIX } from '../../../common/constants';
 import { FIELD_ORIGIN } from '../../../common/constants';
 
@@ -48,7 +48,7 @@ export class TopTermPercentageField implements IESAggField {
     return 'number';
   }
 
-  async createTooltipProperty(value: unknown): Promise<unknown> {
+  async createTooltipProperty(value: string | undefined): Promise<ITooltipProperty> {
     return new TooltipProperty(this.getName(), await this.getLabel(), value);
   }
 

x-pack/legacy/plugins/maps/public/layers/joins/join.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IESTermSource } from '../sources/es_term_source';
+
+export interface IJoin {
+  getRightJoinSource(): IESTermSource;
+}

x-pack/legacy/plugins/maps/public/layers/sources/es_term_source.d.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IField } from '../fields/field';
+import { IESAggSource } from './es_agg_source';
+
+export interface IESTermSource extends IESAggSource {
+  getTermField(): IField;
+}

x-pack/legacy/plugins/maps/public/layers/tooltips/es_agg_tooltip_property.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { ESTooltipProperty } from './es_tooltip_property';
+
+export class ESAggTooltipProperty extends ESTooltipProperty {
+  isFilterable(): boolean {
+    return false;
+  }
+}

x-pack/legacy/plugins/maps/public/layers/tooltips/es_aggmetric_tooltip_property.js

@@ -1,40 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { ESTooltipProperty } from './es_tooltip_property';
-import { AGG_TYPE } from '../../../common/constants';
-
-export class ESAggMetricTooltipProperty extends ESTooltipProperty {
-  constructor(propertyKey, propertyName, rawValue, indexPattern, metricField) {
-    super(propertyKey, propertyName, rawValue, indexPattern);
-    this._metricField = metricField;
-  }
-
-  isFilterable() {
-    return false;
-  }
-
-  getHtmlDisplayValue() {
-    if (typeof this._rawValue === 'undefined') {
-      return '-';
-    }
-    if (
-      this._metricField.getAggType() === AGG_TYPE.COUNT ||
-      this._metricField.getAggType() === AGG_TYPE.UNIQUE_COUNT
-    ) {
-      return this._rawValue;
-    }
-    const indexPatternField = this._indexPattern.fields.getByName(this._metricField.getRootName());
-    if (!indexPatternField) {
-      return this._rawValue;
-    }
-    const htmlConverter = indexPatternField.format.getConverterFor('html');
-
-    return htmlConverter
-      ? htmlConverter(this._rawValue)
-      : indexPatternField.format.convert(this._rawValue);
-  }
-}

x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.js

@@ -1,49 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { TooltipProperty } from './tooltip_property';
-import _ from 'lodash';
-import { esFilters } from '../../../../../../../src/plugins/data/public';
-export class ESTooltipProperty extends TooltipProperty {
-  constructor(propertyKey, propertyName, rawValue, indexPattern) {
-    super(propertyKey, propertyName, rawValue);
-    this._indexPattern = indexPattern;
-  }
-
-  getHtmlDisplayValue() {
-    if (typeof this._rawValue === 'undefined') {
-      return '-';
-    }
-
-    const field = this._indexPattern.fields.getByName(this._propertyName);
-    if (!field) {
-      return _.escape(this._rawValue);
-    }
-    const htmlConverter = field.format.getConverterFor('html');
-    return htmlConverter ? htmlConverter(this._rawValue) : field.format.convert(this._rawValue);
-  }
-
-  isFilterable() {
-    const field = this._indexPattern.fields.getByName(this._propertyName);
-    return (
-      field &&
-      (field.type === 'string' ||
-        field.type === 'date' ||
-        field.type === 'ip' ||
-        field.type === 'number')
-    );
-  }
-
-  async getESFilters() {
-    return [
-      esFilters.buildPhraseFilter(
-        this._indexPattern.fields.getByName(this._propertyName),
-        this._rawValue,
-        this._indexPattern
-      ),
-    ];
-  }
-}

x-pack/legacy/plugins/maps/public/layers/tooltips/es_tooltip_property.ts

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import _ from 'lodash';
+import { ITooltipProperty } from './tooltip_property';
+import { IField } from '../fields/field';
+import { esFilters, IFieldType, IndexPattern } from '../../../../../../../src/plugins/data/public';
+import { PhraseFilter } from '../../../../../../../src/plugins/data/public';
+
+export class ESTooltipProperty implements ITooltipProperty {
+  private readonly _tooltipProperty: ITooltipProperty;
+  private readonly _indexPattern: IndexPattern;
+  private readonly _field: IField;
+
+  constructor(tooltipProperty: ITooltipProperty, indexPattern: IndexPattern, field: IField) {
+    this._tooltipProperty = tooltipProperty;
+    this._indexPattern = indexPattern;
+    this._field = field;
+  }
+
+  getPropertyKey(): string {
+    return this._tooltipProperty.getPropertyKey();
+  }
+
+  getPropertyName(): string {
+    return this._tooltipProperty.getPropertyName();
+  }
+
+  getRawValue(): string | undefined {
+    return this._tooltipProperty.getRawValue();
+  }
+
+  _getIndexPatternField(): IFieldType | undefined {
+    return this._indexPattern.fields.getByName(this._field.getRootName());
+  }
+
+  getHtmlDisplayValue(): string {
+    if (typeof this.getRawValue() === 'undefined') {
+      return '-';
+    }
+
+    const indexPatternField = this._getIndexPatternField();
+    if (!indexPatternField || !this._field.canValueBeFormatted()) {
+      return _.escape(this.getRawValue());
+    }
+
+    const htmlConverter = indexPatternField.format.getConverterFor('html');
+    return htmlConverter
+      ? htmlConverter(this.getRawValue())
+      : indexPatternField.format.convert(this.getRawValue());
+  }
+
+  isFilterable(): boolean {
+    const indexPatternField = this._getIndexPatternField();
+    return (
+      !!indexPatternField &&
+      (indexPatternField.type === 'string' ||
+        indexPatternField.type === 'date' ||
+        indexPatternField.type === 'ip' ||
+        indexPatternField.type === 'number')
+    );
+  }
+
+  async getESFilters(): Promise<PhraseFilter[]> {
+    const indexPatternField = this._getIndexPatternField();
+    if (!indexPatternField) {
+      return [];
+    }
+
+    return [esFilters.buildPhraseFilter(indexPatternField, this.getRawValue(), this._indexPattern)];
+  }
+}

x-pack/legacy/plugins/maps/public/layers/tooltips/join_tooltip_property.ts

@@ -4,32 +4,40 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TooltipProperty } from './tooltip_property';
+import { ITooltipProperty } from './tooltip_property';
+import { IJoin } from '../joins/join';
+import { PhraseFilter } from '../../../../../../../src/plugins/data/public';
 
-export class JoinTooltipProperty extends TooltipProperty {
-  constructor(tooltipProperty, leftInnerJoins) {
-    super();
+export class JoinTooltipProperty implements ITooltipProperty {
+  private readonly _tooltipProperty: ITooltipProperty;
+  private readonly _leftInnerJoins: IJoin[];
+
+  constructor(tooltipProperty: ITooltipProperty, leftInnerJoins: IJoin[]) {
     this._tooltipProperty = tooltipProperty;
     this._leftInnerJoins = leftInnerJoins;
   }
 
-  isFilterable() {
+  isFilterable(): boolean {
     return true;
   }
 
-  getPropertyKey() {
+  getPropertyKey(): string {
     return this._tooltipProperty.getPropertyKey();
   }
 
-  getPropertyName() {
+  getPropertyName(): string {
     return this._tooltipProperty.getPropertyName();
   }
 
-  getHtmlDisplayValue() {
+  getRawValue(): string | undefined {
+    return this._tooltipProperty.getRawValue();
+  }
+
+  getHtmlDisplayValue(): string {
     return this._tooltipProperty.getHtmlDisplayValue();
   }
 
-  async getESFilters() {
+  async getESFilters(): Promise<PhraseFilter[]> {
     const esFilters = [];
     if (this._tooltipProperty.isFilterable()) {
       esFilters.push(...(await this._tooltipProperty.getESFilters()));
@@ -46,6 +54,7 @@ export class JoinTooltipProperty extends TooltipProperty {
           esFilters.push(...(await esTooltipProperty.getESFilters()));
         }
       } catch (e) {
+        // eslint-disable-next-line no-console
         console.error('Cannot create joined filter', e);
       }
     }

x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.js

@@ -1,39 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import _ from 'lodash';
-
-export class TooltipProperty {
-  constructor(propertyKey, propertyName, rawValue) {
-    this._propertyKey = propertyKey;
-    this._propertyName = propertyName;
-    this._rawValue = rawValue;
-  }
-
-  getPropertyKey() {
-    return this._propertyKey;
-  }
-
-  getPropertyName() {
-    return this._propertyName;
-  }
-
-  getHtmlDisplayValue() {
-    return _.escape(this._rawValue);
-  }
-
-  getRawValue() {
-    return this._rawValue;
-  }
-
-  isFilterable() {
-    return false;
-  }
-
-  async getESFilters() {
-    return [];
-  }
-}

x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import _ from 'lodash';
+import { PhraseFilter } from '../../../../../../../src/plugins/data/public';
+
+export interface ITooltipProperty {
+  getPropertyKey(): string;
+  getPropertyName(): string;
+  getHtmlDisplayValue(): string;
+  getRawValue(): string | undefined;
+  isFilterable(): boolean;
+  getESFilters(): Promise<PhraseFilter[]>;
+}
+
+export class TooltipProperty implements ITooltipProperty {
+  private readonly _propertyKey: string;
+  private readonly _propertyName: string;
+  private readonly _rawValue: string | undefined;
+
+  constructor(propertyKey: string, propertyName: string, rawValue: string | undefined) {
+    this._propertyKey = propertyKey;
+    this._propertyName = propertyName;
+    this._rawValue = rawValue;
+  }
+
+  getPropertyKey(): string {
+    return this._propertyKey;
+  }
+
+  getPropertyName(): string {
+    return this._propertyName;
+  }
+
+  getHtmlDisplayValue(): string {
+    return _.escape(this._rawValue);
+  }
+
+  getRawValue(): string | undefined {
+    return this._rawValue;
+  }
+
+  isFilterable(): boolean {
+    return false;
+  }
+
+  async getESFilters(): Promise<PhraseFilter[]> {
+    return [];
+  }
+}