@spider-analyzer/timeline 5.0.3 → 5.0.5

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 5.0.5
+
+- Fix: compute intervalMs defensively in `getItems`. When d3's
+  `xAxis.ticks(N)` momentarily returned fewer than 2 entries (sparse
+  tick generation during the first render, while layout is still
+  settling), the previous code did `moment(ticks[1]).diff(moment(ticks[0]))`
+  with `ticks[1]` undefined. `moment(undefined)` is "now", so the diff
+  went negative, `_max` picked `smallestResolution`, and the very first
+  `onLoadHisto` asked for a 15 ms resolution over the whole domain —
+  flooding the backend. Any subsequent gesture (scroll, resize) produced
+  a correct interval, matching the user-observed "scrolling fixes it"
+  behavior.
+
+  Fix: when ticks are sparse, fall back to `domainSpan / tickCount`
+  instead of trusting ticks[1]−ticks[0]. Same nice-interval behavior on
+  the happy path, no regression when d3 hasn't produced enough ticks.
+
+## 5.0.4
+
+- Fix: memoize the moment-typed props built by the outer TimeLine
+  wrapper. Previously `histo`, `quality`, `timeSpan`, `maxDomain`,
+  duration props, and the xAxis/margin defaults were rebuilt on every
+  wrapper render. The inner component's "did this reference change?"
+  effects (`histo !== prevHisto`, width/margin, etc.) fired on every
+  render, each calling `setState` and forcing another render — an
+  infinite loop that pegged CPU, kept the loader visible forever, and
+  left the x-axis ticks empty. Stabilizing the references with
+  `useMemo` (keyed on the raw consumer references) breaks the loop.
+
 ## 5.0.3
 
 - Fix: preserve `undefined` at the Date-→-Moment boundary. Optional

package/dist/index.js

@@ -2081,9 +2081,11 @@ var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
     const xAxis = d3Scale.scaleTime().domain([domain2.min, domain2.max]).range([0, histoWidth2]);
     xAxis.clamp(true);
     xAxisRef.current = xAxis;
-    const ticks2 = xAxis.ticks(floor(histoWidth2 / p.xAxis.spaceBetweenTicks));
+    const tickCount = floor(histoWidth2 / p.xAxis.spaceBetweenTicks);
+    const ticks2 = xAxis.ticks(tickCount);
+    const tickIntervalMs = ticks2.length >= 2 ? ticks2[1].getTime() - ticks2[0].getTime() : (+domain2.max - +domain2.min) / Math.max(tickCount, 1);
     const intervalMs = max([
-      round(moment_shim_default(ticks2[1]).diff(moment_shim_default(ticks2[0])) / p.xAxis.barsBetweenTicks),
+      round(tickIntervalMs / p.xAxis.barsBetweenTicks),
       propsRef.current.smallestResolution.asMilliseconds()
     ]);
     patchState({ histoWidth: histoWidth2, isActive: true, ticks: ticks2 });
@@ -2773,19 +2775,55 @@ var TimeLine2 = react.forwardRef(function TimeLineWrapper(props, ref) {
     if (ret && typeof ret.then === "function") ret.then(apply);
     else if (ret) apply(ret);
   }, [props.onLoadDefaultDomain, props.onDomainChange, zone]);
+  const timeSpanMoments = react.useMemo(
+    () => props.timeSpan ? timeSpanToMoments(props.timeSpan, zone) : void 0,
+    [props.timeSpan, zone]
+  );
+  const maxDomainMoments = react.useMemo(
+    () => props.maxDomain ? domainToMoments(props.maxDomain, zone) : void 0,
+    [props.maxDomain, zone]
+  );
+  const histoMoments = react.useMemo(
+    () => props.histo?.items ? { ...props.histo, items: props.histo.items.map((it) => ({ ...it, time: toMoment(it.time, zone) })) } : props.histo,
+    [props.histo, zone]
+  );
+  const qualityMoments = react.useMemo(
+    () => props.quality?.items ? { ...props.quality, items: props.quality.items.map((it) => ({ ...it, time: toMoment(it.time, zone) })) } : props.quality,
+    [props.quality, zone]
+  );
+  const biggestVisibleDomainDur = react.useMemo(
+    () => props.biggestVisibleDomain != null ? toDuration(props.biggestVisibleDomain) : void 0,
+    [props.biggestVisibleDomain]
+  );
+  const biggestTimeSpanDur = react.useMemo(
+    () => props.biggestTimeSpan != null ? toDuration(props.biggestTimeSpan) : void 0,
+    [props.biggestTimeSpan]
+  );
+  const smallestResolutionDur = react.useMemo(
+    () => props.smallestResolution != null ? toDuration(props.smallestResolution) : void 0,
+    [props.smallestResolution]
+  );
+  const xAxisMerged = react.useMemo(
+    () => ({ ...xAxisDefault, ...props.xAxis ?? {} }),
+    [props.xAxis]
+  );
+  const marginMerged = react.useMemo(
+    () => ({ ...marginDefault, ...props.margin ?? {} }),
+    [props.margin]
+  );
   const innerProps = {
     ...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) : void 0,
-    maxDomain: props.maxDomain ? domainToMoments(props.maxDomain, zone) : void 0,
-    histo: props.histo?.items ? { ...props.histo, items: props.histo.items.map((it) => ({ ...it, time: toMoment(it.time, zone) })) } : props.histo,
-    quality: props.quality?.items ? { ...props.quality, items: props.quality.items.map((it) => ({ ...it, time: toMoment(it.time, zone) })) } : props.quality,
-    biggestVisibleDomain: props.biggestVisibleDomain != null ? toDuration(props.biggestVisibleDomain) : void 0,
-    biggestTimeSpan: props.biggestTimeSpan != null ? toDuration(props.biggestTimeSpan) : void 0,
-    smallestResolution: props.smallestResolution != null ? toDuration(props.smallestResolution) : void 0,
+    timeSpan: timeSpanMoments,
+    maxDomain: maxDomainMoments,
+    histo: histoMoments,
+    quality: qualityMoments,
+    biggestVisibleDomain: biggestVisibleDomainDur,
+    biggestTimeSpan: biggestTimeSpanDur,
+    smallestResolution: smallestResolutionDur,
     onUpdateDomains: handleUpdateDomains,
     onLoadDefaultDomain: handleLoadDefault,
     // onLoadHisto: object shape + Date instants