Update layer control panel (#112)

* Update layer control panel Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Dec 8, 2022 · 5523e00 · 5523e00
1 parent 6ae0c85
commit 5523e00
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 17 deletions.
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
@@ -38,9 +38,14 @@ import {
 interface Props {
   setIsLayerConfigVisible: Function;
   setSelectedLayerConfig: Function;
+  IsLayerConfigVisible: boolean;
 }
 
-export const AddLayerPanel = ({ setIsLayerConfigVisible, setSelectedLayerConfig }: Props) => {
+export const AddLayerPanel = ({
+  setIsLayerConfigVisible,
+  setSelectedLayerConfig,
+  IsLayerConfigVisible,
+}: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
 
   function onClickAddNewLayer(layerType: string) {
@@ -124,7 +129,13 @@ export const AddLayerPanel = ({ setIsLayerConfigVisible, setSelectedLayerConfig
   return (
     <div className="addLayer">
       <EuiFlexItem className="addLayer__button">
-        <EuiButton size="s" fill onClick={showModal} aria-label="Add layer">
+        <EuiButton
+          size="s"
+          fill
+          onClick={showModal}
+          aria-label="Add layer"
+          isDisabled={IsLayerConfigVisible}
+        >
           Add layer
         </EuiButton>
       </EuiFlexItem>

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
@@ -6,6 +6,10 @@
     padding: $euiSizeM $euiSizeM
   }
 
+  .layerControlPanel__selected {
+    background-color: $euiColorLightShade;
+  }
+
   .layerControlPanel__layerFunctionButton {
     height: $euiSizeL;
     width: $euiSizeL;
@@ -21,3 +25,4 @@
     border-color: $euiColorLightShade;
   }
 }
+
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,11 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
     setLayers(layersClone);
   };
 
+  const onClickLayerName = (layer: MapLayerSpecification) => {
+    setSelectedLayerConfig(layer);
+    setIsLayerConfigVisible(true);
+  };
+
   if (isLayerControlVisible) {
     return (
       <I18nProvider>
@@ -164,29 +169,24 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
             </EuiFlexGroup>
             <EuiHorizontalRule margin="none" />
             {layers.map((layer, index) => {
-              const isDisabled =
+              const isLayerSelected =
                 isLayerConfigVisible && selectedLayerConfig && selectedLayerConfig.id === layer.id;
               return (
                 <div key={layer.id}>
-                  <EuiFlexGroup alignItems="center" gutterSize="none" direction="row">
+                  <EuiFlexGroup
+                    className={isLayerSelected ? 'layerControlPanel__selected' : ''}
+                    alignItems="center"
+                    gutterSize="none"
+                    direction="row"
+                  >
                     <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"
-                        isDisabled={isDisabled}
-                        onClick={() => {
-                          setSelectedLayerConfig(layer);
-                          if (
-                            selectedLayerConfig &&
-                            selectedLayerConfig.id === layer.id &&
-                            !isLayerConfigVisible
-                          ) {
-                            setIsLayerConfigVisible(true);
-                          }
-                        }}
+                        onClick={() => onClickLayerName(layer)}
                       />
                     </EuiFlexItem>
                     <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
@@ -204,7 +204,6 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
                           }}
                           aria-label="Hide or show layer"
                           color="text"
-                          isDisabled={isDisabled}
                         />
                       </EuiFlexItem>
                       <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
@@ -217,7 +216,6 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
                           }}
                           aria-label="Delete layer"
                           color="text"
-                          isDisabled={isDisabled}
                         />
                       </EuiFlexItem>
                     </EuiFlexGroup>
@@ -237,6 +235,7 @@ const LayerControlPanel = memo(({ maplibreRef, setLayers, layers }: Props) => {
             <AddLayerPanel
               setIsLayerConfigVisible={setIsLayerConfigVisible}
               setSelectedLayerConfig={setSelectedLayerConfig}
+              IsLayerConfigVisible={isLayerConfigVisible}
             />
           </EuiFlexGroup>
         </EuiPanel>