@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/components/common/toolbar-item.tsx

@@ -0,0 +1,99 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import styled from 'styled-components';
+import classnames from 'classnames';
+import {FormattedMessage} from 'localization';
+import {ComponentType, MouseEvent} from 'react';
+
+interface StyledDivProps {
+  active?: boolean;
+}
+
+const StyledDiv = styled.div.attrs(props => ({
+  className: classnames('toolbar-item', props.className)
+}))<StyledDivProps>`
+  color: ${props =>
+    props.active ? props.theme.toolbarItemIconHover : props.theme.panelHeaderIcon};
+  padding: 12px 20px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 110px;
+  justify-content: space-between;
+  border: 1px solid ${props => (props.active ? props.theme.toolbarItemBorderHover : 'transparent')};
+  border-radius: ${props => props.theme.toolbarItemBorderRaddius};
+  background-color: ${props =>
+    props.active ? props.theme.toolbarItemBgdHover : props.theme.dropdownListBgd};
+
+  svg {
+    margin-bottom: 4px;
+  }
+  .toolbar-item__title {
+    white-space: nowrap;
+    color: ${props => props.theme.textColorHl};
+  }
+
+  :hover {
+    background-color: ${props => props.theme.toolbarItemBgdHover};
+    border-color: ${props => props.theme.toolbarItemBorderHover};
+    svg {
+      color: ${props => props.theme.toolbarItemIconHover};
+    }
+    cursor: pointer;
+  }
+`;
+
+export type ToolbarItemProps = {
+  id?: string;
+  key?: string;
+  label: string;
+  className?: string;
+  active?: boolean;
+  onClose?: () => void;
+  onClick: ((event: MouseEvent<HTMLDivElement>) => void) | null;
+  icon?: ComponentType<any>;
+};
+
+const ToolbarItem = React.memo((props: ToolbarItemProps) => (
+  <StyledDiv
+    id={props.id}
+    className={props.className}
+    active={props.active}
+    onClick={e => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (typeof props.onClose === 'function') {
+        props.onClose();
+      }
+      props.onClick?.(e);
+    }}
+  >
+    {props.icon && <props.icon />}
+    <div className="toolbar-item__title">
+      <FormattedMessage id={props.label} />
+    </div>
+  </StyledDiv>
+));
+
+ToolbarItem.displayName = 'ToolbarItem';
+
+export default ToolbarItem;

package/src/components/common/toolbar.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import styled from 'styled-components';
+
+export interface ToolbarProps {
+  show?: boolean;
+}
+
+const Toolbar = styled.div<ToolbarProps>`
+  display: flex;
+  flex-direction: row;
+  background-color: ${props => props.theme.dropdownListBgd};
+  box-shadow: ${props => props.theme.dropdownListShadow};
+  font-size: 12px;
+  transition: ${props => props.theme.transitionSlow};
+  margin-top: ${props => (props.show ? '6px' : '20px')};
+  opacity: ${props => (props.show ? 1 : 0)};
+  transform: translateX(calc(-50% + 20px));
+  pointer-events: ${props => (props.show ? 'all' : 'none')};
+  z-index: 1000;
+
+  .panel-header-dropdown__inner {
+    box-shadow: none;
+    background-color: transparent;
+    display: flex;
+  }
+`;
+
+Toolbar.displayName = 'Toolbar';
+
+export default Toolbar;

package/src/components/common/vertical-toolbar.tsx

@@ -0,0 +1,35 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import styled from 'styled-components';
+import Toolbar, {ToolbarProps} from './toolbar';
+
+const VerticalToolbar = styled(Toolbar)<ToolbarProps>`
+  flex-direction: column;
+
+  .toolbar-item {
+    width: 78px;
+    padding: 13px 16px;
+  }
+`;
+
+VerticalToolbar.displayName = 'VerticalToolbar';
+
+export default VerticalToolbar;

package/src/components/container.d.ts

@@ -0,0 +1,8 @@
+import {Component} from 'react';
+import {InjectorType, ProvideRecipesToInjectorType} from './injector';
+
+export const appInjector: InjectorType;
+
+export const injectComponents: (recipes: any[]) => ProvideRecipesToInjectorType;
+
+export const ContainerFactory: (KeplerGl: Component) => Component;

package/src/components/container.tsx

