@spider-analyzer/timeline 5.0.5 → 5.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spider-analyzer/timeline",
-  "version": "5.0.5",
+  "version": "5.0.8",
   "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

@@ -207,7 +207,13 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
 
         patchState({ histoWidth, isActive: true, ticks });
 
-        if (shouldReload && intervalMs) {
+        // Gate the fetch on a usable histoWidth. Before the first valid
+        // width is measured (React mount, ResizeObserver, consumer layout)
+        // histoWidth can be <= 0 — in that case we'd otherwise hit the
+        // domainSpan/1 fallback and ask the backend for smallestResolution
+        // / tickCount=1 granularity over the whole domain. Wait for the
+        // width-change effect to re-run getItems with a real width.
+        if (shouldReload && intervalMs && histoWidth > 0) {
             widthOfLastUpdateRef.current = p.width;
             patchState({ waitForLoad: true });
             p.onLoadHisto(intervalMs, domain.min, domain.max);
@@ -247,14 +253,19 @@ const TimeLineInner = forwardRef<TimeLineHandle, any>(function TimeLine(props, r
             return;
         }
         const s = stateRef.current;
-        if (s.isActive) {
+        patchState(computeMarginAndWidth(props));
+        // Re-run getItems whenever width/margin changes AND we have a
+        // domain. Was previously guarded on s.isActive which meant the
+        // first getItems call (with an as-yet unknown width) locked us
+        // into a bad intervalMs: it set isActive=true but skipped the
+        // fetch (histoWidth <= 0 gate), and this effect wouldn't re-fetch
+        // because isActive was now true but big=false.
+        if (s.domain) {
             const big =
                 widthOfLastUpdateRef.current !== null
                 && Math.abs((props.width ?? 0) - (widthOfLastUpdateRef.current ?? 0)) > 30;
-            getItems(props, s.domain, big);
-            patchState(computeMarginAndWidth(props));
-        } else {
-            patchState(computeMarginAndWidth(props));
+            const shouldReload = !s.isActive || big || widthOfLastUpdateRef.current === null;
+            getItems(props, s.domain, shouldReload);
         }
 
         if (stateRef.current.domain) {
@@ -747,15 +758,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,6 +1,6 @@
 import { cn } from "../styles";
 import React from 'react';
-import moment from '../moment-shim';
+import moment, { momentType } from '../moment-shim';
 import { sum as _sum } from '../utils';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -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,

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 moment, { momentType } from '../moment-shim';
 import PropTypes from 'prop-types';
 import {timeDay} from 'd3-time';
 import clsx from 'clsx';
@@ -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