@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/side-panel/custom-panel.js

@@ -0,0 +1,50 @@
+// 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';
+
+// This is a dummy component that can be replaced to inject more side panel sub panels into the side bar
+function CustomPanelsFactory() {
+  const CustomPanels = props => {
+    return <div />;
+  };
+
+  CustomPanels.defaultProps = {
+    // provide a list of additional panels
+    panels: [
+      // {
+      //   id: 'rocket',
+      //   label: 'Rocket',
+      //   iconComponent: Icons.Rocket
+      // },
+      // {
+      //   id: 'chart',
+      //   label: 'Chart',
+      //   iconComponent: Icons.LineChart
+      // }
+    ],
+    // prop selector from side panel props
+    getProps: sidePanelProps => ({})
+  };
+
+  return CustomPanels;
+}
+
+export default CustomPanelsFactory;

package/src/components/side-panel/filter-manager.js

@@ -0,0 +1,105 @@
+// 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} from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'localization';
+import {Button, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
+import {Add} from 'components/common/icons';
+import SourceDataCatalogFactory from './common/source-data-catalog';
+import FilterPanelFactory from './filter-panel/filter-panel';
+
+FilterManagerFactory.deps = [SourceDataCatalogFactory, FilterPanelFactory];
+
+function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
+  const FilterManager = ({filters = [], datasets, layers, showDatasetTable, visStateActions}) => {
+    const {
+      addFilter,
+      enlargeFilter,
+      removeFilter,
+      setFilter,
+      toggleAnimation,
+      toggleFilterFeature
+    } = visStateActions;
+    const isAnyFilterAnimating = filters.some(f => f.isAnimating);
+    const hadEmptyFilter = filters.some(f => !f.name);
+    const hadDataset = Object.keys(datasets).length;
+    const onClickAddFilter = useCallback(() => {
+      const defaultDataset = (Object.keys(datasets).length && Object.keys(datasets)[0]) || null;
+      addFilter(defaultDataset);
+    }, [datasets, addFilter]);
+    // render last added filter first
+    const reversedIndex = useMemo(() => {
+      return new Array(filters.length)
+        .fill(0)
+        .map((d, i) => i)
+        .reverse();
+    }, [filters.length]);
+
+    return (
+      <div className="filter-manager">
+        <SourceDataCatalog datasets={datasets} showDatasetTable={showDatasetTable} />
+        <SidePanelDivider />
+        <SidePanelSection>
+          {reversedIndex.map(idx => (
+            <FilterPanel
+              key={`${filters[idx].id}-${idx}`}
+              idx={idx}
+              filters={filters}
+              filter={filters[idx]}
+              datasets={datasets}
+              layers={layers}
+              isAnyFilterAnimating={isAnyFilterAnimating}
+              removeFilter={() => removeFilter(idx)}
+              enlargeFilter={() => enlargeFilter(idx)}
+              toggleAnimation={() => toggleAnimation(idx)}
+              toggleFilterFeature={() => toggleFilterFeature(idx)}
+              setFilter={setFilter}
+            />
+          ))}
+        </SidePanelSection>
+        <Button
+          className="add-filter-button"
+          inactive={hadEmptyFilter || !hadDataset}
+          width="105px"
+          onClick={onClickAddFilter}
+        >
+          <Add height="12px" />
+          <FormattedMessage id={'filterManager.addFilter'} />
+        </Button>
+      </div>
+    );
+  };
+
+  FilterManager.propTypes = {
+    datasets: PropTypes.object,
+    layers: PropTypes.arrayOf(PropTypes.any).isRequired,
+    filters: PropTypes.arrayOf(PropTypes.any).isRequired,
+    showDatasetTable: PropTypes.func.isRequired,
+    visStateActions: PropTypes.object.isRequired,
+
+    // fields can be undefined when dataset is not selected
+    fields: PropTypes.arrayOf(PropTypes.any)
+  };
+
+  return FilterManager;
+}
+
+export default FilterManagerFactory;

package/src/components/side-panel/filter-panel/filter-panel-header.js

@@ -0,0 +1,83 @@
+// 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 PanelHeaderActionFactory from 'components/side-panel/panel-header-action';
+import {Trash} from 'components/common/icons';
+import {createLinearGradient} from 'utils/color-utils';
+import {StyledPanelHeader} from 'components/common/styled-components';
+
+export const StyledFilterHeader = styled(StyledPanelHeader)`
+  cursor: pointer;
+  padding: 10px 12px;
+
+  .field-selector {
+    flex: 2;
+  }
+
+  border-left: 3px solid;
+  ${props =>
+    props.labelRCGColorValues && props.labelRCGColorValues.length > 0
+      ? `border-image: ${createLinearGradient('bottom', props.labelRCGColorValues)} 3;`
+      : 'border-color: transparent;'};
+`;
+
+const StyledChildrenContainer = styled.div`
+  display: flex;
+  flex: 2;
+`;
+
+FilterPanelHeaderFactory.deps = [PanelHeaderActionFactory];
+
+function FilterPanelHeaderFactory(PanelHeaderAction) {
+  const defaultActionIcons = {
+    delete: Trash
+  };
+  const FilterPanelHeader = ({
+    children,
+    datasets,
+    allAvailableFields,
+    setFilter,
+    idx,
+    filter,
+    removeFilter,
+    actionIcons = defaultActionIcons
+  }) => (
+    <StyledFilterHeader
+      className="filter-panel__header"
+      labelRCGColorValues={datasets.map(d => d.color)}
+    >
+      <StyledChildrenContainer>{children}</StyledChildrenContainer>
+      <PanelHeaderAction
+        id={filter.id}
+        tooltip="tooltip.delete"
+        tooltipType="error"
+        onClick={removeFilter}
+        hoverColor={'errorColor'}
+        IconComponent={actionIcons.delete}
+      />
+    </StyledFilterHeader>
+  );
+
+  return FilterPanelHeader;
+}
+
+export default FilterPanelHeaderFactory;

package/src/components/side-panel/filter-panel/filter-panel.js

@@ -0,0 +1,126 @@
+// 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} from 'react';
+import PropTypes from 'prop-types';
+import {createSelector} from 'reselect';
+import styled from 'styled-components';
+import get from 'lodash.get';
+import {ALL_FIELD_TYPES, FILTER_TYPES} from 'constants/default-settings';
+
+import NewFilterPanelFactory from 'components/filters/filter-panels/new-filter-panel';
+import TimeRangeFilterPanelFactory from 'components/filters/filter-panels/time-range-filter-panel';
+import SingleSelectFilterPanelFactory from 'components/filters/filter-panels/single-select-filter-panel';
+import MultiSelectFilterPanelFactory from 'components/filters/filter-panels/multi-select-filter-panel';
+import RangeFilterPanelFactory from 'components/filters/filter-panels/range-filter-panel';
+import PolygonFilterPanelFactory from 'components/filters/filter-panels/polygon-filter-panel';
+
+const StyledFilterPanel = styled.div`
+  margin-bottom: 12px;
+  border-radius: 1px;
+`;
+
+FilterPanelFactory.deps = [
+  NewFilterPanelFactory,
+  TimeRangeFilterPanelFactory,
+  SingleSelectFilterPanelFactory,
+  MultiSelectFilterPanelFactory,
+  RangeFilterPanelFactory,
+  PolygonFilterPanelFactory
+];
+
+function FilterPanelFactory(
+  NewFilterPanel,
+  TimeRangeFilterPanel,
+  SingleSelectFilterPanel,
+  MultiSelectFilterPanel,
+  RangeFilterPanel,
+  PolygonFilterPanel
+) {
+  const FilterPanelComponents = {
+    default: NewFilterPanel,
+    [FILTER_TYPES.timeRange]: TimeRangeFilterPanel,
+    [FILTER_TYPES.select]: SingleSelectFilterPanel,
+    [FILTER_TYPES.multiSelect]: MultiSelectFilterPanel,
+    [FILTER_TYPES.range]: RangeFilterPanel,
+    [FILTER_TYPES.polygon]: PolygonFilterPanel
+  };
+
+  return class FilterPanel extends Component {
+    static propTypes = {
+      idx: PropTypes.number,
+      filters: PropTypes.arrayOf(PropTypes.any).isRequired,
+      filter: PropTypes.object.isRequired,
+      setFilter: PropTypes.func.isRequired,
+      removeFilter: PropTypes.func.isRequired,
+      enlargeFilter: PropTypes.func.isRequired,
+      toggleAnimation: PropTypes.func.isRequired,
+      toggleFilterFeature: PropTypes.func.isRequired,
+      datasets: PropTypes.object,
+      showDatasetTable: PropTypes.func,
+      isAnyFilterAnimating: PropTypes.bool
+    };
+
+    /* selectors */
+    fieldsSelector = props => {
+      const datasetId = props.filter.dataId[0];
+      if (!datasetId) {
+        return [];
+      }
+      return get(props, ['datasets', datasetId, 'fields'], []);
+    };
+
+    filterSelector = props => props.filters;
+    nameSelector = props => props.filter.name;
+    dataIdSelector = props => props.filter.dataId[0];
+
+    // only show current field and field that's not already been used as a filter
+    availableFieldsSelector = createSelector(
+      this.fieldsSelector,
+      this.filterSelector,
+      this.nameSelector,
+      this.dataIdSelector,
+      (fields, filters, name, dataId) =>
+        fields.filter(
+          f =>
+            f.type &&
+            f.type !== ALL_FIELD_TYPES.geojson &&
+            (f.name === name || !filters.find(d => d.name === f.name && d.dataId === dataId))
+        )
+    );
+
+    render() {
+      const {filter} = this.props;
+
+      const {type} = filter;
+      const FilterFilterComponent =
+        (type && FilterPanelComponents[type]) || FilterPanelComponents.default;
+      const allAvailableFields = this.availableFieldsSelector(this.props);
+
+      return (
+        <StyledFilterPanel className="filter-panel">
+          <FilterFilterComponent allAvailableFields={allAvailableFields} {...this.props} />
+        </StyledFilterPanel>
+      );
+    }
+  };
+}
+
+export default FilterPanelFactory;

