[Bug] fix yaxis chat doesn't update (#2724)

- fix yaxis chat doesn't update - Sync time filter with layer animation Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Nov 1, 2024 · 695861b · 695861b
1 parent 8c37afa
commit 695861b
Show file tree

Hide file tree

Showing 11 changed files with 222 additions and 90 deletions.
diff --git a/src/components/src/common/range-slider-timeline-panel.tsx b/src/components/src/common/range-slider-timeline-panel.tsx
@@ -3,11 +3,9 @@
 
 import React, {useMemo} from 'react';
 import RangeSliderTimelineFactory from './range-slider-timeline';
-import {Layers} from '../common/icons';
-import {Tooltip} from '../common/styled-components';
 
 function RangeSliderTimelinePanelFactory(RangeSliderTimeline) {
-  const RangeSliderTimelinePanel = ({timelines, scaledValue, timelineLabel, style}) => {
+  const RangeSliderTimelinePanel = ({timelines, scaledValue, style}) => {
     const containerStyle = useMemo(
       () => ({
         display: 'flex',
@@ -18,24 +16,11 @@ function RangeSliderTimelinePanelFactory(RangeSliderTimeline) {
       [style]
     );
 
-    const iconWrapperStyle = {
-      marginRight: '8px',
-      cursor: 'pointer'
-    };
-
     return (
       <div style={containerStyle}>
-        <div data-tip data-for="layers" style={iconWrapperStyle}>
-          <Layers height="24px" color="#F7F8FA" />
-          <Tooltip id="layers" place="right" effect="solid">
-            <span>{timelineLabel}</span>
-          </Tooltip>
-        </div>
-        <div style={{flex: 1}}>
-          {timelines.map((timeline, index) => (
-            <RangeSliderTimeline key={index} line={timeline} scaledValue={scaledValue} />
-          ))}
-        </div>
+        {timelines.map((timeline, index) => (
+          <RangeSliderTimeline key={index} timeline={timeline} scaledValue={scaledValue} />
+        ))}
       </div>
     );
   };

diff --git a/src/components/src/common/range-slider-timeline.tsx b/src/components/src/common/range-slider-timeline.tsx
@@ -5,6 +5,7 @@ import React, {useMemo} from 'react';
 // eslint-disable-next-line no-unused-vars
 import {CSSProperties} from 'react';
 import {ArrowDownFull, TimelineMarker} from '../common/icons';
+import {Tooltip} from '../common/styled-components';
 
 const BACKGROUND_LINE_STYLE: CSSProperties = {
   height: '4px',
@@ -21,6 +22,17 @@ const TIMELINE_MARKER_STYLE: CSSProperties = {
   color: '#3D4866'
 };
 
+const containerStyle = {
+  display: 'flex',
+  width: '100%',
+  height: '16px'
+};
+
+const iconWrapperStyle = {
+  marginRight: '8px',
+  cursor: 'pointer'
+};
+
 const TIMELINE_INDICATOR_STYLE: CSSProperties = {
   position: 'absolute',
   top: '-14px',
@@ -29,56 +41,67 @@ const TIMELINE_INDICATOR_STYLE: CSSProperties = {
 };
 
 function RangeSliderTimelineFactory() {
-  const RangeSliderTimeline = ({line, scaledValue, style}) => {
+  const RangeSliderTimeline = ({timeline, scaledValue, style}) => {
+    const {startTime, endTime, syncMode, Icon, label} = timeline;
+
     const progressStyle: CSSProperties = {
-      left: `${line[0]}%`,
+      left: `${startTime}%`,
       top: '0',
-      width: `${line[1] - line[0]}%`,
+      width: `${endTime - startTime}%`,
       height: '100%',
       position: 'absolute',
       backgroundColor: '#5558DB'
     };
 
-    const containerStyle = useMemo(
+    const progressBarContainer = useMemo(
       () => ({
         ...BACKGROUND_LINE_STYLE,
+        flex: 1,
         ...style
       }),
       [style]
     );
 
-    const value = scaledValue[line[2]];
+    const value = scaledValue[syncMode];
 
     const leftMarketStyle = useMemo(
       () => ({
-        left: `calc(${line[0]}% - 4px)`,
+        left: `calc(${startTime}% - 4px)`,
         ...TIMELINE_MARKER_STYLE
       }),
-      [line]
+      [startTime]
     );
 
     const rightMarketStyle = useMemo(
       () => ({
-        left: `calc(${line[1]}% - 4px)`,
+        left: `calc(${endTime}% - 4px)`,
         ...TIMELINE_MARKER_STYLE
       }),
-      [line]
+      [endTime]
     );
 
     const indicatorStyle = useMemo(
       () => ({
         ...TIMELINE_INDICATOR_STYLE,
-        left: `calc(${value}% - 2px)`
+        left: `calc(${value}% - 3px)`
       }),
       [value]
     );
 
     return (
       <div style={containerStyle}>
-        <div style={progressStyle} />
-        <ArrowDownFull style={leftMarketStyle} />
-        <ArrowDownFull style={rightMarketStyle} />
-        <TimelineMarker style={indicatorStyle} />
+        <div data-tip data-for={label} style={iconWrapperStyle}>
+          <Icon height="24px" color="#F7F8FA" />
+          <Tooltip id={label} place="right" effect="solid">
+            <span>{label}</span>
+          </Tooltip>
+        </div>
+        <div style={progressBarContainer}>
+          <div style={progressStyle} />
+          <ArrowDownFull style={leftMarketStyle} />
+          <ArrowDownFull style={rightMarketStyle} />
+          <TimelineMarker style={indicatorStyle} />
+        </div>
       </div>
     );
   };

diff --git a/src/components/src/common/range-slider.tsx b/src/components/src/common/range-slider.tsx
@@ -66,7 +66,7 @@ interface RangeSliderProps {
   step?: number;
   sliderHandleWidth?: number;
   xAxis?: ElementType;
-  timelines?: number[][];
+  timelines?: any[];
   timelineLabel?: string;
 
   timezone?: string | null;
@@ -240,7 +240,6 @@ export default function RangeSliderFactory(
         playbackControlWidth,
         setFilterPlot,
         timelines,
-        timelineLabel,
         animationWindow,
         filter,
         datasets
@@ -291,7 +290,6 @@ export default function RangeSliderFactory(
               {timelines?.length ? (
                 <RangeSliderTimelinePanel
                   timelines={timelines}
-                  timelineLabel={timelineLabel}
                   scaledValue={scaledValue}
                   style={RANGE_SLIDER_TIMELINE_PANEL_STYLE}
                 />

diff --git a/src/components/src/filters/filter-panels/filter-synced-dataset-panel.tsx b/src/components/src/filters/filter-panels/filter-synced-dataset-panel.tsx
@@ -6,7 +6,7 @@ import styled, {withTheme} from 'styled-components';
 
 import {FormattedMessage} from '@kepler.gl/localization';
 import {ALL_FIELD_TYPES} from '@kepler.gl/constants';
-import {getAnimatableLayers} from '@kepler.gl/utils';
+import {getAnimatableVisibleLayers} from '@kepler.gl/utils';
 
 import {Button} from '../../common/styled-components';
 import {Add, Trash} from '../../common/icons';
@@ -264,10 +264,7 @@ function FilterSyncedDatasetPanelFactory(
       [syncTimeFilterWithLayerTimeline, idx]
     );
 
-    const animatableLayers = useMemo(
-      () => getAnimatableLayers(layers).filter(l => l.type === 'trip'),
-      [layers]
-    );
+    const animatableLayers = useMemo(() => getAnimatableVisibleLayers(layers), [layers]);
 
     const isLinkedWithLayerTimeline = useMemo(() => filter.syncedWithLayerTimeline, [filter]);