@spider-analyzer/timeline 5.0.5 → 5.0.8

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## 5.0.8
+
+- Perf: memoize the per-render histogram bar list and vertical scale.
+  Previously every cursor drag / resize / draw event (60×/sec) rebuilt
+  the entire bar list (~550 bars in Network-View's default view) from
+  scratch. Under the Luxon-backed shim each rebuild allocated 550 new
+  DateTime/MomentLike objects and re-ran d3's time scale — ~150 ms per
+  render, i.e. ≈6 fps drag. Wrap `prepareHistogram` and
+  `prepareVerticalScale` with `useMemo` keyed on the actual dependencies
+  (`domain`, `histoWidth`, `histo`) so they only recompute when those
+  change. Cursor drag returns to single-digit-ms render time.
+
+## 5.0.7
+
+- Fix: silence the `Invalid prop 'time' of type '_MomentLike', expected
+  instance of 'moment2'` React warnings that internal components
+  (Histogram, Cursor, XAxis, QualityLine, DragOverlay, CursorSelection,
+  HistoToolTip) emitted under every render. The Luxon-backed moment
+  shim is a factory function, not a class, so `PropTypes.instanceOf` is
+  the wrong check. Replaced with a `momentType` validator that uses
+  `moment.isMoment()`. No runtime behavior change — warnings only.
+
+## 5.0.6
+
+- Fix: don't issue the first `onLoadHisto` with a stale `intervalMs`
+  when the consumer hasn't measured a valid width yet. `getItems` now
+  short-circuits the fetch while `histoWidth <= 0`, and the width-change
+  effect re-runs `getItems` whenever a domain exists (not only when the
+  prior call marked `isActive=true`). Previously the first call fired
+  with `histoWidth=0`, fell back to `domainSpan / 1 tick` and divided by
+  `barsBetweenTicks` — giving a coarse interval like 3 h over a 24 h
+  window; the subsequent width arrival then never retriggered the load
+  because `isActive` was already true and the delta check failed.
+
 ## 5.0.5
 
 - Fix: compute intervalMs defensively in `getItems`. When d3's

package/dist/index.js

@@ -172,6 +172,25 @@ moment.tz = (x, zone) => {
   const base = toDT(x);
   return new MomentLike(base.setZone(zone));
 };
+function validate(props, propName, componentName) {
+  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.`
+  );
+}
+var required = (props, propName, componentName) => {
+  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);
+};
+var momentType = validate;
+momentType.isRequired = required;
 var moment_shim_default = moment;
 
 // src/utils.ts
@@ -375,8 +394,8 @@ DragOverlay.propTypes = {
   width: PropTypes11__default.default.number.isRequired,
   marginBottom: PropTypes11__default.default.number,
   items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
-    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11__default.default.number,
     x2: PropTypes11__default.default.number,
     metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
@@ -686,8 +705,8 @@ CursorSelection.propTypes = {
   showToolTipLeft: PropTypes11__default.default.func.isRequired,
   showToolTipRight: PropTypes11__default.default.func.isRequired,
   items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
-    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11__default.default.number,
     x2: PropTypes11__default.default.number,
     metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
@@ -1273,8 +1292,8 @@ Cursor.propTypes = {
   overlayHeight: PropTypes11__default.default.number.isRequired,
   overlayWidth: PropTypes11__default.default.number.isRequired,
   items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
-    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11__default.default.number,
     x2: PropTypes11__default.default.number,
     metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
@@ -1383,8 +1402,8 @@ function Histogram({
 Histogram.propTypes = {
   classes: PropTypes11__default.default.object,
   items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
-    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11__default.default.number,
     x2: PropTypes11__default.default.number,
     metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
@@ -1484,8 +1503,8 @@ function XAxis({ min, max: max2, origin, axisWidth, marks, xAxis, classes, arrow
 XAxis.propTypes = {
   axisWidth: PropTypes11__default.default.number.isRequired,
   classes: PropTypes11__default.default.object,
-  min: PropTypes11__default.default.instanceOf(moment_shim_default),
-  max: PropTypes11__default.default.instanceOf(moment_shim_default),
+  min: momentType,
+  max: momentType,
   origin: PropTypes11__default.default.shape({
     x: PropTypes11__default.default.number.isRequired,
     y: PropTypes11__default.default.number.isRequired
@@ -1810,8 +1829,8 @@ function HistoTooltip({ metricsDefinition, item, onFormatTimeToolTips, onFormatM
 HistoTooltip.propTypes = {
   classes: PropTypes11__default.default.object,
   item: PropTypes11__default.default.shape({
-    start: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11__default.default.number,
     x2: PropTypes11__default.default.number,
     metrics: PropTypes11__default.default.arrayOf(PropTypes11__default.default.number).isRequired,
@@ -1879,7 +1898,7 @@ QualityLine.propTypes = {
   xAxis: PropTypes11__default.default.func.isRequired,
   quality: PropTypes11__default.default.shape({
     items: PropTypes11__default.default.arrayOf(PropTypes11__default.default.shape({
-      time: PropTypes11__default.default.instanceOf(moment_shim_default).isRequired,
+      time: momentType.isRequired,
       quality: PropTypes11__default.default.number.isRequired,
       tip: PropTypes11__default.default.node
     })),
@@ -2089,7 +2108,7 @@ var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
       propsRef.current.smallestResolution.asMilliseconds()
     ]);
     patchState({ histoWidth: histoWidth2, isActive: true, ticks: ticks2 });
-    if (shouldReload && intervalMs) {
+    if (shouldReload && intervalMs && histoWidth2 > 0) {
       widthOfLastUpdateRef.current = p.width;
       patchState({ waitForLoad: true });
       p.onLoadHisto(intervalMs, domain2.min, domain2.max);
@@ -2119,12 +2138,11 @@ var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
       return;
     }
     const s = stateRef.current;
-    if (s.isActive) {
+    patchState(computeMarginAndWidth(props));
+    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) {
       const res = checkAndCorrectDomain({ domain: stateRef.current.domain });
@@ -2565,13 +2583,17 @@ var TimeLineInner = react.forwardRef(function TimeLine(props, ref) {
     ticks,
     dragging
   } = state;
+  const verticalScaleData = react.useMemo(() => prepareVerticalScale(), [prepareVerticalScale]);
+  const items = react.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 /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {