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

package/src/components/filters/filter-panels/single-select-filter-panel.js

@@ -0,0 +1,75 @@
+// 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} from 'react';
+import SingleSelectFilterFactory from 'components/filters/single-select-filter';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+
+SingleSelectFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, SingleSelectFilterFactory];
+
+function SingleSelectFilterPanelFactory(FieldPanelWithFieldSelect, SingleSelectFilter) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const SingleSelectFilterPanel = React.memo(
+    ({
+      idx,
+      datasets,
+      allAvailableFields,
+      filter,
+      isAnyFilterAnimating,
+      enlargeFilter,
+      setFilter,
+      removeFilter,
+      toggleAnimation
+    }) => {
+      const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
+
+      return (
+        <div className="single-select-filter-panel">
+          <FieldPanelWithFieldSelect
+            allAvailableFields={allAvailableFields}
+            datasets={datasets}
+            filter={filter}
+            idx={idx}
+            removeFilter={removeFilter}
+            setFilter={setFilter}
+          >
+            {filter.type && !filter.enlarged && (
+              <div className="filter-panel__filter">
+                <SingleSelectFilter
+                  filter={filter}
+                  idx={idx}
+                  isAnyFilterAnimating={isAnyFilterAnimating}
+                  toggleAnimation={toggleAnimation}
+                  setFilter={onSetFilter}
+                />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </div>
+      );
+    }
+  );
+
+  SingleSelectFilterPanel.displayName = 'SingleSelectFilterPanel';
+
+  return SingleSelectFilterPanel;
+}
+
+export default SingleSelectFilterPanelFactory;

package/src/components/filters/filter-panels/time-range-filter-panel.js

@@ -0,0 +1,95 @@
+// 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 TimeRangeFilterFactory from 'components/filters/time-range-filter';
+import {Clock} from 'components/common/icons';
+import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
+import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+
+TimeRangeFilterPanelFactory.deps = [
+  FieldPanelWithFieldSelectFactory,
+  TimeRangeFilterFactory,
+  SourceDataSelectorFactory
+];
+
+function TimeRangeFilterPanelFactory(FieldPanelWithFieldSelect, TimeRangeFilter) {
+  /** @type {import('./filter-panel-types').FilterPanelComponent} */
+  const TimeRangeFilterPanel = React.memo(
+    ({
+      idx,
+      datasets,
+      allAvailableFields,
+      filter,
+      isAnyFilterAnimating,
+      enlargeFilter,
+      setFilter,
+      removeFilter,
+      toggleAnimation
+    }) => {
+      const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
+
+      const panelActions = useMemo(
+        () => [
+          {
+            id: filter.id,
+            onClick: enlargeFilter,
+            tooltip: 'tooltip.timePlayback',
+            iconComponent: Clock,
+            active: filter.enlarged
+          }
+        ],
+        [filter.id, filter.enlarged, enlargeFilter]
+      );
+
+      return (
+        <>
+          <FieldPanelWithFieldSelect
+            allAvailableFields={allAvailableFields}
+            datasets={datasets}
+            filter={filter}
+            idx={idx}
+            removeFilter={removeFilter}
+            setFilter={setFilter}
+            panelActions={panelActions}
+          >
+            {filter.type && !filter.enlarged && (
+              <div className="filter-panel__filter">
+                <TimeRangeFilter
+                  filter={filter}
+                  idx={idx}
+                  isAnyFilterAnimating={isAnyFilterAnimating}
+                  toggleAnimation={toggleAnimation}
+                  setFilter={onSetFilter}
+                />
+              </div>
+            )}
+          </FieldPanelWithFieldSelect>
+        </>
+      );
+    }
+  );
+
+  TimeRangeFilterPanel.displayName = 'TimeRangeFilterPanel';
+
+  return TimeRangeFilterPanel;
+}
+
+export default TimeRangeFilterPanelFactory;

package/src/components/filters/index.js

@@ -0,0 +1,25 @@
+// 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.
+
+export {default as SingleSelectFilter} from './single-select-filter';
+export {default as MultiSelectFilter} from './multi-select-filter';
+export {default as TimeRangeFilter} from './time-range-filter';
+export {default as RangeFilter} from './range-filter';
+export {default as PolygonFilter} from './polygon-filter';

package/src/components/filters/multi-select-filter.js

@@ -0,0 +1,36 @@
+// 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 ItemSelector from '../common/item-selector/item-selector';
+import {PanelLabel} from '../common/styled-components';
+import {FormattedMessage} from 'localization';
+
+export default function MultiSelectFilterFactory() {
+  const MultiSelectFilter = ({filter, setFilter}) => (
+    <div>
+      <PanelLabel htmlFor={`filter-${filter.id}`}>
+        <FormattedMessage id={'misc.valuesIn'} />
+      </PanelLabel>
+      <ItemSelector options={filter.domain} selectedItems={filter.value} onChange={setFilter} />
+    </div>
+  );
+  return MultiSelectFilter;
+}

package/src/components/filters/polygon-filter.d.ts

@@ -0,0 +1,13 @@
+import {FunctionComponent} from 'react';
+import {Filter} from 'reducers';
+import {Layer} from 'layers';
+
+export type PolygonFilterProps = {
+  filter: Filter,
+  layers: ReadonlyArray<Layer>,
+  setLayers: (ids: ReadonlyArray<string>) => void
+};
+
+export const PolygonFilter: FunctionComponent<PolygonFilterProps>;
+
+export default function PolygonFilterFactory(): PolygonFilter;

package/src/components/filters/polygon-filter.js

@@ -0,0 +1,73 @@
+// 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, {useMemo, useCallback} from 'react';
+import ItemSelector from 'components/common/item-selector/item-selector';
+import {StyledFilterPanel} from './components';
+import {LAYER_TYPES} from 'layers/types';
+
+const layerFilter = layer => layer.type === LAYER_TYPES.point;
+const isAlreadySelected = (selectedLayers, layerId) =>
+  selectedLayers.findIndex(l => l.id === layerId) === -1;
+
+function PolygonFilterFactory() {
+  /** @type {typeof import('./polygon-filter').PolygonFilter} */
+  const PolygonFilter = React.memo(({filter, layers, setLayers}) => {
+    const setNewLayers = useCallback(
+      newLayers => {
+        return setLayers(newLayers.map(l => l.id));
+      },
+      [setLayers]
+    );
+
+    const selectedLayers = useMemo(() => layers.filter(l => filter.layerId?.includes(l.id)), [
+      filter,
+      layers
+    ]);
+
+    const availableLayers = useMemo(() => {
+      // remove already added layers and filter out non point layers
+      return layers.filter(
+        layer => layerFilter(layer) && isAlreadySelected(selectedLayers, layer.id)
+      );
+    }, [layers, selectedLayers]);
+
+    return (
+      <div>
+        <StyledFilterPanel htmlFor={`filter-${filter.id}`}>Layers:</StyledFilterPanel>
+        <ItemSelector
+          options={availableLayers}
+          selectedItems={selectedLayers}
+          onChange={setNewLayers}
+          searchable={false}
+          multiSelect={true}
+          getOptionValue={l => l.id}
+          displayOption={l => l.config.label}
+        />
+      </div>
+    );
+  });
+
+  PolygonFilter.displayName = 'PolygonFilter';
+
+  return PolygonFilter;
+}
+
+export default PolygonFilterFactory;

package/src/components/filters/range-filter.js

@@ -0,0 +1,43 @@
+// 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';
+
+RangeFilterFactory.deps = [RangeSliderFactory];
+
+export default function RangeFilterFactory(RangeSlider) {
+  const RangeFilter = ({filter, setFilter}) => (
+    <div>
+      <RangeSlider
+        range={filter.domain}
+        value0={filter.value[0]}
+        value1={filter.value[1]}
+        step={filter.step}
+        histogram={filter.histogram}
+        isEnlarged={filter.isEnlarged}
+        onChange={setFilter}
+        inputTheme="secondary"
+      />
+    </div>
+  );
+
+  return RangeFilter;
+}

package/src/components/filters/single-select-filter.js

@@ -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 React from 'react';
+import ItemSelector from '../common/item-selector/item-selector';
+import {PanelLabel, SidePanelSection} from '../common/styled-components';
+import {FormattedMessage} from 'localization';
+
+export default function SingleSelectFilterFactory() {
+  const SingleSelectFilter = ({filter, setFilter}) => (
+    <SidePanelSection>
+      <PanelLabel>
+        <FormattedMessage id={'misc.valueEquals'} />
+      </PanelLabel>
+      <ItemSelector
+        selectedItems={filter.value}
+        placeholder="placeholder.selectValue"
+        options={filter.domain}
+        multiSelect={false}
+        searchable={false}
+        displayOption={d => String(d)}
+        getOptionValue={d => d}
+        onChange={setFilter}
+        inputTheme="secondary"
+      />
+    </SidePanelSection>
+  );
+
+  SingleSelectFilter.displayName = 'SingleSelectFilter';
+
+  return SingleSelectFilter;
+}

package/src/components/filters/time-range-filter.js

@@ -0,0 +1,68 @@
+// 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 TimeRangeSliderFactory from 'components/common/time-range-slider';
+import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+
+/*
+ * TimeRangeFilter -> TimeRangeSlider -> RangeSlider
+ */
+export function timeRangeSliderFieldsSelector(filter) {
+  const hasUserFormat = typeof filter.timeFormat === 'string';
+  const timeFormat =
+    (hasUserFormat ? filter.timeFormat : filter.defaultTimeFormat) || DEFAULT_TIME_FORMAT;
+
+  return {
+    id: filter.id,
+    domain: filter.domain,
+    bins: filter.bins,
+    value: filter.value,
+    plotType: filter.plotType,
+    lineChart: filter.lineChart,
+    yAxis: filter.yAxis,
+    step: filter.step,
+    speed: filter.speed,
+    histogram: filter.enlarged ? filter.enlargedHistogram : filter.histogram,
+    isEnlarged: filter.enlarged,
+    animationWindow: filter.animationWindow,
+    isAnimating: filter.isAnimating,
+    timezone: filter.timezone,
+    timeFormat
+  };
+}
+
+TimeRangeFilterFactory.deps = [TimeRangeSliderFactory];
+
+function TimeRangeFilterFactory(TimeRangeSlider) {
+  const TimeRangeFilter = ({filter, setFilter, isAnimatable, toggleAnimation, hideTimeTitle}) => (
+    <TimeRangeSlider
+      {...timeRangeSliderFieldsSelector(filter)}
+      onChange={setFilter}
+      toggleAnimation={toggleAnimation}
+      isAnimatable={isAnimatable}
+      hideTimeTitle={hideTimeTitle}
+    />
+  );
+
+  return TimeRangeFilter;
+}
+
+export default TimeRangeFilterFactory;