Display current visible layers status (#159)

* Display current visible layers status Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Jan 7, 2023 · b46e7f4 · b46e7f4
1 parent 9b0b07e
commit b46e7f4
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 24 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
@@ -15,6 +15,10 @@
     width: $euiSizeL;
   }
 
+  .layerControlPanel__layerTypeIcon {
+    padding-left: $euiSizeM;
+  }
+
   .euiListGroupItem__label {
     width: $euiSizeL * 6;
   }

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
@@ -5,19 +5,21 @@
 
 import React, { memo, useEffect, useState } from 'react';
 import {
-  EuiPanel,
-  EuiTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiListGroupItem,
+  DropResult,
   EuiButtonEmpty,
-  EuiHorizontalRule,
   EuiButtonIcon,
+  EuiConfirmModal,
   EuiDragDropContext,
   EuiDraggable,
   EuiDroppable,
-  EuiConfirmModal,
-  DropResult,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiListGroupItem,
+  EuiPanel,
+  EuiTitle,
+  EuiIcon,
+  EuiToolTip,
 } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { Map as Maplibre } from 'maplibre-gl';
@@ -28,11 +30,10 @@ 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_PANEL_SHOW_LAYER_ICON,
+  LAYER_VISIBILITY,
 } from '../../../common';
 import {
   LayerActions,
@@ -42,8 +43,8 @@ import {
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../../types';
 import {
-  handleReferenceLayerRender,
   handleDataLayerRender,
+  handleReferenceLayerRender,
 } from '../../model/layerRenderController';
 import { MapState } from '../../model/mapState';
 
@@ -58,6 +59,7 @@ interface Props {
   layersIndexPatterns: IndexPattern[];
   setLayersIndexPatterns: (indexPatterns: IndexPattern[]) => void;
   mapState: MapState;
+  zoom: number;
 }
 
 export const LayerControlPanel = memo(
@@ -68,6 +70,7 @@ export const LayerControlPanel = memo(
     layersIndexPatterns,
     setLayersIndexPatterns,
     mapState,
+    zoom,
   }: Props) => {
     const { services } = useOpenSearchDashboards<MapServices>();
     const {
@@ -88,6 +91,7 @@ export const LayerControlPanel = memo(
     const [selectedDeleteLayer, setSelectedDeleteLayer] = useState<
       MapLayerSpecification | undefined
     >();
+    const [visibleLayers, setVisibleLayers] = useState<MapLayerSpecification[]>([]);
 
     useEffect(() => {
       if (!isUpdatingLayerRender && initialLayersLoaded) {
@@ -101,10 +105,7 @@ export const LayerControlPanel = memo(
         if (!selectedLayerConfig) {
           return;
         }
-        if (
-          selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP ||
-          selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP
-        ) {
+        if (referenceLayerTypeLookup[selectedLayerConfig.type]) {
           handleReferenceLayerRender(selectedLayerConfig, maplibreRef, undefined);
         } else {
           updateIndexPatterns();
@@ -125,6 +126,16 @@ export const LayerControlPanel = memo(
       setIsUpdatingLayerRender(false);
     }, [layers]);
 
+    useEffect(() => {
+      const getCurrentVisibleLayers = () => {
+        return layers.filter(
+          (layer: { visibility: string; zoomRange: number[] }) =>
+            zoom >= layer.zoomRange[0] && zoom <= layer.zoomRange[1]
+        );
+      };
+      setVisibleLayers(getCurrentVisibleLayers());
+    }, [layers, zoom]);
+
     // Get layer id from layers that is above the selected layer
     function getMapBeforeLayerId(selectedLayer: MapLayerSpecification): string | undefined {
       const selectedLayerIndex = layers.findIndex((layer) => layer.id === selectedLayer.id);
@@ -315,6 +326,18 @@ export const LayerControlPanel = memo(
       );
     }
 
+    const getLayerTooltipContent = (layer: MapLayerSpecification) => {
+      if (zoom < layer.zoomRange[0] || zoom > layer.zoomRange[1]) {
+        return `Layer is not visible outside of zoom range ${layer.zoomRange[0]} - ${layer.zoomRange[1]}`;
+      } else {
+        return `Layer is visible within zoom range ${layer.zoomRange[0]} - ${layer.zoomRange[1]}`;
+      }
+    };
+
+    const layerIsVisible = (layer: MapLayerSpecification) => {
+      return visibleLayers.includes(layer);
+    };
+
     if (isLayerControlVisible) {
       return (
         <I18nProvider>
@@ -366,17 +389,35 @@ export const LayerControlPanel = memo(
                               alignItems="center"
                               gutterSize="none"
                               direction="row"
+                              justifyContent={'flexStart'}
                             >
-                              <EuiFlexItem>
-                                <EuiListGroupItem
-                                  key={layer.id}
-                                  label={layer.name}
-                                  data-item={JSON.stringify(layer)}
-                                  iconType={LAYER_ICON_TYPE_MAP[layer.type]}
-                                  aria-label="layer in the map layers list"
-                                  onClick={() => onClickLayerName(layer)}
+                              <EuiFlexItem
+                                className="layerControlPanel__layerTypeIcon"
+                                grow={false}
+                              >
+                                <EuiIcon
+                                  size="m"
+                                  type={LAYER_ICON_TYPE_MAP[layer.type]}
+                                  color={layerIsVisible(layer) ? 'success' : '#DDDDDD'}
                                 />
                               </EuiFlexItem>
+                              <EuiFlexItem>
+                                <EuiToolTip
+                                  position="top"
+                                  title={layerIsVisible(layer) ? '' : layer.name}
+                                  content={
+                                    layerIsVisible(layer) ? '' : getLayerTooltipContent(layer)
+                                  }
+                                >
+                                  <EuiListGroupItem
+                                    key={layer.id}
+                                    label={layer.name}
+                                    aria-label="layer in the map layers list"
+                                    onClick={() => onClickLayerName(layer)}
+                                    showToolTip={false}
+                                  />
+                                </EuiToolTip>
+                              </EuiFlexItem>
                               <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
                                 <EuiFlexItem
                                   grow={false}

diff --git a/maps_dashboards/public/components/map_container/map_container.tsx b/maps_dashboards/public/components/map_container/map_container.tsx
@@ -144,6 +144,7 @@ export const MapContainer = ({
             layersIndexPatterns={layersIndexPatterns}
             setLayersIndexPatterns={setLayersIndexPatterns}
             mapState={mapState}
+            zoom={zoom}
           />
         )}
       </div>