[fix] time sync bugfixes

src/components/src/bottom-widget.tsx

@@ -198,6 +198,7 @@ export default function BottomWidgetFactory(
                   filter={enhancedFilter as TimeRangeFilter}
                   index={enlargedFilterIdx}
                   datasets={datasets}
+                  layers={layers}
                   readOnly={readOnly}
                   showTimeDisplay={showFloatingTimeDisplay}
                   setFilterPlot={visStateActions.setFilterPlot}

src/components/src/common/range-plot.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useCallback, useMemo, useState, useEffect} from 'react';
+import React, {useCallback, useMemo, useState, useEffect, CSSProperties} from 'react';
 import styled, {withTheme} from 'styled-components';
 import RangeBrushFactory, {OnBrush, RangeBrushProps} from './range-brush';
 import HistogramPlotFactory from './histogram-plot';
@@ -42,6 +42,8 @@ interface RangePlotProps {
   datasets?: Datasets;
 
   invertTrendColor?: boolean;
+
+  style: CSSProperties;
 }
 
 type WithPlotLoadingProps = RangePlotProps &

src/components/src/common/range-slider-timeline-panel.tsx

@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+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 containerStyle = useMemo(
+      () => ({
+        display: 'flex',
+        justifyContent: 'spaceBetween',
+        flexWrap: 'wrap',
+        ...style
+      }),
+      [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>
+      </div>
+    );
+  };
+
+  return RangeSliderTimelinePanel;
+}
+
+RangeSliderTimelinePanelFactory.deps = [RangeSliderTimelineFactory];
+
+export default RangeSliderTimelinePanelFactory;

src/components/src/common/range-slider-subline.tsx → src/components/src/common/range-slider-timeline.tsx

@@ -28,9 +28,9 @@ const TIMELINE_INDICATOR_STYLE: CSSProperties = {
   color: '#C4C4C4'
 };
 
