Added typing

istresearch · Mar 26, 2021 · 1d9c727 · 1d9c727
1 parent faa03c0
commit 1d9c727
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 95 deletions.
diff --git a/public/bootstrap/custom_filter_manager/FilterManagerHelper.ts b/public/bootstrap/custom_filter_manager/FilterManagerHelper.ts
@@ -1,28 +1,27 @@
 import { get } from 'lodash';
-import { FilterMeta } from '../../../../../src/plugins/data/common';
-import { Filter, FilterManager } from '../../../../../src/plugins/data/public';
+import { Filter, CustomFilterManager, CustomFilterMeta } from '../../types';
 
 class FilterManagerHelper {
   private addFiltersCache: (filters: Filter | Filter[], pinFilterStatus?: boolean) => void;
   private similarityScript: string = '';
   private newFilter: Partial<Filter> = {};
-  private filterManager: FilterManager;
+  private filterManager: CustomFilterManager;
 
   constructor(addFiltersCache: any, filterManager: any) {
     this.addFiltersCache = addFiltersCache;
     this.similarityScript = '';
     this.filterManager = filterManager;
   }
 
-  private getFilterIndex({ path, value, negate }: Partial<FilterMeta> & { path: string }) {
+  private getFilterIndex({ path, value, negate }: Partial<CustomFilterMeta>) {
     const currentFilters = this.getCurrentFilters();
 
     return currentFilters.findIndex(
       (filter) => filter.path === path && filter.value === value && filter.negate === negate
     );
   }
 
-  public getCurrentFilters() {
+  public getCurrentFilters(): Partial<CustomFilterMeta>[] {
     return this.filterManager.getFilters().map((filter) => ({
       path:
         get(filter, 'query.bool.must.script.script.params.field', null) ||
@@ -35,36 +34,34 @@ class FilterManagerHelper {
     }));
   }
 
-  public addFilter({ path, value, negate, alias = null }: Partial<FilterMeta> & { path: string }) {
+  public addFilter({ path, value, negate, alias = null }: Partial<CustomFilterMeta>) {
     const filterIndex = this.getFilterIndex({ path, value, negate });
 
     if (filterIndex >= 0) {
       return;
     }
 
-    this.addFiltersCache.apply(this.filterManager, [
-      {
-        ...this.newFilter,
-        meta: {
-          alias,
-          negate: !!this.newFilter?.meta?.negate,
-          index: this.newFilter?.meta?.index,
-          disabled: false,
-        },
-        query: {
-          match_phrase: {
-            [path]: value,
+    if (path) {
+      this.addFiltersCache.apply(this.filterManager, [
+        {
+          ...this.newFilter,
+          meta: {
+            alias,
+            negate: !!this.newFilter?.meta?.negate,
+            index: this.newFilter?.meta?.index,
+            disabled: false,
+          },
+          query: {
+            match_phrase: {
+              [path]: value,
+            },
           },
         },
-      },
-    ]);
+      ]);
+    }
   }
 
-  public addImageSimilarityFilter({
-    path,
-    value,
-    distance = '8',
-  }: FilterMeta & { path: string; distance: string }) {
+  public addImageSimilarityFilter({ path, value, distance = '8' }: CustomFilterMeta) {
     this.removeFilter({ path, value, negate: true });
     this.removeFilter({ path, value, negate: false });
 
@@ -98,7 +95,7 @@ class FilterManagerHelper {
     ]);
   }
 
-  public removeFilter({ path, value, negate }: Partial<FilterMeta> & { path: string }) {
+  public removeFilter({ path, value, negate }: Partial<CustomFilterMeta>) {
     const currentFilters = this.filterManager.getFilters();
     const filterIndex = this.getFilterIndex({ path, value, negate });
 

diff --git a/public/bootstrap/custom_filter_manager/Popover.ts b/public/bootstrap/custom_filter_manager/Popover.ts
@@ -1,10 +1,10 @@
-import tippy, { DefaultProps } from 'tippy.js';
+import tippy, { DefaultProps, Instance } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light.css';
 
 class Popover {
   private init: boolean = false;
-  private instance: any = null;
+  private instance: Instance | undefined;
   private callback: any = null;
   private entryValues: any[] = [];
 
@@ -44,34 +44,39 @@ class Popover {
     $(this).prev().val(val);
   }
 
-  private handlerShowPopover(e: JQuery.Event & { target: any }) {
+  private handlerShowPopover(e: JQuery.Event & { target: HTMLElement }) {
     const self = this;
 
-    let buttonNode: any = e.target;
+    let buttonNode = e.target;
 
-    while (!$(buttonNode).hasClass('tippy-filter-button') ) {
-      buttonNode = buttonNode.parentNode;
-    }   
+    while (!$(buttonNode).hasClass('tippy-filter-button')) {
+      if (buttonNode.parentElement) {
+        buttonNode = buttonNode.parentElement;
+      } else {
+        break;
+      }
+    }
 
     if ($(buttonNode).hasClass('tippy-filter-button')) {
-      this.instance = tippy(buttonNode, {
+      // @ts-ignore
+      this.instance = <Instance>tippy(buttonNode, {
         onHide(instance) {
           setTimeout(() => {
-            instance.unmount();
-            instance.destroy();
-            self.instance = null;
+            instance?.unmount();
+            instance?.destroy();
+            self.instance = undefined;
           }, 100);
 
           $('.keep-icon-visible').removeClass('keep-icon-visible');
         },
       });
 
       $(e.target).addClass('keep-icon-visible');
-      this.instance.show();
+      this.instance?.show();
     }
   }
 
-  private handlerProcessForm(e: JQuery.Event & { target: any }) {
+  private handlerProcessForm(e: JQuery.Event & { target: HTMLElement }) {
     e.preventDefault();
     e.stopPropagation();
 
@@ -87,11 +92,11 @@ class Popover {
         formFields.find((field: any) => field.name === `${entryValue.dHashValue}-distance`)?.value,
     }));
 
-    this.instance.hide();
+    this.instance?.hide();
     this.callback(selectedEntryValues);
   }
 
-  private handlerSelectAll(e: JQuery.Event & { target: any }) {
+  private handlerSelectAll(e: JQuery.Event & { target: HTMLElement }) {
     e.preventDefault();
     e.stopPropagation();
 
@@ -138,15 +143,16 @@ class Popover {
                   </div>
                 </label>
                 ${
-                  dHashValue ?
-                  `
+                  dHashValue
+                    ? `
                   <div class="range-slider">
                     <div class="range-label first">Exact</div>
                     <div class="range-label last">Fuzzy</div>
                     <input type="range" name="${dHashValue}-distance-range" step="1" min="0" max="31" value="${distance}" data-rangeslider>
                     <input type="number" name="${dHashValue}-distance"  min="0" max="31" value="${distance}" data-range-input>
                   </div>
-                ` : ''
+                `
+                    : ''
                 }
               </div>
             `;
@@ -180,8 +186,8 @@ class Popover {
 
   public initialize() {
     this.init = true;
-    this.instance = null;
-    this.callback = null;
+    this.instance = undefined;
+    this.callback = undefined;
     this.entryValues.length = 0;
     $('body').on(
       'submit.objectFilterForm',
@@ -200,8 +206,8 @@ class Popover {
 
   public destroy() {
     this.init = false;
-    this.instance = null;
-    this.callback = null;
+    this.instance = undefined;
+    this.callback = undefined;
     this.entryValues.length = 0;
     $('body').off('submit.objectFilterForm');
     $('body').off('click.selectFilters');
@@ -217,20 +223,16 @@ class Popover {
     this.setContent(formhtml);
   }
 
-  private setContent(content: any) {
+  private setContent(content: string) {
     setTimeout(() => {
-      if (this.instance) {
-        this.instance.setContent('');
-        this.instance.setContent(content);
-      }
+      this.instance?.setContent('');
+      this.instance?.setContent(content);
     }, 0);
   }
 
   public hide() {
     setTimeout(() => {
-      if (this.instance) {
-        this.instance.hide();
-      }
+      this.instance?.hide();
     }, 0);
   }
 }

diff --git a/public/bootstrap/custom_filter_manager/index.ts b/public/bootstrap/custom_filter_manager/index.ts
@@ -1,7 +1,7 @@
 import { isArray, get } from 'lodash';
 import Popover from './Popover';
 import FilterManagerHelper from './FilterManagerHelper';
-import { FilterManager } from '../../../../../src/plugins/data/public';
+import { CustomFilterProps, CustomFilterManager } from '../../types';
 
 let popover: Popover | undefined;
 let filterManagerHelper: any;
@@ -20,12 +20,7 @@ export const initPopover = () => {
   popover?.initialize();
 };
 
-interface ICustomFilter {
-  register: (customFilter: any) => void;
-  customFilters: any[];
-}
-
-export const initFilterManager = (filterManager: FilterManager & Partial<ICustomFilter>) => {
+export const initFilterManager = (filterManager: Partial<CustomFilterManager>) => {
   filterManager.register = (customFilter: any) => {
     if (!filterManager?.customFilters) {
       filterManager.customFilters = [];
@@ -35,7 +30,11 @@ export const initFilterManager = (filterManager: FilterManager & Partial<ICustom
   };
 };
 
-export const setupAddFilters = async ({ indexPatterns, addFiltersCached, filterManager }: any) => {
+export const setupAddFilters = async ({
+  indexPatterns,
+  addFiltersCached,
+  filterManager,
+}: Pick<CustomFilterProps, 'indexPatterns' | 'addFiltersCached' | 'filterManager'>) => {
   const indexPatternIDList = await indexPatterns.getIds();
 
   for (let id of indexPatternIDList) {
@@ -51,12 +50,12 @@ export const addFilters = async ({
   newFilters,
   addFiltersCached,
   indexPatterns,
-}: any) => {
+}: CustomFilterProps) => {
   if (isArray(newFilters) && newFilters.length !== 1) {
     return;
   }
 
-  const newFilter = newFilters[0];
+  const newFilter = Array.isArray(newFilters) ? newFilters[0] : newFilters;
   const selectedIndexPatternID = get(newFilter, 'meta.index', null);
   const selectedIndexPattern = await indexPatterns.get(selectedIndexPatternID);
   const fieldFormatMap = selectedIndexPattern.fieldFormatMap;
@@ -91,15 +90,17 @@ export const addFilters = async ({
   };
   let customFilterFlag = false;
 
-  for (let customFilter of filterManager.customFilters) {
-    customFilterFlag = customFilter(filterParams);
+  if (filterManager.customFilters) {
+    for (let customFilter of filterManager.customFilters) {
+      customFilterFlag = customFilter(filterParams);
 
-    if (customFilterFlag) {
-      break;
+      if (customFilterFlag) {
+        break;
+      }
     }
   }
 
   if (!customFilterFlag) {
-    addFiltersCached.apply(filterManager, newFilters);
+    addFiltersCached.apply(filterManager, [newFilters]);
   }
 };
diff --git a/public/object_field/ObjectFieldFormat.ts b/public/object_field/ObjectFieldFormat.ts
@@ -10,30 +10,31 @@ import imageHTML from './templates/object_image.html';
 import linkHTML from './templates/object_link.html';
 import textHTML from './templates/object_text.html';
 import emptyHTML from './templates/object_empty.html';
+import { ObjectFieldParams, ObjectField, ObjectFieldType } from '../types';
 
-const DEFAULT_VALUES = {
-  label: null, // Optional data label
-  path: null, // Dot notated location of the value within the object, relative to basePath
-  type: 'text',
+const DEFAULT_VALUES: ObjectField = {
+  label: undefined, // Optional data label
+  path: undefined, // Dot notated location of the value within the object, relative to basePath
+  type: ObjectFieldType.TEXT,
   filtered: true, // To enable the filtering on cell click
-  dHashField: null,
-  filterField: null, // If the data is analyzed, and there is a keyword subfield we can use for the filter
-  height: null, // Image dimension in px
-  width: null, // Image dimension in px
-  limit: null, // If presenting an array, this is the max we will show
+  dHashField: undefined,
+  filterField: undefined, // If the data is analyzed, and there is a keyword subfield we can use for the filter
+  height: undefined, // Image dimension in px
+  width: undefined, // Image dimension in px
+  limit: undefined, // If presenting an array, this is the max we will show
 };
 
 export class ObjectFieldFormat extends FieldFormat {
   static id = 'ist-object';
   static title = 'Object';
   static fieldType = ['string'];
 
-  getParamDefaults() {
+  getParamDefaults(): ObjectFieldParams {
     return {
-      fieldType: null, // populated by editor, see controller
-      basePath: null, // If multiple fields should be grouped, this is the common parent
-      limit: null, // // If basePath is an array, this is the max we will show
-      similarityScript: null,
+      fieldType: undefined, // populated by editor, see controller
+      basePath: undefined, // If multiple fields should be grouped, this is the common parent
+      limit: undefined, // // If basePath is an array, this is the max we will show
+      similarityScript: undefined,
       fields: [{ ...DEFAULT_VALUES }],
     };
   }
@@ -42,13 +43,13 @@ export class ObjectFieldFormat extends FieldFormat {
     let tmplhtml: TemplateExecutor;
 
     switch (field.formatType) {
-      case 'image':
+      case ObjectFieldType.IMAGE:
         tmplhtml = template(imageHTML);
         break;
-      case 'link':
+      case ObjectFieldType.LINK:
         tmplhtml = template(linkHTML);
         break;
-      case 'text':
+      case ObjectFieldType.TEXT:
         tmplhtml = template(textHTML);
         break;
       default:
@@ -69,7 +70,7 @@ export class ObjectFieldFormat extends FieldFormat {
     field: any;
     hit?: any;
     basePath?: string;
-    objectFields: any;
+    objectFields: ObjectField[];
   }) {
     const fields = [];
 
@@ -87,7 +88,7 @@ export class ObjectFieldFormat extends FieldFormat {
 
       let fieldValues = getPluck(value, path);
 
-      if (type === 'text') {
+      if (type === ObjectFieldType.TEXT) {
         if (isArray(fieldValues)) {
           if (objectField.limit) {
             fieldValues = slice(fieldValues, 0, objectField.limit);