@@ -0,0 +1,188 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, ComponentType, Dispatch} from 'react';
+import {connect, ConnectedProps} from 'react-redux';
+import memoize from 'lodash.memoize';
+import {console as Console} from 'global/window';
+import {injector, provideRecipesToInjector, flattenDeps} from './injector';
+import KeplerGlFactory from './kepler-gl';
+import {forwardTo} from 'actions/action-wrapper';
+
+import {registerEntry, deleteEntry, renameEntry} from 'actions/identity-actions';
+import {notNullorUndefined} from 'utils/data-utils';
+import {KeplerGlState} from 'reducers/core';
+
+export const ERROR_MSG = {
+  noState:
+    `kepler.gl state does not exist. ` +
+    `You might forget to mount keplerGlReducer in your root reducer.` +
+    `If it is not mounted as state.keplerGl by default, you need to provide getState as a prop`
+};
+
+const mapStateToProps = (state: any, props: ContainerProps) => ({state, ...props});
+const dispatchToProps = (dispatch: Dispatch<any>) => ({dispatch});
+const connector = connect(mapStateToProps, dispatchToProps);
+
+type ContainerProps = {
+  id: string;
+  mapboxApiAccessToken: string;
+  mapboxApiUrl?: string;
+  mapStylesReplaceDefault?: boolean;
+  initialUiState?: object;
+  width: number;
+  mint?: boolean;
+  getState: (state: any) => KeplerGlState;
+};
+
+type PropsFromRedux = ConnectedProps<typeof connector> & ContainerProps;
+
+ContainerFactory.deps = [KeplerGlFactory];
+
+export function ContainerFactory(
+  KeplerGl: ReturnType<typeof KeplerGlFactory>
+): ComponentType<PropsFromRedux> {
+  /** @lends KeplerGl */
+  /**
+    * Main Kepler.gl Component
+    * @param {Object} props
+    *
+    * @param {string} props.id - _required_
+    *
+    * - Default: `map`
+    * The id of this KeplerGl instance. `id` is required if you have multiple
+    * KeplerGl instances in your app. It defines the prop name of the KeplerGl state that is
+    * stored in the KeplerGl reducer. For example, the state of the KeplerGl component with id `foo` is
+    * stored in `state.keplerGl.foo`.
+    *
+    * In case you create multiple kepler.gl instances using the same id, the kepler.gl state defined by the entry will be
+    * overridden by the latest instance and reset to a blank state.
+    * @param {string} props.mapboxApiAccessToken - _required_
+    * @param {string} props.mapboxApiUrl - _optional_
+    * @param {Boolean} props.mapStylesReplaceDefault - _optional_
+    * @param {object} props.initialUiState - _optional_
+
+    * You can create a free account at [www.mapbox.com](www.mapbox.com) and create a token at
+    * [www.mapbox.com/account/access-tokens](www.mapbox.com/account/access-tokens)
+    *
+    *
+    * @param {Number} props.width - _required_ Width of the KeplerGl UI.
+    * @public
+   */
+
+  class Container extends Component<PropsFromRedux> {
+    // default id and address if not provided
+    static defaultProps = {
+      id: 'map',
+      getState: state => state.keplerGl,
+      mint: true
+    };
+
+    getSelector = memoize((id, getState) => state => {
+      if (!getState(state)) {
+        // log error
+        Console.error(ERROR_MSG.noState);
+
+        return null;
+      }
+      return getState(state)[id];
+    });
+    getDispatch = memoize((id, dispatch) => forwardTo(id, dispatch));
+
+    componentDidMount() {
+      const {
+        id,
+        mint,
+        mapboxApiAccessToken,
+        mapboxApiUrl,
+        mapStylesReplaceDefault,
+        initialUiState
+      } = this.props;
+
+      // add a new entry to reducer
+      this.props.dispatch(
+        registerEntry({
+          id,
+          mint,
+          mapboxApiAccessToken,
+          mapboxApiUrl,
+          mapStylesReplaceDefault,
+          initialUiState
+        })
+      );
+    }
+
+    componentDidUpdate(prevProps) {
+      // check if id has changed, if true, copy state over
+      if (
+        notNullorUndefined(prevProps.id) &&
+        notNullorUndefined(this.props.id) &&
+        prevProps.id !== this.props.id
+      ) {
+        this.props.dispatch(renameEntry(prevProps.id, this.props.id));
+      }
+    }
+
+    componentWillUnmount() {
+      if (this.props.mint !== false) {
+        // delete entry in reducer
+        this.props.dispatch(deleteEntry(this.props.id));
+      }
+    }
+
+    render() {
+      const {id, getState, dispatch, state} = this.props;
+      const selector = this.getSelector(id, getState);
+
+      if (!selector || !selector(state)) {
+        // instance state hasn't been mounted yet
+        return <div />;
+      }
+
+      return (
+        <KeplerGl
+          {...this.props}
+          id={id}
+          selector={selector}
+          dispatch={this.getDispatch(id, dispatch)}
+        />
+      );
+    }
+  }
+
+  return connector(Container);
+}
+
+const allDependencies = flattenDeps([], ContainerFactory);
+
+// provide all dependencies to appInjector
+export const appInjector = allDependencies.reduce(
+  (inj, factory) => inj.provide(factory, factory),
+  injector()
+);
+
+// Helper to inject custom components and return kepler.gl container
+export function injectComponents(recipes = []) {
+  return provideRecipesToInjector(recipes, appInjector).get(ContainerFactory);
+}
+
+const InjectedContainer = appInjector.get(ContainerFactory);
+
+export default InjectedContainer;

