Truncate long layer name with Ellipsis (#115)

Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Dec 9, 2022 · 85d7a9b · 85d7a9b
1 parent 3d0c271
commit 85d7a9b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -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) {