[feat] Edit color legend value (#2681)

- feat: Allow color legend category edit
- Able to reset previously customized value
- Updated factory type definitions
- Add disableEdit to mapControl.mapLegend

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Ilya Boyandin <iboyandin@foursquare.com>

src/components/src/index.ts

@@ -140,10 +140,10 @@ export {
   LayerLegendHeaderFactory,
   LayerLegendContentFactory,
   StyledMapControlLegend,
-  LayerColorLegend,
+  LayerColorLegendFactory,
   VisualChannelMetric,
   LayerDefaultLegend,
-  SingleColorLegend
+  SingleColorLegendFactory
 } from './map/map-legend';
 export {default as MapDrawPanelFactory} from './map/map-draw-panel';
 export {default as SplitMapButtonFactory} from './map/split-map-button';
@@ -220,7 +220,7 @@ export {
 } from './editor/feature-action-panel';
 
 // Injector
-export {injector, provideRecipesToInjector, withState} from './injector';
+export * from './injector';
 
 // Common Components
 export {default as CloudTile} from './modals/cloud-tile';
@@ -246,7 +246,13 @@ export {default as Modal, ModalFooter, ModalTitle} from './common/modal';
 export {default as AppLogo} from './common/logo';
 export {default as Switch} from './common/switch';
 export {default as Checkbox} from './common/checkbox';
-export {default as ColorLegend, LegendRow} from './common/color-legend';
+export {
+  default as ColorLegendFactory,
+  LegendRowFactory,
+  LegendColorDisplayFactory,
+  LegendRowEditorFactory,
+  ResetColorLabelFactory
+} from './common/color-legend';
 export {default as EffectControlFactory} from './map/effects/effect-control';
 export {default as LoadingSpinner} from './common/loading-spinner';
 export {default as LoadingDialog} from './modals/loading-dialog';

src/components/src/map-container.tsx

@@ -1037,6 +1037,7 @@ export default function MapContainerFactory(
             onSetEditorMode={visStateActions.setEditorMode}
             onSetLocale={uiStateActions.setLocale}
             onToggleEditorVisibility={visStateActions.toggleEditorVisibility}
+            onLayerVisConfigChange={visStateActions.layerVisConfigChange}
             mapHeight={mapState.height}
           />
           {isSplitSelector(this.props) && <Droppable containerId={containerId} />}

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

@@ -50,6 +50,7 @@ const StyledMapControlPanelHeader = styled.div.attrs({
   color: ${props => props.theme.titleTextColor};
   position: relative;
   box-sizing: border-box;
+  align-items: center;
 
   button {
     width: 18px;
@@ -101,14 +102,14 @@ const StyledIcon = styled(IconRoundSmall)`
   :hover {
     cursor: pointer;
     background-color: transparent;
-    color: ${props => props.theme.linkBtnColor};
+    color: ${props => props.theme.floatingBtnActColor};
   }
 `;
 
 export type MapControlPanelProps = {
   header?: string;
   scale?: number;
-  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
   onPinClick?: React.MouseEventHandler<HTMLDivElement>;
   pinnable?: boolean;
   disableClose?: boolean;

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

@@ -13,7 +13,7 @@ import MapLegendPanelFactory from './map-legend-panel';
 import MapDrawPanelFactory from './map-draw-panel';
 import LocalePanelFactory from './locale-panel';
 import {Layer} from '@kepler.gl/layers';
-import {Editor, MapControls, MapState} from '@kepler.gl/types';
+import {Editor, LayerVisConfig, MapControls, MapState} from '@kepler.gl/types';
 import {Datasets} from '@kepler.gl/table';
 import {MapStateActions, UIStateActions} from '@kepler.gl/actions';
 
@@ -62,6 +62,7 @@ export type MapControlProps = {
   onToggleMapControl: (control: string) => void;
   onSetEditorMode: (mode: string) => void;
   onToggleEditorVisibility: () => void;
+  onLayerVisConfigChange: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
   top: number;
   onSetLocale: typeof UIStateActions.setLocale;
   locale: string;

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

@@ -11,7 +11,7 @@ import MapControlPanelFactory from './map-control-panel';
 import MapLegendFactory from './map-legend';
 import {createPortal} from 'react-dom';
 import {DIMENSIONS} from '@kepler.gl/constants';
-import {MapControlItem, MapControls, MapState} from '@kepler.gl/types';
+import {LayerVisConfig, MapControlMapLegend, MapControls, MapState} from '@kepler.gl/types';
 import {Layer} from '@kepler.gl/layers';
 import {media} from '@kepler.gl/styles';
 import {ActionHandler, toggleSplitMapViewport} from '@kepler.gl/actions';
@@ -70,6 +70,7 @@ export type MapLegendPanelProps = {
   onToggleSplitMapViewport?: ActionHandler<typeof toggleSplitMapViewport>;
   isViewportUnsyncAllowed?: boolean;
   onClickControlBtn?: (e?: MouseEvent) => void;
+  onLayerVisConfigChange?: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
 };
 
 function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
@@ -89,10 +90,11 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
     offsetRight,
     onToggleSplitMapViewport,
     onClickControlBtn,
-    isViewportUnsyncAllowed = true
+    isViewportUnsyncAllowed = true,
+    onLayerVisConfigChange
   }) => {
-    const mapLegend = mapControls?.mapLegend || ({} as MapControlItem);
-    const {active: isPinned} = mapLegend || {};
+    const mapLegend = mapControls?.mapLegend || ({} as MapControlMapLegend);
+    const {active: isPinned, disableEdit} = mapLegend || {};
     const rootContext = useContext(RootContext);
     const [isOpened, setIsOpened] = useState(false);
 
@@ -154,7 +156,12 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
         onToggleSplitMapViewport={onToggleSplitMapViewport}
         isViewportUnsyncAllowed={isViewportUnsyncAllowed}
       >
-        <MapLegend layers={layers} mapState={mapState} />
+        <MapLegend
+          layers={layers}
+          mapState={mapState}
+          disableEdit={disableEdit}
+          onLayerVisConfigChange={onLayerVisConfigChange}
+        />
       </MapControlPanel>
     );