@spider-analyzer/timeline 5.0.6 → 5.0.9

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import { forwardRef, useRef, useEffect, useState, useCallback, useImperativeHandle, useMemo } from 'react';
+import { forwardRef, memo, useRef, useEffect, useState, useCallback, useImperativeHandle, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 import { DateTime, Duration } from 'luxon';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import PropTypes11 from 'prop-types';
@@ -162,6 +163,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
@@ -365,8 +385,8 @@ DragOverlay.propTypes = {
   width: PropTypes11.number.isRequired,
   marginBottom: PropTypes11.number,
   items: PropTypes11.arrayOf(PropTypes11.shape({
-    start: PropTypes11.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11.number,
     x2: PropTypes11.number,
     metrics: PropTypes11.arrayOf(PropTypes11.number).isRequired,
@@ -676,8 +696,8 @@ CursorSelection.propTypes = {
   showToolTipLeft: PropTypes11.func.isRequired,
   showToolTipRight: PropTypes11.func.isRequired,
   items: PropTypes11.arrayOf(PropTypes11.shape({
-    start: PropTypes11.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11.number,
     x2: PropTypes11.number,
     metrics: PropTypes11.arrayOf(PropTypes11.number).isRequired,
@@ -1263,8 +1283,8 @@ Cursor.propTypes = {
   overlayHeight: PropTypes11.number.isRequired,
   overlayWidth: PropTypes11.number.isRequired,
   items: PropTypes11.arrayOf(PropTypes11.shape({
-    start: PropTypes11.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11.number,
     x2: PropTypes11.number,
     metrics: PropTypes11.arrayOf(PropTypes11.number).isRequired,
@@ -1373,8 +1393,8 @@ function Histogram({
 Histogram.propTypes = {
   classes: PropTypes11.object,
   items: PropTypes11.arrayOf(PropTypes11.shape({
-    start: PropTypes11.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11.number,
     x2: PropTypes11.number,
     metrics: PropTypes11.arrayOf(PropTypes11.number).isRequired,
@@ -1400,6 +1420,7 @@ Histogram.propTypes = {
   barHovered: PropTypes11.number,
   tooltipVisible: PropTypes11.bool
 };
+var Histogram_default = memo(Histogram);
 
 // src/timeLineElements/axesStyles.jsx
 var arrow = `m 0,-5 5,5 -5,5`;
@@ -1474,8 +1495,8 @@ function XAxis({ min, max: max2, origin, axisWidth, marks, xAxis, classes, arrow
 XAxis.propTypes = {
   axisWidth: PropTypes11.number.isRequired,
   classes: PropTypes11.object,
-  min: PropTypes11.instanceOf(moment_shim_default),
-  max: PropTypes11.instanceOf(moment_shim_default),
+  min: momentType,
+  max: momentType,
   origin: PropTypes11.shape({
     x: PropTypes11.number.isRequired,
     y: PropTypes11.number.isRequired
@@ -1485,6 +1506,7 @@ XAxis.propTypes = {
   arrowPath: PropTypes11.string,
   onFormatTimeLegend: PropTypes11.func.isRequired
 };
+var XAxis_default = memo(XAxis);
 function YAxis({ classes, marks, yAxis, onFormatMetricLegend, maxHeight, origin, arrowPath = arrow }) {
   const className = (n) => cn(n, classes);
   return /* @__PURE__ */ jsxs(
@@ -1800,8 +1822,8 @@ function HistoTooltip({ metricsDefinition, item, onFormatTimeToolTips, onFormatM
 HistoTooltip.propTypes = {
   classes: PropTypes11.object,
   item: PropTypes11.shape({
-    start: PropTypes11.instanceOf(moment_shim_default).isRequired,
-    end: PropTypes11.instanceOf(moment_shim_default).isRequired,
+    start: momentType.isRequired,
+    end: momentType.isRequired,
     x1: PropTypes11.number,
     x2: PropTypes11.number,
     metrics: PropTypes11.arrayOf(PropTypes11.number).isRequired,
@@ -1869,7 +1891,7 @@ QualityLine.propTypes = {
   xAxis: PropTypes11.func.isRequired,
   quality: PropTypes11.shape({
     items: PropTypes11.arrayOf(PropTypes11.shape({
-      time: PropTypes11.instanceOf(moment_shim_default).isRequired,
+      time: momentType.isRequired,
       quality: PropTypes11.number.isRequired,
       tip: PropTypes11.node
     })),
@@ -1939,6 +1961,7 @@ XAxis2.propTypes = {
   xAxis: PropTypes11.func,
   yAxisHeight: PropTypes11.number
 };
+var XGrid_default = memo(XAxis2);
 
 // src/time.ts
 function toMoment(x, zone) {
@@ -1961,8 +1984,8 @@ function timeSpanToMoments(t, zone) {
   return { start: toMomentOpt(t.start, zone), stop: toMomentOpt(t.stop, zone) };
 }
 var Cursor2 = Cursor;
-var Histogram2 = Histogram;
-var XAxis3 = XAxis;
+var Histogram2 = Histogram_default;
+var XAxis3 = XAxis_default;
 var YAxis3 = YAxis;
 var Legend2 = Legend;
 var Tools2 = Tools;
@@ -2057,6 +2080,11 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
   const patchState = useCallback((patch) => {
     setStateRaw((s) => ({ ...s, ...typeof patch === "function" ? patch(s) : patch }));
   }, []);
+  const patchStateSync = useCallback((patch) => {
+    flushSync(() => {
+      setStateRaw((s) => ({ ...s, ...typeof patch === "function" ? patch(s) : patch }));
+    });
+  }, []);
   const checkAndCorrectDomain = useCallback(({ domain: domain2 }) => {
     return checkAndCorrectDomainPure({
       domain: domain2,
@@ -2300,9 +2328,9 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
         movedSinceLastFetchedRef.current = 0;
         getItems(p, { min, max: max2 });
       }
-      patchState({ domain: { min, max: max2 }, minTime, maxTime, ticks: ticks2 });
+      patchStateSync({ domain: { min, max: max2 }, minTime, maxTime, ticks: ticks2 });
     }
-  }, [moveTimeLineCore, getItems, patchState]);
+  }, [moveTimeLineCore, getItems, patchStateSync]);
   const onResizeLeftCursor = useCallback((delta, mouse) => {
     const xAxis = xAxisRef.current;
     const s = stateRef.current;
@@ -2322,9 +2350,9 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
     }
     handleAutoSliding(mouse, onResizeLeftCursor);
     if (newStop !== s.stop && newStop.isSameOrBefore(s.domain.max) || newStart.isSameOrAfter(s.domain.min)) {
-      patchState({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
+      patchStateSync({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
     }
-  }, [handleAutoSliding, patchState]);
+  }, [handleAutoSliding, patchStateSync]);
   const onResizeRightCursor = useCallback((delta, mouse) => {
     const xAxis = xAxisRef.current;
     const s = stateRef.current;
@@ -2344,9 +2372,9 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
     }
     handleAutoSliding(mouse, onResizeRightCursor);
     if (newStop.isSameOrBefore(s.domain.max) && newStart.isSameOrAfter(s.domain.min)) {
-      patchState({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
+      patchStateSync({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
     }
-  }, [handleAutoSliding, patchState]);
+  }, [handleAutoSliding, patchStateSync]);
   const onDragCursor = useCallback((delta, mouse) => {
     const xAxis = xAxisRef.current;
     const s = stateRef.current;
@@ -2360,8 +2388,8 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
     if (maxDomain.min && newStart.isBefore(maxDomain.min)) newStart = moment_shim_default(maxDomain.min);
     if (maxDomain.max && newStop.isAfter(maxDomain.max)) newStop = moment_shim_default(maxDomain.max);
     handleAutoSliding(mouse, onDragCursor);
-    patchState({ start: newStart, stop: newStop });
-  }, [handleAutoSliding, patchState]);
+    patchStateSync({ start: newStart, stop: newStop });
+  }, [handleAutoSliding, patchStateSync]);
   const onStartDrawCursor = useCallback((pos) => {
     const xAxis = xAxisRef.current;
     patchState({
@@ -2389,9 +2417,9 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
     }
     handleAutoSliding(mouse, onDrawCursor);
     if (newStop.isSameOrBefore(s.domain.max) && newStart.isSameOrAfter(s.domain.min)) {
-      patchState({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
+      patchStateSync({ start: newStart, stop: newStop, maxTimespan: maxTimespan2 });
     }
-  }, [handleAutoSliding, patchState]);
+  }, [handleAutoSliding, patchStateSync]);
   const onEndDrawCursor = useCallback(() => {
     stopAutoMove();
     const { onCustomRange, selectBarOnClick } = propsRef.current;
@@ -2554,13 +2582,17 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
     ticks,
     dragging
   } = state;
+  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 /* @__PURE__ */ jsx(
     "svg",
     {
@@ -2580,7 +2612,7 @@ var TimeLineInner = forwardRef(function TimeLine(props, ref) {
           }
         ),
         xAxisProp.showGrid && /* @__PURE__ */ jsx(
-          XAxis2,
+          XGrid_default,
           {
             classes,
             origin: pointZero,