From 920ab9eb9f20aa19639e7a9da9b9cccb06643011 Mon Sep 17 00:00:00 2001
From: Vijayan Balasubramanian <balasvij@amazon.com>
Date: Thu, 8 Dec 2022 12:19:14 -0800
Subject: [PATCH] Update show/hide icon

Based on action eye closed or eye icon will be displayed.

Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>
---
 maps_dashboards/common/index.ts                   |  2 ++
 .../layer_control_panel/layer_control_panel.tsx   | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/maps_dashboards/common/index.ts b/maps_dashboards/common/index.ts
index 26acf0e7..be83860c 100644
--- a/maps_dashboards/common/index.ts
+++ b/maps_dashboards/common/index.ts
@@ -19,6 +19,8 @@ export const MAP_LAYER_DEFAULT_OPACITY_STEP = 1;
 export const MAP_LAYER_DEFAULT_BORDER_THICKNESS = 1;
 export const DOCUMENTS_DEFAULT_REQUEST_NUMBER = 20;
 export const DOCUMENTS_DEFAULT_MARKER_SIZE = 5;
+export const LAYER_PANEL_SHOW_LAYER_ICON = 'eye'
+export const LAYER_PANEL_HIDE_LAYER_ICON = 'eyeClosed'
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {
diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
index d1ec6620..c3cc86a3 100644
--- a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
+++ b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx
@@ -20,7 +20,10 @@ import './layer_control_panel.scss';
 import { AddLayerPanel } from '../add_layer_panel';
 import { LayerConfigPanel } from '../layer_config';
 import { MapLayerSpecification } from '../../model/mapLayerType';
-import { LAYER_VISIBILITY, DASHBOARDS_MAPS_LAYER_TYPE, LAYER_ICON_TYPE_MAP } from '../../../common';
+import {
+  LAYER_VISIBILITY, DASHBOARDS_MAPS_LAYER_TYPE, LAYER_ICON_TYPE_MAP,
+  LAYER_PANEL_SHOW_LAYER_ICON, LAYER_PANEL_HIDE_LAYER_ICON
+} from '../../../common';
 import { layersFunctionMap } from '../../model/layersFunctions';
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../../types';
@@ -140,6 +143,12 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
     setIsLayerConfigVisible(true);
   };
 
+  const [layerVisibility, setLayerVisibility] = useState(new Map<string, boolean>);
+  layers.forEach((layer) => {
+    layerVisibility.set(layer.id, layer.visibility === LAYER_VISIBILITY.VISIBLE);
+    }
+  );
+
   if (isLayerControlVisible) {
     return (
       <I18nProvider>
@@ -192,13 +201,15 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
                     <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
                       <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
                         <EuiButtonEmpty
-                          iconType="eyeClosed"
+                          iconType={layerVisibility.get(layer.id) ? LAYER_PANEL_HIDE_LAYER_ICON : LAYER_PANEL_SHOW_LAYER_ICON}
                           size="s"
                           onClick={() => {
                             if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
                               layer.visibility = LAYER_VISIBILITY.NONE;
+                              setLayerVisibility(new Map(layerVisibility.set(layer.id, false)));
                             } else {
                               layer.visibility = LAYER_VISIBILITY.VISIBLE;
+                              setLayerVisibility(new Map(layerVisibility.set(layer.id, true)));
                             }
                             layersFunctionMap[layer.type]?.hide(maplibreRef, layer);
                           }}