[Vis: Default editor] EUIficate controls of Geohash agg (#37213) (#37321

)

* EUIficate controls of geohash agg

* Fix tests

src/legacy/ui/public/agg_types/__tests__/buckets/_geo_hash.js

@@ -94,7 +94,7 @@ describe('Geohash Agg', () => {
 
   describe('precision parameter', () => {
 
-    const PRECISION_PARAM_INDEX = 7;
+    const PRECISION_PARAM_INDEX = 2;
     let precisionParam;
     beforeEach(() => {
       precisionParam = geoHashBucketAgg.params[PRECISION_PARAM_INDEX];

src/legacy/ui/public/agg_types/buckets/geo_hash.js

@@ -17,10 +17,12 @@
  * under the License.
  */
 
-import _ from 'lodash';
 import chrome from '../../chrome';
 import { BucketAggType } from './_bucket_agg_type';
-import precisionTemplate from '../controls/precision.html';
+import { AutoPrecisionParamEditor } from '../controls/auto_precision';
+import { UseGeocentroidParamEditor } from '../controls/use_geocentroid';
+import { IsFilteredByCollarParamEditor } from '../controls/is_filtered_by_collar';
+import { PrecisionParamEditor } from '../controls/precision';
 import { geohashColumns } from '../../utils/decode_geo_hash';
 import { geoContains, scaleBounds } from '../../utils/geo_utils';
 import { i18n } from '@kbn/i18n';
@@ -80,47 +82,48 @@ export const geoHashBucketAgg = new BucketAggType({
     },
     {
       name: 'autoPrecision',
+      editorComponent: AutoPrecisionParamEditor,
       default: true,
-      write: _.noop
+      write: () => {},
     },
     {
-      name: 'isFilteredByCollar',
-      default: true,
-      write: _.noop
+      name: 'precision',
+      editorComponent: PrecisionParamEditor,
+      default: defaultPrecision,
+      deserialize: getPrecision,
+      write: function (aggConfig, output) {
+        const currZoom = aggConfig.params.mapZoom;
+        const autoPrecisionVal = zoomPrecision[currZoom];
+        output.params.precision = aggConfig.params.autoPrecision ?
+          autoPrecisionVal : getPrecision(aggConfig.params.precision);
+      }
     },
     {
       name: 'useGeocentroid',
+      editorComponent: UseGeocentroidParamEditor,
+      default: true,
+      write: () => {},
+    },
+    {
+      name: 'isFilteredByCollar',
+      editorComponent: IsFilteredByCollarParamEditor,
       default: true,
-      write: _.noop
+      write: () => {},
     },
     {
       name: 'mapZoom',
       default: 2,
-      write: _.noop
+      write: () => {},
     },
     {
       name: 'mapCenter',
       default: [0, 0],
-      write: _.noop
+      write: () => {},
     },
     {
       name: 'mapBounds',
       default: null,
-      write: _.noop
-    },
-    {
-      name: 'precision',
-      editor: precisionTemplate,
-      default: defaultPrecision,
-      deserialize: getPrecision,
-      controller: function () {
-      },
-      write: function (aggConfig, output) {
-        const currZoom = aggConfig.params.mapZoom;
-        const autoPrecisionVal = zoomPrecision[currZoom];
-        output.params.precision = aggConfig.params.autoPrecision ?
-          autoPrecisionVal : getPrecision(aggConfig.params.precision);
-      }
+      write: () => {},
     }
   ],
   getRequestAggs: function (agg) {

src/legacy/ui/public/agg_types/controls/auto_precision.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiSwitch, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+
+function AutoPrecisionParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+  const label = i18n.translate('common.ui.aggTypes.changePrecisionLabel', {
+    defaultMessage: 'Change precision on map zoom',
+  });
+
+  return (
+    <EuiFormRow className="visEditorSidebar__aggParamFormRow">
+      <EuiSwitch label={label} checked={value} onChange={ev => setValue(ev.target.checked)} />
+    </EuiFormRow>
+  );
+}
+
+export { AutoPrecisionParamEditor };

src/legacy/ui/public/agg_types/controls/is_filtered_by_collar.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+import { SwitchParamEditor } from './switch';
+
+function IsFilteredByCollarParamEditor(props: AggParamEditorProps<boolean>) {
+  return (
+    <SwitchParamEditor
+      displayLabel={i18n.translate('common.ui.aggTypes.onlyRequestDataAroundMapExtentLabel', {
+        defaultMessage: 'Only request data around map extent',
+      })}
+      displayToolTip={i18n.translate('common.ui.aggTypes.onlyRequestDataAroundMapExtentTooltip', {
+        defaultMessage:
+          'Apply geo_bounding_box filter aggregation to narrow the subject area to the map view box with collar',
+      })}
+      dataTestSubj="isFilteredByCollarCheckbox"
+      {...props}
+    />
+  );
+}
+
+export { IsFilteredByCollarParamEditor };

src/legacy/ui/public/agg_types/controls/precision.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 { EuiRange, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+
+function PrecisionParamEditor({ agg, config, value, setValue }: AggParamEditorProps<number>) {
+  if (agg.params.autoPrecision) {
+    return null;
+  }
+
+  const label = i18n.translate('common.ui.aggTypes.precisionLabel', {
+    defaultMessage: 'Precision',
+  });
+
+  return (
+    <EuiFormRow label={label} className="visEditorSidebar__aggParamFormRow">
+      <EuiRange
+        min={1}
+        max={config.get('visualization:tileMap:maxPrecision')}
+        value={value}
+        onChange={ev => setValue(Number(ev.target.value))}
+        data-test-subj={`visEditorMapPrecision${agg.id}`}
+        showValue
+      />
+    </EuiFormRow>
+  );
+}
+
+export { PrecisionParamEditor };

src/legacy/ui/public/agg_types/controls/use_geocentroid.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiSwitch, EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { AggParamEditorProps } from 'ui/vis/editors/default';
+
+function UseGeocentroidParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+  const label = i18n.translate('common.ui.aggTypes.placeMarkersOffGridLabel', {
+    defaultMessage: 'Place markers off grid (use geocentroid)',
+  });
+
+  return (
+    <EuiFormRow className="visEditorSidebar__aggParamFormRow">
+      <EuiSwitch label={label} checked={value} onChange={ev => setValue(ev.target.checked)} />
+    </EuiFormRow>
+  );
+}
+
+export { UseGeocentroidParamEditor };

src/legacy/ui/public/vis/editors/default/agg_param.js

@@ -27,6 +27,7 @@ uiModules
     ['agg', { watchDepth: 'collection' }],
     ['aggParam', { watchDepth: 'reference' }],
     ['aggParams', { watchDepth: 'collection' }],
+    ['config', { watchDepth: 'reference' }],
     ['editorConfig', { watchDepth: 'collection' }],
     ['indexedFields', { watchDepth: 'collection' }],
     ['paramEditor', { wrapApply: false }],
@@ -58,6 +59,7 @@ uiModules
             agg="agg"
             agg-params="agg.params"
             agg-param="aggParam"
+            config="config"
             editor-config="editorConfig"
             indexed-fields="indexedFields"
             show-validation="showValidation"

src/legacy/ui/public/vis/editors/default/agg_param_editor_props.ts

@@ -29,6 +29,7 @@ import { EditorConfig } from '../config/types';
 export interface AggParamEditorProps<T> {
   agg: AggConfig;
   aggParam: AggParam;
+  config: any;
   editorConfig: EditorConfig;
   indexedFields?: FieldParamType[];
   showValidation: boolean;

src/legacy/ui/public/vis/editors/default/agg_param_react_wrapper.tsx

@@ -28,6 +28,7 @@ import { EditorConfig } from '../config/types';
 interface AggParamReactWrapperProps<T> {
   agg: AggConfig;
   aggParam: AggParam;
+  config: any;
   editorConfig: EditorConfig;
   indexedFields: FieldParamType[];
   showValidation: boolean;