Support adding static label to document layer (#322) (#324)

* Support adding static label to document layer

Signed-off-by: Junqiu Lei <junqiu@amazon.com>

* Update label type

Signed-off-by: Junqiu Lei <junqiu@amazon.com>

---------

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
(cherry picked from commit 28e0429)

Co-authored-by: Junqiu Lei <junqiu@amazon.com>

common/index.ts

@@ -33,6 +33,19 @@ export const DOCUMENTS_DEFAULT_REQUEST_NUMBER = 1000;
 export const DOCUMENTS_DEFAULT_SHOW_TOOLTIPS: boolean = false;
 export const DOCUMENTS_DEFAULT_DISPLAY_TOOLTIPS_ON_HOVER: boolean = true;
 export const DOCUMENTS_DEFAULT_TOOLTIPS: string[] = [];
+export const DOCUMENTS_DEFAULT_LABEL_ENABLES: boolean = false;
+export const DOCUMENTS_DEFAULT_LABEL_VALUE: string = '';
+export const DOCUMENTS_DEFAULT_LABEL_TYPE: string = 'fixed';
+export const DOCUMENTS_DEFAULT_LABEL_SIZE: number = 20;
+export const DOCUMENTS_MIN_LABEL_SIZE: number = 1;
+export const DOCUMENTS_MAX_LABEL_SIZE: number = 100;
+export const DOCUMENTS_DEFAULT_LABEL_COLOR: string = '#000000';
+export const DOCUMENTS_DEFAULT_LABEL_BORDER_COLOR: string = '#FFFFFF';
+export const DOCUMENTS_DEFAULT_LABEL_BORDER_WIDTH: number = 20;
+export const DOCUMENTS_NONE_LABEL_BORDER_WIDTH: number = 0;
+export const DOCUMENTS_SMALL_LABEL_BORDER_WIDTH: number = 2;
+export const DOCUMENTS_MEDIUM_LABEL_BORDER_WIDTH: number = 5;
+export const DOCUMENTS_LARGE_LABEL_BORDER_WIDTH: number = 10;
 export const LAYER_PANEL_HIDE_LAYER_ICON = 'eyeClosed';
 export const LAYER_PANEL_SHOW_LAYER_ICON = 'eye';
 export const MAP_DATA_LAYER_DEFAULT_OPACITY = 70;

public/components/layer_config/documents_config/document_layer_config_panel.tsx

@@ -8,7 +8,7 @@ import { EuiSpacer, EuiTabbedContent } from '@elastic/eui';
 import { DocumentLayerSpecification } from '../../../model/mapLayerType';
 import { LayerBasicSettings } from '../layer_basic_settings';
 import { DocumentLayerSource } from './document_layer_source';
-import { DocumentLayerStyle } from './document_layer_style';
+import { DocumentLayerStyle } from './style/document_layer_style';
 
 interface Props {
   selectedLayerConfig: DocumentLayerSpecification;

public/components/layer_config/documents_config/style/color_picker.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { memo, useEffect } from 'react';
+import { EuiColorPicker, EuiFormRow, useColorPickerState } from '@elastic/eui';
+
+export interface ColorPickerProps {
+  originColor: string;
+  label: string;
+  selectedLayerConfigId: string;
+  setIsUpdateDisabled: Function;
+  onColorChange: (color: string) => void;
+}
+
+export const ColorPicker = memo(
+  ({
+    originColor,
+    label,
+    selectedLayerConfigId,
+    setIsUpdateDisabled,
+    onColorChange,
+  }: ColorPickerProps) => {
+    const [color, setColor, colorErrors] = useColorPickerState(originColor);
+
+    useEffect(() => {
+      onColorChange(String(color));
+    }, [color]);
+
+    useEffect(() => {
+      setIsUpdateDisabled(!!colorErrors);
+    }, [colorErrors]);
+
+    // It's used to update the style color when switch layer config between different document layers
+    useEffect(() => {
+      setColor(originColor, !!colorErrors ? { isValid: false } : { isValid: true });
+    }, [selectedLayerConfigId]);
+
+    return (
+      <EuiFormRow label={label} fullWidth={true} isInvalid={!!colorErrors} error={colorErrors}>
+        <EuiColorPicker
+          color={color}
+          onChange={setColor}
+          isInvalid={!!colorErrors}
+          fullWidth={true}
+          data-test-subj={label}
+        />
+      </EuiFormRow>
+    );
+  }
+);