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

package/src/components/filters/time-widget.js

@@ -0,0 +1,228 @@
+// 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 styled from 'styled-components';
+import {
+  SelectTextBold,
+  IconRoundSmall,
+  CenterFlexbox,
+  BottomWidgetInner
+} from 'components/common/styled-components';
+import {Close, Clock, LineChart} from 'components/common/icons';
+import TimeRangeSliderFactory from 'components/common/time-range-slider';
+import FieldSelectorFactory from 'components/common/field-selector';
+import FloatingTimeDisplayFactory from 'components/common/animation-control/floating-time-display';
+import {timeRangeSliderFieldsSelector} from './time-range-filter';
+
+const TOP_SECTION_HEIGHT = '36px';
+
+const TimeBottomWidgetInner = styled(BottomWidgetInner)`
+  padding: 6px 32px 24px 32px;
+`;
+const TopSectionWrapper = styled.div.attrs({
+  className: 'time-widget--top'
+})`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  color: ${props => props.theme.labelColor};
+  height: ${TOP_SECTION_HEIGHT};
+
+  .bottom-widget__y-axis {
+    flex-grow: 1;
+    margin-left: 20px;
+  }
+
+  .bottom-widget__field-select {
+    width: 160px;
+    display: inline-block;
+
+    .item-selector__dropdown {
+      background: transparent;
+      padding: 4px 10px 4px 4px;
+      border-color: transparent;
+
+      :active,
+      :focus,
+      &.focus,
+      &.active {
+        background: transparent;
+        border-color: transparent;
+      }
+    }
+
+    .item-selector__dropdown:hover {
+      background: transparent;
+      border-color: transparent;
+
+      .item-selector__dropdown__value {
+        color: ${props =>
+          props.hoverColor ? props.theme[props.hoverColor] : props.theme.textColorHl};
+      }
+    }
+  }
+
+  .animation-control__speed-control {
+    margin-right: -12px;
+
+    .animation-control__speed-slider {
+      right: calc(0% - 48px);
+    }
+  }
+`;
+
+const StyledTitle = styled(CenterFlexbox)`
+  flex-grow: 0;
+  color: ${props => props.theme.textColor};
+  margin-right: 10px;
+
+  .bottom-widget__icon {
+    margin-right: 6px;
+  }
+  .bottom-widget__icon.speed {
+    margin-right: 0;
+  }
+`;
+
+TimeWidgetTopFactory.deps = [FieldSelectorFactory];
+export function TimeWidgetTopFactory(FieldSelector) {
+  const TimeWidgetTop = ({filter, readOnly, datasets, setFilterPlot, index, onClose}) => {
+    const yAxisFields = useMemo(
+      () =>
+        ((datasets[filter.dataId[0]] || {}).fields || []).filter(
+          f => f.type === 'integer' || f.type === 'real'
+        ),
+      [datasets, filter.dataId]
+    );
+    const _setFilterPlotYAxis = useCallback(value => setFilterPlot(index, {yAxis: value}), [
+      setFilterPlot,
+      index
+    ]);
+    return (
+      <TopSectionWrapper>
+        <StyledTitle className="bottom-widget__field">
+          <CenterFlexbox className="bottom-widget__icon">
+            <Clock height="15px" />
+          </CenterFlexbox>
+          <SelectTextBold>{filter.name}</SelectTextBold>
+        </StyledTitle>
+        <StyledTitle className="bottom-widget__y-axis">
+          <CenterFlexbox className="bottom-widget__icon">
+            <LineChart height="15px" />
+          </CenterFlexbox>
+          <div className="bottom-widget__field-select">
+            <FieldSelector
+              fields={yAxisFields}
+              placement="top"
+              id="selected-time-widget-field"
+              value={filter.yAxis ? filter.yAxis.name : null}
+              onSelect={_setFilterPlotYAxis}
+              placeholder="placeholder.yAxis"
+              erasable
+              showToken={false}
+            />
+          </div>
+        </StyledTitle>
+        {!readOnly ? (
+          <CenterFlexbox>
+            <IconRoundSmall>
+              <Close height="12px" onClick={onClose} />
+            </IconRoundSmall>
+          </CenterFlexbox>
+        ) : null}
+      </TopSectionWrapper>
+    );
+  };
+  return TimeWidgetTop;
+}
+
+TimeWidgetFactory.deps = [TimeRangeSliderFactory, FloatingTimeDisplayFactory, TimeWidgetTopFactory];
+function TimeWidgetFactory(TimeRangeSlider, FloatingTimeDisplay, TimeWidgetTop) {
+  const TimeWidget = ({
+    datasets,
+    filter,
+    index,
+    readOnly,
+    showTimeDisplay,
+    setFilterAnimationTime,
+    resetAnimation,
+    isAnimatable,
+    updateAnimationSpeed,
+    toggleAnimation,
+    enlargeFilter,
+    setFilterPlot,
+    setFilterAnimationWindow
+  }) => {
+    const _updateAnimationSpeed = useCallback(speed => updateAnimationSpeed(index, speed), [
+      updateAnimationSpeed,
+      index
+    ]);
+
+    const _toggleAnimation = useCallback(() => toggleAnimation(index), [toggleAnimation, index]);
+
+    const _onClose = useCallback(() => enlargeFilter(index), [enlargeFilter, index]);
+
+    const _setFilterAnimationWindow = useCallback(
+      animationWindow => setFilterAnimationWindow({id: filter.id, animationWindow}),
+      [setFilterAnimationWindow, filter.id]
+    );
+
+    const timeSliderOnChange = useCallback(value => setFilterAnimationTime(index, 'value', value), [
+      setFilterAnimationTime,
+      index
+    ]);
+
+    return (
+      <TimeBottomWidgetInner className="bottom-widget--inner">
+        <TimeWidgetTop
+          filter={filter}
+          readOnly={readOnly}
+          datasets={datasets}
+          setFilterPlot={setFilterPlot}
+          index={index}
+          onClose={_onClose}
+        />
+        <TimeRangeSlider
+          {...timeRangeSliderFieldsSelector(filter)}
+          onChange={timeSliderOnChange}
+          toggleAnimation={_toggleAnimation}
+          updateAnimationSpeed={_updateAnimationSpeed}
+          setFilterAnimationWindow={_setFilterAnimationWindow}
+          hideTimeTitle={showTimeDisplay}
+          resetAnimation={resetAnimation}
+          isAnimatable={isAnimatable}
+        />
+        {showTimeDisplay ? (
+          <FloatingTimeDisplay
+            currentTime={filter.value}
+            defaultTimeFormat={filter.defaultTimeFormat}
+            timeFormat={filter.timeFormat}
+            timezone={filter.timezone}
+          />
+        ) : null}
+      </TimeBottomWidgetInner>
+    );
+  };
+
+  return React.memo(TimeWidget);
+}
+
+export default TimeWidgetFactory;

