feat: add layer visibility toggle to map legend (#3303) (#3324)

Signed-off-by: pierreeurope <pierre.europe@pm.me>

Author: pierreeurope

src/components/src/map-container.tsx

@@ -28,6 +28,7 @@ import EditorFactory from './editor/editor';
 import {
   generateMapboxLayers,
   updateMapboxLayers,
+  Layer,
   LayerBaseConfig,
   VisualChannelDomain,
   EditorLayerUtils,
@@ -1065,6 +1066,11 @@ export default function MapContainerFactory(
       this.props.visStateActions.setLoadingIndicator({change: 0});
     }, DEBOUNCE_LOADING_STATE_PROPAGATE);
 
+    _handleToggleLayerVisibility = (layer: Layer) => {
+      const {visStateActions} = this.props;
+      visStateActions.layerConfigChange(layer, {isVisible: !layer.config.isVisible});
+    };
+
     _toggleMapControl = panelId => {
       const {index, uiStateActions} = this.props;
 
@@ -1175,6 +1181,7 @@ export default function MapContainerFactory(
             onSetLocale={uiStateActions.setLocale}
             onToggleEditorVisibility={visStateActions.toggleEditorVisibility}
             onLayerVisConfigChange={visStateActions.layerVisConfigChange}
+            onToggleLayerVisibility={this._handleToggleLayerVisibility}
             mapHeight={mapState.height}
             setMapControlSettings={uiStateActions.setMapControlSettings}
             activeSidePanel={activeSidePanel}

src/components/src/map/map-control.tsx

@@ -62,6 +62,7 @@ export type MapControlProps = {
   onSetEditorMode: (mode: string) => void;
   onToggleEditorVisibility: () => void;
   onLayerVisConfigChange: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
+  onToggleLayerVisibility?: (layer: Layer) => void;
   top: number;
   onSetLocale: typeof UIStateActions.setLocale;
   availableLocales: string[];

src/components/src/map/map-legend-panel.tsx

@@ -320,6 +320,7 @@ export type MapLegendPanelProps = {
   mapControls: MapControls;
   mapState?: MapState;
   onLayerVisConfigChange?: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
+  onToggleLayerVisibility?: (layer: Layer) => void;
   onToggleSplitMapViewport?: ActionHandler<typeof toggleSplitMapViewport>;
   isViewportUnsyncAllowed?: boolean;
   onClickControlBtn?: (e?: MouseEvent) => void;
@@ -352,6 +353,7 @@ const MapLegendPanelComponent = ({
   actionIcons = defaultActionIcons,
   mapState,
   onLayerVisConfigChange,
+  onToggleLayerVisibility,
   onToggleSplitMapViewport,
   onClickControlBtn,
   activeSidePanel,
@@ -406,6 +408,7 @@ const MapLegendPanelComponent = ({
         disableEdit={disableEdit}
         isExport={isExport}
         onLayerVisConfigChange={onLayerVisConfigChange}
+        onToggleLayerVisibility={onToggleLayerVisibility}
       />
     </MapControlPanel>
   ) : null;

src/components/src/map/map-legend.tsx

@@ -13,7 +13,7 @@ import {FormattedMessage} from '@kepler.gl/localization';
 import {Layer, LayerBaseConfig, VisualChannel, VisualChannelDescription} from '@kepler.gl/layers';
 import {LayerVisConfig, MapState, RGBColor} from '@kepler.gl/types';
 import {getDistanceScales} from 'viewport-mercator-project';
-import {ArrowDown, ArrowRight} from '../common/icons';
+import {ArrowDown, ArrowRight, EyeSeen, EyeUnseen} from '../common/icons';
 import PanelHeaderActionFactory from '../side-panel/panel-header-action';
 
 interface StyledMapControlLegendProps {
@@ -73,6 +73,26 @@ export const StyledMapControlLegend = styled.div<StyledMapControlLegendProps>`
   }
 `;
 
+const StyledLegendHeaderRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const StyledVisibilityToggle = styled.div<{isVisible: boolean}>`
+  cursor: pointer;
+  color: ${props => (props.isVisible ? props.theme.textColor : props.theme.subtextColor)};
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  opacity: ${props => (props.isVisible ? 1 : 0.5)};
+
+  &:hover {
+    color: ${props => props.theme.textColorHl};
+    opacity: 1;
+  }
+`;
+
 export const VisualChannelMetric = ({name}) => {
   return (
     <div className="legend--layer__title">
@@ -300,16 +320,41 @@ export type LayerLegendHeaderProps = {
     showLayerName?: boolean;
   };
   isExport?: boolean;
+  onToggleLayerVisibility?: (layer: Layer) => void;
 };
 
 const isRadiusChannel = visualChannel =>
   [CHANNEL_SCALES.radius].includes(visualChannel.channelScaleType);
 
 export function LayerLegendHeaderFactory() {
-  const LayerLegendHeader: React.FC<LayerLegendHeaderProps> = ({options, layer}) => {
-    return options?.showLayerName !== false ? (
-      <div className="legend--layer_name">{layer.config.label}</div>
-    ) : null;
+  const LayerLegendHeader: React.FC<LayerLegendHeaderProps> = ({
+    options,
+    layer,
+    onToggleLayerVisibility
+  }) => {
+    const isVisible = layer.config.isVisible;
+    const onToggle = useCallback(() => {
+      if (onToggleLayerVisibility) {
+        onToggleLayerVisibility(layer);
+      }
+    }, [layer, onToggleLayerVisibility]);
+
+    if (options?.showLayerName === false) {
+      return null;
+    }
+
+    return (
+      <StyledLegendHeaderRow>
+        <div className="legend--layer_name" style={{opacity: isVisible ? 1 : 0.5}}>
+          {layer.config.label}
+        </div>
+        {onToggleLayerVisibility ? (
+          <StyledVisibilityToggle isVisible={isVisible} onClick={onToggle}>
+            {isVisible ? <EyeSeen height="12px" /> : <EyeUnseen height="12px" />}
+          </StyledVisibilityToggle>
+        ) : null}
+      </StyledLegendHeaderRow>
+    );
   };
   return LayerLegendHeader;
 }
@@ -421,6 +466,7 @@ export type MapLegendProps = {
   disableEdit?: boolean;
   isExport?: boolean;
   onLayerVisConfigChange?: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
+  onToggleLayerVisibility?: (layer: Layer) => void;
   actionIcons?: MapLegendIcons;
 };
 
@@ -438,6 +484,7 @@ function MapLegendFactory(
     disableEdit,
     isExport,
     onLayerVisConfigChange,
+    onToggleLayerVisibility,
     actionIcons = defaultActionIcons
   }) => (
     <div className="map-legend">
@@ -454,7 +501,12 @@ function MapLegendFactory(
             key={index}
             width={containerW}
           >
-            <LayerLegendHeader isExport={isExport} options={options} layer={layer} />
+            <LayerLegendHeader
+              isExport={isExport}
+              options={options}
+              layer={layer}
+              onToggleLayerVisibility={onToggleLayerVisibility}
+            />
             <LayerLegendContent
               containerW={containerW}
               layer={layer}