package/src/components/side-panel/interaction-manager.js

@@ -0,0 +1,46 @@
+// 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 InteractionPanelFactory from './interaction-panel/interaction-panel';
+
+InteractionManagerFactory.deps = [InteractionPanelFactory];
+
+function InteractionManagerFactory(InteractionPanel) {
+  const InteractionManager = ({interactionConfig, datasets, visStateActions}) => {
+    const {interactionConfigChange: onConfigChange} = visStateActions;
+    return (
+      <div className="interaction-manager">
+        {Object.keys(interactionConfig).map(key => (
+          <InteractionPanel
+            datasets={datasets}
+            config={interactionConfig[key]}
+            key={key}
+            onConfigChange={onConfigChange}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return InteractionManager;
+}
+
+export default InteractionManagerFactory;

package/src/components/side-panel/interaction-panel/brush-config.js

@@ -0,0 +1,51 @@
+// 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 RangeSliderFactory from 'components/common/range-slider';
+
+import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
+import {BRUSH_CONFIG} from 'utils/interaction-utils';
+import {FormattedMessage} from 'localization';
+
+BrushConfigFactory.deps = [RangeSliderFactory];
+
+function BrushConfigFactory(RangeSlider) {
+  const BrushConfig = ({config, onChange}) => (
+    <SidePanelSection>
+      <PanelLabel>
+        <FormattedMessage id={'misc.brushRadius'} />
+      </PanelLabel>
+      <RangeSlider
+        range={BRUSH_CONFIG.range}
+        value0={0}
+        value1={config.size || 10 / 2}
+        step={0.1}
+        isRanged={false}
+        onChange={value => onChange({...config, size: value[1]})}
+        inputTheme="secondary"
+      />
+    </SidePanelSection>
+  );
+
+  return BrushConfig;
+}
+
+export default BrushConfigFactory;

package/src/components/side-panel/interaction-panel/interaction-panel.js

@@ -0,0 +1,115 @@
+// 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} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Switch from 'components/common/switch';
+
+import BrushConfigFactory from './brush-config';
+import TooltipConfigFactory from './tooltip-config';
+
+import {
+  StyledPanelHeader,
+  PanelHeaderTitle,
+  PanelHeaderContent,
+  PanelContent
+} from 'components/common/styled-components';
+import {FormattedMessage} from 'localization';
+
+const StyledInteractionPanel = styled.div`
+  padding-bottom: 6px;
+`;
+
+InteractionPanelFactory.deps = [TooltipConfigFactory, BrushConfigFactory];
+
+function InteractionPanelFactory(TooltipConfig, BrushConfig) {
+  return class InteractionPanel extends Component {
+    static propTypes = {
+      datasets: PropTypes.object.isRequired,
+      config: PropTypes.object.isRequired,
+      onConfigChange: PropTypes.func.isRequired
+    };
+
+    state = {isConfigActive: false};
+
+    _updateConfig = newProp => {
+      this.props.onConfigChange({
+        ...this.props.config,
+        ...newProp
+      });
+    };
+
+    _enableConfig = () => {
+      this.setState({isConfigActive: !this.state.isConfigActive});
+    };
+
+    render() {
+      const {config, datasets} = this.props;
+      const onChange = newConfig => this._updateConfig({config: newConfig});
+      let template = null;
+
+      switch (config.id) {
+        case 'tooltip':
+          template = (
+            <TooltipConfig datasets={datasets} config={config.config} onChange={onChange} />
+          );
+          break;
+
+        case 'brush':
+          template = <BrushConfig config={config.config} onChange={onChange} />;
+          break;
+
+        default:
+          break;
+      }
+
+      return (
+        <StyledInteractionPanel className="interaction-panel">
+          <StyledPanelHeader className="interaction-panel__header" onClick={this._enableConfig}>
+            <PanelHeaderContent className="interaction-panel__header__content">
+              <div className="interaction-panel__header__icon icon">
+                <config.iconComponent height="16px" />
+              </div>
+              <div className="interaction-panel__header__title">
+                <PanelHeaderTitle>
+                  <FormattedMessage id={config.label} />
+                </PanelHeaderTitle>
+              </div>
+            </PanelHeaderContent>
+            <div className="interaction-panel__header__actions">
+              <Switch
+                checked={config.enabled}
+                id={`${config.id}-toggle`}
+                onChange={() => this._updateConfig({enabled: !config.enabled})}
+                secondary
+              />
+            </div>
+          </StyledPanelHeader>
+          {config.enabled && template && (
+            <PanelContent className="interaction-panel__content">{template}</PanelContent>
+          )}
+        </StyledInteractionPanel>
+      );
+    }
+  };
+}
+
+export default InteractionPanelFactory;