[fix] Prevent duplicate legend in line and arc layers (#2830)

Before the fix we were showing two identical color legends for each line and arc layer (when selecting "color based on field").
This PR changes the following:
- If color based on field, only show one color legend.
- If single color is selected, continue to show both rectangle color swatch boxes, but put text next to each one indicating “source” and “target” instead of empty space.

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

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

@@ -4,6 +4,7 @@
 import React, {FC, useCallback, useState, ComponentType} from 'react';
 import styled from 'styled-components';
 import {rgb} from 'd3-color';
+import {useIntl} from 'react-intl';
 import ColorLegendFactory, {LegendRowFactory} from '../common/color-legend';
 import RadiusLegend from '../common/radius-legend';
 import {CHANNEL_SCALES, DIMENSIONS} from '@kepler.gl/constants';
@@ -151,6 +152,7 @@ export function LayerColorLegendFactory(
     mapState,
     actionIcons
   }) => {
+    const intl = useIntl();
     const enableColorBy = description.measure;
     const {scale, field, domain, range, property, fixed} = colorChannel;
     const [colorScale, colorField, colorDomain] = [scale, field, domain].map(k => config[k]);
@@ -206,6 +208,13 @@ export function LayerColorLegendFactory(
               ) : (
                 <SingleColorLegend
                   color={config.visConfig[property] || config[property] || config.color}
+                  label={intl.formatMessage({
+                    id: `mapLegend.layers.${layer.type}.singleColor.${colorChannel.key}`,
+                    defaultMessage: intl.formatMessage({
+                      id: `mapLegend.layers.default.singleColor.${colorChannel.key}`,
+                      defaultMessage: ' ' // mustn't be empty string or id will be used
+                    })
+                  })}
                 />
               )}
             </div>
@@ -329,8 +338,10 @@ export function LayerLegendContentFactory(
     onLayerVisConfigChange,
     actionIcons
   }) => {
-    const colorChannels = Object.values(layer.visualChannels).filter(isColorChannel);
-    const nonColorChannels = Object.values(layer.visualChannels).filter(vc => !isColorChannel(vc));
+    const visualChannels = layer.getLegendVisualChannels();
+    const channelKeys = Object.values(visualChannels);
+    const colorChannels = channelKeys.filter(isColorChannel);
+    const nonColorChannels = channelKeys.filter(vc => !isColorChannel(vc));
     const width = containerW - 2 * DIMENSIONS.mapControl.padding;
 
     // render color by chanel only

src/layers/src/arc-layer/arc-layer.ts

@@ -8,7 +8,8 @@ import Layer, {
   LayerColorConfig,
   LayerSizeConfig,
   LayerBounds,
-  LayerBaseConfigPartial
+  LayerBaseConfigPartial,
+  VisualChannel
 } from '../base-layer';
 import {BrushingExtension} from '@deck.gl/extensions';
 import {GeoArrowArcLayer} from '@kepler.gl/deckgl-arrow-layers';
@@ -591,4 +592,14 @@ export default class ArcLayer extends Layer {
     }
     return null;
   }
+
+  getLegendVisualChannels() {
+    let channels: {[key: string]: VisualChannel} = this.visualChannels;
+    if (channels.sourceColor?.field && this.config[channels.sourceColor.field]) {
+      // Remove targetColor to avoid duplicate legend
+      channels = {...channels};
+      delete channels.targetColor;
+    }
+    return channels;
+  }
 }

src/layers/src/base-layer.ts

@@ -1651,6 +1651,10 @@ class Layer {
     // implemented in subclasses
     return () => null;
   }
+
+  getLegendVisualChannels(): {[key: string]: VisualChannel} {
+    return this.visualChannels;
+  }
 }
 
 export default Layer;

src/layers/src/line-layer/line-layer.ts

@@ -9,6 +9,7 @@ import {GeoArrowArcLayer} from '@kepler.gl/deckgl-arrow-layers';
 import {FilterArrowExtension} from '@kepler.gl/deckgl-layers';
 import {EnhancedLineLayer} from '@kepler.gl/deckgl-layers';
 import LineLayerIcon from './line-layer-icon';
+import {VisualChannel} from '../base-layer';
 import ArcLayer, {ArcLayerConfig} from '../arc-layer/arc-layer';
 import {LAYER_VIS_CONFIGS, ColorRange, PROJECTED_PIXEL_SIZE_MULTIPLIER} from '@kepler.gl/constants';
 import {
@@ -335,4 +336,14 @@ export default class LineLayer extends ArcLayer {
         : [])
     ];
   }
+
+  getLegendVisualChannels() {
+    let channels: {[key: string]: VisualChannel} = this.visualChannels;
+    if (channels.sourceColor?.field && this.config[channels.sourceColor.field]) {
+      // Remove targetColor to avoid duplicate legend
+      channels = {...channels};
+      delete channels.targetColor;
+    }
+    return channels;
+  }
 }

src/localization/src/translations/en.ts

@@ -620,5 +620,27 @@ ${'```'}
   'Bug Report': 'Bug Report',
   'User Guide': 'User Guide',
   Save: 'Save',
-  Share: 'Share'
+  Share: 'Share',
+  mapLegend: {
+    layers: {
+      line: {
+        singleColor: {
+          sourceColor: 'Source',
+          targetColor: 'Target'
+        }
+      },
+      arc: {
+        singleColor: {
+          sourceColor: 'Source',
+          targetColor: 'Target'
+        }
+      },
+      default: {
+        singleColor: {
+          color: 'Fill color',
+          strokeColor: 'Outline'
+        }
+      }
+    }
+  }
 };

test/browser-headless/component/map-container-test.js

@@ -140,7 +140,7 @@ test('MapContainerFactory - _renderDeckOverlay', t => {
     getTestCases: assert => [
       {
         name: 'hover',
-        events: [{type: 'mousemove', x: 200, y: 200}, {wait: 50}],
+        events: [{type: 'mousemove', x: 200, y: 200}, {wait: 100}],
         onBeforeEvents,
         // eslint-disable-next-line max-statements
         onAfterEvents: () => {