package/src/components/context.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {createContext, RefObject} from 'react';
+
+const identity = state => state;
+// New Context API only supported after 16.3
+const KeplerGlContext = createContext({
+  selector: identity,
+  id: 'map'
+});
+
+export const RootContext = createContext<RefObject<HTMLDivElement> | null>(null);
+
+export default KeplerGlContext;

package/src/components/editor/editor.tsx

@@ -0,0 +1,231 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React, {Component, CSSProperties, KeyboardEvent} from 'react';
+import styled from 'styled-components';
+import {Editor as Draw} from 'react-map-gl-draw';
+import window from 'global/window';
+import classnames from 'classnames';
+import get from 'lodash.get';
+import {createSelector} from 'reselect';
+
+import FeatureActionPanelFactory, {FeatureActionPanelProps} from './feature-action-panel';
+import {FILTER_TYPES, EDITOR_MODES, EDITOR_AVAILABLE_LAYERS} from 'constants/default-settings';
+
+import {DEFAULT_RADIUS, getStyle as getFeatureStyle} from './feature-styles';
+import {getStyle as getEditHandleStyle, getEditHandleShape} from './handle-style';
+import KeyEvent from 'constants/keyevent';
+import {Layer} from 'layers';
+import {Datasets, Filter} from 'reducers';
+import {Feature} from '@nebula.gl/edit-modes';
+import {MjolnirEvent} from 'mjolnir.js';
+
+const StyledWrapper = styled.div`
+  cursor: ${(props: {editor: {mode: string}}) =>
+    props.editor.mode === EDITOR_MODES.EDIT ? 'pointer' : 'crosshair'};
+  position: relative;
+`;
+
+const editorLayerFilter = (layer: Layer) => EDITOR_AVAILABLE_LAYERS.includes(layer.type!);
+
+EditorFactory.deps = [FeatureActionPanelFactory];
+
+interface EditorProps {
+  filters: Filter[];
+  layers: Layer[];
+  datasets: Datasets;
+  editor: {selectedFeature: Feature; mode: string};
+  layersToRender: Record<string, Layer>;
+  index: number;
+  className: string;
+  clickRadius: number;
+  style: CSSProperties;
+  isEnabled: boolean;
+  onSelect: (f: Feature | null) => void;
+  onUpdate: (f: Feature[]) => void;
+  onDeleteFeature: (f: Feature) => void;
+  onTogglePolygonFilter: (l: Layer, f: Feature) => void;
+}
+
+export default function EditorFactory(
+  FeatureActionPanel: React.FC<FeatureActionPanelProps>
+): React.ComponentClass<EditorProps> {
+  class Editor extends Component<EditorProps> {
+    static defaultProps = {
+      clickRadius: DEFAULT_RADIUS
+    };
+
+    static displayName = 'Editor';
+
+    state = {
+      showActions: false,
+      lastPosition: null
+    };
+
+    componentDidMount() {
+      window.addEventListener('keydown', this._onKeyPressed);
+    }
+
+    componentWillUnmount() {
+      window.removeEventListener('keydown', this._onKeyPressed);
+    }
+
+    layerSelector = (props: EditorProps) => props.layers;
+    layersToRenderSelector = (props: EditorProps) => props.layersToRender;
+    filterSelector = (props: EditorProps) => props.filters;
+    selectedFeatureIdSelector = (props: EditorProps) =>
+      get(props, ['editor', 'selectedFeature', 'id']);
+    editorFeatureSelector = (props: EditorProps) => get(props, ['editor', 'features']);
+
+    currentFilterSelector = createSelector(
+      this.filterSelector,
+      this.selectedFeatureIdSelector,
+      (filters, selectedFeatureId) => filters.find(f => f.value && f.value.id === selectedFeatureId)
+    );
+
+    availableLayersSeletor = createSelector(
+      this.layerSelector,
+      this.layersToRenderSelector,
+      (layers, layersToRender) =>
+        layers.filter(editorLayerFilter).filter(layer => {
+          return layersToRender[layer.id];
+        })
+    );
+
+    allFeaturesSelector = createSelector(
+      this.filterSelector,
+      this.editorFeatureSelector,
+      (filters, editorFeatures) =>
+        filters
+          .filter(f => f.type === FILTER_TYPES.polygon)
+          .map(f => f.value)
+          .concat(editorFeatures)
+    );
+
+    _onKeyPressed = (event: KeyboardEvent) => {
+      const {isEnabled} = this.props;
+
+      if (!isEnabled) {
+        return;
+      }
+
+      switch (event.keyCode) {
+        case KeyEvent.DOM_VK_DELETE:
+        case KeyEvent.DOM_VK_BACK_SPACE:
+          this._onDeleteSelectedFeature();
+          break;
+        case KeyEvent.DOM_VK_ESCAPE:
+          this.props.onSelect(null);
+          break;
+        default:
+          break;
+      }
+    };
+
+    _onSelect = ({
+      selectedFeatureId,
+      sourceEvent
+    }: {
+      selectedFeatureId: string | number;
+      sourceEvent: MjolnirEvent;
+    }) => {
+      const allFeatures = this.allFeaturesSelector(this.props);
+      this.setState(
+        {
+          ...(sourceEvent.rightButton
+            ? {
+                showActions: true,
+                lastPosition: {
+                  x: sourceEvent.changedPointers[0].offsetX,
+                  y: sourceEvent.changedPointers[0].offsetY
+                }
+              }
+            : null)
+        },
+        () => {
+          this.props.onSelect(allFeatures.find(f => f.id === selectedFeatureId));
+        }
+      );
+    };
+
+    _onDeleteSelectedFeature = () => {
+      if (this.state.showActions) {
+        this.setState({showActions: false});
+      }
+
+      const {editor} = this.props;
+      const {selectedFeature = {}} = editor;
+      this.props.onDeleteFeature(selectedFeature);
+    };
+
+    _closeFeatureAction = () => {
+      this.setState({showActions: false});
+    };
+
+    _onToggleLayer = (layer: Layer) => {
+      const {selectedFeature} = this.props.editor;
+      if (!selectedFeature) {
+        return;
+      }
+
+      this.props.onTogglePolygonFilter(layer, selectedFeature);
+    };
+
+    render() {
+      const {className, clickRadius, datasets, editor, onUpdate, style} = this.props;
+
+      const {lastPosition, showActions} = this.state;
+      const selectedFeatureId = get(editor, ['selectedFeature', 'id']);
+      const currentFilter = this.currentFilterSelector(this.props);
+      const availableLayers = this.availableLayersSeletor(this.props);
+      const allFeatures = this.allFeaturesSelector(this.props);
+
+      return (
+        <StyledWrapper editor={editor} className={classnames('editor', className)} style={style}>
+          <Draw
+            clickRadius={clickRadius}
+            mode={editor.mode}
+            features={allFeatures}
+            selectedFeatureId={selectedFeatureId}
+            onSelect={this._onSelect}
+            onUpdate={onUpdate}
+            getEditHandleShape={getEditHandleShape}
+            getFeatureStyle={getFeatureStyle}
+            getEditHandleStyle={getEditHandleStyle}
+          />
+          {showActions && Boolean(selectedFeatureId) ? (
+            <FeatureActionPanel
+              selectedFeature={get(editor, ['selectedFeature'])}
+              datasets={datasets}
+              layers={availableLayers}
+              currentFilter={currentFilter}
+              onClose={this._closeFeatureAction}
+              onDeleteFeature={this._onDeleteSelectedFeature}
+              onToggleLayer={this._onToggleLayer}
+              position={lastPosition}
+            />
+          ) : null}
+        </StyledWrapper>
+      );
+    }
+  }
+
+  return Editor;
+}