@spider-analyzer/timeline 5.0.2 → 5.0.4

package/package.json

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

@@ -3,6 +3,7 @@ import {
     useCallback,
     useEffect,
     useImperativeHandle,
+    useMemo,
     useRef,
     useState,
 } from 'react';
@@ -875,8 +876,9 @@ const TimeLine = forwardRef<TimeLineHandle, any>(function TimeLineWrapper(props,
     const handleLoadDefault = useCallback(() => {
         const ret = props.onLoadDefaultDomain?.();
         const apply = (d: any) => {
-            if (!d) return;
+            if (!d || !d.min || !d.max) return;
             const m = domainToMoments(d, zone);
+            if (!m.min || !m.max) return;
             setStack([m]);
             if (props.onDomainChange) {
                 props.onDomainChange({ min: m.min.toDate(), max: m.max.toDate() });
@@ -886,27 +888,66 @@ const TimeLine = forwardRef<TimeLineHandle, any>(function TimeLineWrapper(props,
         else if (ret) apply(ret);
     }, [props.onLoadDefaultDomain, props.onDomainChange, zone]);
 
-    // Build the moment-typed props the inner expects. Apply the same
-    // defaults the inner destructures locally so that ref-path accesses
-    // (propsRef.current.xAxis.spaceBetweenTicks etc.) never trip on an
-    // undefined consumer prop.
+    // Normalize incoming props into moment-typed values the inner expects.
+    // MEMOIZE on the raw consumer reference so that a parent re-render
+    // with an unchanged `histo` (etc.) doesn't hand the inner a fresh
+    // object — otherwise the inner's `histo !== prev` effect fires every
+    // render → setState → re-render → infinite loop (observed in
+    // Network-View: x-axis never stabilizes, loader never clears).
+    const timeSpanMoments = useMemo(
+        () => (props.timeSpan ? timeSpanToMoments(props.timeSpan, zone) : undefined),
+        [props.timeSpan, zone],
+    );
+    const maxDomainMoments = useMemo(
+        () => (props.maxDomain ? domainToMoments(props.maxDomain, zone) : undefined),
+        [props.maxDomain, zone],
+    );
+    const histoMoments = useMemo(
+        () => (props.histo?.items
+            ? { ...props.histo, items: props.histo.items.map((it: any) => ({ ...it, time: toMoment(it.time, zone) })) }
+            : props.histo),
+        [props.histo, zone],
+    );
+    const qualityMoments = useMemo(
+        () => (props.quality?.items
+            ? { ...props.quality, items: props.quality.items.map((it: any) => ({ ...it, time: toMoment(it.time, zone) })) }
+            : props.quality),
+        [props.quality, zone],
+    );
+    const biggestVisibleDomainDur = useMemo(
+        () => (props.biggestVisibleDomain != null ? toDuration(props.biggestVisibleDomain) : undefined),
+        [props.biggestVisibleDomain],
+    );
+    const biggestTimeSpanDur = useMemo(
+        () => (props.biggestTimeSpan != null ? toDuration(props.biggestTimeSpan) : undefined),
+        [props.biggestTimeSpan],
+    );
+    const smallestResolutionDur = useMemo(
+        () => (props.smallestResolution != null ? toDuration(props.smallestResolution) : undefined),
+        [props.smallestResolution],
+    );
+    const xAxisMerged = useMemo(
+        () => ({ ...xAxisDefault, ...(props.xAxis ?? {}) }),
+        [props.xAxis],
+    );
+    const marginMerged = useMemo(
+        () => ({ ...marginDefault, ...(props.margin ?? {}) }),
+        [props.margin],
+    );
+
     const innerProps: any = {
         ...props,
-        xAxis: { ...xAxisDefault, ...(props.xAxis ?? {}) },
+        xAxis: xAxisMerged,
         yAxis: props.yAxis ?? {},
-        margin: { ...marginDefault, ...(props.margin ?? {}) },
+        margin: marginMerged,
         domains: stack,
-        timeSpan: props.timeSpan ? timeSpanToMoments(props.timeSpan, zone) : undefined,
-        maxDomain: props.maxDomain ? domainToMoments(props.maxDomain, zone) : undefined,
-        histo: props.histo?.items
-            ? { ...props.histo, items: props.histo.items.map((it: any) => ({ ...it, time: toMoment(it.time, zone) })) }
-            : props.histo,
-        quality: props.quality?.items
-            ? { ...props.quality, items: props.quality.items.map((it: any) => ({ ...it, time: toMoment(it.time, zone) })) }
-            : props.quality,
-        biggestVisibleDomain: props.biggestVisibleDomain != null ? toDuration(props.biggestVisibleDomain) : undefined,
-        biggestTimeSpan: props.biggestTimeSpan != null ? toDuration(props.biggestTimeSpan) : undefined,
-        smallestResolution: props.smallestResolution != null ? toDuration(props.smallestResolution) : undefined,
+        timeSpan: timeSpanMoments,
+        maxDomain: maxDomainMoments,
+        histo: histoMoments,
+        quality: qualityMoments,
+        biggestVisibleDomain: biggestVisibleDomainDur,
+        biggestTimeSpan: biggestTimeSpanDur,
+        smallestResolution: smallestResolutionDur,
         onUpdateDomains: handleUpdateDomains,
         onLoadDefaultDomain: handleLoadDefault,
         // onLoadHisto: object shape + Date instants

package/src/time.ts

@@ -23,6 +23,14 @@ export function toMoment(x: Instant, zone?: string): Moment {
     return m;
 }
 
+// Null-preserving variant: undefined/null stay undefined instead of
+// becoming `moment()` (= now). Optional domain bounds like maxDomain.min
+// rely on this to remain "unset".
+function toMomentOpt(x: Instant | null | undefined, zone?: string): Moment | undefined {
+    if (x == null) return undefined;
+    return toMoment(x, zone);
+}
+
 export function toDuration(x: Millis): Duration {
     if (moment.isDuration(x)) return x as Duration;
     return moment.duration(x as number);
@@ -35,12 +43,12 @@ export function fromMoment(m: Moment | null | undefined): Date | null {
 export interface DateDomain { min: Date; max: Date; }
 export interface DateTimeSpan { start: Date; stop: Date; }
 
-export function domainToMoments(d: { min: Instant; max: Instant }, zone?: string) {
-    return { min: toMoment(d.min, zone), max: toMoment(d.max, zone) };
+export function domainToMoments(d: { min?: Instant | null; max?: Instant | null }, zone?: string) {
+    return { min: toMomentOpt(d.min, zone), max: toMomentOpt(d.max, zone) };
 }
 
-export function timeSpanToMoments(t: { start: Instant; stop: Instant }, zone?: string) {
-    return { start: toMoment(t.start, zone), stop: toMoment(t.stop, zone) };
+export function timeSpanToMoments(t: { start?: Instant | null; stop?: Instant | null }, zone?: string) {
+    return { start: toMomentOpt(t.start, zone), stop: toMomentOpt(t.stop, zone) };
 }
 
 export function domainToDates(d: { min: Moment; max: Moment }): DateDomain {