add cluster layer

common/index.ts

@@ -70,6 +70,15 @@ export const MAP_SAVED_OBJECT_TYPE = 'map';
 // TODO: Replace with actual app icon
 export const MAPS_APP_ICON = 'gisApp';
 export const MAPS_VISUALIZATION_DESCRIPTION = 'Create map visualization with multiple layers';
+export const CLUSTER_DEFAULT_FILL_TYPE = 'gradient';
+export const CLUSTER_DEFAULT_PALETTE = 'blue';
+export const CLUSTER_MIN_BORDER_THICKNESS = 0;
+export const CLUSTER_MAX_BORDER_THICKNESS = 100;
+export const CLUSTER_DEFAULT_MARKER_BORDER_THICKNESS = 1;
+//This is a valid value in geohex,geotile and geohash aggregation.
+export const CLUSTER_DEFAULT_PRECISION = 2;
+export const CLUSTER_DEFAULT_METRIC_AGG = 'count';
+export const CLUSTER_DEFAULT_CLUSTER_AGG = 'geohash_grid';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {
@@ -91,12 +100,14 @@ export enum DASHBOARDS_MAPS_LAYER_NAME {
   OPENSEARCH_MAP = 'OpenSearch map',
   DOCUMENTS = 'Documents',
   CUSTOM_MAP = 'Custom map',
+  CLUSTER = 'Cluster',
 }
 
 export enum DASHBOARDS_MAPS_LAYER_TYPE {
   OPENSEARCH_MAP = 'opensearch_vector_tile_map',
   DOCUMENTS = 'documents',
   CUSTOM_MAP = 'custom_map',
+  CLUSTER = 'cluster',
 }
 
 export enum DASHBOARDS_CUSTOM_MAPS_LAYER_TYPE {
@@ -108,12 +119,14 @@ export enum DASHBOARDS_MAPS_LAYER_ICON {
   OPENSEARCH_MAP = 'globe',
   DOCUMENTS = 'document',
   CUSTOM_MAP = 'globe',
+  CLUSTER = 'heatmap',
 }
 
 export enum DASHBOARDS_MAPS_LAYER_DESCRIPTION {
   OPENSEARCH_MAP = 'Use default OpenSearch basemaps.',
   DOCUMENTS = 'View points, lines, and polygons on the map.',
   CUSTOM_MAP = 'Configure maps to use a custom map source.',
+  CLUSTER = 'Geospatial data grouped to show density.',
 }
 
 export const DOCUMENTS = {
@@ -137,6 +150,13 @@ export const CUSTOM_MAP = {
   description: DASHBOARDS_MAPS_LAYER_DESCRIPTION.CUSTOM_MAP,
 };
 
+export const CLUSTER = {
+  name: DASHBOARDS_MAPS_LAYER_NAME.CLUSTER,
+  type: DASHBOARDS_MAPS_LAYER_TYPE.CLUSTER,
+  icon: DASHBOARDS_MAPS_LAYER_ICON.CLUSTER,
+  description: DASHBOARDS_MAPS_LAYER_DESCRIPTION.CLUSTER,
+};
+
 export interface Layer {
   name: DASHBOARDS_MAPS_LAYER_NAME;
   type: DASHBOARDS_MAPS_LAYER_TYPE;
@@ -153,6 +173,7 @@ export const LAYER_ICON_TYPE_MAP: { [key: string]: string } = {
   [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: 'globe',
   [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: 'document',
   [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: 'globe',
+  [DASHBOARDS_MAPS_LAYER_TYPE.CLUSTER]: 'heatmap',
 };
 
 // refer https://github.com/opensearch-project/i18n-plugin/blob/main/DEVELOPER_GUIDE.md#new-locale for OSD supported languages

package.json

@@ -27,6 +27,7 @@
     "@types/wellknown": "^0.5.4",
     "cypress-file-upload": "^5.0.8",
     "geojson": "^0.5.0",
+    "h3-js": "^4.1.0",
     "install": "^0.13.0",
     "maplibre-gl": "^2.4.0",
     "prettier": "^2.1.1",

public/components/add_layer_panel/add_layer_panel.tsx

@@ -29,6 +29,7 @@ import {
   Layer,
   NEW_MAP_LAYER_DEFAULT_PREFIX,
   MAX_LAYER_LIMIT,
+  CLUSTER,
 } from '../../../common';
 import { getLayerConfigMap } from '../../utils/getIntialConfig';
 import { ConfigSchema } from '../../../common/config';
@@ -67,7 +68,7 @@ export const AddLayerPanel = ({
     addLayer(initLayerConfig);
   }
 
-  const dataLayers = [DOCUMENTS];
+  const dataLayers = [CLUSTER, DOCUMENTS];
   const dataLayerItems = Object.values(dataLayers).map((layerItem, index) => {
     return (
       <EuiKeyPadMenuItem

public/components/layer_config/cluster_config/cluster_layer_config_panel.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useState } from 'react';
+import { EuiSpacer, EuiTabbedContent } from '@elastic/eui';
+import { ClusterLayerSpecification } from '../../../model/mapLayerType';
+import { LayerBasicSettings } from '../layer_basic_settings';
+import { ClusterLayerSource } from './cluster_layer_source';
+import { ClusterLayerStyle } from './style';
+import { IndexPattern } from '../../../../../../src/plugins/data/common';
+import { useCallback } from 'react';
+
+interface Props {
+  selectedLayerConfig: ClusterLayerSpecification;
+  setSelectedLayerConfig: Function;
+  setIsUpdateDisabled: Function;
+  isLayerExists: Function;
+}
+
+export const ClusterLayerConfigPanel = (props: Props) => {
+  const [indexPattern, setIndexPattern] = useState<IndexPattern | null | undefined>();
+  const [dataUpdateDisabled, setDataUpdateDisabled] = useState(true);
+
+  const setIsUpdateDisabled = useCallback(
+    (isUpdateDisabled: boolean, isFromDataPanel = false) => {
+      //we can't judge whether source is valid only by selectLayerConfig like documents. We need a state to record it.
+      if (isFromDataPanel) {
+        setDataUpdateDisabled(isUpdateDisabled);
+        props.setIsUpdateDisabled(isUpdateDisabled);
+      } else {
+        props.setIsUpdateDisabled(dataUpdateDisabled || isUpdateDisabled);
+      }
+    },
+    [dataUpdateDisabled]
+  );
+
+  const newProps = {
+    ...props,
+    setIsUpdateDisabled,
+    indexPattern,
+    setIndexPattern,
+  };
+
+  const tabs = [
+    {
+      id: 'data-source--id',
+      name: 'Data',
+      content: (
+        <Fragment>
+          <EuiSpacer size="m" />
+          <ClusterLayerSource {...newProps} />
+        </Fragment>
+      ),
+      testsubj: 'dataTab',
+    },
+    {
+      id: 'style--id',
+      name: 'Style',
+      content: (
+        <Fragment>
+          <EuiSpacer size="m" />
+          <ClusterLayerStyle {...newProps} />
+        </Fragment>
+      ),
+      testsubj: 'styleTab',
+    },
+    {
+      id: 'settings--id',
+      name: 'Settings',
+      content: (
+        <Fragment>
+          <EuiSpacer size="m" />
+          <LayerBasicSettings {...newProps} />
+        </Fragment>
+      ),
+      testsubj: 'settingsTab',
+    },
+  ];
+  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />;
+};

public/components/layer_config/cluster_config/cluster_layer_source.tsx

@@ -0,0 +1,103 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { EuiSpacer } from '@elastic/eui';
+import { useOpenSearchDashboards } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
+import { TimeRange, IndexPattern } from '../../../../../../src/plugins/data/public';
+import { ClusterLayerSpecification } from '../../../model/mapLayerType';
+import { DataSourceSection } from './data_source_section';
+import { MapServices } from '../../../types';
+import { ClusterSection } from './cluster_section';
+import { MetricSection } from './metric_section';
+import { FilterSection } from './filter_section';
+
+interface Props {
+  setSelectedLayerConfig: Function;
+  selectedLayerConfig: ClusterLayerSpecification;
+  setIsUpdateDisabled: Function;
+  indexPattern: IndexPattern | null | undefined;
+  setIndexPattern: Function;
+  timeRange?: TimeRange;
+}
+
+const defaultCanUpdateMap = {
+  index: false,
+  metric: false,
+  cluster: false,
+};
+export type CanUpdateMapType = typeof defaultCanUpdateMap;
+
+export const ClusterLayerSource = ({
+  setIsUpdateDisabled,
+  setSelectedLayerConfig,
+  selectedLayerConfig,
+  indexPattern,
+  setIndexPattern,
+}: Props) => {
+  const {
+    services: {
+      data: { indexPatterns },
+    },
+  } = useOpenSearchDashboards<MapServices>();
+
+  const [canUpdateMap, setCanUpdateMap] = useState(defaultCanUpdateMap);
+
+  useEffect(() => {
+    const keys = Object.keys(canUpdateMap);
+    const canUpdate = keys.every((key) => canUpdateMap[key as keyof CanUpdateMapType]);
+    setIsUpdateDisabled(!canUpdate, true);
+  }, [canUpdateMap]);
+
+  useEffect(() => {
+    const selectIndexPattern = async () => {
+      if (selectedLayerConfig.source.indexPatternId) {
+        const selectedIndexPattern = await indexPatterns.get(
+          selectedLayerConfig.source.indexPatternId
+        );
+        setIndexPattern(selectedIndexPattern);
+      }
+    };
+    selectIndexPattern();
+  }, [indexPatterns, selectedLayerConfig.source.indexPatternId]);
+
+  // Handle the side effects of index pattern change
+  useEffect(() => {
+    const source = { ...selectedLayerConfig.source };
+    // when index pattern changed, reset aggs
+    if (indexPattern && indexPattern.id !== selectedLayerConfig.source.indexPatternId) {
+      source.indexPatternId = indexPattern.id ?? '';
+      source.indexPatternRefName = indexPattern.title;
+      setSelectedLayerConfig({
+        ...selectedLayerConfig,
+        source,
+      });
+    }
+  }, [indexPattern]);
+
+  const commonProps = {
+    selectedLayerConfig,
+    setSelectedLayerConfig,
+    indexPattern,
+    setCanUpdateMap,
+  };
+
+  return (
+    <>
+      <DataSourceSection
+        indexPattern={indexPattern}
+        setIndexPattern={setIndexPattern}
+        setCanUpdateMap={setCanUpdateMap}
+      />
+      <EuiSpacer size="s" />
+      <ClusterSection {...commonProps} />
+
+      <EuiSpacer size="s" />
+      <MetricSection {...commonProps} />
+      <EuiSpacer size="s" />
+      <FilterSection {...commonProps} />
+    </>
+  );
+};