Improve UX (#142)

* Remove rendering after loading 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 Show layer selection only if more than 1 layers are available. * Allow only single layer selection Signed-off-by: Vijayan Balasubramanian <[email protected]>
opensearch-project · Dec 30, 2022 · ccfe171 · ccfe171
1 parent 7c1509a
commit ccfe171
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 16 deletions.
diff --git a/maps_dashboards/common/index.ts b/maps_dashboards/common/index.ts
@@ -24,6 +24,8 @@ 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';
+export const NEW_MAP_LAYER_DEFAULT_PREFIX = 'New layer';
 
 // 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
@@ -20,7 +20,13 @@ import {
   EuiText,
 } from '@elastic/eui';
 import './add_layer_panel.scss';
-import { DOCUMENTS, OPENSEARCH_MAP_LAYER, CUSTOM_MAP, Layer } from '../../../common';
+import {
+  DOCUMENTS,
+  OPENSEARCH_MAP_LAYER,
+  CUSTOM_MAP,
+  Layer,
+  NEW_MAP_LAYER_DEFAULT_PREFIX,
+} from '../../../common';
 import { getLayerConfigMap } from '../../utils/getIntialConfig';
 
 interface Props {
@@ -29,6 +35,7 @@ interface Props {
   IsLayerConfigVisible: boolean;
   addLayer: Function;
   setIsNewLayer: Function;
+  newLayerIndex: number;
 }
 
 export const AddLayerPanel = ({
@@ -37,12 +44,14 @@ export const AddLayerPanel = ({
   IsLayerConfigVisible,
   addLayer,
   setIsNewLayer,
+  newLayerIndex,
 }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
   const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
 
   function onClickAddNewLayer(layerType: string) {
     const initLayerConfig = getLayerConfigMap()[layerType];
+    initLayerConfig.name = NEW_MAP_LAYER_DEFAULT_PREFIX + ' ' + newLayerIndex;
     setSelectedLayerConfig(initLayerConfig);
     setIsAddNewLayerModalVisible(false);
     setIsLayerConfigVisible(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
@@ -20,12 +20,14 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   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 +99,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
@@ -135,6 +135,10 @@ export const LayerControlPanel = memo(
       }, 0);
     };
 
+    const newLayerIndex = () => {
+      return layers?.length + 1;
+    };
+
     const addLayer = (layer: MapLayerSpecification) => {
       setLayers([...layers, layer]);
       setAddLayerId(layer.id);
@@ -316,6 +320,7 @@ export const LayerControlPanel = memo(
                     aria-label="Hide layer control"
                     color="text"
                     className="layerControlPanel__visButton"
+                    title="Collapse layers panel"
                   />
                 </EuiFlexItem>
               </EuiFlexGroup>
@@ -358,7 +363,7 @@ export const LayerControlPanel = memo(
                                   grow={false}
                                   className="layerControlPanel__layerFunctionButton"
                                 >
-                                  <EuiButtonEmpty
+                                  <EuiButtonIcon
                                     iconType={
                                       layerVisibility.get(layer.id)
                                         ? LAYER_PANEL_HIDE_LAYER_ICON
@@ -368,18 +373,22 @@ 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
@@ -392,6 +401,7 @@ export const LayerControlPanel = memo(
                                     {...provided.dragHandleProps}
                                     aria-label="Drag Handle"
                                     color="text"
+                                    title="Move layer up or down"
                                   />
                                 </EuiFlexItem>
                               </EuiFlexGroup>
@@ -423,6 +433,7 @@ export const LayerControlPanel = memo(
                 setSelectedLayerConfig={setSelectedLayerConfig}
                 IsLayerConfigVisible={isLayerConfigVisible}
                 addLayer={addLayer}
+                newLayerIndex={newLayerIndex()}
                 setIsNewLayer={setIsNewLayer}
               />
               {deleteLayerModal}
@@ -440,6 +451,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/components/tooltip/tooltipTable.tsx b/maps_dashboards/public/components/tooltip/tooltipTable.tsx
@@ -110,7 +110,10 @@ const TooltipTable = ({
   );
 
   const options = useMemo(() => {
-    const layerOptions = [{ label: 'All layers', value: ALL_LAYERS, key: '-1' }];
+    const layerOptions = [];
+    if (tables.length > 1) {
+      layerOptions.push({ label: 'All layers', value: ALL_LAYERS, key: '-1' });
+    }
     tables.forEach(({ layer }, i) => {
       layerOptions.push({ label: layer.name, value: i, key: `${i}` });
     });
@@ -153,13 +156,14 @@ const TooltipTable = ({
       </EuiFlexGroup>
       <EuiSpacer size="s" />
       <EuiFlexGroup justifyContent="spaceAround" alignItems="center" gutterSize="none">
-        {showLayerSelection && (
+        {showLayerSelection && options?.length > 1 && (
           <EuiFlexItem>
             <EuiComboBox<number>
               placeholder="Select a layer"
               selectedOptions={selectedLayers}
               options={options}
               onChange={handleLayerChange}
+              singleSelection={true}
             />
           </EuiFlexItem>
         )}

diff --git a/maps_dashboards/public/model/layerRenderController.ts b/maps_dashboards/public/model/layerRenderController.ts
@@ -89,7 +89,6 @@ export const handleDataLayerRender = (
     const { layer, dataSource } = result;
     if (layer.type === DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS) {
       layersFunctionMap[layer.type].render(maplibreRef, layer, dataSource, beforeLayerId);
-      layersFunctionMap[layer.type].addTooltip(maplibreRef, layer);
     }
   });
 };

diff --git a/maps_dashboards/public/model/layersFunctions.ts b/maps_dashboards/public/model/layersFunctions.ts
@@ -4,7 +4,11 @@
  */
 
 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';
 import { MapLayerSpecification } from './mapLayerType';
@@ -76,3 +80,7 @@ export const getMaplibreBeforeLayerId = (
   }
   return undefined;
 };
+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,
+};
diff --git a/maps_dashboards/public/utils/getIntialConfig.ts b/maps_dashboards/public/utils/getIntialConfig.ts
@@ -25,7 +25,7 @@ import { MapState } from '../model/mapState';
 
 export const getLayerConfigMap = () => ({
   [OPENSEARCH_MAP_LAYER.type]: {
-    name: OPENSEARCH_MAP_LAYER.name,
+    name: '',
     description: '',
     type: OPENSEARCH_MAP_LAYER.type,
     id: uuidv4(),
@@ -40,7 +40,7 @@ export const getLayerConfigMap = () => ({
     },
   },
   [DOCUMENTS.type]: {
-    name: DOCUMENTS.name,
+    name: '',
     description: '',
     type: DOCUMENTS.type,
     id: uuidv4(),
@@ -63,7 +63,7 @@ export const getLayerConfigMap = () => ({
   },
   //TODO: update custom layer config
   [CUSTOM_MAP.type]: {
-    name: CUSTOM_MAP.name,
+    name: '',
     description: '',
     type: CUSTOM_MAP.type,
     id: uuidv4(),