Add new ui setting for size (#3399)

Introduce new ui setting for custom vector map's size
parameter. The default value is 1000.
Users can increase this limit by updating this value
in Advanced Settings.

Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>

CHANGELOG.md

@@ -95,6 +95,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [VisBuilder] Fixes pipeline aggs ([#3137](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3137))
 - [Region Maps] Fixes bug that prevents selected join field to be used ([#3213](Fix bug that prevents selected join field to be used))
 - [Multi DataSource]Update test connection button text([#3247](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3247))
+- [Region Maps] Add ui setting to configure custom vector map's size parameter([#3399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3399))
 
 ### 🚞 Infrastructure
 

src/plugins/region_map/common/constants/shared.ts

@@ -5,3 +5,4 @@
 
 export const DEFAULT_MAP_CHOICE = 'default';
 export const CUSTOM_MAP_CHOICE = 'custom';
+export const CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING = 'visualization:regionmap:customVectorMapMaxSize';

src/plugins/region_map/common/index.ts

@@ -3,6 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { DEFAULT_MAP_CHOICE, CUSTOM_MAP_CHOICE } from './constants/shared';
+import {
+  DEFAULT_MAP_CHOICE,
+  CUSTOM_MAP_CHOICE,
+  CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING,
+} from './constants/shared';
 
-export { DEFAULT_MAP_CHOICE, CUSTOM_MAP_CHOICE };
+export { DEFAULT_MAP_CHOICE, CUSTOM_MAP_CHOICE, CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING };

src/plugins/region_map/public/choropleth_layer.js

@@ -37,7 +37,11 @@ import { getNotifications } from './opensearch_dashboards_services';
 import { colorUtil, OpenSearchDashboardsMapLayer } from '../../maps_legacy/public';
 import { truncatedColorMaps } from '../../charts/public';
 import { getServices } from './services';
-import { DEFAULT_MAP_CHOICE, CUSTOM_MAP_CHOICE } from '../common';
+import {
+  DEFAULT_MAP_CHOICE,
+  CUSTOM_MAP_CHOICE,
+  CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING,
+} from '../common';
 
 const EMPTY_STYLE = {
   weight: 1,
@@ -94,7 +98,8 @@ export class ChoroplethLayer extends OpenSearchDashboardsMapLayer {
     serviceSettings,
     leaflet,
     layerChosenByUser,
-    http
+    http,
+    uiSettings
   ) {
     super();
     this._serviceSettings = serviceSettings;
@@ -112,6 +117,7 @@ export class ChoroplethLayer extends OpenSearchDashboardsMapLayer {
     this._layerChosenByUser = layerChosenByUser;
     this._http = http;
     this._visParams = null;
+    this._uiSettings = uiSettings;
 
     // eslint-disable-next-line no-undef
     this._leafletLayer = this._leaflet.geoJson(null, {
@@ -241,7 +247,8 @@ CORS configuration of the server permits requests from the OpenSearch Dashboards
     // fetch data from index and transform it to feature collection
     try {
       const services = getServices(this._http);
-      const result = await services.getIndexData(this._layerName);
+      const indexSize = this._uiSettings.get(CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING);
+      const result = await services.getIndexData(this._layerName, indexSize);
 
       const finalResult = {
         type: 'FeatureCollection',
@@ -337,7 +344,8 @@ CORS configuration of the server permits requests from the OpenSearch Dashboards
     serviceSettings,
     leaflet,
     layerChosenByUser,
-    http
+    http,
+    uiSettings
   ) {
     const clonedLayer = new ChoroplethLayer(
       name,
@@ -349,7 +357,8 @@ CORS configuration of the server permits requests from the OpenSearch Dashboards
       serviceSettings,
       leaflet,
       layerChosenByUser,
-      http
+      http,
+      uiSettings
     );
     clonedLayer.setJoinField(this._joinField);
     clonedLayer.setColorRamp(this._colorRamp);

src/plugins/region_map/public/components/map_choice_options.tsx

@@ -4,7 +4,7 @@
  */
 
 import './map_choice_options.scss';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   EuiPanel,
   EuiSpacer,

src/plugins/region_map/public/region_map_visualization.js

@@ -230,7 +230,8 @@ export function createRegionMapVisualization({
           await getServiceSettings(),
           (await lazyLoadMapsLegacyModules()).L,
           this._params.layerChosenByUser,
-          http
+          http,
+          uiSettings
         );
       } else {
         const { ChoroplethLayer } = await import('./choropleth_layer');
@@ -244,7 +245,8 @@ export function createRegionMapVisualization({
           await getServiceSettings(),
           (await lazyLoadMapsLegacyModules()).L,
           this._params.layerChosenByUser,
-          http
+          http,
+          uiSettings
         );
       }
       this._choroplethLayer.setLayerChosenByUser(this._params.layerChosenByUser);

src/plugins/region_map/public/services.ts

@@ -7,7 +7,7 @@ import { CoreStart, HttpFetchError } from 'opensearch-dashboards/public';
 
 export interface Services {
   getCustomIndices: () => Promise<undefined | HttpFetchError>;
-  getIndexData: (indexName: string) => Promise<undefined | HttpFetchError>;
+  getIndexData: (indexName: string, size: number) => Promise<undefined | HttpFetchError>;
   getIndexMapping: (indexName: string) => Promise<undefined | HttpFetchError>;
 }
 
@@ -25,11 +25,12 @@ export function getServices(http: CoreStart['http']): Services {
         return e;
       }
     },
-    getIndexData: async (indexName: string) => {
+    getIndexData: async (indexName: string, size: number) => {
       try {
         const response = await http.post('../api/geospatial/_search', {
           body: JSON.stringify({
             index: indexName,
+            size,
           }),
         });
         return response;

src/plugins/region_map/server/routes/opensearch.ts

@@ -57,14 +57,15 @@ export function registerGeospatialRoutes(router: IRouter) {
       validate: {
         body: schema.object({
           index: schema.string(),
+          size: schema.number(),
         }),
       },
     },
     async (context, req, res) => {
       const client = context.core.opensearch.client.asCurrentUser;
       try {
-        const { index } = req.body;
-        const params = { index, body: {} };
+        const { index, size } = req.body;
+        const params = { index, body: {}, size };
         const results = await client.search(params);
         return res.ok({
           body: {

src/plugins/region_map/server/ui_settings.ts

@@ -31,6 +31,7 @@
 import { i18n } from '@osd/i18n';
 import { UiSettingsParams } from 'opensearch-dashboards/server';
 import { schema } from '@osd/config-schema';
+import { CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING } from '../common';
 
 export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
   return {
@@ -49,5 +50,20 @@ export function getUiSettings(): Record<string, UiSettingsParams<unknown>> {
       schema: schema.boolean(),
       category: ['visualization'],
     },
+    [CUSTOM_VECTOR_MAP_MAX_SIZE_SETTING]: {
+      name: i18n.translate('regionMap.advancedSettings.visualization.customVectorMapDefaultSize', {
+        defaultMessage: 'Custom vector map size',
+      }),
+      value: 1000,
+      description: i18n.translate(
+        'regionMap.advancedSettings.visualization.customVectorMapDefaultSizeText',
+        {
+          defaultMessage:
+            'The maximum number of features to load from custom vector map. A higher number might have negative impact on browser rendering performance.',
+        }
+      ),
+      schema: schema.number(),
+      category: ['visualization'],
+    },
   };
 }