@spider-analyzer/timeline 5.0.8 → 5.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spider-analyzer/timeline",
-  "version": "5.0.8",
+  "version": "5.0.9",
   "description": "React graphical component to display metric over time with a time selection feature.",
   "author": "Thibaut Raballand <spider.analyzer@gmail.com> (https://spider-analyzer.io)",
   "license": "MIT",

package/src/TimeLine.tsx

@@ -7,6 +7,7 @@ import {
     useRef,
     useState,
 } from 'react';
+import { flushSync } from 'react-dom';
 import moment from './moment-shim';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import { merge as _merge } from './utils';
@@ -166,6 +167,18 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
 
     const patchState = useCallback((patch: any | ((s: any) => any)) => {
         setStateRaw((s: any) => ({ ...s, ...(typeof patch === 'function' ? patch(s) : patch) }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Synchronous variant for drag/resize hot paths. React 18 normally batches
+    // state updates from d3-drag's native listeners to the next scheduler tick,
+    // so the cursor edge trails the mouse by ~1 frame. flushSync forces the
+    // render within the same event, matching the pre-hooks React 17 behavior
+    // where the cursor border tracked the pointer precisely.
+    const patchStateSync = useCallback((patch: any | ((s: any) => any)) => {
+        flushSync(() => {
+            setStateRaw((s: any) => ({ ...s, ...(typeof patch === 'function' ? patch(s) : patch) }));
+        });
     }, []);
 
     // --- Domain math --------------------------------------------------------
@@ -483,9 +496,9 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
                 movedSinceLastFetchedRef.current = 0;
                 getItems(p, { min, max });
             }
-            patchState({ domain: { min, max }, minTime, maxTime, ticks });
+            patchStateSync({ domain: { min, max }, minTime, maxTime, ticks });
         }
-    }, [moveTimeLineCore, getItems, patchState]);
+    }, [moveTimeLineCore, getItems, patchStateSync]);
 
     const onResizeLeftCursor = useCallback((delta: number, mouse: any) => {
         const xAxis = xAxisRef.current;
@@ -509,10 +522,10 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
             (newStop !== s.stop && newStop.isSameOrBefore(s.domain.max)) ||
             newStart.isSameOrAfter(s.domain.min)
         ) {
-            patchState({ start: newStart, stop: newStop, maxTimespan });
+            patchStateSync({ start: newStart, stop: newStop, maxTimespan });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handleAutoSliding, patchState]);
+    }, [handleAutoSliding, patchStateSync]);
 
     const onResizeRightCursor = useCallback((delta: number, mouse: any) => {
         const xAxis = xAxisRef.current;
@@ -533,10 +546,10 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
         }
         handleAutoSliding(mouse, onResizeRightCursor);
         if (newStop.isSameOrBefore(s.domain.max) && newStart.isSameOrAfter(s.domain.min)) {
-            patchState({ start: newStart, stop: newStop, maxTimespan });
+            patchStateSync({ start: newStart, stop: newStop, maxTimespan });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handleAutoSliding, patchState]);
+    }, [handleAutoSliding, patchStateSync]);
 
     const onDragCursor = useCallback((delta: number, mouse: any) => {
         const xAxis = xAxisRef.current;
@@ -551,9 +564,9 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
         if (maxDomain.min && newStart.isBefore(maxDomain.min)) newStart = moment(maxDomain.min);
         if (maxDomain.max && newStop.isAfter(maxDomain.max)) newStop = moment(maxDomain.max);
         handleAutoSliding(mouse, onDragCursor);
-        patchState({ start: newStart, stop: newStop });
+        patchStateSync({ start: newStart, stop: newStop });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handleAutoSliding, patchState]);
+    }, [handleAutoSliding, patchStateSync]);
 
     const onStartDrawCursor = useCallback((pos: number) => {
         const xAxis = xAxisRef.current;
@@ -583,10 +596,10 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
         }
         handleAutoSliding(mouse, onDrawCursor);
         if (newStop.isSameOrBefore(s.domain.max) && newStart.isSameOrAfter(s.domain.min)) {
-            patchState({ start: newStart, stop: newStop, maxTimespan });
+            patchStateSync({ start: newStart, stop: newStop, maxTimespan });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handleAutoSliding, patchState]);
+    }, [handleAutoSliding, patchStateSync]);
 
     const onEndDrawCursor = useCallback(() => {
         stopAutoMove();
@@ -611,6 +624,7 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
         onCustomRange(start, stop);
     }, [stopAutoMove]);
 
+
     const zoomOnDomain = useCallback((targetDomain: any) => {
         const p = propsRef.current;
         const s = stateRef.current;

package/src/timeLineElements/Histogram.jsx

@@ -1,5 +1,5 @@
 import { cn } from "../styles";
-import React from 'react';
+import React, { memo } from 'react';
 import moment, { momentType } from '../moment-shim';
 import { sum as _sum } from '../utils';
 import PropTypes from 'prop-types';
@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import ToolTip from '../ToolTip';
 
 
-export default function Histogram({
+function Histogram({
   classes, items, metricsDefinition, origin,
   barHovered, tooltipVisible, verticalScale, dragging,
   HistoToolTip, onFormatMetricLegend, onFormatTimeToolTips
@@ -99,3 +99,5 @@ Histogram.propTypes = {
     barHovered: PropTypes.number,
     tooltipVisible: PropTypes.bool,
 };
+
+export default memo(Histogram);

package/src/timeLineElements/XAxis.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import moment, { momentType } from '../moment-shim';
 import PropTypes from 'prop-types';
 import {timeDay} from 'd3-time';
@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import { arrow } from "./axesStyles";
 import { cn } from "../styles";
 
-export default function XAxis({min, max, origin, axisWidth, marks, xAxis, classes, arrowPath = arrow, onFormatTimeLegend}){
+function XAxis({min, max, origin, axisWidth, marks, xAxis, classes, arrowPath = arrow, onFormatTimeLegend}){
 
     const now = moment();
 
@@ -81,3 +81,5 @@ XAxis.propTypes = {
     onFormatTimeLegend: PropTypes.func.isRequired,
 };
 
+export default memo(XAxis);
+

package/src/timeLineElements/XGrid.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { memo } from 'react';
 import moment from '../moment-shim';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
 import { cn } from "../styles";
 
-export default function XAxis({origin, marks, xAxis, classes, yAxisHeight}){
+function XAxis({origin, marks, xAxis, classes, yAxisHeight}){
 
 
     const className = (n) => cn(n, classes);
@@ -42,3 +42,5 @@ XAxis.propTypes = {
     yAxisHeight: PropTypes.number,
 };
 
+export default memo(XAxis);
+