package/src/components/geocoder/geocoder.d.ts

@@ -0,0 +1,33 @@
+import {FunctionComponent} from 'react';
+import {Viewport} from 'reducers/map-state-updaters';
+import {IntlShape} from 'react-intl';
+
+interface Result {
+  center: [number, number],
+  place_name: string
+}
+
+export type Results = ReadonlyArray<Result>;
+
+type GeocoderProps = {
+  mapboxApiAccessToken: string,
+  className?: string,
+  limit?: number,
+  timeout?: number,
+  formatItem?: (item: Result) => string,
+  viewport: Viewport,
+  onSelected: (viewport: Viewport, item: Result) => void,
+  onDeleteMarker: () => void,
+  transitionDuration: number,
+  pointZoom: number,
+  width: number
+};
+
+type IntlProps = {
+  intl: IntlShape
+};
+
+export type GeocoderComponent = FunctionComponent<GeocoderPropsProps & IntlProps>;
+
+const Geocoder: FunctionComponent<GeocoderPropsProps>;
+export default Geocoder;

package/src/components/geocoder/geocoder.js

@@ -0,0 +1,272 @@
+// 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 classnames from 'classnames';
+import MapboxClient from 'mapbox';
+import {injectIntl} from 'react-intl';
+import {WebMercatorViewport} from 'viewport-mercator-project';
+import KeyEvent from 'constants/keyevent';
+import {Input} from 'components/common/styled-components';
+import {Search, Delete} from 'components/common/icons';
+
+// matches only valid coordinates
+const COORDINATE_REGEX_STRING =
+  '^[-+]?([1-8]?\\d(\\.\\d+)?|90(\\.0+)?),\\s*[-+]?(180(\\.0+)?|((1[0-7]\\d)|([1-9]?\\d))(\\.\\d+)?)';
+const COORDINATE_REGEX = RegExp(COORDINATE_REGEX_STRING);
+
+const PLACEHOLDER = 'Enter an address or coordinates, ex 37.79,-122.40';
+
+let debounceTimeout = null;
+
+export const testForCoordinates = query => {
+  const isValid = COORDINATE_REGEX.test(query.trim());
+
+  if (!isValid) {
+    return [isValid, query];
+  }
+
+  const tokens = query.trim().split(',');
+
+  return [isValid, Number(tokens[0]), Number(tokens[1])];
+};
+
+const StyledContainer = styled.div`
+  position: relative;
+  color: ${props => props.theme.textColor};
+
+  .geocoder-input {
+    box-shadow: ${props => props.theme.boxShadow};
+
+    .geocoder-input__search {
+      position: absolute;
+      height: ${props => props.theme.geocoderInputHeight}px;
+      width: 30px;
+      padding-left: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${props => props.theme.subtextColor};
+    }
+
+    input {
+      padding: 4px 36px;
+      height: ${props => props.theme.geocoderInputHeight}px;
+      caret-color: unset;
+    }
+  }
+
+  .geocoder-results {
+    box-shadow: ${props => props.theme.boxShadow};
+    background-color: ${props => props.theme.panelBackground};
+    position: absolute;
+    width: ${props => (Number.isFinite(props.width) ? props.width : props.theme.geocoderWidth)}px;
+    margin-top: ${props => props.theme.dropdownWapperMargin}px;
+  }
+
+  .geocoder-item {
+    ${props => props.theme.dropdownListItem};
+    ${props => props.theme.textTruncate};
+
+    &.active {
+      background-color: ${props => props.theme.dropdownListHighlightBg};
+    }
+  }
+
+  .remove-result {
+    position: absolute;
+    right: 16px;
+    top: 0px;
+    height: ${props => props.theme.geocoderInputHeight}px;
+    display: flex;
+    align-items: center;
+
+    :hover {
+      cursor: pointer;
+      color: ${props => props.theme.textColorHl};
+    }
+  }
+`;
+
+/** @type {import('./geocoder').GeocoderComponent} */
+const GeoCoder = ({
+  mapboxApiAccessToken,
+  className = '',
+  limit = 5,
+  timeout = 300,
+  formatItem = item => item.place_name,
+  viewport,
+  onSelected,
+  onDeleteMarker,
+  transitionDuration,
+  pointZoom,
+  width,
+  intl
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  const [showResults, setShowResults] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+  /** @type {import('./geocoder').Results} */
+  const initialResults = [];
+  const [results, setResults] = useState(initialResults);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const client = useMemo(() => new MapboxClient(mapboxApiAccessToken), [mapboxApiAccessToken]);
+
+  const onChange = useCallback(
+    event => {
+      const queryString = event.target.value;
+      setInputValue(queryString);
+      const [hasValidCoordinates, longitude, latitude] = testForCoordinates(queryString);
+      if (hasValidCoordinates) {
+        setResults([{center: [latitude, longitude], place_name: queryString}]);
+      } else {
+        clearTimeout(debounceTimeout);
+        debounceTimeout = setTimeout(async () => {
+          if (limit > 0 && Boolean(queryString)) {
+            try {
+              const response = await client.geocodeForward(queryString, {limit});
+              if (response.entity.features) {
+                setShowResults(true);
+                setResults(response.entity.features);
+              }
+            } catch (e) {
+              // TODO: show geocode error
+              // eslint-disable-next-line no-console
+              console.log(e);
+            }
+          }
+        }, timeout);
+      }
+    },
+    [client, limit, timeout, setResults, setShowResults]
+  );
+
+  const onBlur = useCallback(() => {
+    setTimeout(() => {
+      setShowResults(false);
+    }, timeout);
+  }, [setShowResults, timeout]);
+
+  const onFocus = useCallback(() => setShowResults(true), [setShowResults]);
+
+  const onItemSelected = useCallback(
+    item => {
+      let newViewport = new WebMercatorViewport(viewport);
+      const {bbox, center} = item;
+
+      newViewport = bbox
+        ? newViewport.fitBounds([
+            [bbox[0], bbox[1]],
+            [bbox[2], bbox[3]]
+          ])
+        : {
+            longitude: center[0],
+            latitude: center[1],
+            zoom: pointZoom
+          };
+
+      const {longitude, latitude, zoom} = newViewport;
+
+      onSelected({...viewport, ...{longitude, latitude, zoom, transitionDuration}}, item);
+
+      setShowResults(false);
+      setInputValue(formatItem(item));
+      setShowDelete(true);
+    },
+    [viewport, onSelected, transitionDuration, pointZoom, formatItem]
+  );
+
+  const onMarkDeleted = useCallback(() => {
+    setShowDelete(false);
+    setInputValue('');
+    onDeleteMarker();
+  }, [onDeleteMarker]);
+
+  const onKeyDown = useCallback(
+    e => {
+      if (!results || results.length === 0) {
+        return;
+      }
+      switch (e.keyCode) {
+        case KeyEvent.DOM_VK_UP:
+          setSelectedIndex(selectedIndex > 0 ? selectedIndex - 1 : selectedIndex);
+          break;
+        case KeyEvent.DOM_VK_DOWN:
+          setSelectedIndex(selectedIndex < results.length - 1 ? selectedIndex + 1 : selectedIndex);
+          break;
+        case KeyEvent.DOM_VK_ENTER:
+        case KeyEvent.DOM_VK_RETURN:
+          if (results[selectedIndex]) {
+            onItemSelected(results[selectedIndex]);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [results, selectedIndex, setSelectedIndex, onItemSelected]
+  );
+
+  return (
+    <StyledContainer className={className} width={width}>
+      <div className="geocoder-input">
+        <div className="geocoder-input__search">
+          <Search height="20px" />
+        </div>
+        <Input
+          type="text"
+          onChange={onChange}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          onKeyDown={onKeyDown}
+          value={inputValue}
+          placeholder={
+            intl
+              ? intl.formatMessage({id: 'geocoder.title', defaultMessage: PLACEHOLDER})
+              : PLACEHOLDER
+          }
+        />
+        {showDelete ? (
+          <div className="remove-result">
+            <Delete height="12px" onClick={onMarkDeleted} />
+          </div>
+        ) : null}
+      </div>
+
+      {showResults ? (
+        <div className="geocoder-results">
+          {results.map((item, index) => (
+            <div
+              key={index}
+              className={classnames('geocoder-item', {active: selectedIndex === index})}
+              onClick={() => onItemSelected(item)}
+            >
+              {formatItem(item)}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </StyledContainer>
+  );
+};
+
+export default injectIntl(GeoCoder);