[Feat] timeline zoom & precision controls in enlarged time filter

docs/user-guides/h-playback.md

@@ -15,5 +15,13 @@ Follow these steps to create a playback video of an event:
 
 ![custom y axis](https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/h-playback-3.png "select filters")
 
+## Zoom & precision controls
+
+The enlarged timeline now lets you stay focused on the portion that matters:
+
+- Use the mouse wheel to resize the window under the cursor, and pinch (or hold <kbd>Ctrl</kbd> on Windows/Linux or <kbd>⌘</kbd> on macOS while scrolling) to zoom the full timeline.
+- A lightweight "Showing" bar appears whenever the full range is narrowed—click **Reset** to return to the original domain.
+- Hold <kbd>Ctrl</kbd> (Windows/Linux) or <kbd>⌘</kbd> (macOS) and press the arrow keys to pan left/right, with <kbd>Shift</kbd> for bigger steps.
+
 
 [Back to table of contents](README.md)

src/ai-assistant/src/config/models.ts

@@ -2,12 +2,12 @@
 // Copyright contributors to the kepler.gl project
 
 export const PROVIDER_DEFAULT_BASE_URLS = {
-  "openai": "https://api.openai.com/v1",
-  "anthropic": "https://api.anthropic.com/v1",
-  "google": "https://generativelanguage.googleapis.com/v1beta",
-  "deepseek": "https://api.deepseek.com/v1",
-  "xai": "https://api.x.ai/v1",
-  "ollama": "http://localhost:11434/api"
+  openai: 'https://api.openai.com/v1',
+  anthropic: 'https://api.anthropic.com/v1',
+  google: 'https://generativelanguage.googleapis.com/v1beta',
+  deepseek: 'https://api.deepseek.com/v1',
+  xai: 'https://api.x.ai/v1',
+  ollama: 'http://localhost:11434/api'
 };
 
 export const PROVIDER_MODELS = {

src/components/src/common/data-table/index.tsx

@@ -349,7 +349,7 @@ export const TableSection = ({
                 height={headerGridProps.height + browserScrollBarWidth}
                 width={headerGridWidth}
                 scrollLeft={scrollLeft}
-                onScroll={args => onScroll?.({...args, scrollTop:scrollTop ?? 0 })}
+                onScroll={args => onScroll?.({...args, scrollTop: scrollTop ?? 0})}
               />
             </div>
             <div

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

@@ -58,23 +58,11 @@ Bar.displayName = 'Bar';
 
 const isBarInRange = (
   bar: {x0: number; x1: number},
-  index: number,
-  list: any[],
-  filterDomain: any[],
+  _index: number,
+  _list: any[],
+  _filterDomain: any[],
   filterValue: any[]
-) => {
-  // first
-  // if x0 <= domain[0] and current value[0] wasn't changed from the original domain
-  const x0Condition =
-    index === 0 ? bar.x0 <= filterDomain[0] && filterDomain[0] === filterValue[0] : false;
-  // Last
-  // if x1 >= domain[1] and current value[1] wasn't changed from the original domain
-  const x1Condition =
-    index === list.length - 1
-      ? bar.x1 >= filterDomain[1] && filterDomain[1] === filterValue[1]
-      : false;
-  return (x0Condition || bar.x0 >= filterValue[0]) && (x1Condition || bar.x1 <= filterValue[1]);
-};
+) => bar.x1 > filterValue[0] && bar.x0 < filterValue[1];
 
 export type HistogramMaskModeType = {
   NoMask: number;

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

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import throttle from 'lodash/throttle';
 import styled, {IStyledComponent} from 'styled-components';
 
@@ -121,6 +121,8 @@ export default function TimeRangeSliderFactory(
     } = props;
 
     const throttledOnchange = useMemo(() => throttle(onChange, 20), [onChange]);
+    useEffect(() => () => throttledOnchange.cancel(), [throttledOnchange]);
+
     const binsForInterval = useMemo(
       () => getTimeBinsForInterval(timeBins, plotType?.interval),
       [timeBins, plotType?.interval]