From 85d7a9bac00671c6e15dbaa26aa0845090cc49f3 Mon Sep 17 00:00:00 2001
From: Junqiu Lei <junqiu@amazon.com>
Date: Thu, 8 Dec 2022 16:02:49 -0800
Subject: [PATCH] Truncate long layer name with Ellipsis (#115)

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
---
 .../layer_control_panel/layer_control_panel.scss |  4 ++++
 .../layer_control_panel/layer_control_panel.tsx  | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
index e5d6ab17..d3b1da70 100644
--- a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
+++ b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.scss
@@ -14,6 +14,10 @@
     height: $euiSizeL;
     width: $euiSizeL;
   }
+
+  .euiListGroupItem__label {
+    width: $euiSizeL * 6;
+  }
 }
 
 .layerControlPanel--hide {
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 f1d56b1e..ecc291bd 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
@@ -21,8 +21,11 @@ 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,
-  LAYER_PANEL_SHOW_LAYER_ICON, LAYER_PANEL_HIDE_LAYER_ICON
+  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';
@@ -146,8 +149,7 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
   const [layerVisibility, setLayerVisibility] = useState(new Map<string, boolean>([]));
   layers.forEach((layer) => {
     layerVisibility.set(layer.id, layer.visibility === LAYER_VISIBILITY.VISIBLE);
-    }
-  );
+  });
 
   if (isLayerControlVisible) {
     return (
@@ -201,7 +203,11 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
                     <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
                       <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
                         <EuiButtonEmpty
-                          iconType={layerVisibility.get(layer.id) ? LAYER_PANEL_HIDE_LAYER_ICON : LAYER_PANEL_SHOW_LAYER_ICON}
+                          iconType={
+                            layerVisibility.get(layer.id)
+                              ? LAYER_PANEL_HIDE_LAYER_ICON
+                              : LAYER_PANEL_SHOW_LAYER_ICON
+                          }
                           size="s"
                           onClick={() => {
                             if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {