Improve UX

Set new layer name as New layer Set default OpenSearch Map as "Default map" Added tooltip for buttons Layer type icon is added before title Signed-off-by: Vijayan Balasubramanian <[email protected]>
opensearch-project · Dec 28, 2022 · d9eff11 · d9eff11
1 parent 9651f76
commit d9eff11
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 11 deletions.
diff --git a/maps_dashboards/common/index.ts b/maps_dashboards/common/index.ts
@@ -24,6 +24,7 @@ export const DOCUMENTS_DEFAULT_MARKER_SIZE = 5;
 export const LAYER_PANEL_SHOW_LAYER_ICON = 'eye';
 export const LAYER_PANEL_HIDE_LAYER_ICON = 'eyeClosed';
 export const MAX_LAYER_NAME_LIMIT = 35;
+export const MAP_LAYER_DEFAULT_NAME = 'Default map';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {

diff --git a/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx b/maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx
@@ -40,10 +40,13 @@ export const AddLayerPanel = ({
 }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
   const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
+  const [nextLayerIndex, setNextLayerIndex] = useState<number>(1);
 
   function onClickAddNewLayer(layerType: string) {
     const initLayerConfig = getLayerConfigMap()[layerType];
+    initLayerConfig.name = 'New layer ' + nextLayerIndex;
     setSelectedLayerConfig(initLayerConfig);
+    setNextLayerIndex(nextLayerIndex + 1);
     setIsAddNewLayerModalVisible(false);
     setIsLayerConfigVisible(true);
     setIsNewLayer(true);

diff --git a/maps_dashboards/public/components/layer_config/documents_config/document_layer_source.tsx b/maps_dashboards/public/components/layer_config/documents_config/document_layer_source.tsx
@@ -308,7 +308,7 @@ export const DocumentLayerSource = ({
       <EuiSpacer size="m" />
       <EuiPanel paddingSize="s">
         <EuiCollapsibleNavGroup
-          title="Tool Tips"
+          title="Tooltips"
           titleSize="xxs"
           isCollapsible={true}
           initialIsOpen={shouldTooltipSectionOpen()}

diff --git a/maps_dashboards/public/components/layer_config/layer_config_panel.tsx b/maps_dashboards/public/components/layer_config/layer_config_panel.tsx
@@ -19,13 +19,14 @@ import {
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
-  EuiModalHeaderTitle,
+  EuiModalHeaderTitle, EuiIcon
 } from '@elastic/eui';
 
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import { BaseMapLayerConfigPanel } from './index';
 import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
 import { DocumentLayerConfigPanel } from './documents_config/document_layer_config_panel';
+import { layersTypeIconMap} from '../../model/layersFunctions';
 import { IndexPattern } from '../../../../../src/plugins/data/public';
 
 interface Props {
@@ -97,7 +98,14 @@ export const LayerConfigPanel = ({
       className="layerConfigPanel"
     >
       <EuiFlyoutHeader hasBorder={true}>
-        <strong>{selectedLayerConfig.name}</strong>
+        <EuiFlexGroup gutterSize="s" justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>
+            <EuiIcon type={layersTypeIconMap[selectedLayerConfig.type]} size="m" />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <strong>{selectedLayerConfig.name}</strong>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <EuiFlexGroup className="layerBasicSettings" direction="column">

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
@@ -301,6 +301,7 @@ export const LayerControlPanel = memo(
                     aria-label="Hide layer control"
                     color="text"
                     className="layerControlPanel__visButton"
+                    title="Collapse layers panel"
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>
@@ -343,7 +344,7 @@ export const LayerControlPanel = memo(
                                   grow={false}
                                   className="layerControlPanel__layerFunctionButton"
                                 >
-                                  <EuiButtonEmpty
+                                  <EuiButtonIcon
                                     iconType={
                                       layerVisibility.get(layer.id)
                                         ? LAYER_PANEL_HIDE_LAYER_ICON
@@ -353,30 +354,35 @@ export const LayerControlPanel = memo(
                                     onClick={() => onLayerVisibilityChange(layer)}
                                     aria-label="Hide or show layer"
                                     color="text"
+                                    title={
+                                      layerVisibility.get(layer.id) ? 'Hide layer' : 'Show layer'
+                                    }
                                   />
                                 </EuiFlexItem>
                                 <EuiFlexItem
                                   grow={false}
                                   className="layerControlPanel__layerFunctionButton"
                                 >
-                                  <EuiButtonEmpty
+                                  <EuiButtonIcon
                                     size="s"
                                     iconType="trash"
                                     onClick={() => onDeleteLayerIconClick(layer)}
                                     aria-label="Delete layer"
-                                    color="text"
+                                    color="danger"
+                                    title="Delete layer"
                                   />
                                 </EuiFlexItem>
                                 <EuiFlexItem
                                   grow={false}
                                   className="layerControlPanel__layerFunctionButton"
                                 >
-                                  <EuiButtonEmpty
+                                  <EuiButtonIcon
                                     size="s"
                                     iconType="grab"
                                     {...provided.dragHandleProps}
                                     aria-label="Drag Handle"
                                     color="text"
+                                    title="Move layer up or down"
                                   />
                                 </EuiFlexItem>
                               </EuiFlexGroup>
@@ -425,6 +431,7 @@ export const LayerControlPanel = memo(
           iconType="menuRight"
           onClick={() => setIsLayerControlVisible((visible) => !visible)}
           aria-label="Show layer control"
+          title="Expand layers panel"
         />
       </EuiFlexItem>
     );

diff --git a/maps_dashboards/public/components/map_page/map_page.tsx b/maps_dashboards/public/components/map_page/map_page.tsx
@@ -13,7 +13,11 @@ import { MapLayerSpecification } from '../../model/mapLayerType';
 import { MapServices } from '../../types';
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapSavedObjectAttributes } from '../../../common/map_saved_object_attributes';
-import { DASHBOARDS_MAPS_LAYER_TYPE, OPENSEARCH_MAP_LAYER } from '../../../common';
+import {
+  DASHBOARDS_MAPS_LAYER_TYPE,
+  MAP_LAYER_DEFAULT_NAME,
+  OPENSEARCH_MAP_LAYER,
+} from '../../../common';
 import { getLayerConfigMap, getInitialMapState } from '../../utils/getIntialConfig';
 import { IndexPattern } from '../../../../../src/plugins/data/public';
 import { MapState } from '../../model/mapState';
@@ -50,8 +54,10 @@ export const MapPage = () => {
         setLayersIndexPatterns(savedIndexPatterns);
       });
     } else {
-      const initialDefaultLayer: MapLayerSpecification =
-        getLayerConfigMap()[OPENSEARCH_MAP_LAYER.type];
+      const initialDefaultLayer: MapLayerSpecification = getLayerConfigMap()[
+        OPENSEARCH_MAP_LAYER.type
+      ];
+      initialDefaultLayer.name = MAP_LAYER_DEFAULT_NAME;
       setLayers([initialDefaultLayer]);
     }
   }, []);

diff --git a/maps_dashboards/public/model/layersFunctions.ts b/maps_dashboards/public/model/layersFunctions.ts
@@ -4,7 +4,7 @@
  */
 
 import { Map as Maplibre } from 'maplibre-gl';
-import { DASHBOARDS_MAPS_LAYER_NAME, DASHBOARDS_MAPS_LAYER_TYPE } from '../../common';
+import { DASHBOARDS_MAPS_LAYER_ICON, DASHBOARDS_MAPS_LAYER_NAME, DASHBOARDS_MAPS_LAYER_TYPE } from "../../common";
 import { OSMLayerFunctions } from './OSMLayerFunctions';
 import { DocumentLayerFunctions } from './documentLayerFunctions';
 
@@ -52,3 +52,8 @@ export const layersTypeNameMap: { [key: string]: string } = {
   [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: DASHBOARDS_MAPS_LAYER_NAME.OPENSEARCH_MAP,
   [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: DASHBOARDS_MAPS_LAYER_NAME.DOCUMENTS,
 };
+
+export const layersTypeIconMap: { [key: string]: string } = {
+  [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: DASHBOARDS_MAPS_LAYER_ICON.OPENSEARCH_MAP,
+  [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: DASHBOARDS_MAPS_LAYER_ICON.DOCUMENTS,
+};