[Feat] Replaced filter enlarged with view: side | enlarged | minified - part 2

src/components/src/bottom-widget.tsx

@@ -125,6 +125,17 @@ export default function BottomWidgetFactory(
       [visStateActions, enlargedFilterIdx]
     );
 
+    const onToggleMinify = useCallback(
+      () =>
+        visStateActions.setFilterView(
+          enlargedFilterIdx,
+          filter.view === FILTER_VIEW_TYPES.enlarged
+            ? FILTER_VIEW_TYPES.minified
+            : FILTER_VIEW_TYPES.enlarged
+        ),
+      [enlargedFilterIdx, visStateActions, filter]
+    );
+
     return (
       <BottomWidgetContainer
         width={Math.min(maxWidth, enlargedFilterWidth)}
@@ -174,8 +185,9 @@ export default function BottomWidgetFactory(
                   updateAnimationSpeed={visStateActions.updateFilterAnimationSpeed}
                   resetAnimation={resetAnimation}
                   isAnimatable={!animationConfig || !animationConfig.isAnimating}
-                  onClose={onClose}
                   timeline={timeline}
+                  onClose={onClose}
+                  onToggleMinify={onToggleMinify}
                 />
               ) : null
             }

src/components/src/filters/time-widget.tsx

@@ -1,8 +1,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import styled from 'styled-components';
+import {FILTER_VIEW_TYPES} from '@kepler.gl/constants';
 import {BottomWidgetInner} from '../common/styled-components';
 import TimeRangeSliderFactory from '../common/time-range-slider';
 import FloatingTimeDisplayFactory from '../common/animation-control/floating-time-display';
@@ -29,6 +30,7 @@ function TimeWidgetFactory(
     showTimeDisplay,
     setFilterAnimationTime,
     onClose,
+    onToggleMinify,
     resetAnimation,
     isAnimatable,
     updateAnimationSpeed,
@@ -37,16 +39,14 @@ function TimeWidgetFactory(
     setFilterAnimationWindow,
     timeline
   }: TimeWidgetProps) => {
-    const [isMinified, setMinified] = useState(false);
-
     const _updateAnimationSpeed = useCallback(speed => updateAnimationSpeed(index, speed), [
       updateAnimationSpeed,
       index
     ]);
 
     const _toggleAnimation = useCallback(() => toggleAnimation(index), [toggleAnimation, index]);
 
-    const _onToggleMinify = useCallback(() => setMinified(!isMinified), [setMinified, isMinified]);
+    const isMinified = useMemo(() => filter.view === FILTER_VIEW_TYPES.minified, [filter]);
 
     const _setFilterAnimationWindow = useCallback(
       animationWindow => setFilterAnimationWindow({id: filter.id, animationWindow}),
@@ -67,7 +67,7 @@ function TimeWidgetFactory(
           setFilterPlot={setFilterPlot}
           index={index}
           onClose={onClose}
-          onToggleMinify={_onToggleMinify}
+          onToggleMinify={onToggleMinify}
           isMinified={isMinified}
         />
         {/* Once AnimationControl is able to display large timeline*/}

src/components/src/filters/types.ts

@@ -76,6 +76,7 @@ export type TimeWidgetProps = {
   isAnimatable: boolean;
   resetAnimation: () => void;
   onClose: () => void;
+  onToggleMinify: () => void;
   setFilterAnimationTime: ActionHandler<typeof setFilterAnimationTime>;
   updateAnimationSpeed: ActionHandler<typeof updateFilterAnimationSpeed>;
   toggleAnimation: ActionHandler<typeof toggleFilterAnimation>;

src/components/src/side-panel/filter-panel/filter-panel.tsx

@@ -26,8 +26,8 @@ interface FilterPanelPropsImpl extends Omit<FilterPanelProps, 'allAvailableField
   filters: Filter[];
   layers: ReadonlyArray<Layer>;
   isAnyFilterAnimating: boolean;
-  enlargeFilter: () => void;
   toggleAnimation: () => void;
+  enlargeFilter: () => void;
   toggleFilterFeature: () => void;
 }
 

test/node/utils/timeline-test.js

@@ -47,9 +47,8 @@ test('#timeline -> getTimelineFromFilter', t => {
     gpuChannel: [0]
   };
 
-  const timeline = getTimelineFromFilter(filter);
   t.deepEqual(
-    Object.keys(timeline),
+    Object.keys(getTimelineFromFilter(filter)),
     [
       'value',
       'enableInteraction',
@@ -82,10 +81,8 @@ test('#timeline -> getTimelineFromAnimationConfig', t => {
     duration: null
   };
 
-  const timeline = getTimelineFromAnimationConfig(animationConfig);
-
   t.deepEqual(
-    Object.keys(timeline),
+    Object.keys(getTimelineFromAnimationConfig(animationConfig)),
     [
       'value',
       'enableInteraction',