@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/components/side-panel/layer-manager.tsx

@@ -0,0 +1,242 @@
+// 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, useCallback} from 'react';
+
+import {injectIntl, WrappedComponentProps} from 'react-intl';
+import {FormattedMessage} from 'localization';
+import styled from 'styled-components';
+
+import LayerListFactory from './layer-panel/layer-list';
+import DatasetLayerGroupFactory from './layer-panel/dataset-layer-group';
+import PanelViewListToggleFactory from './layer-panel/panel-view-list-toggle';
+import PanelTitleFactory from './panel-title';
+import DatasetSectionFactory from './layer-panel/dataset-section';
+import AddLayerButtonFactory from './layer-panel/add-layer-button';
+
+import ItemSelector from 'components/common/item-selector/item-selector';
+import {PanelLabel, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
+
+import {LAYER_BLENDINGS} from 'constants/default-settings';
+import {Datasets} from 'reducers';
+import {Layer, LayerClassesType} from 'layers';
+import * as UiStateActions from 'actions/ui-state-actions';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {SidePanelItem} from 'components/types';
+import {LayerPanelListView} from 'reducers/ui-state-updaters';
+import {ActionHandler} from 'actions';
+
+type LayerBlendingSelectorProps = {
+  layerBlending: string;
+  updateLayerBlending: ActionHandler<typeof VisStateActions.updateLayerBlending>;
+} & WrappedComponentProps;
+
+type LayerManagerProps = {
+  datasets: Datasets;
+  layers: Layer[];
+  layerOrder: number[];
+  layerClasses: LayerClassesType;
+  layerBlending: string;
+  uiStateActions: typeof UiStateActions;
+  visStateActions: typeof VisStateActions;
+  showAddDataModal: () => void;
+  removeDataset: ActionHandler<typeof UiStateActions.openDeleteModal>;
+  showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  layerPanelListView: LayerPanelListView;
+  panelMetadata: SidePanelItem;
+} & WrappedComponentProps;
+
+const IS_BUILDER = true;
+
+const LayerHeader = styled.div.attrs({
+  className: 'layer-manager-header'
+})`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+`;
+
+export function LayerBlendingSelectorFactory() {
+  const LayerBlendingSelector = ({
+    layerBlending,
+    updateLayerBlending,
+    intl
+  }: LayerBlendingSelectorProps) => {
+    const labeledLayerBlendings = Object.keys(LAYER_BLENDINGS).reduce(
+      (acc, current) => ({
+        ...acc,
+        [intl.formatMessage({id: LAYER_BLENDINGS[current].label})]: current
+      }),
+      {}
+    );
+
+    const onChange = useCallback(blending => updateLayerBlending(labeledLayerBlendings[blending]), [
+      updateLayerBlending,
+      labeledLayerBlendings
+    ]);
+
+    return (
+      <SidePanelSection>
+        <PanelLabel>
+          <FormattedMessage id="layerBlending.title" />
+        </PanelLabel>
+        <ItemSelector
+          selectedItems={intl.formatMessage({id: LAYER_BLENDINGS[layerBlending].label})}
+          options={Object.keys(labeledLayerBlendings)}
+          multiSelect={false}
+          searchable={false}
+          onChange={onChange}
+        />
+      </SidePanelSection>
+    );
+  };
+  return LayerBlendingSelector;
+}
+
+LayerManagerFactory.deps = [
+  LayerListFactory,
+  DatasetLayerGroupFactory,
+  PanelViewListToggleFactory,
+  PanelTitleFactory,
+  DatasetSectionFactory,
+  AddLayerButtonFactory,
+  LayerBlendingSelectorFactory
+];
+
+function LayerManagerFactory(
+  LayerList: ReturnType<typeof LayerListFactory>,
+  DatasetLayerGroup: ReturnType<typeof DatasetLayerGroupFactory>,
+  PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>,
+  PanelTitle: ReturnType<typeof PanelTitleFactory>,
+  DatasetSection: ReturnType<typeof DatasetSectionFactory>,
+  AddLayerButton: ReturnType<typeof AddLayerButtonFactory>,
+  LayerBlendingSelector: ReturnType<typeof LayerBlendingSelectorFactory>
+) {
+  class LayerManager extends Component<LayerManagerProps> {
+    _addEmptyNewLayer = (dataset: string) => {
+      const {visStateActions} = this.props;
+      visStateActions.addLayer(undefined, dataset);
+    };
+
+    _toggleLayerPanelListView = (listView: string) => {
+      const {uiStateActions} = this.props;
+      uiStateActions.toggleLayerPanelListView(listView);
+    };
+
+    render() {
+      const {
+        layers,
+        datasets,
+        intl,
+        layerOrder,
+        showAddDataModal,
+        updateTableColor,
+        showDatasetTable,
+        removeDataset,
+        uiStateActions,
+        visStateActions,
+        layerPanelListView,
+        panelMetadata
+      } = this.props;
+
+      const defaultDataset = Object.keys(datasets)[0];
+      const isSortByDatasetMode = layerPanelListView === 'sortByDataset';
+
+      return (
+        <div className="layer-manager">
+          {!IS_BUILDER && (
+            <>
+              <SidePanelSection>
+                <PanelViewListToggle
+                  toggleLayerPanelListView={this._toggleLayerPanelListView}
+                  layerPanelListViewMode={layerPanelListView}
+                />
+              </SidePanelSection>
+              <DatasetSection
+                datasets={datasets}
+                showDatasetTable={showDatasetTable}
+                updateTableColor={updateTableColor}
+                removeDataset={removeDataset}
+                showDeleteDataset
+                showDatasetList={!isSortByDatasetMode}
+                showAddDataModal={showAddDataModal}
+                defaultDataset={defaultDataset}
+              />
+              <SidePanelDivider />
+            </>
+          )}
+          <SidePanelSection>
+            <LayerHeader>
+              <PanelTitle className="layer-manager-title">
+                <FormattedMessage id={panelMetadata.label} />
+              </PanelTitle>
+              {defaultDataset ? (
+                // TODO replace ignore
+                // @ts-ignore
+                <AddLayerButton
+                  datasets={datasets}
+                  typeaheadPlaceholder="Search datasets"
+                  intl={intl}
+                  onOptionSelected={this._addEmptyNewLayer}
+                />
+              ) : null}
+            </LayerHeader>
+          </SidePanelSection>
+          <SidePanelSection>
+            {isSortByDatasetMode ? (
+              <DatasetLayerGroup
+                datasets={datasets}
+                showDatasetTable={showDatasetTable}
+                layers={layers}
+                updateTableColor={updateTableColor}
+                removeDataset={removeDataset}
+                layerOrder={layerOrder}
+                layerClasses={this.props.layerClasses}
+                uiStateActions={uiStateActions}
+                visStateActions={visStateActions}
+                showDeleteDataset
+              />
+            ) : (
+              // TODO replace ignore
+              // @ts-ignore
+              <LayerList
+                layers={layers}
+                datasets={datasets}
+                layerOrder={layerOrder}
+                uiStateActions={uiStateActions}
+                visStateActions={visStateActions}
+                layerClasses={this.props.layerClasses}
+              />
+            )}
+          </SidePanelSection>
+          <LayerBlendingSelector
+            layerBlending={this.props.layerBlending}
+            updateLayerBlending={visStateActions.updateLayerBlending}
+            intl={intl}
+          />
+        </div>
+      );
+    }
+  }
+  return injectIntl(LayerManager);
+}
+
+export default LayerManagerFactory;

package/src/components/side-panel/layer-panel/add-layer-button.tsx

@@ -0,0 +1,208 @@
+// 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, {useCallback, useMemo, useState} from 'react';
+import styled from 'styled-components';
+import {FormattedMessage} from 'localization';
+import {WrappedComponentProps} from 'react-intl';
+
+import Tippy from '@tippyjs/react';
+import {Add} from 'components/common/icons';
+import {Button} from 'components/common/styled-components';
+import {DatasetSquare} from 'components';
+import Typeahead from 'components/common/item-selector/typeahead';
+import Accessor from 'components/common/item-selector/accessor';
+import {Datasets, RGBColor} from 'reducers';
+
+type AddLayerButtonProps = {
+  datasets: Datasets;
+  onOptionSelected: (opt: string) => void;
+  typeaheadPlaceholder?: string;
+} & WrappedComponentProps;
+
+const DropdownContainer = styled.div.attrs({
+  className: 'add-layer-menu-dropdown'
+})`
+  .list-selector {
+    border-top: 1px solid ${props => props.theme.secondaryInputBorderColor};
+    width: 100%;
+    /* disable scrolling, currently set to 280px internally */
+    max-height: unset;
+  }
+
+  .list__item > div {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    line-height: 18px;
+    padding: 0;
+
+    svg {
+      margin-right: 10px;
+    }
+  }
+`;
+
+const AddLayerMenu = styled.div.attrs({
+  className: 'add-layer-menu'
+})`
+  display: flex;
+  flex-direction: column;
+  min-width: 240px;
+  max-width: 240px;
+  position: absolute;
+  top: 100%;
+  left: -53px;
+  z-index: 5;
+`;
+
+const ListItemWrapper = styled.div.attrs({
+  className: 'add-layer-menu-list-item-wrapper'
+})`
+  display: flex;
+  color: ${props => props.theme.textColor};
+  font-size: 11px;
+  letter-spacing: 0.2px;
+  overflow: auto;
+
+  .dataset-color {
+    flex-shrink: 0;
+    margin-top: 3px;
+  }
+
+  .dataset-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const TYPEAHEAD_CLASS = 'typeahead';
+const TYPEAHEAD_INPUT_CLASS = 'typeahead__input';
+
+function AddLayerButtonFactory() {
+  const ListItem = ({value}) => (
+    <ListItemWrapper>
+      <DatasetSquare className="dataset-color" backgroundColor={value.color} />
+      <div className="dataset-name" title={value.label}>
+        {value.label}
+      </div>
+    </ListItemWrapper>
+  );
+
+  const AddLayerButton: React.FC<AddLayerButtonProps> = props => {
+    const {datasets, onOptionSelected, typeaheadPlaceholder, intl} = props;
+    const [showAddLayerDropdown, setShowAddLayerDropdown] = useState(false);
+
+    const toggleAddLayerDropdown = useCallback(() => {
+      setShowAddLayerDropdown(!showAddLayerDropdown);
+    }, [showAddLayerDropdown, setShowAddLayerDropdown]);
+
+    const _onBlur = useCallback(() => {
+      setShowAddLayerDropdown(false);
+    }, []);
+
+    const toggleSelectedOption = useCallback(
+      (option: {label: string; value: string; color: RGBColor}) => {
+        onOptionSelected(option.value);
+        _onBlur();
+      },
+      [onOptionSelected, _onBlur]
+    );
+
+    const onButtonBlur = useCallback(
+      event => {
+        if (
+          [TYPEAHEAD_CLASS, TYPEAHEAD_INPUT_CLASS].every(
+            cls => !event?.relatedTarget?.classList.contains(cls)
+          )
+        ) {
+          _onBlur();
+        }
+      },
+      [_onBlur]
+    );
+
+    const onSearchBlur = useCallback(() => {
+      _onBlur();
+    }, [_onBlur]);
+
+    const options = useMemo(() => {
+      return Object.values(datasets).map(ds => ({
+        label: ds.label,
+        value: ds.id,
+        color: ds.color
+      }));
+    }, [datasets]);
+
+    return (
+      <Tippy
+        visible={showAddLayerDropdown}
+        arrow={false}
+        interactive
+        placement="bottom"
+        appendTo="parent"
+        duration={0}
+        content={
+          <AddLayerMenu>
+            <DropdownContainer>
+              <Typeahead
+                onBlur={onSearchBlur}
+                className={TYPEAHEAD_CLASS}
+                customClasses={{
+                  results: 'list-selector',
+                  input: TYPEAHEAD_INPUT_CLASS,
+                  listItem: 'list__item'
+                }}
+                placeholder={
+                  typeaheadPlaceholder || intl
+                    ? intl.formatMessage({id: 'placeholder.search'})
+                    : 'Search'
+                }
+                selectedItems={null}
+                options={options}
+                displayOption={Accessor.generateOptionToStringFor('label')}
+                filterOption={'label'}
+                searchable
+                onOptionSelected={toggleSelectedOption}
+                customListItemComponent={ListItem}
+              />
+            </DropdownContainer>
+          </AddLayerMenu>
+        }
+      >
+        <Button
+          tabIndex={-1}
+          onBlur={onButtonBlur}
+          className="add-layer-button"
+          width="105px"
+          onClick={toggleAddLayerDropdown}
+        >
+          <Add height="12px" />
+          <FormattedMessage id={'layerManager.addLayer'} />
+        </Button>
+      </Tippy>
+    );
+  };
+
+  return AddLayerButton;
+}
+
+export default AddLayerButtonFactory;

package/src/components/side-panel/layer-panel/color-dimension-scale-selector.js

@@ -1,4 +1,4 @@
-// Copyright (c) 2022 Uber Technologies, Inc.
+// Copyright (c) 2021 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

package/src/components/side-panel/layer-panel/color-palette.tsx

@@ -0,0 +1,98 @@
+// 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, {ReactNode} from 'react';
+import {HexColor, RGBColor} from 'reducers';
+import styled from 'styled-components';
+import classnames from 'classnames';
+
+type ColorPaletteProps = {
+  colors: RGBColor | HexColor[];
+  height?: number;
+  className?: string;
+  isSelected?: boolean;
+  isReversed?: boolean;
+  children?: ReactNode;
+  rootProps?: any
+};
+
+const defaultProps = {
+  height: 10,
+  colors: [],
+  className: '',
+  isSelected: false,
+  isReversed: false
+};
+
+const PaletteWrapper = styled.div.attrs({
+  className: 'color-range-palette__inner'
+})`
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: space-between;
+  overflow: hidden;
+`;
+
+const PaletteContainer = styled.div.attrs(props => ({
+  className: classnames('color-range-palette', props.className)
+}))<{isSelected?: boolean}>`
+  display: flex;
+  flex-grow: 1;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${props => (props.isSelected ? '#FFFFFF' : 'transparent')};
+  padding: 4px;
+  border-radius: 4px;
+`;
+
+const StyledColorBlock = styled.div.attrs({
+  className: 'color-range-palette__block'
+})`
+  flex-grow: 1;
+`;
+
+const ColorPalette: React.FC<ColorPaletteProps> = ({
+  colors,
+  height,
+  className,
+  isSelected,
+  isReversed,
+  children,
+  rootProps
+}) => (
+  <PaletteContainer 
+    className={className} 
+    isSelected={isSelected}
+    {...(Boolean(rootProps) && rootProps)}
+  >
+    <PaletteWrapper style={{height, transform: `scale(${isReversed ? -1 : 1}, 1)`}}>
+      {colors.map((color: number | string, index: number) => (
+        <StyledColorBlock key={`${color}-${index}`} style={{backgroundColor: String(color)}} />
+      ))}
+    </PaletteWrapper>
+    {Boolean(children) && children}
+  </PaletteContainer>
+);
+
+ColorPalette.defaultProps = defaultProps;
+
+export default ColorPalette;