@carto/kepler.gl 0.0.76 → 0.0.78-0

package/src/components/common/animation-control/floating-time-display.tsx

@@ -0,0 +1,209 @@
+// 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} from 'react';
+import styled from 'styled-components';
+import classnames from 'classnames';
+import {Minus} from 'components/common/icons';
+import {DEFAULT_TIME_FORMAT} from 'constants/default-settings';
+import {CenterFlexbox} from 'components/common/styled-components';
+import {datetimeFormatter} from 'utils/data-utils';
+
+const StyledTimeDisplayWrapper = styled.div.attrs({
+  className: 'floating-time-display'
+})`
+  bottom: ${props => `calc(100% + ${props.theme.bottomPanelGap}px)`};
+  display: flex;
+  position: absolute;
+  width: 100%;
+  margin-left: -${props => props.theme.bottomInnerPdSide}px;
+  justify-content: center;
+  pointer-events: none; /* prevent padding from blocking input */
+  & > * {
+    /* all children should allow input */
+    pointer-events: all;
+  }
+`;
+
+const StyledTimeDisplay = styled.div.attrs(props => ({
+  className: classnames('floating-time-display__inner', props.className)
+}))`
+  background-color: ${props => props.theme.panelBackground};
+  border-radius: ${props => props.theme.timeDisplayBorderRadius}px;
+  color: ${props => props.theme.titleTextColor};
+  display: flex;
+  height: ${props => props.theme.timeDisplayHeight}px;
+  justify-content: center;
+  min-width: ${props => props.theme.timeDisplayMinWidth}px;
+  opacity: ${props => props.theme.timeDisplayOpacity};
+  padding: ${props => props.theme.timeDisplayPadding};
+`;
+
+const StyledTimeDisplayGroups = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledTimeDisplayRows = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const StyledTimeDisplayTop = styled.div.attrs({
+  className: 'animation-control__time-display__top'
+})`
+  color: ${props => props.theme.textColor};
+  display: flex;
+  font-size: 12px;
+  font-weight: 500;
+  justify-content: center;
+`;
+
+const StyledTimeDisplayBottom = styled.div.attrs({
+  className: 'animation-control__time-display__bottom'
+})`
+  color: ${props => props.theme.titleTextColor};
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  justify-content: center;
+`;
+
+const StyledTimeValueGroup = styled.div.attrs({
+  className: 'animation-control__time-value-group'
+})`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledHorizontalBar = styled.div.attrs({
+  className: 'animation-control__horizontal-bar'
+})`
+  margin: 0 12px;
+`;
+
+const TimeDivider = () => (
+  <StyledHorizontalBar>
+    <Minus height="12px" />
+  </StyledHorizontalBar>
+);
+
+interface TimeDisplayRowProps {
+  timeValues?: string[];
+}
+
+const TimeDisplayRow = ({timeValues = []}: TimeDisplayRowProps) => (
+  <CenterFlexbox>
+    <div className="time-value">{timeValues[0]}</div>
+    {timeValues[1] ? <TimeDivider /> : null}
+    {timeValues[1] ? <div className="time-value">{timeValues[1]}</div> : null}
+  </CenterFlexbox>
+);
+
+interface FloatingTimeDisplayProps {
+  currentTime: number | number[];
+  defaultTimeFormat?: string | null;
+  timeFormat?: string | null;
+  timezone?: string | null;
+}
+
+export default function FloatingTimeDisplayFactory() {
+  const FloatingTimeDisplay = ({
+    currentTime,
+    defaultTimeFormat,
+    timeFormat,
+    timezone
+  }: FloatingTimeDisplayProps) => {
+    const {displayDate, displayTime} = useMemo(() => {
+      const groupTime = Array.isArray(currentTime) ? currentTime : [currentTime];
+      const hasUserFormat = typeof timeFormat === 'string';
+      const currentFormat = (hasUserFormat ? timeFormat : defaultTimeFormat) || DEFAULT_TIME_FORMAT;
+      const dateFunc = datetimeFormatter(timezone);
+
+      if (hasUserFormat) {
+        // dont split time if user defined it
+        return {
+          displayDate: groupTime.map(dateFunc(currentFormat)),
+          displayTime: []
+        };
+      }
+      return groupTime.reduce<{displayDate: string[]; displayTime: string[]}>(
+        (accu, curr) => {
+          const [dateFormat, datetimeFormat] = currentFormat.split(' ');
+          const dateString = dateFunc(dateFormat)(curr);
+          const timeString = datetimeFormat ? dateFunc(datetimeFormat)(curr) : null;
+
+          if (!accu.displayDate.includes(dateString)) {
+            accu.displayDate.push(dateString);
+          }
+          if (timeString) {
+            accu.displayTime.push(timeString);
+          }
+
+          return accu;
+        },
+        {displayDate: [], displayTime: []}
+      );
+    }, [currentTime, timeFormat, defaultTimeFormat, timezone]);
+
+    const twoGroups = displayDate.length === 2 && displayTime.length === 2;
+    const bottomRow = displayTime.length ? displayTime : displayDate.length ? displayDate : null;
+    const topRow = displayDate.length && displayTime.length ? displayDate : null;
+
+    return (
+      <StyledTimeDisplayWrapper>
+        <StyledTimeDisplay className="animation-control__time-display">
+          {twoGroups ? (
+            <StyledTimeDisplayGroups>
+              <StyledTimeValueGroup>
+                {/* Time Start */}
+                <StyledTimeDisplayTop>{displayDate[0]}</StyledTimeDisplayTop>
+                <StyledTimeDisplayBottom>{displayTime[0]}</StyledTimeDisplayBottom>
+              </StyledTimeValueGroup>
+              <TimeDivider />
+              <StyledTimeValueGroup>
+                {/* Time End */}
+                <StyledTimeDisplayTop>{displayDate[1]}</StyledTimeDisplayTop>
+                <StyledTimeDisplayBottom>{displayTime[1]}</StyledTimeDisplayBottom>
+              </StyledTimeValueGroup>
+            </StyledTimeDisplayGroups>
+          ) : (
+            <StyledTimeDisplayRows>
+              {topRow ? (
+                <StyledTimeDisplayTop>
+                  <TimeDisplayRow timeValues={topRow} />
+                </StyledTimeDisplayTop>
+              ) : null}
+              {bottomRow ? (
+                <StyledTimeDisplayBottom>
+                  <TimeDisplayRow timeValues={bottomRow} />
+                </StyledTimeDisplayBottom>
+              ) : null}
+            </StyledTimeDisplayRows>
+          )}
+        </StyledTimeDisplay>
+      </StyledTimeDisplayWrapper>
+    );
+  };
+
+  return FloatingTimeDisplay;
+}

package/src/components/common/animation-control/playback-controls.tsx

@@ -0,0 +1,316 @@
+// 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, {useState, useCallback} from 'react';
+import styled from 'styled-components';
+import classnames from 'classnames';
+import {FormattedMessage} from 'localization';
+import {Button, Tooltip, ButtonProps} from 'components/common/styled-components';
+import AnimationSpeedSliderFactory from './animation-speed-slider';
+import {Reset, Play, Pause, Rocket, AnchorWindow, FreeWindow} from 'components/common/icons';
+import {ANIMATION_WINDOW} from 'constants/default-settings';
+import {preciseRound} from 'utils/data-utils';
+import {ReactComponentLike} from 'prop-types';
+
+const DELAY_SHOW = 500;
+const DEFAULT_BUTTON_HEIGHT = '20px';
+
+const StyledAnimationControls = styled.div`
+  display: flex;
+  position: relative;
+
+  &.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+`;
+
+const StyledSpeedControl = styled.div`
+  display: flex;
+  align-items: center;
+
+  .animation-control__speed-slider {
+    left: 0;
+  }
+`;
+
+interface IconButtonProps extends ButtonProps {
+  collapsed?: boolean;
+}
+
+export const IconButton = styled(Button)<IconButtonProps>`
+  width: ${props => (props.collapsed ? 0 : 32)}px;
+  height: 32px;
+  color: ${props => props.theme.playbackButtonColor};
+  background-color: ${props => props.theme.playbackButtonBgColor};
+  border-radius: 4px;
+  margin-left: 7px;
+  border: 0;
+  padding: 0;
+
+  .__react_component_tooltip {
+    font-family: ${props => props.theme.fontFamily};
+  }
+  svg {
+    margin: 0;
+  }
+  &.active {
+    background-color: ${props => props.theme.playbackButtonActBgColor};
+  }
+`;
+
+function nop() {}
+const DEFAULT_ICONS = {
+  /* eslint-disable react/display-name */
+  reset: _ => <Reset height="18px" />,
+  play: _ => <Play height="18px" />,
+  pause: _ => <Pause height="18px" />,
+  /* eslint-enable react/display-name */
+  speed: Rocket,
+  animationFree: FreeWindow,
+  animationIncremental: AnchorWindow
+};
+
+const DEFAULT_ANIMATE_ITEMS = {
+  [ANIMATION_WINDOW.free]: {
+    id: ANIMATION_WINDOW.free,
+    icon: DEFAULT_ICONS.animationFree,
+    tooltip: 'tooltip.animationByWindow'
+  },
+  [ANIMATION_WINDOW.incremental]: {
+    id: ANIMATION_WINDOW.incremental,
+    icon: DEFAULT_ICONS.animationIncremental,
+    tooltip: 'tooltip.animationByIncremental'
+  }
+};
+
+interface AnimationItem {
+  id: string;
+  icon: ReactComponentLike;
+  tooltip: string;
+}
+
+interface AnimationWindowControlProps {
+  onClick?: (id: string) => void;
+  selected?: string;
+  onHide: () => void;
+  height?: string;
+  animationItems: {[key: string]: AnimationItem};
+  btnStyle;
+}
+
+export const AnimationWindowControl = ({
+  onClick,
+  selected,
+  onHide,
+  height,
+  animationItems,
+  btnStyle = {}
+}: AnimationWindowControlProps) => (
+  <div>
+    {Object.values(animationItems)
+      .filter(item => item.id !== selected)
+      .map(item => (
+        <IconButton
+          key={item.id}
+          data-tip
+          data-for={`${item.id}-tooltip`}
+          className="playback-control-button"
+          onClick={() => {
+            onClick?.(item.id);
+            onHide();
+          }}
+          {...btnStyle}
+        >
+          <item.icon height={height} />
+          {item.tooltip ? (
+            <Tooltip id={`${item.id}-tooltip`} effect="solid" place="top">
+              <FormattedMessage id={item.tooltip} />
+            </Tooltip>
+          ) : null}
+        </IconButton>
+      ))}
+  </div>
+);
+
+interface PlaybackControls {
+  isAnimatable?: boolean;
+  isAnimating?: boolean;
+  width?: number | string;
+  speed: number;
+  animationWindow?: string;
+  setFilterAnimationWindow?: (id: string) => void;
+  updateAnimationSpeed?: (val: number) => void;
+  pauseAnimation?: () => void;
+  resetAnimation?: () => void;
+  startAnimation: () => void;
+  playbackIcons?: typeof DEFAULT_ICONS;
+  animationItems?: {[key: string]: AnimationItem};
+  buttonStyle?: string;
+  buttonHeight?: string;
+}
+
+PlaybackControlsFactory.deps = [AnimationSpeedSliderFactory];
+function PlaybackControlsFactory(
+  AnimationSpeedSlider: ReturnType<typeof AnimationSpeedSliderFactory>
+) {
+  // eslint-disable-next-line complexity
+  const PlaybackControls = ({
+    isAnimatable = true,
+    isAnimating,
+    width,
+    speed,
+    animationWindow = ANIMATION_WINDOW.free,
+    setFilterAnimationWindow,
+    updateAnimationSpeed,
+    pauseAnimation = nop,
+    resetAnimation = nop,
+    startAnimation = nop,
+    playbackIcons = DEFAULT_ICONS,
+    animationItems = DEFAULT_ANIMATE_ITEMS,
+    buttonStyle = 'secondary',
+    buttonHeight = DEFAULT_BUTTON_HEIGHT
+  }: PlaybackControls) => {
+    const [isSpeedControlVisible, toggleSpeedControl] = useState(false);
+    const [showAnimationWindowControl, setShowAnimationWindowControl] = useState(false);
+
+    const toggleAnimationWindowControl = useCallback(() => {
+      setShowAnimationWindowControl(!showAnimationWindowControl);
+    }, [showAnimationWindowControl, setShowAnimationWindowControl]);
+    const btnStyle = buttonStyle ? {[buttonStyle]: true} : {};
+
+    const hideAndShowSpeedControl = useCallback(() => {
+      if (!isSpeedControlVisible) {
+        toggleSpeedControl(true);
+      } else {
+        // TODO: A HACK to allow input onblur get triggered before the input is unmounted
+        // A better solution should be invested, see https://github.com/facebook/react/issues/12363
+        window.setTimeout(() => toggleSpeedControl(false), 200);
+      }
+    }, [isSpeedControlVisible, toggleSpeedControl]);
+    return (
+      <StyledAnimationControls
+        className={classnames('playback-controls', {
+          disabled: !isAnimatable
+        })}
+        style={{width: `${width}px`}}
+      >
+        {/** Window */}
+        {setFilterAnimationWindow ? (
+          <IconButton
+            data-tip
+            data-for="animate-window"
+            className={classnames('playback-control-button', {active: showAnimationWindowControl})}
+            onClick={toggleAnimationWindowControl}
+            {...btnStyle}
+          >
+            {(() => {
+              if (animationItems[animationWindow]) {
+                const WindowIcon = animationItems[animationWindow].icon;
+                return <WindowIcon height={buttonHeight} />;
+              }
+              return null;
+            })()}
+            {animationItems[animationWindow] && animationItems[animationWindow].tooltip ? (
+              <Tooltip id="animate-window" place="top" delayShow={500} effect="solid">
+                <FormattedMessage id={animationItems[animationWindow].tooltip} />
+              </Tooltip>
+            ) : null}
+          </IconButton>
+        ) : null}
+
+        {showAnimationWindowControl ? (
+          <AnimationWindowControl
+            onClick={setFilterAnimationWindow}
+            selected={animationWindow}
+            onHide={toggleAnimationWindowControl}
+            height={buttonHeight}
+            btnStyle={btnStyle}
+            animationItems={animationItems}
+          />
+        ) : null}
+
+        {/** Speed */}
+        {showAnimationWindowControl || !updateAnimationSpeed ? null : (
+          <StyledSpeedControl>
+            <IconButton
+              data-tip
+              data-for="animate-speed"
+              className="playback-control-button"
+              {...btnStyle}
+              onClick={hideAndShowSpeedControl}
+            >
+              <playbackIcons.speed height={buttonHeight} />
+              <Tooltip id="animate-speed" place="top" delayShow={DELAY_SHOW} effect="solid">
+                <span>{preciseRound(speed, 1)}x</span>
+              </Tooltip>
+            </IconButton>
+            {isSpeedControlVisible ? (
+              <AnimationSpeedSlider
+                onHide={hideAndShowSpeedControl}
+                updateAnimationSpeed={updateAnimationSpeed}
+                speed={speed}
+              />
+            ) : null}
+          </StyledSpeedControl>
+        )}
+
+        {/** Reset */}
+        {showAnimationWindowControl ? null : (
+          <IconButton
+            data-tip
+            data-for="animate-reset"
+            className="playback-control-button"
+            onClick={resetAnimation}
+            {...btnStyle}
+          >
+            <playbackIcons.reset height={buttonHeight} />
+            <Tooltip id="animate-reset" place="top" delayShow={DELAY_SHOW} effect="solid">
+              <FormattedMessage id="tooltip.reset" />
+            </Tooltip>
+          </IconButton>
+        )}
+
+        {/** Play and pause */}
+        {showAnimationWindowControl ? null : (
+          <IconButton
+            data-tip
+            data-for="animate-play-pause"
+            className={classnames('playback-control-button', {active: isAnimating})}
+            onClick={isAnimating ? pauseAnimation : startAnimation}
+            {...btnStyle}
+          >
+            {isAnimating ? (
+              <playbackIcons.pause height={buttonHeight} />
+            ) : (
+              <playbackIcons.play height={buttonHeight} />
+            )}
+            <Tooltip id="animate-play-pause" place="top" delayShow={DELAY_SHOW} effect="solid">
+              <FormattedMessage id={isAnimating ? 'tooltip.pause' : 'tooltip.play'} />
+            </Tooltip>
+          </IconButton>
+        )}
+      </StyledAnimationControls>
+    );
+  };
+  return PlaybackControls;
+}
+
+export default PlaybackControlsFactory;

package/src/components/common/animation-control/speed-control.tsx

@@ -0,0 +1,71 @@
+// 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 AnimationSpeedSliderFactory from './animation-speed-slider';
+import {Button, CenterFlexbox} from 'components/common/styled-components';
+import {Rocket} from 'components/common/icons';
+import {preciseRound} from 'utils/data-utils';
+
+const StyledSpeedToggle = styled.div`
+  display: flex;
+  flex-grow: 0;
+  color: ${props => props.theme.textColor};
+  position: relative;
+`;
+
+const StyledSpeedText = styled.div`
+  display: inline-block;
+  width: 24px;
+  text-align: left;
+`;
+
+SpeedControlFactory.deps = [AnimationSpeedSliderFactory];
+
+function SpeedControlFactory(AnimationSpeedSlider: ReturnType<typeof AnimationSpeedSliderFactory>) {
+  const SpeedControl = ({
+    onClick,
+    updateAnimationSpeed,
+    speed,
+    showSpeedControl,
+    buttonHeight = '18px'
+  }) => (
+    <StyledSpeedToggle className="animation-control__speed-control">
+      <Button link width="80px" onClick={onClick}>
+        <CenterFlexbox className="bottom-widget__icon speed">
+          <Rocket height={buttonHeight} />
+        </CenterFlexbox>
+        <StyledSpeedText style={{visibility: !showSpeedControl ? 'visible' : 'hidden'}}>
+          {preciseRound(speed, 1)}x
+        </StyledSpeedText>
+      </Button>
+      {showSpeedControl ? (
+        <AnimationSpeedSlider
+          onHide={onClick}
+          updateAnimationSpeed={updateAnimationSpeed}
+          speed={speed}
+        />
+      ) : null}
+    </StyledSpeedToggle>
+  );
+  return SpeedControl;
+}
+export default SpeedControlFactory;