@spider-analyzer/timeline 5.0.6 → 5.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spider-analyzer/timeline",
-  "version": "5.0.6",
+  "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/Cursor.jsx

@@ -12,7 +12,7 @@ import RightHandle from './cursorElements/RightHandle';
 import ZoomIn from './cursorElements/ZoomIn';
 import LeftToolTip from './cursorElements/LeftToolTip';
 import RightToolTip from './cursorElements/RightToolTip';
-import moment from './moment-shim';
+import moment, { momentType } from './moment-shim';
 
 export default function Cursor({
         overlayWidth, overlayHeight,
@@ -209,8 +209,8 @@ Cursor.propTypes = {
     overlayHeight: PropTypes.number.isRequired,
     overlayWidth: PropTypes.number.isRequired,
     items: PropTypes.arrayOf(PropTypes.shape({
-        start: PropTypes.instanceOf(moment).isRequired,
-        end: PropTypes.instanceOf(moment).isRequired,
+        start: momentType.isRequired,
+        end: momentType.isRequired,
         x1: PropTypes.number,
         x2: PropTypes.number,
         metrics: PropTypes.arrayOf(PropTypes.number).isRequired,

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;
@@ -758,15 +772,24 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
     const { isActive, domain, histoWidth, margin, start, stop, maxZoom, minZoom,
             maxTimespan, barHovered, tooltipVisible, ticks, dragging } = state;
 
+    // Memoize the expensive per-render bits so cursor drag (which flips
+    // only state.start/state.stop 60x/sec) doesn't rebuild the histogram
+    // bar list on every event. Under the Luxon-backed shim, rebuilding
+    // ~550 bars costs ~150 ms/render — enough to tank drag framerate.
+    const verticalScaleData = useMemo(() => prepareVerticalScale(), [prepareVerticalScale]);
+    const items = useMemo(
+        () => prepareHistogram({ domain, verticalScale: verticalScaleData.verticalScale }),
+        [prepareHistogram, domain, verticalScaleData, histoWidth],
+    );
+    itemsRef.current = items;
+
     const xAxisHeight = xAxisProp.height || xAxisDefault.height;
     const pointZero = { x: 0, y: height - margin.bottom - xAxisHeight };
     const originCursor = { x: 0, y: margin.top - 5 };
 
     if (!isFunction(xAxisRef.current)) return null;
 
-    const { verticalScale, verticalMarks, maxHeight } = prepareVerticalScale();
-    const items = prepareHistogram({ domain, verticalScale });
-    itemsRef.current = items;
+    const { verticalScale, verticalMarks, maxHeight } = verticalScaleData;
 
     return (
         <svg

package/src/cursorElements/CursorSelection.jsx

@@ -5,7 +5,7 @@ import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
 
 import clsx from 'clsx';
-import moment from '../moment-shim';
+import moment, { momentType } from '../moment-shim';
 import {handleHistoOver, handleHistoOut} from './handleHistoHovering';
 
 
@@ -106,8 +106,8 @@ CursorSelection.propTypes = {
 
 
     items: PropTypes.arrayOf(PropTypes.shape({
-        start: PropTypes.instanceOf(moment).isRequired,
-        end: PropTypes.instanceOf(moment).isRequired,
+        start: momentType.isRequired,
+        end: momentType.isRequired,
         x1: PropTypes.number,
         x2: PropTypes.number,
         metrics: PropTypes.arrayOf(PropTypes.number).isRequired,

package/src/cursorElements/DragOverlay.jsx

@@ -2,7 +2,7 @@ import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react
 import PropTypes from 'prop-types';
 import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
-import moment from '../moment-shim';
+import moment, { momentType } from '../moment-shim';
 
 import {handleHistoOver, handleHistoOut} from './handleHistoHovering';
 
@@ -104,8 +104,8 @@ DragOverlay.propTypes = {
     marginBottom: PropTypes.number,
 
     items: PropTypes.arrayOf(PropTypes.shape({
-        start: PropTypes.instanceOf(moment).isRequired,
-        end: PropTypes.instanceOf(moment).isRequired,
+        start: momentType.isRequired,
+        end: momentType.isRequired,
         x1: PropTypes.number,
         x2: PropTypes.number,
         metrics: PropTypes.arrayOf(PropTypes.number).isRequired,

package/src/moment-shim.ts

@@ -165,5 +165,30 @@ moment.tz = (x: any, zone: string): MomentLike => {
     return new MomentLike(base.setZone(zone));
 };
 
+// PropTypes helper — the library's internal .jsx components use
+// `PropTypes.instanceOf(moment)` which doesn't work against the shim
+// (moment is the factory function, not a class). Use this instead:
+//   time: momentType
+//   time: momentType.isRequired
+function validate(props: Record<string, any>, propName: string, componentName: string): Error | null {
+    const v = props[propName];
+    if (v == null) return null;
+    if (moment.isMoment(v)) return null;
+    return new Error(
+        `Invalid prop \`${propName}\` supplied to \`${componentName}\`, expected a moment-like object.`,
+    );
+}
+const required = (props: Record<string, any>, propName: string, componentName: string): Error | null => {
+    const v = props[propName];
+    if (v == null) {
+        return new Error(
+            `The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is \`${v}\`.`,
+        );
+    }
+    return validate(props, propName, componentName);
+};
+export const momentType: any = validate;
+momentType.isRequired = required;
+
 export default moment;
 export type Moment = MomentLike;

package/src/timeLineElements/HistoToolTip.jsx

@@ -1,7 +1,7 @@
 import { cn } from "../styles";
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import moment from '../moment-shim';
+import moment, { momentType } from '../moment-shim';
 import React from 'react';
 
 
@@ -50,8 +50,8 @@ export default function HistoTooltip({metricsDefinition, item, onFormatTimeToolT
 HistoTooltip.propTypes = {
     classes: PropTypes.object,
     item: PropTypes.shape({
-        start: PropTypes.instanceOf(moment).isRequired,
-        end: PropTypes.instanceOf(moment).isRequired,
+        start: momentType.isRequired,
+        end: momentType.isRequired,
         x1: PropTypes.number,
         x2: PropTypes.number,
         metrics: PropTypes.arrayOf(PropTypes.number).isRequired,

package/src/timeLineElements/Histogram.jsx

@@ -1,13 +1,13 @@
 import { cn } from "../styles";
-import React from 'react';
-import moment from '../moment-shim';
+import React, { memo } from 'react';
+import moment, { momentType } from '../moment-shim';
 import { sum as _sum } from '../utils';
 import PropTypes from 'prop-types';
 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
@@ -72,8 +72,8 @@ export default function Histogram({
 Histogram.propTypes = {
     classes: PropTypes.object,
     items: PropTypes.arrayOf(PropTypes.shape({
-        start: PropTypes.instanceOf(moment).isRequired,
-        end: PropTypes.instanceOf(moment).isRequired,
+        start: momentType.isRequired,
+        end: momentType.isRequired,
         x1: PropTypes.number,
         x2: PropTypes.number,
         metrics: PropTypes.arrayOf(PropTypes.number).isRequired,
@@ -99,3 +99,5 @@ Histogram.propTypes = {
     barHovered: PropTypes.number,
     tooltipVisible: PropTypes.bool,
 };
+
+export default memo(Histogram);

package/src/timeLineElements/QualityLine.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 
-import moment from '../moment-shim';
+import moment, { momentType } from '../moment-shim';
 import ToolTip from '../ToolTip';
 
 const qualityHeight = 3;
@@ -64,7 +64,7 @@ QualityLine.propTypes = {
     xAxis: PropTypes.func.isRequired,
     quality: PropTypes.shape({
         items: PropTypes.arrayOf(PropTypes.shape({
-            time: PropTypes.instanceOf(moment).isRequired,
+            time: momentType.isRequired,
             quality: PropTypes.number.isRequired,
             tip: PropTypes.node
         })),

package/src/timeLineElements/XAxis.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import moment from '../moment-shim';
+import React, { memo } from 'react';
+import moment, { momentType } from '../moment-shim';
 import PropTypes from 'prop-types';
 import {timeDay} from 'd3-time';
 import clsx from 'clsx';
@@ -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();
 
@@ -69,8 +69,8 @@ export default function XAxis({min, max, origin, axisWidth, marks, xAxis, classe
 XAxis.propTypes = {
     axisWidth:PropTypes.number.isRequired,
     classes: PropTypes.object,
-    min: PropTypes.instanceOf(moment),
-    max: PropTypes.instanceOf(moment),
+    min: momentType,
+    max: momentType,
     origin: PropTypes.shape({
         x: PropTypes.number.isRequired,
         y: PropTypes.number.isRequired
@@ -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);
+