[Feat] Replaced filter enlarged with view: side | enlarged | minified…

… - part 2 (#2537) - Replaced filter enlarged with view: onToggleMinify Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Oct 16, 2024 · 97df4c9 · 97df4c9
1 parent 1c0ef9a
commit 97df4c9
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 36 deletions.
diff --git a/src/components/src/bottom-widget.tsx b/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
             }

diff --git a/src/components/src/filters/filter-panels/time-range-filter-panel.tsx b/src/components/src/filters/filter-panels/time-range-filter-panel.tsx
@@ -66,16 +66,17 @@ function TimeRangeFilterPanelFactory(
       removeFilter,
       toggleAnimation
     }) => {
-      const onSetFilterValue = useCallback(value => setFilter(idx, 'value', value), [
-        idx,
-        setFilter
-      ]);
+      const onSetFilterValue = useCallback(
+        value => setFilter(idx, 'value', value),
+        [idx, setFilter]
+      );
 
       const totalDatasetsNum = useMemo(() => Object.keys(datasets).length, [datasets]);
       const datasetsWithTime = useMemo(() => getDatasetsWithTimeField(datasets), [datasets]);
-      const datasetsWithTimeNum = useMemo(() => Object.keys(datasetsWithTime).length, [
-        datasetsWithTime
-      ]);
+      const datasetsWithTimeNum = useMemo(
+        () => Object.keys(datasetsWithTime).length,
+        [datasetsWithTime]
+      );
       const filterDatasetsNum = useMemo(() => filter.dataId.length, [filter]);
       const onSetFilterPlot = useCallback(
         (newProp, valueIndex) => setFilterPlot(idx, newProp, valueIndex),
@@ -118,10 +119,10 @@ function TimeRangeFilterPanelFactory(
 
       const onFieldSelector = (field, valueIndex) => setFilter(idx, 'name', field.name, valueIndex);
 
-      const onSourceDataSelector = useCallback(value => setFilter(idx, 'dataId', value, 0), [
-        idx,
-        setFilter
-      ]);
+      const onSourceDataSelector = useCallback(
+        value => setFilter(idx, 'dataId', value, 0),
+        [idx, setFilter]
+      );
 
       const dataset = datasets[filter.dataId[0]];
       const supportedFields = useMemo(
@@ -147,17 +148,16 @@ function TimeRangeFilterPanelFactory(
               erasable={false}
               onSelect={field => onFieldSelector(field, 0)}
             />
-            {panelActions &&
-              panelActions.map(panelAction => (
-                <PanelHeaderAction
-                  id={panelAction.id}
-                  key={panelAction.id}
-                  onClick={panelAction.onClick}
-                  tooltip={panelAction.tooltip}
-                  IconComponent={panelAction.iconComponent}
-                  active={panelAction.active}
-                />
-              ))}
+            {panelActions.map(panelAction => (
+              <PanelHeaderAction
+                id={panelAction.id}
+                key={panelAction.id}
+                onClick={panelAction.onClick}
+                tooltip={panelAction.tooltip}
+                IconComponent={panelAction.iconComponent}
+                active={panelAction.active}
+              />
+            ))}
           </FilterPanelHeader>
           <StyledFilterContent className="filter-panel__content">
             {totalDatasetsNum > 1 && (

diff --git a/src/components/src/filters/range-filter.tsx b/src/components/src/filters/range-filter.tsx
@@ -10,7 +10,6 @@ RangeFilterFactory.deps = [RangeSliderFactory];
 
 export default function RangeFilterFactory(RangeSlider: ReturnType<typeof RangeSliderFactory>) {
   const RangeFilter: React.FC<RangeFilterProps> = ({filter, setFilter, setFilterPlot}) => {
-    const isEnlarged = filter.view === FILTER_VIEW_TYPES.enlarged;
     return (
       <div>
         <RangeSlider
@@ -19,7 +18,7 @@ export default function RangeFilterFactory(RangeSlider: ReturnType<typeof RangeS
           value1={filter.value[1]}
           step={filter.step}
           bins={filter.bins}
-          isEnlarged={isEnlarged}
+          isEnlarged={filter.view === FILTER_VIEW_TYPES.enlarged}
           onChange={setFilter}
           setFilterPlot={setFilterPlot}
           inputTheme="secondary"

diff --git a/src/components/src/filters/time-widget.tsx b/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}),
@@ -72,7 +72,7 @@ function TimeWidgetFactory(
           setFilterPlot={_setFilterPlot}
           index={index}
           onClose={onClose}
-          onToggleMinify={_onToggleMinify}
+          onToggleMinify={onToggleMinify}
           isMinified={isMinified}
         />
         {/* Once AnimationControl is able to display large timeline*/}

diff --git a/src/components/src/filters/types.ts b/src/components/src/filters/types.ts
@@ -80,6 +80,7 @@ export type TimeWidgetProps = {
   isAnimatable: boolean;
   resetAnimation: () => void;
   onClose: () => void;
+  onToggleMinify: () => void;
   setFilterAnimationTime: ActionHandler<typeof setFilterAnimationTime>;
   updateAnimationSpeed: ActionHandler<typeof updateFilterAnimationSpeed>;
   toggleAnimation: ActionHandler<typeof toggleFilterAnimation>;

diff --git a/src/components/src/side-panel/filter-panel/filter-panel.tsx b/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;
 }
 

diff --git a/src/table/src/kepler-table.ts b/src/table/src/kepler-table.ts
@@ -87,6 +87,7 @@ export type StringFieldFilterProps = MultiSelectFieldDomain & {
 };
 export type TimeFieldFilterProps = TimeRangeFieldDomain & {
   type: string;
+  view: Filter['view'];
   fixedDomain: boolean;
   value: number[];
   gpu: boolean;

diff --git a/test/node/utils/timeline-test.js b/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',