[Enhancement] add toggleLayerAnimationControl action (#1537)

* add toggleLayerAnimationControl action
* do not render layer animation control if hideControl is true

Signed-off-by: Shan He <heshan0131@gmail.com>

src/actions/vis-state-actions.d.ts

@@ -292,12 +292,13 @@ export function updateLayerAnimationSpeed(
   speed: number
 ): Merge<UpdateLayerAnimationSpeedUpdaterAction, {type: ActionTypes.UPDATE_LAYER_ANIMATION_SPEED}>;
 
-export type ToggleLayerAnimationUpdaterAction = {
-  idx;
-};
-export function toggleLayerAnimation(
-  idx: number
-): Merge<ToggleLayerAnimationUpdaterAction, {type: ActionTypes.TOGGLE_LAYER_ANIMATION}>;
+export type ToggleLayerAnimationUpdaterAction = {};
+export function toggleLayerAnimation(): 
+  Merge<ToggleLayerAnimationUpdaterAction, {type: ActionTypes.TOGGLE_LAYER_ANIMATION}>;
+
+export type ToggleLayerAnimationControlUpdaterAction = {};
+export function toggleLayerAnimationControl(): 
+  Merge<ToggleLayerAnimationControlUpdaterAction, {type: ActionTypes.TOGGLE_LAYER_ANIMATION_CONTROL}>;
 
 export type EnlargeFilterUpdaterAction = {
   idx: number;

src/actions/vis-state-actions.js

@@ -499,12 +499,32 @@ export function updateLayerAnimationSpeed(speed) {
   };
 }
 
+/**
+ * start end end layer animation
+ * @memberof visStateActions
+ * @type {typeof import('./vis-state-actions').toggleLayerAnimation}
+ * @returns action
+ * @public
+ */
 export function toggleLayerAnimation() {
   return {
     type: ActionTypes.TOGGLE_LAYER_ANIMATION
   };
 }
 
+/**
+ * hide and show layer animation control
+ * @memberof visStateActions
+ * @type {typeof import('./vis-state-actions').toggleLayerAnimationControl}
+ * @returns action
+ * @public
+ */
+export function toggleLayerAnimationControl() {
+  return {
+    type: ActionTypes.TOGGLE_LAYER_ANIMATION_CONTROL
+  };
+}
+
 /**
  * Show larger time filter at bottom for time playback (apply to time filter only)
  * @memberof visStateActions

src/components/bottom-widget.js

@@ -124,6 +124,8 @@ BottomWidgetFactory.deps = [
   FilterAnimationControllerFactory,
   LayerAnimationControllerFactory
 ];
+
+/* eslint-disable complexity */
 export default function BottomWidgetFactory(
   TimeWidget,
   AnimationControl,
@@ -165,7 +167,8 @@ export default function BottomWidgetFactory(
       Array.isArray(animationConfig.domain) && Number.isFinite(animationConfig.currentTime);
     // if animation control is showing, hide time display in time slider
     const showFloatingTimeDisplay = !animatableLayer.length;
-    const showAnimationControl = animatableLayer.length && readyToAnimation;
+    const showAnimationControl =
+      animatableLayer.length && readyToAnimation && !animationConfig.hideControl;
     const showTimeWidget = enlargedFilterIdx > -1 && Object.keys(datasets).length > 0;
 
     // if filter is not animating, pass in enlarged filter here because
@@ -236,3 +239,4 @@ export default function BottomWidgetFactory(
 
   return BottomWidget;
 }
+/* eslint-enable complexity */

src/components/common/time-slider-marker.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {useRef, useEffect, useMemo} from 'react';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import PropTypes from 'prop-types';
 import {scaleUtc} from 'd3-scale';
 import {select} from 'd3-selection';

src/constants/action-types.d.ts

@@ -40,6 +40,7 @@ export type ActionType = {
   UPDATE_LAYER_ANIMATION_SPEED: string;
   TOGGLE_LAYER_CONFIG_ACTIVE: string;
   TOGGLE_LAYER_ANIMATION: string;
+  TOGGLE_LAYER_ANIMATION_CONTROL: string;
   ENLARGE_FILTER: string;
   TOGGLE_FILTER_FEATURE: string;
   SET_VISIBLE_LAYERS_FOR_MAP: string;

src/constants/action-types.js

@@ -91,6 +91,7 @@ const ActionTypes = {
   UPDATE_ANIMATION_SPEED: `${ACTION_PREFIX}UPDATE_ANIMATION_SPEED`,
   UPDATE_LAYER_ANIMATION_SPEED: `${ACTION_PREFIX}UPDATE_LAYER_ANIMATION_SPEED`,
   TOGGLE_LAYER_ANIMATION: `${ACTION_PREFIX}TOGGLE_LAYER_ANIMATION`,
+  TOGGLE_LAYER_ANIMATION_CONTROL: `${ACTION_PREFIX}TOGGLE_LAYER_ANIMATION_CONTROL`,
   TOGGLE_LAYER_CONFIG_ACTIVE: `${ACTION_PREFIX}TOGGLE_LAYER_CONFIG_ACTIVE`,
   ENLARGE_FILTER: `${ACTION_PREFIX}ENLARGE_FILTER`,
   TOGGLE_FILTER_FEATURE: `${ACTION_PREFIX}TOGGLE_FILTER_FEATURE`,

src/reducers/vis-state-updaters.d.ts

@@ -177,6 +177,8 @@ export type AnimationConfig = {
   timeFormat?: string | null;
   // custom ui input
   timezone?: string | null;
+  // hide or show control
+  hideControl?: boolean;
 };
 
 export type BaseInteraction = {
@@ -321,6 +323,10 @@ export function toggleLayerAnimationUpdater(
   state: VisState,
   action: VisStateActions.ToggleLayerAnimationUpdaterAction
 ): VisState;
+export function toggleLayerAnimationControlUpdater(
+  state: VisState,
+  action: VisStateActions.ToggleLayerAnimationControlUpdaterAction
+): VisState;
 export function interactionConfigChangeUpdater(
   state: VisState,
   action: VisStateActions.InteractionConfigChangeUpdaterAction

src/reducers/vis-state-updaters.js

@@ -780,6 +780,21 @@ export const toggleLayerAnimationUpdater = state => ({
     isAnimating: !state.animationConfig.isAnimating
   }
 });
+
+/**
+ * Hide and show layer animation control
+ * @memberof visStateUpdaters
+ * @type {typeof import('./vis-state-updaters').toggleLayerAnimationControlUpdater}
+ * @public
+ */
+export const toggleLayerAnimationControlUpdater = state => ({
+  ...state,
+  animationConfig: {
+    ...state.animationConfig,
+    hideControl: !state.animationConfig.hideControl
+  }
+});
+
 /**
  * Change filter animation speed
  * @memberof visStateUpdaters

src/reducers/vis-state.js

@@ -55,6 +55,8 @@ const actionHandler = {
 
   [ActionTypes.TOGGLE_LAYER_ANIMATION]: visStateUpdaters.toggleLayerAnimationUpdater,
 
+  [ActionTypes.TOGGLE_LAYER_ANIMATION_CONTROL]: visStateUpdaters.toggleLayerAnimationControlUpdater,
+
   [ActionTypes.LOAD_FILES]: visStateUpdaters.loadFilesUpdater,
 
   [ActionTypes.LOAD_FILES_ERR]: visStateUpdaters.loadFilesErrUpdater,