-function RangeSliderSublineFactory() {
-  const RangeSliderSubline = ({line, scaledValue}) => {
-    const style: CSSProperties = {
+function RangeSliderTimelineFactory() {
+  const RangeSliderTimeline = ({line, scaledValue, style}) => {
+    const progressStyle: CSSProperties = {
       left: `${line[0]}%`,
       top: '0',
       width: `${line[1] - line[0]}%`,
@@ -39,6 +39,14 @@ function RangeSliderSublineFactory() {
       backgroundColor: '#5558DB'
     };
 
+    const containerStyle = useMemo(
+      () => ({
+        ...BACKGROUND_LINE_STYLE,
+        ...style
+      }),
+      [style]
+    );
+
     const value = scaledValue[line[2]];
 
     const leftMarketStyle = useMemo(
@@ -66,16 +74,16 @@ function RangeSliderSublineFactory() {
     );
 
     return (
-      <div style={BACKGROUND_LINE_STYLE}>
-        <div style={style} />
+      <div style={containerStyle}>
+        <div style={progressStyle} />
         <ArrowDownFull style={leftMarketStyle} />
         <ArrowDownFull style={rightMarketStyle} />
         <TimelineMarker style={indicatorStyle} />
       </div>
     );
   };
 
-  return RangeSliderSubline;
+  return RangeSliderTimeline;
 }
 
-export default RangeSliderSublineFactory;
+export default RangeSliderTimelineFactory;

src/components/src/common/range-slider.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components';
 import RangePlotFactory from './range-plot';
 import Slider from './slider/slider';
 import {Input} from './styled-components';
-import RangeSliderSublineFactory from '../common/range-slider-subline';
+import RangeSliderTimelinePanelFactory from '../common/range-slider-timeline-panel';
 import {
   observeDimensions,
   unobserveDimensions,
@@ -66,7 +66,8 @@ interface RangeSliderProps {
   step?: number;
   sliderHandleWidth?: number;
   xAxis?: ElementType;
-  timelines?: number[];
+  timelines?: number[][];
+  timelineLabel?: string;
 
   timezone?: string | null;
   timeFormat?: string;
@@ -85,11 +86,13 @@ interface RangeSliderProps {
   invertTrendColor?: boolean;
 }
 
-RangeSliderFactory.deps = [RangePlotFactory, RangeSliderSublineFactory];
+const RANGE_SLIDER_TIMELINE_PANEL_STYLE = {marginLeft: '-32px'};
+
+RangeSliderFactory.deps = [RangePlotFactory, RangeSliderTimelinePanelFactory];
 
 export default function RangeSliderFactory(
   RangePlot: ReturnType<typeof RangePlotFactory>,
-  RangeSliderSubline: ReturnType<typeof RangeSliderSublineFactory>
+  RangeSliderTimelinePanel: ReturnType<typeof RangeSliderTimelinePanelFactory>
 ): ComponentType<RangeSliderProps> {
   class RangeSlider extends Component<RangeSliderProps> {
     static defaultProps = {
@@ -237,6 +240,7 @@ export default function RangeSliderFactory(
         playbackControlWidth,
         setFilterPlot,
         timelines,
+        timelineLabel,
         animationWindow,
         filter,
         datasets
@@ -251,11 +255,11 @@ export default function RangeSliderFactory(
         ? // TODO figure out correct types for value and range
           scaleSourceDomainToDestination(value as [number, number], range as [number, number])
         : [0, 0];
-
+      const commonPadding = `${Number(sliderHandleWidth) / 2}px`;
       return (
         <div
           className="kg-range-slider"
-          style={{width: '100%', padding: `0 ${Number(sliderHandleWidth) / 2}px`}}
+          style={{width: '100%', padding: `0 ${commonPadding}`}}
           ref={this.setSliderContainer}
         >
           {Array.isArray(range) && range.every(Number.isFinite) && (
@@ -281,13 +285,17 @@ export default function RangeSliderFactory(
                   timeFormat={timeFormat}
                   playbackControlWidth={playbackControlWidth}
                   setFilterPlot={setFilterPlot}
+                  style={{paddingLeft: commonPadding}}
+                />
+              ) : null}
+              {timelines?.length ? (
+                <RangeSliderTimelinePanel
+                  timelines={timelines}
+                  timelineLabel={timelineLabel}
+                  scaledValue={scaledValue}
+                  style={RANGE_SLIDER_TIMELINE_PANEL_STYLE}
                 />
               ) : null}
-              {timelines?.length
-                ? timelines.map((line, index) => (
-                    <RangeSliderSubline key={index} line={line} scaledValue={scaledValue} />
-                  ))
-                : null}
               <SliderWrapper
                 className="kg-range-slider__slider"
                 isRanged={isRanged}

src/components/src/filters/filter-panels/time-range-filter-panel.tsx

@@ -154,6 +154,7 @@ function TimeRangeFilterPanelFactory(
                 <TimeRangeFilter
                   filter={filter}
                   datasets={datasets}
+                  layers={layers}
                   idx={idx}
                   toggleAnimation={toggleAnimation}
                   setFilter={onSetFilterValue}

src/components/src/filters/time-range-filter.tsx

@@ -5,11 +5,17 @@ import React from 'react';
 import TimeRangeSliderFactory from '../common/time-range-slider';
 import {DEFAULT_TIME_FORMAT, FILTER_VIEW_TYPES} from '@kepler.gl/constants';
 import {TimeRangeFilter} from '@kepler.gl/types';
+import {Datasets} from '@kepler.gl/table';
+import {Layer} from '@kepler.gl/layers';
 import {TimeRangeFilterProps} from './types';
 /*
  * TimeRangeFilter -> TimeRangeSlider -> RangeSlider
  */
-export function timeRangeSliderFieldsSelector(filter: TimeRangeFilter, datasets) {
+export function timeRangeSliderFieldsSelector(
+  filter: TimeRangeFilter,
+  datasets: Datasets,
+  layers: readonly Layer[]
+) {
   const hasUserFormat = typeof filter.timeFormat === 'string';
   const timeFormat =
     (hasUserFormat ? filter.timeFormat : filter.defaultTimeFormat) || DEFAULT_TIME_FORMAT;
@@ -30,6 +36,7 @@ export function timeRangeSliderFieldsSelector(filter: TimeRangeFilter, datasets)
     timeFormat,
     filter,
     datasets,
+    layers,
     isMinified: filter.view === FILTER_VIEW_TYPES.minified,
     isEnlarged: filter.view === FILTER_VIEW_TYPES.enlarged
   };
@@ -41,6 +48,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
   const TimeRangeFilterComponent: React.FC<TimeRangeFilterProps> = ({
     filter,
     datasets,
+    layers,
     setFilter,
     setFilterPlot,
     isAnimatable,
@@ -49,7 +57,7 @@ function TimeRangeFilterFactory(TimeRangeSlider: ReturnType<typeof TimeRangeSlid
     timeline
   }) => (
     <TimeRangeSlider
-      {...timeRangeSliderFieldsSelector(filter, datasets)}
+      {...timeRangeSliderFieldsSelector(filter, datasets, layers)}
       onChange={setFilter}
       setFilterPlot={setFilterPlot}
       toggleAnimation={toggleAnimation}

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

@@ -25,6 +25,7 @@ function TimeWidgetFactory(
   const TimeWidget: React.FC<TimeWidgetProps> = ({
     datasets,
     filter,
+    layers,
     index,
     readOnly,
     showTimeDisplay,
@@ -65,8 +66,8 @@ function TimeWidgetFactory(
     );
 
     const timeRangeSlideProps = useMemo(
-      () => timeRangeSliderFieldsSelector(filter, datasets),
-      [filter, datasets]
+      () => timeRangeSliderFieldsSelector(filter, datasets, layers),
+      [filter, datasets, layers]
     );
 
     return (

src/components/src/filters/types.ts

@@ -48,6 +48,7 @@ export type TimeRangeFilterProps = {
   toggleAnimation: () => void;
   timeline: Timeline;
   datasets: Datasets;
+  layers: readonly Layer[];
 };
 
 export type SingleSelectFilterProps = {
@@ -74,6 +75,7 @@ export type TimeWidgetTopProps = {
 };
 
 export type TimeWidgetProps = {
+  layers: Layer[];
   datasets: Datasets;
   filter: TimeRangeFilter;
   index: number;